/*
    Purpose: Styles the workspace pages (search, My Work, calendar, crew clashes, readiness,
    history) and the custom view filter picker. Signal tokens only, so both themes follow.
*/

/* Global search in the top bar. Hidden on narrow screens, where the Search page and the
   "/" shortcut remain available. */
.topbar-search {
    flex: 0 1 360px;
    margin-inline: var(--space-md) auto;
}

.topbar-search .input-wrap { position: relative; }
.topbar-search .input { padding-inline-end: 32px; width: 100%; }

.topbar-search-key {
    inset-block-start: 50%;
    inset-inline-end: 8px;
    pointer-events: none;
    position: absolute;
    transform: translateY(-50%);
}

@media (max-width: 700px) {
    .topbar-search { display: none; }
}

/* Stat tiles that act as filters. */
.workspace-page .card.stat { padding: var(--space-sm) var(--space-md); }
.workspace-page .card.stat .value { font-size: var(--text-2xl); }
.workspace-page .card-link.is-selected { border-color: var(--border-brand); box-shadow: inset 0 0 0 1px var(--border-brand); }

.workspace-search-grid { gap: var(--space-sm); }
.workspace-search-grid .list-row { min-height: 48px; }

/* Events calendar: a seven column month grid that becomes an agenda on phones. */
.cal-legend { gap: var(--space-xs); }

.cal-month {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.cal-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-row + .cal-row { border-top: 1px solid var(--border-subtle); }

.cal-dow {
    background: var(--bg-surface-2);
    color: var(--text-tertiary);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    padding: var(--space-2xs) var(--space-xs);
    text-transform: uppercase;
}

.cal-day {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 112px;
    min-width: 0;
    padding: var(--space-2xs);
}

.cal-day + .cal-day { border-inline-start: 1px solid var(--border-subtle); }
.cal-day.is-outside { background: var(--bg-surface-2); }
.cal-day.is-outside .cal-date { color: var(--text-disabled); }

.cal-date {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-medium);
}

.cal-date-full { display: none; }

.cal-day.is-today .cal-date-num {
    background: var(--bg-accent);
    border-radius: var(--radius-full);
    color: var(--text-on-accent);
    display: inline-grid;
    height: 22px;
    place-content: center;
    width: 22px;
}

