/* Bluehour editor (dark). Tokens and base components: ui/tokens.css. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--tw-bg);
  color: var(--tw-fg);
  font: var(--tw-text-md) / 1.45 var(--tw-font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--tw-accent) 35%, transparent); }
/* no visible scroll bars: areas still scroll with the wheel, trackpad, touch and keyboard */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
.app { display: grid; grid-template-rows: 48px 1fr; height: 100vh; }

/* ---------- top bar ---------- */
.top { display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--tw-bg); border-bottom: 1px solid var(--tw-border); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -0.01em; }
/* the Bluehour mark: a small twilight sky, deep indigo into blue, the last warm glow on the horizon */
.mark { width: 18px; height: 18px; border-radius: 50%; flex: none; background: linear-gradient(180deg, #141c4a 0%, #26408f 38%, #4f7bd9 66%, #f0a36b 86%, #ff7a45 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.file { color: var(--tw-muted); font-size: var(--tw-text-sm); margin-left: 6px; display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.file b { color: var(--tw-fg); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the top bar never wraps: buttons keep one line, the file name shrinks first, its size hides on narrow windows */
.top > :not(.file, .spacer) { flex: none; white-space: nowrap; }
.file { flex: 0 1 auto; }
.file span { white-space: nowrap; }
@media (max-width: 1100px) { .file span { display: none; } }
.spacer { flex: 1; }
.status { color: var(--tw-muted); font-size: var(--tw-text-sm); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--tw-radius-sm); border: 1px solid var(--tw-border); background: var(--tw-surface-2); font-weight: 500; font-size: var(--tw-text-md); cursor: pointer; transition: background var(--tw-fast) var(--tw-ease), border-color var(--tw-fast) var(--tw-ease), transform var(--tw-fast) var(--tw-ease); }
.btn:hover { background: var(--tw-elevated); border-color: var(--tw-border-strong); }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--tw-fg); color: var(--tw-bg); border-color: var(--tw-fg); }
.btn.primary:hover { background: #fff; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: progress; }
.btn:focus-visible, .link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tw-bg), 0 0 0 4px var(--tw-accent); }
.link { border: 0; background: none; color: var(--tw-muted); font-size: var(--tw-text-sm); cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.link:hover { color: var(--tw-fg); }
.export-wrap { position: relative; }
.popover { position: absolute; right: 0; top: 38px; z-index: 10; width: 240px; padding: 14px; background: var(--tw-elevated); border: 1px solid var(--tw-border-strong); border-radius: var(--tw-radius-lg); box-shadow: 0 16px 40px rgba(0,0,0,0.5); display: grid; gap: 10px; animation: pop var(--tw-med) var(--tw-spring); transform-origin: top right; }
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
.popover label { display: grid; gap: 4px; font-size: var(--tw-text-sm); color: var(--tw-muted); }
.popover select { font: inherit; padding: 6px 8px; border: 1px solid var(--tw-border); border-radius: var(--tw-radius-sm); background: var(--tw-surface-2); color: var(--tw-fg); }
.popover[hidden] { display: none; }

.main { --chat-w: var(--chat-open, 300px); --panel-w: 320px; display: grid; grid-template-columns: var(--chat-w) minmax(0, 1fr) var(--panel-w); min-height: 0; }
/* the adjustments panel tucked away to a rail, like the chat (remembered) */
body.panel-collapsed .main { --panel-w: 44px; }
.panel-rail { display: none; flex-direction: column; align-items: center; padding-top: 8px; }
body.panel-collapsed .panel-rail { display: flex; }
body.panel-collapsed .panel { padding: 0; overflow: hidden; }
body.panel-collapsed .panel > :not(.panel-rail) { display: none !important; } /* the histogram has its own display rule */
.panel-search #panel-collapse { flex: none; margin-right: -6px; }
body:not(.resizing-chat) .main { transition: grid-template-columns var(--tw-med) var(--tw-spring); }
body.chat-collapsed .main { --chat-w: 44px; }

/* ---------- chat and history ---------- */
.side { position: relative; display: flex; flex-direction: column; background: var(--tw-surface); min-height: 0; min-width: 0; overflow: hidden; }
/* collapsed: a thin rail with the expand button (and a pulse while the AI edits) */
.side-rail { display: none; flex-direction: column; align-items: center; gap: 10px; padding-top: 8px; }
body.chat-collapsed .side-rail { display: flex; }
body.chat-collapsed .side > :not(.side-rail) { display: none; }
.rail-btn { width: 28px; height: 28px; border: 0; border-radius: var(--tw-radius-sm); background: none; color: var(--tw-subtle); display: grid; place-items: center; cursor: pointer; }
.rail-btn:hover { color: var(--tw-fg); background: var(--tw-elevated); }
.rail-btn svg { width: 16px; height: 16px; }
.rail-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tw-accent); opacity: 0; }
body.agent-editing .rail-dot { opacity: 1; animation: ping 1.4s var(--tw-ease) infinite; }
/* drag the edge to resize */
.side-resize { position: absolute; top: 0; bottom: 0; right: 0; width: 6px; cursor: col-resize; z-index: 5; }
.side-resize::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: transparent; transition: background var(--tw-fast); }
.side-resize:hover::after, body.resizing-chat .side-resize::after { background: var(--tw-accent); }
body.resizing-chat { cursor: col-resize; user-select: none; }
.side-head { display: flex; align-items: center; gap: 6px; padding: 0 8px 0 16px; height: 44px; }
.side-head .spacer { flex: 1; }
.side-head h2 { margin: 0; font: 500 var(--tw-text-sm) / 1 var(--tw-font); color: var(--tw-muted); }
/* Chat | History: two quiet text tabs */
.side-tabs { display: flex; gap: 2px; margin-left: -8px; }
.side-tabs button { height: 26px; padding: 0 8px; border: 0; border-radius: var(--tw-radius-sm); background: none; font: 500 var(--tw-text-sm) / 1 var(--tw-font); color: var(--tw-subtle); cursor: pointer; transition: color var(--tw-fast) var(--tw-ease), background var(--tw-fast) var(--tw-ease); }
.side-tabs button:hover { color: var(--tw-fg); }
.side-tabs button[aria-selected="true"] { color: var(--tw-fg); background: rgba(255,255,255,0.05); }
.history { flex: 1; overflow: auto; padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 14px; }
.history > * { flex-shrink: 0; } /* the list scrolls; its blocks keep their full height */
.empty-history { color: var(--tw-muted); font-size: var(--tw-text-md); margin: 2px; }
/* one block per request (or run of your own edits): header, then each step and exactly what it moved */
.run { border-radius: 14px; background: rgba(255,255,255,0.03); overflow: hidden; }
.run-head { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; font-size: var(--tw-text-xs); font-weight: 500; color: var(--tw-muted); }
.run-head .mark { width: 12px; height: 12px; }
.run-head .you-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tw-muted); }
.run-head .count { margin-left: auto; color: var(--tw-subtle); font-weight: 400; }
.run-body { display: grid; }
.run-text { padding: 8px 12px 10px; font-size: var(--tw-text-md); line-height: 1.5; }
.run-body > .run-text:first-child { border-top: 0; }
.run .working { padding: 8px 12px 10px; }
.enter { animation: rise var(--tw-med) var(--tw-spring); }
/* "generating": shimmer while the agent decides, then each change writes itself in */
.shimmer-text { background: linear-gradient(90deg, var(--tw-subtle) 20%, var(--tw-fg) 50%, var(--tw-subtle) 80%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.5s linear infinite; }
@keyframes shimmer { from { background-position: 110% 0; } to { background-position: -110% 0; } }
.chg.skel { gap: 24px; }
.chg.skel .bar { height: 7px; border-radius: 4px; background: linear-gradient(90deg, #222 20%, #333 50%, #222 80%) 0 0 / 220% 100%; animation: shimmer 1.3s linear infinite; }
.chg.skel .bar.short { width: 22%; flex: none; }
.row-in { animation: row-in 320ms var(--tw-ease) both; }
@keyframes row-in { from { opacity: 0; transform: translateY(3px); filter: blur(3px); } }
.word-in { animation: word-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes word-in {
  from { opacity: 0; filter: blur(6px); transform: translateY(3px); text-shadow: 0 0 14px rgba(255, 255, 255, 0.7); }
  45% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.35); }
  to { text-shadow: none; }
}
.msg-agent .w { display: inline-block; } /* so a word can rise */
/* a setting the AI names in a reply: plain text with the value emphasised; the reply's settings listed in a card under it */
.set-ref { font-weight: 500; color: var(--tw-fg); font-variant-numeric: tabular-nums; }
.set-card { display: grid; gap: 1px; padding: 6px; border-radius: 12px; background: rgba(255,255,255,0.03); }
.set-row { display: grid; grid-template-columns: 1fr 44px 56px; align-items: center; gap: 10px; min-height: 26px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--tw-muted); font: inherit; font-size: var(--tw-text-xs); text-align: left; cursor: pointer; }
.set-row:hover { background: rgba(255,255,255,0.05); color: var(--tw-fg); }
.set-row .mini { position: relative; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; }
.set-row .mini b { position: absolute; top: 0; bottom: 0; min-width: 2px; background: rgba(255,255,255,0.8); }
.set-row .dot { justify-self: end; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.set-row .val { font-family: var(--tw-mono); font-size: 10.5px; color: var(--tw-fg); text-align: right; }
/* formatted replies: short paragraphs, lists, bold look names */
.msg-agent p { margin: 0; }
.msg-agent p + p, .msg-agent :is(ul, ol) + p, .msg-agent p + :is(ul, ol) { margin-top: 8px; }
.msg-agent :is(ul, ol) { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.msg-agent li::marker { color: var(--tw-subtle); }
.msg-agent strong { font-weight: 600; color: var(--tw-fg); }
/* a change card's title, when the AI's change starts playing */
.title-in { animation: word-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.sketch.draw path.after { stroke-dasharray: 1; animation: draw 700ms var(--tw-ease) both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .shimmer-text, .chg.skel .bar, .row-in, .word-in, .title-in, .sketch.draw path.after { animation: none; }
  .shimmer-text { color: var(--tw-muted); background: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }

/* steps sit on a quiet timeline rail: a dot per step (accent for the agent's, grey for yours, a ring when undone) */
.step { position: relative; padding: 9px 12px; }
.step::before { content: ""; position: absolute; left: 20.5px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.06); }
.run-body > .step:first-child::before, .run-body > .run-more + .step::before { top: 18px; }
.run-body > .step:last-child::before { bottom: calc(100% - 18px); }
.run-body > .step:only-child::before { display: none; }
.step-head { display: grid; grid-template-columns: 18px 1fr 24px; gap: 8px; align-items: center; }
.step .num { position: relative; justify-self: center; width: 5px; height: 5px; border-radius: 50%; background: var(--tw-subtle); }
.step.agent .num { background: var(--tw-fg); }
.step.undone .num { background: var(--chrome, #0b0b0b); box-shadow: inset 0 0 0 1px var(--tw-border-strong); }
.step .title { font-size: var(--tw-text-sm); font-weight: 500; line-height: 1.35; }
.step .moves { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* read by screen readers and tests */
.step .undo { width: 24px; height: 24px; border-radius: var(--tw-radius-sm); border: 1px solid transparent; background: none; display: grid; place-items: center; color: var(--tw-subtle); cursor: pointer; }
.step .undo:hover { border-color: var(--tw-border-strong); color: var(--tw-fg); background: var(--tw-elevated); }
.step .undo svg { width: 13px; height: 13px; }
.step.mine { padding: 7px 12px; }
.step.mine .step-head { grid-template-columns: 18px 1fr auto 24px; }
.step.mine .title { font-weight: 400; color: var(--tw-muted); }
.step.mine > .changes { display: none; }
/* a run of your own edits in the chat: what it adds up to */
.net { padding: 0 12px 10px; }
.net .changes { margin: 0; }
.net .chg.more { color: var(--tw-subtle); }
.net .see { margin-top: 6px; font-size: var(--tw-text-xs); }
/* History: every step in order */
.step-list { list-style: none; margin: 0; padding: 0; display: grid; }
.hist { position: relative; display: grid; grid-template-columns: 22px 10px 1fr 24px; align-items: center; gap: 6px; min-height: 34px; padding: 4px 4px 4px 0; border-radius: var(--tw-radius-sm); }
.hist:hover { background: rgba(255,255,255,0.03); }
.hist .n { font: 10.5px / 1 var(--tw-mono); color: var(--tw-subtle); text-align: right; }
.hist .dot { justify-self: center; width: 5px; height: 5px; border-radius: 50%; background: var(--tw-subtle); }
.hist.agent .dot { background: var(--tw-fg); }
.hist.original .dot { background: none; box-shadow: inset 0 0 0 1px var(--tw-border-strong); }
.hist.undone .dot { background: none; box-shadow: inset 0 0 0 1px var(--tw-border-strong); }
.hist .text { display: grid; min-width: 0; }
.hist .title { font-size: var(--tw-text-sm); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist .sub { font-size: var(--tw-text-xs); color: var(--tw-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist.undone .title, .hist.undone .sub { color: var(--tw-subtle); opacity: 0.7; }
.hist .back { position: absolute; right: 34px; top: 50%; translate: 0 -50%; opacity: 0; height: 22px; padding: 0 7px; border: 1px solid var(--tw-border); border-radius: var(--tw-radius-sm); background: var(--tw-surface-2); color: var(--tw-muted); font: inherit; font-size: var(--tw-text-xs); white-space: nowrap; cursor: pointer; transition: opacity var(--tw-fast) var(--tw-ease); }
.hist:hover .back, .hist .back:focus-visible { opacity: 1; }
.hist .back:hover { color: var(--tw-fg); border-color: var(--tw-border-strong); }
.hist .undo { width: 24px; height: 24px; border-radius: var(--tw-radius-sm); border: 1px solid transparent; background: none; display: grid; place-items: center; color: var(--tw-subtle); cursor: pointer; }
.hist .undo:hover { border-color: var(--tw-border-strong); color: var(--tw-fg); background: var(--tw-elevated); }
.hist .undo svg { width: 13px; height: 13px; }
.hist.flash { animation: flash 1.6s var(--tw-ease); }
@keyframes flash { 0%, 40% { background: color-mix(in srgb, var(--tw-accent) 14%, transparent); } }
.run-more { width: 100%; height: 30px; border: 0; background: none; color: var(--tw-muted); font: inherit; font-size: var(--tw-text-xs); cursor: pointer; }
.run-more:hover { color: var(--tw-fg); background: rgba(255,255,255,0.03); }
.changes { display: grid; gap: 1px; margin: 6px 0 0 26px; }
.chg { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 20px; font-size: var(--tw-text-xs); }
.chg .k { color: var(--tw-muted); display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.chg, .step-head) .v { display: flex; align-items: center; gap: 5px; font-family: var(--tw-mono); font-size: 10.5px; white-space: nowrap; }
:is(.chg, .step-head) .from { color: var(--tw-subtle); }
:is(.chg, .step-head) .arr { color: var(--tw-subtle); font-family: var(--tw-font); }
:is(.chg, .step-head) .to { color: var(--tw-fg); }
.chg .tint { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); flex: none; }
.chg .sketch { width: 40px; height: 22px; display: block; border-radius: 3px; background: var(--tw-surface); }
.step.undone .title { color: var(--tw-subtle); }
.step.undone .changes { opacity: 0.45; }
.step.undone .chg .to { text-decoration: line-through; text-decoration-color: var(--tw-border-strong); }
.msg-user { align-self: flex-end; max-width: 88%; background: var(--tw-elevated); padding: 9px 13px; border-radius: 18px 18px 6px 18px; font-size: var(--tw-text-md); white-space: pre-wrap; }
.msg-user img { display: block; max-width: 140px; max-height: 110px; border-radius: var(--tw-radius-sm); margin-bottom: 6px; }
.msg-agent { font-size: var(--tw-text-md); line-height: 1.55; padding: 0 2px; }
.msg-agent .who { display: flex; align-items: center; gap: 6px; font-size: var(--tw-text-xs); font-weight: 500; color: var(--tw-muted); margin-bottom: 4px; }
.msg-agent .who .mark { width: 12px; height: 12px; }
.msg-error { font-size: var(--tw-text-sm); color: #ffb4a8; background: color-mix(in srgb, var(--tw-danger) 10%, transparent); border-radius: 12px; padding: 9px 12px; }
.working { display: flex; align-items: center; gap: 8px; font-size: var(--tw-text-sm); color: var(--tw-muted); }
.working .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tw-accent); animation: pulse 1s ease-in-out infinite; }
.working .link { margin-left: auto; }
@keyframes pulse { 50% { opacity: 0.3; transform: scale(0.8); } }

/* the message box: one soft rounded field (in the spirit of Claude and ChatGPT), its tools on a row inside */
.composer { padding: 8px 12px 14px; }
.chat-note { font-size: var(--tw-text-xs); color: var(--tw-muted); margin: 0 6px 8px; }
.chat-note:empty { display: none; }
.chat-form { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 8px 12px; border-radius: 20px; background: var(--tw-surface-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); transition: box-shadow var(--tw-fast), background var(--tw-fast); }
.chat-form:focus-within { background: #1b1b1b; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.composer.drop-ref .chat-form { box-shadow: inset 0 0 0 1px var(--tw-accent); }
.chat-form textarea { width: 100%; border: 0; outline: none; resize: none; font: inherit; font-size: var(--tw-text-md); line-height: 1.5; min-height: 24px; max-height: 168px; padding: 2px 2px 0; background: transparent; color: var(--tw-fg); overflow-y: hidden; }
.chat-form textarea::placeholder { color: var(--tw-subtle); }
.chat-tools { display: flex; align-items: center; gap: 4px; margin-left: -4px; }
.chat-tools .spacer { flex: 1; }
.tool-btn { width: 30px; height: 30px; flex: none; border: 0; border-radius: 999px; background: transparent; color: var(--tw-muted); display: grid; place-items: center; cursor: pointer; padding: 0; transition: color var(--tw-fast), background var(--tw-fast); }
.tool-btn:hover { color: var(--tw-fg); background: rgba(255,255,255,0.06); }
.tool-btn:disabled { opacity: 0.35; cursor: default; background: none; }
.tool-btn svg { width: 16px; height: 16px; }
.strength-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--tw-muted); font: 500 var(--tw-text-sm) / 1 var(--tw-font); cursor: pointer; transition: color var(--tw-fast), background var(--tw-fast); }
.strength-chip:hover, .strength-chip[aria-expanded="true"] { color: var(--tw-fg); background: rgba(255,255,255,0.06); }
.strength-chip svg { width: 12px; height: 12px; opacity: 0.7; }
.strength-chip .meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.strength-chip .meter i { width: 3px; border-radius: 1px; background: rgba(255,255,255,0.18); }
.strength-chip .meter i:nth-child(1) { height: 4px; } .strength-chip .meter i:nth-child(2) { height: 5.5px; } .strength-chip .meter i:nth-child(3) { height: 7px; } .strength-chip .meter i:nth-child(4) { height: 8.5px; } .strength-chip .meter i:nth-child(5) { height: 10px; }
.strength-chip .meter i.on { background: var(--tw-accent); }
.chat-form .send { width: 30px; height: 30px; flex: none; border-radius: 999px; border: 0; background: var(--tw-fg); color: var(--tw-bg); display: grid; place-items: center; cursor: pointer; transition: opacity var(--tw-fast), transform var(--tw-fast) var(--tw-ease), background var(--tw-fast); }
.chat-form .send:active { transform: scale(0.94); }
.chat-form .send:disabled { opacity: 1; background: rgba(255,255,255,0.12); color: var(--tw-subtle); cursor: default; }
.chat-form .send svg { width: 14px; height: 14px; }
.ref-chip[hidden] { display: none; }
.ref-chip { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; font-size: var(--tw-text-sm); color: var(--tw-muted); }
.ref-chip .refs { display: flex; gap: 6px; flex: none; }
.ref-chip .ref { position: relative; }
.ref-chip img { display: block; width: 44px; height: 44px; object-fit: cover; border-radius: 10px; }
.ref-chip .ref-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 1px solid var(--tw-border-strong); border-radius: 50%; background: var(--tw-elevated); color: var(--tw-fg); font-size: 9px; line-height: 1; cursor: pointer; opacity: 0; transform: scale(0.8); transition: opacity var(--tw-fast), transform var(--tw-fast) var(--tw-spring); }
.ref-chip .ref:hover .ref-x, .ref-chip .ref-x:focus-visible { opacity: 1; transform: none; }
.ref-chip .ref-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-add:disabled { opacity: 0.4; cursor: default; }
.msg-refs { display: grid; gap: 4px; margin-bottom: 6px; }
.msg-refs.n1 { grid-template-columns: minmax(0, 140px); }
.msg-refs.n2, .msg-refs.n4 { grid-template-columns: repeat(2, 84px); }
.msg-refs.n3 { grid-template-columns: repeat(3, 72px); }
.msg-refs img { width: 100%; aspect-ratio: 1; object-fit: cover; max-width: none; max-height: none; margin: 0; }
.msg-refs.n1 img { aspect-ratio: auto; max-height: 110px; }
.ref-chip .link { margin-left: auto; }

/* ---------- stage ---------- */
.stage { background: radial-gradient(ellipse at center, #121212, var(--tw-bg) 70%); min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.stage-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px 0; }
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--tw-surface-2); border: 1px solid var(--tw-border); border-radius: var(--tw-radius-sm); }
.seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; height: 24px; padding: 0 10px 0 8px; border-radius: 4px; font-size: var(--tw-text-sm); font-weight: 500; color: var(--tw-muted); cursor: pointer; transition: background var(--tw-fast), color var(--tw-fast); }
.seg button:hover { color: var(--tw-fg); }
.seg button.on { background: var(--tw-elevated); color: var(--tw-fg); box-shadow: 0 0 0 1px var(--tw-border-strong); }
.seg button svg { width: 14px; height: 14px; flex: none; }
.stage-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border: 1px solid var(--tw-border); border-radius: var(--tw-radius-sm); background: var(--tw-surface-2); color: var(--tw-muted); font-size: var(--tw-text-sm); font-weight: 500; cursor: pointer; transition: color var(--tw-fast), background var(--tw-fast), border-color var(--tw-fast); }
.stage-btn:hover:not(:disabled) { color: var(--tw-fg); background: var(--tw-elevated); border-color: var(--tw-border-strong); }
.stage-btn:disabled { opacity: 0.4; cursor: default; }
.stage-btn svg { width: 14px; height: 14px; }
.toast { display: inline-flex; align-items: center; gap: 10px; height: 28px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--tw-elevated); border: 1px solid var(--tw-border-strong); font-size: var(--tw-text-sm); color: var(--tw-fg); animation: pop var(--tw-med) var(--tw-spring); }
.toast .link { color: var(--tw-accent); font-weight: 500; }
.kbd-hint { margin-left: auto; font-size: var(--tw-text-xs); color: var(--tw-subtle); }
.frame-box { position: relative; flex: 1; margin: 16px 28px 28px; display: grid; place-items: center; min-height: 0; }

.empty { position: absolute; inset: 0; display: grid; place-items: center; }
.drop { text-align: center; padding: 48px 56px; border: 1px dashed var(--tw-border-strong); border-radius: 16px; background: color-mix(in srgb, var(--tw-surface) 60%, transparent); max-width: 460px; transition: border-color var(--tw-med), background var(--tw-med); }
.drop-title { font-size: var(--tw-text-lg); font-weight: 600; margin-bottom: 6px; }
.drop-sub { color: var(--tw-muted); font-size: var(--tw-text-sm); }
body.dragging .drop { border-color: var(--tw-accent); background: var(--tw-accent-soft); }
body.has-photo .empty { display: none; }

.frame { --split: 50%; position: relative; display: none; border-radius: 6px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--tw-border); touch-action: none; user-select: none; }
body.has-photo .frame { display: block; }
body.has-photo .frame { cursor: zoom-in; }
body.has-photo.zoomed .frame { cursor: grab; }
body.has-photo[data-view="split"] .frame.on-divider { cursor: ew-resize; }
body.panning, body.panning * { cursor: grabbing !important; user-select: none; }
body.space-pan.zoomed .frame, body.space-pan.zoomed .frame * { cursor: grab !important; }
body.splitting, body.splitting * { cursor: ew-resize !important; user-select: none; }
body.peeking .frame { cursor: grabbing; }
.frame canvas { display: block; position: absolute; }
/* the whole photo: the frame at Fit; zoomed in, larger than the frame and moved by the pan (zoom.js) */
.frame #after, .frame #before { left: var(--ph-x, 0); top: var(--ph-y, 0); width: var(--ph-w, 100%); height: var(--ph-h, 100%); }
/* the sharp render of the part in view, over it (placed by zoom.js) */
.frame canvas.detail { display: none; }
body.zoomed .frame canvas.detail.on { display: block; }
.frame canvas.detail.pixels { image-rendering: pixelated; }
.before-side { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--split)) 0 0); z-index: 1; }
body[data-view="before"] .frame .before-side { clip-path: none; }
body[data-view="after"] .frame .before-side { display: none; }
.divider { position: absolute; top: 0; bottom: 0; left: var(--split); width: 1px; background: rgba(255,255,255,0.85); transform: translateX(-0.5px); z-index: 2; pointer-events: none; }
body:not([data-view="split"]) .divider { display: none; }
.handle { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(10,10,10,0.7); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.35); display: grid; place-items: center; color: #fff; }
.handle svg { width: 14px; height: 14px; }
.tag { position: absolute; top: 10px; padding: 3px 8px; border-radius: 999px; font-size: var(--tw-text-xs); font-weight: 500; background: rgba(10,10,10,0.6); backdrop-filter: blur(8px); color: #fff; z-index: 3; pointer-events: none; }
.tag.b { left: 10px; }
/* zoom (zoom.js): the toolbar's menu, and the navigator over the stage's corner while zoomed in */
.zoom-btn { min-width: 84px; justify-content: space-between; font-variant-numeric: tabular-nums; }
.zoom-btn .zoom-pct { flex: 1; text-align: left; }
.zoom-btn.on { color: var(--tw-fg); }
body.loading-full .zoom-btn .zoom-pct::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--tw-accent); vertical-align: middle; animation: tw-pulse 0.9s ease-in-out infinite alternate; }
@keyframes tw-pulse { from { opacity: 0.25; } to { opacity: 1; } }
.navigator { position: absolute; right: 12px; bottom: 12px; z-index: 5; padding: 4px; border-radius: 8px; background: rgba(10,10,10,0.72); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.12); display: none; cursor: pointer; touch-action: none; user-select: none; }
.navigator.on { display: block; }
.navigator canvas { display: block; border-radius: 4px; }
.nav-view { position: absolute; margin: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,0.95), 0 0 0 9999px rgba(0,0,0,0.38); border-radius: 2px; cursor: grab; pointer-events: none; }
.navigator { overflow: hidden; }
.navigator.dragging, .navigator.dragging .nav-view { cursor: grabbing; }
body.cropping .navigator { display: none; }
.tag.a { right: 10px; }
body[data-view="after"] .tag.b, body[data-view="before"] .tag.a { display: none; }

