/* ==========================================================================
   Product mockups. Everything inside .app is sized in em so a mockup scales
   like a screenshot with its container (.shot sets container-type).
   ========================================================================== */

:root {
  --app-bg: #FFFFFF;
  --app-side: #F5F6F9;
  --app-chrome: #EEF0F4;
  --app-ink: #18213A;
  --app-ink-2: #56607A;
  --app-ink-3: #8A93A8;
  --app-rule: #E5E8EF;
  --app-accent: #3D6BD6;
  --app-sel: #E7EDFB;
  --app-hl: #FFEFA3;
  --app-sketch: #F6F4EE;
  --app-sketch-fill: #DCE6F7;
  --bezel: #0F1528;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-bg: #1A2236; --app-side: #151C2E; --app-chrome: #121829;
    --app-ink: #E6EAF3; --app-ink-2: #A9B3C8; --app-ink-3: #7C879F; --app-rule: #2A344B;
    --app-accent: #85A6FF; --app-sel: #25305A; --app-hl: #5A4C1B; --app-sketch: #20283D; --app-sketch-fill: #2D3D62; --bezel: #05080F;
  }
}
:root[data-theme="dark"] {
  --app-bg: #1A2236; --app-side: #151C2E; --app-chrome: #121829;
  --app-ink: #E6EAF3; --app-ink-2: #A9B3C8; --app-ink-3: #7C879F; --app-rule: #2A344B;
  --app-accent: #85A6FF; --app-sel: #25305A; --app-hl: #5A4C1B; --app-sketch: #20283D; --app-sketch-fill: #2D3D62; --bezel: #05080F;
}

.shot { container-type: inline-size; position: relative; min-width: 0; }

.app { font-family: var(--f-sans); color: var(--app-ink); background: var(--app-bg); line-height: 1.55; text-align: left; user-select: none; }
.app .i { width: 1.15em; height: 1.15em; flex: none; }
.app kbd { font-size: .78em; padding: .05em .4em; border-width: 1px; background: var(--app-bg); border-color: var(--app-rule); color: var(--app-ink-3); margin-left: auto; }
.app mark { background: var(--app-hl); color: inherit; border-radius: .15em; padding: 0 .1em; }
.app mark.is-anchored { box-shadow: 0 .14em 0 var(--p-jules); }

/* avatars (shared with page UI) */
.av {
  --av: var(--ink-3);
  display: inline-grid; place-items: center; width: 2em; height: 2em; border-radius: 50%;
  background: var(--av); color: #fff; font-weight: 700; font-size: .78em; line-height: 1; flex: none;
  box-shadow: 0 0 0 .16em var(--app-bg);
}
.av-sm { width: 2.1em; height: 2.1em; font-size: .72em; }
.av-xs { width: 1.8em; height: 1.8em; font-size: .62em; }
.presence { display: inline-flex; }
.presence .av + .av { margin-left: -.35em; }