.cal-entry {
    border-inline-start: 3px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    display: block;
    font-size: var(--text-xs);
    line-height: 1.3;
    overflow: hidden;
    padding: 2px var(--space-2xs);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-entry:hover { filter: brightness(0.96); color: var(--text-primary); }
.cal-entry.is-setup { background: var(--bg-warning-subtle); border-inline-start-color: var(--border-warning); }
.cal-entry.is-recording { background: var(--bg-brand-subtle); border-inline-start-color: var(--border-brand); }
.cal-entry.is-broadcast { background: var(--bg-info-subtle); border-inline-start-color: var(--border-info); }
.cal-entry.is-event { background: var(--bg-surface-2); border-inline-start-color: var(--border-strong, var(--border-default)); }

/* Event days: a typed day or run of days on a record page and in the event dates review. */
.day-type { display: inline-block; margin-inline-end: var(--space-2xs); padding-block: 1px; }
.day-list { display: grid; gap: var(--space-3xs); list-style: none; margin: 0; padding: 0; }
.day-list li { align-items: center; display: flex; flex-wrap: wrap; font-size: var(--text-sm); }
.day-suggestion { border-inline-start: 3px solid var(--border-brand); }
.date-review-text { color: var(--text-secondary); font-size: var(--text-sm); white-space: normal; }
.date-review-table td { vertical-align: top; white-space: normal; }
.cal-legend .cal-entry { display: inline-block; }

@media (max-width: 700px) {
    .cal-row { grid-template-columns: 1fr; }
    .cal-head { display: none; }
    .cal-row + .cal-row { border-top: 0; }
    .cal-day { min-height: 0; padding: var(--space-xs) var(--space-sm); }
    .cal-day + .cal-day { border-inline-start: 0; }
    .cal-day:not(.is-empty) { border-top: 1px solid var(--border-subtle); }
    .cal-day.is-empty, .cal-day.is-outside { display: none; }
    .cal-date-full { display: inline; }
    .cal-date-num { display: none; }
    .cal-entry { font-size: var(--text-sm); white-space: normal; }
}

/* The shell truncates block children of table cells to one line; wrapping cells on
   workspace pages may run to two lines instead. */
.workspace-page .table td.cell-wrap > div { white-space: normal; }

/* Readiness: fixed columns so long event names wrap instead of pushing the Missing
   column off screen, and failed checks wrap inside their cell rather than clipping. */
.readiness-table { table-layout: fixed; width: 100%; }
.readiness-missing { flex-wrap: wrap; gap: var(--space-3xs); }
.readiness-missing .lozenge { max-width: none; overflow: visible; }

/* Team grid: week column and person headings stay visible while the grid scrolls. */
.team-grid-wrap { max-height: 75vh; overflow: auto; }
.team-grid { table-layout: fixed; }
.team-grid th, .team-grid td { vertical-align: top; }
.team-grid thead th { background: var(--bg-surface-2); inset-block-start: 0; position: sticky; z-index: 2; }
.team-grid .team-grid-week { background: var(--bg-surface-2); inset-inline-start: 0; position: sticky; white-space: nowrap; width: 160px; z-index: 1; }
.team-grid thead .team-grid-week { z-index: 3; }
.team-grid tr.is-current th, .team-grid tr.is-current td { background: var(--bg-brand-subtle); }
.team-grid-entry {
    background: var(--bg-brand-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    display: block;
    font-size: var(--text-xs);
    line-height: 1.3;
    margin-block-end: 2px;
    padding: 2px var(--space-2xs);
    text-decoration: none;
}
.team-grid-entry:hover { color: var(--text-primary); filter: brightness(0.96); }

/* History change tables sit inside the timeline. */
.history-changes { font-size: var(--text-sm); table-layout: fixed; width: 100%; }
.history-changes th[scope="row"] { color: var(--text-secondary); font-weight: var(--weight-medium); }

/* Custom view filter picker: a searchable checklist in place of a multi-select box. */
.filter-picker {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-xs);
}

.filter-picker-head {
    align-items: center;
    display: flex;
    gap: var(--space-xs);
    justify-content: space-between;
}

.filter-picker-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
    padding-inline-end: var(--space-2xs);
}

.filter-picker-options .chk { min-height: 26px; }
.filter-picker-options .chk[hidden] { display: none; }
.filter-picker-empty { color: var(--text-tertiary); font-size: var(--text-xs); }

/* Operational grids: view bar, adjustable filter bar, save panel, and group summary. */
.grid-view-bar > form { flex: 0 0 auto; flex-wrap: nowrap; margin: 0; }
.grid-view-bar > form.filter-bar { flex: 0 1 auto; }
.grid-view-bar > form.filter-bar > .input { min-width: 180px; }
.grid-summary-bar form { margin: 0; }
.grid-filter-bar .input { min-width: 0; }
.grid-custom-dates { flex-wrap: nowrap; gap: var(--space-2xs); }
.grid-custom-dates[hidden] { display: none; }
.grid-summary-bar { row-gap: var(--space-2xs); }

.grid-save-view { position: relative; }
.grid-save-view > summary { list-style: none; }
.grid-save-view > summary::-webkit-details-marker { display: none; }
.grid-save-view > .popover-panel {
    inset-block-start: calc(100% + 4px);
    inset-inline-end: 0;
    position: absolute;
    width: 300px;
    z-index: var(--z-dropdown);
}

.grid-group-summary > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    gap: var(--space-xs);
    list-style: none;
    padding: var(--space-sm) var(--space-md);
}

.grid-group-summary > summary::-webkit-details-marker { display: none; }
.grid-group-summary > summary .chevron { margin-inline-start: auto; transition: transform var(--dur-2) var(--ease-standard); }
.grid-group-summary[open] > summary .chevron { transform: rotate(180deg); }
.grid-group-summary .table-wrap { border-top: 1px solid var(--border-subtle); max-height: 360px; overflow-y: auto; }