/* ---------- adjustments panel ---------- */
.panel { position: relative; background: var(--tw-surface); border-left: 1px solid var(--tw-border); padding: 0 16px 24px; overflow: auto; }
#histogram { width: 100%; height: 72px; display: block; margin: 14px 0 6px; border-radius: var(--tw-radius); background: var(--tw-surface-2); border: 1px solid var(--tw-border); }
.panel-head { display: none; }
/* settings search: sticks to the top of the panel */
.panel-search { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 0 -16px 4px; padding: 8px 16px; background: var(--tw-surface); border-bottom: 1px solid var(--tw-border); }
.panel-search > svg { position: absolute; left: 26px; width: 14px; height: 14px; color: var(--tw-subtle); pointer-events: none; }
.panel-search input { flex: 1; height: 30px; padding: 0 30px 0 30px; border: 1px solid var(--tw-border); border-radius: var(--tw-radius-sm); background: var(--tw-surface-2); color: var(--tw-fg); font: inherit; font-size: var(--tw-text-sm); outline: none; transition: border-color var(--tw-fast), box-shadow var(--tw-fast); }
.panel-search input::placeholder { color: var(--tw-subtle); }
.panel-search input:focus { border-color: var(--tw-border-strong); box-shadow: 0 0 0 3px rgba(255,255,255,0.05); }
.panel-search input::-webkit-search-cancel-button { display: none; }
.panel-search kbd { position: absolute; right: 56px; pointer-events: none; }
.panel-search input:focus ~ kbd, .panel-search input:not(:placeholder-shown) ~ kbd { display: none; }
.panel-search .results { position: absolute; left: 12px; right: 12px; top: calc(100% - 2px); padding: 4px; background: var(--tw-elevated); border: 1px solid var(--tw-border-strong); border-radius: var(--tw-radius); box-shadow: 0 16px 40px rgba(0,0,0,0.55); display: grid; animation: pop var(--tw-med) var(--tw-spring); transform-origin: top center; }
.panel-search .result { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 8px; border: 0; border-radius: var(--tw-radius-sm); background: none; color: var(--tw-fg); text-align: left; cursor: pointer; font-size: var(--tw-text-sm); }
.panel-search .result.active { background: rgba(255,255,255,0.07); }
.panel-search .result .name mark { background: none; color: var(--tw-accent); font-weight: 600; }
.panel-search .result .where { grid-row: 2; font-size: var(--tw-text-xs); color: var(--tw-subtle); }
.panel-search .result .val { grid-row: 1 / 3; grid-column: 2; font: 500 10.5px/1 var(--tw-mono); color: var(--tw-muted); }
.panel-search .empty { padding: 8px; color: var(--tw-subtle); font-size: var(--tw-text-sm); }
.curve-box canvas[found] { box-shadow: 0 0 0 4px rgba(255,255,255,0.08), 0 0 0 1px var(--tw-border-strong); }
.hint { color: var(--tw-subtle); font-size: var(--tw-text-xs); margin: 0 0 6px; }
body:not(.has-photo) #sliders { opacity: 0.35; pointer-events: none; }
/* (?) beside a section title: its explanation as a tooltip */
.tw-section > header { position: relative; }
.help { position: static; display: inline-grid; place-items: center; width: 15px; height: 15px; padding: 0; border-radius: 50%; border: 1px solid var(--tw-border-strong); background: none; color: var(--tw-subtle); font: 600 9.5px/1 var(--tw-font); cursor: help; transition: color var(--tw-fast), border-color var(--tw-fast); }
.help:hover, .help:focus-visible, .help.open { color: var(--tw-fg); border-color: var(--tw-muted); outline: none; }
.help .tip { position: absolute; left: 0; right: 0; top: calc(100% - 4px); z-index: 5; padding: 9px 11px; border-radius: var(--tw-radius); background: var(--tw-elevated); border: 1px solid var(--tw-border-strong); box-shadow: 0 12px 32px rgba(0,0,0,0.5); color: var(--tw-muted); font: 400 var(--tw-text-xs) / 1.5 var(--tw-font); text-align: left; cursor: default; opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity var(--tw-fast) var(--tw-ease), transform var(--tw-fast) var(--tw-ease); }
.help:hover .tip, .help:focus-visible .tip, .help.open .tip { opacity: 1; transform: none; transition-delay: 120ms; }
.group-hint { font-size: var(--tw-text-xs); color: var(--tw-subtle); margin: 0 0 6px; line-height: 1.4; }
.sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 6px; }
.tw-seg.full { display: flex; width: 100%; }
.tw-seg.full button { flex: 1; padding: 0 2px; font-size: var(--tw-text-xs); }
.curve-box canvas { width: 100%; aspect-ratio: 520 / 400; display: block; border: 1px solid var(--tw-border); border-radius: var(--tw-radius); background: var(--tw-surface-2); cursor: crosshair; touch-action: none; margin-top: 8px; transition: box-shadow 0.25s; }
.curve-box.agent-moving canvas { box-shadow: 0 0 0 4px var(--tw-accent-soft), 0 0 0 1px var(--tw-accent); }
.wheels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 8px; justify-items: center; padding: 8px 0 4px; }
.wheels .solo { grid-column: 1 / -1; }
.wheel-cell { display: grid; gap: 4px; justify-items: center; width: 100%; }
.wheel-cell tw-slider { width: 100%; }
.timing { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--tw-border); font-size: var(--tw-text-xs); color: var(--tw-muted); display: grid; gap: 4px; }
.timing:empty { display: none; }
.timing div { display: flex; justify-content: space-between; gap: 8px; }
.timing b { color: var(--tw-fg); font-weight: 500; }
.foot { display: inline-block; margin-top: 16px; font-size: var(--tw-text-xs); color: var(--tw-subtle); }
.foot:hover { color: var(--tw-muted); }
body.busy { cursor: progress; }