/* ---------- Desktop window ---------- */
.app-desktop {
  font-size: clamp(8px, 1.16cqi, 13.5px);
  border-radius: .9em; overflow: hidden;
  border: 1px solid var(--app-rule);
  box-shadow: var(--shadow-3);
}
.app-titlebar { min-width: 0; overflow: hidden;
  display: flex; align-items: center; gap: 1em; height: 3.1em; padding: 0 1em;
  background: var(--app-chrome); border-bottom: 1px solid var(--app-rule); color: var(--app-ink-2); font-size: .95em;
}
.traffic { display: flex; gap: .5em; width: 15em; flex: none; }
.traffic i { width: .9em; height: .9em; border-radius: 50%; background: #F26A5E; }
.traffic i:nth-child(2) { background: #F5BE4F; }
.traffic i:nth-child(3) { background: #5BC266; }
.win-title { display: flex; align-items: center; gap: .5em; width: 15em; flex: none; font-weight: 600; color: var(--app-ink); }
.gtk-left { width: 15em; flex: none; display: flex; }
.app-crumb { display: flex; gap: .5em; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; }
.app-crumb b { font-weight: 400; color: var(--app-ink-3); }
.app-crumb span:last-child { color: var(--app-ink); font-weight: 600; }
.chrome-linux .app-crumb { margin-inline: auto; }
.app-tb-right { margin-left: auto; display: flex; align-items: center; gap: .8em; }
.chrome-linux .app-tb-right { margin-left: 0; }
.win-ctrls { display: flex; margin-right: -1em; }
.win-ctrls i { width: 3.4em; height: 3.1em; display: grid; place-items: center; color: var(--app-ink-2); }
.win-ctrls i .i, .win-ctrls svg { width: 1em; height: 1em; }
.gtk-ctrls i { width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; background: var(--app-rule); }
.gtk-ctrls .i { width: .9em; height: .9em; }
.chrome-windows { border-radius: .35em; }
.chrome-windows .app-titlebar { background: var(--app-bg); }
.chrome-linux { border-radius: .8em; }

.app-btn {
  display: inline-flex; align-items: center; gap: .45em; height: 2.3em; padding: 0 .9em; border-radius: .5em;
  border: 1px solid var(--app-rule); background: var(--app-bg); color: var(--app-ink); font-weight: 600; font-size: .92em; white-space: nowrap;
}
.app-btn .i { width: 1em; height: 1em; }
.app-btn-sm { height: 2.1em; padding: 0 .75em; font-size: .88em; }
.app-btn-primary { background: var(--app-ink); border-color: var(--app-ink); color: var(--app-bg); }

.app-body { display: grid; grid-template-columns: 16em minmax(0, 1fr); min-height: 44em; }
.app-body.has-panel { grid-template-columns: 16em minmax(0, 1fr) 19em; }

/* sidebar */
.app-side { background: var(--app-side); border-right: 1px solid var(--app-rule); padding: 1em .8em; display: flex; flex-direction: column; gap: .15em; font-size: .95em; color: var(--app-ink-2); }
.side-ws { display: flex; align-items: center; gap: .6em; padding: .3em .4em .8em; font-weight: 700; color: var(--app-ink); }
.side-ws .i { margin-left: auto; width: .9em; color: var(--app-ink-3); }
.ws-badge { width: 1.7em; height: 1.7em; border-radius: .45em; display: grid; place-items: center; background: var(--margin); color: #fff; font-size: .8em; }
.side-search { display: flex; align-items: center; gap: .55em; padding: .45em .6em; border-radius: .5em; background: var(--app-bg); border: 1px solid var(--app-rule); margin-bottom: .6em; color: var(--app-ink-3); }
.side-item { display: flex; align-items: center; gap: .6em; padding: .38em .55em; border-radius: .45em; white-space: nowrap; overflow: hidden; }
.side-item span { overflow: hidden; text-overflow: ellipsis; }
.side-item em { margin-left: auto; font-style: normal; font-size: .82em; color: var(--app-ink-3); }
.side-item .i { width: 1.05em; height: 1.05em; color: var(--app-ink-3); }
.side-child { padding-left: 2.25em; }
.side-item.is-active { background: var(--app-sel); color: var(--app-ink); font-weight: 600; }
.side-label { margin: 1em .55em .3em; font-size: .78em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--app-ink-3); }

/* document */
.app-doc { min-width: 0; position: relative; }
.doc-inner { max-width: 44em; padding: 2.6em 3.2em 2.4em; }
.doc-title { font-family: var(--f-display); font-weight: 400; font-size: 2.15em; line-height: 1.12; letter-spacing: -.01em; color: var(--app-ink); text-wrap: balance; }
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55em; margin: .9em 0 1.6em; color: var(--app-ink-3); font-size: .9em; }
.doc-meta .sep { width: .25em; height: .25em; border-radius: 50%; background: var(--app-ink-3); opacity: .6; }
.app-status { display: inline-flex; align-items: center; gap: .4em; height: 2em; padding: 0 .7em; border-radius: 99em; font-weight: 600; font-size: .92em; background: var(--app-side); color: var(--app-ink-2); white-space: nowrap; }
.app-status .i { width: 1em; height: 1em; }
.app-status.tone-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--app-bg)); }
.app-status.tone-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, var(--app-bg)); }
.doc-body { display: grid; gap: .85em; font-size: 1.02em; color: var(--app-ink); }
.doc-body h3 { font-size: 1.05em; font-weight: 700; margin-top: .5em; }
.doc-body ul { padding-left: 1.2em; display: grid; gap: .25em; color: var(--app-ink); }
.doc-body li::marker { color: var(--app-ink-3); }
.app-lead { font-size: 1.08em; }
.app-figure { margin: .3em 0; display: grid; gap: .4em; }
.app-figure figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; font-size: .82em; color: var(--app-ink-3); }
.app-hand { font-family: var(--f-hand); font-size: 1.35em; color: var(--margin); }
.app-chips { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .4em; }
.app-chips span { display: inline-flex; align-items: center; gap: .35em; height: 2em; padding: 0 .7em; border-radius: .45em; background: var(--app-side); border: 1px solid var(--app-rule); color: var(--app-ink-2); font-size: .86em; }
.app-chips .i { width: .95em; height: .95em; }
.app-meta-line { font-size: .85em; color: var(--app-ink-3); }
.app-callout { display: flex; gap: .6em; padding: .8em 1em; border-radius: .6em; background: color-mix(in srgb, var(--p-jules) 13%, var(--app-bg)); color: var(--app-ink); }
.app-callout .i { color: var(--p-jules); margin-top: .15em; }
.app-banner { display: flex; align-items: center; gap: .6em; padding: .7em 3.2em; font-size: .92em; border-bottom: 1px solid var(--app-rule); }
.app-banner u { text-underline-offset: .2em; font-weight: 600; }
.app-banner.tone-warn { background: color-mix(in srgb, var(--warn) 11%, var(--app-bg)); color: var(--warn); }
.app-banner.tone-ok { background: color-mix(in srgb, var(--ok) 11%, var(--app-bg)); color: var(--ok); }
.app-banner.tone-cipher { background: var(--app-side); color: var(--app-ink-2); }