.saved-views-table form { display: inline-flex; margin: 0; }

/* Saved view builder: ordered column list and health notes. */
.view-column-order {
    display: grid;
    gap: var(--space-3xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.view-column-order li {
    align-items: center;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    display: flex;
    font-size: var(--text-sm);
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-2xs) var(--space-3xs) var(--space-xs);
}

.view-column-order li .position { color: var(--text-tertiary); font-variant-numeric: tabular-nums; min-width: 1.5em; }
.view-column-order li .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-column-order li .btn { min-width: 0; padding-inline: var(--space-2xs); }
.view-column-order-empty { color: var(--text-tertiary); font-size: var(--text-sm); }

.view-columns-layout {
    align-items: start;
    display: grid;
    gap: var(--space-md);
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
}

@media (max-width: 900px) {
    .view-columns-layout { grid-template-columns: 1fr; }
}

.view-health { display: grid; gap: var(--space-3xs); margin: 0; padding-inline-start: var(--space-md); }

/* Drill-through scope chips on a grid opened from a record or a report. */
.grid-scope-chip a { color: inherit; text-decoration: none; }
.grid-scope-chip a:first-child:hover { text-decoration: underline; }
.grid-scope-chip a:last-child { display: inline-grid; place-items: center; }

/* Report drill-through: bars, columns, points, and slices are links to the records they counted. */
.report-drill { border-radius: var(--radius-sm); color: inherit; text-decoration: none; }
.report-drill:hover,
.report-drill:focus-visible { background: var(--bg-hover); outline: none; }
.report-drill:focus-visible { box-shadow: var(--shadow-focus); }
.report-large-row.report-drill { padding: var(--space-3xs) var(--space-2xs); }
.report-drill-point { cursor: pointer; }
.report-drill-point:hover circle:last-child { r: 7; }

.report-donut-hits {
    block-size: 100%;
    inline-size: 100%;
    inset: 0;
    position: absolute;
    z-index: 2;
}

.report-donut-hits circle {
    cursor: pointer;
    fill: none;
    pointer-events: stroke;
    stroke: transparent;
    stroke-width: 9.6;
}

.report-donut-hits a:hover circle { stroke: color-mix(in srgb, var(--text-primary) 14%, transparent); }
.report-drill-note { color: var(--text-secondary); font-size: var(--text-xs); margin: var(--space-xs) 0 0; }

/* Dashboard period filter. */
.dashboard-period {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.dashboard-period > div { display: grid; gap: var(--space-3xs); }
.dashboard-period [hidden] { display: none; }

/* Edit form: Back and Save stay in reach at the top while the form scrolls. */
.edit-bar {
    align-items: center;
    background: var(--bg-canvas);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-block: var(--space-xs);
    position: sticky;
    top: var(--header-h, 0px);
    z-index: var(--z-sticky, 20);
}

.edit-bar-title { flex: 1 1 auto; min-width: 0; }
.edit-bar-title h1 { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edit-bar-title .eyebrow { display: block; }
.edit-bar-state { color: var(--text-warning, var(--text-secondary)); font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; }

/* People: who can sign in, adding people, and temporary passwords. */
.people-form-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.people-candidates { display: grid; gap: var(--space-2xs) var(--space-md); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); max-height: 320px; overflow-y: auto; }
.people-candidates .chk small { display: block; }
.people-table { table-layout: fixed; width: 100%; }
.people-table td { overflow: visible; vertical-align: top; white-space: normal; }
.people-table td.cell-primary b, .people-table td.cell-primary .t-caption { display: block; overflow: hidden; text-overflow: ellipsis; }
.people-roles { flex-wrap: wrap; gap: var(--space-3xs) var(--space-sm); }
.people-inline { flex-wrap: nowrap; gap: var(--space-2xs); }
.people-inline .input { flex: 1 1 auto; min-width: 0; width: auto; }
.people-passwords { border-inline-start: 3px solid var(--border-warning); }
.people-password { font-size: var(--text-md); letter-spacing: 0.04em; user-select: all; }

/* AI Chat: the person's chats on the left, the conversation in the middle, the composer at the bottom. */
.chat-shell {
    background: var(--bg-canvas);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    height: calc(100dvh - var(--header-h, 56px) - (var(--space-lg) * 2));
    min-height: 480px;
    overflow: hidden;
}

.chat-threads {
    background: var(--bg-surface-2);
    border-inline-end: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 0;
    padding: var(--space-sm);
}

.chat-new { justify-content: center; width: 100%; }
.chat-thread-list { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.chat-thread-list ul { display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
.chat-thread-group { color: var(--text-tertiary); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; margin: var(--space-sm) var(--space-2xs) var(--space-3xs); text-transform: uppercase; }
.chat-thread-group:first-child { margin-top: 0; }
.chat-thread { align-items: center; border-radius: var(--radius-sm); display: flex; gap: var(--space-3xs); min-width: 0; }
.chat-thread a { color: var(--text-primary); flex: 1 1 auto; font-size: var(--text-sm); min-width: 0; overflow: hidden; padding: var(--space-2xs) var(--space-xs); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread:hover, .chat-thread:focus-within { background: var(--bg-surface-3, var(--bg-hover)); }
.chat-thread.is-active { background: var(--bg-brand-subtle); }
.chat-thread.is-active a { font-weight: var(--weight-medium); }
.chat-thread form { flex: 0 0 auto; opacity: 0; }
.chat-thread:hover form, .chat-thread:focus-within form, .chat-thread.is-active form { opacity: 1; }
.chat-threads-empty, .chat-threads-note { color: var(--text-tertiary); font-size: var(--text-xs); line-height: var(--leading-relaxed); margin: 0; padding-inline: var(--space-2xs); }

.chat-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-head { align-items: center; border-bottom: 1px solid var(--border-subtle); display: flex; min-height: 44px; padding: var(--space-2xs) var(--space-md); }
.chat-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-rename { min-width: 0; }
.chat-rename > summary { align-items: center; color: var(--text-secondary); cursor: pointer; display: flex; gap: var(--space-2xs); list-style: none; max-width: 60ch; }
.chat-rename > summary::-webkit-details-marker { display: none; }
.chat-rename > summary .chat-title { color: var(--text-primary); }
.chat-rename[open] > summary { display: none; }
.chat-rename .input { min-width: 260px; }

.chat-stream {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-md);
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-lg) max(var(--space-md), calc((100% - 760px) / 2));
    scroll-behavior: smooth;
}

.chat-empty { align-items: center; display: flex; flex-direction: column; gap: var(--space-xs); margin: auto 0; text-align: center; }
.chat-empty h1 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); margin: var(--space-xs) 0 0; }
.chat-empty p { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; max-width: 52ch; }
.chat-suggestions { display: grid; gap: var(--space-xs); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-md); width: 100%; }
.chat-suggestion { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); cursor: pointer; font: inherit; font-size: var(--text-sm); padding: var(--space-sm); text-align: start; }
.chat-suggestion:hover { background: var(--bg-surface-2); border-color: var(--border-strong, var(--border-default)); }