/* ---------- the agent at the controls: banner + soft glow over the panel, controls locked ---------- */
.agent-banner { position: sticky; top: 0; z-index: 3; margin: 0 -16px; padding: 10px 12px 10px 16px; display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--tw-surface) 72%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--tw-border); font-size: var(--tw-text-sm); line-height: 1.3; }
.agent-banner[hidden] { display: none; }
.agent-banner b { font-weight: 500; }
.agent-banner small { display: block; color: var(--tw-muted); font-size: var(--tw-text-xs); }
.agent-banner .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tw-accent); animation: ping 1.4s var(--tw-ease) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tw-accent) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.agent-banner button { margin-left: auto; flex: none; height: 24px; padding: 0 10px; border: 1px solid var(--tw-border-strong); border-radius: var(--tw-radius-sm); background: var(--tw-elevated); color: var(--tw-fg); font-size: var(--tw-text-sm); font-weight: 500; cursor: pointer; }
.agent-banner button:hover { background: var(--tw-fg); color: var(--tw-bg); }
.agent-banner.nudge { animation: nudge 0.45s; }
@keyframes nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
body.agent-editing .panel { cursor: not-allowed; }
body.agent-editing .panel .agent-banner { cursor: default; }
body.agent-editing .step .undo, body.agent-editing #undo-all, body.agent-editing #reset-photo { opacity: 0.35; pointer-events: none; }

/* the glow: a soft, blurred warm light bleeding in from the panel's edges, rotating and breathing.
   app.js lays it over the panel (the panel scrolls, the glow doesn't). The edge band is cut out first and
   blurred after (inner layer), so it has no hard edge; the outer layer keeps it inside the panel. */
@property --glow-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.agent-glow { position: fixed; z-index: 50; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 0.6s ease; }
body.agent-editing .agent-glow { opacity: 1; }
.agent-glow > div { position: absolute; inset: 0; filter: blur(26px); animation: glow-breathe 1.8s ease-in-out infinite; }
.agent-glow > div::before {
  content: ""; position: absolute; inset: 0; padding: 26px;
  background: conic-gradient(from var(--glow-angle), #ffb347, #ff6b4a, #ff4f8b, #d4713a, #ffd27a, #ff6b4a, #ffb347);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: glow-spin 5s linear infinite;
}
@keyframes glow-spin { to { --glow-angle: 360deg; } }
/* with WebGL the shader draws the glow (ui/agent-glow.js); the CSS band above is the fallback */
.agent-glow.gl > div { display: none; }
.agent-glow > canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; mix-blend-mode: plus-lighter; }
@keyframes glow-breathe { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
  .agent-glow > div, .agent-glow > div::before, .agent-banner .dot { animation: none; }
  .agent-glow > div { opacity: 0.7; }
}

/* ---------- credits: top-bar balance, plans & top-ups dialog, paywall ---------- */
.credits { display: inline-flex; align-items: baseline; gap: 2px; height: 30px; padding: 0 12px; border: 1px solid var(--tw-border); border-radius: 999px; background: var(--tw-surface-2); color: var(--tw-muted); font-size: var(--tw-text-sm); cursor: pointer; align-items: center; transition: border-color var(--tw-fast), color var(--tw-fast); }
.credits b { color: var(--tw-fg); font: 600 var(--tw-text-sm) / 1 var(--tw-mono); }
/* the photon, now the AI edit token: a small sun, warmly lit (web/ui/tokens.css --tw-token-img; shelved, one attribute away:
   data-photon="prism" for the refracting gem, "gem" for the white gem, on <html>, and every token follows) */
