/* Grace — a calm skin over the same markup as the LCARS build.
   Warm paper, sage and sand, soft edges, generous space. No black field, no bars, no elbow.
   Same class names so one codebase serves both sites; the hostname picks the sheet. */

:root {
    --g-paper: #fbf9f5;
    --g-paper-2: #f4f1ea;
    --g-ink: #2f3a34;
    --g-ink-soft: #5c6b62;
    --g-sage: #7c9885;
    --g-sage-deep: #5f7a68;
    --g-sand: #e6ddcd;
    --g-blush: #dcc3bb;
    --g-line: #e2dbcf;
    --g-card: #ffffff;
    --g-rail: 210px;
}

html, body {
    background: var(--g-paper);
    color: var(--g-ink);
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    letter-spacing: 0;
    font-size: 17px;
    line-height: 1.6;
}

.mud-layout, .mud-main-content { background: var(--g-paper) !important; }

a { color: var(--g-sage-deep); text-decoration: none; border-bottom: 1px solid rgba(124, 152, 133, .35); }
a:hover, a:focus { color: var(--g-ink); border-bottom-color: var(--g-sage); }

* { scrollbar-color: var(--g-sand) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--g-sand); border-radius: 8px; }
::selection { background: #d8e6dc; color: var(--g-ink); }
body { margin: 0; overflow-x: hidden; overflow-y: auto; }

/* ---------------------------------------------------------------- shell */
.lcars {
    display: grid;
    grid-template-columns: var(--g-rail) 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "rail head"
        "rail body"
        "rail foot";
    min-height: 100dvh;
    gap: 0 34px;
    padding: 34px 40px 34px 0;
    box-sizing: border-box;
    background: var(--g-paper);
    max-width: 1180px;
    margin: 0 auto;
}

.lcars-rail {
    grid-area: rail;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0 0 28px;
    border-right: 1px solid var(--g-line);
}

/* rail: quiet text links, not tabs */
.lcars-rail .lcars-bar,
.lcars-rail .lcars-btn {
    background: transparent !important;
    color: var(--g-ink-soft) !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-height: 38px;
    padding: 6px 0 !important;
    justify-content: flex-start !important;
    font-family: inherit;
    font-size: .95rem;
    letter-spacing: .02em;
    text-transform: none;
    box-shadow: none;
}
.lcars-rail .lcars-bar:hover,
.lcars-rail .lcars-btn:hover { color: var(--g-ink) !important; background: transparent !important; }

/* ---------------------------------------------------------------- header */
.lcars-head { grid-area: head; display: flex; align-items: center; gap: 12px; }
.lcars-head .lcars-bar {
    background: var(--g-sand) !important;
    color: var(--g-ink) !important;
    border-radius: 999px !important;
    min-height: 34px;
    padding: 5px 18px !important;
    font-family: inherit;
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: none;
    box-shadow: none;
}
.lcars-head .lcars-bar.right { background: transparent !important; color: var(--g-ink-soft) !important; }

/* the LCARS elbow has no meaning on paper */
.lcars-elbow { display: none !important; }

/* ---------------------------------------------------------------- body */
.lcars-body { grid-area: body; padding-top: 22px; }
.lcars-title {
    font-family: inherit;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--g-ink);
    margin: 0 0 6px;
}
.lcars-sub {
    font-family: inherit;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g-ink-soft);
}
.lcars-text { font-size: 1.02rem; color: var(--g-ink); line-height: 1.7; }

.lcars-panel {
    background: var(--g-card);
    border: 1px solid var(--g-line);
    border-radius: 20px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(47, 58, 52, .04), 0 10px 28px rgba(47, 58, 52, .05);
    overflow-y: auto;
}
.lcars-panel::before { display: none !important; } /* kills the LCARS elbow */

.lcars-msg {
    background: var(--g-paper-2);
    border: 1px solid var(--g-line);
    border-radius: 16px;
    padding: 12px 16px;
    font-family: inherit;
    font-size: .99rem;
    line-height: 1.6;
    text-transform: none;
    letter-spacing: 0;
    color: var(--g-ink);
}
.lcars-msg strong { font-weight: 600; }