.chat-message { display: flex; gap: var(--space-sm); }
.chat-message.is-user { justify-content: flex-end; }
.chat-bubble { background: var(--bg-brand-subtle); border-radius: var(--radius-lg); border-end-end-radius: var(--radius-sm); font-size: var(--text-md); line-height: var(--leading-relaxed); max-width: min(80%, 560px); overflow-wrap: anywhere; padding: var(--space-xs) var(--space-sm); white-space: pre-wrap; }
.chat-avatar { align-items: center; background: var(--bg-inverse); border-radius: 50%; color: var(--text-inverse); display: inline-flex; flex: 0 0 auto; height: 28px; justify-content: center; width: 28px; }
.chat-avatar .icon { height: 14px; width: 14px; }
.chat-avatar.is-large { height: 44px; width: 44px; }
.chat-avatar.is-large .icon { height: 22px; width: 22px; }
.chat-answer { flex: 1 1 auto; min-width: 0; }
.chat-prose { font-size: var(--text-md); line-height: var(--leading-relaxed); overflow-wrap: anywhere; }
.chat-prose > :first-child { margin-top: 0; }
.chat-prose > :last-child { margin-bottom: 0; }
.chat-prose p, .chat-prose ul, .chat-prose ol { margin: 0 0 var(--space-xs); }
.chat-prose h1, .chat-prose h2, .chat-prose h3, .chat-prose h4 { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: var(--space-sm) 0 var(--space-2xs); }
.chat-prose table { border-collapse: collapse; display: block; font-size: var(--text-sm); margin: var(--space-xs) 0; max-width: 100%; overflow-x: auto; }
.chat-prose th, .chat-prose td { border-bottom: 1px solid var(--border-subtle); padding: var(--space-2xs) var(--space-xs); text-align: start; vertical-align: top; }
.chat-prose th { background: var(--bg-surface-2); font-weight: var(--weight-semibold); white-space: nowrap; }
.chat-prose code { background: var(--bg-surface-2); border-radius: var(--radius-sm); font-size: 0.92em; padding: 1px 4px; }

