/* Magic web app - page chrome. Colors come exclusively from the
 * sc-extension-theme.css variables so both themes work without page-level
 * overrides (docs/rules/ui-webix-protoui.md; no hex literals). */

/* ---------- Header ---------- */

.magic-header .webix_template { overflow: hidden; }

.magic-brand-box {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 4px 6px 12px; height: 100%;
}
.magic-brand-box img { height: 32px; width: 32px; }
.magic-brand-title {
    font-size: 17px; font-weight: 700; line-height: 1.2;
    color: var(--text-primary);
}
.magic-brand-sub { font-size: 11px; color: var(--text-muted); }

.magic-status-cell .webix_template,
.magic-user-cell .webix_template {
    display: flex; align-items: center; justify-content: flex-end;
    height: 100%;
}
.magic-status-pill {
    font-size: 12px; padding: 4px 10px; border-radius: 12px;
    border: 1px solid var(--border-color); color: var(--text-secondary);
    background: var(--bg-secondary); white-space: nowrap;
}
.magic-status-ok  { border-color: var(--accent-success); }
.magic-status-bad { border-color: var(--accent-danger); color: var(--accent-danger); }
.magic-status-info { border-color: var(--accent-info); color: var(--accent-info); }
.magic-status-muted { opacity: .55; }

/* A JSON/prompt field bound to an scform stays a textarea (see
   docs/rules/ui-webix-monaco.md - Monaco is not a form control and its async
   mount can save an empty value over real content). Monospace at least makes
   the structure readable. */
.magic-code-area textarea {
    font-family: "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    tab-size: 2;
    white-space: pre;
    overflow-x: auto;
}

/* Secondary toolbar action. The SC theme paints the BASE .toolbar_button with
   the accent fill, so a page with three base buttons has three primaries and
   no hierarchy. This modifier repaints one as quiet without touching the
   vendored theme or stealing a variant's auto-glyph. */
.webix_el_button.toolbar_button.magic-btn-quiet button {
    background-color: var(--toolbar-button-cancel-bg) !important;
    color: var(--btn-cancel-color) !important;
}
.webix_el_button.toolbar_button.magic-btn-quiet button .webix_icon_btn,
.webix_el_button.toolbar_button.magic-btn-quiet button .sci {
    color: var(--btn-cancel-color) !important;
}
.webix_el_button.toolbar_button.magic-btn-quiet button:hover {
    background-color: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}
.webix_el_button.toolbar_button.magic-btn-quiet button:hover .sci {
    color: var(--text-primary) !important;
}

.magic-user-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary); color: var(--text-primary);
    font: inherit; font-size: 13px;
}
.magic-user-btn:hover { background: var(--hover-bg); }
.magic-user-name { font-weight: 600; max-width: 120px; overflow: hidden;
                   text-overflow: ellipsis; }
