:root {
  --a-accent: #7c9cff;
  --a-alpha: 0.72;
  --a-blur: 0px;
  --a-font: 13px;
  --a-unit: 150px;
  --a-gap: 10px;
  --a-text: #e6e8ee;
  --a-muted: #9aa1b2;
  --a-panel-rgb: 28, 31, 40;
  --a-bg: radial-gradient(1200px 700px at 15% 0%, #273049 0%, #14161d 55%, #0f1015 100%);
  --sl-color-primary-600: var(--a-accent);
  --sl-font-size-medium: var(--a-font);
}
html[data-theme="glass"] {
  --a-alpha: 0.45;
  --a-blur: 14px;
  --a-bg: radial-gradient(900px 600px at 10% 10%, #3a2f6b 0%, transparent 60%),
          radial-gradient(800px 600px at 90% 80%, #1f5a6b 0%, transparent 60%), #101218;
}

* { box-sizing: border-box; }
body { margin: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column;
       font: var(--a-font)/1.45 system-ui, "Segoe UI", sans-serif; color: var(--a-text);
       background: var(--a-bg); background-attachment: fixed; }
.muted { color: var(--a-muted); }
.small { font-size: 0.85em; }
.grow { flex: 1; }

.topbar { position: relative; z-index: 5; flex: none; display: flex; gap: 10px; align-items: center; padding: 6px 12px;
          background: rgba(var(--a-top-rgb, var(--a-panel-rgb)), 0.92); border-bottom: 1px solid #ffffff14; }
/* A row of buttons wider than the window scrolls inside the bar instead of widening the page.
   No backdrop-filter (or filter/transform/contain) on the bar: it would hold the hoisted (fixed) menus of its
   dropdowns and selects, which the scrolling bar then clips and Shoelace sizes to the bar's height. */
.topbar { overflow-x: auto; scrollbar-width: thin; }
.topbar::-webkit-scrollbar { height: 4px; }
/* Hidden behind the sign-in and account screens; laid out, its buttons make a phone zoom the whole page out. */
.topbar[hidden] { display: none; }
/* The Go to row under the top bar: every screen and mode as plain links, owner only. */
.labnav { position: relative; z-index: 4; flex: none; display: flex; gap: 4px 16px; align-items: center; padding: 3px 12px;
          overflow-x: auto; scrollbar-width: thin; white-space: nowrap; font-size: 13px;
          background: rgba(var(--a-top-rgb, var(--a-panel-rgb)), 0.86); border-bottom: 1px solid #ffffff10; }
.labnav[hidden], .topbar[hidden] + .labnav { display: none !important; }
.labnav a { color: var(--sl-color-neutral-700); text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
.labnav a:hover, .labnav a:focus-visible { color: var(--sl-color-primary-500); }
.labnav a[aria-current="page"] { color: var(--sl-color-neutral-900); border-bottom-color: var(--sl-color-primary-500); }
html.scrollc * { scrollbar-color: var(--a-scroll) transparent; }
.topbar sl-select { width: 260px; }
/* At 1024 px and below the bar wraps onto a second row instead of scrolling sideways out of sight. */
@media (max-width: 1024px) {
  .topbar { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; }
  .topbar > * { flex-shrink: 0; }
  .topbar sl-select { width: 180px; }
  .topbar .grow { flex-basis: 0; }
}
.brand { letter-spacing: .5px; display: inline-flex; align-items: center; }
.brandtext { display: inline-flex; flex-direction: column; line-height: 1.1; }
.tagline { display: block; font-size: 10px; font-weight: 400; letter-spacing: .32em; color: var(--a-muted); }
.tagline.under { text-align: center; padding-top: 3px; margin-right: -.32em; }
.msg.sys.noanswer { cursor: pointer; text-decoration: underline dotted; }
body:not(.enginenums) .eng, body:not(.enginenums) .tagline, body:not(.enginenums) .chat .tokline,
body:not(.enginenums) .chat .optReply, body:not(.enginenums) .chat .optAppr { display: none !important; }
.tipword { color: var(--a-text); font-weight: 600; border-bottom: 1px dotted #ffffff55; cursor: help; }
.engines { display: inline-flex; gap: 2px; align-items: center; padding: 2px 4px; border: 1px solid #ffffff14; border-radius: 999px;
           font-size: 0.85em; white-space: nowrap; cursor: pointer; user-select: none; }
.engines[hidden] { display: none; }
#spend { white-space: nowrap; }
.toschip { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid #ffffff22; border-radius: 999px;
  font-size: 0.85em; white-space: nowrap; cursor: pointer; user-select: none; color: var(--a-muted); }
.toschip.ok { color: #4ade80; border-color: #4ade8066; }
.toschip.warn { color: #f3cf86; border-color: #f3cf8666; }
.toschip.bad { color: #f87171; border-color: #f8717166; }
.toschip.off { opacity: 0.6; }
.bellbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 18px; cursor: pointer; }
.bell.ringing .bellbtn { color: #f3cf86; }
.bellcount { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: #e5484d; color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.bellpanel { width: min(360px, 92vw); max-height: 60vh; overflow: auto; padding: 10px; background: #1d2029;
  border: 1px solid #ffffff22; border-radius: 8px; box-shadow: 0 8px 24px #0008; }
.diaryrow { padding: 6px 0; border-bottom: 1px solid #ffffff10; }
.diaryrow:last-child { border-bottom: 0; }
.diaryrow .acts-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.engines:hover, .engines.open { border-color: #ffffff30; }
.engines .eng { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; }
.engines .eng + .eng { border-left: 1px solid #ffffff14; }
.engines .eng b { font-weight: 500; color: var(--a-muted); }
.envtag { padding: 0 6px; border-radius: 999px; font-size: 0.85em; font-weight: 600; text-transform: uppercase; color: var(--a-muted); }
.envtag.live { color: #4ade80; } .envtag.test { color: #f5b942; }
.edot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; background: #6b7280; }
.edot.ok { background: #4ade80; } .edot.busy { background: #f5b942; } .edot.error { background: #f87171; }
.engpop { position: fixed; right: 12px; z-index: 30; min-width: 320px; max-width: min(760px, 96vw);
          max-height: 70vh; overflow: auto; padding: 8px 10px; border: 1px solid #ffffff1f; border-radius: 8px;
          background: rgba(var(--a-top-rgb, var(--a-panel-rgb)), 0.97); box-shadow: 0 12px 30px #00000066; font-size: 0.9em; }
.engpop[hidden] { display: none; }
.engpop table { border-collapse: collapse; width: 100%; }
.engpop td { padding: 3px 8px 3px 0; vertical-align: top; }
.engpop td.en { white-space: nowrap; color: var(--a-muted); }
.engpop td.el { white-space: nowrap; font-weight: 600; }
.engpop .ed { color: var(--a-muted); font-size: 0.92em; }
@media (max-width: 1100px) { .engines .eng b { display: none; } }

.grid { display: grid; gap: var(--a-gap); padding: var(--a-gap); flex: 1; min-height: 0; overflow: auto;
        grid-template-columns: repeat(auto-fill, minmax(calc(var(--a-unit) * var(--a-snap, 0.1)), 1fr));
        grid-auto-rows: calc(var(--a-unit) * var(--a-snap, 0.1));
        grid-auto-flow: dense; }
.grid.free { display: block; position: relative; z-index: 1; min-height: 0; }
.grid.panning { cursor: grabbing; user-select: none; }
.grid.panning * { cursor: grabbing !important; }
.grid.free::after { content: ""; display: block; height: var(--a-canvas, 100%); pointer-events: none; }
.grid.free .block { position: absolute; grid-column: auto; grid-row: auto; }
.grid.free .bhead { cursor: grab; }
.grid.free .block.floating { z-index: 20; box-shadow: 0 14px 36px #00000066; }
.grid.free .block.floating .bhead { cursor: grabbing; }
.block { grid-column: span var(--w, 1); grid-row: span var(--h, 1); display: flex; flex-direction: column; min-height: 0;
         background: rgba(var(--a-panel-rgb), var(--a-alpha)); -webkit-backdrop-filter: blur(var(--a-blur)); backdrop-filter: blur(var(--a-blur));
         border: 1px solid var(--a-border, #ffffff12); border-radius: var(--a-radius, 10px); overflow: hidden;
         box-shadow: var(--a-shadow, none); }
.block.noborder { border-color: transparent; }
.block[hidden] { display: none !important; }
.block.collapsed { height: 38px; align-self: start; }
.block.collapsed .bbody { display: none; }
.block.teaches { outline: 2px dotted var(--a-accent); outline-offset: -3px; }
.bhead { display: flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border-bottom: 1px solid #ffffff10;
         cursor: default; user-select: none; min-height: 36px; flex: none; position: relative; z-index: 2;
         background: rgba(var(--a-head-rgb, var(--a-panel-rgb)), var(--a-head-alpha, 0.96)); color: var(--a-head-text, var(--a-text)); }
.bhead sl-icon-button::part(base) { color: var(--a-head-text, var(--a-text)); }
.bhead { --notify-rgb: var(--a-notify-rgb, 255, 226, 130); }
.bhead.notify-info { --notify-rgb: 140, 190, 255; }
.bhead.notify-warn { --notify-rgb: 255, 160, 110; }
.bhead.notify::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 0%, rgba(var(--notify-rgb), 0) 30%, rgba(var(--notify-rgb), .30) 48%,
              rgba(255, 255, 240, .45) 50%, rgba(var(--notify-rgb), .30) 52%, rgba(var(--notify-rgb), 0) 70%, transparent 100%);
  background-size: 250% 100%; animation: notify-sweep 1.8s ease-in-out 1 forwards; }
.bhead.notify::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: rgba(var(--notify-rgb), .9); box-shadow: 0 0 8px 1px rgba(var(--notify-rgb), .6);
  animation: notify-line 2.4s ease-out 1 forwards; }
@keyframes notify-sweep { from { background-position: 92% 0; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } to { background-position: 8% 0; opacity: 0; } }
@keyframes notify-line { 0% { opacity: 0; transform: scaleX(0); } 25% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .bhead.notify::after { animation: none !important; background: rgba(var(--notify-rgb), .12); }
}
.bhead .bsay { opacity: .75; }
.bhead .bsay:hover { opacity: 1; }
.bhead .bprops { opacity: .75; }
.bhead .bprops:hover { opacity: 1; }
.bfont { display: inline-flex; gap: 1px; }
.bfont button { background: none; border: 0; border-radius: 6px; padding: 4px 5px; min-width: 26px; cursor: pointer;
                color: var(--a-head-text, var(--a-text)); font: 600 13px/1 system-ui, "Segoe UI", sans-serif; opacity: .75; }
.bfont button:hover:not(:disabled) { opacity: 1; background: #ffffff14; }
.bfont button:focus-visible { outline: 2px solid var(--a-accent); outline-offset: -2px; }
.bfont button:disabled { opacity: .3; cursor: default; }
.btitle { font-weight: 600; }
.bnewchar { margin-left: 8px; }
.bbadge[hidden] { display: none; }
.bbody { flex: 1; overflow: auto; padding: 8px 10px; min-height: 0;
  font-size: calc(var(--a-font) * var(--a-scale, 1) * var(--a-fontScale, 1));
  --sl-font-size-medium: calc(var(--a-font) * var(--a-scale, 1) * var(--a-fontScale, 1));
  --sl-font-size-small: calc(var(--a-font) * .9 * var(--a-scale, 1) * var(--a-fontScale, 1));
  --sl-input-font-size-small: calc(.875rem * var(--a-scale, 1) * var(--a-fontScale, 1));
  --sl-input-font-size-medium: calc(var(--a-font) * var(--a-scale, 1) * var(--a-fontScale, 1));
  --sl-input-font-size-large: calc(1.25rem * var(--a-scale, 1) * var(--a-fontScale, 1));
  --sl-button-font-size-small: calc(.75rem * var(--a-scale, 1) * var(--a-fontScale, 1));
  --sl-button-font-size-medium: calc(.875rem * var(--a-scale, 1) * var(--a-fontScale, 1));
  --sl-button-font-size-large: calc(var(--a-font) * var(--a-scale, 1) * var(--a-fontScale, 1)); }
.menu-pad { padding: 4px 16px 8px; }
.sizes { display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; }
.block { position: relative; }
.resize { position: absolute; z-index: 3; }
.resize-se { right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize;
             background: linear-gradient(135deg, transparent 46%, var(--a-accent) 46%); opacity: .45; border-bottom-right-radius: var(--a-radius, 10px); }
.resize-e { top: 36px; right: 0; width: 10px; bottom: 22px; cursor: ew-resize; background: transparent; }
.resize-s { left: 0; right: 22px; bottom: 0; height: 10px; cursor: ns-resize; background: transparent; }
.resize-e:hover, .resize-s:hover { background: color-mix(in srgb, var(--a-accent) 28%, transparent); }
.resize-se:hover, .block.resizing .resize-se { opacity: 1; }
.block.resizing { outline: 2px dashed var(--a-accent); }

/* Fully see-through panels: no frame left, only the contents. */
.block { transition: background-color .25s ease, border-color .25s ease; }
.bhead { transition: background-color .25s ease; }
.block.clearbody { -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; }
.block.clearbody .bhead { border-bottom-color: transparent; }
.block.clearbody .imgwrap { background: transparent; }
.block.clearbody .resize-se { opacity: 0; }
.block.clearhead .bhead > * { opacity: 0; transition: opacity .25s ease; }
/* Point at the title bar (or drag) and the whole panel fills in to --a-peek. */
html.peekon .block:has(> .bhead:hover), html.peekon .block.floating, html.peekon .block.resizing {
  background-color: rgba(var(--a-panel-rgb), max(var(--a-alpha), var(--a-peek, .3)));
  -webkit-backdrop-filter: blur(var(--a-blur)); backdrop-filter: blur(var(--a-blur)); }
html.peekon .block:not(.noborder):has(> .bhead:hover), html.peekon .block.floating:not(.noborder) {
  border-color: var(--a-border, #ffffff12); }
html.peekon .block:has(> .bhead:hover) > .bhead, html.peekon .block.floating > .bhead {
  background-color: rgba(var(--a-head-rgb, var(--a-panel-rgb)), max(var(--a-head-alpha, .96), var(--a-peek, .3)));
  border-bottom-color: #ffffff10; }
html.peekon .block:has(> .bhead:hover) > .bhead > *, html.peekon .block.floating > .bhead > * { opacity: 1; }
html.peekon .block:has(> .bhead:hover) .imgwrap { background: #00000033; }
html.peekon .block:has(> .bhead:hover) .resize-se { opacity: .45; }
/* Picture panel the character opened: stays see-through; hover or touch anywhere shows only the title bar at --a-peek. */
html .block.autopeek:hover, html .block.autopeek.touchpeek,
html.peekon .block.autopeek:has(> .bhead:hover) { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; }
html .block.autopeek:hover > .bhead, html .block.autopeek.touchpeek > .bhead {
  background-color: rgba(var(--a-head-rgb, var(--a-panel-rgb)), var(--a-peek, .3)); }
html .block.autopeek:hover > .bhead > *, html .block.autopeek.touchpeek > .bhead > * { opacity: 1; }
html.peekon .block.autopeek:has(> .bhead:hover) .imgwrap { background: transparent; }
html .block.autopeek:hover .resize-se, html .block.autopeek.touchpeek .resize-se { opacity: .45; }
.imgpanel, .imgwrap img, .pthumb { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.bhead[draggable="true"] { cursor: grab; }
.block.dragging { opacity: .45; }
.block.dropto { outline: 2px solid var(--a-accent); }
.gate { max-width: 420px; margin: 20vh auto; text-align: center; }
.rpState { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: .92em; letter-spacing: .04em; margin-bottom: 6px; }
.rpState.on { background: rgba(80, 200, 120, .18); color: #7be0a0; border: 1px solid rgba(80, 200, 120, .45); }
.rpState.off { background: rgba(160, 160, 170, .12); color: #b8bcc8; border: 1px solid rgba(160, 160, 170, .35); }
.rpRest.dim { opacity: .45; }
/* Toys: the STOP button stays above everything (screens, dialogs) on every owner page while armed. */
#toyStop { position: fixed; right: 18px; bottom: 18px; z-index: 10000; min-width: 120px; min-height: 72px; padding: 0 22px;
           border: 3px solid #fff; border-radius: 14px; background: #d11; color: #fff; font: 800 28px/1 system-ui, sans-serif;
           letter-spacing: .08em; box-shadow: 0 6px 24px #000a; cursor: pointer; }
#toyStop[hidden] { display: none; }
body.phonechat #toyStop { left: 12px; right: 12px; bottom: 12px; min-height: 84px; }
.toysPanel .toyBigStop { width: 100%; min-height: 64px; border: 2px solid #fff; border-radius: 12px; background: #d11; color: #fff;
                         font: 800 26px/1 system-ui, sans-serif; letter-spacing: .08em; cursor: pointer; }
.toysPanel .toyConnectRow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.toysPanel .toyLink { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 200px; font-size: 1.05em; }
.toysPanel .toyLight { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #d33; box-shadow: 0 0 10px rgba(220, 50, 50, .7); }
.toysPanel .toyLink.on .toyLight { background: #2c2; box-shadow: 0 0 12px rgba(40, 200, 60, .8); }
.toysPanel .toyLink.on b { color: #7be0a0; }
.toysPanel .toyLink.off b { color: #ff8a8a; }
.toysPanel .tbConnect[hidden] { display: none; }
.toysPanel .toyTrain sl-button { flex: 1; }
.toysPanel label { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.toysPanel input[type="number"] { width: 4.5em; }
.toysPanel input[type="text"] { flex: 1; min-width: 0; }
.toysPanel .toyArmRow { display: flex; gap: 14px; flex-wrap: wrap; }
.toysPanel .toyCmd { display: flex; gap: 6px; align-items: center; }
.toyDev { margin: 6px 0; }
.toyBar { display: grid; grid-template-columns: 4em 1fr 2em; gap: 6px; align-items: center; font-size: .9em; }
.toyBar i { display: block; height: 8px; border-radius: 4px; background: var(--a-accent); min-width: 2px; }
.toyBar em { font-style: normal; text-align: right; }
.toyErr { color: #ff8a8a; }
.toysPanel .toyLearnSum { white-space: pre-wrap; margin: 4px 0; }
.toysPanel .toyDeskOut { white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; margin: 6px 0 0; }
.term { position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; flex-direction: column;
        align-items: center; justify-content: center; font-family: "Lucida Console", Consolas, "Courier New", monospace;
        overflow-y: auto; cursor: text; -webkit-tap-highlight-color: transparent; }
.term[hidden] { display: none; }
.term-title { color: #e8e8e8; font-size: 28px; letter-spacing: .6em; margin-right: -.6em; line-height: 2; }
.term-sub { color: #9a9a9a; font-size: 11px; letter-spacing: .57em; margin-right: -.57em; margin-bottom: 4em; }
.term-box { box-sizing: border-box; width: 160px; max-width: calc(100vw - 32px); min-height: 22px; margin: 0; background: #fff;
            border: 1px solid #fff; padding: 2px 6px; transition: width .35s ease, background-color .2s, min-height .35s ease; }
/* 16px: iOS zooms into any field with smaller text. */
.term-box input { box-sizing: border-box; width: 100%; background: transparent; border: 0; outline: 0; border-radius: 0; padding: 0;
                  color: #000; font: inherit; font-size: 16px; caret-color: #000; }
.term-line { display: inline; white-space: nowrap; }
.term-box #termGo { display: none; }
.term-hint { display: none; margin-top: 18px; color: #6f6f8f; font-size: 13px; letter-spacing: .2em; }
.term-box.dos { width: 420px; min-height: 120px; background: #0000aa; border: 2px solid #aaaaaa; padding: 10px 12px;
                box-shadow: 0 0 0 4px #0000aa; }
.term-box.dos #termOut { color: #aaaaaa; font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.term-box.dos input { width: 12ch; max-width: calc(100% - 7em); color: #ffffff; caret-color: #ffffff; font-size: 16px;
                      line-height: 1.3; vertical-align: baseline; }
/* Before the field has focus: a blinking block where the text goes, so it reads as "type here". */
.term-box.dos input:not(:focus) { background: linear-gradient(#aaaaaa, #aaaaaa) 0 50% / 1ch 1.1em no-repeat;
                                  animation: termblink 1.05s steps(1) infinite; }
@keyframes termblink { 50% { background-size: 0 0; } }
@media (hover: none), (pointer: coarse) {
  .term { justify-content: flex-start; padding: 12vh 0 40px; }
  .term-sub { margin-bottom: 2.5em; }
  .term-box.dos #termGo { display: inline-block; margin-left: 6px; min-width: 44px; min-height: 34px; padding: 0 8px; border: 0;
                          border-radius: 0; background: #aaaaaa; color: #0000aa; font: inherit; font-size: 18px; font-weight: bold;
                          vertical-align: middle; cursor: pointer; touch-action: manipulation; }
  .term-box.dos #termGo:active { background: #ffffff; }
  .term:not(:focus-within) .term-box.dos ~ .term-hint { display: block; }
}
body.phonechat .chat .opts > :not(.status):not(.activeBtn),
body.phonechat .bhead .bsay, body.phonechat .bhead .bfont, body.phonechat .bhead .bprops, body.phonechat .bhead .bmenu, body.phonechat .bhead .bclose,
body.phonechat .bhead .bmin, body.phonechat .bhead sl-dropdown, body.phonechat .chat .tokline, body.phonechat #me, body.phonechat #spend, body.phonechat #newFork,
body.phonechat .brand { display: none !important; }
body.phonechat #engines, body.phonechat .engpop { display: none !important; }
body.phonechat .grid { display: block; padding: 0; }
.chatsize { display: none; gap: 4px; }
body.phonechat .chatsize { display: inline-flex; }
.chatsize sl-button::part(base) { min-width: 34px; font-size: 16px; font-weight: 600; }
body.phonechat .msgs { font-size: calc(16px * var(--chat-text-scale, 1)); }
body.phonechat .block[data-id="chat"] { height: calc(100vh - 52px); height: calc(100dvh - 52px); max-height: none; border-radius: 0; border-left: 0; border-right: 0; }
body.phonechat .composer { flex-wrap: wrap; justify-content: space-between; }
body.phonechat .composer sl-textarea { font-size: 16px; flex: 1 0 100%;
  --sl-input-font-size-medium: max(16px, calc(var(--a-font) * var(--a-scale, 1) * var(--a-fontScale, 1) * var(--chat-text-scale, 1))); }
body.phonechat .composer sl-button { font-size: 1.15rem; }
.imgpanel { display: flex; flex-direction: column; height: 100%; gap: 6px; position: relative; }
.imgwrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #00000033; border-radius: 6px; overflow: hidden; }
.imgwrap img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.imgwrap { position: relative; }
.imgalbum { position: absolute; transform: translate(14px, calc(-100% - 10px)); pointer-events: none; white-space: nowrap;
  font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive; font-size: 2.3em; color: #fff;
  text-shadow: 0 1px 3px #000, 0 0 10px #000a; opacity: 1; transition: opacity 2.5s ease-in-out; }
.imgalbum[hidden] { display: none; }
.imglike { position: absolute; transform: translate(calc(-100% - 14px), calc(-100% - 8px)); border: 0; cursor: pointer;
  background: #0006; color: #fff; border-radius: 999px; padding: 3px 9px; font-size: 1.05em; line-height: 1.3;
  filter: grayscale(1); opacity: .55; transition: opacity .2s, filter .2s; }
.imglike:hover { opacity: 1; }
.imglike.on { filter: none; opacity: 1; background: #2a6b3fcc; }
.imglike[hidden] { display: none; }
.imgpanel.faded .imglike, .imgpanel.entering .imglike { opacity: 0; pointer-events: none; }
.imgpanel.faded .imgalbum, .imgpanel.entering .imgalbum { opacity: 0; }
.imgpanel.entering .imgalbum { transition: none; }
.imgwrap img, .imgcap { opacity: 1; transition: opacity 2.5s ease-in-out; }
.imgpanel.faded .imgwrap img, .imgpanel.faded .imgcap { opacity: 0; }
.imgpanel.profile .imgwrap img {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                      linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
              linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
.imgpanel.entering .imgwrap img, .imgpanel.entering .imgcap { opacity: 0; transition: none; }
.imgempty { padding: 16px; text-align: center; }
.imgcap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imgrate { display: flex; gap: 6px; justify-content: center; padding: 4px 0; }
.imgrate[hidden] { display: none; }
.imgrate button { font: inherit; font-size: 12px; color: var(--sl-color-neutral-800, #ddd); background: rgba(127,127,127,.15);
  border: 1px solid rgba(127,127,127,.35); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.imgrate button:hover { background: rgba(127,127,127,.3); }
.imgrate kbd { font-size: 10px; opacity: .7; margin-left: 3px; }
.imgbusy { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; align-items: center; justify-content: center; gap: 10px;
           padding: 8px; background: rgba(10, 12, 16, .78); border-radius: 6px; }
.imgbusy[hidden] { display: none; }
.imgbusytext { animation: send-pulse 1.6s ease-in-out infinite; }
.chat.painting .composer sl-textarea::part(base), .painting .composer sl-textarea::part(base) { border-style: dashed; }
.composer sl-textarea::part(textarea) { color: #fff; }
.replystrip { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 4px 6px 4px 10px; border-radius: 8px;
              border-left: 3px solid rgba(124,156,255,.8); background: rgba(124,156,255,.10); font-size: .9em; }
.replystrip[hidden] { display: none; }
.replystrip .rstext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.replylink { font-size: .82em; opacity: .75; margin-bottom: 4px; padding-left: 8px; border-left: 2px solid rgba(124,156,255,.7);
             cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replylink:hover { opacity: 1; }
/* ---- guests in the chat (anima/room.py): a guest's bubble, its badge, the room strip, the Add AI room dialog ---- */
.msg.ai.guest { border-left: 3px solid var(--g, #b8c0cc); }
.msg.guest .gname, .msg.ai .gname.hostname { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; min-height: 40px;
  font-size: .86em; font-weight: 600; }
.msg.guest .gname > span:not(.gbadge), .msg.ai .gname.hostname > span:not(.gbadge) { min-width: 0; overflow-wrap: anywhere; }
.gbadge { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--g, #b8c0cc); color: #15171d; font: 700 18px/1 system-ui, sans-serif; }
.gbadge.host { background-color: #3a2f28; color: #f3cf86; }
.roomstrip .gbadge { width: 20px; height: 20px; font-size: 11px; }  /* the strip's chips stay small */
.gbadge.hasface { background: var(--gface) center / cover no-repeat; color: transparent;
  box-shadow: 0 0 0 2px var(--g, #b8c0cc); }  /* her photo, ringed in her colour */
.msg.sys.guestfail { opacity: .7; font-size: .85em; }
body.userscreen .msg.ai.guest[data-turn] { border-left: 3px solid var(--g, #b8c0cc); }
body.userscreen .msg.guest .gname .gbadge { display: none; }  /* the avatar beside the bubble is its badge */
body.userscreen .msg.ai.guest[data-turn] { margin-left: 48px; max-width: calc(90% - 48px); }
body.userscreen .msg.ai.guest[data-turn]::before { content: attr(data-initial); background: var(--g, #b8c0cc); color: #15171d;
  width: 40px; height: 40px; left: -48px; top: -22px; font: 700 18px/1 system-ui, sans-serif; }
body.userscreen .msg.ai.guest.hasface[data-turn]::before { content: ""; background: var(--gface) center / cover no-repeat;
  box-shadow: 0 0 0 2px var(--g, #b8c0cc); }  /* her photo beside her bubble, as the host's face is beside hers */
.roomstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0 0; padding: 5px 8px;
  border-radius: 10px; background: rgba(124,156,255,.08); border: 1px solid rgba(124,156,255,.22); font-size: .88em; }
.roomstrip[hidden] { display: none; }
.roomstrip.is-paused { background: rgba(255,184,107,.14); border: 2px solid #ffb86b; }
.roomstrip .rspausebar { order: -1; flex: 1 0 100%; padding: 4px 10px; border-radius: 6px; background: #ffb86b;
  color: #2a1a05; font-weight: 700; }
.roomstrip .rsbtn.rsresume { background: #ffb86b; color: #2a1a05; border-color: #ffb86b; font-weight: 700; }
.roomstrip .rslabel { flex: none; font-weight: 600; font-size: .9em; color: var(--a-accent, #7c9cff); }
.roomstrip .rsguests { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.roomstrip .rschip { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 2px; border-radius: 999px;
  background: transparent; border: 1px solid var(--g, #b8c0cc); }
.roomstrip .rschip.host { padding-left: 9px; border-style: dashed; }
.rdlg .rdhost { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: .92em; }
.rdlg .rdpace, .rdlg .rdhostpace, .rdlg .rdfrom { font: inherit; font-size: .9em; padding: 2px 4px; border-radius: 6px; }
.rdlg .rdhint { margin: 8px 0 0; line-height: 1.35; }
/* heat and pace per character (anima/room_heat.py): a small heat bar and the pace word */
.roomstrip .rsmeters { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; }
.roomstrip .rsheat { width: 34px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--a-muted) 25%, transparent);
  overflow: hidden; }
.roomstrip .rsheat i { display: block; height: 100%; background: linear-gradient(90deg, #f4b860, #ff5d73); transition: width .6s ease; }
.roomstrip .rspace { font-size: .78em; color: var(--a-muted); white-space: nowrap; }
.roomstrip .rspace[data-pace="building"] { color: #f4b860; }
.roomstrip .rspace[data-pace="ready"] { color: #ff5d73; font-weight: 600; }
.roomstrip .rspace[data-pace="afterglow"] { color: #d7b4ff; }
.roomstrip .rsnow { color: var(--a-muted); font-style: italic; white-space: nowrap; animation: send-pulse 1.6s ease-in-out infinite; }
.roomstrip .rsnow.paused { animation: none; }
.roomstrip .rsacts { display: inline-flex; gap: 4px; margin-left: auto; flex: none; }
.roomstrip .rsbtn { font: inherit; font-size: .92em; padding: 3px 10px; min-height: 28px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--a-muted, #888); background: transparent; color: inherit; }
.roomstrip .rsbtn:disabled { opacity: .45; cursor: default; }
.roomstrip .rsbtn:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.roomstrip .rsend { border-color: #e0707088; }
@media (max-width: 480px) {
  .roomstrip .rsguests { flex-basis: 100%; }
  .roomstrip .rsacts { margin-left: 0; width: 100%; justify-content: space-between; flex-wrap: wrap; row-gap: 4px; }
  .roomstrip .rsbtn { padding: 3px 8px; }
}
.roomdlg::part(panel) { width: min(520px, calc(100vw - 24px)); }
.roomdlg .rdmode { display: flex; gap: 16px; margin: 4px 0 10px; }
.roomdlg .rdlist { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.roomdlg .rdrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 8px; border-radius: 8px;
  border: 1px solid #ffffff1a; cursor: pointer; }
.roomdlg .rdrow.off { opacity: .55; cursor: default; }
.roomdlg .rdname { flex: 1; min-width: 0; }
.roomdlg .rdrole { flex-basis: 100%; font: inherit; padding: 4px 8px; border-radius: 6px; border: 1px solid #ffffff2a;
  background: transparent; color: inherit; }
.roomdlg .rdrole[hidden] { display: none; }
.roomdlg .rderr { color: #f08080; }
.msg.flash { animation: msg-flash 1.6s ease-out; }
@keyframes msg-flash { 0%, 30% { box-shadow: 0 0 0 2px rgba(255,226,140,.9); } 100% { box-shadow: 0 0 0 2px transparent; } }
body.phonechat .replystrip, body.phonechat [data-reply] { display: none !important; }
.msg.picture.islook { outline: 2px solid var(--sl-color-amber-500, #f59e0b); outline-offset: 2px; }
.lookbadge { color: var(--sl-color-amber-600, #d97706); font-weight: 600; margin-bottom: 4px; }
.lookbtn.on { color: var(--sl-color-amber-500, #f59e0b); }
body.phonechat [data-look] { display: none !important; }
body.phonechat .composer .attach { display: none !important; }
/* The owner's picked picture, before it is sent (lab.js aiPick): its name, the AI-generated box, Send picture, ✕. */
.aimadebar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85em; }
.aimadebar[hidden] { display: none; }
.aimadename { max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.aimadebar button { font: inherit; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--line, #ccc4);
  background: transparent; color: inherit; cursor: pointer; }
.msg.user.upload .pthumb { width: 220px; max-width: 100%; height: 220px; object-fit: contain; border-radius: 8px; display: block; }
.paintnote { margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; text-align: center;
             background: linear-gradient(90deg, rgba(124,156,255,.10), rgba(255,226,140,.16), rgba(124,156,255,.10));
             background-size: 200% 100%; animation: paintnote-flow 3s linear infinite; }
.paintnote[hidden] { display: none; }
@keyframes paintnote-flow { from { background-position: 0% 0; } to { background-position: 200% 0; } }
.hpaint { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 10px 0; padding: 10px 14px;
          border-radius: 10px; text-align: center; background: linear-gradient(90deg, rgba(124,156,255,.12), rgba(255,226,140,.22), rgba(124,156,255,.12));
          background-size: 200% 100%; animation: paintnote-flow 3s linear infinite; }
.hpaint .hptext { animation: send-pulse 1.6s ease-in-out infinite; }
.hpaint .hpicon, .hpcell .hpicon { display: inline-block; font-size: 1.5em; transform-origin: 50% 85%; animation: hp-sway 1.8s ease-in-out infinite; }
.hpaint.hpdone { animation: none; background: rgba(255,226,140,.16); }
.hpaint.hpdone .hptext, .hpaint.hpdone .hpicon { animation: none; }
.hpcell { background: linear-gradient(90deg, rgba(127,127,127,.12), rgba(255,226,140,.20), rgba(127,127,127,.12)); background-size: 200% 100%;
          animation: paintnote-flow 2.4s linear infinite; }
@keyframes hp-sway { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg) translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .hpaint, .hpaint .hptext, .hpaint .hpicon, .hpcell, .hpcell .hpicon { animation: none; } }
.choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.storyskip { display: flex; justify-content: flex-end; margin-top: 6px; }
.storyskip .choice { opacity: .75; font-size: .9em; }
.storyskip .choice:hover { opacity: 1; }
.chessbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding-top: 6px;
            border-top: 1px dashed color-mix(in srgb, currentColor 25%, transparent); }
.chesshead { font-size: .85em; opacity: .75; margin-right: 4px; cursor: default; }
.choice { font: inherit; font-size: .92em; padding: 6px 12px; border-radius: 999px; cursor: pointer;
          background: rgba(var(--a-choice-rgb, 124, 156, 255), .14); color: var(--a-choice-text, var(--a-text, #e8e8e8));
          border: 1px solid var(--a-choice-border, rgba(var(--a-choice-rgb, 124, 156, 255), .45)); }
.choice:hover { background: rgba(var(--a-choice-rgb, 124, 156, 255), .28); }
.choice:active { transform: translateY(1px); }
/* The Professor's first fork (anima/host.py FORK_OPENER): two large buttons, one per line */
.choices.bigfork { flex-direction: column; gap: 10px; }
.choices.bigfork .choice { font-size: 1.12em; font-weight: 600; padding: 14px 18px; border-radius: 14px; text-align: left; width: 100%; }
/* The path header (host.js paintPath): which path they're on, and the one-click switch */
.hpath { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .9em; }
.hpath .hplabel { font-weight: 600; }
.hpath .hpswitch { font: inherit; font-size: .92em; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; color: inherit; opacity: .8; }
.usnewbar .hpath { margin-right: auto; }
.dpanel > .hpath { margin-bottom: 8px; }
.choice .ck { display: inline-block; min-width: 1.3em; margin-right: 6px; padding: 0 4px; border-radius: 4px;
  font-size: .8em; font-weight: 700; text-align: center; background: rgba(var(--a-choice-rgb, 124, 156, 255), .3); }
.choicenudge { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0; padding: 7px 8px 7px 10px;
               border-radius: 8px; background: var(--a-nudge, #c45a12); color: #fff6e8; font-size: .88em; line-height: 1.35; }
.choicenudge[hidden] { display: none; }
.choicenudge .cntext { flex: 1; }
.choicenudge .cnx { flex: none; border: 0; background: transparent; color: inherit; font: inherit; font-size: 1.15em;
                    line-height: 1; cursor: pointer; opacity: .8; padding: 0 4px; }
.choicenudge .cnx:hover { opacity: 1; }
.chatchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0 0; }
.chatchips[hidden] { display: none; }
.chatchips .chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; outline: 0;
        background: transparent; box-shadow: none; cursor: pointer; border-radius: 999px; line-height: 0; font-size: inherit; }
.chatchips .chip.icon { border-radius: 50%; transition: transform .12s ease, filter .12s ease; }
.chatchips .chip.icon:hover { transform: translateY(-1px) scale(1.08); filter: brightness(1.08); }
.chatchips .chip.icon.on { transform: scale(1.12); filter: drop-shadow(0 0 5px #ffffffaa); }
.chatchips .chip.word.on { filter: drop-shadow(0 0 4px #ffffff88); }
.chatchips .chip.word { padding: 3px 10px 3px 4px; background: color-mix(in srgb, var(--chip, #7c9cff) 35%, #1a1d25);
             color: var(--a-text); font: inherit; font-size: .85em; line-height: 1.2; }
.chatchips .chip.word.teach { --chip: #f0c14a; }
.chatchips .chip.word:hover { filter: brightness(1.08); }
.chatchips .chip:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.chatchips .face { display: block; border-radius: 50%; }
.chatchips .heartbeat { flex: none; width: 40px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
        margin: 0; padding: 0; border: 0; background: transparent; line-height: 0; position: relative; z-index: 1;
        cursor: pointer; border-radius: 50%; }
.chatchips .heartbeat:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 1px; }
.chatchips .feelset { display: inline-flex; flex-wrap: nowrap; gap: 6px; align-items: center; overflow: hidden;
        padding: 4px 3px; margin: -4px 0; max-width: 0; opacity: 0; pointer-events: none;
        transition: max-width .35s ease, opacity .25s ease; }
.chatchips .feelset.open { max-width: 440px; opacity: 1; pointer-events: auto; }
.chatchips .feelset { flex: 0 1 auto; min-width: 0; }
.chatchips .feelset .chip.icon { flex: 0 1 32px; min-width: 22px; }
.chatchips .feelset .chip.icon .face { width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .chatchips .feelset { transition: opacity .2s ease; } }
.chatchips .heartbeat svg { display: block; transform-origin: 50% 55%; will-change: transform;
        filter: drop-shadow(0 0 var(--hb-glow, 3px) #ff3d6acc); }
.feelmark { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; vertical-align: middle; }
.feelmark .face { display: block; border-radius: 50%; }
body.phonechat .chatchips { display: none !important; }
.msg.ai:not(.picture) .pthumb { display: block; max-width: 100%; height: 22vh; aspect-ratio: 1; object-fit: contain; border-radius: 8px; margin: 4px 0 6px; cursor: zoom-in; }
.msg.picture .pthumb { display: block; width: min(100%, 260px); height: 260px; object-fit: contain; border-radius: 8px; margin-bottom: 6px; cursor: zoom-in; }
.msg.picture .pthumb.small { width: min(100%, 140px); height: 140px; }
/* picture privacy (10 Nov): an X on nude pictures; one click turns every picture in the chat into a small + */
.picwrap { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.picx, .picplus { border: 0; border-radius: 50%; width: 26px; height: 26px; padding: 0; font: 600 16px/26px system-ui, sans-serif;
  text-align: center; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .55); }
.picwrap .picx { position: absolute; top: 6px; right: 6px; }
.imgwrap .picx, .imgwrap .picplus { position: absolute; top: 8px; right: 8px; z-index: 2; }
.picwrap .picplus { display: none; }
.picsoff .picwrap > img, .picsoff .picwrap .picx { display: none !important; }
.picsoff .picwrap .picplus { display: inline-block; position: static; margin: 2px 0; }
.imgpanel.picsoff .imgwrap > img { visibility: hidden; }
.paintchip { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 2px; padding: 2px 4px 2px 8px; border-radius: 999px;
  font-size: 12px; background: #ffffff12; border: 1px solid #ffffff22; }
.paintchip .pcdot { width: 7px; height: 7px; border-radius: 50%; background: #e8b04a; animation: send-pulse 1.6s ease-in-out infinite; }
.paintchip .pcstop { font: inherit; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid #ffffff33; background: transparent; color: inherit; cursor: pointer; }
.paintchip .pcstop:hover { background: #ffffff1a; }
.msg.ai.pending.sketching { opacity: .9; display: inline-flex; align-items: center; gap: 8px;
  background-image: linear-gradient(90deg, transparent, #ffffff14, transparent); background-size: 200% 100%;
  animation: paintnote-flow 2.4s linear infinite; }
.msg.ai.pending.sketching .pcstop { font: inherit; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid #ffffff33; background: transparent; color: inherit; cursor: pointer; }
.msg .jumplink { cursor: pointer; text-decoration: underline dotted; }
.phonepic { position: fixed; inset: 0; z-index: 9000; background: #000e; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.phonepic img { max-width: 100vw; max-height: calc(88vh - 54px); object-fit: contain; }
/* Make private / Make public: the row keeps its 44 px while the button is still coming, so the picture never moves. */
.phonepicacts { min-height: 44px; display: flex; gap: 8px; justify-content: center; }
.phonepicpriv { min-height: 44px; min-width: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid #fff6;
  background: #222c; color: #fff; font: inherit; cursor: pointer; }
.phonepicpriv:disabled { opacity: .6; cursor: default; }
.plist.phonelist { display: flex; flex-direction: column; gap: 8px; }
.prow { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 18px; border-radius: 10px;
        background: #ffffff0a; border: 1px solid #ffffff14; color: inherit; font: inherit; font-size: 17px; text-align: left; }
.prow:active { background: #ffffff18; }
.prow.current { border-color: var(--a-accent, #7c9cff); background: rgba(124, 156, 255, .12); }
.prow .pname { min-width: 0; }
.ptwin { display: block; margin-top: 2px; font-size: 12px; color: var(--a-muted); overflow-wrap: anywhere; }
.pnewchar { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 18px;
  border-radius: 10px; border: 1px dashed var(--a-accent, #7c9cff); background: transparent; color: var(--a-accent, #7c9cff);
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; grid-column: 1 / -1; }
.pnewchar:hover, .pnewchar:active { background: rgba(124, 156, 255, .12); }
.pcur { font-size: 12px; color: var(--a-accent, #7c9cff); letter-spacing: .05em; text-transform: uppercase; }
.brandmark { width: 20px; height: 20px; border-radius: 5px; vertical-align: -4px; margin-right: 6px; }
.screen { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
  background: #0d0f14f2; overflow-y: auto; }
.screen[hidden] { display: none; }
.screen .card { width: min(420px, 92vw); max-width: calc(100vw - 24px); padding: 28px; border-radius: 14px; background: #1a1d25;
  text-align: center; display: flex; flex-direction: column; gap: 12px; flex: none; margin: auto; }
@media (max-width: 480px) { .screen .card { padding: 22px 16px; } }
.screen .card.wide { width: min(760px, 94vw); }
#meet .card { position: relative; }
.meetx { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ffffff26;
  background: #0006; color: #e9e2d6; display: grid; place-items: center; cursor: pointer; font-size: 15px; z-index: 1; }
.meetx:hover { border-color: #f3cf8680; color: #f3cf86; }
.meetx:focus-visible { outline: 2px solid #f3cf86; outline-offset: 2px; }
.screen h2 { margin: 0; } .screen h3 { margin: 10px 0 0; font-size: 1em; font-weight: 600; }
.screen .row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.screen.acct { z-index: 10000; overflow-y: auto; --sl-input-font-size-medium: 16px; }
.screen.acct .card { box-sizing: border-box; flex: none; margin: auto; }
@media (max-width: 480px) { .screen.acct .card { width: calc(100vw - 24px); padding: 22px 18px; } }
#usersBtn[hidden], #gameBtn[hidden], #ownerScreen[hidden], .acctdlg [hidden], .acct [hidden] { display: none !important; }
sl-dialog.acctdlg { --sl-z-index-dialog: 950; }
.acct .aform, .acctdlg .aform { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.acct .terms { text-align: left; padding-left: 1.2em; margin: 0; line-height: 1.45; }
.acct sl-checkbox { text-align: left; }
.acct sl-checkbox::part(base) { width: 100%; min-height: 32px; align-items: center; }
.anote { min-height: 1.2em; margin: 0; } .anote.bad { color: #ff8a8a; }
.acctdlg .invbox { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px; border-radius: 8px;
  background: #ffffff0d; margin-bottom: 10px; }
.acctdlg .invbox p { flex-basis: 100%; margin: 0; } .acctdlg .invbox sl-input { flex: 1; }
.plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; text-align: left; }
.pcard { padding: 14px; border-radius: 10px; background: #ffffff0a; display: flex; flex-direction: column; gap: 8px; }
.pcard .pname { font-size: 1.15em; font-weight: 600; }
.pcard .pbtns { display: flex; gap: 6px; flex-wrap: wrap; }
body.simple .lab-only { display: none !important; }
.mood-big { font-size: 1.35em; font-weight: 600; margin-bottom: 4px; }
.mv { padding: 4px 0 6px; border-bottom: 1px solid #ffffff0c; }
.mv.fresh { animation: slide .35s ease; }
.chip { display: inline-block; padding: 1px 7px; margin: 2px 3px 2px 0; border-radius: 10px; font-size: .85em; background: #ffffff10; }
.chip.up { color: #9fe3b0; } .chip.down { color: #ffab9f; }
.chip a { color: inherit; text-decoration: none; opacity: .7; margin-left: 4px; }
.chip a:hover { opacity: 1; }
.cx3d { padding: 4px 0 6px; border-bottom: 1px solid #ffffff0c; }
.cx3c { margin: 2px 0; overflow-wrap: anywhere; }
.cx3h { padding: 4px 0; border-bottom: 1px solid #ffffff0c; cursor: pointer; }
.cx3h:hover, .cx3h.open { background: #ffffff08; }
.cx3why { padding: 2px 0 6px 10px; border-left: 2px solid var(--a-accent); }
.prj { padding: 6px 0; border-bottom: 1px solid #ffffff0c; }
.prjwhy { padding: 2px 0 6px 10px; border-left: 2px solid var(--a-accent); }
.prjart { margin: 4px 0 8px 10px; }
.featrow { padding: 8px 0; border-bottom: 1px solid #ffffff14; overflow-wrap: anywhere; }
.featrow .btns { flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.misrow { padding: 8px 0; border-bottom: 1px solid #ffffff14; overflow-wrap: anywhere; }
.misrow .btns, .misflag, .misdetail .btns { flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.misdetail { padding: 6px 8px; margin-top: 4px; border-left: 2px solid #ffffff22; }
.misdetail ol { margin: 2px 0 2px 1.2em; padding: 0; }
.misreport { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9em; max-height: 40vh; overflow: auto; margin: 4px 0; }
.mistable { border-collapse: collapse; width: 100%; margin: 4px 0; }
.mistable td, .mistable th { padding: 2px 6px; border-bottom: 1px solid #ffffff10; text-align: left; vertical-align: top; }
.prjpic, .uspropic { display: block; max-width: min(100%, 240px); max-height: 160px; border-radius: 8px; margin: 4px 0; cursor: zoom-in; }
.prjtext, .usdraft { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9em; max-height: 30vh; overflow: auto; margin: 4px 0; }
.prjlim, .prjnew { flex-wrap: wrap; align-items: center; gap: 6px; }
.msg.ai.initiative { border-left: 3px solid var(--a-accent); }
.usproj { padding: 8px 0; border-bottom: 1px solid #ffffff14; }
.ushplan { margin: 4px auto 10px; max-width: 520px; }
/* The floor plan (anima/home_plan.py) takes its colours from the theme's own tokens, so it reads in light and dark. */
.ushplan .fp { display: block; width: 100%; height: auto; max-height: 60vh; font-family: system-ui, "Segoe UI", sans-serif; }
.fp-room { fill: color-mix(in srgb, var(--a-text) 6%, transparent); cursor: pointer; }
.fp-room.outdoor { fill: color-mix(in srgb, #5fae6e 14%, transparent); }
.fp-room.here { fill: color-mix(in srgb, var(--a-accent, #f3cf86) 22%, transparent); }
.fp-wall { stroke: var(--a-text); stroke-linecap: square; }
.fp-win { stroke: color-mix(in srgb, #6ab8ff 80%, var(--a-text)); stroke-linecap: butt; }
.fp-door { fill: none; stroke: var(--a-muted); }
.fp-name { fill: var(--a-text); font-weight: 600; text-anchor: middle; pointer-events: none; }
.fp-size { fill: var(--a-muted); text-anchor: middle; pointer-events: none; }
.fp-dot { fill: var(--a-accent, #f3cf86); stroke: var(--a-text); stroke-width: .15; }
.fp-ini { fill: #1b1b1f; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.fp-tread { stroke: var(--a-muted); }
.fp-room.stairs { fill: color-mix(in srgb, var(--a-text) 10%, transparent); }
.ushplan.arranging .fp-g { cursor: grab; touch-action: none; }
.ushplan.arranging .fp-g.dragging { cursor: grabbing; opacity: .85; }
.ushplan.arranging .fp-room { stroke: var(--a-accent, #f3cf86); stroke-width: .25; stroke-dasharray: .8 .5; }
/* the town map (anima/town.py svg): the floor plan's fp-* classes plus these */
.tm .tm-place { stroke: var(--a-text); }
.tm .tm-place.private { fill: color-mix(in srgb, #5fae6e 14%, transparent); }
.tm .tm-place.closed { stroke-dasharray: 1 .8; fill: none; }
.tm-water { fill: color-mix(in srgb, #6ab8ff 22%, transparent); stroke: none; }
.tm-way { stroke: var(--a-muted); stroke-dasharray: 1.2 .8; }
.tm-min { fill: var(--a-muted); text-anchor: middle; pointer-events: none; }
.ushfloors { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.ushform { display: grid; gap: 6px; margin: 6px 0; }
.ushform label { display: grid; gap: 2px; font-size: .85em; color: var(--a-muted); }
.ushrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; }
.ushrow > label { flex: 1 1 90px; }
.ushrow .ushin { margin: 0; }
.ushroom { padding: 8px 0; border-bottom: 1px solid #ffffff14; }
.ushbtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ushadd { margin-top: 10px; }
.ushadd summary { cursor: pointer; }
.ushin { display: block; width: 100%; box-sizing: border-box; margin: 6px 0; font: inherit; padding: 6px 8px;
  border-radius: 8px; border: 1px solid #ffffff33; background: #ffffff0a; color: inherit; }
.usproj details summary { cursor: pointer; margin-top: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 10px; }
#me { margin-left: 4px; }

.animaVersion { position: fixed; z-index: 29; right: 8px; bottom: 2px; font-size: 11px; opacity: .6; pointer-events: none; }
.tray { position: fixed; z-index: 30; bottom: 0; left: 0; right: 0; display: none; gap: 8px; align-items: center; padding: 6px 12px; }
        background: rgba(var(--a-panel-rgb), 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid #ffffff14; }
.tray.has { display: flex; }

/* chat */
.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tokline { display: flex; align-items: center; gap: 8px; padding: 2px 2px 4px; }
.tokline i { display: block; width: 72px; height: 4px; border-radius: 3px; background: #ffffff14; position: relative; flex: none; }
.tokline i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--tok, 0%); background: var(--a-accent); border-radius: 3px; }
.tokline.tight i::after { background: #c16a6a; }
.prompt-knobs { margin-bottom: 8px; }
.kModes.off { opacity: .5; pointer-events: none; }
.msgs { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 4px 6px 0; }
.msg { max-width: 85%; padding: 7px 11px; border-radius: 12px; white-space: pre-wrap; line-height: 1.45; }
.msg.user, .msg.ai:not(.pending) { box-shadow: 0 1px 3px rgba(0, 0, 0, .28); }
.msg.ai .choice { color: var(--a-choice-text, var(--a-bubble-ai-text, var(--a-text))); }
.msg.ai .meta, .msg.ai .muted { color: var(--a-bubble-act, var(--a-muted)); }
.msg.ai .rpline.thought { color: var(--a-thought-in, #cfa7ff); }
.msg.ai .acts .ib { color: var(--a-act, var(--a-bubble-act, var(--a-muted))); }
.msg.ai .acts .ib:hover { color: var(--a-act-hover, var(--a-bubble-ai-text, var(--a-text))); }
.msg.ai .acts .lookbtn.on { color: #b45309; }
.msg.user { align-self: flex-end; background: var(--a-bubble-user, #2c3a63); color: var(--a-bubble-user-text, inherit); }
/* her like/love on his bubble (anima/reactions.py): a small round badge on the bubble's lower left corner */
.msg.user.hearted { position: relative; margin-bottom: 8px; }
.herheart { position: absolute; left: -9px; bottom: -10px; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; font-size: 12px; background: #1d1f27; border: 1px solid #ffffff33;  /* dark disc: reads on any bubble theme */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35); white-space: normal; pointer-events: auto; animation: heart-pop .35s ease-out; }
.herheart.love { color: #ff7a93; }
.herheart.like { color: #f3cf86; }
@keyframes heart-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .herheart { animation: none; } }
.msg.ai { align-self: flex-start; background: var(--a-bubble-ai, #2a2d38); color: var(--a-bubble-ai-text, inherit); }
.msg.user, .msg.ai { font-family: var(--a-bubble-font, inherit); font-size: var(--a-bubble-size, inherit); }
body.phonechat .msg.user, body.phonechat .msg.ai { font-size: inherit; }
.msg.user.thought { background: #2b2538; border: 1px dashed #cfa7ff55; }
.msg.user.thought .tag { font-size: .75em; letter-spacing: .5px; color: #cfa7ff; margin-right: 6px; }
.rpline { white-space: pre-wrap; }
.rpline.action { color: var(--a-bubble-act, var(--a-muted)); font-style: italic; }
.rpline.thought { color: #cfa7ff; font-style: italic; }
.rpline.dialog { color: inherit; }
.rpact { color: var(--a-bubble-act, var(--a-muted)); font-style: italic; }
.memtools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.memtools sl-select { width: 150px; } .memtools sl-input { flex: 1; min-width: 100px; }
.mem { border-bottom: 1px solid var(--a-line, #ffffff14); padding: 6px 0; }
.mem.pending, .mem.conflict { border-left: 3px solid var(--a-accent); padding-left: 6px; }
.mem.forgotten, .mem.replaced, .mem.merged, .mem.done { opacity: .5; }
.memmore { margin: 8px 0; padding: 4px 10px; border: 1px solid var(--a-line, #ffffff30); border-radius: 6px;
  background: none; color: inherit; font: inherit; font-size: .85em; cursor: pointer; }
.acts-row, .toast-acts { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.lrnwhy { margin-top: 4px; padding-left: 8px; border-left: 2px solid var(--a-line, #ffffff14); }
.lrnev { padding: 2px 0; } .lrnev.gone { opacity: .5; }
.memcard, .memcheck { border: 1px solid var(--a-line, #ffffff14); border-radius: 8px; padding: 6px 8px; margin-bottom: 8px; }
.memcard { border-left: 3px solid #9fe3b0; }
.cardline, .askline, .fixline { padding: 4px 0; border-bottom: 1px dashed var(--a-line, #ffffff10); }
.cardline:last-child, .fixline:last-child { border-bottom: 0; }
.askline { border-left: 3px solid var(--a-accent); padding-left: 6px; margin: 4px 0; }
.fixline.undone { opacity: .5; }
.cardhist { margin: 4px 0 0 10px; }
.rtab { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 4px; }
.rtab th { text-align: left; font-weight: 600; color: var(--a-text); position: sticky; top: 0; z-index: 1;
           background: rgb(var(--a-panel-rgb)); }
.rtab td, .rtab th { padding: 2px 4px; border-bottom: 1px solid #ffffff10; vertical-align: top; }
.rtab tr.use td { color: var(--a-text); background: #7c9cff14; }
.rtab tr:not(.use) td { color: var(--a-muted); }
.msg.pending { opacity: .6; }
.msg.ai.pending.thinking { opacity: .9; display: inline-flex; align-items: center; gap: 8px; }
.tdots { display: inline-flex; gap: 4px; }
.tdots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .3; animation: tdot 1.2s infinite ease-in-out; }
.tdots i:nth-child(2) { animation-delay: .2s; }
.tdots i:nth-child(3) { animation-delay: .4s; }
@keyframes tdot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.msg.stopped { opacity: .5; font-style: italic; }
.msg .acts { display: none; gap: 2px; margin-top: 2px; width: fit-content; border-radius: 8px; background: var(--a-act-bg, transparent); }
.msg:hover .acts, .msg:focus-within .acts { display: flex; }
.ib { display: inline-flex; align-items: center; justify-content: center; padding: .5rem; border: 0; border-radius: 4px; background: none;
  font-size: 1em; line-height: 1; color: var(--a-act, var(--a-muted)); cursor: pointer; }
.ib:hover { color: var(--a-act-hover, var(--a-text)); }
.ib:focus-visible { outline: 2px solid var(--sl-color-primary-500, #7c9cff); outline-offset: -2px; }
.msgs > .tw, .msgs > .chathead, .msgs > .chattail { display: contents; }
.msgs.inflight [data-act] { display: none; }
.kw { display: contents; }
.msg .acts .lookbtn.on { color: var(--sl-color-amber-500, #f59e0b); }
.picdel { align-self: center; border: 1px solid currentColor; border-radius: 999px; background: none; color: var(--a-muted);
  font: inherit; font-size: 12px; padding: 2px 10px; cursor: pointer; opacity: .8; }
.picdel:hover, .picdel.sure { opacity: 1; color: #c2410c; }
.picdel:disabled { cursor: default; }
.imgdel { align-self: flex-start; }
.picgone { display: inline-block; margin: 4px 0 6px; padding: 6px 10px; border-radius: 8px; border: 1px dashed currentColor; }
@media (hover: none) { .msg .acts { display: flex; } }
.block[data-act-show="always"] .msg .acts { display: flex; }
.block[data-act-show="never"] .msg .acts { display: none !important; }
.block[data-act-size="small"] .msg .acts .ib { font-size: .85em; }
.block[data-act-size="large"] .msg .acts .ib { font-size: 1.3em; }
.metarow { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin-top: 3px; }
.msg .metarow, .msg .acts, .msg .choices { white-space: normal; }
/* Copy control on bubbles, Duet / Encounter lines and code blocks (lab/copybubble.js): hover on a mouse, always shown on touch. */
.copyhost { position: relative; }
.copybtn { position: absolute; top: 3px; right: 3px; z-index: 3; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: #0000004d; color: inherit; cursor: pointer;
  opacity: 0; transition: opacity .12s; user-select: none; -webkit-user-select: none; white-space: normal; font: 600 12px/1 system-ui, sans-serif; }
.msg:hover > .copybtn, .dLine:hover > .copybtn, .dAnOut:hover > .copybtn, pre:hover > .copybtn, .copybtn:focus-visible, .copybtn.done { opacity: .85; }
.copybtn:hover { opacity: 1; background: #00000080; }
@media (hover: none) { .copybtn { opacity: .55; } }
/* A picture's own X sits at the picture's top right: the copy icon moves to the other corner on those bubbles. */
.copyhost.haspic > .copybtn { right: auto; left: 3px; }
pre > .copybtn.codecopy { top: 4px; right: 4px; }
.metarow:empty { display: none; }
.metarow .meta, .metarow .acts { margin-top: 0; }
.block[data-act-place="corner"] .msg:has(.acts) { position: relative; }
.block[data-choice-size="small"] .choice { font-size: .82em; padding: 4px 10px; }
.block[data-choice-size="large"] .choice { font-size: 1.05em; padding: 8px 16px; }
.block[data-choice-shape="round"] .choice { border-radius: 8px; }
.block[data-choice-shape="square"] .choice { border-radius: 2px; }
.block[data-act-place="corner"] .msg .acts { position: absolute; top: -14px; right: 6px; margin: 0; z-index: 2;
  background: var(--a-act-bg, rgb(var(--a-panel-rgb))); box-shadow: 0 1px 4px #0006; }
.block.acthide-reply .msg .acts [data-reply], .block.acthide-hear .msg .acts [data-say],
.block.acthide-regen .msg .acts [data-act="regen"], .block.acthide-wrong .msg .acts [data-act="wrong"],
.block.acthide-edit .msg .acts [data-act="edit"], .block.acthide-look .msg .acts .lookbtn,
.block.acthide-vote .msg .acts .vote { display: none; }
.msg .acts .vote { display: inline-flex; gap: 0; }
.msg .acts .vbtn { font-size: .9em; }
.msg .acts .vbtn.on { color: var(--sl-color-primary-500, #7c9cff); }
.heldtrust { color: #d89a2b; }
.votetags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; white-space: normal; }
.votetags .vtag { font: inherit; font-size: .78em; padding: 1px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--a-border, #8884); background: transparent; color: var(--a-muted, inherit); }
.votetags .vtag.on { background: var(--sl-color-primary-600, #5868c8); border-color: transparent; color: #fff; }
.votetags .vtag.done { border-style: dashed; }
.votetags .vnote { flex: 1 1 100%; box-sizing: border-box; min-height: 1.9em; resize: vertical; font: inherit; font-size: .85em;
  padding: 3px 8px; border-radius: 8px; border: 1px solid var(--a-border, #8884); background: transparent; color: inherit; }
/* The Professor's panel and SIMPLE (lab/votes.js plain buttons) */
.pphim .vote, .svote { display: flex; gap: 2px; justify-content: flex-end; }
.pphim .vbtn, .svote .vbtn { font: inherit; font-size: .95em; line-height: 1; padding: 3px 6px; border-radius: 8px; cursor: pointer;
  border: 0; background: transparent; opacity: .55; filter: grayscale(1); }
.pphim .vbtn:hover, .svote .vbtn:hover, .pphim .vbtn.on, .svote .vbtn.on { opacity: 1; filter: none; }
.thought { --th: var(--a-thought, var(--a-muted)); align-self: flex-start; max-width: 85%; margin-top: -4px; color: var(--th); font-style: italic;
           font-family: var(--a-bubble-font, inherit); font-size: calc(var(--a-bubble-size, 1em) * var(--a-thought-scale, .9));
           line-height: 1.4; white-space: pre-wrap; }
.thought.under { display: flex; gap: 6px; padding: 3px 10px; margin-left: 6px; border-left: 2px solid color-mix(in srgb, var(--th) 55%, transparent); }
.thought .thicon { font-style: normal; opacity: .8; }
.thought .thwhen { font-size: .85em; opacity: .7; }
.thought.inbub { --th: var(--a-thought-in, var(--a-thought, var(--a-muted))); display: block; max-width: none; margin: 8px 0 0; padding: 4px 0 0 9px;
           border-left: 2px solid color-mix(in srgb, var(--th) 45%, transparent); font-size: calc(1em * var(--a-thought-scale, .9)); }
.thoughtmode { margin-left: auto; display: inline-flex; border: 1px solid #ffffff22; border-radius: 7px; overflow: hidden; }
.rphelp { position: relative; margin-left: auto; }
.rphelp:not([hidden]) + .thoughtmode { margin-left: 0; }
.povmode[hidden], .thoughtmode[hidden] { display: none; }
.povmode:not([hidden]) + .thoughtmode { margin-left: 8px; }
.rpstyle:not([hidden]) + .thoughtmode { margin-left: 8px; }
.rphelp summary { list-style: none; cursor: pointer; width: 1.55em; height: 1.55em; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #ffffff33; color: var(--a-muted); font-size: .8em; font-weight: 600; line-height: 1; }
.rphelp summary::-webkit-details-marker { display: none; }
.rphelp summary:hover, .rphelp[open] summary { color: var(--a-text); border-color: var(--a-accent); }
.rphelpbox { position: absolute; right: 0; bottom: calc(100% + 6px); width: 300px; z-index: 20; padding: 10px 12px; border-radius: 10px;
  background: rgb(var(--a-panel-rgb)); border: 1px solid #ffffff22; box-shadow: 0 8px 24px #0008; font-size: .85em; line-height: 1.45;
  display: grid; gap: 5px; color: var(--a-text); }
.rphelpbox code { background: #ffffff14; padding: 0 4px; border-radius: 4px; }
.thoughtmode button { margin: 0; padding: 3px 9px; border: 0; background: transparent; color: var(--a-muted); font: inherit;
           font-size: .78em; line-height: 1.5; cursor: pointer; white-space: nowrap; }
.thoughtmode .thlead { padding: 3px 4px 3px 9px; color: var(--a-muted); font-size: .78em; line-height: 1.5; white-space: nowrap; }
.thoughtmode button + button { border-left: 1px solid #ffffff22; }
.thoughtmode button:hover { color: var(--a-text); background: #ffffff0d; }
.thoughtmode button.on { background: var(--a-accent); color: #10131b; font-weight: 600; }
.thoughtmode button:focus-visible { outline: 2px solid var(--a-accent); outline-offset: -2px; }
.thoughtmode button.rplight { margin-left: 6px; border-left: 1px dashed #ffffff44; }
.thoughtmode button.rplight.on { background: #e0b44a; }
.thoughtmode button:disabled { opacity: .4; cursor: default; background: transparent; color: var(--a-muted); }
body.phonechat .thought, body.phonechat .thoughtmode { display: none !important; }
.msg.sys { align-self: center; background: transparent; color: var(--a-muted); font-size: .9em; }
.msg.sys.between { max-width: 80%; text-align: center; font-style: italic; white-space: normal;
  border-top: 1px dashed #ffffff22; border-bottom: 1px dashed #ffffff22; border-radius: 0; }
.meta { font-size: .8em; color: var(--a-muted); margin-top: 3px; }
.actflag.tap { cursor: pointer; }
.actflag.tap:hover { text-decoration: underline; }
.actflag.warn { opacity: .8; font-style: italic; }
.bbody.stubody { padding: 0; overflow: hidden; container-type: inline-size; }
.studio { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) minmax(170px, 230px); height: 100%; min-height: 0; }
.studio > * { min-height: 0; overflow: auto; }
.stulist { padding: 8px 6px; border-right: 1px solid #ffffff14; display: flex; flex-direction: column; gap: 2px; }
.stugroup { display: flex; align-items: center; justify-content: space-between; margin: 8px 2px 2px; font-size: .8em; text-transform: uppercase;
            letter-spacing: .04em; color: var(--a-muted); }
.stugroup:first-child { margin-top: 0; }
.sturow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; text-align: left; border: 0; border-radius: 6px; padding: 5px 8px;
          background: transparent; color: var(--a-text); font: inherit; font-size: .92em; cursor: pointer; }
.sturow:hover { background: #ffffff0d; }
.sturow.on { background: #ffffff1a; }
.sturow .muted { flex-basis: 100%; }
.stumyself { padding: 2px 8px; }
.studot { color: var(--a-accent); font-size: .8em; }
.stusearch { margin-top: auto; padding-top: 10px; }
.stumain { padding: 8px 10px; }
.stucard { padding: 8px; border-left: 1px solid #ffffff14; }
.stulib { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 8px; background: #ffffff08; border: 1px solid #ffffff14; }
.stuquote { font-style: italic; }
.stupack { white-space: pre-wrap; font-size: .8em; background: #00000033; padding: 8px; border-radius: 8px; max-height: 320px; overflow: auto; margin: 0; }
.stuwelcome { max-width: 520px; margin: 20px auto; line-height: 1.5; }
.stuform .stubox { display: block; margin: 14px 0 4px; font-size: .92em; }
.stuform .stubox[hidden] { display: none; }
.stuform .stulabel { display: block; margin-bottom: 4px; }
.stuform sl-input, .stuform sl-select, .stuform sl-radio-group { display: block; }
.stuform .stuPicPreset { margin-top: 6px; }
.stuform .scentitle .grow, .stubar .grow { flex: 1; }
.scenform .cnt.over { color: #ffd27f; opacity: 1; }
.scenform .cntnote { display: block; clear: both; color: #ffd27f; font-size: .85em; font-weight: normal; }
.stuchoice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0; }
.stuchoice > span { min-width: 6em; }
.studials { margin: 14px 0 4px; padding: 6px 10px; border-radius: 8px; border: 1px dashed #ffffff22; }
.studials summary { cursor: pointer; font-size: .92em; }
.studials .traits { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 14px; margin-top: 8px; }
.stubar .btns { align-items: center; }
.scMismatch .wrn { color: #ffd27f; }
@container (max-width: 760px) {
  .studio { grid-template-columns: minmax(130px, 170px) minmax(0, 1fr); }
  .stucard { grid-column: 2; border-left: 0; border-top: 1px solid #ffffff14; overflow: visible; }
  .studio { grid-template-rows: minmax(0, 1fr) auto; }
  .stulist { grid-row: 1 / span 2; }
}
@container (max-width: 520px) {
  .studio { display: flex; flex-direction: column; overflow: auto; }
  .studio > * { overflow: visible; }
  .stulist { border-right: 0; border-bottom: 1px solid #ffffff14; }
}
/* Studio paper-white theme: overrides the panel palette inside Studio only. */
.studio {
  --a-text: #2a2420; --a-muted: #857a70; --a-accent: #d6336c;
  --a-panel-rgb: 253, 251, 247; --a-head-rgb: 253, 251, 247;
  --stu-line: #ece4d8; --stu-paper: #fdfbf7; --stu-side: #f6f0e6;
  --stu-pop: linear-gradient(90deg, #d6336c, #f0803c);
  --sl-color-primary-50: #fdf0f4; --sl-color-primary-100: #fbdbe5; --sl-color-primary-200: #f6b6cb;
  --sl-color-primary-300: #ef88a9; --sl-color-primary-400: #e45a88; --sl-color-primary-500: #dc4479;
  --sl-color-primary-600: #d6336c; --sl-color-primary-700: #b4245a; --sl-color-primary-800: #8f1c48; --sl-color-primary-900: #6d1637;
  --sl-input-border-color: #e3d9cb; --sl-input-border-color-hover: #d2c4b2;
  --sl-input-background-color: #fff; --sl-input-placeholder-color: #b5aa9e;
  background: var(--stu-paper); color: var(--a-text);
}
.studio .stulist { background: var(--stu-side); border-color: var(--stu-line); }
.studio .stugroup { color: #a0613f; font-weight: 600; }
.studio .sturow:hover { background: #ffffffb3; }
.studio .sturow.on { background: #fff; box-shadow: inset 3px 0 0 var(--a-accent), 0 1px 3px #6b4a2a1a; font-weight: 600; }
.studio .stucard { border-color: var(--stu-line); background: var(--stu-side); }
.studio .stulib { background: #fff; border: 1px solid var(--stu-line); box-shadow: 0 6px 18px #6b4a2a14;
                  background: var(--stu-pop) top / 100% 4px no-repeat, #fff; padding-top: 14px; }
.studio .stupack { background: #f7f2ea; color: #4a4038; }
.studio .scenhead, .studio .scenbar { border-color: var(--stu-line); }
.studio .scenhead { background: linear-gradient(180deg, #fff, var(--stu-paper)); }
.studio .scenbar { background: #fdfbf7f2; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 -4px 12px #6b4a2a0f; }
.studio .scenform h5 { border-color: var(--stu-line); color: #a0613f; letter-spacing: .02em; opacity: 1; }
.studio .scentabs button.on { border-image: var(--stu-pop) 1; border-image-slice: 0 0 1 0; font-weight: 600; }
.studio .scentabs .tnum { background: #efe6d9; color: #7a6a5c; }
.studio .scentabs button.on .tnum { background: var(--stu-pop); box-shadow: 0 2px 6px #d6336c55; }
.studio .scentabs button.bad::after { background: #e03131; }
.studio sl-textarea::part(base), .studio sl-input::part(base) { box-shadow: 0 1px 2px #6b4a2a0d; }
.studio .scendraft { background: linear-gradient(135deg, #fff4f7, #fff6ee); border-color: #f2c3cf; }
.studio .studials, .studio .scenside { border-color: #e3d4c2; background: #fffdf9; }
.studio .scbad, .studio .scencheck .blk { color: #c92a2a; }
.studio .scenform sl-input.scbad::part(base), .studio .scenform .scbad sl-input::part(base),
.studio .scenform .scbad sl-textarea::part(base) { border-color: #e03131; }
.studio .scencheck .wrn, .studio .scMismatch .wrn, .studio .scenform .cnt.over, .studio .scenform .cntnote { color: #b06a00; }
.studio .studot { color: #f0803c; }
.composer { display: flex; gap: 6px; align-items: flex-end; padding-top: 6px;
            --sl-button-font-size-small: .75rem; --sl-button-font-size-medium: .875rem; --sl-button-font-size-large: var(--a-font); }
.composer sl-textarea { flex: 1; }
body:not(.phonechat) .composer { flex-wrap: wrap; }
body:not(.phonechat) .composer sl-textarea { flex: 1 1 0; min-width: 0; }
body:not(.phonechat) .composer .ctools { order: 3; flex: 1 0 100%; display: flex; gap: 6px; align-items: center;
  justify-content: flex-end; flex-wrap: wrap; }
body.phonechat .composer .ctools { display: contents; }
.composer .composetip { margin-right: auto; display: inline-flex; gap: 4px; font-size: .78rem; white-space: nowrap; }
.composer .composetip .ck { color: var(--a-muted); border: 1px dashed #ffffff26; border-radius: 6px; padding: 1px 7px;
  cursor: help; }
.composer .composetip .ck:hover, .composer .composetip .ck:focus-visible { color: var(--a-text); border-color: var(--a-accent); outline: none; }
.composer .composetip[hidden], body.phonechat .composer .composetip { display: none; }
.msg.user .pdo { font-style: italic; opacity: .85; }
.msg.user .pthink { font-style: italic; opacity: .6; }
.composer sl-textarea::part(base) { background: var(--a-box-bg, var(--sl-input-background-color)); }
.composer sl-button:not([variant="primary"])::part(base) { background: var(--a-btn-bg, var(--sl-color-neutral-0)); }
.composer .send, .composer .talk, .composer .dict, .composer .stopall, .composer .suggestbtn { flex: 0 0 auto; }
.composer .suggestbtn[hidden] { display: none; }
.composer .picstyle { flex: 0 0 auto; align-self: flex-end; margin: 0 0 6px -2px; padding: 2px 8px; border: 1px solid #ffffff22;
           border-radius: 999px; background: transparent; color: var(--a-muted); font: inherit; font-size: .72em; line-height: 1.5;
           cursor: pointer; white-space: nowrap; }
.composer .picstyle:hover { color: var(--a-text); background: #ffffff0d; }
.composer .picstyle.on { background: var(--a-accent); border-color: var(--a-accent); color: #10131b; font-weight: 600; }
.composer .picstyle:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 1px; }
body.phonechat .composer .picstyle { display: none !important; }
.composer .talk.on::part(base), .composer .dict.on::part(base) {
  background: #22a55a; border-color: #22a55a; color: #fff; }
.composer .vmodewrap { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: 4px; padding: 1px 2px 1px 8px;
  border: 1px solid #ffffff22; border-radius: 999px; color: var(--a-muted); font-size: .72em; line-height: 1.5; white-space: nowrap; }
.composer .vmodewrap.on { border-color: #22a55a; color: #22a55a; }
.composer .vmode { border: 0; background: transparent; color: var(--a-text); font: inherit; cursor: pointer; padding: 1px 2px; }
.composer .vmode option { background: #15171e; color: var(--a-text); }
.composer .vmode:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 1px; border-radius: 4px; }
.composer sl-textarea.live::part(textarea) { color: var(--a-muted); font-style: italic; }
.composer .drivebtn { flex: 0 0 auto; }
.composer .drivebtn.on::part(base) { background: #22a55a; border-color: #22a55a; color: #fff; }
body.phonechat .composer .drivebtn { order: 10; flex: 1 0 100%; }
body.phonechat .composer .drivebtn::part(base) { min-height: 48px; font-size: 1.1rem; font-weight: 600; }
.composer .duetbtn { flex: 0 0 auto; }
body.phonechat .composer .duetbtn { order: 12; flex: 1 1 40%; }
body.phonechat .composer .duetbtn::part(base) { min-height: 44px; }
/* Duet: two AIs talk while you watch (docs/duet-spec.md). A card over the Lab; full screen on the phone. */
.duet { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
  background: #0008; }
.duet[hidden] { display: none; }
.duetcard { width: min(720px, 96vw); height: min(80vh, 900px); display: flex; flex-direction: column; gap: 8px;
  background: #151922; color: #e8eaf0; border: 1px solid #ffffff22; border-radius: 12px; padding: 10px 12px; }
.duetcard header { display: flex; align-items: center; gap: 8px; }
.duetcard header .grow { flex: 1; }
.duetcard button { background: #232a38; color: inherit; border: 1px solid #ffffff2a; border-radius: 8px; padding: 4px 10px;
  cursor: pointer; }
.duetcard button:disabled { opacity: .5; cursor: default; }
.duetcard [hidden] { display: none !important; }
/* Analyze: a panel over the duet card (anima/duet_analyze.py). */
.duetcard { position: relative; }
.duet .dAnBtn.hot { background: #2f4a7a; border-color: #8fc7ff88; font-weight: 600; }
.duet .dEndHead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.duet .dEndHead .dAnGo { margin-left: auto; background: #2f4a7a; border-color: #8fc7ff88; font-weight: 600; }
.duet .dAn { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 8px; background: #151922;
  border-radius: inherit; padding: inherit; }
.duet .dAnBody { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.duet .dAnBody label { display: flex; flex-direction: column; gap: 3px; }
.duet .dAnBody select, .duet .dAnBody textarea { background: #0d0f14; color: inherit; border: 1px solid #ffffff2a; border-radius: 6px;
  padding: 6px; font: inherit; max-width: 100%; min-width: 0; }
.duet .dAnBody textarea { resize: vertical; }
.duet .dAnPre { display: flex; flex-wrap: wrap; gap: 6px; }
.duet .dAnPre button { text-align: left; font-size: .9em; }
.duet .dAnRow { display: flex; align-items: center; gap: 10px; }
.duet .dAnRun { background: #2f4a7a; border-color: #8fc7ff88; font-weight: 600; padding: 6px 18px; }
.duet .dAnItem { border-top: 1px solid #ffffff1a; padding-top: 6px; }
.duet .dAnItem > summary { cursor: pointer; overflow-wrap: anywhere; }
.duet .dAnAsk { color: #b8c0d0; margin-top: 2px; }
.duet .dAnOut { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; margin: 6px 0; user-select: text; }
.duet .dAnAct { display: flex; flex-wrap: wrap; gap: 6px; }
.duet .dLines { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
/* A−/A+ in the card's header: the conversation's text size, kept per device (--duet-text, 0.8-1.8). */
.duet .dLines, .duet .dSay textarea { font-size: calc(1em * var(--duet-text, 1)); }
.duet .dTxt { min-width: 2.2em; }
/* A turn someone passed on in a meeting round: a small grey line. */
.duet .dLine.pass { opacity: .7; font-style: italic; }
/* Multi AI Discussions (lab.js dscPaint): the Lab panel and the phone's full-screen list share these. */
.dscbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.dscbar .grow { flex: 1; }
.dscbar .dscq { flex: 1 1 140px; min-width: 0; background: #0d0f14; color: inherit; border: 1px solid #ffffff2a;
  border-radius: 8px; padding: 6px 8px; font: inherit; }
.dscbar button, .dscact button { background: #232a38; color: inherit; border: 1px solid #ffffff2a; border-radius: 8px;
  padding: 4px 10px; font: inherit; cursor: pointer; min-height: 32px; }
.dscact .dscdel { border-color: #ff8a8a66; }
.dscrow { border-top: 1px solid #ffffff1a; padding: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.dscact { display: flex; flex-wrap: wrap; gap: 6px; }
.dschead { overflow-wrap: anywhere; }
.dscchips { display: flex; flex-wrap: wrap; gap: 4px; }
.dscchip { border: 1px solid var(--dsc); color: var(--dsc); border-radius: 999px; padding: 0 8px; font-size: .85em; }
.dscprops code, .dscrow code { font-size: .9em; }
.dscLines { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; font-size: calc(1em * var(--duet-text, 1));
  user-select: text; }
.dscLines .dLine { line-height: 1.4; overflow-wrap: anywhere; }
.dscLines .dLine b { margin-right: 6px; }
.dscLines .dLine small { display: block; margin-top: 2px; }
.dscLines .dLine[data-s="user"] { padding-left: 10px; border-left: 2px solid #9be39b66; }
.dscLines .dLine.whisper { opacity: .6; border-left-style: dashed; }
.dscLines .dLine.pass { opacity: .7; font-style: italic; }
.dscLines .dLine[data-k="architect"] { background: #0e2f30; border: 1px solid #5fe0d266; border-radius: 10px;
  padding: 8px 10px; white-space: pre-wrap; }
#dscOverlay .dscbody { flex: 1; min-height: 0; overflow-y: auto; }
.duet .dLine { line-height: 1.4; }
.duet .dLine b { margin-right: 6px; }
.duet .dLine[data-s="user"] { padding-left: 10px; border-left: 2px solid #9be39b66; }
.duet .dLine small { display: block; margin-top: 2px; }
.duet .dSay { display: flex; gap: 6px; }
.duet .dSay textarea { flex: 1; resize: vertical; background: #0d0f14; color: inherit; border: 1px solid #ffffff2a;
  border-radius: 8px; padding: 6px; font: inherit; }
.duet .dLine.whisper { opacity: .6; border-left-style: dashed; }
.msg.user.whisper { opacity: .75; border-style: dashed; }
/* The Architect (anima/architect_ai.py): its own teal box, easy to tell from the characters and Grandmother. */
.duet .dLine[data-k="architect"] { background: #0e2f30; border: 1px solid #5fe0d266; border-radius: 10px; padding: 8px 10px;
  white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.duet .dLine[data-k="architect"] b::before { content: "⚙ "; }
.duetform .dArch { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid #5fe0d255; border-radius: 8px; }
.duetform .dArch[hidden] { display: none; }
/* Add AI's tick list: any two of his characters, Grandmother and the Architect; big enough to tap on a phone. */
.duetform .dPick { display: flex; flex-direction: column; gap: 2px; max-height: 40vh; overflow-y: auto; }
.duetform .dPick label.dTick { display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 36px; }
.duetform .dPick input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; }
.duetform [hidden] { display: none !important; }
.duetform .dArchNotes textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.duetform .dArchPc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0; }
.duetform .dPcDot { width: 10px; height: 10px; border-radius: 50%; background: var(--sl-color-neutral-400, #999); flex: none; }
.duetform .dPcDot.on { background: var(--sl-color-success-600, #16a34a); }
.duetform .dPcDot.off { background: var(--sl-color-warning-600, #d97706); }
.duetform .dPcSteps { flex-basis: 100%; }
.duetform .dPcSteps ol { margin: 4px 0 0 18px; padding: 0; }
.duetform .dPcCmd { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.duetform .dPcCmd code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; padding: 4px 6px; border-radius: 4px; background: var(--sl-color-neutral-100, #f1f1f1); }
.duet .dLine[data-k="architect"] .dVia { color: #5fe0d2; }
.duet .dCtl { display: flex; flex-direction: column; gap: 6px; }
.duet .dSay select, .duet .dCapIn { background: #0d0f14; color: inherit; border: 1px solid #ffffff2a; border-radius: 8px;
  padding: 4px 6px; font: inherit; }
.duet .dSay select { max-width: 11em; }
.duet .dCapIn { width: 5.5em; }
.duet .dMore { display: flex; flex-wrap: wrap; gap: 6px; }
.duet .dEnd { border-top: 1px solid #ffffff1a; padding-top: 8px; display: flex; flex-direction: column; gap: 4px;
  flex: 0 1 auto; min-height: 0; max-height: 40%; overflow-y: auto; }
.duet .dKeep { display: flex; flex-wrap: wrap; gap: 6px; }
/* Grandmother's findings on a run: folded under the lines, never squeezing them below a few lines. */
.duet .dFindings { flex: 0 1 auto; min-height: 0; max-height: 35%; overflow-y: auto; border-top: 1px solid #ffffff1a;
  padding-top: 6px; overflow-wrap: anywhere; }
.duet .dFindings[open] { flex-shrink: 0; }
.duet .dFindings > summary { cursor: pointer; font-weight: 600; min-height: 28px; }
.duet .dFindings p { margin: 4px 0; }
.duet .dFindings .gmPart { margin: 3px 0; }
.duet .dFindings ul { margin: 2px 0 2px 1.2em; padding: 0; }
.duetform .dGm { display: flex; flex-direction: column; gap: 10px; }
.duetform .dGm[hidden] { display: none; }
.duetform select { max-width: 100%; min-width: 0; }
.duetform .dPre { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; margin: 6px 0; }
.duetform .dPre > span { grid-column: 2; overflow-wrap: anywhere; }
.duetform .dPre button { grid-row: 1 / 3; background: #232a38; color: inherit; border: 1px solid #ffffff2a; border-radius: 8px;
  padding: 2px 10px; cursor: pointer; }
.duetform .dPre .dPreDel { grid-column: 3; }
.duetform .dCan { margin-left: 6px; font-weight: 600; }
.duetform { display: flex; flex-direction: column; gap: 10px; }
.duetform label { display: flex; flex-direction: column; gap: 3px; }
.duetform fieldset { border: 1px solid #ffffff22; border-radius: 8px; }
.duetform fieldset label { flex-direction: row; gap: 6px; align-items: center; }
.duetform select, .duetform input:not([type=radio]), .duetform textarea { background: #0d0f14; color: inherit;
  border: 1px solid #ffffff2a; border-radius: 6px; padding: 5px; font: inherit; }
.duetform .dRow { display: flex; gap: 12px; }
body.phonechat .duetcard { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom))
  max(12px, env(safe-area-inset-left)); }
/* The user screen on a computer is phonechat too: there the card stays a card over the three columns. */
body.phonechat.us-wide .duetcard { width: min(760px, 92vw); height: min(86vh, 900px); border-radius: 12px; padding: 10px 12px; }
body.phonechat .duet header { flex-wrap: wrap; }
body.phonechat .duet header button { min-height: 44px; min-width: 44px; }
body.phonechat:not(.us-wide) .duetform .dPast > div { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px;
  padding: 2px 0 8px; border-bottom: 1px solid #ffffff12; }
body.phonechat:not(.us-wide) .duetform .dPast > div > span { order: 3; flex: 1 0 100%; }
body.phonechat:not(.us-wide) .duetform .dPast a { display: inline-flex; align-items: center; min-height: 44px; }
body.phonechat:not(.us-wide) .duetform .dPast .dCan { margin-left: auto; padding: 0 14px; border: 1px solid #ffffff2a; border-radius: 8px;
  background: #232a38; text-decoration: none; }
body.phonechat .duet .dKeep button, body.phonechat .duet .dSay button, body.phonechat .duet .dMore button,
body.phonechat .duet .dSay select, body.phonechat .duet .dRaise, body.phonechat .duetform .dPre button { min-height: 44px; }
body.phonechat .duetform .dPre .dPreDel { min-width: 44px; }
body.phonechat .duet .dSay { flex-wrap: wrap; }
body.phonechat .duet .dSay textarea { flex: 1 0 100%; }
body.phonechat .duet .dSay select { flex: 1; }
body.phonechat .duet .dMore button { flex: 1 0 auto; }
body.phonechat .duet .dAn button, body.phonechat .duet .dAnBody select, body.phonechat .duet .dEndHead .dAnGo { min-height: 44px; }
body.phonechat .duet .dAn header button { min-width: 44px; }
body.phonechat .duet .dAnPre button { flex: 1 1 100%; }
body.phonechat .duet .dAnRun { flex: 1 0 auto; }
body.phonechat .duet .dAnAct button { flex: 1 1 0; }
body.phonechat:not(.us-wide) .duet .dEndHead .dAnGo { flex: 1 0 100%; margin-left: 0; }
body.phonechat:not(.us-wide) .duet .duetcard:has(.dEnd:not([hidden]) .dAnGo) header .dAnBtn { display: none; }
body.phonechat .duet .dFindings > summary { min-height: 44px; display: flex; align-items: center; }
body.phonechat .duet .dFindings[open] { max-height: 34%; }
body.phonechat .duet .dFindings[open] ~ .dEnd { max-height: 22%; }
.duet .dLines { min-height: 96px; }
/* Normal / Work switch: two halves of one pill; the lit half is the current mode. */
.composer .workmode { flex: 0 0 auto; display: inline-flex; align-items: stretch; align-self: center; border: 1px solid #ffffff2a;
  border-radius: 999px; overflow: hidden; font-size: .85em; }
.composer .workmode[hidden] { display: none; }
.composer .workmode .wmlabel { display: flex; align-items: center; padding: 0 6px 0 12px; color: var(--a-muted); }
.composer .workmode button { min-height: 34px; padding: 0 12px; border: 0; background: transparent; color: var(--a-muted);
  font: inherit; cursor: pointer; }
.composer .workmode button.sel { background: var(--a-accent); color: #10131b; font-weight: 600; }
.composer .workmode.on button.sel { background: #d98a1c; color: #10131b; }
.composer .workmode button:disabled { cursor: default; opacity: .6; }
.composer .workmode button:focus-visible { outline: 2px solid var(--a-accent); outline-offset: -2px; }
body.phonechat .composer .workmode { order: 11; flex: 1 0 100%; font-size: 1.1rem; }
body.phonechat .composer .workmode button { flex: 1 1 0; min-height: 48px; }
/* Drive mode: glanceable from the driver's seat. Dark, one huge word, the whole screen is the pause button. */
.drive { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3vh; padding: 4vh 4vw; background: var(--a-drive-bg, #05070b); color: var(--a-drive-text, #e8ecf2);
  text-align: center; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.drive .dstate { font-size: clamp(56px, 18vw, 200px); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.drive .dsub { font-size: clamp(20px, 5vw, 40px); opacity: .8; min-height: 1.2em; }
.drive .dvoice { font-size: clamp(13px, 2.8vw, 18px); opacity: .5; max-width: 40em; }
.drive .dend { position: absolute; left: 4vw; right: 4vw; bottom: max(3vh, env(safe-area-inset-bottom)); min-height: 64px;
  border: 1px solid #ffffff30; border-radius: 16px; background: #ffffff10; color: inherit; font: inherit; font-size: 1.25rem; cursor: pointer; }
.drive[data-state="listening"] .dstate { color: #3ddc84; }
.drive[data-state="thinking"] .dstate { color: #f5b942; }
.drive[data-state="speaking"] .dstate { color: #5aa9ff; }
.drive[data-state="paused"] .dstate, .drive[data-state="starting"] .dstate { color: #8a93a3; }
/* SIMPLE mode: her picture behind, her latest reply as big as fits, four controls. */
.composer .simplebtn { flex: 0 0 auto; }
body.phonechat .composer .simplebtn { order: 10; flex: 1 0 100%; }
body.phonechat .composer .simplebtn::part(base) { min-height: 48px; font-size: 1.1rem; font-weight: 600; }
/* Lab on a phone: Drive and SIMPLE share a row, Mode and Add AI the next, so the chat keeps its height on a short screen. */
body.phonechat:not(.userscreen) .composer :is(.drivebtn, .simplebtn, .workmode, .duetbtn) { flex: 1 1 0; min-width: max-content; }
body.smode-on { overflow: hidden; --sl-z-index-dialog: 99500; --sl-z-index-drawer: 99500; --sl-z-index-toast: 99600; }
/* What opens over the chat (the Professor's windows and panel, a picture, the account) opens over SIMPLE too. */
body.smode-on :is(.screen, .pp, .phonepic) { z-index: 99500; }
/* The panels under SIMPLE are covered: no layout or paint for them while it is open. */
body.smode-on #grid { content-visibility: hidden; }
.smode { position: fixed; inset: 0; z-index: 99000; display: flex; flex-direction: column; gap: 1.5vh;
  padding: max(2vh, env(safe-area-inset-top)) 3vw max(2vh, env(safe-area-inset-bottom)); color: #fff;
  background: linear-gradient(#000a, #0006 30%, #000c), var(--s-bg, none) center 20% / cover no-repeat, #05070b;
  font-family: system-ui, sans-serif; }
.smode button { font: inherit; color: inherit; cursor: pointer; border-radius: 18px; border: 2px solid #ffffff55;
  background: #0009; -webkit-tap-highlight-color: transparent; }
.smode button:disabled { opacity: .45; cursor: default; }
.smode .sexit { position: absolute; top: max(1.5vh, env(safe-area-inset-top)); right: 3vw; padding: 8px 14px;
  font-size: 15px; border-width: 1px; border-radius: 12px; }
.smode .swho { font-size: clamp(22px, 5vw, 40px); font-weight: 700; text-shadow: 0 2px 8px #000; padding-right: 9em; }
.smode .sbox { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2vh 3vw; border-radius: 22px; background: #000a; }
.smode .stext { font-weight: 600; line-height: 1.22; white-space: pre-wrap; overflow-wrap: anywhere; text-shadow: 0 2px 6px #000; }
.smode .svote { flex: none; margin-top: -1vh; }
.smode .svote:empty { display: none; }
.smode .svote .vbtn { font-size: clamp(26px, 6vw, 44px); padding: 2px 14px; }
.smode .sstate { min-height: 1.2em; font-size: clamp(24px, 6vw, 52px); font-weight: 800; text-align: center; color: #cfd6e2; }
.smode[data-state="listening"] .sstate { color: #3ddc84; }
.smode[data-state="thinking"] .sstate { color: #f5b942; }
.smode[data-state="speaking"] .sstate { color: #5aa9ff; }
.smode .sctl { flex: none; display: flex; flex-direction: column; gap: 1.2vh; }
.smode .stype { display: flex; gap: 10px; }
.smode textarea { flex: 1 1 auto; min-width: 0; min-height: 64px; max-height: 22vh; padding: 12px 16px; resize: none;
  font: 600 clamp(22px, 5vw, 34px)/1.25 system-ui, sans-serif; color: #fff; background: #000b; border: 2px solid #ffffff55;
  border-radius: 18px; }
.smode .ssend { flex: none; min-width: 6.5em; font-size: clamp(22px, 5vw, 34px); font-weight: 700; background: #2a6df4; border-color: #2a6df4; }
.smode .sbtns { display: flex; gap: 10px; }
.smode .sbtns button { flex: 1 1 0; min-height: clamp(72px, 11vh, 120px); font-size: clamp(26px, 6.5vw, 48px); font-weight: 800; }
.smode .stalk.on { background: #22a55a; border-color: #22a55a; }
.smode .sstop { flex: 0 1 40% !important; background: #b3261e; border-color: #b3261e; }
.vpanel label { display: block; margin: 8px 0 4px; font-size: 0.85em; }
.vpanel sl-select, .vpanel sl-input { display: block; margin-top: 4px; }
.vpanel sl-checkbox { display: flex; margin: 6px 0; }
.colorrow { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
.colorrow .clabel { min-width: 9.5em; font-size: 0.85em; }
.colorrow sl-input { width: 7.6em; }
.colorrow .hint { flex: 1 1 100%; margin: 0 0 4px 0; }
.psWarn { color: #e6c07a; font-size: 0.85em; margin: 4px 0 10px; }
.pslist { display: flex; flex-direction: column; gap: 8px; }
.pssec::part(base) { background: #ffffff06; border: 1px solid #ffffff14; border-radius: 8px; }
.pssec[open]::part(base) { border-color: color-mix(in srgb, var(--a-accent) 45%, transparent); }
.pssec::part(header) { padding: 9px 12px; }
.pssec::part(content) { padding: 2px 14px 12px; }
.pssum { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: center; }
.psnum { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
         font-size: .78em; font-weight: 700; background: color-mix(in srgb, var(--a-accent) 30%, transparent); color: var(--a-text); }
.pstitle { font-weight: 600; letter-spacing: .02em; }
.pshint { font-size: .8em; color: var(--a-muted); }
.pssub { margin: 12px 0 4px; font-size: .72em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--a-muted);
         border-bottom: 1px solid #ffffff12; padding-bottom: 3px; }
.pssub:first-child { margin-top: 4px; }
.pssec sl-radio-group, .pssec sl-range, .pssec label, .pssec sl-checkbox { display: block; margin: 6px 0; }
.psContrast { color: #ffb070; font-size: 0.85em; margin: 2px 0 10px; padding: 6px 8px; border-radius: 6px;
              background: #ff8a3d1f; border-left: 3px solid #ff8a3d; }
.psContrast[hidden] { display: none; }
.psSaveBar { display: flex; gap: 8px; flex-wrap: wrap; }
.psSaveBar sl-button[disabled] { opacity: .4; }
.vtest { display: flex; gap: 6px; align-items: flex-end; }
.vtest sl-input { flex: 1; }
.vblend { display: grid; grid-template-columns: 1fr 130px; gap: 8px; align-items: center; margin: 4px 0; }
.vblends.off { opacity: 0.45; }
.vword { display: grid; grid-template-columns: 1fr 7.5em 1fr auto; gap: 6px; align-items: center; margin: 4px 0; }
.vkOnly.off, .vcOnly.off { display: none; }
.composer .send.processing {
  --sl-color-primary-600: #c16a6a;
  --sl-color-primary-500: #c16a6a;
}
.composer .send.processing::part(base) {
  background: #c16a6a;
  border-color: #b25e5e;
  color: #fff;
}
.composer .send.processing sl-icon { font-size: 0.72em; animation: send-pulse 1.15s ease-in-out infinite; }
@keyframes send-pulse { 50% { opacity: 0.55; } }
.opts { display: flex; gap: 10px; align-items: center; padding-top: 4px; flex-wrap: wrap; }

/* state */
.row { display: grid; grid-template-columns: 105px 1fr 42px; gap: 6px; align-items: center; margin: 2px 0; }
.bar { height: 7px; background: #ffffff14; border-radius: 4px; overflow: hidden; position: relative; }
.bar > i { position: absolute; inset: 0 auto 0 0; background: var(--a-accent); border-radius: 4px;
           transition: width .45s ease; }
.bar.neg > i { background: #ff8a7a; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tip { cursor: help; border-bottom: 1px dotted var(--a-muted); }
.flash { animation: flash 1.2s ease; }
@keyframes flash { 0% { color: #fff; text-shadow: 0 0 8px var(--a-accent); } 100% { text-shadow: none; } }
h4 { margin: 8px 0 4px; font-size: .85em; text-transform: uppercase; letter-spacing: .6px; color: var(--a-muted); }
.rs { font-size: 1.6em; font-weight: 600; }

/* stream */
.chunk { margin: 0 0 10px; padding: 4px 6px 6px 8px; border-radius: 8px;
  border-left: 3px solid rgba(255, 255, 255, 0.22); background: rgba(0, 0, 0, 0.2); }
.chunk.band { border-left-color: var(--a-accent, #7c9cff); background: rgba(255, 255, 255, 0.08); }
.bbody[data-band="strong"] .chunk.band { background: rgba(255, 255, 255, 0.14); border-left-color: color-mix(in srgb, var(--a-accent, #7c9cff) 80%, white 20%); }
.line { border-left: 3px solid #ffffff22; padding: 2px 8px; margin: 2px 0; animation: slide .35s ease; }
.line.inner_voice { border-color: var(--a-accent); }
.line.bad { border-color: #ff8a7a; }
.line pre { white-space: pre-wrap; margin: 2px 0 0; font: inherit; color: var(--a-muted); max-height: 9em; overflow: auto; }
@keyframes slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.layer { margin: 6px 0; padding: 4px 0 6px; border-bottom: 1px solid #ffffff0c; animation: slide .35s ease; }
.layer pre { white-space: pre-wrap; font: inherit; margin: 4px 0 0; max-height: 14em; overflow: auto; }
.layer textarea { width: 100%; min-height: 9em; margin-top: 6px; padding: 8px; border-radius: 8px;
  border: 1px solid #ffffff22; background: #00000033; color: var(--a-text); font: inherit; resize: vertical; }
.layer.planned { opacity: .5; }
pre.brief { white-space: pre-wrap; font: inherit; margin: 0; }
.tl { display: flex; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px solid #ffffff0c; }
.tl .k { width: 70px; color: var(--a-muted); }
.tl .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; }

/* viewer */
.viewer { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.viewer .vwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px 1fr; gap: 10px; }
.viewer .vleft, .viewer .vright { min-height: 0; overflow: auto; padding-right: 4px; }
.viewer .vchars { display: flex; flex-direction: column; gap: 2px; }
.viewer .vhead { display: flex; gap: 8px; align-items: center; }
.viewer .vforks { margin-top: 6px; }
@media (max-width: 900px) { .viewer .vwrap { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.scencards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.scencard { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 8px; background: #ffffff08; border: 1px solid #ffffff14; }
.scencard .btns { margin-top: auto; }
.scenrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.scenform .cnt { float: right; opacity: .6; font-size: .85em; font-weight: normal; }
.scenform { max-width: 900px; }
.scenform sl-textarea { display: block; margin-top: 4px; }
.scenform sl-textarea::part(textarea) { line-height: 1.5; }
.scenform label { font-size: .92em; margin: 12px 0 4px; }
.scenform h5 { margin: 18px 0 2px; font-size: .95em; opacity: .9; border-bottom: 1px solid #ffffff14; padding-bottom: 3px; }
.scenhead { position: sticky; top: -8px; z-index: 4; margin: -8px -10px 6px; padding: 8px 10px 0;
            background: rgb(var(--a-head-rgb, var(--a-panel-rgb))); border-bottom: 1px solid #ffffff14; }
.scentitle { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.scentabs { display: flex; flex-wrap: wrap; gap: 2px; }
.scentabs button { position: relative; border: 0; background: transparent; color: var(--a-muted); font: inherit; font-size: .92em;
                   padding: 6px 12px 8px; cursor: pointer; border-bottom: 2px solid transparent; }
.scentabs button:hover { color: var(--a-text); }
.scentabs button.on { color: var(--a-text); border-bottom-color: var(--a-accent); }
.scentabs .tnum { display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; margin-right: 6px; border-radius: 50%;
                  background: #ffffff14; font-size: .8em; }
.scentabs button.on .tnum { background: var(--a-accent); color: #fff; }
.scentabs button.bad::after { content: ""; position: absolute; top: 5px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #ff8a7a; }
.scnot { vertical-align: -2px; margin-left: 3px; opacity: .55; cursor: help; }
.scnot:hover { opacity: 1; color: var(--a-accent); }
.scintro { margin: 4px 0 6px; color: var(--a-muted); font-size: .9em; }
.scbeats { display: block; width: 100%; min-height: 360px; border: 0; background: transparent; }
.scboard { display: block; width: 100%; height: max(520px, 74vh); border: 1px solid var(--sl-color-neutral-200, #d9dde5);
           border-radius: 10px; background: transparent; }
#saveLight { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 10000; pointer-events: none;
             padding: 6px 14px; border-radius: 6px; font-size: 13px; transition: opacity .3s; opacity: 0; max-width: min(900px, 90vw); text-align: center; }
#saveLight.ok { background: #173d2a; border: 1px solid #2f7a52; color: #cdeedb; }
#saveLight.bad { background: #4a1c1c; border: 1px solid #a33; color: #f3d0d0; }
.scendraft { padding: 8px 10px; border-radius: 8px; background: #ffffff0a; border: 1px dashed #ffffff22; margin-bottom: 6px; }
.scendraft label { margin-top: 0; }
.scendraft sl-button { margin-top: 6px; }
.screplies { display: grid; gap: 4px; }
.scnext { justify-content: flex-end; margin: 14px 0 6px; }
.scenbar { position: sticky; bottom: -8px; z-index: 4; margin: 10px -10px -8px; padding: 6px 10px 8px;
           background: rgb(var(--a-head-rgb, var(--a-panel-rgb))); border-top: 1px solid #ffffff14; }
.scenbar .btns { margin: 0; }
.scencheck { max-height: 7.5em; overflow: auto; }
.scencheck:not(:empty) { margin-bottom: 6px; }
.scenside { margin: 6px 0; padding: 6px; border-radius: 6px; border: 1px dashed #ffffff1f; }
.scencheck { margin: 6px 0; font-size: .9em; }
.scencheck .blk { color: #ffab9f; }
.scencheck .wrn { color: #ffd27f; }
.scenform .scbad { color: #ffab9f; }
.scenform sl-input.scbad::part(base), .scenform .scbad sl-input::part(base), .scenform .scbad sl-textarea::part(base) { border-color: #ffab9f; }
.scenebar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; padding: 5px 8px; border-radius: 8px; background: #ffffff0d; font-size: .9em; }
.scenebar .sbhint { color: #9fe3b0; }
.scenebar .scenend { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; }
.scenebar .sekeep { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 4px 22px; }
.scenebar .sekeep .scenrow { display: flex; align-items: center; gap: 6px; }
.scenebar .sekeep sl-input { flex: 1; }
.scenebar .sekeep .wrn { color: #ffd27f; }
.scenform .scband { min-width: 60px; }
.scenform sl-input[data-pturn] { width: 90px; }

/* MarketFlow panels (PC only) */
.bbody.mfbody { padding: 0; overflow: hidden; position: relative; }
.mfretry { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px;
  text-align: center; background: rgba(2, 6, 23, .82); color: #cbd5e1; pointer-events: none; }
/* Iframes don't inherit font size; Chromium's zoom on the frame acts as page zoom inside it and keeps it filling the panel. */
.mfframe { display: block; width: 100%; height: 100%; border: 0; background: #020617; zoom: var(--a-fontScale, 1); }
.mfhint { padding: 10px 12px; line-height: 1.5; }
.mfbig { position: fixed; z-index: 800; display: flex; flex-direction: column; background: #020617;
         border: 1px solid #ffffff22; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px #000000aa; }
.mfbig[hidden] { display: none; }
.mfbig.max { border-radius: 0; border: 0; }
.mfbig.moving .mfbigframe { pointer-events: none; }
.mfbighead { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; background: #0f172a;
             border-bottom: 1px solid #ffffff14; cursor: move; user-select: none; }
.mfbig.max .mfbighead { cursor: default; }
.mfbigtitle { font-size: 12px; font-weight: 600; color: #cbd5e1; }
.mfbigsym { width: 110px; height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid #334155; background: #020617;
            color: #e2e8f0; font: 12px ui-monospace, monospace; text-transform: uppercase; }
.mfbigsym:focus { outline: none; border-color: #22d3ee; }
.mfsym { width: 72px; height: 22px; padding: 0 6px; margin-right: 4px; border-radius: 6px; border: 1px solid #334155;
         background: #020617; color: #e2e8f0; font: 11px ui-monospace, monospace; text-transform: uppercase; }
.mfsym:focus { outline: none; border-color: #22d3ee; }
.mfbiggrow { flex: 1; }
.mfbighead button { width: 26px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer; font-size: 14px; }
.mfbighead button:hover { background: #1e293b; color: #e2e8f0; }
.mfbigframe { flex: 1; min-height: 0; width: 100%; border: 0; background: #020617; }
.mfbigrs { position: absolute; z-index: 2; }
.mfbig.max .mfbigrs { display: none; }
.mfbigrs[data-d="n"], .mfbigrs[data-d="s"] { left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.mfbigrs[data-d="e"], .mfbigrs[data-d="w"] { top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.mfbigrs[data-d="n"] { top: 0; } .mfbigrs[data-d="s"] { bottom: 0; }
.mfbigrs[data-d="e"] { right: 0; } .mfbigrs[data-d="w"] { left: 0; }
.mfbigrs[data-d="ne"], .mfbigrs[data-d="nw"], .mfbigrs[data-d="se"], .mfbigrs[data-d="sw"] { width: 12px; height: 12px; }
.mfbigrs[data-d="ne"] { top: 0; right: 0; cursor: nesw-resize; } .mfbigrs[data-d="sw"] { bottom: 0; left: 0; cursor: nesw-resize; }
.mfbigrs[data-d="nw"] { top: 0; left: 0; cursor: nwse-resize; } .mfbigrs[data-d="se"] { bottom: 0; right: 0; cursor: nwse-resize; }

.connrow { align-items: center; }
.connrow sl-input { width: 8em; }
.conntable { border-collapse: collapse; width: 100%; font-size: 0.85em; }
.conntable th { text-align: left; color: var(--a-muted); font-weight: 500; }
.conntable td, .conntable th { padding: 2px 8px 2px 0; vertical-align: top; }
.conntable tr.connbad td { color: #f87171; }
.connswitch { display: flex; gap: 10px; align-items: baseline; margin: 4px 0; }
.connswitch sl-switch { flex: 0 0 6.5em; }
.conntable td.connurl { max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connrow .fUrl { flex: 1 1 16em; width: auto; }

@media (max-width: 700px) {
  .grid, .grid.free { display: grid; position: static; min-height: 0;
        grid-template-columns: 1fr; grid-auto-rows: auto; }
  .grid.free .block { position: static; width: auto !important; height: auto !important; left: auto !important; top: auto !important; }
  .block { grid-column: auto; grid-row: auto; min-height: 120px; max-height: 70vh; }
  .block[data-id="chat"] { min-height: 60vh; }
  .topbar sl-select { width: 150px; }
  .topbar > * { flex-shrink: 0; }
}

/* Our Connection: words and glow only, no meters. --c is the dimension's colour; data-glow 0..4 sets the strength. */
.conn { display: flex; flex-direction: column; gap: 10px; }
.connhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conngrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 6px; }
.conndim { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 82px; text-align: center; }
.conndim b { font-size: .92em; font-weight: 600; }
.connicon { --g: 0; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  color: var(--c); border: 1.5px solid color-mix(in srgb, var(--c) calc(30% + var(--g) * 15%), transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) calc(6% + var(--g) * 6%), transparent) 0 60%, transparent 72%);
  box-shadow: 0 0 calc(2px + var(--g) * 5px) calc(var(--g) * 1px) color-mix(in srgb, var(--c) calc(10% + var(--g) * 14%), transparent),
              inset 0 0 calc(var(--g) * 4px) color-mix(in srgb, var(--c) calc(var(--g) * 10%), transparent);
  transition: box-shadow .8s ease, border-color .8s ease; }
.connicon svg { width: 58%; height: 58%; filter: drop-shadow(0 0 calc(var(--g) * 2px) var(--c)); opacity: calc(.6 + var(--g) * .1); }
.connicon[data-glow="1"] { --g: 1; } .connicon[data-glow="2"] { --g: 2; }
.connicon[data-glow="3"] { --g: 3; } .connicon[data-glow="4"] { --g: 4; }
.connicon.dip { border-style: dashed; }
.connicon.pulse { animation: connPulse 1.8s ease-out 2; }
@keyframes connPulse {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.08); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) { .connicon.pulse { animation: none; filter: brightness(1.25); } }
.connword { font-size: .8em; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  color: color-mix(in srgb, var(--c) 75%, #fff); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 10%, transparent); }
.conndim.dip .connword { border-style: dashed; color: color-mix(in srgb, var(--c) 45%, #ccc); }
.conncloser { padding: 8px 10px; border-radius: 10px; line-height: 1.4;
  border: 1px solid #f3bd4f59; background: #f3bd4f12; }
/* Without color-mix() (Safari before 16.2) a rule mixing var(--c) computes to nothing, so these give the same look
   from --c directly: the colour itself for lines and words, a soft glow growing with --g. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .connicon { border-color: var(--c); background: none; opacity: calc(.7 + var(--g) * .075);
    box-shadow: 0 0 calc(2px + var(--g) * 5px) calc(var(--g) * 1px) var(--c); }
  .connword, .conndim.dip .connword { color: var(--c); border-color: var(--c); background: none; }
}
.conncloser b, .conncard b { color: #f3cf86; font-weight: 600; }
.connabout { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.connabout .connicon { flex: none; width: 36px; height: 36px; }
.connnote { margin-top: 12px; padding-top: 10px; border-top: 1px solid #ffffff1a; opacity: .85; }
.connstrip, .conncard { flex: none; }
.connstrip[hidden], .conncard[hidden] { display: none; }
.connstrip { display: flex; align-items: center; gap: 4px; padding: 6px 4px 4px; margin-bottom: 4px; border-bottom: 1px solid #ffffff12; }
.connstrip .connrow { flex: 1; display: flex; justify-content: space-between; gap: 2px; cursor: pointer; min-width: 0; }
.connstrip .conndim { width: auto; flex: 1 1 0; min-width: 0; gap: 2px; }
.connstrip .conndim b { font-size: .72em; }
.connstrip .connword { font-size: .66em; padding: 0 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.connstrip .connicon { width: 34px; height: 34px; }
.connstrip button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.connstrip .connInsight { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .66em; opacity: .7; padding: 0 2px; }
.connstrip.folded { padding: 2px 4px; }
.connstrip .connfold { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .8em; opacity: .85; }
.connmini { display: inline-flex; gap: 3px; }
.connmini .connicon { width: 18px; height: 18px; border-width: 1px; }
.conncard { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0; padding: 8px 8px 8px 12px; border-radius: 12px;
  line-height: 1.35; border: 1px solid #f3bd4f66; background: #28251fd1; }
.conncard > div { flex: 1; }
.conncard .cnx { flex: none; border: 0; background: transparent; color: inherit; font: inherit; font-size: 1.15em; line-height: 1;
  cursor: pointer; opacity: .8; padding: 0 4px; }
body:not(.phonechat) .connstrip, body:not(.phonechat) .conncard { display: none !important; }

/* The Pulse panel (lab.js renderPulse): her orb and mood word grow and shrink with the panel (container units of
   .ppulse). Here, before the user screen's rules, which keep container units behind @supports. */
.block[data-id="pulse"] > .bbody { display: flex; padding: 4px; overflow: hidden; }
.ppulse { flex: 1; min-height: 0; container-type: size; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; }
.ppulse .porb { width: min(94cqw, calc(94cqh - max(18px, 9cqmin))); }
.ppulse .orbword { font-size: clamp(12px, 6cqmin, 40px); }
/* Her alert (lab.js lightPanels): the chat and pulse panels glow for a moment in the alert's colour (--alertc). */
.alertlit { animation: alertlit 2.4s ease-out; }
@keyframes alertlit {
  0%, 40% { box-shadow: 0 0 0 3px var(--alertc, #ec4899), 0 0 18px var(--alertc, #ec4899); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .alertlit { animation-duration: 0.8s; } }
.tacat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.tacat .tadot { width: 12px; height: 12px; border-radius: 50%; background: var(--alertc); flex: none; }
.tacat .taname { min-width: 9em; }
.tacat sl-range { flex: 1; min-width: 90px; }
/* Her alerts panel (lab.js renderAlerts). */
.alrow { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--sl-color-neutral-200); }
.alrow .tadot { width: 10px; height: 10px; border-radius: 50%; background: var(--alertc); flex: none; margin-top: 5px; }
.alrow .alwhat { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.alrecent { cursor: pointer; }
.alrecent:hover { background: var(--sl-color-neutral-100); }
.alfilters { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }

/* ---- The chat bar, 14 Nov (Don: "buttons are not lining up right") ----
   Lab (not the phone chat): the box with Stop and Send beside it, then two even rows, every control one height.
   Row 1, the tools: mic, conversation, suggest, picture, study, security search, picture style; her voice on the right.
   Row 2: how a message is read and the mode on the left; Drive, Duet, Encounter on the right. */
.composer .karpmag[hidden], .composer .labbooks[hidden], .composer .cbr { display: none !important; }
body:not(.phonechat) .composer .ctools { --cb-h: 34px; gap: 6px; justify-content: flex-start; align-items: center; padding-top: 2px; }
body:not(.phonechat) .composer .ctools sl-button { --sl-input-height-medium: var(--cb-h); --sl-input-height-small: var(--cb-h); }
body:not(.phonechat) .composer .ctools sl-button[circle] { font-size: 1rem; }
body:not(.phonechat) .composer .ctools sl-button[pill]::part(label) { padding: 0 10px; font-size: .8rem; }
body:not(.phonechat) .composer .ctools > .dict { order: 1; }
body:not(.phonechat) .composer .ctools > .talk { order: 2; }
body:not(.phonechat) .composer .ctools > .suggestbtn { order: 3; }
body:not(.phonechat) .composer .ctools > .attach { order: 4; }
body:not(.phonechat) .composer .ctools > .labbooks { order: 5; }
body:not(.phonechat) .composer .ctools > .karpmag { order: 6; }
body:not(.phonechat) .composer .ctools > .picstyle { order: 7; align-self: center; margin: 0; height: var(--cb-h); padding: 0 12px;
  box-sizing: border-box; font-size: .78em; }
body:not(.phonechat) .composer .ctools > .aimadebar { order: 8; }
body:not(.phonechat) .composer .ctools > .vmodewrap { order: 9; margin-left: auto; height: var(--cb-h); box-sizing: border-box;
  padding: 0 6px 0 12px; font-size: .78em; }
body:not(.phonechat) .composer .ctools > .cbr { order: 10; display: block !important; flex: 0 0 100%; height: 0; }
body:not(.phonechat) .composer .ctools > .composetip { order: 11; margin-right: 0; }
body:not(.phonechat) .composer .ctools > .workmode { order: 12; height: var(--cb-h); box-sizing: border-box; border-radius: 999px;
  overflow: hidden; font-size: .78em; }
body:not(.phonechat) .composer .ctools > .workmode button { min-height: 0; height: 100%; padding: 0 10px; }
body:not(.phonechat) .composer .ctools > .workmode .wmlabel { padding: 0 4px 0 10px; }
body:not(.phonechat) .composer .ctools > .drivebtn { order: 13; margin-left: auto; }
body:not(.phonechat) .composer .ctools > .simplebtn { order: 14; }
body:not(.phonechat) .composer .ctools > .duetbtn { order: 15; }
.composer .labbooks svg { display: block; font-size: 1.1em; }
.composer .labbooks.on::part(base) { border-color: #f3cf86; color: #f3cf86; box-shadow: 0 0 10px #f3cf8655; }

/* The Lab chat over her background picture (the user screen's, dimmed so the words stay readable), and see-through
   bubbles so the picture shows through them. */
body:not(.userscreen) .chat.hasback { background: linear-gradient(#0b0c10b8, #0b0c10d9), var(--lab-back) 50% 22% / cover no-repeat;
  border-radius: 10px; padding: 6px 6px 0; box-sizing: border-box; }
body:not(.userscreen) .chat :where(.msg.user:not(.thought), .msg.ai:not(.sys)) { position: relative; isolation: isolate;
  background: transparent; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body:not(.userscreen) .chat :where(.msg.user:not(.thought), .msg.ai:not(.sys))::before { content: ""; position: absolute; inset: 0;
  z-index: -1; border-radius: inherit; background: var(--a-bubble-ai, #2a2d38); opacity: .68; pointer-events: none; }
body:not(.userscreen) .chat :where(.msg.user:not(.thought))::before { background: var(--a-bubble-user, #2c3a63); }

/* The owner's own buttons on the user screen (Don, 14 Nov): Stop, Drive, the mode, conversation and picture style come
   back for Don alone (body.us-owner: never "View as tester", never while emulating, never anyone else). They sit on
   their own line under the usual buttons and go away while the phone keyboard is open. Here, above the user screen's
   own rules (its tests keep those for the wide screen); "html" lets the order beat the wide screen's "order: 2". */
body.userscreen.us-owner .composer .stopall, body.userscreen.us-owner .composer .talk,
body.userscreen.us-owner .composer .drivebtn { display: inline-flex !important; }
body.userscreen.us-owner .composer .workmode:not([hidden]) { display: inline-flex !important; }
body.userscreen.us-owner .composer .picstyle { display: inline-flex !important; align-items: center; align-self: center; margin: 0; }
html body.userscreen.us-owner .composer :is(.stopall, .talk, .drivebtn, .workmode, .picstyle) { order: 13; flex: 0 0 auto; }
html body.userscreen.us-owner .composer .cbr { display: block !important; order: 12; flex: 0 0 100%; height: 0; }
body.userscreen.us-owner .composer::after { content: ""; order: 99; flex: 1 1 auto; }
html body.userscreen.us-owner:not(.us-wide) .composer .drivebtn { order: 14; flex: 1 1 100%; }
body.userscreen.us-owner .composer .drivebtn::part(base) { min-height: 0; font-size: inherit; font-weight: inherit; }
body.userscreen.us-owner .composer .workmode { font-size: .85rem; border-radius: 999px; overflow: hidden; height: 40px;
  box-sizing: border-box; }
body.userscreen.us-owner .composer .workmode button { flex: 0 0 auto; min-height: 0; height: 100%; padding: 0 10px; }
body.userscreen.us-owner .composer .workmode .wmlabel { padding: 0 4px 0 10px; }
body.userscreen.us-owner .composer .picstyle { height: 40px; box-sizing: border-box; padding: 0 12px; font-size: .8rem; margin-right: auto; }
body.userscreen.us-owner.us-kb .composer :is(.stopall, .talk, .drivebtn, .workmode, .picstyle, .karpmag, .cbr) { display: none !important; }

/* The user screen (lab/user.js): the phone chat framed with her card, Our Connection and a tab bar. Phone first; on a
   wide screen the same thing as one centred column. Growth shows as words and glow only. */
html.userscreen { background: #07080b; }
body.userscreen { width: min(100%, 560px); margin: 0 auto; height: 100vh; height: 100dvh; box-shadow: 0 0 0 1px #ffffff0d;
  background: radial-gradient(700px 480px at 50% 0%, #2b1f17 0%, #141012 55%, #0b0b0e 100%); }
body.userscreen .topbar, body.userscreen #tray, body.userscreen #animaVersion { display: none !important; }
.ustop[hidden], .ushero[hidden], .ustabs[hidden], .ussheet[hidden] { display: none !important; }
.ustop sl-menu-item[hidden] { display: none; }
.ustop { flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 14px 6px; }
.usmark { font: 300 20px/1 Georgia, "Times New Roman", serif; letter-spacing: .5em; color: #f1e6d6; }
.usme { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #f3cf8655; background: #2a2d38; color: #f3cf86;
  font: 600 14px/1 system-ui, sans-serif; display: inline-grid; place-items: center; cursor: pointer; }
.ustext { flex: none; display: inline-flex; gap: 4px; }
.ustext button { min-width: 36px; height: 32px; padding: 0 8px; border: 1px solid #ffffff26; border-radius: 999px; background: #ffffff0a;
  color: #e9dcc6; font: 600 13px/1 system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
.ustext .ustlg { font-size: 16px; }
.ustext button:hover { color: #fff; background: #ffffff17; }
.ustext button:focus-visible { outline: 2px solid #f3cf86; outline-offset: 1px; }
.ushero { position: relative; flex: none; height: clamp(150px, 27vh, 300px); margin: 0 10px 8px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #3a2c22, #17120f); border: 1px solid #ffffff14; box-shadow: 0 10px 30px #0008;
  transition: height .3s ease; }
.ushero .usface { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.ushero .usface[hidden] { display: none; }
.ushero.noface { background: radial-gradient(120% 90% at 72% 30%, #4a3526 0%, #261b15 45%, #120e0d 100%); }
.ushero .usinitial { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: flex-end; padding-right: 18%; }
.ushero .usinitial svg { height: 88%; width: auto; color: #f3cf86; opacity: .13; filter: blur(.4px); }
.ushero:not(.noface) .usinitial { display: none; }
.ushero .usshade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, #000d 0%, #0006 34%, transparent 62%); }
.ushero .usid { position: absolute; left: 16px; right: 72px; bottom: 12px; }
.usname { border: 0; padding: 0; background: none; cursor: pointer; color: #fff; font: 400 27px/1.1 Georgia, serif;
  text-shadow: 0 1px 6px #000a; }
.usname sl-icon { font-size: 15px; vertical-align: 3px; opacity: .8; }
.uspresence { display: flex; align-items: center; gap: 6px; margin: 4px 0 4px; font-size: 13px; color: #b9f5c9; }
.uspresence i { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 6px #3ddc84; }
.uspresence.off { color: #b0b0b0; } .uspresence.off i { background: #777; box-shadow: none; }
.ustag { font: italic 14px/1.35 Georgia, serif; color: #eee; text-shadow: 0 1px 4px #000; }
.ustag[hidden] { display: none; }
/* Owner emulation (anima/emulate.py): the Owner / As user switch on her card and in the Lab bar, and the banner while
   the server answers as another role. */
.emutoggle { display: inline-flex; flex: none; border: 1px solid #ffffff38; border-radius: 999px; overflow: hidden; }
.emutoggle[hidden] { display: none !important; }
.emutoggle button { border: 0; background: transparent; color: #c9ccd6; font: 600 12px/1 system-ui, sans-serif;
  padding: 7px 11px; min-height: 30px; cursor: pointer; }
.emutoggle button.on { background: #f3cf86; color: #1b1408; }
.ushero .usemu { margin-top: 6px; background: #000a; }
.ushero:is(.compact, .typing, .scrolled, .short) .usemu { display: none !important; }
.emubanner { flex: none; position: relative; z-index: 70; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 4px 10px; background: #7a4b00; color: #ffe7b8; font: 600 13px/1.3 system-ui, sans-serif;
  border-bottom: 1px solid #ffb84d66; }
.emubanner .emutext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emubanner .emuback { flex: none; min-height: 30px; padding: 3px 12px; border: 1px solid #ffe7b8aa; border-radius: 999px;
  background: #0003; color: inherit; font: inherit; cursor: pointer; }
body:not(.us-wide) .ustopemu { display: none !important; }
body.us-wide #emuBanner { position: fixed; top: 0; left: 0; right: 0; height: 40px; }
body.userscreen.us-wide.emulating { padding-top: 40px; }
body.emulating.phonechat .block[data-id="chat"] { height: calc(100vh - 90px); height: calc(100dvh - 90px); }
.usbtns { position: absolute; right: 12px; bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.usbtns button, .usfold { display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: #fff;
  border: 1px solid #ffffff40; background: #0007; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.usbtns button { width: 42px; height: 42px; font-size: 18px; }
.usbtns .usheart { color: #ff7aa2; border-color: #ff7aa266; box-shadow: 0 0 10px #ff5f9344; }
.usbtns [hidden] { display: none; }
.usfold { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; font-size: 13px; transform: rotate(180deg); }
.ushero:is(.compact, .typing, .scrolled, .short) { height: 60px; }
.ushero:is(.compact, .typing, .scrolled, .short) .usfold { transform: none; top: 16px; }
.ushero.short .usfold { display: none; }
.ushero.short .usbtns { right: 10px; }
.ushero:is(.compact, .typing, .scrolled, .short) :is(.usface, .usinitial) {
  inset: 7px auto auto 10px; width: 44px; height: 44px; border-radius: 50%; }
.ushero:is(.compact, .typing, .scrolled, .short) .usinitial { justify-content: center; align-items: flex-end; padding: 0; overflow: hidden;
  background: #2a2420; border: 1px solid #f3cf8633; }
.ushero:is(.compact, .typing, .scrolled, .short) .usinitial svg { height: 84%; opacity: .35; }
.ushero:is(.compact, .typing, .scrolled, .short) :is(.usshade, .ustag) { display: none; }
.ushero:is(.compact, .typing, .scrolled, .short) .usid { left: 66px; top: 8px; bottom: auto; }
.ushero:is(.compact, .typing, .scrolled, .short) .usname { font-size: 19px; }
.ushero:is(.compact, .typing, .scrolled, .short) .uspresence { margin: 2px 0 0; font-size: 12px; }
.ushero:is(.compact, .typing, .scrolled, .short) .usbtns { flex-direction: row; top: 10px; bottom: auto; right: 46px; }
.ushero:is(.compact, .typing, .scrolled, .short) .usbtns button { width: 38px; height: 38px; font-size: 16px; }
body.userscreen.us-tight .connstrip, body.userscreen.us-tight .conncard { display: none !important; }
/* New character under the Professor's card (user.js paintNewChar); his own row, never the composer's. */
.usnewbar { flex: none; display: flex; justify-content: flex-end; margin: -2px 10px 8px; }
.usnewbar[hidden], body.us-wide .usnewbar, .ushero:is(.typing, .short) + .usnewbar { display: none !important; }
.usnew { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; max-width: 100%; padding: 0 16px;
  border-radius: 19px; border: 1px solid #f3cf8680; background: #2a2418e6; color: #f3cf86; cursor: pointer;
  font: 600 14px/1.2 system-ui, sans-serif; box-shadow: 0 0 12px #f3cf8622; touch-action: manipulation; }
.usnew sl-icon { flex: none; font-size: 16px; }
.usnew:hover { background: #3a3120; }
.usnew:focus-visible { outline: 2px solid #f3cf86; outline-offset: 2px; }
.usnewbar { gap: 8px; }
.usrestart { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 19px;
  border: 1px solid #ffffff2e; background: #0007; color: #cfc6b8; cursor: pointer; font: 500 14px/1.2 system-ui, sans-serif;
  touch-action: manipulation; }
.usrestart[hidden] { display: none; }
.usrestart:focus-visible { outline: 2px solid #f3cf86; outline-offset: 2px; }

body.userscreen .grid, body.userscreen .grid.free { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0 10px;
  overflow: hidden; }
body.userscreen .grid.free::after { display: none; }
body.userscreen .block:not([data-id="chat"]) { display: none !important; }
body.userscreen .block[data-id="chat"] { position: relative !important; left: auto !important; top: auto !important;
  width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 1;
  background: transparent; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
body.userscreen .block[data-id="chat"] > .bhead, body.userscreen .resize { display: none !important; }
body.userscreen .block[data-id="chat"] > .bbody { padding: 0; overflow: hidden; }
body.userscreen .connstrip { flex-direction: column; align-items: stretch; gap: 5px; margin: 0 0 6px; padding: 6px 8px 8px;
  border: 1px solid #f3cf8638; border-radius: 16px; background: linear-gradient(180deg, #2a2118d9, #16131299); }
body.userscreen .connstrip .connhead b { font: 400 17px/1.1 Georgia, serif; color: #f3cf86; }
body.userscreen .connstrip .connInsight { writing-mode: horizontal-tb; transform: none; font-size: 11.5px; opacity: .9;
  padding: 2px 10px; border: 1px solid #ffffff33; border-radius: 999px; }
body.userscreen .connstrip .connicon { width: 36px; height: 36px; }
body.userscreen .connstrip .conndim { gap: 1px; }
body.userscreen .connstrip .conndim b { font: 400 12px/1.2 Georgia, serif; color: #eee6da; }
body.userscreen .connstrip .connword { font-size: 10.5px; line-height: 1.35; }
body.userscreen.us-host .connstrip, body.userscreen.us-host .conncard { display: none !important; }
.conncard .connface { flex: none; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; object-position: 50% 22%; }
body.userscreen .conncard { align-items: center; gap: 12px; margin: 6px 0 0; padding: 8px 10px; border-radius: 16px;
  border: 1px solid #f3cf8659; background: linear-gradient(100deg, #2b2119f0, #1a1615e6); box-shadow: 0 0 14px #f3cf861a; }
body.userscreen .conncard b { font: 400 17px/1.2 Georgia, serif; }
body.userscreen .conncard .small { font-size: 13px; line-height: 1.35; color: #e6dfd4; }
body.userscreen .conncard .cnx { align-self: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #ffffff33; opacity: .8; }

body.userscreen .msgs { gap: 10px; padding: 4px 2px 8px; font-size: calc(16px * var(--chat-text-scale, 1)); }
body.userscreen .eng { display: none !important; }
body.userscreen .msg { position: relative; border-radius: 16px; padding: 8px 12px; line-height: 1.42; }
body.userscreen .msg[data-turn]:not(.sys) { margin-top: 18px; }
body.userscreen .msg.ai[data-turn] { margin-left: 40px; max-width: calc(90% - 40px); border-top-left-radius: 6px;
  background: #1d1f27f0; border: 1px solid #ffffff14; color: #ece8f2; }
body.userscreen .msg.ai[data-turn]::before { content: var(--us-her, ""); position: absolute; left: -40px; top: -18px; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid #ffffff26; background: var(--us-face, none) 50% 22% / cover no-repeat, #3a2f28;
  display: grid; place-items: center; color: #f3cf86; font: 600 14px/1 Georgia, serif; }
body.userscreen .msg.ai.cont[data-turn] { margin-top: 0; }
body.userscreen .msg.ai.cont[data-turn]::before { content: none; }
body.userscreen .msg.user[data-turn] { margin-right: 40px; max-width: calc(90% - 40px); border-top-right-radius: 6px;
  background: #1f3358f0; border: 1px solid #7c9cff40; color: #eef1fb; }
body.userscreen .msg.user[data-turn]::after { content: var(--us-init, ""); position: absolute; right: -40px; top: -18px; width: 32px;
  height: 32px; border-radius: 50%; display: grid; place-items: center; background: #2a2d38; color: #f3cf86;
  font: 600 14px/1 system-ui, sans-serif; border: 1px solid #ffffff26; }
.usmeta { position: absolute; bottom: 100%; left: 2px; margin-bottom: 3px; white-space: nowrap; font: 600 12px/1 system-ui, sans-serif;
  color: #e9dcc6; }
.msg.user .usmeta { left: auto; right: 2px; }
.usmeta time { margin-left: 6px; font-weight: 400; font-size: 11px; color: #9a9fae; }
body.userscreen .msg .metarow:empty, body.userscreen .msg .acts:empty { display: none; }
body.userscreen .msg .metarow { margin-top: 2px; }
body.userscreen .msg .acts { display: flex; justify-content: flex-end; gap: 0; margin: 2px -6px -4px 0; }
body.userscreen .msg .acts .ib { font-size: 14px; }
body.userscreen .msg.user .acts { position: absolute; right: 100%; bottom: 0; margin: 0 4px 0 0; }
body.userscreen .composer .suggestbtn { order: 1; }
body.userscreen .msg .acts .ib { padding: 4px; color: #8f95a5; }
body.userscreen .msg .acts .ib:hover { color: #e9dcc6; }
body.userscreen .msg.ai .choices { flex-flow: row wrap; align-items: flex-start; gap: 6px 8px; margin-top: 9px; }
body.userscreen .msg.ai .choice { display: inline-flex; flex: 0 1 auto; align-items: center; min-width: 0; max-width: 100%;
  overflow-wrap: anywhere; text-align: left; font-size: calc(14px * var(--chat-text-scale, 1));
  line-height: 1.3; padding: 7px 13px 7px 7px; color: #f4eee5; background: #ffffff0f; border: 1px solid #f3cf8659;
  box-shadow: inset 0 1px 0 #ffffff0d; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.userscreen .msg.ai .choice:hover, body.userscreen .msg.ai .choice:focus-visible { background: #f3cf861f; border-color: #f3cf86a6; }
body.userscreen .msg.ai .choice .ck { flex: none; min-width: 22px; height: 22px; display: inline-grid; place-items: center; margin-right: 9px;
  padding: 0; border-radius: 7px; font: 700 12px/1 system-ui, sans-serif; color: #1a1410; background: #f3cf86; }
body.userscreen .msg.ai .choices.sent .choice:not(.picked) { opacity: .45; }
body.userscreen .msg.ai .choice.picked { border-color: #f3cf86; background: #f3cf862e; }
@media (pointer: coarse) { body.userscreen .msg.ai .choice { min-height: 44px; } }

body.userscreen .composer { flex-wrap: nowrap; align-items: flex-end; gap: 6px; padding: 8px 0 4px; }
body.userscreen .composer sl-textarea { flex: 1 1 auto; min-width: 0; order: 1; }
body.userscreen .composer sl-textarea::part(base) { border-radius: 22px; background: #15161ccc; }
body.userscreen .composer .attach { order: 0; }
body.userscreen .composer .usbooks { order: 0; flex: 0 0 auto; }
body.userscreen .composer .usbooks svg { display: block; font-size: 1.15em; }
body.userscreen .composer .usbooks.on::part(base) { border-color: #f3cf86; color: #f3cf86; box-shadow: 0 0 10px #f3cf8655; }
body.userscreen .composer .dict { order: 2; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.userscreen .composer .dict.on::part(base) { border-color: #ff7aa2; color: #ff7aa2; box-shadow: 0 0 10px #ff5f9366; }
body.userscreen .composer .suggestbtn { order: 2; }
body.userscreen .composer .send { order: 3; }
@media (max-width: 420px) {
  body.userscreen .composer { gap: 4px; }
  body.userscreen .composer sl-button[circle] { --sl-input-height-medium: 40px; font-size: 1rem; }
}
/* Add AI on the user screen: the owner only (body.duet-ok), a row of its own under the box. */
body.userscreen.duet-ok .composer { flex-wrap: wrap; }
body.userscreen.duet-ok .composer sl-textarea { flex-basis: 0; }
body.userscreen .composer .duetbtn { order: 12; flex: 1 0 100%; }
body.userscreen .composer .duetbtn::part(base) { min-height: 44px; }
body.userscreen.us-wide .composer .duetbtn { flex: 0 0 auto; margin-left: auto; }
/* On a phone the Voice choice moves down beside Add AI, so the box keeps its width in the first row. */
body.userscreen.duet-ok:not(.us-wide) .composer sl-textarea { flex: 1 1 140px; }
body.userscreen.duet-ok:not(.us-wide) .composer .vmodewrap { order: 11; }
body.userscreen.duet-ok:not(.us-wide) .composer .duetbtn { flex: 1 1 0; }
/* SIMPLE joins that second row for every user (a full row of its own left no room for the chat, and without Add AI's
   wrap it squeezed the box to nothing). */
body.userscreen:not(.us-wide) .composer { flex-wrap: wrap; }
body.userscreen:not(.us-wide) .composer sl-textarea { flex: 1 1 140px; }
body.userscreen:not(.us-wide) .composer .vmodewrap { order: 11; }
body.userscreen:not(.us-wide) .composer .simplebtn { order: 12; flex: 1 1 0; }
/* The wide user screen with Add AI: the box takes the whole first row and the buttons sit in a row under it (flex-basis 0
   above let the tools crush the box to a strip, as 8ddaaa8 once fixed; Don, 1 Nov: "Chat box messed up"). */
body.userscreen.us-wide .composer { flex-wrap: wrap; }
body.userscreen.us-wide .composer sl-textarea { flex: 1 0 100%; min-width: 0; order: 0; }
body.userscreen.us-wide .composer > :not(sl-textarea), body.userscreen.us-wide .composer .ctools > * { order: 2; }
body.userscreen:not(.us-wide) .composer .simplebtn::part(base) { min-height: 44px; }
/* SIMPLE is for phones: the wide user screen (body.phonechat too) and the desktop Lab don't show it. */
body.userscreen.us-wide .composer .simplebtn, body:not(.phonechat) .composer .simplebtn { display: none; }
/* Duet and Add AI share that row: Duet is the owner's only (body.duet-owner), Add AI is duet-ok. */
body.userscreen.duet-owner:not(.us-wide) .composer .duetbtn { flex: 1 1 40%; }
body:not(.duet-owner) .composer .duetonly,
body.userscreen:not(.duet-ok) .composer .duetbtn,
body.userscreen .composer .stopall, body.userscreen .composer .drivebtn,
body.userscreen .composer .workmode, body.userscreen .composer .talk,
body.userscreen .composer .picstyle,
body.userscreen .chat .opts .activeBtn, body.userscreen:not(.us-attach) .composer .attach { display: none !important; }
body.userscreen.us-attach .composer .attach { display: inline-flex !important; }

/* Study progress under the chat (user.js drawStudy): one line of counts, a tap opens the topics. */
.usstudy { flex: none; border-top: 1px solid #ffffff14; background: #0d0e12f2; color: #cfc6b8; font: 400 13px/1.35 system-ui, sans-serif; }
.usstudy[hidden] { display: none !important; }
.usstudyline { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 14px; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.usstudyline span { flex: 1; min-width: 0; }
.usstudyline sl-icon { flex: none; color: #f3cf86; }
.usstudytopics { list-style: none; margin: 0; padding: 0 14px 8px; max-height: 30vh; overflow: auto; }
.usstudytopics li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 4px 0; border-top: 1px solid #ffffff0d; }
.usstudytopics li b { font-weight: 600; color: #ece6dc; }
/* Her study material inside the open panel (user.js drawMat): add a file or photo, her files and their sections, the
   draft cards to edit before she keeps them. The topics and the material scroll together, so the chat keeps its room. */
.usstudymore { max-height: 55vh; overflow: auto; overscroll-behavior: contain; }
.usstudymore[hidden] { display: none !important; }
.usstudymore .usstudytopics { max-height: none; overflow: visible; }
.usmat { padding: 4px 14px 12px; border-top: 1px solid #ffffff14; }
.usmat h4 { margin: 8px 0 6px; font: 600 13px/1.3 system-ui, sans-serif; color: #ece6dc; }
.usmat p { margin: 4px 0 8px; }
.usmatadd { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.usmaterr { color: #ffb4a8; }
.usmatstatus { color: #f3cf86; }
.usmatretake { margin: 6px 0 10px; }
.usmatsrc, .usmatsec, .usmatcards { list-style: none; margin: 0; padding: 0; }
.usmatsrc > li { padding: 8px 0; border-top: 1px solid #ffffff0d; }
.usmathead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.usmathead b { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: #ece6dc; }
.usmatsec li { display: flex; align-items: center; gap: 8px; padding: 6px 0 0 10px; }
.usmatsec li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.usmatsec .ususe, .usmathead .ususe { flex: none; }
.usmathead .usmattitle { cursor: text; }
.usmathead .usmatname { flex: 1 1 100%; margin-top: -2px; overflow-wrap: anywhere; }
.usmattitlein { width: 100%; font-weight: 600; }
.usmatpaste { margin-top: 10px; }
.usmat.usdrop { outline: 2px dashed #f3cf86; outline-offset: -4px; }
.usmatq { list-style: none; margin: 6px 0; padding: 0; }
.usmatq li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 6px 0; border-top: 1px solid #ffffff0d; }
.usmatq li > b { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: #ece6dc; }
.usmatq li > span { flex: 1 1 100%; overflow-wrap: anywhere; }
.usmatq li .ususe { flex: none; }
.usmatchap { list-style: none; margin: 4px 0 0; padding: 0; }
.usmatchap summary { cursor: pointer; min-height: 32px; line-height: 32px; color: #ece6dc; overflow-wrap: anywhere; }
.usmatpaste summary { cursor: pointer; color: #f3cf86; min-height: 32px; line-height: 32px; }
.usmatcards li { padding: 8px 0; border-top: 1px solid #ffffff0d; }
.usmatcards label { display: block; color: #a7abb8; }
.usmat .ushin { color: #ece6dc; font-size: 16px; }
.usmatline { overflow-wrap: anywhere; font-style: italic; }
/* Where a card came from (user.js fromLink, openPassage): a small "From: <her file>, p. N" link under a draft card, a
   topic's cards and her message asking a card; a tap opens the section with the card's line marked. */
.usstudytopic { display: flex; flex-wrap: wrap; gap: 2px 10px; width: 100%; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 32px; align-items: center; }
.usstudytopics li { flex-direction: column; }
.ustopiccards { margin: 2px 0 6px; padding-left: 20px; }
.ustopiccards li { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border: 0; }
.usfrom { display: inline-block; margin: 2px 0; padding: 4px 0; border: 0; background: none; color: #f3cf86;
  font: inherit; font-size: 12px; text-align: left; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; }
.usfromrow { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 4px; }
dialog.uspassage { width: min(640px, calc(100vw - 32px)); max-height: 80vh; padding: 12px 16px; border: 1px solid #ffffff1f;
  border-radius: 12px; background: #15161c; color: #ece6dc; overflow: auto; }
dialog.uspassage::backdrop { background: #000000a6; }
.uspasshead { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.uspasshead b { overflow-wrap: anywhere; }
.uspasstext { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; font-size: 15px; margin-top: 8px; }
.uspasstext mark { background: #f3cf8655; color: inherit; border-radius: 3px; padding: 0 1px; }

/* The phone keyboard (user.js wireKeyboard, 13 Nov). The page is the visible height (visualViewport), so the keyboard
   and the address bar don't push it about; no box to type in is under 16px, or iOS zooms the page when it's tapped (the
   chat text-size buttons scale the bubbles, never the box below 16px). */
@media (pointer: coarse) {
  body.userscreen { height: var(--us-vh, 100dvh); position: relative; top: var(--us-vtop, 0px); }
  body.userscreen { --sl-input-font-size-small: 16px; --sl-input-font-size-medium: 16px; }
  body.userscreen :is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"])) {
    font-size: max(16px, 1em); }
}
/* Keyboard up: one row (the box, then small mic, suggest and send); the row under the box and the tab bar step aside. */
body.userscreen.us-kb .composer { flex-wrap: nowrap; gap: 4px; padding: 4px 0 2px; }
body.userscreen.us-kb .composer sl-textarea { flex: 1 1 auto; }
body.userscreen.us-kb .composer :is(.vmodewrap, .simplebtn, .duetbtn, .attach, .aimadebar),
body.userscreen.us-kb .ustabs, body.userscreen.us-kb .usnewbar, body.userscreen.us-kb .replystrip,
body.userscreen.us-kb .chatchips, body.userscreen.us-kb .usstudy { display: none !important; }
body.userscreen.us-kb .composer sl-button[circle] { --sl-input-height-medium: 34px; font-size: .95rem; }
body.userscreen.us-kb .ustop { padding-top: 3px; padding-bottom: 3px; }

.ustabs { flex: none; display: flex; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid #ffffff14;
  background: #0d0e12f2; }
.ustabs button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 0 6px; border: 0;
  border-bottom: 2px solid transparent; background: none; color: #a7abb8; font: 500 12px/1 system-ui, sans-serif; cursor: pointer; }
.ustabs button sl-icon { font-size: 22px; }
.ustabs button.on { color: #f3cf86; border-bottom-color: #f3cf86; text-shadow: 0 0 8px #f3cf8666; }
.ussheet { position: fixed; z-index: 60; top: 0; bottom: 64px; left: 50%; transform: translateX(-50%); width: min(100%, 560px);
  display: flex; flex-direction: column; background: #0f1014f8; }
.ushead { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid #ffffff14; }
.ushead b { flex: 1; font: 400 20px/1.2 Georgia, serif; color: #f3cf86; }
.ushead .usx { border: 0; background: none; color: inherit; font-size: 18px; cursor: pointer; padding: 4px; }
.usbody { flex: 1; overflow: auto; padding: 12px 16px 20px; font-size: 15px; }
.usnote { color: var(--a-muted); line-height: 1.45; margin: 0 0 12px; }
.usmem { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.usmem li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; line-height: 1.4;
  background: #ffffff0a; border: 1px solid #ffffff12; transition: opacity .3s ease, transform .3s ease; }
.usmem li span { flex: 1; }
.usmem li.gone { opacity: 0; transform: translateX(24px); }
.usforget, .usask { flex: none; border: 1px solid #ffffff33; border-radius: 999px; background: none; color: inherit; cursor: pointer;
  font: inherit; font-size: 12px; padding: 4px 10px; }
.usforget.sure { color: #ffb4a8; border-color: #ffb4a888; }
.usask { font-size: 14px; padding: 8px 16px; border-color: #f3cf8666; color: #f3cf86; }
.usstory { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; margin-bottom: 8px;
  border-radius: 12px; background: #ffffff0a; border: 1px solid #ffffff12; line-height: 1.4; }
.usbody h4 { margin: 4px 0 8px; font-weight: 500; color: var(--a-muted); }
.usgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.usgrid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; background: #ffffff0a; cursor: zoom-in; }
.usgrid.pick { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.uspic { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.uspic img { display: block; }
.uspic.isher img { outline: 2px solid #f3cf86; outline-offset: 1px; }
.ususe { border: 1px solid #f3cf8666; border-radius: 999px; background: #ffffff0a; color: #f3cf86; cursor: pointer;
  font: inherit; font-size: 13px; padding: 6px 10px; }
.ususe.sure { background: #f3cf8629; border-color: #f3cf86; color: #fff3d6; }
.ususe:disabled { cursor: default; opacity: 1; border-color: transparent; background: none; color: #f3cf86; }
.usdefaults { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.uspic { transition: opacity .3s ease, transform .3s ease; }
.uspic.gone { opacity: 0; transform: scale(.94); }
.ususe.usdel { border-color: #ffffff33; color: #ffb4a8; background: none; }
.ususe.usdel.sure { border-color: #ffb4a888; background: #ffb4a81a; color: #ffd9d2; }
.ususe.usdel:disabled { border-color: transparent; }
.usmore { display: block; margin: 14px auto 0; }
/* The Other folder (nude and sexual pictures): one 44 px row under the rest, shut until tapped, opening downward. */
.usother { margin-top: 16px; }
:is(.usfolder, .dfolder) { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 14px;
  border: 1px solid #ffffff26; border-radius: 10px; background: #ffffff0a; color: #f2eadc; font: inherit; font-size: 15px;
  cursor: pointer; text-align: left; }
:is(.usfolder, .dfolder) > span { flex: 1; }
:is(.usfolder, .dfolder):hover { border-color: #f3cf8666; }
:is(.usfolder, .dfolder) .usfoldchev { transition: transform .2s ease; }
:is(.usfolder, .dfolder)[aria-expanded="true"] .usfoldchev { transform: rotate(180deg); }
.dfolder { margin: 2px 0 8px; }
@media (prefers-reduced-motion: reduce) { :is(.usfolder, .dfolder) .usfoldchev { transition: none; } }
@media (prefers-reduced-motion: reduce) { .ushero, .usmem li { transition: none; } }
@media (max-height: 620px) { .ushero { height: clamp(120px, 24vh, 300px); } }

/* Busy feedback (lab/busy.js; Don, 12 Nov: "you must tell the user when something is happening"). */
/* A tapped choice: pressed at once, the rest of its row greyed, the row closed to more taps while it runs. */
.choices.sent .choice:not(.picked), .ppchoices.sent button:not(.picked) { opacity: .45; }
.choices[aria-busy="true"] .choice, .ppchoices[aria-busy="true"] button { pointer-events: none; }
.choice.picked, .ppchoices button.picked { position: relative; font-weight: 600; box-shadow: inset 0 0 0 2px rgba(var(--a-choice-rgb, 124, 156, 255), .9); }
.choices[aria-busy="true"] .choice.picked::after, .ppchoices[aria-busy="true"] button.picked::after { content: ""; display: inline-block;
  width: .85em; height: .85em; margin-left: 8px; vertical-align: -.1em; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: busyspin .8s linear infinite; }
.ppchoices button.picked { border-color: #f3cf86; background: #3a3020; }
/* The working line: dots, the step, the seconds; past 15 s it keeps a visible pulse. */
.workline .wsecs:empty { display: none; }
.workline { flex-wrap: wrap; row-gap: 2px; max-width: 100%; }
.workline .wsecs { margin-left: 2px; }
.workline.long { animation: busypulse 2s ease-in-out infinite; }
.ppnote.ppwait.workline { display: inline-flex; align-items: center; gap: 8px; color: #e7dccb; }
.ppme.pending { opacity: .8; }
/* A failure: a plain line and Try again. */
.failline, .msg.sys.noanswer.failline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; text-decoration: none; cursor: default; }
.failline .retrybtn { font: inherit; font-size: .92em; padding: 6px 14px; min-height: 36px; border-radius: 999px; cursor: pointer;
  border: 1px solid currentColor; background: transparent; color: inherit; }
.ppnote.ppfail { display: flex; justify-content: center; color: #f0b7a8; }
@media (pointer: coarse) { .failline .retrybtn { min-height: 44px; } }
/* Any other button whose request is running: pressed and spinning; the bar at the top past half a second. */
.isbusy { cursor: progress !important; opacity: .75; position: relative; }
:is(button, [role=button]).isbusy::after, sl-icon-button.isbusy::after { content: ""; position: absolute; right: 3px; top: 3px; width: 9px; height: 9px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: busyspin .8s linear infinite; pointer-events: none; }
sl-button.isbusy::part(base) { cursor: progress; }
sl-button.isbusy::after { content: ""; position: absolute; right: 4px; top: 4px; width: 9px; height: 9px; z-index: 1;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: busyspin .8s linear infinite; pointer-events: none; }
#busybar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 100000; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: linear-gradient(90deg, transparent, rgba(var(--a-choice-rgb, 124, 156, 255), .95), transparent) 0 0 / 40% 100% no-repeat; }
#busybar.on { opacity: 1; animation: busybar 1.2s linear infinite; }
@keyframes busyspin { to { transform: rotate(360deg); } }
@keyframes busypulse { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }
@keyframes busybar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { #busybar.on, .workline.long { animation: none; } }

/* The user screen on a tablet or a computer (lab/desk.js): her card and sections on the left, the chat over her portrait
   in the middle, Our Connection on the right (a drawer under 1100px). One fluid design from a tablet to an ultrawide;
   the phone rules above apply unchanged whenever body.us-wide is off. */
.usside[hidden], .usback[hidden], .usconn[hidden] { display: none !important; }
.usnav, .usmename, .usmecaret { display: none; }
body.userscreen.us-wide { --us-gap: clamp(8px, .9vw, 18px); --us-l: clamp(220px, 17vw, 340px); --us-r: clamp(300px, 27vw, 540px);
  --us-cpad: clamp(10px, 2vw, 36px); --us-max: 2600px;
  width: 100%; margin: 0; box-shadow: none; background: transparent; display: grid;
  grid-template-columns: var(--us-l) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "top top" "side main" "side study" "side tabs"; column-gap: var(--us-gap);
  padding: 0 max(var(--us-gap), (100vw - var(--us-max)) / 2) var(--us-gap); overflow: hidden; }
@media (min-width: 1100px) {
  body.userscreen.us-wide:not(.us-noconn) { grid-template-columns: var(--us-l) minmax(0, 1fr) var(--us-r);
    grid-template-areas: "top top top" "side main conn" "side study conn" "side tabs conn"; }
}
body.userscreen.us-wide::before, body.userscreen.us-wide::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
body.userscreen.us-wide::before { inset: -60px; background: var(--us-back, var(--us-face, none)) 50% 22% / cover no-repeat, #120e0d;
  filter: blur(48px) brightness(.32) saturate(1.15); }
body.userscreen.us-wide::after { inset: 0; background: radial-gradient(1400px 900px at 50% 0%, #2b1f1766 0%, transparent 70%),
  radial-gradient(120% 100% at 50% 50%, transparent 55%, #000a 100%); }
body.us-wide #usHero { display: none !important; }
body.us-wide #usTop { grid-area: top; }
body.us-wide #usSide { grid-area: side; }
body.us-wide #usBack { grid-row: main-start / tabs-end; grid-column: main-start / main-end; }
body.us-wide #grid { grid-area: main; position: relative; z-index: 1; }
body.us-wide #usTabs { grid-area: tabs; position: relative; z-index: 1; }
body.us-wide #usStudy { grid-area: study; position: relative; z-index: 1; }
body.us-wide #usConn { grid-area: conn; }

body.us-wide .ustop { gap: clamp(14px, 2.4vw, 48px); padding: clamp(6px, 1vh, 12px) 4px; min-width: 0; }
body.us-wide .usmark { font-size: clamp(20px, 1.5vw, 30px); flex: none; }
body.us-wide .usnav { display: flex; gap: clamp(2px, 1vw, 24px); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.usnav button { flex: none; min-height: 44px; padding: 0 clamp(6px, .7vw, 14px); border: 0; border-bottom: 2px solid transparent;
  background: none; color: #cfc6b8; font: 400 clamp(14px, .95vw, 17px)/1 system-ui, "Segoe UI", sans-serif; white-space: nowrap; cursor: pointer; }
.usnav button:hover { color: #fff; }
.usnav button.on { color: #f3cf86; border-bottom-color: #f3cf86; text-shadow: 0 0 10px #f3cf8666; }
body.us-wide .usme { width: auto; height: 44px; padding: 0 10px 0 2px; gap: 10px; border: 0; border-radius: 999px; background: transparent;
  color: #ece6dc; display: inline-flex; align-items: center; }
body.us-wide .usme:hover { background: #ffffff0d; }
body.us-wide .usinit { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; background: #2a2d38;
  color: #f3cf86; border: 1px solid #f3cf8655; }
body.us-wide .usmename { display: inline; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 14px/1 system-ui, sans-serif; }
body.us-wide .usmecaret { display: inline-block; font-size: 12px; opacity: .7; }

.usside, .usconn { display: flex; flex-direction: column; gap: var(--us-gap); min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; padding-bottom: 2px; }
.dcard { position: relative; flex: none; height: clamp(220px, 38vh, 900px); border-radius: 18px; overflow: hidden;
  border: 1px solid #ffffff1a; box-shadow: 0 12px 34px #0009; background: radial-gradient(120% 90% at 72% 30%, #4a3526 0%, #261b15 45%, #120e0d 100%); }
.dcard .dface { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.dcard .dface[hidden] { display: none; }
.dcard .dsil { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-end; color: #f3cf86; opacity: .14; }
.dcard .dsil svg { height: 78%; width: auto; }
.dcard:not(.noface) .dsil { display: none; }
.dcard.prof { background: radial-gradient(120% 90% at 50% 30%, #3b3326 0%, #1f1a14 50%, #0f0d0c 100%); }
.dcard .dshade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, #000d 0%, #0006 34%, transparent 62%); }
.dcard .did { position: absolute; left: 16px; right: 60px; bottom: 12px; }
.dname { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: #fff; font: 400 clamp(22px, 1.8vw, 34px)/1.1 Georgia, serif; text-align: left; text-shadow: 0 1px 6px #000a; }
.dname sl-icon { font-size: .55em; opacity: .8; }
.dcard .uspresence { margin: 0 0 6px; }
.dtag { font: italic clamp(13.5px, .95vw, 16px)/1.4 Georgia, serif; color: #eee; text-shadow: 0 1px 4px #000; }
.dtag[hidden], .dheart[hidden], .dprof[hidden], .dsec[hidden] { display: none !important; }
.dheart { position: absolute; right: 12px; bottom: 14px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  cursor: pointer; font-size: 18px; color: #ff7aa2; border: 1px solid #ff7aa266; background: #0007; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 0 12px #ff5f9344; }
.dsecs { display: flex; flex-direction: column; gap: 6px; flex: none; }
.dsec { border-radius: 12px; border: 1px solid #ffffff12; background: #16151bcc; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dsec.open { border-color: #f3cf8633; background: #1d1915e0; }
.dsechead { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px 0 14px; border: 0; background: none;
  color: #e9e2d6; font: 400 15px/1.2 system-ui, "Segoe UI", sans-serif; text-align: left; cursor: pointer; border-radius: 12px; }
.dsechead:hover { background: #ffffff08; }
.dsechead > sl-icon:first-child { flex: none; font-size: 17px; color: #f3cf86c0; }
.dsechead span { flex: 1; min-width: 0; }
.dchev { flex: none; font-size: 12px; opacity: .55; transition: transform .2s ease; }
.dsec.open .dchev { transform: rotate(90deg); }
.dsecbody { padding: 0 14px 12px 43px; font-size: 14px; line-height: 1.45; color: #d9d2c6; }
.dsecbody[hidden] { display: none; }
.dquote { margin: 0 0 6px; font: italic 15px/1.4 Georgia, serif; color: #f1e6d6; }
.dsmall { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: #b9b2a6; }
.dbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.dbtns.col { flex-direction: column; align-items: stretch; }
.dlink { min-height: 38px; padding: 6px 14px; border: 1px solid #f3cf8659; border-radius: 999px; background: #ffffff08; color: #f3cf86;
  font: inherit; font-size: 13px; text-align: center; cursor: pointer; }
.dlink:hover { background: #f3cf861a; }
.dpics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.dpics img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 22%; border-radius: 8px; background: #ffffff0a; }
.dpics img[data-view] { cursor: zoom-in; }
.dpics .dref { outline: 2px solid #f3cf86; outline-offset: 1px; }
.dprof { flex: none; margin-top: auto; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border-radius: 16px;
  border: 1px solid #f3cf8640; background: linear-gradient(100deg, #2b2119e6, #17141399); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #eee;
  text-align: left; cursor: pointer; font: inherit; }
.dprof:hover { border-color: #f3cf8680; }
.dnewchar { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border-radius: 999px; border: 1px solid #f3cf8680; background: #2a2418e6; color: #f3cf86; cursor: pointer;
  font: 600 14px/1.2 system-ui, sans-serif; box-shadow: 0 0 12px #f3cf8622; }
.dnewchar[hidden] { display: none; }
.dnewchar:hover { background: #3a3120; }
.dpanel .dnewchar { margin-top: 14px; width: 100%; }
.drestart { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid #ffffff2e; background: transparent; color: #cfc6b8; cursor: pointer;
  font: 500 13px/1.2 system-ui, sans-serif; }
.drestart[hidden] { display: none; }
.drestart:hover { border-color: #f3cf8680; color: #f3cf86; }
.dpanel .drestart { margin-top: 8px; width: 100%; }
.drestart:focus-visible { outline: 2px solid #f3cf86; outline-offset: 2px; }
.dprofpic { flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: #3a2f28;
  color: #f3cf86; font-size: 24px; border: 1px solid #f3cf8633; overflow: hidden; }
.dprofpic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.dproftext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dproftext b { font: 400 17px/1.2 Georgia, serif; color: #f3cf86; }
.dproftext small { font-size: 12.5px; line-height: 1.35; color: #c9c1b4; }

.usback { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid #ffffff12; box-shadow: 0 16px 40px #000a;
  background: linear-gradient(90deg, #0a090b00 0%, #0a090b1a 28%, #0a090ba6 60%, #0a090bd9 100%),
    linear-gradient(to top, #0a090bf2 0%, #0a090b00 30%), linear-gradient(#0a090b33, #0a090b33),
    var(--us-back, var(--us-face, none)) 24% 18% / cover no-repeat, radial-gradient(120% 90% at 30% 25%, #4a3526 0%, #221813 50%, #0e0b0b 100%); }
/* The Professor's own pictures: his face on the card and his replies, his workshop behind his chat. */
body.userscreen.us-host { --us-face: var(--prof-face) !important; --us-her: "" !important; }
body.userscreen.us-wide.us-host::before { background-image: var(--prof-back); }
body.us-host .usback { background: linear-gradient(90deg, #0a090b00 0%, #0a090b1a 28%, #0a090ba6 60%, #0a090bd9 100%),
  linear-gradient(to top, #0a090bf2 0%, #0a090b00 30%), linear-gradient(#0a090b33, #0a090b33),
  var(--prof-back) 30% 18% / cover no-repeat, #0e0b0b; }
body.userscreen.us-wide .grid, body.userscreen.us-wide .grid.free { padding: var(--us-gap) var(--us-cpad) 0; }
/* Narrow middles: the chat fills it. Wide ones: a readable column on the right, her portrait on the left (centred
   when there is no portrait to show). */
body.userscreen.us-wide .block[data-id="chat"] { width: min(100%, max(620px, 58%), 800px) !important; margin-left: auto; }
body.userscreen.us-wide.us-noface .block[data-id="chat"] { margin-right: auto; }
body.us-wide .ustabs { width: min(100% - 2 * var(--us-cpad), max(620px, (100% - 2 * var(--us-cpad)) * .58), 800px);
  margin: 0 var(--us-cpad) 0 auto; flex-wrap: wrap; justify-content: center; gap: clamp(4px, .5vw, 8px);
  padding: 6px 0 calc(12px + env(safe-area-inset-bottom)); border: 0; background: none; }
body.us-wide.us-noface .ustabs { margin-right: auto; margin-left: auto; }
body.us-wide .ustabs button { flex: none; flex-direction: row; gap: 8px; min-height: 40px; padding: 0 clamp(11px, 1vw, 16px); border: 1px solid #ffffff26;
  border-radius: 999px; background: #15161ccc; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #d6d0c6; font-size: 13.5px; }
body.us-wide .ustabs button sl-icon { font-size: 16px; }
body.us-wide .ustabs button:hover { border-color: #ffffff4d; color: #fff; }
body.us-wide .ustabs button.on { border-color: #7c9cff; color: #fff; text-shadow: none; box-shadow: 0 0 12px #7c9cff55; }
body.us-wide .ustabs [data-tab="professor"] { display: none; }
@media (min-width: 1100px) {
  body.userscreen.us-wide:not(.us-noconn) .connstrip, body.userscreen.us-wide:not(.us-noconn) .conncard { display: none !important; }
}

.usconn .dpanel { flex: none; padding: clamp(12px, 1.1vw, 20px); border-radius: 18px; border: 1px solid #f3cf8630;
  background: linear-gradient(180deg, #1d1814e6, #121014e0); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 34px #0008; }
.usconn .dconnp { display: flex; flex-direction: column; }
.usconn .dpanel:last-child { flex: 1 0 auto; }
.dhead { display: flex; align-items: center; gap: 10px; }
.dhead h2 { flex: 1; margin: 0; font: 400 clamp(22px, 1.6vw, 30px)/1.15 Georgia, serif; color: #f3cf86; }
.usconn h3 { flex: 1; margin: 0 0 4px; font: 400 clamp(17px, 1.15vw, 21px)/1.2 Georgia, serif; color: #f3cf86; }
.dinsight { min-height: 34px; padding: 0 16px; border: 1px solid #ffffff40; border-radius: 999px; background: #ffffff0a; color: #eee;
  font: 13px/1 system-ui, sans-serif; cursor: pointer; }
.dinsight:hover { border-color: #f3cf86a6; color: #f3cf86; }
.dclose { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #ffffff33; background: none;
  color: inherit; cursor: pointer; }
.dsub { margin: 6px 0 10px; font-size: 13px; line-height: 1.45; color: #b9b2a6; }
.dconst { position: relative; flex: none; min-height: clamp(300px, 34vh, 480px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center; justify-items: center; row-gap: 4px; }
.dconst.five { grid-template-areas: "comfort comfort comfort" "trust bond chemistry" "adventure adventure adventure"; grid-template-rows: repeat(3, auto); }
.dconst.four { grid-template-areas: "comfort comfort comfort" "trust bond adventure"; grid-template-rows: repeat(2, auto); }
.dlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dlines line { stroke-width: 1.3; opacity: .4; }
.dlines .ring { fill: none; stroke: #f3cf86; stroke-width: 1; opacity: .16; }
.dnode { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: 100%; padding: 4px;
  border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.dnode:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.dnode .connicon { --s: clamp(44px, 4.2vw, 112px); width: var(--s); height: var(--s); background-color: #0e0c10; }
.dnode.big .connicon { --s: clamp(56px, 5.6vw, 150px); }
.dnode b { font: 400 15px/1.2 Georgia, serif; color: #f1e9dc; }
.dnode.sel b { color: var(--c); filter: brightness(1.3); }
.dnode small { max-width: 17ch; font-size: 12px; line-height: 1.3; color: #b9b2a6; }
.dnode .connword { margin-top: 2px; font-size: 12px; }
.dladder { display: flex; align-items: flex-start; justify-content: space-between; gap: 2px; margin-top: 4px; }
.dstep { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  font-size: 11.5px; line-height: 1.25; color: #cfc7ba; hyphens: manual; }
.dstep .connicon { width: clamp(30px, 3vw, 56px); height: clamp(30px, 3vw, 56px); background-color: #0e0c10; }
/* Sized from the column itself where container units exist (Safari 16+, Firefox 110+); the vw sizes above otherwise. */
@supports (width: 1cqw) {
  .usconn { container-type: inline-size; }
  .dconst { min-height: clamp(300px, 34vh, 115cqw); }
  .dnode .connicon { --s: clamp(44px, 14.6cqw, 112px); }
  .dnode.big .connicon { --s: clamp(56px, 18.5cqw, 150px); }
  .dnode b { font-size: clamp(14px, 4.6cqw, 20px); }
  .dnode small { max-width: 24ch; }
  .dnode small, .dnode .connword { font-size: clamp(11px, 3.4cqw, 13.5px); }
  .dstep { font-size: clamp(11.5px, 2.5cqw, 13px); }
  .dstep .connicon { width: clamp(30px, 9.5cqw, 56px); height: clamp(30px, 9.5cqw, 56px); }
  .usconn .dsub, .dabout p { font-size: clamp(13px, 2.8cqw, 14.5px); }
  .dcloser p { font-size: clamp(13.5px, 2.9cqw, 15px); }
}
.dstep.now span { color: var(--c); filter: brightness(1.3); font-weight: 600; }
.dstep.now .connicon { outline: 1px solid var(--c); outline-offset: 3px; }
.darrow { flex: none; align-self: flex-start; margin-top: clamp(6px, .9vw, 14px); color: #ffffff40; font-style: normal; }
.dhint { margin: 10px 0 0; }
@media (min-width: 1100px) and (max-width: 1565px) {
  .darrow { display: none; }
  .dstep { font-size: 10.5px; }
}
.dcloser { display: flex; align-items: center; gap: 12px; }
.dcloser img { flex: none; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; object-position: 50% 22%; }
.dcloser b { font: 400 17px/1.2 Georgia, serif; color: #f3cf86; }
.dcloser p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: #e6dfd4; }
.dabout p { margin: 6px 0; font-size: 13px; line-height: 1.45; color: #cfc7ba; }
.dabout .dnote { margin-top: 10px; padding-top: 8px; border-top: 1px solid #ffffff14; opacity: .85; }
.dsteps { margin: 6px 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 12px; }
.dsteps li::marker { color: #f3cf86; font-family: Georgia, serif; }
.dsteps b { display: block; font: 400 15.5px/1.3 Georgia, serif; color: #f1e6d6; }
.dsteps span { font-size: 13px; line-height: 1.45; color: #b9b2a6; }

/* Under 1100px (or without Our Connection) the right column is a drawer, opened by the heart on her card. */
body.us-wide #usConn { position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; width: min(460px, 92vw); padding: 12px;
  background: #0e0d11f5; border-left: 1px solid #f3cf8633; box-shadow: -20px 0 50px #000c; transform: translateX(105%);
  transition: transform .25s ease; }
body.us-wide.us-drawer #usConn { transform: none; }
body.us-wide.us-noconn #usConn { display: none !important; }
@media (min-width: 1100px) {
  body.us-wide:not(.us-noconn) #usConn { position: static; z-index: auto; width: auto; padding: 0 0 2px; background: none; border: 0;
    box-shadow: none; transform: none; transition: none; }
  body.us-wide .usconn .dclose { display: none; }
}

body.us-wide .ussheet { top: 8vh; bottom: auto !important; max-height: 84vh; width: min(700px, 92vw); border-radius: 18px;
  border: 1px solid #f3cf8633; box-shadow: 0 24px 70px #000c, 0 0 0 100vmax #0008; }
body.us-wide #meet .card.wide { width: min(1080px, 94vw); }
body.us-wide #meet .pickgrid > div { width: clamp(150px, 15vw, 260px) !important; }
body.us-wide #meet .pickgrid > div > :first-child { width: 100% !important; height: auto !important; aspect-ratio: 150 / 220; }
.dmore { position: fixed; z-index: 80; display: flex; flex-direction: column; min-width: 210px; padding: 6px; border-radius: 14px;
  border: 1px solid #ffffff1f; background: #16171df7; box-shadow: 0 16px 40px #000c; }
.dmore button { min-height: 42px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: #e9e2d6; font: 14px/1 system-ui, sans-serif;
  text-align: left; cursor: pointer; }
.dmore button:hover { background: #ffffff10; }
@media (pointer: coarse) {
  body.us-wide .ustabs button, .dlink, .dinsight, .dmore button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { body.us-wide #usConn, .dchev { transition: none; } }

/* ==================================================================================================================
   The Professor over her chat (lab/profpanel.js, docs/specs/professor-help.md). Kept apart from the rules above so
   merges stay clean. A sheet over the whole screen on a phone; a panel on the right on anything wider.
   ================================================================================================================== */
.pp { position: fixed; z-index: 85; top: 0; right: 0; bottom: 0; left: 0; height: 100vh; height: 100dvh; display: flex;
  flex-direction: column; box-sizing: border-box; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  background: #121116f5; color: #ece5d8; font: 15px/1.45 system-ui, sans-serif;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pp[hidden] { display: none !important; }
.pphead { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #f3cf8633; }
.pppic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 20px;
  color: #f3cf86; background: #2a2418; border: 1px solid #f3cf8666; box-shadow: 0 0 12px #f3cf8622; }
.ppid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ppid b { font: 400 18px/1.2 Georgia, serif; color: #f3cf86; }
.ppid small { font-size: 12.5px; line-height: 1.3; color: #b9b2a6; }
.ppnew { flex: none; max-width: 150px; min-height: 40px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 20px; border: 1px solid #f3cf8680; background: #2a2418; color: #f3cf86; cursor: pointer; text-align: left;
  font: 600 13px/1.15 system-ui, sans-serif; }
.ppnew[hidden] { display: none; }
.ppnew sl-icon { flex: none; font-size: 15px; }
@media (max-width: 430px) { .pp.ppnewon .pppic { display: none; } }
.ppx { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ffffff26; background: #0006; color: #e9e2d6;
  display: grid; place-items: center; cursor: pointer; font-size: 15px; }
.ppmsgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex;
  flex-direction: column; gap: 10px; }
.ppme, .pphim { max-width: 86%; padding: 9px 12px; border-radius: 14px; overflow-wrap: anywhere; }
.ppme { align-self: flex-end; background: #2b3a55; border-bottom-right-radius: 4px; }
.pphim { align-self: flex-start; background: #221f1a; border: 1px solid #f3cf8626; border-bottom-left-radius: 4px; }
.ppme p, .pphim p { margin: 0 0 6px; }
.ppme p:last-child, .pphim p:last-child { margin-bottom: 0; }
.ppnote { align-self: center; margin: 0; font-size: 13px; color: #b9b2a6; text-align: center; }
.ppchoices { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 8px; }
.ppchoices[hidden] { display: none; }
.ppchoices button { min-height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid #f3cf8666; background: #2a2418;
  color: #f3cf86; font: 14px/1.2 system-ui, sans-serif; cursor: pointer; }
.ppform { flex: none; display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px 6px; border-top: 1px solid #ffffff14; }
.ppta { flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 140px; box-sizing: border-box; resize: none; padding: 11px 12px;
  border-radius: 12px; border: 1px solid #ffffff26; background: #0c0b0f; color: inherit; font: 16px/1.35 system-ui, sans-serif; }
.ppta:focus { outline: 2px solid #f3cf8688; outline-offset: 1px; }
.ppsend { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #f3cf86; color: #15120c; font-size: 18px;
  display: grid; place-items: center; cursor: pointer; }
/* His voice: the mic writes into his box, the soundwave is Conversation mode with him, a speaker reads a reply. */
.ppmic, .pptalk { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ffffff26; background: #0006;
  color: #e9e2d6; font-size: 18px; display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.ppmic[hidden], .pptalk[hidden] { display: none; }
.ppmic.on { border-color: #ff7aa2; color: #ff7aa2; box-shadow: 0 0 10px #ff5f9366; }
.pptalk.on { border-color: #22a55a; background: #22a55a; color: #fff; }
.ppstatus { flex: none; min-height: 0; padding: 0 14px; text-align: center; color: #b9b2a6; }
.ppstatus:empty { display: none; }
.ppsay { display: block; margin: 4px 0 -4px auto; padding: 4px; border: 0; background: none; line-height: 0;
  color: #8f95a5; font-size: 15px; cursor: pointer; }
.ppsay:hover, .ppsay:focus-visible { color: #f3cf86; }
.ppacts { display: flex; justify-content: flex-end; align-items: center; gap: 2px; margin: 4px 0 -4px; }
.ppacts .ppsay { margin: 0; }
.pphim .votetags .vtag { color: #b9b2a6; }
.pphim .votetags .vtag.on { color: #fff; }
.ppfoot { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 10px 8px; }
.ppback, .ppfull { min-height: 44px; padding: 0 8px; border: 0; background: none; font: 14px/1.2 system-ui, sans-serif;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ppback { color: #f3cf86; font-weight: 600; }
.ppfull { color: #b9b2a6; text-decoration: underline; text-underline-offset: 3px; }
.ppnew:focus-visible, .ppx:focus-visible, .ppback:focus-visible, .ppfull:focus-visible, .ppsend:focus-visible, .ppchoices button:focus-visible {
  outline: 2px solid #f3cf86; outline-offset: 2px; }
@media (min-width: 701px) {
  .pp { left: auto; width: min(460px, 92vw); border-left: 1px solid #f3cf8633; box-shadow: -24px 0 60px #000c; }
}
@media (prefers-reduced-motion: no-preference) {
  .pp:not([hidden]) { animation: ppin .2s ease-out; }
}
@keyframes ppin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.webcards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.webcard { display: flex; flex-direction: column; width: 180px; border: 1px solid var(--line, #3334); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; background: var(--panel, #0001); }
.webcard:hover { border-color: var(--accent, #7aa2f7); }
.webcard img { width: 100%; height: 120px; object-fit: contain; background: #fff; }
.webcard .wctitle { padding: 6px 8px 0; font-size: .85em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.webcard .wcsite { padding: 2px 8px 6px; font-size: .75em; opacity: .7; }
/* YouTube panels (owner only): the player fills the panel under its link box; the library lists thumbnails. */
.ytpanel { display: flex; flex-direction: column; height: 100%; gap: 4px; }
.ytbar { display: flex; gap: 6px; align-items: center; }
.ytinput { flex: 1; min-width: 0; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line, #3334); background: transparent; color: inherit; font: inherit; font-size: .85em; }
.ytout { font-size: .8em; white-space: nowrap; opacity: .8; color: inherit; }
.yttitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yttitle:empty { display: none; }
.ytstage { flex: 1; min-height: 0; position: relative; }
.ytframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; background: #000; }
.ythint { padding: 10px 4px; line-height: 1.5; }
.ytlib { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.yttabs { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.yttabs button, .ytback button { padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line, #3334); background: transparent; color: inherit; font: inherit; font-size: .8em; cursor: pointer; }
.yttabs button.on { border-color: var(--accent, #7aa2f7); background: #7aa2f733; }
.ytgrow { flex: 1; }
.ytsearch .ytq { width: 100%; box-sizing: border-box; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line, #3334); background: transparent; color: inherit; font: inherit; }
.ytlist { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.ytitem { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; border-radius: 6px; padding: 2px; }
.ytitem:hover { background: #7aa2f724; }
.ytitem img, .ytnothumb { width: 112px; height: 63px; object-fit: cover; border-radius: 4px; flex: none; background: #0004; }
.ytmeta { min-width: 0; }
.yttl { font-size: .85em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* "Correct her" (anima/coaching.py) */
.coachbox { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px; border: 1px solid var(--line, #ccc4); border-radius: 8px; }
.emustudio::part(panel) { width: min(1200px, 96vw); max-height: 92vh; }
.emustudio .emustudiobody { min-height: 60vh; }

/* The Anima orb (lab/anima-orb.js, docs/orb.md): her mood beside her name in the Chat title bar and on her card */
.bhead .borb { flex: none; width: 36px; margin: -8px 0 -6px -6px; }
.ushero .usorb { width: 46px; vertical-align: -10px; margin: 0 4px 0 -6px; }
.ushero.compact .usorb, .ushero.typing .usorb, .ushero.scrolled .usorb, .ushero.short .usorb { width: 26px; vertical-align: -6px; margin: -4px 2px -4px -4px; }
/* Don: "The Pulse is far too small. Thinking beneath Quinn's portrait, pushing Personality down". Its own block under
   her card, sized by width only (the component keeps its proportions), her mood in words under it. */
.dpulse, .uspulse { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dpulse { padding: 4px 0 8px; }
.dpulse .usorb { width: clamp(150px, calc(100% - 64px), 190px); }
.uspulse { margin: -2px 10px 6px; }
.uspulse .usorb { width: 96px; }
.orbword { min-height: 1.4em; font: 13px/1.4 system-ui, sans-serif; color: #c9c3d6; text-align: center; }
/* Phone: the medium one only while her card is open; folded, the small one in the card's row comes back. */
body.us-wide .uspulse, body:not(.userscreen) .uspulse, .ushero[hidden] ~ .uspulse,
.ushero:is(.compact, .typing, .scrolled, .short) ~ .uspulse { display: none; }
.ushero:not(.compact, .typing, .scrolled, .short) .usid .usorb { display: none; }

/* Shoelace's own display beats the hidden attribute on its elements: these stay gone while hidden. */
sl-dropdown[hidden], sl-button[hidden] { display: none !important; }
#usTop .ustextitem { display: none; }
.simplebtn::part(label) { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.simplesub { font-size: 11px; font-weight: 400; letter-spacing: 0; opacity: .75; }

/* The phone pass (Don: "buttons super obvious, no screen jumping and good fit"): the user screen on a phone fits
   360-430 px with nothing sideways, and everything to tap is at least 44 px. */
@media (max-width: 700px) {
  body.userscreen:not(.us-wide) .ustop { gap: 6px; padding: 4px 10px; min-width: 0; }
  body.userscreen:not(.us-wide) .usmark { flex: none; font-size: 18px; letter-spacing: .35em; }
  body.userscreen:not(.us-wide) .ustext { display: none; }
  body.userscreen:not(.us-wide) #usTop .ustextitem { display: block; }
  body.userscreen:not(.us-wide) :is(.bellbtn, .usme) { width: 44px; height: 44px; }
  body.userscreen:not(.us-wide) .usname { min-height: 44px; }
  body.userscreen:not(.us-wide) .usbtns button { width: 44px; height: 44px; }
  body.userscreen:not(.us-wide) .usfold { width: 44px; height: 44px; top: 4px; right: 4px; }
  body.userscreen:not(.us-wide) .ushero.compact .usfold, body.userscreen:not(.us-wide) .ushero.scrolled .usfold { top: 8px; }
  body.userscreen:not(.us-wide) .ushero.compact .usbtns, body.userscreen:not(.us-wide) .ushero.scrolled .usbtns { top: 8px; right: 52px; }
  body.userscreen:not(.us-wide) .ushero.compact, body.userscreen:not(.us-wide) .ushero.scrolled { height: 60px; }
  body.userscreen:not(.us-wide) :is(.usnew, .usrestart) { min-height: 44px; }
  body.userscreen:not(.us-wide) .msg .acts .ib { min-width: 44px; min-height: 44px; }
  body.userscreen:not(.us-wide) .composer sl-button[circle] { --sl-input-height-medium: 44px; }
  body.userscreen:not(.us-wide) .composer .vmodewrap { min-height: 44px; }
  body.userscreen:not(.us-wide) .composer .vmode { min-height: 44px; font-size: 15px; }
  body.userscreen:not(.us-wide) .choice { min-height: 44px; }
  body.userscreen:not(.us-wide) .connstrip .connInsight { min-height: 44px; padding: 0 10px; }
  body.userscreen:not(.us-wide) .ushead .usx { min-width: 44px; min-height: 44px; }
  body.userscreen:not(.us-wide) :is(.usask, .usforget) { min-height: 44px; }
  /* The Professor's panel on a phone, his choices and the buttons under his lines. */
  :is(.ppnew, .ppchoices button) { min-height: 44px; }
  .ppx { width: 44px; height: 44px; }
  .pphim .vbtn { min-width: 44px; min-height: 44px; }
  .ppsay { min-width: 44px; min-height: 44px; display: grid; place-items: center; margin: 0 0 -6px auto; }
  body.userscreen:not(.us-wide) .ususe { min-height: 44px; }
  /* Her name and its chevron are one 44 px button (Who to talk to). */
  body.userscreen:not(.us-wide) .usname { display: inline-flex; align-items: center; min-width: 44px; padding-right: 10px; }
  body.userscreen:not(.us-wide) .usname sl-icon { padding: 0 6px; }
  /* The folded card on a phone: orb, name and the online dot on one 44 px row (the dot's word stays for readers). */
  body.userscreen:not(.us-wide) .ushero:is(.compact, .scrolled, .short) .usid { display: flex; align-items: center; gap: 2px;
    top: 8px; height: 44px; min-width: 0; }
  body.userscreen:not(.us-wide) .ushero:is(.compact, .scrolled, .short) .usname { min-width: 0; flex: 0 1 auto; }
  body.userscreen:not(.us-wide) .ushero:is(.compact, .scrolled, .short) .usname span { overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  body.userscreen:not(.us-wide) .ushero:is(.compact, .scrolled, .short) .uspresence { flex: none; margin: 0; }
  body.userscreen:not(.us-wide) .ushero:is(.compact, .scrolled, .short) .uspresence span { position: absolute; width: 1px;
    height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* Our Connection on a phone: one 44 px line in the flow, Insight a tap away (paintConnStrip's .connline). */
  body.userscreen:not(.us-wide) .connstrip.folded { flex-direction: row; padding: 0 10px; margin: 0 0 6px; }
  body.userscreen .connline { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0;
    border: 0; background: none; color: inherit; cursor: pointer; text-align: left; }
  body.userscreen .connline b { font: 400 15px/1.1 Georgia, serif; color: #f3cf86; white-space: nowrap; }
  body.userscreen .connline .connmini { flex: 1; min-width: 0; overflow: hidden; }
  body.userscreen:not(.us-wide) .connstrip .connline .connInsight { flex: none; min-height: 0; padding: 0; border: 0;
    background: none; font-size: 12px; opacity: .9; color: #f3cf86; }
}

/* The chat while it loads: three grey bubbles where her messages will be. */
.msgskel { display: flex; flex-direction: column; gap: 12px; padding: 16px 12px; }
.msgskel i { display: block; height: 44px; width: 62%; border-radius: 14px; background: #ffffff12; animation: msgskel 1.4s ease-in-out infinite; }
.msgskel i:nth-child(2) { width: 46%; align-self: flex-end; animation-delay: .2s; }
.msgskel i:nth-child(3) { width: 70%; height: 64px; animation-delay: .4s; }
@keyframes msgskel { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .msgskel i { animation: none; } }


/* Memory A/B picks (agency-layer spec 5.3): side by side on desktop, stacked on the phone */
.ab-card { margin-top: 6px; font-size: 0.9em; }
.ab-card .ab-btn { margin-right: 4px; }
.ab-takes { display: flex; gap: 8px; }
.ab-take { flex: 1; border: 1px solid var(--line, #8884); border-radius: 8px; padding: 6px 8px; white-space: pre-wrap; }
.ab-btns { margin-top: 6px; }
@media (max-width: 700px) { .ab-takes { flex-direction: column; } }

/* Her agency panel (renderAgency) */
.agency .agsw { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.agency .agsec { margin: 6px 0; }
.agency .agsec > summary { cursor: pointer; }
.agency .agrow { margin: 4px 0; line-height: 1.5; }
.agency .agrow sl-button { margin-left: 4px; }
.agency .agsub { margin-top: 6px; }

/* addListFilter (lab.js): the small search box above a long list, and the items it hides */
.lfhide { display: none !important; }
.lfbox { display: flex; align-items: center; gap: 8px; padding: 4px 0 6px; }
.lfbox sl-input { flex: 1; min-width: 0; }
.lfcount::after { content: attr(data-n); white-space: nowrap; }

/* encounter types (anima/encounter_types.py) */
.encdlg .encrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.encdlg .encrow textarea, .encdlg .encrow input[type=text] { flex: 1 1 100%; font: inherit; padding: 4px 6px; border-radius: 6px; }
.encdlg .encmode { gap: 14px; }
.encdlg .encextra { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.encdlg .encextra input { flex: 1 1 140px; font: inherit; padding: 2px 6px; border-radius: 6px; }
.encdlg .encprobs { margin: 8px 0 0; padding-left: 18px; color: var(--warn, #e0a84a); }
.encdlg h4 { margin: 10px 0 2px; }

/* Home (lab/user.js goHome; Don, 12 Nov: "be sure the user can go HOME to their main char easily"). One button, top
   left, the same place on every screen, above every sheet, panel and dialog; on a phone those open under the top bar
   so it is never covered. A computer gets the same button, smaller. */
.ushome[hidden] { display: none !important; }
.ushome { position: fixed; z-index: 9500; top: calc(env(safe-area-inset-top) + 4px); left: max(6px, calc(50vw - 274px));
  height: 44px; min-width: 44px; max-width: 150px; padding: 0 12px 0 10px; display: inline-flex; align-items: center; gap: 8px;
  box-sizing: border-box; border-radius: 22px; border: 1px solid #f3cf8680; background: #2a2418f2; color: #f3cf86;
  box-shadow: 0 2px 10px #0009; cursor: pointer; touch-action: manipulation; text-align: left;
  font: 600 15px/1.1 system-ui, -apple-system, "Segoe UI", sans-serif; }
.ushome:hover { background: #3a3020; }
.ushome:focus-visible { outline: 2px solid #f3cf86; outline-offset: 2px; }
.ushome sl-icon { flex: none; font-size: 20px; }
.ushomewords { display: flex; flex-direction: column; min-width: 0; }
.ushomewords b { font-weight: 700; }
.ushometo { font-size: 11.5px; font-weight: 500; color: #e9dcc6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ushometo:empty { display: none; }
/* Not on the sign-in or lock screens: nobody is home yet. */
#gate:not([hidden]) ~ .ushome, #lock:not([hidden]) ~ .ushome { display: none !important; }
body.us-has-home:not(.us-wide) { --us-topbar: calc(env(safe-area-inset-top) + 52px); }
body.us-has-home:not(.us-wide) .usmark { display: none; }
body.us-has-home:not(.us-wide) .ustop { padding-left: 158px; min-height: 52px; box-sizing: border-box; }
body.us-has-home:not(.us-wide) .ussheet { top: var(--us-topbar); }
body.us-has-home:not(.us-wide) .screen:not(#lock) { top: var(--us-topbar); }
body.us-has-home:not(.us-wide) sl-dialog::part(base) { top: var(--us-topbar); }
@media (max-width: 700px) {
  body.us-has-home:not(.us-wide) .pp { top: var(--us-topbar); height: auto; padding-top: 0; }
}
body.us-wide.us-has-home .ustop { padding-left: 128px; }
body.us-wide .ushome { top: 10px; left: 10px; height: 38px; max-width: 200px; font-size: 14px; }
body.us-wide .ushome sl-icon { font-size: 17px; }

/* Her feelings triangle (the Anima orb) as big as its row lets it be on a phone (Don, 12 Nov): in the folded card it
   fills the strip's height; under the open card it grows with the screen width. It is SVG, so it stays crisp. */
@media (max-width: 700px) {
  body.userscreen:not(.us-wide) .ushero:is(.compact, .typing, .scrolled, .short) .usid .usorb {
    width: 50px; vertical-align: -17px; margin: -14px 2px -14px -6px; }
  /* A long name ends in "…" before her picture and heart buttons rather than running under them. */
  body.userscreen:not(.us-wide) .ushero:is(.compact, .typing, .scrolled, .short) .usname > span {
    display: inline-block; max-width: calc(100vw - 324px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: middle; }
  body.userscreen:not(.us-wide) .uspulse .usorb { width: clamp(96px, 34vw, 150px); }
  body.userscreen:not(.us-wide) .uspulse .orbword { font-size: 14px; }
}