.photon { display: inline-block; width: 12px; height: 12px; margin-right: 6px; flex: none; background: var(--tw-token-img) center / contain no-repeat; filter: var(--tw-token-glow); }
:root[data-photon="prism"] { --tw-token-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.4 14.6 8 8 8Z' fill='%239fb4ff' fill-opacity='.55'/%3E%3Cpath d='M14.6 8 8 14.6 8 8Z' fill='%23ffb37a' fill-opacity='.6'/%3E%3Cpath d='M8 14.6 1.4 8 8 8Z' fill='%23ff8fb3' fill-opacity='.45'/%3E%3Cpath d='M1.4 8 8 1.4 8 8Z' fill='%23b69cff' fill-opacity='.5'/%3E%3Cpath d='M8 1.4 14.6 8 8 14.6 1.4 8Z' fill='none' stroke='%23f5f5f5' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M8 5 11 8 8 11 5 8Z' fill='%23fff'/%3E%3C/svg%3E"); --tw-token-glow: drop-shadow(0 0 1px rgba(255,255,255,.8)) drop-shadow(0 0 4px rgba(160,170,255,.55)) drop-shadow(0 0 7px rgba(255,160,110,.25)); }
:root[data-photon="gem"] { --tw-token-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.4 14.6 8 8 14.6 1.4 8Z' fill='%23fff' fill-opacity='.08' stroke='%23f5f5f5' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cg stroke='%23f5f5f5' stroke-width='.6' stroke-opacity='.6'%3E%3Cpath d='M8 1.4V5M14.6 8H11M8 14.6V11M1.4 8H5'/%3E%3C/g%3E%3Cpath d='M8 5 11 8 8 11 5 8Z' fill='%23fff'/%3E%3C/svg%3E"); --tw-token-glow: drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 4px rgba(255,255,255,.45)); }
/* routing labels (?routes=1): who handled the message */
.msg-route { margin: -6px 0 0 1px; font: 10.5px / 1.4 var(--tw-mono); color: var(--tw-subtle); }
.msg-route::before { content: "⤷ "; }
.msg-route.handled { color: #8fbf9f; }
.msg-route.delegated { color: #a9a3d9; }
.msg-cost { display: flex; align-items: center; margin: -6px 0 0 1px; font-size: var(--tw-text-xs); color: var(--tw-subtle); }
.msg-cost .photon { width: 10px; height: 10px; }
.credits.low .photon { animation: pulse 1.6s ease-in-out infinite; }
.credits.bump .photon { animation: tw-token-bump var(--tw-slow) var(--tw-spring); }
@keyframes tw-token-bump { 40% { transform: scale(1.5) rotate(45deg); } }
.credits:hover { border-color: var(--tw-border-strong); color: var(--tw-fg); }
.credits.low b { color: var(--tw-accent); }
.billing { width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--tw-border-strong); border-radius: 16px; background: var(--tw-surface); color: var(--tw-fg); box-shadow: var(--tw-shadow-3); }
.billing[open] { animation: pop var(--tw-med) var(--tw-spring); }
.billing::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.billing-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px 20px; background: var(--tw-surface); border-bottom: 1px solid var(--tw-border); }
.billing-head h2 { margin: 0; font-size: var(--tw-text-lg); font-weight: 600; letter-spacing: -0.01em; }
.billing-body { padding: 18px 20px 22px; display: grid; gap: 12px; }
.billing-body h3 { margin: 10px 0 0; font-size: var(--tw-text-md); font-weight: 600; }
.billing-note { margin: -6px 0 0; color: var(--tw-muted); font-size: var(--tw-text-sm); }
.billing-note.test { margin-top: 4px; padding: 8px 10px; border-radius: var(--tw-radius); border: 1px dashed var(--tw-border-strong); color: var(--tw-subtle); font-size: var(--tw-text-xs); }

/* the plans & top-ups dialog (web/billing.js render): balance, plans, what an edit buys, top-ups, questions, activity.
   Built from the design system (docs/DESIGN-SYSTEM.md): tw-card, tw-badge, tw-price, tw-token, tw-seg, tw-disclosure */
.billing.plans-dialog { width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border-radius: var(--tw-radius-xl); }
.plans-dialog .billing-head { padding: 14px 16px 14px 24px; }
.plans-dialog .billing-head .rail-btn:focus-visible { outline: none; box-shadow: var(--tw-focus-ring); }
.plans-dialog .billing-body { container: plans / inline-size; padding: 20px 24px 28px; gap: 32px; }
.plans-dialog .billing-body h3 { margin: 0; font: 600 var(--tw-text-xl) / var(--tw-leading-tight) var(--tw-font); letter-spacing: -0.015em; }
.plans-dialog .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.plans-dialog .billing-note.test { margin: -12px 0 0; padding: 10px 14px; font-size: var(--tw-text-sm); }
.bh-section { display: grid; gap: 16px; }
.plans-dialog .billing-body > *, .bh-section > * { min-width: 0; } /* a wide table scrolls inside its box, never widens the dialog */
.bh-sec-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.bh-sec-head p { margin: 6px 0 0; max-width: 62ch; color: var(--tw-muted); font-size: var(--tw-text-md); line-height: var(--tw-leading); }
.bh-fine { margin: 0; color: var(--tw-subtle); font-size: var(--tw-text-sm); line-height: var(--tw-leading); }

/* balance: the blue hour, a slowly turning sun, the exact number */
.bh-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 40px; padding: 22px 28px; border: 1px solid color-mix(in srgb, #8fa4ff 18%, var(--tw-border)); border-radius: var(--tw-radius-xl); background: var(--tw-bluehour); }
.bh-hero::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tw-horizon) 80%, transparent), transparent); }
.bh-hero-bal { display: flex; align-items: center; gap: 22px; min-width: 0; }
.bh-sun { position: relative; display: grid; place-items: center; flex: none; width: 76px; height: 76px; }
.bh-sun::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(255,170,110,0.38), transparent 64%); animation: bh-breathe 5s ease-in-out infinite; }
.bh-sun .tw-token { width: 56px; height: 56px; animation: bh-turn 80s linear infinite; }
@keyframes bh-turn { to { transform: rotate(360deg); } }
@keyframes bh-breathe { 50% { opacity: 0.6; transform: scale(0.9); } }
.bh-hero-label { font: 600 var(--tw-text-xs) / 1 var(--tw-font); letter-spacing: 0.14em; text-transform: uppercase; color: #b9c3e6; }
.bh-hero-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 4px; }
.bh-hero-num b { font: 600 var(--tw-text-display) / 1 var(--tw-font); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 40px rgba(255,160,100,0.3); }
.bh-hero-num span { font-size: var(--tw-text-lg); font-weight: 500; color: #d5dcf2; }
.bh-hero-buys { font-size: var(--tw-text-md); color: #c9d1ec; }
.bh-hero-side { display: grid; justify-items: end; gap: 10px; max-width: 480px; text-align: right; }
.bh-hero-plan { display: flex; align-items: center; gap: 8px; }
.bh-hero-plan .tw-badge { height: 24px; padding: 0 10px; font-size: var(--tw-text-sm); color: #eef1fb; background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); }
.bh-hero-renews { font-size: var(--tw-text-sm); color: #b9c3e6; }
.bh-hero-sub { margin: 0; font-size: var(--tw-text-md); line-height: var(--tw-leading); color: #c9d1ec; }
.bh-rates { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.bh-rates li { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--tw-radius-full); background: rgba(8,10,22,0.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); font-size: var(--tw-text-sm); color: #d5dcf2; }
.bh-rates b { font-weight: 600; color: #fff; }
.bh-cancel { padding: 2px 0; color: #b9c3e6; }

/* plans */
.bh-period { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.bh-toggle { padding: 3px; border-radius: var(--tw-radius-full); }
.bh-toggle button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border-radius: var(--tw-radius-full); font-size: var(--tw-text-md); }
.bh-toggle button:focus-visible { outline: none; box-shadow: var(--tw-focus-ring); }
.bh-toggle .ind { top: 3px; bottom: 3px; border-radius: var(--tw-radius-full); }
.bh-toggle .tw-badge { height: 20px; padding: 0 7px; }
.bh-save-note { margin: 0; font-size: var(--tw-text-sm); color: var(--tw-muted); }
.bh-save-note .tw-badge { height: 26px; padding: 0 12px; font-size: var(--tw-text-sm); }
.bh-save-note .pop { animation: bh-pop var(--tw-slow) var(--tw-spring); }
@keyframes bh-pop { from { opacity: 0; transform: scale(0.7); } }
.bh-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bh-plan { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.bh-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.bh-plan h4 { margin: 0; font: 600 var(--tw-text-xl) / 1.2 var(--tw-font); letter-spacing: -0.01em; }
.bh-plan-for { margin: -2px 0 4px; font-size: var(--tw-text-sm); line-height: 1.4; color: var(--tw-muted); }
.bh-plan .tw-price { min-height: 40px; }
.bh-billed { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 20px; font-size: var(--tw-text-sm); color: var(--tw-muted); }
.bh-billed > span:first-child { margin-right: 2px; }
.bh-per { display: flex; align-items: center; gap: 6px; font-size: var(--tw-text-sm); color: var(--tw-muted); }
.bh-amount { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--tw-border); }
.bh-amount b { font: 600 var(--tw-text-2xl) / 1 var(--tw-font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bh-amount span { font-size: var(--tw-text-sm); color: var(--tw-muted); }
.bh-equiv { margin-top: -4px; font-size: var(--tw-text-sm); color: var(--tw-subtle); }
.bh-plan ul { flex: 1; display: grid; align-content: start; gap: 8px; margin: 4px 0 8px; padding: 0; list-style: none; font-size: var(--tw-text-md); line-height: 1.4; color: var(--tw-muted); }
.bh-plan li, .bh-free li { position: relative; padding-left: 20px; }
.bh-plan li::before, .bh-free li::before { content: ""; position: absolute; left: 2px; top: 0.36em; width: 9px; height: 4.5px; border-left: 1.5px solid var(--tw-fill); border-bottom: 1.5px solid var(--tw-fill); transform: rotate(-45deg); }
.bh-plan.featured li::before { border-color: var(--tw-accent); }
.bh-plan .tw-btn { width: 100%; height: 40px; font-size: var(--tw-text-md); }
.bh-plan .tw-btn.accent:hover { background: color-mix(in srgb, var(--tw-accent) 86%, #fff); }
.bh-plan .tw-btn:disabled { opacity: 0.6; cursor: default; }
.bh-free { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; padding: 14px 20px; }
.bh-free-name { display: flex; align-items: baseline; gap: 10px; }
.bh-free-name b { font: 600 var(--tw-text-lg) / 1.2 var(--tw-font); }
.bh-free-name span { font-size: var(--tw-text-sm); color: var(--tw-muted); }
.bh-free ul { flex: 1; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-size: var(--tw-text-sm); color: var(--tw-muted); }
.bh-assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--tw-text-sm); color: var(--tw-muted); }
.bh-assure li { display: inline-flex; align-items: center; gap: 8px; }
.bh-assure svg { width: 16px; height: 16px; flex: none; color: var(--tw-ok); }

/* compare: a folded table, Pro's column lit */
.bh-compare { border-bottom: 1px solid var(--tw-border); }
.bh-table-wrap { position: relative; overflow-x: auto; } /* (positioned: the hidden labels inside stay in its scroll box) */
.bh-table-wrap:focus-visible { outline: none; box-shadow: var(--tw-focus-ring); border-radius: var(--tw-radius); }
.bh-compare table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--tw-text-md); }
.bh-compare th, .bh-compare td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--tw-border); }
.bh-compare thead th { font-weight: 600; color: var(--tw-fg); }
.bh-compare tbody th { text-align: left; font-weight: 400; color: var(--tw-muted); white-space: nowrap; }
.bh-compare td { color: var(--tw-fg); font-variant-numeric: tabular-nums; }
.bh-compare tbody tr:last-child > * { border-bottom: 0; }
.bh-compare .hl { background: color-mix(in srgb, var(--tw-accent) 7%, transparent); }
.bh-compare thead .hl { color: var(--tw-accent); }
.bh-compare td svg { width: 16px; height: 16px; vertical-align: middle; color: var(--tw-ok); }
.bh-compare .no { color: var(--tw-subtle); }

/* what an edit buys: four little pictures, on the user's own photos */
.bh-examples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bh-ex { display: grid; align-content: start; gap: 12px; margin: 0; }
.bh-ex-pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--tw-border); border-radius: var(--tw-radius-lg); background: var(--tw-bluehour); }
.bh-ex-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bh-ex.look .after { filter: sepia(0.5) saturate(0.75) contrast(1.2) brightness(0.85) hue-rotate(-14deg); clip-path: inset(0 0 0 50%); }
.bh-ex.look .bh-ex-pic::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: rgba(255,255,255,0.85); box-shadow: 0 0 8px rgba(0,0,0,0.5); }
.bh-ex.tweak .after { filter: brightness(0.62) contrast(1.12) saturate(1.2); -webkit-mask: linear-gradient(180deg, #000 0 30%, transparent 62%); mask: linear-gradient(180deg, #000 0 30%, transparent 62%); }
.bh-ex.ask .after, .bh-ex.you .after { display: none; }
.bh-ex.ask .before, .bh-ex.you .before { filter: brightness(0.5) saturate(0.8); }
.bh-ex .bubble { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 8px 10px; border: 1px solid var(--tw-border-strong); border-radius: 12px 12px 12px 4px; background: rgba(23,23,23,0.9); font-size: var(--tw-text-sm); line-height: 1.4; color: var(--tw-fg); }
.bh-ex .sliders { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 9px; padding: 10px 12px; border: 1px solid var(--tw-border-strong); border-radius: 12px; background: rgba(17,17,17,0.9); }
.bh-ex .sl { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; font-size: var(--tw-text-sm); color: var(--tw-muted); }
.bh-ex .sl i { font-style: normal; }
.bh-ex .sl em { position: relative; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--tw-fill) var(--v), var(--tw-track) 0); }
.bh-ex .sl em::after { content: ""; position: absolute; top: 50%; left: var(--v); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--tw-thumb); box-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.bh-ex figcaption .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bh-ex figcaption b { font-size: var(--tw-text-md); font-weight: 600; }
.bh-ex .cost { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--tw-text-sm) / 1 var(--tw-font); color: var(--tw-fg); white-space: nowrap; }
.bh-ex.ask .cost, .bh-ex.you .cost { color: var(--tw-ok); }
.bh-ex q { display: block; margin-top: 4px; font-size: var(--tw-text-sm); line-height: 1.4; color: var(--tw-muted); }

/* top-ups: whole cards are buttons; the token stack grows with the pack */
.bh-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bh-pack { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "stack stack" "name price" "per per" "buy buy"; align-items: center; gap: 6px 12px; padding: 20px; color: var(--tw-fg); font: inherit; text-align: left; cursor: pointer; }
.bh-pack:focus-visible { outline: none; box-shadow: var(--tw-focus-ring); }
.bh-pack:active { transform: scale(0.98); }
.bh-stack { grid-area: stack; display: flex; height: 24px; margin-bottom: 8px; }
.bh-stack .tw-token + .tw-token { margin-left: -7px; }
.bh-pack-name { grid-area: name; font: 600 var(--tw-text-lg) / 1.2 var(--tw-font); }
.bh-pack-price { grid-area: price; font: 600 var(--tw-text-2xl) / 1 var(--tw-font); letter-spacing: -0.02em; }
.bh-pack-per { grid-area: per; display: flex; align-items: center; gap: 8px; font-size: var(--tw-text-sm); color: var(--tw-muted); }
.bh-pack-buy { grid-area: buy; display: grid; place-items: center; height: 36px; margin-top: 10px; border: 1px solid var(--tw-border-strong); border-radius: var(--tw-radius-sm); font-size: var(--tw-text-md); font-weight: 500; transition: background var(--tw-fast) var(--tw-ease), color var(--tw-fast) var(--tw-ease), border-color var(--tw-fast) var(--tw-ease); }
.bh-pack:hover .bh-pack-buy, .bh-pack:focus-visible .bh-pack-buy { background: var(--tw-fg); border-color: var(--tw-fg); color: var(--tw-bg); }

/* questions: two columns of folds */
.bh-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 32px; }

/* recent activity */
.activity { display: grid; overflow: hidden; border: 1px solid var(--tw-border); border-radius: var(--tw-radius-lg); }
.act { display: grid; grid-template-columns: minmax(0, 1fr) auto 128px; align-items: center; gap: 16px; min-height: 44px; padding: 0 16px; border-top: 1px solid var(--tw-border); font-size: var(--tw-text-md); color: var(--tw-fg); }
.act:first-child { border-top: 0; }
.act .what { display: flex; align-items: center; gap: 10px; min-width: 0; }
.act .what span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act .plus-mark { width: 14px; flex: none; text-align: center; font-weight: 700; color: var(--tw-ok); }
.act .d { font: 600 var(--tw-text-md) / 1 var(--tw-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--tw-fg); }
.act .d.plus { color: var(--tw-ok); }
.act .when { font-size: var(--tw-text-sm); text-align: right; color: var(--tw-subtle); }

/* narrower windows: the dialog's own width decides */
@container plans (max-width: 900px) {
  .bh-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-hero { grid-template-columns: 1fr; padding: 22px 24px; }
  .bh-hero-side { justify-items: start; max-width: none; text-align: left; }
  .bh-hero-plan { order: -1; }
  .bh-rates { justify-content: flex-start; }
}
@container plans (max-width: 640px) {
  .bh-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-packs, .bh-faq { grid-template-columns: 1fr; }
  .bh-assure { justify-content: flex-start; }
}
@container plans (max-width: 520px) {
  .bh-plans { grid-template-columns: 1fr; }
  .bh-plan.featured { order: -1; } /* the recommended plan first on a phone */
  .bh-plan-for { min-height: 0; }
  .bh-hero { padding: 20px; }
  .bh-hero-bal { gap: 14px; }
  .bh-sun { width: 64px; height: 64px; }
  .bh-sun .tw-token { width: 48px; height: 48px; }
  .bh-hero-num b { font-size: 42px; }
  .act { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 14px; gap: 2px 12px; }
  .act .when { grid-column: 1; text-align: left; padding-left: 24px; }
}
@media (max-width: 560px) {
  .plans-dialog .billing-body { padding: 16px 16px 20px; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .bh-sun::before, .bh-sun .tw-token, .credits.bump .photon, .bh-save-note .pop { animation: none; }
}

/* out of AI edits, in the chat */
.paywall { position: relative; display: grid; gap: 6px; justify-items: start; padding: 14px 16px 14px 50px; border: 1px solid color-mix(in srgb, var(--tw-horizon) 35%, var(--tw-border)); border-radius: var(--tw-radius-lg); background: var(--tw-bluehour); }
.paywall::before { content: ""; position: absolute; left: 16px; top: 14px; width: 22px; height: 22px; background: var(--tw-token-img) center / contain no-repeat; filter: drop-shadow(0 0 1px rgba(255,220,190,.8)) drop-shadow(0 0 8px rgba(255,140,80,.5)); }
.paywall .pw-title { font-weight: 600; color: #fff; }
.paywall .pw-text { font-size: var(--tw-text-sm); line-height: var(--tw-leading); color: #c9d1ec; }
.paywall .tw-btn { margin-top: 4px; }

/* ---------- Library and Edit modes ---------- */
.app > .main, .app > .library, .app > .style-view { grid-row: 2; grid-column: 1; }
.library { display: none; grid-template-columns: 232px minmax(0, 1fr); min-height: 0; }
body.mode-library .library { display: grid; }
body.mode-library .main { display: none; }
body.mode-library .file, body.mode-library .export-wrap, body.mode-library .open-btn { display: none; }
body.mode-style .main, body.mode-style .file, body.mode-style .export-wrap, body.mode-style .open-btn { display: none; }
.mode-seg { margin-left: 10px; }
.tw-seg.sm button { height: 22px; padding: 0 8px; font-size: var(--tw-text-xs); }

/* thumbnails (library grid and filmstrip) */
.thumb { position: relative; flex: none; overflow: hidden; border-radius: 4px; background: var(--tw-surface-2); cursor: pointer; outline: none; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--tw-med) var(--tw-ease); }
.thumb img[src] { opacity: 1; }
.thumb.pending:not(:has(img[src]))::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%) 0 0 / 200% 100%; animation: thumb-shimmer 1.4s linear infinite; }
@keyframes thumb-shimmer { to { background-position: -200% 0; } }
.thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); pointer-events: none; transition: box-shadow var(--tw-fast); }
.thumb:hover::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }
.thumb[aria-selected="true"]::after { box-shadow: inset 0 0 0 2px var(--tw-fg), inset 0 0 0 3px rgba(0,0,0,0.5); }
.thumb.rejected img { opacity: 0.35; }
.thumb.missing img { filter: grayscale(1) brightness(0.6); }
.thumb .badges { position: absolute; top: 5px; right: 5px; display: flex; gap: 3px; pointer-events: none; }
.thumb .badge { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(10,10,10,0.62); backdrop-filter: blur(6px); color: #fff; }
.thumb .badge svg { width: 11px; height: 11px; }
.thumb .badge.pick { color: var(--tw-fg); }
.thumb .badge.reject { color: var(--tw-danger); }
.thumb .badge.missing { background: var(--tw-danger); color: #fff; }
.thumb .badge.edit .mark { width: 9px; height: 9px; }
.thumb .badge.edit.both .mark { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.7); }
.thumb .stars { position: absolute; left: 5px; bottom: 4px; display: flex; gap: 1px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); pointer-events: none; }
.thumb .stars svg { width: 10px; height: 10px; }
body.dragging-photos .lib-src.drop { background: var(--tw-accent-soft); color: var(--tw-fg); box-shadow: inset 0 0 0 1px var(--tw-accent); }