/* sketch */
.sketch { width: 100%; height: auto; }
.sketch .sk-bg { fill: var(--app-sketch); }
.sketch .sk-line { fill: none; stroke: var(--app-ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sketch .sk-fill { fill: var(--app-sketch-fill); stroke: var(--app-ink-2); stroke-width: 1.4; }
.sketch .sk-accent { fill: var(--margin); opacity: .85; }
.sketch .sk-tree { fill: color-mix(in srgb, var(--p-alex) 30%, var(--app-sketch)); stroke: var(--app-ink-2); stroke-width: 1.4; }
.sketch .sk-pen { fill: none; stroke: var(--margin); stroke-width: 2.4; stroke-linecap: round; }
.sketch .sk-pen-2 { stroke: var(--p-morgan); stroke-width: 2; }

/* live cursors */
.cursor { position: relative; display: inline-block; width: 2px; height: 1.25em; margin: 0 1px -.22em; background: var(--av); border-radius: 1px; }
.cursor-flag { position: absolute; left: 0; bottom: 100%; transform: translateY(-.15em); padding: .1em .45em; border-radius: .3em .3em .3em 0; background: var(--av); color: #fff; font-size: .7em; font-weight: 700; white-space: nowrap; line-height: 1.5; }
.typed { color: var(--app-ink); }

/* panel */
.app-panel { border-left: 1px solid var(--app-rule); background: var(--app-bg); padding: 1.2em 1.1em; display: flex; flex-direction: column; gap: .9em; font-size: .92em; min-width: 0; }
.panel-head { display: flex; align-items: center; gap: .5em; font-weight: 700; padding-bottom: .4em; }
.panel-head em { margin-left: auto; font-style: normal; color: var(--app-ink-3); font-weight: 600; }
.panel-head .i { color: var(--app-ink-3); }
.panel-note { color: var(--app-ink-3); font-size: .92em; }
.thread { display: grid; gap: .9em; padding: 1em; border: 1px solid var(--app-rule); border-radius: .7em; }
.thread blockquote { margin: 0; padding-left: .7em; border-left: 2px solid var(--p-jules); color: var(--app-ink-2); font-size: .95em; }
.thread.is-resolved { opacity: .78; }
.comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6em; }
.comment strong { font-size: .95em; }
.comment p { color: var(--app-ink-2); margin-top: .1em; }
.resolved-tag { display: inline-flex; align-items: center; gap: .35em; color: var(--ok); font-weight: 600; font-size: .9em; }
.resolved-tag .i { width: 1em; height: 1em; }
.reply { padding: .7em .9em; border: 1px solid var(--app-rule); border-radius: .6em; color: var(--app-ink-3); }
.backlink { display: grid; gap: .25em; padding: .8em .9em; border-radius: .6em; background: var(--app-side); }
.backlink strong { font-size: .95em; }
.backlink span { color: var(--app-ink-2); font-size: .92em; }
.backlink b { background: var(--app-hl); font-weight: 400; }
.label-sm { font-size: .78em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--app-ink-3); }
.agent-scope, .agent-task, .agent-provider { display: grid; gap: .45em; padding: .9em; border-radius: .6em; border: 1px solid var(--app-rule); }
.scope-row { display: flex; align-items: center; gap: .5em; }
.scope-row .i { color: var(--app-accent); }
.muted-row { color: var(--app-ink-3); }
.muted-row .i { color: var(--app-ink-3); }

/* agent suggestion */
.suggestion { border: 1px solid color-mix(in srgb, var(--app-accent) 40%, var(--app-rule)); background: color-mix(in srgb, var(--app-accent) 6%, var(--app-bg)); border-radius: .7em; padding: .9em 1em; display: grid; gap: .7em; }
.suggestion-head { display: flex; align-items: center; gap: .5em; font-size: .88em; font-weight: 700; color: var(--app-accent); }
.suggestion-src { margin-left: auto; font-weight: 600; color: var(--app-ink-3); }
.suggestion del { color: var(--app-ink-3); }
.suggestion ins { text-decoration: none; background: color-mix(in srgb, var(--ok) 15%, transparent); border-radius: .15em; }
.suggestion-actions { display: flex; gap: .5em; }

/* cipher view */
.cipher { display: grid; gap: .55em; font-family: var(--f-mono); font-size: .92em; color: var(--app-ink-3); padding-top: .5em; }
.cipher-line { display: block; width: var(--w); white-space: nowrap; overflow: hidden; letter-spacing: .02em; }
.cipher-gap { height: .8em; }

/* narrow container: show the document only */
@container (max-width: 700px) {
  .app-desktop { font-size: clamp(10px, 2.65cqi, 14px); }
  .app-body, .app-body.has-panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .app-side, .app-panel { display: none; }
  .traffic, .win-title, .gtk-left { width: auto; }
  .doc-inner { padding: 1.8em 1.6em; }
  .app-banner { padding-inline: 1.6em; }
  .app-tb-right .presence { display: none; }
  .stack-panel .app-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; border-left: 0; border-top: 1px solid var(--app-rule); background: var(--app-side); padding: 1.2em 1.6em 1.6em; }
  .stack-panel .app-panel .panel-head { grid-column: 1 / -1; padding-bottom: 0; }
  .stack-panel .app-panel .agent-scope { grid-row: span 2; background: var(--app-bg); }
  .stack-panel .app-panel .agent-task, .stack-panel .app-panel .agent-provider { background: var(--app-bg); }
  .stack-panel .thread, .stack-panel .reply { grid-column: 1 / -1; background: var(--app-bg); }
  .stack-panel .backlink { background: var(--app-bg); }
  .stack-panel .backlink:last-child { grid-column: 1 / -1; }
}

