/* Tool calls: a chip in the thread, a dialog for the whole call.

   Ported from the tool chips of 幻依喵生 (2026-10-07): a mint pill with an
   arrow and the tool's name, the result appended after a check or a cross,
   and a detail dialog that grows out of the chip it was opened from. The
   colours are tokens here so the dark theme gets its own set; the shapes,
   timings and easing curves are the original's.

   Loaded last, and every class is new (`call-*`), so none of the older
   `.tool-card` layers in app.css reach it. */

:root
{
    --call-ink: #3d8a7a;
    --call-ink-strong: #2f6f62;
    --call-line: rgba(126, 200, 184, .48);
    --call-line-strong: rgba(126, 200, 184, .68);
    --call-fill: rgba(184, 228, 216, .35);
    --call-fill-hover: rgba(232, 245, 240, .6);
    --call-fill-open: #f0faf7;
    --call-glow: 126, 200, 184;
    --call-blue: #7ec8ef;
    --call-purple: #b3a1e8;
    --call-fail: #d96a63;
    --call-fail-soft: rgba(217, 106, 99, .1);
    --call-pending-line: #ffd699;
    --call-pending-fill: #fff8e7;
    --call-pending-ink: #7a6b5a;
    --call-result-ink: #7d7466;
    --call-panel: #fefaf4;
    --call-panel-line: rgba(126, 200, 184, .62);
    --call-section: rgba(253, 251, 247, .85);
    --call-section-line: rgba(232, 222, 206, .95);
    --call-divider: rgba(232, 222, 206, .8);
    --call-dash: rgba(212, 196, 176, .62);
    --call-text: #5d4e37;
    --call-text-strong: #3d3225;
    --call-text-faint: #9b8b7a;
    --call-raw-fill: rgba(240, 250, 247, .5);
    --call-scrim: rgba(61, 50, 37, .22);
    --call-shadow: 0 30px 80px rgba(61, 50, 37, .2);
    --call-inset: rgba(255, 255, 255, .68);
}

:root[data-theme="dark"]
{
    --call-ink: #8fd3c3;
    --call-ink-strong: #b5e6da;
    --call-line: rgba(126, 200, 184, .34);
    --call-line-strong: rgba(126, 200, 184, .55);
    --call-fill: rgba(126, 200, 184, .1);
    --call-fill-hover: rgba(126, 200, 184, .16);
    --call-fill-open: rgba(126, 200, 184, .2);
    --call-fail: #ec8f88;
    --call-fail-soft: rgba(236, 143, 136, .12);
    --call-pending-line: rgba(255, 214, 153, .4);
    --call-pending-fill: rgba(255, 214, 153, .1);
    --call-pending-ink: #f0d6a8;
    --call-result-ink: #b4ab9d;
    --call-panel: #24262a;
    --call-panel-line: rgba(126, 200, 184, .4);
    --call-section: rgba(255, 255, 255, .03);
    --call-section-line: rgba(255, 255, 255, .08);
    --call-divider: rgba(255, 255, 255, .08);
    --call-dash: rgba(255, 255, 255, .12);
    --call-text: #d9d4cb;
    --call-text-strong: #f3efe8;
    --call-text-faint: #9a958c;
    --call-raw-fill: rgba(126, 200, 184, .05);
    --call-scrim: rgba(0, 0, 0, .45);
    --call-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    --call-inset: rgba(255, 255, 255, .06);
}

@media (prefers-color-scheme: dark)
{
    :root:not([data-theme="light"])
    {
        --call-ink: #8fd3c3;
        --call-ink-strong: #b5e6da;
        --call-line: rgba(126, 200, 184, .34);
        --call-line-strong: rgba(126, 200, 184, .55);
        --call-fill: rgba(126, 200, 184, .1);
        --call-fill-hover: rgba(126, 200, 184, .16);
        --call-fill-open: rgba(126, 200, 184, .2);
        --call-fail: #ec8f88;
        --call-fail-soft: rgba(236, 143, 136, .12);
        --call-pending-line: rgba(255, 214, 153, .4);
        --call-pending-fill: rgba(255, 214, 153, .1);
        --call-pending-ink: #f0d6a8;
        --call-result-ink: #b4ab9d;
        --call-panel: #24262a;
        --call-panel-line: rgba(126, 200, 184, .4);
        --call-section: rgba(255, 255, 255, .03);
        --call-section-line: rgba(255, 255, 255, .08);
        --call-divider: rgba(255, 255, 255, .08);
        --call-dash: rgba(255, 255, 255, .12);
        --call-text: #d9d4cb;
        --call-text-strong: #f3efe8;
        --call-text-faint: #9a958c;
        --call-raw-fill: rgba(126, 200, 184, .05);
        --call-scrim: rgba(0, 0, 0, .45);
        --call-shadow: 0 30px 80px rgba(0, 0, 0, .5);
        --call-inset: rgba(255, 255, 255, .06);
    }
}