.chat-actions { align-items: center; color: var(--text-tertiary); display: flex; gap: var(--space-3xs); margin-top: var(--space-2xs); }
.chat-actions form { display: inline-flex; }
.chat-document { align-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-md); display: flex; gap: var(--space-sm); margin-top: var(--space-xs); padding: var(--space-xs) var(--space-sm); }
.chat-document-copy { display: grid; flex: 1 1 auto; font-size: var(--text-sm); min-width: 0; }
.chat-document-copy small { color: var(--text-secondary); }
.chat-status { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; text-align: center; }

.chat-thinking { display: inline-flex; gap: 4px; padding-block: var(--space-2xs); }
.chat-thinking i { animation: chat-thinking 1.2s infinite ease-in-out; background: var(--text-tertiary); border-radius: 50%; height: 6px; width: 6px; }
.chat-thinking i:nth-child(2) { animation-delay: 0.15s; }
.chat-thinking i:nth-child(3) { animation-delay: 0.3s; }
.chat-thinking-copy { color: var(--text-secondary); display: block; font-size: var(--text-sm); }
@keyframes chat-thinking { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .chat-thinking i { animation: none; } .chat-stream { scroll-behavior: auto; } }

/* Chat: search, streamed text, regenerate and edit, model choice. */
.chat-search { align-items: center; color: var(--text-tertiary); display: flex; gap: var(--space-2xs); position: relative; }
.chat-search .icon { inset-inline-start: var(--space-xs); pointer-events: none; position: absolute; }
.chat-search .input { padding-inline-start: calc(var(--space-xs) * 2 + 12px); width: 100%; }
.chat-search-state { color: var(--text-secondary); font-size: var(--text-xs); margin: 0; overflow-wrap: anywhere; padding-inline: var(--space-2xs); }
/* The older answer card padded its content; in the conversation the answer lines up with the avatar and with streamed text. */
.chat-prose.cube-ai-answer-content { color: inherit; font-size: var(--text-md); line-height: var(--leading-relaxed); padding: 0; }
.chat-streaming { white-space: pre-wrap; }
.chat-message.is-user { align-items: center; }
.chat-edit { flex: 0 0 auto; opacity: 0; }
.chat-message.is-user:hover .chat-edit, .chat-edit:focus-visible { opacity: 1; }
.chat-truncated { align-items: center; color: var(--text-secondary); display: flex; font-size: var(--text-sm); gap: var(--space-2xs); margin: var(--space-xs) 0 0; }
.chat-document.is-expired { color: var(--text-tertiary); }
.chat-editing { align-items: center; color: var(--text-secondary); display: flex; font-size: var(--text-sm); gap: var(--space-2xs); margin: 0 0 var(--space-2xs); }
.chat-editing[hidden] { display: none; }
.chat-editing .btn { margin-inline-start: auto; }
.chat-send .chat-stop-icon { display: none; }
.chat-send.is-stop .chat-send-icon { display: none; }
.chat-send.is-stop .chat-stop-icon { display: inline-block; }
.chat-model { flex: 0 0 auto; }
.chat-model .input { max-width: 220px; }


