MCM/tui/styles.tcss

/* MCM TUI Stylesheet */

Screen {
    background: $surface;
}

/* ── Haupt-Layout ─────────────────────────────────────────────────────── */

#main-container {
    layout: horizontal;
    height: 1fr;
}

/* ── Seitenleiste (Konversationsliste) ────────────────────────────────── */

#sidebar {
    width: 40;
    min-width: 30;
    max-width: 55;
    border-right: solid $primary-darken-1;
}

#sidebar-title {
    background: $primary;
    color: $text;
    text-style: bold;
    padding: 0 1;
    height: 1;
}

#conv-list {
    height: 1fr;
}

#conv-list > DataTable {
    height: 1fr;
    scrollbar-gutter: stable;
}

/* ── Chat-Bereich ─────────────────────────────────────────────────────── */

#chat-area {
    width: 1fr;
    layout: vertical;
}

#chat-header {
    height: 1;
    background: $primary-darken-1;
    color: $text;
    padding: 0 1;
    text-style: bold;
}

#message-log {
    height: 1fr;
    border: none;
    padding: 0 1;
    scrollbar-gutter: stable;
}

#input-bar {
    height: auto;
    min-height: 3;
    border-top: solid $primary-darken-1;
    padding: 0 1;
    layout: horizontal;
}

#msg-input {
    width: 1fr;
    border: none;
}

#send-btn {
    width: 10;
    min-width: 8;
    margin-left: 1;
}

/* ── Kanal-Badges ─────────────────────────────────────────────────────── */

.badge-telegram  { color: $accent; }
.badge-whatsapp  { color: $success; }
.badge-sms       { color: $warning; }

/* ── Nachrichten ──────────────────────────────────────────────────────── */

.msg-inbound  { color: $text; }
.msg-outbound { color: $text-muted; }
.msg-failed   { color: $error; }

/* ── Compose Modal ────────────────────────────────────────────────────── */

#compose-dialog {
    width: 70;
    height: auto;
    border: thick $primary;
    background: $surface;
    padding: 1 2;
}

#compose-dialog Label {
    margin-top: 1;
}

#compose-dialog Select {
    width: 100%;
}

#compose-dialog Input {
    width: 100%;
}

#compose-dialog TextArea {
    width: 100%;
    height: 6;
}

#compose-buttons {
    layout: horizontal;
    margin-top: 1;
    align: right middle;
}

#compose-buttons Button {
    margin-left: 1;
}

/* ── Login-Screen ──────────────────────────────────────────────────────── */

#login-container {
    align: center middle;
    width: 100%;
    height: 1fr;
}

#login-title {
    text-style: bold;
    text-align: center;
    margin-bottom: 1;
    color: $accent;
    width: 40;
}

#login-container Label {
    width: 40;
    margin-top: 1;
}

#login-container Input {
    width: 40;
}

#login-btn {
    width: 40;
    margin-top: 1;
}

#login-error {
    width: 40;
    color: $error;
    text-align: center;
    height: 1;
}