/* ---------- Devices ---------- */
.device { position: relative; background: var(--bezel); box-shadow: var(--shadow-3); }
.device-phone { width: 100%; max-width: 300px; aspect-ratio: 300 / 620; border-radius: 44px; padding: 10px; }
.device-phone .app { height: 100%; border-radius: 35px; overflow: hidden; display: flex; flex-direction: column; font-size: 11.5px; position: relative; }
.device-phone.os-android { border-radius: 30px; }
.device-phone.os-android .app { border-radius: 22px; }
.ph-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 6px; font-weight: 700; font-size: 1.05em; }
.os-android .ph-status { padding: 10px 18px 6px; font-weight: 600; font-size: .95em; }
.ph-icons { display: flex; align-items: center; gap: 6px; }
.ph-icons .i { width: 14px; height: 14px; }
.batt { display: block; width: 22px; height: 11px; border-radius: 3px; border: 1.5px solid currentColor; position: relative; }
.batt::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; border-radius: 1px; background: currentColor; }
.ph-nav { display: flex; align-items: center; gap: 4px; padding: 8px 14px; color: var(--app-accent); font-weight: 600; font-size: 1.15em; }
.ph-nav .i { width: 20px; height: 20px; }
.ph-nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ph-nav-android { color: var(--app-ink); gap: 14px; padding: 10px 16px; }
.ph-nav-android > span:not(.ph-nav-right) { font-weight: 600; font-size: .95em; }
.ph-content { flex: 1; overflow: hidden; padding: 6px 20px 12px; -webkit-mask-image: linear-gradient(#000 85%, transparent); mask-image: linear-gradient(#000 85%, transparent); }
.ph-content .doc-title { font-size: 2em; }
.ph-content .doc-meta { margin: .7em 0 1.1em; }
.ph-content .doc-body { font-size: 1.05em; gap: .75em; }
.ph-content .app-chips, .ph-content .app-figure figcaption span:last-child { display: none; }
.ph-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 10px 22px; border-top: 1px solid var(--app-rule); background: var(--app-side); }
.ph-tabbar span { display: grid; justify-items: center; gap: 2px; color: var(--app-ink-3); }
.ph-tabbar em { font-style: normal; font-size: .8em; font-weight: 600; }
.ph-tabbar .is-active { color: var(--app-accent); }
.ph-tabbar .i { width: 20px; height: 20px; }
.ph-fab { position: absolute; right: 18px; bottom: 34px; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--app-sel); color: var(--app-accent); box-shadow: var(--shadow-1); }
.ph-fab .i { width: 22px; height: 22px; }
.ph-gesture { height: 22px; display: grid; place-items: center; }
.ph-gesture::after { content: ""; width: 34%; height: 4px; border-radius: 4px; background: var(--app-ink-3); opacity: .5; }