/* ---------- filmstrip (under the photo in the editor) ---------- */
.filmstrip { flex: none; border-top: 1px solid var(--tw-border); background: var(--tw-bg); }
.fs-head { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 10px; font-size: var(--tw-text-sm); color: var(--tw-muted); min-width: 0; }
.fs-head .spacer { flex: 1; }
.fs-source { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px 0 8px; border: 0; border-radius: var(--tw-radius-sm); background: none; color: var(--tw-fg); font-weight: 500; font-size: var(--tw-text-sm); cursor: pointer; white-space: nowrap; }
.fs-source:hover { background: var(--tw-elevated); }
.fs-source svg { width: 12px; height: 12px; color: var(--tw-subtle); }
.fs-info { white-space: nowrap; color: var(--tw-subtle); }
.fs-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--tw-muted); font-family: var(--tw-mono); font-size: var(--tw-text-xs); }
.fs-name:not(:empty)::before { content: "/"; margin-right: 8px; color: var(--tw-border-strong); font-family: var(--tw-font); }
.fs-toggle svg { transition: transform var(--tw-med) var(--tw-spring); }
.filmstrip.collapsed .fs-toggle svg { transform: rotate(180deg); }
.filmstrip.collapsed .fs-head .tw-seg { display: none; }
.fs-strip { display: flex; gap: 4px; height: 82px; padding: 4px 10px 14px; overflow-x: auto; overflow-y: hidden; scroll-padding: 0 40px; transition: height var(--tw-med) var(--tw-spring), padding var(--tw-med) var(--tw-spring); }
.filmstrip.collapsed .fs-strip { height: 0; padding-top: 0; padding-bottom: 0; }
.fs-strip .thumb { height: 64px; }
.fs-strip .thumb.current::after { box-shadow: inset 0 0 0 2px var(--tw-accent), inset 0 0 0 3px rgba(0,0,0,0.45); }
.fs-strip .thumb .badge { width: 15px; height: 15px; }
.fs-strip .thumb .badge svg { width: 9px; height: 9px; }
.fs-strip .thumb .stars svg { width: 8px; height: 8px; }
.fs-empty { align-self: center; color: var(--tw-subtle); font-size: var(--tw-text-sm); padding: 0 4px; }
.fs-empty .link { color: var(--tw-accent); font-weight: 500; padding: 0; }
.frame-box { margin-bottom: 18px; }

/* ---------- Library view ---------- */
.lib-side { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px 0; background: var(--tw-surface); border-right: 1px solid var(--tw-border); overflow: auto; min-height: 0; }
.lib-group { display: grid; gap: 1px; }
.lib-head { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 2px 0 8px; margin-top: 14px; }
.lib-head .tw-icon-btn { width: 24px; height: 24px; }
.lib-head .tw-icon-btn svg { width: 14px; height: 14px; }
.lib-src { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border: 0; border-radius: var(--tw-radius-sm); background: none; color: var(--tw-muted); font: 400 var(--tw-text-md) / 1 var(--tw-font); text-align: left; cursor: pointer; transition: background var(--tw-fast), color var(--tw-fast); }
.lib-src:hover { background: var(--tw-elevated); color: var(--tw-fg); }
.lib-src[aria-current="true"] { background: var(--tw-elevated); color: var(--tw-fg); box-shadow: inset 0 0 0 1px var(--tw-border); }
.lib-src svg { width: 15px; height: 15px; flex: none; color: var(--tw-subtle); }
.lib-src[aria-current="true"] svg { color: var(--tw-fg); }
.lib-src .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-src:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tw-accent); }
.lib-rename { flex: 1; min-width: 0; height: 22px; margin: 0 -4px; padding: 0 4px; font: inherit; color: var(--tw-fg); background: var(--tw-bg); border: 1px solid var(--tw-accent); border-radius: 4px; outline: none; }
.lib-hint { margin: 2px 8px 4px; color: var(--tw-subtle); font-size: var(--tw-text-xs); line-height: 1.45; }
.lib-bottom { margin-top: auto; padding-top: 16px; position: sticky; bottom: 0; background: var(--tw-surface); }
.lib-foot { display: flex; align-items: center; gap: 6px; margin: 6px 8px 12px; color: var(--tw-subtle); font-size: var(--tw-text-xs); }
.lib-foot .lock svg { width: 12px; height: 12px; display: block; }

