/* App-owned page chrome. The design-system kit (kit.css) is a verbatim mirror of the
   Claude Design source and sizes .kc-shell at height:100% so it can be embedded in
   fixed-height docs frames — the app supplies the real viewport height here. 100dvh
   tracks the dynamic viewport on phones so the composer hugs the bottom. */
body {
    height: 100dvh;
}

/* Topbar rename/delete actions: compact on desktop, full tap size on the phone
   topbar (design: proto/rename-conversation — the title truncates instead of
   the actions dropping). 840px matches the shell's drawer breakpoint. */
@media (max-width: 840px) {
    .chat-topbar-action.kc-btn--icon.kc-btn--sm {
        width: var(--kc-tap-min);
        min-width: var(--kc-tap-min);
        min-height: var(--kc-tap-min);
    }
}

/* ── The installing surface (design: proto/update-installing) ──────────────────
   Global rather than scoped to a component, because it is injected into <body> by
   update.js and outlives the circuit — it never carries a component's b-* scope
   attribute. Loaded with the page, long before an install begins, which is also what
   lets the surface render with zero further requests. */

.iw-host {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.iw {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--kc-space-6);
    background: var(--kc-canvas);
    color: var(--kc-text);
    font-family: var(--kc-font-body);
    overflow: auto;
}

.iw__card {
    width: 100%;
    max-width: 440px;
    display: grid;
    gap: var(--kc-space-5);
    min-width: 0;
}

/* Grid children default to min-width:auto, so without this a long command widens the
   card past the viewport instead of scrolling inside its own box. */
.iw__card > * {
    min-width: 0;
}

.iw__brand {
    display: flex;
    align-items: center;
    gap: var(--kc-space-2);
    font-family: var(--kc-font-display);
    font-weight: var(--kc-weight-display);
    color: var(--kc-text-muted);
    font-size: var(--kc-text-sm);
}

.iw__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--kc-radius-sm);
    background: var(--kc-accent);
    color: var(--kc-text-on-accent);
    font-size: var(--kc-text-xs);
}

.iw__title {
    margin: 0;
    font-family: var(--kc-font-display);
    font-size: var(--kc-text-xl);
    font-weight: var(--kc-weight-display);
    line-height: var(--kc-leading-snug);
}

.iw__say {
    margin: var(--kc-space-2) 0 0;
    color: var(--kc-text-muted);
    font-size: var(--kc-text-base);
    line-height: var(--kc-leading-normal);
    text-wrap: pretty;
}

/* Three named things happening, each stamped with how long it took. A bare spinner reads
   as hung by the second minute. */
.iw__steps {
    display: grid;
    gap: var(--kc-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.iw__step {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    gap: var(--kc-space-3);
    align-items: center;
    font-size: var(--kc-text-base);
    color: var(--kc-text-faint);
}

.iw__step[data-at="now"] { color: var(--kc-text); }

.iw__step[data-at="done"] { color: var(--kc-text-muted); }

.iw__dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--kc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.iw__step[data-at="done"] .iw__dot {
    background: var(--kc-success);
    border-color: var(--kc-success);
    color: var(--kc-text-on-accent);
}

.iw__step[data-at="done"] .iw__dot svg {
    width: 12px;
    height: 12px;
    display: block;
}

.iw__step[data-at="now"] .iw__dot {
    border-color: var(--kc-border);
    border-top-color: var(--kc-accent);
    animation: iw-rot .8s linear infinite;
}

.iw__step:not([data-at="done"]) .iw__dot svg { display: none; }

.iw__when {
    font-family: var(--kc-font-mono);
    font-size: var(--kc-text-xs);
    color: var(--kc-text-faint);
}

@keyframes iw-rot {
    to { transform: rotate(360deg); }
}

/* Slowed, not stopped: the motion is what says "still working". */
@media (prefers-reduced-motion: reduce) {
    .iw__step[data-at="now"] .iw__dot { animation-duration: 2.6s; }
}

/* Indeterminate on purpose — nothing on this side of the restart could know a percentage. */
.iw__meter {
    height: 4px;
    border-radius: 2px;
    background: var(--kc-surface-3);
    overflow: hidden;
}

.iw__meter span {
    display: block;
    height: 100%;
    width: 34%;
    border-radius: 2px;
    background: var(--kc-accent);
    animation: iw-slide 2.2s var(--kc-ease) infinite;
}

@keyframes iw-slide {
    0% { transform: translateX(-105%); }
    100% { transform: translateX(320%); }
}

.iw__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kc-space-3);
    font-size: var(--kc-text-sm);
    color: var(--kc-text-muted);
}

.iw__clock {
    font-family: var(--kc-font-mono);
    font-size: var(--kc-text-sm);
    color: var(--kc-text);
}

.iw__note {
    margin: 0;
    font-size: var(--kc-text-sm);
    color: var(--kc-text-faint);
    line-height: var(--kc-leading-snug);
    text-wrap: pretty;
}

/* Amber for the failure where nothing changed; red for the one where KinChat is down. */
.iw__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--kc-radius-pill);
    background: var(--kc-warning-soft);
    color: var(--kc-warning);
}

.iw__badge svg {
    width: 22px;
    height: 22px;
}

.iw__badge--fault {
    background: var(--kc-danger-soft);
    color: var(--kc-danger);
}

.iw__cmd {
    margin: 0;
    max-width: 100%;
    padding: var(--kc-space-3);
    border-radius: var(--kc-radius-sm);
    background: var(--kc-code-bg);
    border: 1px solid var(--kc-code-border);
    font-family: var(--kc-font-mono);
    font-size: var(--kc-text-xs);
    color: var(--kc-text-muted);
    line-height: 1.8;
    white-space: pre;
    overflow-x: auto;
}

.iw__cmd b {
    color: var(--kc-text);
    font-weight: var(--kc-weight-medium);
}

.iw__mono {
    font-family: var(--kc-font-mono);
}

.iw__acts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kc-space-2);
}

.iw__ver {
    font-family: var(--kc-font-mono);
    font-size: var(--kc-text-xs);
    padding: .15em .45em;
    border-radius: var(--kc-radius-xs);
    background: var(--kc-code-bg);
    border: 1px solid var(--kc-code-border);
    color: var(--kc-text-muted);
    white-space: nowrap;
}

/* The admin is probably holding a phone: top-align so the title and clock stay in the
   first screenful, and give the buttons the full width. */
@media (max-width: 420px) {
    .iw {
        padding: var(--kc-space-4);
        align-items: flex-start;
        padding-top: var(--kc-space-10);
    }

    .iw__acts .kc-btn {
        width: 100%;
    }
}

/* While the surface is up it owns the screen. The framework's own reconnect UI is talking
   about the same restart, and two voices are worse than one. */
html[data-kc-updating] #components-reconnect-modal {
    display: none !important;
}