.device-tablet { width: 100%; aspect-ratio: 4 / 3; border-radius: 28px; padding: 14px; }
.device-tablet .app { height: 100%; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; font-size: clamp(7px, 1.42cqi, 12.5px); }
.tab-body { flex: 1; display: grid; grid-template-columns: 34% minmax(0, 1fr); min-height: 0; }
.tab-list { background: var(--app-side); border-right: 1px solid var(--app-rule); padding: 1em .9em; display: flex; flex-direction: column; gap: .4em; overflow: hidden; }
.tab-list-head { font-family: var(--f-display); font-size: 1.5em; padding: .2em .3em .5em; }
.tab-list-head strong { font-weight: 400; }
.tab-row { display: grid; gap: .1em; padding: .7em .8em; border-radius: .6em; }
.tab-row strong { font-size: .98em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-row em { font-style: normal; font-size: .85em; color: var(--app-ink-3); }
.tab-row.is-active { background: var(--app-sel); }
.tab-doc { position: relative; padding: 1em 2.4em; overflow: hidden; }
.tab-toolbar { display: flex; align-items: center; gap: 1.2em; color: var(--app-accent); padding-bottom: 1.2em; }
.tab-toolbar .presence { margin-left: auto; }
.tab-doc .doc-title { font-size: 2em; }
.tab-doc .doc-meta { margin: .6em 0 1em; }
.tab-doc .doc-body { gap: .7em; }
.pen-palette { position: absolute; left: 50%; bottom: 1.2em; transform: translateX(-50%); display: flex; align-items: center; gap: .7em; padding: .6em 1.1em; border-radius: 99em; background: var(--app-bg); border: 1px solid var(--app-rule); box-shadow: var(--shadow-2); }
.pen-tool { width: .9em; height: 2.4em; border-radius: .3em .3em .15em .15em; background: var(--app-ink-3); opacity: .55; }
.pen-tool.is-active { background: var(--margin); opacity: 1; transform: translateY(-.3em); }
.pen-tool.t2 { background: var(--p-morgan); }
.pen-sep { width: 1px; height: 1.8em; background: var(--app-rule); }
.pen-color { width: 1.3em; height: 1.3em; border-radius: 50%; }
.pen-color.c1 { background: var(--margin); box-shadow: 0 0 0 .18em var(--app-bg), 0 0 0 .3em var(--margin); }
.pen-color.c2 { background: var(--p-morgan); }
.pen-color.c3 { background: var(--app-ink); }