.magic-pill {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    padding: 2px 7px; border-radius: 9px; letter-spacing: .04em;
    border: 1px solid var(--border-color); color: var(--text-secondary);
}
.magic-pill-admin { border-color: var(--sc-accent-dark); color: var(--sc-accent-dark); }
.magic-user-menu-head {
    padding: 10px 12px; font-size: 13px; color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

/* ---------- Locked view / login ---------- */

.magic-locked .webix_template {
    display: flex; align-items: center; justify-content: center; height: 100%;
    background: var(--bg-primary);
}
.magic-locked-box { text-align: center; color: var(--text-secondary); }
.magic-locked-box .sci { font-size: 44px; color: var(--text-muted); }
.magic-locked-box h2 { margin: 12px 0 6px; color: var(--text-primary); }

.magic-login-head { display: flex; align-items: center; }
.magic-login-head img { height: 24px; margin-right: 10px; }
.magic-login-head span { font-size: 16px; font-weight: 600; }

.magic-error { color: var(--accent-danger); font-size: 13px; }
.magic-dim   { color: var(--text-muted); font-size: 13px; }

/* ---------- Doc pages (markdown / Swagger) ---------- */

.magic-doc .webix_template { background: var(--bg-primary); }
.magic-doc article.doc {
    max-width: 960px; margin: 0 auto; padding: 28px 32px 64px;
    color: var(--text-primary); font-size: 15px; line-height: 1.65;
}
.magic-doc article.doc h1 { font-size: 26px; margin: 8px 0 12px; }
.magic-doc article.doc h2 {
    font-size: 20px; margin: 28px 0 10px; padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.magic-doc article.doc h3 { font-size: 16px; margin: 18px 0 8px; }
.magic-doc article.doc p.lead { color: var(--text-secondary); }
.magic-doc article.doc a { color: var(--accent-info); }
.magic-doc article.doc code {
    background: var(--bg-tertiary); padding: 1px 5px; border-radius: 4px;
    font-size: 13px;
}
.magic-doc article.doc pre {
    background: var(--bg-tertiary); border: 1px solid var(--border-color);
    border-radius: 8px; padding: 12px 14px; overflow-x: auto;
}
.magic-doc article.doc pre code { background: transparent; padding: 0; }
.magic-doc article.doc table {
    border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 14px;
}
.magic-doc article.doc th, .magic-doc article.doc td {
    border: 1px solid var(--border-color); padding: 6px 10px; text-align: left;
}
.magic-doc article.doc th { background: var(--bg-secondary); }
.magic-doc-loading { padding: 40px; color: var(--text-muted); }

/* ---------- Demo-page iframes ---------- */

.magic-iframe-host .webix_template { padding: 0; }
.magic-doc-frame {
    display: block; width: 100%; height: 100%; border: 0;
    background: var(--bg-primary);
}

/* ---------- Flow viewer ---------- */

.magic-mermaid { padding: 16px; overflow: auto; height: 100%; }
.magic-mermaid svg { max-width: 100%; }
.magic-pre {
    margin: 0; padding: 12px; overflow: auto; font-size: 12px;
    color: var(--text-primary); background: var(--bg-tertiary);
}

/* ---------- Generic page bits ---------- */

.magic-page-head { padding: 4px 4px 0 4px; }
.magic-page-head h2 { margin: 8px 0 2px; font-size: 20px; color: var(--text-primary); }
.magic-page-head .magic-lead { color: var(--text-secondary); font-size: 13px; margin: 0 0 6px; }
.magic-page-head h3 { margin: 8px 0 2px; font-size: 16px; color: var(--text-primary); }
/* The shell's own title bar above every page (magic-shell.js pageWithHead).
   Fixed height, so the h2 margins are tightened to keep the title centred. */
.magic-page-headbar .magic-page-head h2 { margin: 2px 0 0; }
.magic-page-headbar .magic-page-head .magic-lead { margin: 1px 0 0; }
/* Caption for a second grid stacked inside one panel - the panel header names
   the upper half, this names the lower one (docs/rules/ui-naming.md). */
.magic-section-cap {
    padding: 6px 6px 2px; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-secondary);
}
.sc-hidden { display: none !important; }

/* Selection is the vendored theme's `--selected-bg` wash and nothing else. An
   earlier attempt framed the selected row in accent rules, because on the
   conversation tree the wash was invisible against tinted session bands - but
   the frame started at the cell's left edge while a band's own left border and
   padding started further in, so a selected child row appeared to hang out to
   the LEFT of its parent. The tint was the actual problem; it is gone, and with
   it the reason for a custom selection. */

/* ---------- Mobile reply pages: preview of what the phone draws ----------
   Mirrors the card styling of the phone shell
   (AI_Magic_Ring/app/src/main/assets/mobile/shell.html) so the preview shows
   the real thing rather than an approximation of it. */

.magic-mobile-preview { padding: 12px; background: #0B0F14; }
.magic-mobile-preview .magic_card {
    background: #141B24; border: 1px solid #3A4759; border-radius: 16px;
    padding: 14px; color: #F2F6FC;
    font-family: Roboto, "Helvetica Neue", sans-serif;
}
.magic-mobile-preview .magic_caption {
    color: #7FE3C8; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
}
.magic-mobile-preview .magic_dismiss { color: #8FA3BF; font-size: 13px; float: right; }
.magic-mobile-preview .magic_row { padding: 9px 0; border-bottom: 1px solid #26313F; }
.magic-mobile-preview .magic_row:last-child { border-bottom: none; }
.magic-mobile-preview .magic_body { color: #F2F6FC; font-size: 15px; line-height: 1.4; }
.magic-mobile-preview .magic_muted { color: #8FA3BF; font-size: 12px; }
.magic-mobile-preview .magic_strong { color: #F2F6FC; font-size: 15px; font-weight: 500; }

/* Routing Log: a session is a full-width banner, not a cell. The page's fixed
   columns already exceed a 1280px viewport, so a summary inside a column would
   be squeezed to a sliver; a `$row` band is exactly the visible grid width. */
/* The band carries NO ground of its own. A tint on every session turned half
   the page into coloured tiles, competed with the selection wash, and - because
   the tinted box began after its own left border and padding - made a selected
   child row look outdented past its parent. What separates the levels is what
   the text already says: weight and size for the session, muted for its facts,
   plain for the turn, smaller for the step, plus the indent each one sits at.
   The hairline above is a group separator, not a fill: without it two
   conversations run together, and every session is expanded by decision 35. */
.magic-session-band {
    padding: 6px 8px; line-height: 1.35;
    height: 100%; box-sizing: border-box;
    border-top: 1px solid var(--border-color);
}
/* The shared pill is sized for a table cell; inside the two-line band its
   padding alone would push the second line out of the row. */
.magic-session-head .magic-status-pill {
    padding: 0 6px; font-size: 11px; line-height: 16px; vertical-align: middle;
}

/* Expand/collapse is the only thing on this page you click to change what you
   see, so it is the only thing drawn as a control. Webix ships it as a bare
   glyph - the same size and weight as the decorative leaf icon two pixels
   away, which is what made "where do I click" unanswerable. Boxing it keeps
   Webix's own click binding (the handler is bound to these class names) while
   giving the target a border, a hover and a visible hit area.

   Geometry is deliberately NOT touched: `webix_tree_none` is also the per-level
   SPACER, so widening or unfloating these boxes re-indents every descendant and
   pushes the utterance out of its column. Only paint changes here; the band
   below is where the button can afford to grow, because that markup is ours. */
[view_id="routingGrid"] .webix_tree_open,
[view_id="routingGrid"] .webix_tree_close {
    border: 1px solid var(--border-color); border-radius: 4px;
    /* Transparent, never a fill: an opaque button punched a light square
       through the selection wash of the row it sits on. */
    background: transparent; cursor: pointer;
    font-size: 19px;
}
/* The freed folder slot goes to the control. All three classes widen together
   on purpose - `webix_tree_none` is both the leaf marker and the per-level
   spacer, so changing one alone would step branch rows out of line with leaf
   rows. */
[view_id="routingGrid"] .webix_tree_open,
[view_id="routingGrid"] .webix_tree_close,
[view_id="routingGrid"] .webix_tree_none { width: 26px; }
[view_id="routingGrid"] .webix_tree_open:hover,
[view_id="routingGrid"] .webix_tree_close:hover {
    background: var(--hover-bg);
    border-color: var(--accent-color);
    color: var(--accent-color) !important;   /* the SC theme sets this !important */
}
/* The folder/file glyph carries nothing - the row's own text already says what
   it is - and beside the button it read as a second thing to click. The
   treetable template is `{space}{icon}{folder}`, three separate divs, so
   dropping the last one costs every row the same 20px and leaves the toggle
   (which lives in `{icon}`) untouched. */
[view_id="routingGrid"] .webix_tree_folder,
[view_id="routingGrid"] .webix_tree_folder_open,
[view_id="routingGrid"] .webix_tree_file { display: none; }
/* Inside the band the toggle is our own markup with no spacers around it, so
   it grows to a comfortable target without disturbing anything. */
.magic-session-head .webix_tree_open,
.magic-session-head .webix_tree_close,
.magic-session-head .webix_tree_none {
    float: none; display: inline-block; vertical-align: middle;
    width: 26px; height: 26px; line-height: 24px; font-size: 20px;
    margin: 0 8px 0 0; text-align: center;
}
.magic-session-head .webix_tree_none { border: 0; background: none; }
/* Three levels, three weights. Indentation alone told them apart, and at one
   font size a session, an utterance and a plan step all read as peers. */
/* The weight sits on the HEAD, not on the subject: only a subject resolved to a
   real record carries `magic-subject`, so a session named by what the speaker
   said would otherwise be the one root row that reads as a leaf. */
.magic-session-head  { font-size: 14px; font-weight: 600; color: var(--text-primary);
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.magic-session-facts { color: var(--text-muted); font-size: 12px;
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.magic-tree-step     { font-size: 12px; color: var(--text-secondary); }
/* Three weights of evidence: a resolved record is not the same kind of claim as
   a phrase the speaker happened to use. */
.magic-subject       { font-weight: 600; }
.magic-said          { font-style: italic; }

/* Routing Log dossier: the drill-down that the flat log never had. Four tables
   held what a turn actually did - the words, the plan, the record written, the
   routing - and none of it reached the page. This is that payload, printed as
   one scrollable column so nothing is hidden behind a tab. */
.magic-dossier .webix_template { padding: 0; }
.magic-dossier-body    { padding: 10px 12px 20px; }
.magic-dossier-empty   { padding: 16px; color: var(--text-muted); font-size: 13px; }
.magic-dossier-section { margin: 0 0 14px; }
.magic-dossier-section h3 {
    margin: 0 0 6px; font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted); font-weight: 600;
}
/* The verbatim transcript and the spoken answer are the two things a reader
   came for; everything else on the panel is evidence about them. */
.magic-dossier-said  { font-size: 14px; line-height: 1.45; color: var(--text-primary); }
.magic-dossier-reply {
    margin-top: 6px; padding-left: 10px; font-size: 13px; line-height: 1.45;
    color: var(--text-secondary); border-left: 3px solid var(--border-color);
}
.magic-dossier-ctx   { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
/* Printed, never linked: this is a read-only audit surface and the URL is
   evidence of what was on screen, not a place to navigate to. */
.magic-dossier-url   { word-break: break-all; }
.magic-dossier-meta  { margin-top: 6px; font-size: 11px; }
.magic-dossier-list  { margin: 0; padding-left: 18px; font-size: 13px;
                       color: var(--text-secondary); line-height: 1.5; }

.magic-step {
    margin: 0 0 10px; padding: 8px 10px;
    border: 1px solid var(--border-color); border-radius: 4px;
    background: var(--bg-secondary);
}
.magic-step-head     { font-size: 13px; color: var(--text-primary); }
.magic-step-cmd      { font-weight: 600; }
.magic-step-fragment { margin-top: 4px; font-size: 12px; font-style: italic;
                       color: var(--text-secondary); }
.magic-step-result   { margin-top: 4px; font-size: 13px; line-height: 1.4;
                       color: var(--text-primary); }
.magic-step-record   { margin-top: 6px; font-size: 13px; }
.magic-step-routing  { margin-top: 6px; font-size: 11px; }

/* The resolved bindings and the record's own columns. A two-column table beats
   raw jsonb: `note_text` and `target_language` are what the assistant UNDERSTOOD,
   and that is the answer to "why did it do that". */
.magic-kv       { margin-top: 6px; border-collapse: collapse; width: 100%;
                  font-size: 12px; table-layout: fixed; }
.magic-kv th    { width: 34%; padding: 2px 8px 2px 0; text-align: left;
                  font-weight: 500; color: var(--text-muted);
                  vertical-align: top; word-break: break-word; }
.magic-kv td    { padding: 2px 0; color: var(--text-secondary);
                  vertical-align: top; word-break: break-word; }

/* The call-detail facts block. A read-only fact is printed, not put in a text
   input: an input sized to sit beside its label cropped `1547` to `1`, and a
   printed row has room to say WHY a field is empty. Wider label column than
   .magic-kv's default because these labels are single words and the values
   (guids, model codes, explanations) need the space. */
.magic-facts .webix_template { padding: 4px 8px 12px 2px; }
.magic-facts .magic-kv      { font-size: 13px; }
.magic-facts .magic-kv th   { width: 96px; }
.magic-facts .magic-status-pill { font-size: 11px; padding: 1px 8px; }

/* Two-line turn rows in the conversation tree: what was said on the first
   line, the assistant's answer dimmed under it. Both clamp to one line -
   the dossier is where full text lives. The tree indent sits in a gutter to
   the left of the pair, so the answer starts under its own question. */
.magic-turn        { display: flex; align-items: flex-start; }
.magic-turn-gutter { flex: none; display: flex; align-items: center; height: 22px; }
.magic-turn-lines  { flex: 1; min-width: 0; }
.magic-turn-said  { white-space: nowrap; overflow: hidden;
                    text-overflow: ellipsis; font-size: 13px;
                    color: var(--text-primary); }
.magic-turn-reply { white-space: nowrap; overflow: hidden;
                    text-overflow: ellipsis; font-size: 12px;
                    color: var(--text-muted); line-height: 1.3; }

/* The Outcome cell holds command + pill + record on ONE line - a wrap would
   bleed into the two-line turn row below it. */
.magic-outcome { white-space: nowrap; overflow: hidden;
                 text-overflow: ellipsis; }

/* A `$row` band, painted like any other row. The skin hardcodes a colrow cell
   as #fff and #f4f5f9 when selected - literal colours that ignore the theme, so
   in the dark palette every session came back as a white strip with unreadable
   text. This is the only thing standing between the band and the ordinary row
   ground; it adds no decoration.

   Opaque when selected on purpose: `--selected-bg` is translucent and a `$row`
   cell overlaps the column cells beneath it, so the same wash applied twice
   banded the row into two tones. */
[view_id="routingGrid"] .webix_cell.webix_dtable_colrow {
    background: transparent !important;
}
[view_id="routingGrid"] .webix_cell.webix_dtable_colrow.webix_selected {
    background: var(--hover-bg) !important;
}

/* The dossier's one-line identity header. Sticky so the turn id and time stay
   readable while a long plan scrolls under it. */
.magic-dossier-meta-head {
    position: sticky; top: 0; z-index: 1;
    padding: 6px 12px; font-size: 11px; color: var(--text-muted);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

/* Routing rendered as chips under the step head; the warn variant marks a
   fallback route or a low-confidence guess. */
.magic-chip {
    display: inline-block; margin: 4px 4px 0 0; padding: 0 6px;
    border: 1px solid var(--border-color); border-radius: 10px;
    font-size: 11px; line-height: 16px; color: var(--text-secondary);
    background: var(--bg-secondary);
}
.magic-chip-warn { border-color: var(--accent-danger);
                   color: var(--accent-danger); }

/* Progressive disclosure inside the dossier: "On screen", "N more fields",
   "Ran without a plan step" are native <details> - no event wiring inside an
   sctemplate. */
.magic-dossier details > summary {
    cursor: pointer; font-size: 12px; color: var(--text-muted);
    user-select: none;
}
.magic-dossier details[open] > summary { margin-bottom: 4px; }

/* Delivery Log. The message that was sent is the point of the page, so it gets
   the light ground and the room; the error is the mirror image and is drawn
   only when there IS one - the earlier layout shouted an empty white Error box
   on every successful send while the message itself was nowhere on screen. */
.magic-delivery-subject {
    margin: 10px 0 8px; font-size: 15px; line-height: 1.35;
    font-weight: 600; color: var(--text-primary);
    overflow-wrap: anywhere;
}
.magic-delivery-body {
    padding: 10px 12px; border: 1px solid var(--border-color);
    border-radius: 4px; background: var(--bg-input);
    font-size: 13px; line-height: 1.5; color: var(--text-primary);
    /* The text is read, quoted and copied: keep the sender's line breaks, wrap
       a URL that has none, and cap the height so a 4096-character Telegram
       message scrolls inside its card instead of pushing the facts off screen. */
    white-space: pre-wrap; overflow-wrap: anywhere; user-select: text;
    max-height: 46vh; overflow-y: auto;
}
.magic-delivery-error {
    padding: 10px 12px; border: 1px solid var(--accent-danger);
    border-radius: 4px; background: var(--bg-secondary);
    font-size: 13px; line-height: 1.5; color: var(--accent-danger);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
/* A failed send must be findable by scanning, not by reading every status
   cell. Webix paints the row from the item's $css class. */
.magic-row-bad .webix_cell,
.webix_cell.magic-row-bad {
    box-shadow: inset 3px 0 var(--accent-danger);
}