.chat-composer { border-top: 1px solid var(--border-subtle); padding: var(--space-sm) max(var(--space-md), calc((100% - 760px) / 2)) var(--space-xs); }
.chat-input { align-items: flex-end; background: var(--bg-canvas); border: 1px solid var(--border-strong, var(--border-default)); border-radius: var(--radius-lg); display: flex; gap: var(--space-xs); padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-sm); }
.chat-input:focus-within { border-color: var(--border-brand); box-shadow: 0 0 0 3px var(--bg-brand-subtle); }
.chat-input textarea { background: transparent; border: 0; color: inherit; flex: 1 1 auto; font: inherit; font-size: var(--text-md); line-height: var(--leading-relaxed); max-height: 200px; min-height: 32px; outline: none; padding: var(--space-3xs) 0; resize: none; }
.chat-send { border-radius: 50%; flex: 0 0 auto; }
.chat-composer[aria-busy="true"] .chat-input { opacity: 0.7; }
.chat-composer-foot { align-items: flex-start; display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-2xs); }
.chat-composer-hint { color: var(--text-tertiary); font-size: var(--text-xs); margin-inline-start: auto; padding-top: var(--space-3xs); text-align: end; }

@media (max-width: 860px) {
    .chat-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - var(--header-h, 56px) - (var(--space-md) * 2)); }
    .chat-threads { border-bottom: 1px solid var(--border-default); border-inline-end: 0; max-height: 132px; }
    .chat-threads-note { display: none; }
    .chat-suggestions { grid-template-columns: minmax(0, 1fr); }
    .chat-composer-hint { display: none; }
}

/* AI pages: the Chat, Images and Memory tabs, AI Studio in Settings, and charts in chat answers. */
.ai-tabs { background: var(--bg-surface-2); border-radius: var(--radius-full); display: inline-flex; flex: 0 0 auto; gap: var(--space-3xs); padding: 2px; }
.ai-tabs a { align-items: center; border-radius: var(--radius-full); color: var(--text-secondary); display: inline-flex; font-size: var(--text-sm); font-weight: var(--weight-medium); gap: var(--space-2xs); min-height: 28px; padding-inline: var(--space-sm); text-decoration: none; white-space: nowrap; }
.ai-tabs a:hover { color: var(--text-primary); }
.ai-tabs a[aria-current="page"] { background: var(--bg-surface-1); box-shadow: var(--shadow-1); color: var(--text-primary); }
.chat-head { gap: var(--space-sm); justify-content: space-between; }
.chat-head .ai-tabs { margin-inline-start: auto; }
.chat-web { color: var(--text-secondary); padding-top: var(--space-3xs); white-space: nowrap; }
.chat-web span { align-items: center; display: inline-flex; gap: var(--space-3xs); }
.chat-web:has(input:checked) { color: var(--text-primary); }

.ai-page { margin-inline: auto; max-width: 1040px; width: 100%; }
.ai-page .page-header { align-items: flex-start; display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: space-between; }
.ai-form-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ai-inline-form { align-items: center; display: flex; gap: var(--space-xs); }
.ai-inline-form .input { flex: 1 1 auto; min-width: 0; }
.ai-field-narrow { max-width: 220px; }
.ai-mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--text-sm); }
.ai-feature { border-top: 1px solid var(--border-subtle); display: grid; gap: var(--space-xs); padding-top: var(--space-sm); }
.ai-feature:first-of-type { border-top: 0; padding-top: 0; }
.ai-feature > .switch { font-weight: var(--weight-semibold); }
.ai-feature > p { margin: 0; }
.ai-subform { border-top: 1px solid var(--border-subtle); margin-top: var(--space-sm); padding-top: var(--space-sm); }
.ai-page input[type="file"].input { height: auto; padding-block: var(--space-2xs); }