/* ---------------------------------------------------------------- controls */
.lcars-input, textarea, input[type="text"], input[type="email"], input[type="password"], .form-control {
    background: var(--g-card) !important;
    color: var(--g-ink) !important;
    border: 1px solid var(--g-line) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}
.lcars-input:focus, textarea:focus, .form-control:focus {
    border-color: var(--g-sage) !important;
    box-shadow: 0 0 0 3px rgba(124, 152, 133, .18) !important;
    outline: none;
}

.lcars-btn, .btn-primary, button[type="submit"], button.lcars-round {
    background: var(--g-sage) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 11px 22px !important;
    font-family: inherit !important;
    font-size: .95rem !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
    font-weight: 500;
    box-shadow: none;
    cursor: pointer;
    transition: background .15s ease;
}
.lcars-btn:hover, .btn-primary:hover, button[type="submit"]:hover { background: var(--g-sage-deep) !important; }

.lcars-round {
    width: 52px; height: 52px;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--g-card) !important;
    color: var(--g-sage-deep) !important;
    border: 1px solid var(--g-sand) !important;
    box-shadow: 0 2px 10px rgba(47, 58, 52, .08) !important;
}
.lcars-round:hover { background: var(--g-paper-2) !important; }

label, .form-label {
    color: var(--g-ink-soft);
    text-transform: none;
    letter-spacing: .04em;
    font-size: .85rem;
    font-family: inherit;
}
.card { background: var(--g-card); border: 1px solid var(--g-line); border-radius: 20px; box-shadow: none; }
.card-body { padding: 24px; }

/* ---------------------------------------------------------------- foot */
.lcars-foot { grid-area: foot; padding-top: 18px; color: var(--g-ink-soft); font-size: .82rem; }

/* ---------------------------------------------------------------- phones */
/* Identity pages (sign-in) are the only screens that use a bare <main>: give them air on both
   sides instead of letting the form run into the edge, and centre the card. Chat's main is
   .lcars-body and must not pick this up. */
/* Identity pages render straight into <body> with the Bootstrap grid, so the row is the outer
   container: no main wrapper, and the grid's negative margins put the form against the edge. */