/* --- the chip ------------------------------------------------------------- */

.call-shell
{
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
    margin: 2px 0;
}

.call-chip
{
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 2px;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 4px 11px 4px 10px;
    overflow: hidden;
    border: 1px solid var(--call-line);
    /* A pill on one line; a soft card when a narrow screen wraps the result. */
    border-radius: 16px;
    background: var(--call-fill);
    color: var(--call-ink);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.55;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 0 0 rgba(var(--call-glow), 0);
    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 220ms ease,
        transform 220ms cubic-bezier(.2, .8, .2, 1);
}

.call-chip.is-live
{
    animation: call-chip-in 260ms cubic-bezier(.2, .78, .24, 1) backwards;
}

.call-chip.is-status-updated
{
    animation: call-chip-status 460ms ease-out;
}

@keyframes call-chip-in
{
    from { opacity: 0; transform: translateY(5px) scale(.97); filter: blur(1.6px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes call-chip-status
{
    0%   { box-shadow: 0 0 0 rgba(var(--call-glow), 0); }
    42%  { box-shadow: 0 0 0 3px rgba(var(--call-glow), .16), 0 0 18px rgba(var(--call-glow), .42); }
    100% { box-shadow: 0 0 0 rgba(var(--call-glow), 0); }
}

@media (hover: hover) and (pointer: fine)
{
    .call-chip:hover
    {
        background: var(--call-fill-hover);
        border-color: var(--call-line-strong);
        box-shadow:
            0 0 0 2px rgba(var(--call-glow), .08),
            0 0 10px rgba(var(--call-glow), .28),
            0 0 20px rgba(126, 200, 239, .1);
        transform: translateY(-.5px);
    }
}

.call-chip:active { transform: translateY(0) scale(.985); }

.call-chip:focus-visible
{
    outline: 2px solid var(--call-ink);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(var(--call-glow), .16), 0 0 22px rgba(var(--call-glow), .62);
}

.call-chip[aria-expanded="true"]
{
    color: var(--call-ink-strong);
    border-color: var(--call-line-strong);
    background: var(--call-fill-open);
    box-shadow: 0 0 20px rgba(var(--call-glow), .5);
}

.call-glyph
{
    flex: none;
    font-weight: 600;
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}

.call-name
{
    flex: none;
    font-weight: 600;
    white-space: nowrap;
}

/* What the call is about (the path, the query, the command). Quiet, and
   only while nothing better is there: the result takes its place. */
.call-subject
{
    min-width: 0;
    max-width: 34ch;
    overflow: hidden;
    color: var(--call-result-ink);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.call-subject:empty { display: none; }
.call-chip:not(.running) .call-subject { max-width: 22ch; }

.call-result
{
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    max-width: 44ch;
    overflow: hidden;
    color: var(--call-result-ink);
    font-family: var(--font);
    font-size: 12px;
    white-space: nowrap;
}
.call-chip.running .call-result { display: none; }
.call-result:has(.call-text:empty) { display: none; }
.call-chip.is-live:not(.running) .call-result
{
    animation: call-result-in 280ms cubic-bezier(.2, .72, .24, 1) both;
}

@keyframes call-result-in
{
    from { opacity: 0; transform: translateY(4px); filter: blur(1px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.call-mark
{
    flex: none;
    color: var(--call-ink);
    font-weight: 700;
}

.call-text
{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.call-chip.failed
{
    border-color: color-mix(in srgb, var(--call-fail) 38%, transparent);
    background: var(--call-fail-soft);
    color: var(--call-fail);
}
.call-chip.failed .call-mark { color: var(--call-fail); }
.call-chip.failed .call-result { color: color-mix(in srgb, var(--call-fail) 85%, var(--text)); }

.call-time
{
    flex: none;
    color: var(--call-result-ink);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    opacity: .75;
}
.call-time:empty { display: none; }

.call-chip .diffstat { flex: none; margin: 0; font-size: 11px; }

/* Running: the arrow leans forward and a light passes across the pill. */
.call-chip.running .call-glyph { animation: call-glyph-lean 1.1s ease-in-out infinite; }
.call-chip.running::after
{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 20%, rgba(var(--call-glow), .28) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: call-sheen 1.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes call-glyph-lean
{
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(2.5px); }
}

@keyframes call-sheen
{
    to { transform: translateX(100%); }
}

/* A sub-agent's steps stay under its chip. */
.call-region:empty { display: none; }
.call-region
{
    align-self: stretch;
    max-width: 680px;
}
.call-region .subagent-panel
{
    margin: 0 0 0 14px;
    padding: 8px 12px;
    border-left: 2px solid var(--call-line);
    border-radius: 0;
    background: none;
}

.call-shell .tool-media { margin-top: 2px; }

/* --- the dialog ----------------------------------------------------------- */

.call-dialog
{
    --call-origin-x: 0px;
    --call-origin-y: 0px;
    position: fixed;
    inset: 0;
    z-index: 150;
    display: grid;
    place-items: center;
    padding: clamp(12px, 2.5vw, 24px);
    isolation: isolate;
}
.call-dialog[hidden] { display: none; }

.call-backdrop
{
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--call-scrim);
    opacity: 0;
    backdrop-filter: blur(9px) saturate(.9);
    -webkit-backdrop-filter: blur(9px) saturate(.9);
    transition: opacity 280ms ease;
}
.call-dialog.show .call-backdrop { opacity: 1; }

.call-panel
{
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(780px, 100%);
    max-height: min(82vh, 720px);
    overflow: hidden;
    border: 1px solid var(--call-panel-line);
    border-radius: 22px;
    background:
        radial-gradient(420px 180px at 8% -12%, rgba(126, 200, 239, .18), transparent 66%),
        radial-gradient(360px 160px at 96% 0%, rgba(179, 161, 232, .13), transparent 64%),
        var(--call-panel);
    color: var(--call-text);
    box-shadow:
        var(--call-shadow),
        0 0 0 1px var(--call-inset) inset,
        0 0 42px rgba(var(--call-glow), .24);
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(var(--call-origin-x), var(--call-origin-y), 0) scale(.16);
    transform-origin: center;
    will-change: transform, opacity, filter;
    transition:
        transform 360ms cubic-bezier(.18, .84, .24, 1),
        opacity 240ms ease,
        filter 300ms ease;
}
.call-dialog.show .call-panel
{
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

.call-head
{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 13px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--call-divider);
}

.call-head-glyph
{
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--call-panel-line);
    border-radius: 50%;
    background: var(--call-fill-open);
    color: var(--call-ink);
    font-family: var(--mono);
    font-weight: 600;
    box-shadow: 0 0 18px rgba(var(--call-glow), .3);
}

.call-heading { min-width: 0; }

.call-title
{
    margin: 0;
    overflow: hidden;
    color: var(--call-text-strong);
    font-size: clamp(16px, 2vw, 19px);
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-meta
{
    margin-top: 2px;
    overflow: hidden;
    color: var(--call-text-faint);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-status
{
    padding: 3px 9px;
    border: 1px solid var(--call-pending-line);
    border-radius: 999px;
    background: var(--call-pending-fill);
    color: var(--call-pending-ink);
    font-size: 11.5px;
    line-height: 1.45;
    white-space: nowrap;
}
.call-status[data-state="success"]
{
    border-color: var(--call-line);
    background: var(--call-fill-open);
    color: var(--call-ink);
}
.call-status[data-state="fail"]
{
    border-color: color-mix(in srgb, var(--call-fail) 35%, transparent);
    background: var(--call-fail-soft);
    color: var(--call-fail);
}
.call-status.is-updating
{
    animation: call-status-in 320ms cubic-bezier(.2, .72, .24, 1) both;
}

@keyframes call-status-in
{
    from { opacity: 0; transform: translateY(3px) scale(.96); filter: blur(1px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.call-close
{
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--call-section-line);
    border-radius: 50%;
    background: var(--call-inset);
    color: var(--call-text-faint);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, transform 180ms ease, box-shadow 180ms ease;
}
@media (hover: hover) and (pointer: fine)
{
    .call-close:hover
    {
        color: var(--call-ink);
        border-color: var(--call-line-strong);
        box-shadow: 0 0 14px rgba(var(--call-glow), .34);
        transform: rotate(90deg);
    }
}
.call-close:focus-visible { outline: 2px solid var(--call-ink); outline-offset: 2px; }

.call-body
{
    display: grid;
    grid-template-columns: minmax(230px, .82fr) minmax(0, 1.18fr);
    flex: 1;
    min-height: 0;
    padding: 16px;
    gap: 14px;
    overflow: hidden;
}

.call-section
{
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--call-section-line);
    border-radius: 14px;
    background: var(--call-section);
}

.call-output
{
    display: grid;
    grid-template-rows: minmax(92px, .42fr) minmax(160px, 1fr);
    min-height: 0;
    gap: 14px;
    overflow: hidden;
}

.call-section-head
{
    display: flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 10px 12px 9px;
    border-bottom: 1px solid var(--call-divider);
}

.call-section-head h4
{
    margin: 0;
    color: var(--call-text);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}

.call-section-mark
{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7ec8b8;
    box-shadow: 0 0 8px rgba(126, 200, 184, .75);
}
.call-summary-section .call-section-mark
{
    background: var(--call-blue);
    box-shadow: 0 0 8px rgba(126, 200, 239, .68);
}
.call-raw-section .call-section-mark
{
    background: var(--call-purple);
    box-shadow: 0 0 8px rgba(179, 161, 232, .68);
}

.call-raw-size
{
    margin-left: auto;
    color: var(--call-text-faint);
    font-family: var(--mono);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.call-copy
{
    padding: 2px 8px;
    border: 1px solid var(--call-section-line);
    border-radius: 999px;
    background: transparent;
    color: var(--call-text-faint);
    font-size: 11px;
    line-height: 1.5;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease;
}
.call-copy:hover { color: var(--call-ink); border-color: var(--call-line-strong); }
.call-copy[hidden] { display: none; }

.call-params
{
    min-height: 0;
    margin: 0;
    overflow: auto;
    padding: 4px 12px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--call-line) transparent;
}

.call-param
{
    display: grid;
    grid-template-columns: minmax(88px, .38fr) minmax(0, .62fr);
    gap: 11px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--call-dash);
}
.call-param:last-child { border-bottom: 0; }

.call-param dt,
.call-param dd
{
    min-width: 0;
    margin: 0;
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.call-param dt { color: var(--call-ink); font-weight: 600; }
.call-param dd { color: var(--call-text); white-space: pre-wrap; max-height: 260px; overflow: auto; }

.call-empty
{
    padding: 13px 0;
    color: var(--call-text-faint);
    font-size: 12.5px;
}

.call-summary
{
    min-height: 0;
    margin: 0;
    overflow: auto;
    padding: 11px 13px 13px;
    color: var(--call-text);
    font-size: 13.5px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
    scrollbar-color: var(--call-line) transparent;
}

.call-raw
{
    flex: 1;
    min-height: 0;
    margin: 0;
    overflow: auto;
    padding: 12px 13px 14px;
    background: var(--call-raw-fill);
    color: var(--call-text-strong);
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.65;
    tab-size: 2;
    white-space: pre;
    scrollbar-width: thin;
    scrollbar-color: var(--call-purple) transparent;
}
.call-raw.is-empty { color: var(--call-text-faint); font-family: var(--font); }
.call-raw:focus-visible { outline: 2px solid var(--call-purple); outline-offset: -3px; }

.call-params::-webkit-scrollbar,
.call-summary::-webkit-scrollbar,
.call-raw::-webkit-scrollbar { width: 7px; height: 7px; }
.call-params::-webkit-scrollbar-thumb,
.call-summary::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--call-line); }
.call-raw::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--call-purple); }

@media (max-width: 640px)
{
    .call-dialog { padding: 10px; }
    .call-panel { max-height: min(88dvh, 760px); border-radius: 18px; }
    .call-head
    {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px;
        padding: 14px;
    }
    .call-status { display: none; }
    .call-close { grid-column: 3; }
    .call-body
    {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(120px, .8fr) minmax(230px, 1.2fr);
        padding: 12px;
        gap: 11px;
    }
    .call-output { gap: 11px; }
    .call-subject { max-width: 18ch; }
    .call-result { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce)
{
    .call-chip.is-live,
    .call-chip.is-status-updated,
    .call-chip.is-live:not(.running) .call-result,
    .call-status.is-updating
    {
        animation: none !important;
        filter: none !important;
    }
    .call-chip.running .call-glyph { animation: none; }
    .call-chip.running::after { animation: none; transform: none; opacity: .5; }
    .call-panel { transition: opacity 120ms ease; transform: none; filter: none; }
    .call-close:hover { transform: none; }
}

/* --- one turn reads as one flow ------------------------------------------ */

/* Every model round is its own block, and the thread spaces blocks 24px
   apart, so a turn of ten tool calls read as ten separate answers. Rounds
   of the same turn sit close; a person's message still gets the full gap. */
.thread > .msg.assistant + .msg.assistant { margin-top: -14px; }
.msg.assistant .msg-body { gap: 7px; }

/* --- reasoning: the 悄悄话 card from the same project ---------------------- */

.msg .reasoning
{
    align-self: flex-start;
    max-width: min(100%, 680px);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--call-line);
    border-radius: 16px;
    background: linear-gradient(90deg, var(--call-fill), transparent 88%);
    font-size: 12.5px;
    transition: border-color 180ms ease, background-color 180ms ease;
}
.msg .reasoning:not([open]) { border-radius: 999px; }

.msg .reasoning summary
{
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 13px 4px 11px;
    color: var(--call-text-faint);
    font-size: 12px;
    letter-spacing: .06em;
    line-height: 1.55;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.msg .reasoning summary:hover { color: var(--call-ink); }

.msg .reasoning summary::before
{
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin: 0;
    border-radius: 50%;
    background: #7ec8b8;
    box-shadow: 0 0 8px rgba(126, 200, 184, .6);
    transform: none;
    transition: none;
}
.msg .reasoning[open] summary::before { transform: none; }

.msg .reasoning summary::after
{
    content: "›";
    flex: none;
    font-size: 14px;
    line-height: 1;
    transition: transform 200ms cubic-bezier(.2, .8, .2, 1);
}
.msg .reasoning[open] summary::after { transform: rotate(90deg); }

/* Still thinking: the dot turns pink and breathes, as it does there. */
.msg .reasoning.is-live { border-color: var(--call-line-strong); }
.msg .reasoning.is-live summary::before
{
    background: #ff8fa3;
    box-shadow: 0 0 8px rgba(255, 143, 163, .6);
    animation: call-breathe 1.4s ease-in-out infinite;
}

@keyframes call-breathe
{
    0%, 100% { opacity: 1; }
    50%      { opacity: .3; }
}

.msg .reasoning-body
{
    margin: 0;
    padding: 0 16px 12px 29px;
    border: 0;
    background: none;
    color: var(--call-text-faint);
    font-size: 13px;
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 360px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--call-line) transparent;
}

@media (prefers-reduced-motion: reduce)
{
    .msg .reasoning.is-live summary::before { animation: none; }
    .msg .reasoning summary::after { transition: none; }
}

/* --- feature highlighting in reasoning (Kyle, 2026-10-07) ----------------
   orange caution · blue the user · purple openers · brown current action ·
   cyan tools · red errors · green progress · pink connectives */

:root
{
    --mark-warn: #c26a12;
    --mark-user: #2f72b8;
    --mark-open: #7a5cc4;
    --mark-act: #8a5630;
    --mark-tool: #0e8484;
    --mark-err: #c43b33;
    --mark-ok: #2e8846;
    --mark-conj: #c64c84;
}

:root[data-theme="dark"]
{
    --mark-warn: #f2a65a;
    --mark-user: #7ab6f2;
    --mark-open: #b9a6f0;
    --mark-act: #d0a07a;
    --mark-tool: #5fd0cc;
    --mark-err: #f08a82;
    --mark-ok: #82d396;
    --mark-conj: #f29cc4;
}

@media (prefers-color-scheme: dark)
{
    :root:not([data-theme="light"])
    {
        --mark-warn: #f2a65a;
        --mark-user: #7ab6f2;
        --mark-open: #b9a6f0;
        --mark-act: #d0a07a;
        --mark-tool: #5fd0cc;
        --mark-err: #f08a82;
        --mark-ok: #82d396;
        --mark-conj: #f29cc4;
    }
}

.reasoning-body .rm
{
    --mark: var(--text);
    padding: 0 .14em;
    border-radius: 4px;
    color: var(--mark);
    background: color-mix(in srgb, var(--mark) 11%, transparent);
    font-weight: 550;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.reasoning-body .rm-warn { --mark: var(--mark-warn); }
.reasoning-body .rm-user { --mark: var(--mark-user); }
.reasoning-body .rm-open { --mark: var(--mark-open); }
.reasoning-body .rm-act  { --mark: var(--mark-act); }
.reasoning-body .rm-tool { --mark: var(--mark-tool); font-family: var(--mono); font-size: .94em; }
.reasoning-body .rm-err  { --mark: var(--mark-err); }
.reasoning-body .rm-ok   { --mark: var(--mark-ok); }
/* Connectives split the thought rather than carry it: colour, no plate. */
.reasoning-body .rm-conj { --mark: var(--mark-conj); background: none; padding: 0; font-weight: 500; }

/* --- token ledger (幻依's 本会话 Token 组分, 2026-10-07) ---------------------
   Reuses the tool dialog's frame (.call-dialog / .call-panel), wider. */

:root
{
    --ledger-hit: rgba(203, 235, 225, .84);
    --ledger-miss: rgba(171, 221, 206, .72);
    --ledger-out: rgba(126, 200, 184, .58);
    --ledger-free: rgba(254, 248, 241, .92);
}

:root[data-theme="dark"]
{
    --ledger-hit: rgba(126, 200, 184, .13);
    --ledger-miss: rgba(126, 200, 184, .22);
    --ledger-out: rgba(126, 200, 184, .34);
    --ledger-free: rgba(255, 255, 255, .03);
}

@media (prefers-color-scheme: dark)
{
    :root:not([data-theme="light"])
    {
        --ledger-hit: rgba(126, 200, 184, .13);
        --ledger-miss: rgba(126, 200, 184, .22);
        --ledger-out: rgba(126, 200, 184, .34);
        --ledger-free: rgba(255, 255, 255, .03);
    }
}

.ledger-dialog { z-index: 160; }
.ledger-panel
{
    width: min(1040px, 100%);
    max-height: min(84vh, 760px);
}

.ledger-head
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--call-divider);
}
.ledger-heading { min-width: 0; }
.ledger-sub
{
    margin: 4px 0 0;
    color: var(--call-text-faint);
    font-size: 12px;
    line-height: 1.55;
}

.ledger-stats
{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px dashed var(--call-dash);
}
.ledger-stat
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 8px 11px;
    border: 1px solid var(--call-section-line);
    border-radius: 12px;
    background: var(--call-section);
}
.ledger-stat strong
{
    overflow: hidden;
    color: var(--call-text-strong);
    font-family: var(--mono);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ledger-stat span { color: var(--call-text-faint); font-size: 11px; }
.ledger-stat.is-hit strong { color: var(--call-ink); }
.ledger-stat.is-cost { border-color: var(--call-line); }

.ledger-legend
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 16px;
    padding: 9px 18px;
    border-bottom: 1px dashed var(--call-dash);
    color: var(--call-text-faint);
    font-family: var(--mono);
    font-size: 10.5px;
}
.ledger-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ledger-legend i
{
    width: 13px;
    height: 7px;
    border: 1px solid rgba(126, 200, 184, .2);
    border-radius: 999px;
}
.ledger-legend .is-hit, .ledger-bars .is-hit { background: var(--ledger-hit); }
.ledger-legend .is-miss, .ledger-bars .is-miss { background: var(--ledger-miss); }
.ledger-legend .is-out, .ledger-bars .is-out { background: var(--ledger-out); }
.ledger-legend .is-free { background: var(--ledger-free); border-color: var(--call-section-line); }

.ledger-body
{
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px 16px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--call-line) transparent;
}
.ledger-body:focus-visible { outline: 2px solid var(--call-ink); outline-offset: -3px; }

.ledger-table { min-width: 820px; }

.ledger-grid
{
    display: grid;
    grid-template-columns: minmax(240px, 1fr) repeat(4, minmax(80px, .4fr)) minmax(92px, .44fr);
    align-items: center;
    gap: 9px;
}

.ledger-columns
{
    position: sticky;
    top: -12px;
    z-index: 4;
    padding: 7px 12px 8px;
    background: color-mix(in srgb, var(--call-panel) 94%, transparent);
    color: var(--call-text-faint);
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .06em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ledger-columns span:not(:first-child) { text-align: right; }

.ledger-row
{
    position: relative;
    z-index: 0;
    min-height: 64px;
    margin-top: 7px;
    padding: 11px 12px;
    overflow: hidden;
    border: 1px solid var(--call-section-line);
    border-radius: 14px;
    background: var(--call-section);
    isolation: isolate;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
@media (hover: hover) and (pointer: fine)
{
    .ledger-row:hover
    {
        border-color: var(--call-line-strong);
        box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
        transform: translateY(-1px);
    }
}
.ledger-row.is-unpriced { border-style: dashed; }

.ledger-bars
{
    position: absolute;
    inset: 0;
    z-index: -1;
    display: flex;
    overflow: hidden;
    pointer-events: none;
}
.ledger-bars span
{
    flex: 0 0 auto;
    min-width: 0;
    height: 100%;
    box-shadow: 1px 0 rgba(255, 255, 255, .35) inset;
}

.ledger-copy
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ledger-copy strong
{
    overflow: hidden;
    color: var(--call-text-strong);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ledger-copy small
{
    overflow: hidden;
    color: var(--call-text-faint);
    font-family: var(--mono);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ledger-metric
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
    text-align: right;
}
.ledger-metric strong
{
    color: var(--call-text-strong);
    font-family: var(--mono);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}
.ledger-metric small
{
    color: var(--call-text-faint);
    font-family: var(--mono);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ledger-row.is-unpriced .ledger-metric:last-child strong { color: var(--mark-warn); }

.ledger-empty
{
    display: grid;
    place-items: center;
    min-height: 200px;
    padding: 28px;
    color: var(--call-text-faint);
    text-align: center;
}
.ledger-empty-mark
{
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
    border: 1px solid var(--call-line);
    border-radius: 50%;
    background: var(--call-fill-open);
    color: var(--call-ink);
    font-family: var(--mono);
}
.ledger-empty strong { color: var(--call-text); font-size: 14px; }
.ledger-empty p { max-width: 34rem; margin: 6px 0 0; font-size: 12px; line-height: 1.6; }

.ledger-foot
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 18px 13px;
    border-top: 1px solid var(--call-divider);
    color: var(--call-text-faint);
    font-family: var(--mono);
    font-size: 10.5px;
}

.ledger-head .call-close { flex: none; }

/* A phone has no room for six columns: each round becomes two lines, its
   summary on top and the five numbers under it, so nothing scrolls sideways. */
@media (max-width: 640px)
{
    .ledger-panel { max-height: min(90dvh, 760px); border-radius: 18px; }
    .ledger-head { padding: 14px; }
    .ledger-sub { font-size: 11.5px; }
    .ledger-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 10px 14px; }
    .ledger-stat { padding: 6px 9px; }
    .ledger-stat strong { font-size: 14px; }
    .ledger-stats .ledger-stat.is-cost { grid-column: 1 / -1; }
    .ledger-legend { padding-inline: 14px; }
    .ledger-body { padding-inline: 10px; }
    .ledger-table { min-width: 0; }
    .ledger-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 4px; }
    .ledger-columns span:first-child { display: none; }
    .ledger-copy { grid-column: 1 / -1; }
    .ledger-metric strong { font-size: 12px; }
    .ledger-foot { flex-direction: column; align-items: flex-start; gap: 3px; padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce)
{
    .ledger-row:hover { transform: none; }
}

/* The ring opens the ledger now; say so on hover. */
#chatCtxRing { cursor: pointer; }

/* --- prices next to models ------------------------------------------------- */

.model_picker_menu { width: min(400px, calc(100vw - 40px)); }
.model_picker_unit
{
    padding: 4px 8px 6px;
    color: var(--faint);
    font-size: 10.5px;
    line-height: 1.4;
}
.model_picker_price
{
    flex: none;
    color: var(--faint);
    font-family: var(--mono);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.model_picker_price.is-unpriced { color: var(--mark-warn); opacity: .85; }

.price-cell
{
    font-family: var(--mono);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
.price-cell.is-unpriced { color: var(--mark-warn); white-space: nowrap; }
.price-main { display: block; white-space: nowrap; }
.price-extra
{
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    color: var(--faint);
    font-size: 10.5px;
    white-space: nowrap;
}
.price-extra:empty { display: none; }
.price-extra .price-source { margin-left: 0; }
.table-scroll { max-width: 100%; overflow-x: auto; }
#settingsView .disclosure-aside
{
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

/* --- automatic pricing (GPT-5.6 Luna web search, 2026-10-07) ------------- */

.autoprice-box
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--call-line);
    border-radius: 12px;
    background: var(--call-fill);
}
.autoprice-status
{
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    color: var(--text);
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.autoprice-status[hidden] { display: none; }
.autoprice-status.is-busy { color: var(--call-ink); }
.autoprice-status.is-found strong { color: var(--call-ink); }
.autoprice-status.is-missing strong,
.autoprice-status.is-missing { color: var(--mark-warn); }
.autoprice-status a { color: var(--accent); font-size: 11.5px; }

.price-source
{
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 10.5px;
    line-height: 1.6;
    text-decoration: none;
    vertical-align: 1px;
}
.price-source.is-auto { color: var(--call-ink); background: var(--call-fill); border: 1px solid var(--call-line); }
.price-source.is-manual { color: var(--muted); background: var(--ui_hover); border: 1px solid var(--ui_border); }
a.price-source:hover { border-color: var(--call-line-strong); }
.price-cell.is-busy { color: var(--call-ink); }

/* --- daily exchange rate (2026-10-07) ------------------------------------- */

.fx-card
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 12px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid var(--ui_border);
    border-radius: 12px;
    background: var(--surface-raised);
}
.fx-line { font-size: 13px; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.fx-detail { grid-column: 1; line-height: 1.5; }
.fx-card .btn { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 640px)
{
    .fx-card { grid-template-columns: 1fr; }
    .fx-card .btn { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* --- pictures in the composer and in messages (2026-10-13) ---------------- */

.composer-pictures
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}
.composer-pictures[hidden] { display: none; }
.composer-picture
{
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--ui_border);
    border-radius: 12px;
    background: var(--surface-raised);
}
.composer-picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.composer-picture.is-uploading img { opacity: .5; }
.composer-picture.is-failed { border-color: var(--danger); }
.composer-picture.is-failed img { opacity: .35; filter: grayscale(1); }
.composer-picture-busy
{
    position: absolute;
    inset: 50% auto auto 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid color-mix(in srgb, var(--text) 25%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: picture-spin .8s linear infinite;
}
@keyframes picture-spin { to { transform: rotate(360deg); } }
.composer-picture-remove
{
    position: absolute;
    top: 3px;
    right: 3px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.composer-picture-remove:hover { background: rgba(0, 0, 0, .75); }

.msg-pictures
{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 100%;
}
.msg.assistant .msg-pictures { justify-content: flex-start; }
.msg-pictures img
{
    max-width: min(260px, 100%);
    max-height: 220px;
    border: 1px solid var(--ui_border);
    border-radius: 12px;
    object-fit: cover;
    cursor: zoom-in;
}

@media (prefers-reduced-motion: reduce)
{
    .composer-picture-busy { animation-duration: 2s; }
}

/* --- model sources in 幻依's card layout (2026-10-13) ----------------------
   Same buttons and behaviour as before; only the look follows 幻依's
   模型源管理: a count over cards, each card a source with its models. */

#settingsView .source-section-title
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 10px;
}
#settingsView .source-section-title h3 { margin: 0; color: var(--text-strong); font-size: 14px; font-weight: 600; }
#settingsView .source-section-title > span { color: var(--faint); font-family: var(--mono); font-size: 11px; }

.source-list { display: flex; flex-direction: column; gap: 11px; }

.source-group
{
    overflow: hidden;
    border: 1px solid var(--ui_border);
    border-radius: 16px;
    background: var(--surface-raised);
    box-shadow: 0 5px 16px rgba(92, 73, 49, .05);
}
.source-group.is-open { border-color: color-mix(in srgb, var(--call-line) 70%, var(--ui_border)); }

.source-group-head
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 9px;
    padding: 12px 13px 7px;
}
.source-group-heading { min-width: 0; }
.source-group-name
{
    display: block;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 13.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.source-group-endpoint
{
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: var(--faint);
    font-family: var(--mono);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-group-meta
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 0 13px 10px;
    color: var(--faint);
    font-family: var(--mono);
    font-size: 10.5px;
}
.source-group-meta > span,
.source-group-meta > .latency-badge
{
    padding: 2px 7px;
    border: 0;
    border-radius: 999px;
    background: var(--ui_hover);
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1.5;
}
.source-group-meta .source-item-key { background: var(--call-fill); color: var(--call-ink); }
.source-group-meta .latency-badge.ok { background: var(--call-fill); color: var(--call-ink); }
.source-group-meta .latency-badge.danger { color: var(--danger); }
.source-group-toggle
{
    margin-left: auto;
    padding: 2px 9px;
    border: 1px solid var(--call-line);
    border-radius: 999px;
    background: var(--call-fill);
    color: var(--call-ink);
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1.5;
    cursor: pointer;
}
.source-group-toggle:hover { border-color: var(--call-line-strong); }

.source-group-body[hidden] { display: none; }
.source-group-search { width: calc(100% - 26px); margin: 0 13px 8px; }

.source-group-models
{
    display: flex;
    flex-direction: column;
    border-top: 1px dashed var(--ui_border);
    border-bottom: 1px dashed var(--ui_border);
}
.source-model-row
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
}
.source-model-row[hidden] { display: none; }
.source-model-row + .source-model-row { border-top: 1px solid color-mix(in srgb, var(--text) 6%, transparent); }
.source-model-row-info { min-width: 0; }
.source-model-row-info > strong,
.source-model-row-info > span
{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.source-model-row-info > strong { color: var(--text); font-size: 12.5px; font-weight: 600; }
.source-model-row-info > span { margin-top: 2px; color: var(--faint); font-family: var(--mono); font-size: 10.5px; }
.source-model-row-info > .price-cell { margin-top: 4px; font-size: 11px; }

.source-group-no-model { margin: 0; padding: 11px 13px; color: var(--faint); font-size: 12px; }

.source-group-actions,
.source-model-row-actions { display: flex; flex: none; align-items: center; gap: 5px; }

.source-edit,
.source-delete,
.source-model-edit,
.source-model-delete
{
    flex: none;
    border: 1px solid var(--ui_border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.source-edit-group,
.source-delete-group,
.source-model-edit
{
    min-height: 27px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
}
.source-model-delete
{
    width: 27px;
    height: 27px;
    padding: 0;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
}
.source-edit:hover:not(:disabled),
.source-model-edit:hover:not(:disabled)
{
    border-color: var(--call-line-strong);
    background: var(--call-fill);
    color: var(--call-ink);
}
.source-edit.is-urgent { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.source-delete:hover:not(:disabled),
.source-model-delete:hover:not(:disabled)
{
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    background: color-mix(in srgb, var(--danger) 9%, transparent);
    color: var(--danger);
}

.source-group-tools
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px 12px;
}
.source-group-add,
.source-card-action,
.source-new-connection
{
    padding: 5px 12px;
    border: 1px solid var(--call-line);
    border-radius: 999px;
    background: var(--call-fill);
    color: var(--call-ink);
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, transform 120ms ease;
}
.source-group-add { flex: 1 1 100%; }
.source-group-add:hover,
.source-card-action:hover:not(:disabled),
.source-new-connection:hover
{
    border-color: var(--call-line-strong);
    background: var(--call-fill-hover);
}
.source-card-action:disabled { cursor: wait; opacity: .55; }
.source-group-add:active,
.source-card-action:active,
.source-new-connection:active { transform: scale(.98); }
.source-new-connection { margin-top: 12px; padding: 8px 16px; font-size: 13px; font-weight: 600; }

@media (max-width: 640px)
{
    .source-group-head { flex-direction: column; }
    .source-model-row { grid-template-columns: 1fr; }
    .source-model-row-actions { justify-content: flex-end; }
}