.ai-skill-list, .ai-memory-list { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.ai-skill-list > li, .ai-memory-list > li { align-items: center; border-top: 1px solid var(--border-subtle); display: flex; gap: var(--space-sm); padding-block: var(--space-xs); }
.ai-skill-list > li:first-child, .ai-memory-list > li:first-child { border-top: 0; }
.ai-skill-list > li.is-off strong { color: var(--text-secondary); }
.ai-skill-main { align-items: baseline; display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: var(--space-3xs) var(--space-xs); min-width: 0; }
.ai-skill-main > .t-caption { flex: 1 0 100%; }
.ai-skill-list .cluster { flex: 0 0 auto; flex-wrap: nowrap; gap: var(--space-3xs); }
.ai-memory-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ai-memory-text .input { background: transparent; border-color: transparent; }
.ai-memory-text .input:hover, .ai-memory-text .input:focus { background: var(--field-bg); border-color: var(--field-border-hover); }
.ai-memory-text .btn { flex: 0 0 auto; }
.ai-import { border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-sm); padding-bottom: var(--space-sm); }
.ai-import-notes { font-size: var(--text-sm); margin: var(--space-2xs) 0 0; padding-inline-start: var(--space-md); }
.ai-memory-list > li > .t-caption { flex: 0 0 auto; white-space: nowrap; }

.ai-colour-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); max-width: 640px; }
.ai-colour { background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--field-radius); cursor: pointer; height: var(--field-h); padding: 3px; width: 100%; }
.ai-logo-preview { align-items: center; display: flex; gap: var(--space-xs); }
.ai-logo-preview img { background: var(--p-n-0, #fff); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); max-height: 56px; max-width: 200px; object-fit: contain; padding: var(--space-3xs); }

.ai-image-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ai-image { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); display: flex; flex-direction: column; margin: 0; overflow: hidden; }
.ai-image img { aspect-ratio: 3 / 2; background: var(--bg-surface-2); display: block; object-fit: cover; width: 100%; }
.ai-image figcaption { display: grid; gap: var(--space-2xs); padding: var(--space-xs); }
.ai-image-prompt { -webkit-box-orient: vertical; -webkit-line-clamp: 3; display: -webkit-box; font-size: var(--text-sm); margin: 0; overflow: hidden; }
.ai-image-new img { border-radius: var(--radius-md); display: block; margin-bottom: var(--space-xs); max-height: 70vh; max-width: 100%; }

/* A chart is drawn in brand colours, so it always sits on a light panel where those colours read as designed. */
.chat-chart { background: #FFFFFF; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: #1B1F24; margin: var(--space-xs) 0 var(--space-sm); max-width: 680px; padding: var(--space-sm); }
.chat-chart figcaption { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-xs); }
.chat-chart svg { display: block; height: auto; width: 100%; }
.chat-chart-label { fill: #4B5563; font-size: 12px; }
.chat-chart-value { fill: #1B1F24; font-size: 12px; font-variant-numeric: tabular-nums; }
.chat-chart-grid { stroke: #E5E7EB; stroke-width: 1; }
.chat-chart-legend { display: flex; flex-wrap: wrap; font-size: var(--text-xs); gap: var(--space-2xs) var(--space-sm); list-style: none; margin: var(--space-xs) 0 0; padding: 0; }
.chat-chart-legend li { align-items: center; color: #4B5563; display: inline-flex; gap: var(--space-3xs); }
.chat-chart-legend span { border-radius: 2px; display: inline-block; height: 10px; width: 10px; }

@media (max-width: 760px) {
    .ai-tabs a { padding-inline: var(--space-xs); }
    .chat-head .chat-rename, .chat-head > .chat-title { display: none; }
    .ai-skill-list > li, .ai-memory-list > li { align-items: flex-start; flex-direction: column; gap: var(--space-2xs); }
    .ai-inline-form { align-items: stretch; flex-direction: column; }
}