body > .row {
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    padding: 46px clamp(26px, 8vw, 120px) 60px;
}
body > .row > [class*="col-"] { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
body h1 { font-size: 1.9rem; font-weight: 400; margin: 0 0 18px; }
body h2 { font-size: 1rem; font-weight: 400; color: var(--g-ink-soft); letter-spacing: .02em; }
/* The front door, sized for a phone held at arm's length rather than a desk monitor. */
body h1.greet {
    font-size: clamp(2.4rem, 9vw, 3.2rem);
    line-height: 1.1;
    margin: 0 0 6px;
    color: var(--g-ink);
}
body h2.welcome {
    font-size: clamp(1.05rem, 4.4vw, 1.3rem);
    color: var(--g-sage-deep);
    letter-spacing: .01em;
    margin: 0 0 4px;
}
body hr { border: 0; border-top: 1px solid var(--g-line); margin: 14px 0 20px; }

@media (max-width: 760px) {
    html, body { font-size: 16px; }
    body > .row { padding: 26px 22px 44px; max-width: 100%; }
    .lcars {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas: "rail" "head" "body" "foot";
        gap: 8px;
        padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    }
    .lcars-rail {
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--g-line);
        padding: 0 0 6px;
        gap: 14px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .lcars-rail::-webkit-scrollbar { display: none; }
    .lcars-rail > * { flex: 0 0 auto; }
    .lcars-rail > div[style*="flex:1"] { display: none; }
    .lcars-head { flex-wrap: wrap; }
    .lcars-panel { max-height: none !important; min-height: 0 !important; padding: 16px; border-radius: 16px; }
    .lcars-title { font-size: 1.5rem; }
    .lcars-input, .form-control, textarea, input[type="text"], input[type="email"], input[type="password"] { font-size: 16px !important; }
    main { padding: 18px 14px; }
}

/* ---------------------------------------------------------------- her palettes
   Chosen so "change it to my own needs" is real: she can move the page to a quieter or darker
   mood without touching anything structural, and the choice is remembered per account. */
html[data-palette="dusk"] {
    --g-paper: #3a3f47;
    --g-paper-2: #444a53;
    --g-card: #464d57;
    --g-ink: #eceff1;
    --g-ink-soft: #c2c9d0;
    --g-sage: #9db4a5;
    --g-sage-deep: #b9cbbf;
    --g-sand: #5b636d;
    --g-line: #565e68;
}
html[data-palette="rose"] {
    --g-paper: #fbf3f2;
    --g-paper-2: #f6e8e6;
    --g-card: #fffdfd;
    --g-ink: #46383a;
    --g-ink-soft: #7b6265;
    --g-sage: #b98a8f;
    --g-sage-deep: #96686e;
    --g-sand: #eddad8;
    --g-line: #e8d5d3;
}
html[data-palette="night"] {
    --g-paper: #171a20;
    --g-paper-2: #1f232b;
    --g-card: #21252d;
    --g-ink: #e8e6e1;
    --g-ink-soft: #a7a9a5;
    --g-sage: #8aa693;
    --g-sage-deep: #a8c2b1;
    --g-sand: #323841;
    --g-line: #2c323a;
}
html[data-palette="dusk"] body, html[data-palette="night"] body,
html[data-palette="dusk"] .mud-layout, html[data-palette="night"] .mud-layout { background: var(--g-paper) !important; }
html[data-palette="dusk"] a, html[data-palette="night"] a { color: var(--g-sage-deep); }

/* text size — large is genuinely large, because the point is not having to lean in */
html[data-scale="large"] { font-size: 19px; }
html[data-scale="large-x"] { font-size: 21.5px; }
html[data-scale="large"] .lcars-msg, html[data-scale="large-x"] .lcars-msg { font-size: 1.05em; }
html[data-scale="large"] .lcars-title, html[data-scale="large-x"] .lcars-title { font-size: 2.2em; }

/* the quote under the sign-in form */
.grace-quote {
    margin: 34px auto 6px;
    max-width: 40rem;
    text-align: center;
    font-style: italic;
    font-size: 1.55rem;
    line-height: 1.55;
    color: var(--g-ink);
}
.grace-quote .who {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-size: .85rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g-sage-deep);
}
.grace-quote::before { content: "“"; display: block; font-size: 3.2rem; color: var(--g-sand); line-height: .55; }
@media (max-width: 760px) {
    .grace-quote { font-size: 1.32rem; margin-top: 26px; }
    .grace-quote::before { font-size: 2.6rem; }
}

