/* Crew Share Calculator AI assistant (Beta).
   px sizes throughout (bootstrap.min.css sets html{font-size:10px}, so rem is
   unreliable here). Every button rule is scoped under aside#ca-panel.ca-panel
   to beat picoCustomizations' `.container button:not(#main-nav button)`,
   which carries ID specificity, and every text element carries its own colour
   (this page has hit the dark-mode inherited-colour trap twice). */

:root {
    --ca-bg: #ffffff;
    --ca-surface: #f4f7f7;
    --ca-border: #d5dede;
    --ca-text: #1f2a2a;
    --ca-muted: #5b6b6b;
    --ca-accent: #2f6f6f;
    --ca-accent-text: #ffffff;
    --ca-user: #e3f0ef;
    --ca-warn-bg: #fff7e6;
    --ca-warn-text: #7c5310;
    --ca-err-bg: #fdecec;
    --ca-err-text: #991b1b;
    --ca-beta: #b5651d;
}
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ca-bg: #142222;
        --ca-surface: #1b2c2c;
        --ca-border: #2f4545;
        --ca-text: #e4eeee;
        --ca-muted: #9fb3b3;
        --ca-accent: #5fb3ad;
        --ca-accent-text: #0d1a1a;
        --ca-user: #213a3a;
        --ca-warn-bg: #3a2d12;
        --ca-warn-text: #f3d29b;
        --ca-err-bg: #3d1a1a;
        --ca-err-text: #fca5a5;
    }
}
:root[data-theme="dark"] {
    --ca-bg: #142222;
    --ca-surface: #1b2c2c;
    --ca-border: #2f4545;
    --ca-text: #e4eeee;
    --ca-muted: #9fb3b3;
    --ca-accent: #5fb3ad;
    --ca-accent-text: #0d1a1a;
    --ca-user: #213a3a;
    --ca-warn-bg: #3a2d12;
    --ca-warn-text: #f3d29b;
    --ca-err-bg: #3d1a1a;
    --ca-err-text: #fca5a5;
}

.ca-beta {
    display: inline-block; vertical-align: middle;
    background: var(--ca-beta); color: #fff !important;
    font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .4px;
    padding: 3px 7px; border-radius: 10px; margin-left: 4px; text-transform: uppercase;
}

aside#ca-panel.ca-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1045;
    width: 440px; max-width: 100vw;
    display: flex; flex-direction: column;
    background: var(--ca-bg); color: var(--ca-text);
    border-left: 1px solid var(--ca-border);
    box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
    transform: translateX(105%); transition: transform .2s ease;
    font-size: 15px; line-height: 1.45;
}
aside#ca-panel.ca-panel.open { transform: none; }
aside#ca-panel.ca-panel.dragover { outline: 3px dashed var(--ca-accent); outline-offset: -8px; }
@media (max-width: 700px) {
    aside#ca-panel.ca-panel { width: 100vw; border-left: 0; }
}

aside#ca-panel .ca-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 14px; border-bottom: 1px solid var(--ca-border); background: var(--ca-surface);
}
aside#ca-panel .ca-title { font-weight: 700; font-size: 17px; color: var(--ca-text); }
aside#ca-panel .ca-title i { color: var(--ca-accent); }

aside#ca-panel .ca-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
aside#ca-panel .ca-log p, aside#ca-panel .ca-log li, aside#ca-panel .ca-log span,
aside#ca-panel .ca-log b, aside#ca-panel .ca-note { color: var(--ca-text); font-size: 15px; }
aside#ca-panel .ca-log p { margin: 0 0 6px; }
aside#ca-panel .ca-log ul { margin: 4px 0 6px; padding-left: 18px; }
/* A global rule makes every li display:block with 5px padding, which hides the marker. */
aside#ca-panel .ca-log li { display: list-item; margin: 2px 0; padding: 0; list-style: disc outside; }

aside#ca-panel .ca-msg { max-width: 92%; padding: 9px 12px; border-radius: 10px; white-space: pre-wrap; word-wrap: break-word; }
aside#ca-panel .ca-msg.user { align-self: flex-end; background: var(--ca-user); }
aside#ca-panel .ca-msg.assistant { align-self: flex-start; background: var(--ca-surface); border: 1px solid var(--ca-border); }
aside#ca-panel .ca-msg.error { align-self: flex-start; background: var(--ca-err-bg); }
aside#ca-panel .ca-msg.error, aside#ca-panel .ca-msg.error * { color: var(--ca-err-text); }
aside#ca-panel .ca-msg .ca-attached { display: block; margin-top: 4px; font-size: 13px; color: var(--ca-muted); }
aside#ca-panel .ca-thinking { color: var(--ca-muted); font-style: italic; }