.lib-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--tw-bg); }
.lib-bar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--tw-border); }
.lib-bar h2 { margin: 0; font: 600 var(--tw-text-lg) / 1 var(--tw-font); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-bar .spacer { flex: 1; }
.lib-search { width: 220px; }
.lib-main.welcome .lib-bar > :not(h2):not(#lib-add) { visibility: hidden; }
.lib-grid { flex: 1; overflow: auto; padding: 8px 20px 96px; outline: none; }
.lib-date { display: flex; align-items: baseline; gap: 8px; padding: 16px 0 8px; font: 500 var(--tw-text-md) / 1 var(--tw-font); color: var(--tw-fg); cursor: pointer; user-select: none; width: max-content; }
.lib-date:hover { color: #fff; }
.lib-row { display: flex; gap: 4px; margin-bottom: 4px; }
.lib-empty { position: absolute; top: 120px; left: 0; right: 0; text-align: center; color: var(--tw-muted); margin: 0; }
.lib-welcome { position: absolute; inset: 52px 0 0; display: grid; place-items: center; }
.drop-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
body.dragging .lib-welcome .drop { border-color: var(--tw-accent); background: var(--tw-accent-soft); }

/* what's selected: a floating bar with its actions */
.lib-sel { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; max-width: calc(100% - 40px); height: 44px; padding: 0 6px 0 16px; background: var(--tw-elevated); border: 1px solid var(--tw-border-strong); border-radius: var(--tw-radius-lg); box-shadow: 0 16px 40px rgba(0,0,0,0.55); animation: sel-in var(--tw-med) var(--tw-spring); white-space: nowrap; }
@keyframes sel-in { from { opacity: 0; transform: translate(-50%, 8px); } }
.lib-sel .n { font-weight: 500; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.lib-sel .meta { color: var(--tw-muted); font-size: var(--tw-text-sm); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lib-sel .sep { width: 1px; height: 20px; margin: 0 4px; background: var(--tw-border-strong); flex: none; }
.lib-sel .rate { display: flex; }
.lib-sel .rate button { width: 22px; height: 28px; display: grid; place-items: center; border: 0; background: none; color: var(--tw-border-strong); cursor: pointer; padding: 0; }
.lib-sel .rate button svg { width: 14px; height: 14px; }
.lib-sel .rate:hover button { color: var(--tw-muted); }
.lib-sel .rate button:hover ~ button { color: var(--tw-border-strong); }
.lib-sel .rate button.on { color: var(--tw-fg); }
.lib-sel .rate:hover button.on { color: var(--tw-fg); }
.lib-shelf { display: flex; gap: 0 24px; flex-wrap: nowrap; }
.lib-day { flex: none; min-width: 0; }
.lib-day .lib-row { margin-bottom: 4px; }

/* the library toolbar on narrower windows: the less important tools step back first */
.lib-main { container-type: inline-size; }
.lib-bar h2 { flex: 0 1 auto; min-width: 60px; }
.lib-bar > * { flex-shrink: 0; }
.lib-bar > h2, .lib-bar > .lib-search { flex-shrink: 1; }
#lib-count { white-space: nowrap; }
.lib-search { width: 220px; min-width: 120px; }
#lib-sort { white-space: nowrap; }
@container (max-width: 980px) {
  #lib-size { display: none; }
  .lib-search { width: 170px; }
}
@container (max-width: 820px) {
  #lib-sort span, #lib-count { display: none; }
  #lib-sort { padding: 0 6px; }
}
@container (max-width: 640px) {
  .lib-search { display: none; }
  #lib-add { font-size: 0; gap: 0; padding: 0 7px; }
  .lib-bar { gap: 8px; padding: 0 12px; }
}
@container (max-width: 760px) {
  .lib-sel .meta { display: none; }
}

/* the filmstrip's header on a narrow photo column */
.filmstrip { container-type: inline-size; }
.fs-head { overflow: hidden; }
@container (max-width: 640px) { .fs-name { display: none; } }
@container (max-width: 520px) { .fs-head .tw-seg { display: none; } }
@container (max-width: 300px) { .fs-info { display: none; } }
/* references: label and Clear on top, thumbnails underneath */
.ref-chip { flex-wrap: wrap; row-gap: 8px; }
.ref-chip .refs { order: 2; width: 100%; }
.kbd-hint { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* virtualised grid and filmstrip: laid out in JS, positioned exactly, only the visible part in the page */
.lib-grid { padding: 0 20px; }
.lib-canvas { position: relative; }
.lib-block { position: absolute; left: 0; right: 0; }
.lib-block > .thumb, .lib-day .lib-row > .thumb { position: absolute; top: 0; }
.lib-block.date .lib-date { padding: 16px 0 8px; height: 40px; box-sizing: border-box; }
.lib-day { position: absolute; top: 0; }
.lib-day .lib-date { padding: 16px 0 8px; height: 40px; box-sizing: border-box; }
.lib-day .lib-row { position: relative; margin: 0; }
.fs-strip { display: block; padding: 4px 0 14px; }
.fs-canvas { position: relative; height: 64px; }
.fs-canvas > .thumb { position: absolute; top: 0; }

/* ---------- sign-in ---------- */
.account-btn { height: 30px; padding: 0 12px; border: 1px solid var(--tw-border); border-radius: 999px; background: none; color: var(--tw-fg); font: 500 var(--tw-text-sm) / 1 var(--tw-font); cursor: pointer; transition: border-color var(--tw-fast), background var(--tw-fast); }
.account-btn:hover { border-color: var(--tw-border-strong); background: var(--tw-surface-2); }
.account-btn.signed-in { width: 30px; padding: 0; border-radius: 50%; background: linear-gradient(180deg, #26408f 0%, #4f7bd9 60%, #f0a36b 100%); border: 0; color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.signin { width: min(400px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--tw-border-strong); border-radius: 16px; background: var(--tw-surface); color: var(--tw-fg); box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.signin[open] { animation: pop var(--tw-med) var(--tw-spring); }
.signin::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.signin-body { display: grid; gap: 12px; padding: 18px 20px 20px; }
.signin-why { margin: 0 0 2px; color: var(--tw-muted); font-size: var(--tw-text-md); }
.signin-body .wide { width: 100%; }
.signin-body .tw-btn { height: 38px; }
.signin-body .tw-input { height: 38px; }
.signin-body .google svg { width: 16px; height: 16px; }
.signin-email { display: grid; gap: 8px; }
.signin-or { display: flex; align-items: center; gap: 10px; color: var(--tw-subtle); font-size: var(--tw-text-xs); }
.signin-or::before, .signin-or::after { content: ""; flex: 1; height: 1px; background: var(--tw-border); }
.signin-note { margin: 4px 0 0; color: var(--tw-subtle); font-size: var(--tw-text-xs); line-height: 1.5; }
.signin-note a, .bh-legal a { color: var(--tw-muted); }
.bh-legal { margin: 14px 0 0; color: var(--tw-subtle); font-size: var(--tw-text-sm); line-height: 1.6; }
.signin-sent { display: grid; gap: 10px; text-align: center; padding: 6px 0; }
.signin-sent .big { font-size: var(--tw-text-lg); font-weight: 600; }
.signin-sent p { margin: 0; color: var(--tw-muted); }
.signin-sent a { text-decoration: none; margin-top: 6px; }

/* ---------- layout (Linear/Arc): the top bar, chat and slider panel are one continuous chrome with no lines;
   the work area (the photo, or the library grid) is the one raised, rounded card ---------- */
:root { --chrome: #0b0b0c; --card: #141415; --card-edge: rgba(255,255,255,0.065); }
body, .app { background: var(--chrome); }
.top { background: var(--chrome); border-bottom: 0; }
.main { background: var(--chrome); }
.side { background: var(--chrome); }
.panel { background: var(--chrome); border-left: 0; }
.panel-search { background: var(--chrome); border-bottom: 0; }
.stage { margin: 0 0 8px; border-radius: 12px; background: radial-gradient(ellipse at 50% 45%, #1a1a1b, var(--card) 70%); box-shadow: 0 0 0 1px var(--card-edge), 0 10px 30px rgba(0,0,0,0.35); overflow: hidden; }
.filmstrip { background: transparent; border-top: 1px solid var(--card-edge); }
.lib-side, .lib-bottom { background: var(--chrome); border-right: 0; }
.lib-main { margin: 0 8px 8px 0; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--card-edge), 0 10px 30px rgba(0,0,0,0.35); overflow: hidden; }
.lib-bar { border-bottom: 1px solid var(--card-edge); }

/* Profile (Color / B&W, the look, Auto), Upright, Point Color */
.profile-row { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; }
.profile-row .tw-seg { flex: 0 0 auto; }
.profile-pick { flex: 1; justify-content: space-between; gap: 6px; min-width: 0; }
.profile-pick .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-pick svg, .point-row .pick svg { width: 14px; height: 14px; flex: none; }
.auto-row { display: flex; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
.upright-box { margin-bottom: 8px; }
.point-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; flex-wrap: wrap; }
.point-row .pick { gap: 6px; }
.point-swatches { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.point-swatches .swatch { width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); transition: transform var(--tw-fast) var(--tw-ease); }
.point-swatches .swatch:hover { transform: scale(1.1); }
.point-swatches .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--tw-surface), 0 0 0 3.5px var(--tw-fg); }
.point-empty { margin: 0 0 6px; font-size: var(--tw-text-xs); color: var(--tw-subtle); line-height: 1.4; }
body.picking .frame, body.picking .frame canvas { cursor: crosshair; }

/* Crop & straighten (crop.js): the frame over the whole photo, dimmed outside, thirds inside */
.crop-layer { position: absolute; inset: 0; z-index: 4; display: none; overflow: hidden; }
body.cropping .crop-layer { display: block; }
body.cropping .frame .before-side, body.cropping .divider, body.cropping .tag { display: none; }
body.cropping .frame { cursor: default; }
.crop-box { position: absolute; box-shadow: 0 0 0 9999px rgba(0,0,0,0.55); outline: 1px solid rgba(255,255,255,0.9); cursor: move; touch-action: none; }
.crop-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--tw-fast);
  background: linear-gradient(90deg, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.45) calc(33.33% - 0.5px), rgba(255,255,255,0.45) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.67% - 0.5px), rgba(255,255,255,0.45) calc(66.67% - 0.5px), rgba(255,255,255,0.45) calc(66.67% + 0.5px), transparent calc(66.67% + 0.5px)),
    linear-gradient(180deg, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.45) calc(33.33% - 0.5px), rgba(255,255,255,0.45) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.67% - 0.5px), rgba(255,255,255,0.45) calc(66.67% - 0.5px), rgba(255,255,255,0.45) calc(66.67% + 0.5px), transparent calc(66.67% + 0.5px)); }
.crop-layer.dragging .crop-grid, .crop-box:hover .crop-grid { opacity: 1; }
.crop-h { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.crop-h::after { content: ""; position: absolute; inset: 5px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.4); }
.crop-h[data-h="topLeft"] { left: 0; top: 0; cursor: nwse-resize; } .crop-h[data-h="top"] { left: 50%; top: 0; cursor: ns-resize; }
.crop-h[data-h="topRight"] { left: 100%; top: 0; cursor: nesw-resize; } .crop-h[data-h="right"] { left: 100%; top: 50%; cursor: ew-resize; }
.crop-h[data-h="bottomRight"] { left: 100%; top: 100%; cursor: nwse-resize; } .crop-h[data-h="bottom"] { left: 50%; top: 100%; cursor: ns-resize; }
.crop-h[data-h="bottomLeft"] { left: 0; top: 100%; cursor: nesw-resize; } .crop-h[data-h="left"] { left: 0; top: 50%; cursor: ew-resize; }
/* the Crop section's controls (Lightroom's crop panel: aspect and lock, straighten, rotate and flip) */
.crop-panel { display: grid; gap: 10px; padding: 2px 0 4px; }
.crop-panel[hidden] { display: none; }
.crop-row { display: flex; align-items: center; gap: 6px; }
.crop-row.end { justify-content: flex-end; }
.crop-row .spacer { flex: 1; }
.crop-label { font-size: var(--tw-text-sm); color: var(--tw-muted); margin-right: auto; }
.icon-btn { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--tw-radius-sm); background: none; color: var(--tw-muted); cursor: pointer; }
.icon-btn:hover { color: var(--tw-fg); background: var(--tw-elevated); }
.icon-btn svg { width: 15px; height: 15px; }
.crop-lock[aria-pressed="true"] { color: var(--tw-fg); border-color: var(--tw-border-strong); }
.crop-aspect { gap: 6px; } .crop-aspect svg { width: 14px; height: 14px; }
body.cropping .stage-bar .seg, body.cropping .stage-bar .kbd-hint, body.cropping #reset-photo, body.cropping .zoom-btn { display: none; }

/* Masks (masks.js): the list and editor in the panel, gradient handles over the photo */
.mask-add { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.mask-list { display: grid; gap: 2px; margin-bottom: 8px; }
.mask-list:empty { display: none; }
.mask-row, .heal-row { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 8px; border-radius: var(--tw-radius-sm); cursor: pointer; color: var(--tw-muted); font-size: var(--tw-text-sm); }
.mask-row:hover, .heal-row:hover { background: var(--tw-surface-2); color: var(--tw-fg); }
.mask-row.on, .heal-row.on { background: var(--tw-elevated); color: var(--tw-fg); }
.mask-row.hidden-mask .mask-name { opacity: 0.5; text-decoration: line-through; }
.mask-dot, .heal-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3030; opacity: 0.8; flex: none; }
.mask-name, .heal-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mask-row button, .heal-row button { border: 0; background: none; color: var(--tw-subtle); font-size: var(--tw-text-xs); cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.mask-row button:hover, .heal-row button:hover { color: var(--tw-fg); background: var(--tw-surface-2); }
.mask-opts { display: flex; gap: 14px; margin: 2px 0 8px; font-size: var(--tw-text-xs); color: var(--tw-muted); }
.mask-opts label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.mask-shape { display: grid; gap: 4px; margin-bottom: 6px; }
.mask-shape > .tw-btn { justify-self: start; }
.mask-hint, .mask-empty { margin: 0 0 6px; font-size: var(--tw-text-xs); color: var(--tw-subtle); line-height: 1.4; }
.mask-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; display: none; overflow: visible; }
.mask-layer.on { display: block; }
.mask-line { stroke: rgba(255,255,255,0.85); stroke-width: 1.2; fill: none; vector-effect: non-scaling-stroke; }
.mask-line.dim { stroke-dasharray: 3 4; stroke: rgba(255,255,255,0.5); }
.mask-pt { fill: rgba(20,20,20,0.6); stroke: #fff; stroke-width: 2; pointer-events: all; cursor: grab; }
.mask-pt.solid { fill: #fff; }
.mask-pt:active { cursor: grabbing; }

/* Heal (heal.js): spots and red eyes, in the panel and over the photo */
.heal-box { display: grid; gap: 8px; }
.heal-box .tw-seg { justify-self: stretch; }
.heal-sliders, .heal-eye-sliders { display: grid; gap: 4px; }
.heal-opts { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--tw-text-xs); color: var(--tw-muted); }
.heal-opts label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.heal-list, .heal-eye-list { display: grid; gap: 2px; }
.heal-list:empty, .heal-eye-list:empty { display: none; }
.heal-row .heal-dot { background: #fff; }
.heal-clear { justify-self: start; margin-top: 4px; }
.heal-hint { margin: 0; font-size: var(--tw-text-xs); color: var(--tw-subtle); line-height: 1.45; }
.heal-hint kbd { font: inherit; font-size: 10px; padding: 0 4px; border: 1px solid var(--tw-border); border-radius: 3px; }
.heal-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; display: none; overflow: visible; }
.heal-layer.on { display: block; }
body.healing #frame { cursor: crosshair; }
body.healing.space-pan #frame { cursor: grab; }
.heal-spot, .heal-source, .heal-eye { fill: none; stroke: rgba(255,255,255,0.55); stroke-width: 1.2; pointer-events: stroke; cursor: move; }
.heal-spot.stroke, .heal-source.stroke { stroke-linecap: round; stroke-linejoin: round; stroke: rgba(255,255,255,0.18); pointer-events: visibleStroke; }
.heal-spot.on, .heal-eye.on { stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 1px rgba(0,0,0,0.8)); }
.heal-spot.stroke.on { stroke: rgba(255,255,255,0.35); filter: none; }
.heal-spot:not(.stroke), .heal-eye { pointer-events: all; fill: rgba(0,0,0,0.001); }
.heal-source { stroke: #fff; stroke-dasharray: 4 3; stroke-width: 1.5; filter: drop-shadow(0 0 1px rgba(0,0,0,0.8)); }
.heal-source:not(.stroke) { pointer-events: all; fill: rgba(0,0,0,0.001); }
.heal-source.stroke { stroke: rgba(255,255,255,0.22); stroke-dasharray: none; }
.heal-link { stroke: rgba(255,255,255,0.7); stroke-width: 1; stroke-dasharray: 2 3; }
.heal-pin { fill: #fff; stroke: rgba(0,0,0,0.6); stroke-width: 1; }
.heal-brush { fill: none; stroke: rgba(255,255,255,0.9); stroke-width: 1; filter: drop-shadow(0 0 1px rgba(0,0,0,0.9)); }
.heal-spot.drawing { stroke: rgba(255,255,255,0.45); }
.heal-eye.drawing { stroke: #fff; stroke-dasharray: 4 3; }

/* a batch edit's progress, above the chat box: "Editing 3 of 12 photos… Stop" */
.batch-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 7px 10px; border: 1px solid var(--tw-border); border-radius: 8px; background: var(--tw-elevated); font-size: var(--tw-text-xs); color: var(--tw-muted); }
.batch-bar .t { flex: 1; font-variant-numeric: tabular-nums; }
.batch-bar .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: batch-pulse 1.4s ease-in-out infinite; }
.batch-bar .link { background: none; border: 0; padding: 0; color: var(--tw-fg); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
@keyframes batch-pulse { 50% { opacity: 0.3; } }
.lib-backup { display: flex; gap: 6px; align-items: center; padding: 0 10px 4px; font-size: var(--tw-text-xs); color: var(--tw-subtle); }
.lib-backup .link { font-size: var(--tw-text-xs); color: var(--tw-muted); }
.lib-backup .link:hover { color: var(--tw-fg); }

/* Export (export.js): presets, the everyday choices, More options, progress */
.popover.export-box { width: 300px; max-height: calc(100vh - 80px); overflow-y: auto; grid-template-columns: minmax(0, 1fr); white-space: normal; }
.ex-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-chip { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--tw-border-strong); background: var(--tw-surface-2); color: var(--tw-muted); font: 500 var(--tw-text-xs) / 1 var(--tw-font); cursor: pointer; }
.ex-chip:hover { color: var(--tw-fg); }
.ex-chip.on { background: var(--tw-fg); color: var(--tw-bg); border-color: var(--tw-fg); }
.ex-custom { display: grid; grid-template-columns: 1fr 90px auto; gap: 6px; align-items: center; }
.ex-custom[hidden] { display: none; }
.export-box input[type=number], .export-box input[type=text], .ex-custom select { font: inherit; padding: 6px 8px; border: 1px solid var(--tw-border); border-radius: var(--tw-radius-sm); background: var(--tw-surface-2); color: var(--tw-fg); min-width: 0; }
.ex-row { display: flex; align-items: center; gap: 6px; }
.ex-row input { flex: 1; }
.ex-unit { font-size: var(--tw-text-xs); color: var(--tw-subtle); }
.export-box small { color: var(--tw-subtle); font-size: var(--tw-text-xs); }
.ex-more { border-top: 1px solid var(--tw-border); padding-top: 8px; }
.ex-more summary { cursor: pointer; font-size: var(--tw-text-sm); color: var(--tw-muted); list-style: none; }
.ex-more summary::before { content: "▸ "; }
.ex-more[open] summary::before { content: "▾ "; }
.ex-more[open] { display: grid; gap: 10px; }
.export-box label.ex-check { display: flex; align-items: center; gap: 6px; }
.export-box label[hidden] { display: none; }
.ex-save { justify-self: start; font-size: var(--tw-text-xs); }
/* "Enlarge 2× with AI": the price under it, and the first-time note on what leaves the computer */
.ex-enlarge { display: grid; gap: 4px; border-top: 1px solid var(--tw-border); padding-top: 8px; }
.ex-enlarge[hidden] { display: none; }
.export-box .ex-up-price.warn { color: var(--tw-fg); }
.export-box label.ex-check:has(input:disabled) { color: var(--tw-subtle); }
.ex-optin { display: grid; gap: 8px; margin-top: 4px; padding: 10px; border: 1px solid var(--tw-border-strong); border-radius: var(--tw-radius-sm); background: var(--tw-surface-2); font-size: var(--tw-text-xs); color: var(--tw-muted); }
.ex-optin[hidden] { display: none; }
.ex-optin p { margin: 0; line-height: 1.45; }
.ex-optin b { color: var(--tw-fg); font-weight: 600; }
.ex-progress { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; font-size: var(--tw-text-xs); color: var(--tw-muted); }
.ex-progress[hidden] { display: none; }
.ex-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--tw-surface-2); overflow: hidden; }
.ex-bar i { display: block; height: 100%; width: 0; background: var(--tw-fg); transition: width 0.3s; }