/* voice controls: the note button and the two-way toggle sit beside the mic, calm but obvious */
.lcars-btn.note, .lcars-btn.convo {
    background: var(--g-card) !important;
    color: var(--g-sage-deep) !important;
    border: 1px solid var(--g-sand) !important;
    min-width: 118px;
    justify-content: center;
}
.lcars-btn.note.rec { background: var(--g-blush) !important; color: #5a3a33 !important; }
.lcars-btn.convo.on {
    background: var(--g-sage) !important;
    color: #fff !important;
    border-color: var(--g-sage) !important;
}
@media (max-width: 760px) {
    .lcars-btn.note, .lcars-btn.convo { min-width: 0; padding: 9px 14px !important; font-size: .9rem !important; }
}

/* ---------------------------------------------------------------- conversations
   Several threads at once: a quiet horizontal strip. Newest first, scrolled sideways on a phone
   so it never pushes the messages down the page. */
.threads {
    display: flex; gap: 8px; align-items: center;
    overflow-x: auto; padding: 2px 2px 10px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.threads::-webkit-scrollbar { display: none; }
.thread {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    border: 1px solid var(--g-line); border-radius: 999px; background: var(--g-card);
    max-width: 15rem;
}
.thread.current { border-color: var(--g-sage); box-shadow: 0 0 0 3px rgba(124,152,133,.16); }
.thread button {
    border: 0; background: transparent; font-family: inherit; cursor: pointer;
    color: var(--g-ink-soft); font-size: .88rem; padding: 8px 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thread.current button.open { color: var(--g-ink); }
.thread button.kill { padding: 8px 10px 8px 2px; color: var(--g-ink-soft); font-size: 1rem; }
.thread button.kill:hover { color: #a4626a; }
.thread.new { background: var(--g-sage); border-color: var(--g-sage); }
.thread.new button, .thread button.new { color: #fff; padding: 8px 16px; font-weight: 500; }
.thread.new:hover { background: var(--g-sage-deep); }
.thread-error { color: #a4626a; font-size: .9rem; padding: 0 2px 8px; }


/* ---------------------------------------------------------------- dark and light
   One switch, not a palette picker: paper in daylight, deep green-black at night. The attribute
   lives on <html> so it applies before first paint and to the login page too. */
html[data-theme="dark"] {
    --g-paper: #151a17;
    --g-paper-2: #1b211d;
    --g-ink: #e9e6de;
    --g-ink-soft: #a7b2a9;
    --g-sage: #8fae99;
    --g-sage-deep: #a8c6b3;
    --g-sand: #2b332d;
    --g-blush: #6a4a44;
    --g-line: #313a34;
    --g-card: #1d2420;
}
html[data-theme="dark"] { background: var(--g-paper); }
html[data-theme="dark"] body { background: var(--g-paper); color: var(--g-ink); }
html[data-theme="dark"] ::selection { background: #3a4a3f; color: var(--g-ink); }
html[data-theme="dark"] .mud-layout,
html[data-theme="dark"] .mud-main-content { background: var(--g-paper) !important; }
html[data-theme="dark"] .lcars,
html[data-theme="dark"] .lcars-panel { background: var(--g-paper) !important; }
html[data-theme="dark"] .lcars-panel { border-color: var(--g-line) !important; }
html[data-theme="dark"] .lcars-input,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control {
    background: var(--g-card) !important;
    color: var(--g-ink) !important;
    border-color: var(--g-line) !important;
}
html[data-theme="dark"] .mud-input-outlined,
html[data-theme="dark"] .mud-select .mud-input-outlined { background: transparent; }
html[data-theme="dark"] .mud-typography,
html[data-theme="dark"] .mud-text-secondary,
html[data-theme="dark"] .mud-button-root { color: var(--g-ink) !important; }
html[data-theme="dark"] .thread { background: var(--g-card) !important; border-color: var(--g-line) !important; }
html[data-theme="dark"] .thread.new { background: var(--g-sage) !important; border-color: var(--g-sage) !important; }
html[data-theme="dark"] .lcars-btn,
html[data-theme="dark"] button[type="submit"],
html[data-theme="dark"] .lcars-round { background: var(--g-sage) !important; color: #10201a !important; }
html[data-theme="dark"] .grace-quote { color: var(--g-ink) !important; }
html[data-theme="dark"] .grace-quote::before { color: var(--g-sand); }

/* the only model there is: a quiet label, not a dropdown */
.model-fixed {
    color: var(--g-ink-soft);
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid var(--g-line);
    border-radius: 999px;
    padding: 6px 14px;
}
.theme-swap {
    border: 1px solid var(--g-line);
    background: var(--g-card);
    color: var(--g-ink-soft);
    border-radius: 999px;
    font-family: inherit;
    font-size: .82rem;
    letter-spacing: .06em;
    padding: 6px 14px;
    cursor: pointer;
}
.theme-swap:hover { color: var(--g-ink); border-color: var(--g-sage); }

/* Subspace Link is MudText with an inline LCARS colour; inline styles need !important to lose */
.lcars-body [style*="lcars-orange"] {
    color: var(--g-ink) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
}

/* ---------------------------------------------------------------- conversations, at the side
   Wide screens: a column on the left, sticky, its own scroll. Phone: back to a strip under the
   header so the conversation keeps the width. */
@media (min-width: 900px) {
    .lcars-body > .mud-container {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        column-gap: 26px;
        align-items: start;
    }
    .lcars-body > .mud-container > * { grid-column: 2; min-width: 0; }
    .lcars-body > .mud-container > .threads {
        grid-column: 1;
        grid-row: 1 / span 80;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        overflow-x: visible;
        overflow-y: auto;
        max-height: calc(100dvh - 200px);
        position: sticky;
        top: 16px;
        padding: 0;
        scrollbar-width: none;
    }
    .threads .thread { max-width: 100%; border-radius: 14px; }
    .threads .thread button { width: 100%; text-align: left; }
    .threads .thread button.kill { width: auto; padding: 8px 10px; }
    .threads .thread { display: flex; }
    .threads .thread button.open { flex: 1 1 auto; }
    .threads .thread.new { justify-content: center; border-radius: 14px; }
    .threads .thread.new button { text-align: center; }
}


/* ---------------------------------------------------------------- settings page */
.settings-block {
    border: 1px solid var(--g-line);
    border-radius: 16px;
    padding: 18px 20px 16px;
    margin: 0 0 16px;
    background: var(--g-card);
}
.settings-block h2 {
    font-size: 1.15rem;
    font-weight: 500;
    margin: 0 0 4px;
    color: var(--g-ink);
}
.settings-note { color: var(--g-ink-soft); font-size: .92rem; margin: 0 0 12px; }
.settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--g-line);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
}
.settings-row.on { border-color: var(--g-sage); background: rgba(124, 152, 133, .08); }
.settings-row input { accent-color: var(--g-sage); }
.settings-label { flex: 1; color: var(--g-ink); }
.settings-hint { color: var(--g-ink-soft); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.settings-play, .settings-chip {
    border: 1px solid var(--g-line);
    background: transparent;
    color: var(--g-ink-soft);
    border-radius: 999px;
    padding: 6px 16px;
    font-family: inherit;
    font-size: .88rem;
    cursor: pointer;
}
.settings-play:hover, .settings-chip:hover { color: var(--g-ink); border-color: var(--g-sage); }
.settings-chip.on { background: var(--g-sage); border-color: var(--g-sage); color: #fff; }
.settings-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-chip.swatch.rose { border-color: #d8b7ad; }
.settings-chip.swatch.dusk { border-color: #9aa7bb; }
.settings-chip.swatch.night { border-color: #4a5348; }

/* attachments */
.attach-input { display: none; }
.attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--g-line);
    border-radius: 999px;
    padding: 6px 8px 6px 14px;
    margin-bottom: 10px;
    font-size: .9rem;
    color: var(--g-ink-soft);
    background: var(--g-card);
}
.attach-chip button {
    border: 0;
    background: transparent;
    color: var(--g-ink-soft);
    font-size: 1.05rem;
    cursor: pointer;
    padding: 0 6px;
}
.attach-btn { font-size: 1.05rem; }


/* ---------------------------------------------------------------- the chat page, on a phone
   Five controls in one row do not fit 390px: the composer wraps so the text box gets the full
   width and the buttons sit underneath it instead of running off the edge. */
.composer {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}
.composer .lcars-input { flex: 1 1 320px; min-width: 0; }
.composer .attach-btn { flex: 0 0 auto; }

/* LCARS leftovers that carry no meaning on paper: the footer bar and the rail's coloured tabs */
.lcars-foot {
    background: transparent !important;
    color: var(--g-ink-soft) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding-top: 16px;
}
.lcars-rail .lcars-bar.slim,
.lcars-rail .lcars-bar.gold,
.lcars-rail .lcars-bar.pink,
.lcars-rail .lcars-bar.purple,
.lcars-rail .lcars-bar.salmon {
    background: transparent !important;
    color: var(--g-sage-deep) !important;
    border: 0 !important;
    letter-spacing: .16em;
    font-size: .74rem;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .composer { gap: 8px; }
    .composer .lcars-input { flex: 1 1 100%; order: 1; min-height: 88px; }
    .composer .attach-btn { order: 2; }
    .composer .lcars-round { order: 2; }
    .composer .lcars-btn.note { order: 3; flex: 1 1 44%; min-width: 0; }
    .composer .lcars-btn.convo { order: 3; flex: 1 1 44%; min-width: 0; }
    .composer .lcars-bar.gold { order: 4; flex: 1 1 100%; }
    .lcars-panel { min-height: 46vh !important; max-height: 52vh !important; }
    .threads { padding-bottom: 6px; }
}


/* ---------------------------------------------------------------- the message panel
   It used to be hard-coded black, which is fine on a starship and wrong in a living room. The
   colour is now one of five, chosen in settings and applied before the first paint. */
html { --panel-bg: #fffdf9; --panel-ink: #2f3a34; --panel-line: #e6ddcd; }
html[data-panel="sage"]  { --panel-bg: #edf3ee; --panel-ink: #26332b; }
html[data-panel="sand"]  { --panel-bg: #f8f0e3; --panel-ink: #3a3128; }
html[data-panel="slate"] { --panel-bg: #e9edf2; --panel-ink: #2a3138; }
html[data-panel="night"] { --panel-bg: #1b2320; --panel-ink: #e9e6de; }

.chat-panel {
    background: var(--panel-bg) !important;
    border: 1px solid var(--panel-line) !important;
    border-radius: 16px !important;
}
.chat-panel, .chat-panel .mud-typography, .chat-panel .lcars-msg, .chat-panel .lcars-msg .who {
    color: var(--panel-ink) !important;
}
.chat-panel .mud-progress-linear { background: rgba(0, 0, 0, .06) !important; }

/* ---------------------------------------------------------------- the four tools, then Send
   Same shape, same height, one row: file, talk, voice note, two-way. The box she writes in gets
   the full width underneath, with Send beside it. */
.tool-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.tool-btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    padding: 8px 14px;
    border: 1px solid var(--g-line);
    border-radius: 13px;
    background: var(--g-card);
    color: var(--g-ink-soft);
    font-family: inherit;
    font-size: .93rem;
    cursor: pointer;
}
.tool-btn:hover:not(:disabled) { border-color: var(--g-sage); color: var(--g-ink); }
.tool-btn.on { background: var(--g-sage); border-color: var(--g-sage); color: #fff; }
.tool-btn.rec { background: var(--g-blush); border-color: var(--g-blush); color: #5a3a33; }
.tool-btn:disabled { opacity: .45; cursor: not-allowed; }
.tool-icon { font-size: 1rem; line-height: 1; }

.send-row { display: flex; gap: 10px; align-items: stretch; }
.send-row .lcars-input { flex: 1 1 auto; min-width: 0; }
.send-btn {
    flex: 0 0 auto;
    min-width: 100px;
    border: 0;
    border-radius: 14px;
    background: var(--g-sage);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}
.send-btn:hover:not(:disabled) { background: var(--g-sage-deep); }
.send-btn:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 760px) {
    .tool-btn { flex: 1 1 46%; font-size: .88rem; }
    .send-btn { min-width: 82px; }
    .chat-panel { max-height: 46vh !important; min-height: 40vh !important; }
}

/* The panel colour must beat the skin's own .lcars-panel rule in both themes: same specificity,
   written last, so it wins whichever theme is on. */
html .chat-panel,
html[data-theme="dark"] .chat-panel {
    background: var(--panel-bg) !important;
    border: 1px solid var(--panel-line) !important;
}
html[data-theme="dark"] { --panel-line: rgba(255, 255, 255, .12); }
html[data-panel="night"] { --panel-line: rgba(255, 255, 255, .14); }

/* The older composer rules put the text box and buttons in an explicit order; the new layout is
   a plain row, so reset the order or Send jumps to the left of the box. */
.composer .send-row .lcars-input { order: 0 !important; flex: 1 1 auto !important; min-height: 64px; }
.composer .send-btn { order: 0 !important; }
.chat-panel .mud-text-secondary { color: var(--panel-ink) !important; opacity: .7; }

/* four tools on one line on a phone: icon over label, evenly sized */
@media (max-width: 760px) {
    .tool-row { gap: 6px; flex-wrap: nowrap; }
    .tool-btn {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        gap: 3px;
        padding: 8px 4px;
        font-size: .72rem;
        min-height: 56px;
    }
    .tool-icon { font-size: 1.1rem; }
    .send-btn { min-width: 76px; }
}

/* The composer is a plain block again: as a flex container it shrink-wrapped its rows, so the
   four tools squeezed into a third of the width. */
.composer { display: block !important; }
.composer .tool-row, .composer .send-row { width: 100%; }


/* ---------------------------------------------------------------- conversations in the rail
   The list moved out of the message column and into the sidebar, where the LCARS tabs used to be:
   it is the one thing she uses constantly, so it gets the full height rather than a scrolling strip. */
.lcars-rail .rail-threads {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--g-line);
    flex: 1;
}
.lcars-rail .threads {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: none;
    padding: 0;
    scrollbar-width: thin;
}
.lcars-rail .thread {
    max-width: 100%;
    border-radius: 12px;
    display: flex;
}
.lcars-rail .thread button.open { flex: 1 1 auto; text-align: left; min-width: 0; }
.lcars-rail .thread button.kill { width: auto; }
.lcars-rail .thread.new { justify-content: center; }
.lcars-rail .thread.new button { text-align: center; }

@media (max-width: 760px) {
    .lcars-rail .rail-threads { border-top: 0; margin-top: 8px; padding-top: 0; }
    .lcars-rail .threads { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
    .lcars-rail .thread { flex: 0 0 auto; }
}

/* With the conversations in the rail, the body is a single column again — the old grid was still
   reserving a 220px column for a list that no longer lives there, which pushed everything right. */
@media (min-width: 900px) {
    .lcars-body > .mud-container { display: block; }
    .lcars-body > .mud-container > * { grid-column: auto; }
}

/* A picture in the conversation: full width of the bubble, rounded like everything else. */
.chat-img {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    margin: 12px 0 4px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: var(--g-sand);
}

/* Text inside the message panel takes its colour from the panel it sits on, not from the page.
   Without this the hint and the speaker names stayed a fixed grey and vanished whenever she
   picked a dark theme or a coloured panel. */
html[data-panel="paper"] { --panel-ink: #4a5850; --panel-ink-soft: #6b7a72; }
html[data-panel="sage"]  { --panel-ink: #33452f; --panel-ink-soft: #52664c; }
html[data-panel="sand"]  { --panel-ink: #52452d; --panel-ink-soft: #6d5f45; }
html[data-panel="slate"] { --panel-ink: #31404f; --panel-ink-soft: #4e5f71; }
html[data-panel="night"] { --panel-ink: #e6ece7; --panel-ink-soft: #aab8b0; }

/* The panel colours do not change with the theme: paper, sage, sand and slate stay light even in
   dark mode, so their ink must stay dark too. Only "night" is genuinely dark. Getting this wrong
   is what made the hint pale grey on a pale panel. */

.chat-hint {
    margin: 0;
    color: var(--panel-ink-soft, var(--g-ink-soft)) !important;
    font-size: .95rem;
}

/* Speaker names and body text live on the panel, so they follow the panel's ink. */
.chat-panel .who { color: var(--panel-ink-soft, var(--g-ink-soft)) !important; }
.chat-panel .lcars-msg .mud-typography,
.chat-panel .lcars-msg { color: var(--panel-ink, var(--g-ink)); }