aside#ca-panel .ca-card { align-self: stretch; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ca-border); background: var(--ca-surface); }
aside#ca-panel .ca-card .ca-msgtext { white-space: pre-wrap; }
aside#ca-panel .ca-sec { margin-top: 8px; }
aside#ca-panel .ca-sec > .ca-sec-label {
    display: block; font-size: 12px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--ca-muted);
}
aside#ca-panel .ca-changes li { font-size: 14px; }
aside#ca-panel .ca-box { border-radius: 8px; padding: 6px 10px; margin-top: 8px; }
aside#ca-panel .ca-box.warn { background: var(--ca-warn-bg); }
aside#ca-panel .ca-box.warn li, aside#ca-panel .ca-box.warn .ca-sec-label { color: var(--ca-warn-text) !important; }
aside#ca-panel .ca-box.err { background: var(--ca-err-bg); }
aside#ca-panel .ca-box.err li, aside#ca-panel .ca-box.err .ca-sec-label { color: var(--ca-err-text) !important; }

aside#ca-panel .ca-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 4px; }
aside#ca-panel .ca-totals span { font-size: 13px; color: var(--ca-muted); }
aside#ca-panel .ca-totals b { display: block; font-size: 15px; color: var(--ca-text); }

aside#ca-panel .ca-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
aside#ca-panel .ca-status { font-size: 14px; color: var(--ca-muted); }

aside#ca-panel .ca-compose { border-top: 1px solid var(--ca-border); padding: 10px 14px 12px; background: var(--ca-bg); }
aside#ca-panel .ca-compose textarea {
    width: 100%; margin: 0 0 8px; padding: 8px 10px; font-size: 15px; line-height: 1.4;
    min-height: 72px; max-height: 220px; resize: vertical;
    /* !important: the global form-control rules paint textareas white in dark mode. */
    background: var(--ca-bg) !important; color: var(--ca-text) !important;
    border: 1px solid var(--ca-border) !important; border-radius: 8px;
}
aside#ca-panel .ca-compose textarea::placeholder { color: var(--ca-muted); opacity: 1; }
aside#ca-panel .ca-row { display: flex; gap: 8px; align-items: center; }
aside#ca-panel .ca-row .ca-send { margin-left: auto !important; }
aside#ca-panel .ca-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
aside#ca-panel .ca-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    padding: 3px 4px 3px 10px; border-radius: 14px; font-size: 13px;
    background: var(--ca-user); color: var(--ca-text); border: 1px solid var(--ca-border);
}
aside#ca-panel .ca-chip .ca-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; color: var(--ca-text); font-size: 13px; }
aside#ca-panel .ca-note { margin: 8px 0 0; font-size: 12.5px !important; color: var(--ca-muted) !important; }

aside#ca-panel.ca-panel button {
    width: auto; margin: 0; display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; line-height: 1.2; padding: 6px 12px; border-radius: 7px; cursor: pointer;
    box-shadow: none;
}
aside#ca-panel.ca-panel button.ca-send,
aside#ca-panel.ca-panel button.ca-primary {
    background: var(--ca-accent) !important; color: var(--ca-accent-text) !important;
    border: 1px solid var(--ca-accent) !important;
}
aside#ca-panel.ca-panel button.ca-ghost {
    background: transparent !important; color: var(--ca-accent) !important;
    border: 1px solid var(--ca-border) !important;
}
aside#ca-panel.ca-panel button.ca-ghost:hover,
aside#ca-panel.ca-panel button.ca-ghost:focus { border-color: var(--ca-accent) !important; background: var(--ca-surface) !important; }
aside#ca-panel.ca-panel button.ca-send:hover,
aside#ca-panel.ca-panel button.ca-primary:hover { filter: brightness(1.08); }
aside#ca-panel.ca-panel button:disabled { opacity: .55; cursor: default; }
aside#ca-panel.ca-panel button.ca-icon {
    background: transparent !important; color: var(--ca-muted) !important;
    border: 0 !important; padding: 4px 6px; font-size: 16px;
}
aside#ca-panel.ca-panel button.ca-chip-x {
    background: transparent !important; color: var(--ca-muted) !important;
    border: 0 !important; padding: 0 4px; font-size: 14px;
}

aside#ca-panel .ca-gate { justify-content: flex-start; }
aside#ca-panel .ca-gate-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
aside#ca-panel a.ca-link-btn {
    display: inline-block; padding: 7px 14px; border-radius: 7px; font-size: 14px; text-decoration: none;
    background: var(--ca-accent); color: var(--ca-accent-text) !important; border: 1px solid var(--ca-accent);
}
aside#ca-panel a.ca-link-btn.ca-link-ghost { background: transparent; color: var(--ca-accent) !important; border-color: var(--ca-border); }