/* ---------- the photo's goal and versions (memory.js), above the chat ---------- */
.photo-memory { display: grid; gap: 8px; padding: 8px 14px 10px; border-bottom: 1px solid var(--tw-border); }
.photo-memory[hidden] { display: none; }
.pm-goal { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 8px; row-gap: 2px; font-size: var(--tw-text-sm); }
.pm-goal-text { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.pm-label { flex: none; font: 500 var(--tw-text-xs) / 1 var(--tw-font); color: var(--tw-subtle); text-transform: uppercase; letter-spacing: 0.06em; }
.pm-for { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tw-fg); }
.pm-for.muted { color: var(--tw-subtle); }
.pm-more { grid-column: 1 / -1; color: var(--tw-muted); font-size: var(--tw-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-goal-edit { grid-column: 1 / -1; display: grid; gap: 6px; }
.pm-goal-edit textarea { width: 100%; resize: vertical; padding: 6px 8px; border: 1px solid var(--tw-border-strong); border-radius: var(--tw-radius-sm); background: var(--tw-surface-2); color: var(--tw-fg); font: var(--tw-text-sm) / 1.45 var(--tw-font); }
.pm-goal-actions { display: flex; gap: 6px; align-items: center; }
.pm-hint { flex: 1; color: var(--tw-subtle); font-size: var(--tw-text-xs); line-height: 1.3; }
.pm-versions { display: flex; gap: 4px; align-items: center; min-width: 0; }
.pm-chips { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pm-chips::-webkit-scrollbar { display: none; }
.pm-v { flex: none; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 8px; border: 1px solid var(--tw-border); border-radius: 999px; background: none; color: var(--tw-muted); font: var(--tw-text-xs) / 1.3 var(--tw-font); cursor: pointer; }
.pm-v:hover:not(:disabled) { color: var(--tw-fg); border-color: var(--tw-border-strong); }
.pm-v.current { color: var(--tw-fg); border-color: color-mix(in srgb, var(--tw-accent) 70%, var(--tw-border)); background: color-mix(in srgb, var(--tw-accent) 14%, transparent); }
.pm-v.liked::before { content: "♥ "; color: #e58ca3; }
.pm-v:disabled { opacity: 0.5; cursor: default; }
.pm-heart { flex: none; width: 24px; height: 22px; border: 0; background: none; color: var(--tw-subtle); font-size: 14px; cursor: pointer; }
.pm-heart.on { color: #e58ca3; }
.pm-heart:disabled { opacity: 0.35; cursor: default; }

/* ---------- My style: "Used your style", Remember this?, the page ---------- */
/* "used your style": a quiet tag on the reply's cost line, opening the Style page */
.style-tag { margin-left: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.style-tag:hover { color: var(--tw-fg); text-decoration: underline; text-underline-offset: 2px; }
.msg-cost:not(:has(.photon)) .style-tag { margin-left: 0; }
/* "What Bluehour remembers" (a dialog; its intro) */
.style-page { width: min(560px, calc(100vw - 32px)); }
.style-page .billing-body { gap: 10px; }
.style-intro { margin: 0; color: var(--tw-muted); font-size: var(--tw-text-sm); line-height: 1.5; }
.memory-text { margin: 0; max-height: 50vh; overflow: auto; white-space: pre-wrap; word-break: break-word; padding: 10px 12px; border-radius: var(--tw-radius-sm); background: var(--tw-surface-2); color: var(--tw-muted); font: 11.5px / 1.5 var(--tw-mono); }

/* ---------- the chat before the first message: what to ask, and what it costs ---------- */
.chat-start { display: grid; gap: 10px; padding: 4px 2px; }
.cs-lead { margin: 0; color: var(--tw-muted); font-size: var(--tw-text-sm); line-height: 1.5; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chip { padding: 5px 11px; border: 1px solid var(--tw-border-strong); border-radius: 999px; background: none; color: var(--tw-fg); font: var(--tw-text-sm) / 1.3 var(--tw-font); cursor: pointer; }
.cs-chip:hover { border-color: color-mix(in srgb, var(--tw-accent) 60%, var(--tw-border)); background: color-mix(in srgb, var(--tw-accent) 10%, transparent); }
.cs-cost { margin: 0; color: var(--tw-subtle); font-size: var(--tw-text-xs); line-height: 1.5; }
.tw-btn.danger { background: var(--tw-danger); border-color: var(--tw-danger); color: #fff; }

/* ---------- phones: the editor is made for a computer (owner); say so instead of a broken layout ---------- */
.small-screen { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-left, 0px)); background: var(--tw-bg, #0a0a0a); }
.small-screen[hidden] { display: none; }
.ss-card { max-width: 340px; display: grid; gap: 12px; text-align: center; }
.ss-title { font-size: 18px; font-weight: 600; }
.ss-card p { margin: 0; color: var(--tw-muted); line-height: 1.5; }

/* ---------- chat typography (2026-10-22): one scale for the side panel ----------
   Measured references: ChatGPT sets replies at 16px / 1.5 with a full line between paragraphs in a 768px column;
   chat panels beside an editor (VS Code, Cursor) use 13–14px. Our chat is a 300–460px panel, so: 14px / 1.6 for what
   you read (replies, your messages, the composer), 12px for what you glance at (labels, costs, notes), never smaller;
   a clear rhythm: 8px inside a turn, 24px between turns, 10px between paragraphs. */
.side {
  --chat-text: 14px; --chat-lh: 1.6; --chat-meta: 12px;
  --chat-in-turn: 8px; --chat-between: 24px;
}
.history { padding: 10px 16px 16px; gap: var(--chat-in-turn); }
/* a new turn (your message) starts with room above it; the AI's reply and its cards follow close */
.history > .msg-user:not(:first-child) { margin-top: calc(var(--chat-between) - var(--chat-in-turn)); }
.history > .msg-agent + .run, .history > .run + .msg-agent { margin-top: 4px; }
.msg-user {
  max-width: 85%; padding: 8px 14px; border-radius: 18px 18px 4px 18px;
  font-size: var(--chat-text); line-height: 1.5; letter-spacing: -0.003em;
}
.msg-agent { font-size: var(--chat-text); line-height: var(--chat-lh); padding: 0 2px; letter-spacing: -0.003em; }
.msg-agent .who { font-size: var(--chat-meta); font-weight: 600; color: var(--tw-muted); margin-bottom: 6px; gap: 7px; }
.msg-agent p + p, .msg-agent :is(ul, ol) + p, .msg-agent p + :is(ul, ol) { margin-top: 10px; }
.msg-agent :is(ul, ol) { padding-left: 18px; gap: 6px; }
.msg-agent li { padding-left: 2px; }
.msg-agent strong { font-weight: 600; }
/* the AI's steps: a card you scan, a size below the reply */
.run { border-radius: 12px; }
.run-head { height: 34px; font-size: var(--chat-meta); }
.run-text { font-size: var(--chat-text); line-height: var(--chat-lh); }
.step .title { font-size: 13px; line-height: 1.4; }
.set-card { border-radius: 12px; }
/* the small lines under a reply: what it cost, the style it used */
.msg-cost { margin: -2px 0 0 2px; font-size: var(--chat-meta); line-height: 1.4; }
.msg-route { margin: -2px 0 0 2px; font-size: 11px; } /* (debug only) */
.msg-error { font-size: 13px; line-height: 1.5; padding: 10px 12px; }
.working { font-size: 13px; }
/* the empty chat */
.cs-lead { font-size: var(--chat-text); line-height: var(--chat-lh); color: var(--tw-muted); }
.cs-chip { font-size: 13px; padding: 6px 12px; }
.cs-cost { font-size: var(--chat-meta); }
.empty-history { font-size: var(--chat-text); line-height: var(--chat-lh); }
/* the composer: the same size you read at */
#chat-input { font-size: var(--chat-text); line-height: 1.5; }
.chat-note { font-size: var(--chat-meta); line-height: 1.4; }
/* goal and versions strip above the chat */
.pm-goal { font-size: 13px; }
.pm-more { font-size: var(--chat-meta); }
.pm-v { font-size: var(--chat-meta); padding: 3px 9px; }

/* a control revealed from the chat (a setting named in a reply): two soft pulses of the accent, then gone */
/* a control the chat points at: a soft light falls on it for a moment (no ring), so the eye lands there */
.reveal-flash { border-radius: 6px; animation: reveal-flash 1.6s var(--tw-ease, ease-out) both; }
@keyframes reveal-flash {
  0%, 100% { background-color: transparent; box-shadow: 0 0 0 6px transparent; }
  18%, 55% { background-color: color-mix(in srgb, var(--tw-fg) 11%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tw-fg) 11%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-flash { animation: none; background-color: color-mix(in srgb, var(--tw-fg) 11%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tw-fg) 11%, transparent); }
}

/* ---------- Your style (style-ui.js): a page beside Library and Edit ---------- */
.seg-dot { position: absolute; top: 3px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--tw-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tw-accent) 25%, transparent); }
.seg-dot[hidden] { display: none; }
.style-view { display: none; min-height: 0; overflow: auto; margin: 0 8px 8px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--card-edge), 0 10px 30px rgba(0,0,0,0.35); }
body.mode-style .style-view { display: block; }
.sv-page { max-width: 880px; margin: 0 auto; padding: 36px 40px 56px; display: grid; gap: 28px; }
.sv-head { display: flex; align-items: center; gap: 12px; }
.sv-head h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.sv-sync { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: var(--tw-text-sm); color: var(--tw-muted); }
.sv-sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--tw-subtle); }
.sv-sync.on i { background: var(--tw-ok); }
.sv-page h2 { margin: 0; font-size: var(--tw-text-lg); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sv-page h3 { margin: 6px 0 0; font-size: var(--tw-text-md); font-weight: 600; color: var(--tw-fg); }
.sv-section { display: grid; gap: 10px; }
.sv-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.sv-note { margin: 0; color: var(--tw-muted); font-size: var(--tw-text-md); line-height: 1.5; }
.sv-fresh { padding: 8px 12px; border-radius: var(--tw-radius); background: var(--tw-accent-soft); color: var(--tw-fg); }
.sv-fresh .link { color: var(--tw-fg); text-decoration: underline; font-size: inherit; padding: 0; }
.sv-foot { margin: 8px 0 0; color: var(--tw-subtle); font-size: var(--tw-text-sm); }
/* the portrait at the top */
.sv-portrait { padding: 22px 24px; border-radius: 14px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--tw-accent) 14%, transparent), transparent 60%), var(--tw-surface-2); box-shadow: inset 0 0 0 1px var(--card-edge); }
.sv-portrait-text { margin: 0; font-size: 20px; line-height: 1.45; letter-spacing: -0.005em; text-wrap: pretty; }
.sv-meta { margin: 10px 0 0; color: var(--tw-muted); font-size: var(--tw-text-sm); }
/* lists: habits, noticed habits, Always rules */
.sv-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sv-list li { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--tw-radius); background: var(--tw-surface-2); box-shadow: inset 0 0 0 1px var(--card-edge); font-size: var(--tw-text-md); }
.sv-list li.off .sv-text { color: var(--tw-subtle); text-decoration: line-through; }
.sv-list li.off .sv-thumbs { opacity: 0.4; }
.sv-list li.new { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tw-accent) 45%, transparent); }
.sv-list .sv-none { display: block; background: none; box-shadow: none; color: var(--tw-subtle); padding: 2px 0; }
.sv-line { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.sv-text { line-height: 1.45; }
.sv-why { color: var(--tw-subtle); font-size: var(--tw-text-sm); }
.sv-sub { flex-basis: 100%; color: var(--tw-muted); font-size: var(--tw-text-sm); }
.sv-acts { display: flex; gap: 4px; flex: none; }
.sv-list.rules li { justify-content: space-between; }
.sv-list.rules .sv-text { flex: 1; }
.sv-list.rules form { flex: 1; }
.sv-add { display: flex; gap: 6px; }
.sv-add .tw-input { flex: 1; height: 30px; }
/* the photos behind a habit */
.sv-thumbs { display: flex; align-items: center; gap: 4px; flex: none; }
.sv-thumb { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 5px; overflow: hidden; background: var(--tw-elevated); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); transition: transform var(--tw-fast) var(--tw-ease); }
.sv-thumb:hover { transform: scale(1.06); box-shadow: 0 0 0 1.5px var(--tw-fg); }
.sv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-thumb img:not([src]) { visibility: hidden; }
.sv-more { font-size: var(--tw-text-sm); color: var(--tw-subtle); padding-left: 2px; }
/* the fingerprint */
.sv-fp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sv-card { display: grid; align-content: start; gap: 10px; padding: 14px; border-radius: var(--tw-radius-lg); background: var(--tw-surface-2); box-shadow: inset 0 0 0 1px var(--card-edge); }
.sv-card h3 { margin: 0; font-size: var(--tw-text-sm); font-weight: 600; color: var(--tw-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sv-cap { margin: 0; font-size: var(--tw-text-sm); color: var(--tw-muted); line-height: 1.45; }
.sv-curve { width: 100%; height: auto; display: block; border-radius: 6px; background: #0f0f10; }
.sv-curve .grid { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.sv-curve .id { stroke: rgba(255,255,255,0.22); stroke-width: 1; stroke-dasharray: 3 4; }
.sv-curve .me { fill: none; stroke: var(--tw-accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.sv-warm { position: relative; height: 26px; margin-top: 14px; border-radius: 13px; background: linear-gradient(90deg, #5d8fe0, #9ab2cf 35%, #c9c3b8 50%, #e2b27c 65%, #f28a3c); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.sv-warm .dot { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: rgba(10,10,10,0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.5); }
.sv-warm .mark { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--tw-fg); box-shadow: 0 0 0 2px rgba(0,0,0,0.5); }
.sv-ends { display: flex; justify-content: space-between; font-size: var(--tw-text-xs); color: var(--tw-subtle); }
.sv-moves { display: grid; gap: 7px; }
.sv-move { display: grid; grid-template-columns: 74px 1fr 46px; align-items: center; gap: 8px; font-size: var(--tw-text-sm); }
.sv-move .name { color: var(--tw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-move .val { text-align: right; font-family: var(--tw-mono); font-size: var(--tw-text-xs); color: var(--tw-fg); }
.sv-move .track { position: relative; height: 6px; border-radius: 3px; background: var(--tw-track); }
.sv-move .track::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: rgba(255,255,255,0.3); }
.sv-move .track i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--tw-fill); }
/* the empty state */
.sv-empty { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 36px 24px 32px; border-radius: 14px; background: var(--tw-surface-2); box-shadow: inset 0 0 0 1px var(--card-edge); }
.sv-empty h2 { font-size: 20px; }
.sv-empty > p { margin: 0; max-width: 520px; color: var(--tw-muted); font-size: var(--tw-text-md); line-height: 1.55; }
.sv-empty-art svg { width: 120px; height: 80px; }
.sv-empty-art .id { stroke: rgba(255,255,255,0.2); stroke-dasharray: 3 4; fill: none; }
.sv-empty-art .me { stroke: var(--tw-accent); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; animation: sv-draw 1.6s var(--tw-ease) 0.2s forwards; }
@keyframes sv-draw { to { stroke-dashoffset: 0; } }
.sv-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0 6px; padding: 0; list-style: none; counter-reset: sv; text-align: left; width: 100%; max-width: 640px; }
.sv-steps li { counter-increment: sv; display: grid; gap: 4px; padding: 12px; border-radius: var(--tw-radius); background: var(--tw-bg); font-size: var(--tw-text-sm); color: var(--tw-muted); line-height: 1.45; }
.sv-steps li b { color: var(--tw-fg); font-weight: 600; font-size: var(--tw-text-md); }
.sv-steps li b::before { content: counter(sv) "  "; color: var(--tw-accent); }
@media (max-width: 900px) { .sv-fp, .sv-steps { grid-template-columns: 1fr; } .sv-page { padding: 24px 16px 40px; } .sv-list li { flex-wrap: wrap; } }

/* ---------- the Info panel (info.js): everything about one photo ---------- */
.info-panel { width: min(520px, calc(100vw - 32px)); }
.info-panel .billing-body { gap: 6px; padding-top: 16px; }
.if-head { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.if-thumb { flex: none; width: 72px; height: 72px; border-radius: 10px; background: var(--tw-surface-2) center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--tw-border); }
.if-title { min-width: 0; display: grid; gap: 3px; }
.if-name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.if-sub { font-size: var(--tw-text-sm); color: var(--tw-muted); }
.if-h { margin: 14px 0 2px; font: 600 var(--tw-text-xs) / 1 var(--tw-font); color: var(--tw-subtle); text-transform: uppercase; letter-spacing: 0.08em; }
.if-list { margin: 0; display: grid; grid-template-columns: minmax(110px, 38%) 1fr; column-gap: 14px; row-gap: 7px; font-size: 13px; line-height: 1.45; }
.if-list dt { color: var(--tw-muted); }
.if-list dd { margin: 0; color: var(--tw-fg); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.if-note { margin: 4px 0 0; font-size: var(--tw-text-sm); color: var(--tw-muted); }
.if-loc { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font-size: 13px; }
.if-coords { font-variant-numeric: tabular-nums; }
.info-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 2px; vertical-align: middle; border: 0; border-radius: 6px; background: none; color: var(--tw-subtle); cursor: pointer; }
.info-btn:hover { color: var(--tw-fg); background: var(--tw-elevated); }
.info-btn svg { width: 15px; height: 15px; }

/* versions, at the top of the History tab: one line with a menu */
.pm-row { display: flex; align-items: center; gap: 8px; }
.pm-row .pm-label { flex: none; }
.pm-ver-btn { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 10px; border: 1px solid var(--tw-border); border-radius: 8px; background: none; color: var(--tw-fg); font: 13px / 1.3 var(--tw-font); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.pm-ver-btn:hover:not(:disabled) { border-color: var(--tw-border-strong); }
.pm-ver-btn:disabled { opacity: 0.5; cursor: default; }
.pm-caret { flex: none; color: var(--tw-subtle); font-size: 11px; }