/* Advanced Studios dashboard overlay (v1.1): the information layer over the lot. A clean product UI on near-black glass:
   IBM Plex Sans and Plex Mono (self-hosted, OFL; fonts/LICENSE.txt), the project colours from the feed, an amber accent,
   150-250 ms eased transitions, crisp at any DPI, readable from across the room. The charm stays in the lot below. */
@font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --glass: rgba(12, 13, 16, 0.80);
  --glass-2: rgba(24, 26, 31, 0.92);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #eceef0;
  --dim: #a2a8b0;
  --faint: #6c727b;
  --amber: #ffb000;
  --amber-2: #ffcf5a;
  --red: #ff5a4e;
  --green: #3dd68c;
  --blue: #6aa8ff;
  --radius: 14px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t: 190ms;
}

.as-ui, .as-ui * { box-sizing: border-box; }
/* hidden under the loading postcard; it fades in with the game's first frame (index.html adds body.as-ready) */
.as-ui { opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease); }
body.as-ready .as-ui { opacity: 1; pointer-events: auto; }
.as-ui {
  font-family: "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(14px, 0.45vw + 9px, 18px);
  line-height: 1.35; color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.as-ui .mono, .as-ui kbd, .as-ui time, .as-ui .num { font-family: "Plex Mono", ui-monospace, Menlo, Consolas, monospace; }
.as-ui a { color: var(--amber-2); text-decoration: none; }
.as-ui a:hover, .as-ui a:focus-visible { text-decoration: underline; }
.as-ui button { font: inherit; color: inherit; }
.as-ui :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.as-glass {
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
}

/* the toolbar, top right */
#as-bar { position: fixed; top: 12px; right: 12px; z-index: 5; display: flex; gap: 6px; padding: 6px; border-radius: 12px; }
#as-bar button {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 2.4em; padding: 0 0.75em; border-radius: 9px;
  border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--dim);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
#as-bar button:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
#as-bar button.on { background: rgba(255, 176, 0, 0.14); color: var(--amber-2); border-color: rgba(255, 176, 0, 0.35); }
#as-bar button svg { width: 1.15em; height: 1.15em; flex: none; }
#as-bar button .lbl { font-size: 0.86em; font-weight: 500; }
#as-bar button kbd { font-size: 0.7em; color: var(--faint); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 4px; }
#as-bar button .dot { position: absolute; top: 4px; right: 4px; min-width: 1.1em; height: 1.1em; padding: 0 3px; border-radius: 1em; background: var(--amber); color: #1a1206; font: 600 0.62em/1.1em "Plex Mono", monospace; text-align: center; }
@media (max-width: 900px) { #as-bar button .lbl, #as-bar button kbd { display: none; } }

/* the needs-you chip, top left: the one thing that should catch the eye */
#as-needs {
  position: fixed; top: 12px; left: 12px; z-index: 5; display: none; align-items: center; gap: 10px; padding: 0.55em 0.95em 0.55em 0.75em;
  border-radius: 999px; cursor: pointer; border: 1px solid rgba(255, 176, 0, 0.45);
  background: linear-gradient(180deg, rgba(255, 176, 0, 0.20), rgba(255, 176, 0, 0.10)), var(--glass);
  color: var(--amber-2); font-weight: 600; transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
#as-needs.show { display: inline-flex; }
#as-needs:hover { transform: translateY(-1px); }
#as-needs .pulse { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(255, 176, 0, 0.6); animation: as-breathe 2.6s ease-in-out infinite; }
@keyframes as-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 176, 0, 0.55); } 50% { box-shadow: 0 0 0 7px rgba(255, 176, 0, 0); } }
@media (prefers-reduced-motion: reduce) { #as-needs .pulse { animation: none; } }

/* the drawer: one panel at a time, on the right */
#as-drawer {
  position: fixed; top: calc(12px + 3.4em); right: 12px; z-index: 5; width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 5.2em - 12px);
  display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(-6px) scale(0.985); pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
#as-drawer.open { opacity: 1; transform: none; pointer-events: auto; }
#as-drawer header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
#as-drawer header h2 { margin: 0; font-size: 1.05em; font-weight: 600; letter-spacing: 0.01em; flex: 1; }
#as-drawer header .sub { color: var(--faint); font-size: 0.8em; }
#as-drawer header kbd { font-size: 0.72em; color: var(--faint); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 5px; }
#as-drawer .x { width: 2em; height: 2em; border-radius: 8px; border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--dim); }
#as-drawer .x:hover { color: var(--text); border-color: var(--line-2); }
#as-drawer .body { overflow: auto; padding: 8px 16px 16px; }
#as-drawer h3 { margin: 14px 0 6px; font-size: 0.72em; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
#as-drawer .empty { color: var(--faint); padding: 18px 0; text-align: center; }

/* list rows */
.as-row { display: grid; grid-template-columns: 4px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.as-row:last-child { border-bottom: 0; }
.as-row .bar { width: 4px; height: 100%; min-height: 2.2em; border-radius: 2px; }
.as-row .t { font-weight: 500; }
.as-row .t.untitled { color: var(--dim); font-style: italic; font-weight: 400; }
.as-row .m { color: var(--dim); font-size: 0.84em; margin-top: 2px; }
.as-row time { color: var(--faint); font-size: 0.78em; white-space: nowrap; }
.as-row .acts { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.as-pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 0.74em; font-weight: 500; border: 1px solid var(--line-2); color: var(--dim); white-space: nowrap; }
.as-pill.working { color: var(--green); border-color: rgba(61, 214, 140, 0.4); }
.as-pill.blocked { color: var(--red); border-color: rgba(255, 90, 78, 0.45); }
.as-pill.stale { color: var(--amber-2); border-color: rgba(255, 176, 0, 0.4); }
.as-pill.verb { color: var(--blue); border-color: rgba(106, 168, 255, 0.4); }
.as-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82em; color: var(--dim); }
.as-chip i { width: 0.7em; height: 0.7em; border-radius: 3px; display: inline-block; }
.as-link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.84em; font-weight: 500; }
.as-ui .as-linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--amber-2); font-size: 0.84em; font-weight: 500; }
.as-ui .as-linkbtn:hover { text-decoration: underline; }
.as-btn {
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); color: var(--text); border-radius: 8px; padding: 0.35em 0.8em;
  cursor: pointer; transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.as-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); }
.as-btn.primary { background: var(--amber); border-color: var(--amber); color: #1a1206; font-weight: 600; }
.as-btn.primary:hover { background: var(--amber-2); }
.as-btn.danger { color: #ffb3ad; border-color: rgba(255, 90, 78, 0.5); }

/* desk cards (cards.js): the owner's buttons on a Needs you card */
.as-cardx [hidden] { display: none !important; }
.as-cardx .cbody { color: var(--dim); font-size: 0.86em; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.as-cardx .opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.as-cardx .opts .as-btn { min-height: 2.2em; }
.as-cardx .opts .as-btn.letter { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; white-space: normal; }
.as-cardx .opts .as-btn.letter b { color: var(--amber-2); flex: none; }
.as-cardx .opts .as-btn:disabled { opacity: 0.4; cursor: default; }
.as-cardx .opts .as-btn.chosen:disabled { opacity: 0.85; box-shadow: 0 0 0 2px rgba(255, 176, 0, 0.55); }
.as-cardx.busy .t, .as-cardx.busy .cbody { opacity: 0.55; }
.as-cardx.done { opacity: 0.6; }
.as-cardx .reply { margin-top: 8px; }
.as-cardx textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 3.2em; font: inherit; font-size: 0.9em; color: var(--text);
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px;
}
.as-cardx textarea:focus { outline: none; border-color: rgba(255, 176, 0, 0.55); }
.as-cardx .rf { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 6px; }
.as-cardx .rf .count { margin-right: auto; color: var(--faint); font-size: 0.78em; }
.as-cardx .rf .count.over { color: var(--red); }
.as-cardx .st { font-size: 0.84em; margin-top: 6px; color: var(--dim); min-height: 0; }
.as-cardx .st:empty { display: none; }
.as-cardx .st.ok { color: var(--green); }
.as-cardx .st.err { color: #ffb3ad; }
.as-cardx .st.warn { color: var(--amber-2); }
.as-cardx .spin { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--amber); animation: as-spin 0.8s linear infinite; vertical-align: -0.1em; }
@keyframes as-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .as-cardx .spin { animation: none; } }
.as-cardnote { font-size: 0.84em; margin: 6px 0; color: var(--dim); }
.as-cardnote.err { color: #ffb3ad; }

/* boxes */
.as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 6px; }
.as-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: rgba(255, 255, 255, 0.025); }
.as-card .h { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.as-card .s { color: var(--dim); font-size: 0.82em; margin-top: 4px; }
.as-led { width: 0.6em; height: 0.6em; border-radius: 50%; display: inline-block; background: var(--faint); }
.as-led.on { background: var(--green); box-shadow: 0 0 8px rgba(61, 214, 140, 0.7); }
.as-meter { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); margin-top: 8px; overflow: hidden; }
.as-meter > b { display: block; height: 100%; border-radius: 3px; background: var(--amber); transition: width var(--t) var(--ease); }

/* activity sparklines */
.as-spark { display: grid; grid-template-columns: 9.5em 1fr 2.6em; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.as-spark svg { width: 100%; height: 26px; display: block; }
.as-spark .num { text-align: right; color: var(--dim); font-size: 0.86em; }
.as-axis { display: flex; justify-content: space-between; color: var(--faint); font-size: 0.72em; margin: 6px 0 0 calc(9.5em + 10px); padding-right: calc(2.6em + 10px); }

/* units */
.as-col-h { display: flex; justify-content: space-between; align-items: baseline; }
.as-col-h .num { color: var(--faint); font-size: 0.8em; }

/* the agent card, bottom left */
#as-agent {
  position: fixed; left: 12px; bottom: 12px; z-index: 5; width: min(400px, calc(100vw - 24px)); padding: 16px; opacity: 0;
  transform: translateY(8px); pointer-events: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
#as-agent.open { opacity: 1; transform: none; pointer-events: auto; }
#as-agent .top { display: grid; grid-template-columns: 3.6em 1fr auto; gap: 12px; align-items: center; }
.as-ui .mono-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.as-ui .mono-tile.has-img { background: #15171b !important; }
.as-row.with-face { grid-template-columns: 4px 2.4em 1fr auto; }
.as-row .mono-tile.face { width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; font: 600 0.8em/1 "Plex Sans", sans-serif; color: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
#as-agent .mono-tile { width: 3.6rem; height: 3.6rem; border-radius: 12px; display: grid; place-items: center; overflow: hidden; font: 600 1.25em/1 "Plex Sans", sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
#as-agent .name { font-size: 1.2em; font-weight: 600; }
#as-agent .film { color: var(--dim); font-size: 0.82em; }
#as-agent .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
#as-agent .now { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
#as-agent .now .k { font-size: 0.7em; letter-spacing: 0.12em; color: var(--faint); text-transform: uppercase; }
#as-agent .needs { margin-top: 12px; }
#as-agent .needs .h { color: var(--amber-2); font-weight: 600; font-size: 0.9em; }

/* shortcuts */
.as-keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
.as-keys kbd { justify-self: start; font-size: 0.82em; padding: 1px 7px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; color: var(--text); background: rgba(255, 255, 255, 0.04); white-space: nowrap; }
.as-keys span { color: var(--dim); }

/* settings (the mixing console, now in the same system) */
#as-console .src { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#as-console .src button { padding: 0.65em 0; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); cursor: pointer; font-weight: 600; letter-spacing: 0.06em; transition: all var(--t) var(--ease); }
#as-console .src button.on { background: var(--amber); color: #1a1206; border-color: var(--amber); }
#as-console .row { display: grid; grid-template-columns: 8.5em 1fr 3.4em; gap: 12px; align-items: center; margin: 8px 0; }
#as-console .row output { text-align: right; color: var(--amber-2); font-family: "Plex Mono", monospace; font-size: 0.86em; }
#as-console input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
#as-console input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--amber); border: 2px solid #1a1206; box-shadow: 0 0 0 3px rgba(255, 176, 0, 0.25); cursor: pointer; }
#as-console input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--amber); border: 2px solid #1a1206; cursor: pointer; }
#as-console .tog { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; }
#as-console .tog button { width: 2.8em; height: 1.55em; border-radius: 1em; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.08); position: relative; cursor: pointer; transition: background var(--t) var(--ease); }
#as-console .tog button::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.55em - 6px); height: calc(1.55em - 6px); border-radius: 50%; background: #d7dade; transition: transform var(--t) var(--ease); }
#as-console .tog button.on { background: var(--amber); border-color: var(--amber); }
#as-console .tog button.on::after { transform: translateX(1.25em); background: #1a1206; }
#as-console .src.fps { gap: 6px; }
#as-console .src.fps button { padding: 0.35em 0; font-size: 0.85em; }
#as-console .src.mic { grid-template-columns: repeat(2, 1fr); gap: 6px; }
#as-console .src.mic button { padding: 0.35em 0; font-size: 0.78em; }
#as-console .note { color: var(--faint); font-size: 0.8em; margin: 6px 0 0; }
#as-console .foot { margin-top: 14px; display: flex; justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) { #as-drawer, #as-agent, #as-bar button { transition: none; } }

/* portrait screens (aspect < 1: an upright monitor, a tablet or a phone held up). The toolbar becomes a tab bar along the bottom
   (icons, touch-sized), the drawer a bottom sheet above it, the agent card a sheet in the same place (the drawer covers it while
   open); the needs chip stays top left. Nothing here applies in landscape. */
@media (max-aspect-ratio: 999/1000) {
  .as-ui { --tab: 46px; --gap: 10px; --safe-b: env(safe-area-inset-bottom, 0px); --above-bar: calc(var(--gap) + var(--safe-b) + var(--tab) + 10px + 8px); }
  #as-bar {
    top: auto; right: auto; left: 50%; bottom: calc(var(--gap) + var(--safe-b)); transform: translateX(-50%);
    width: max-content; max-width: calc(100vw - 2 * var(--gap)); gap: 4px; padding: 4px; border-radius: 14px; justify-content: space-between;
  }
  #as-bar button { height: var(--tab); min-width: var(--tab); padding: 0 0.7em; justify-content: center; border-radius: 10px; }
  #as-bar button svg { width: 22px; height: 22px; }
  #as-bar button .dot { top: 3px; right: 3px; }
  #as-needs { top: calc(var(--gap) + env(safe-area-inset-top, 0px)); left: var(--gap); min-height: 44px; }
  #as-drawer, #as-agent {
    top: auto; right: auto; left: 50%; bottom: var(--above-bar); width: min(640px, calc(100vw - 2 * var(--gap)));
    transform: translate(-50%, 10px);
  }
  #as-drawer { z-index: 6; max-height: min(70vh, calc(100vh - var(--above-bar) - 64px)); border-radius: 18px; }
  #as-drawer.open, #as-agent.open { transform: translateX(-50%); }
  #as-agent { max-height: calc(100vh - var(--above-bar) - 64px); overflow: auto; }
  #as-drawer .x, #as-agent .top .as-btn { min-width: 44px; min-height: 44px; }
  .as-cardx .opts .as-btn, .as-cardx .rf .as-btn { min-height: 44px; min-width: 44px; }
  #as-drawer header { padding: 10px 12px 8px 16px; }
  #as-console .tog button { width: 3.2em; height: 1.8em; }
  #as-console .tog button::after { width: calc(1.8em - 6px); height: calc(1.8em - 6px); }
  #as-console .tog button.on::after { transform: translateX(1.4em); }
  #as-console .src button { min-height: 44px; }
  #as-console input[type=range] { height: 6px; margin: 12px 0; }
  #as-console input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; }
  #as-console input[type=range]::-moz-range-thumb { width: 22px; height: 22px; }
}
/* a phone held up: the tab bar spans the width, the eight icons share it evenly */
@media (max-aspect-ratio: 999/1000) and (max-width: 600px) {
  #as-bar { left: var(--gap); right: var(--gap); transform: none; width: auto; max-width: none; gap: 2px; }
  #as-bar button { flex: 1 1 0; min-width: 0; padding: 0; }
  #as-console .row { grid-template-columns: 6.6em 1fr 2.8em; gap: 8px; }
  .as-spark { grid-template-columns: 7em 1fr 2.2em; }
  .as-axis { margin-left: calc(7em + 10px); padding-right: calc(2.2em + 10px); }
}

/* pick up to talk (talk.js): the talk panel, bottom left where the agent card sits; the owner's lines on the right in amber */
#as-talk {
  position: fixed; left: 12px; bottom: 12px; z-index: 6; width: min(440px, calc(100vw - 24px)); max-height: min(66vh, 620px);
  display: flex; flex-direction: column; padding: 14px; gap: 10px; opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
#as-talk.open { opacity: 1; transform: none; pointer-events: auto; }
#as-talk .top { display: grid; grid-template-columns: 2.8em 1fr auto auto auto auto; gap: 10px; align-items: center; }
/* the live mic (talk.js dictation): a pulsing red dot in the header, the mic button lit, a strip with the level and the words so far */
#as-talk .micdot { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255, 90, 78, 0.6); animation: as-live 1.4s ease-out infinite; }
#as-talk .micdot[hidden] { display: none; }
#as-talk .micdot.held { background: var(--faint); animation: none; }
@keyframes as-live { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 78, 0.6); } 70% { box-shadow: 0 0 0 0.6em rgba(255, 90, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 78, 0); } }
#as-talk .mic.live { background: rgba(255, 90, 78, 0.22); border-color: rgba(255, 90, 78, 0.7); color: #ffd2cd; }
.as-dict { border: 1px solid rgba(255, 90, 78, 0.45); border-radius: 12px; padding: 8px 10px; background: rgba(255, 90, 78, 0.07); display: grid; gap: 6px; }
.as-dict[hidden] { display: none; }
.as-dict.paused, .as-dict.sending, .as-dict.failed, .as-dict.held { border-color: var(--line-2); background: rgba(255, 255, 255, 0.04); }
.as-dict .dh { display: flex; align-items: center; gap: 8px; font-size: 0.84em; }
.as-dict .live { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--red); flex: none; animation: as-live 1.4s ease-out infinite; }
.as-dict:not(.recording) .live, .as-dict.held .live { background: var(--faint); animation: none; }
.as-dict .lbl { font-weight: 600; }
.as-dict .tm, .as-dict .n { font: 0.86em "Plex Mono", monospace; color: var(--dim); }
.as-dict .n { margin-left: auto; }
.as-dict .meter { flex: 0 0 5em; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.as-dict .meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--amber)); transition: width 90ms linear; }
.as-dict .tx { max-height: 7.5em; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--dim); font-size: 0.9em; }
.as-dict .tx:empty, .as-dict .stuck:empty { display: none; }
.as-dict .stuck { color: var(--amber-2); font-size: 0.8em; }
.as-dict .acts { display: flex; gap: 6px; justify-content: flex-end; }
.as-dict .acts .as-btn { padding: 0.25em 0.7em; font-size: 0.84em; }
.as-dict .acts .as-btn[hidden] { display: none; }
.as-dict kbd { font: 0.78em "Plex Mono", monospace; opacity: 0.7; margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { #as-talk .micdot, .as-dict .live { animation: none; } }
/* the summon: a glowing pale-gold tag and Dismiss (or a quiet Summon for someone who isn't) */
#as-talk .sum { display: inline-flex; gap: 6px; align-items: center; }
#as-talk .sum:empty { display: none; }
#as-talk .as-pill.summoned { color: #fff3cf; border-color: rgba(255, 240, 192, 0.7); background: rgba(255, 228, 150, 0.16); box-shadow: 0 0 12px rgba(255, 228, 150, 0.45); font-weight: 600; }
#as-talk .sum .as-btn { padding: 0.25em 0.7em; font-size: 0.82em; }
#as-talk .msg.playing { border-color: rgba(255, 240, 192, 0.7); box-shadow: 0 0 0 1px rgba(255, 240, 192, 0.25), 0 0 14px rgba(255, 228, 150, 0.18); }
/* No noise at all (M): the muted speaker at the head of the bar */
#as-bar #as-muted { color: #ffb3ad; border-color: rgba(255, 90, 78, 0.5); background: rgba(255, 90, 78, 0.14); }
#as-bar #as-muted[hidden] { display: none; }
#as-talk .who .mono-tile { width: 2.8rem; height: 2.8rem; border-radius: 10px; display: grid; place-items: center; overflow: hidden; font: 600 1em/1 "Plex Sans", sans-serif; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
#as-talk .name { font-size: 1.1em; font-weight: 600; }
#as-talk .film { color: var(--dim); font-size: 0.78em; }
#as-talk .log { flex: 1 1 auto; min-height: 7em; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; overscroll-behavior: contain; }
#as-talk .log .empty { color: var(--faint); font-size: 0.86em; margin: auto 0; text-align: center; }
#as-talk .msg { max-width: 84%; padding: 8px 11px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); }
#as-talk .msg.me { align-self: flex-end; background: rgba(255, 176, 0, 0.13); border-color: rgba(255, 176, 0, 0.32); border-bottom-right-radius: 4px; }
#as-talk .msg.them { align-self: flex-start; border-bottom-left-radius: 4px; }
#as-talk .msg.failed { border-color: rgba(255, 90, 78, 0.5); }
#as-talk .msg .t { white-space: pre-wrap; overflow-wrap: anywhere; }
#as-talk .msg .t.dim { color: var(--dim); font-style: italic; }
#as-talk .msg .m { display: flex; gap: 8px; align-items: center; margin-top: 4px; font: 0.72em "Plex Mono", monospace; color: var(--faint); }
#as-talk .msg .m .st { color: var(--dim); }
#as-talk .msg .m .st.heard { color: var(--amber-2); }
#as-talk .msg .m .st.answered { color: var(--green); }
#as-talk .msg .m .st.failed { color: var(--red); }
#as-talk .msg .play { padding: 1px 8px; font-size: 1em; }
#as-talk .err { color: #ffb3ad; font-size: 0.84em; min-height: 0; }
#as-talk .err:empty { display: none; }
#as-talk .say { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: end; }
#as-talk textarea {
  resize: none; min-height: 2.4em; max-height: 120px; padding: 0.55em 0.75em; border-radius: 10px; border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.05); color: var(--text); font: inherit; line-height: 1.3;
}
#as-talk textarea:focus { outline: none; border-color: rgba(255, 176, 0, 0.55); }
#as-talk .mic { display: inline-flex; align-items: center; gap: 4px; height: 2.4em; touch-action: none; user-select: none; }
#as-talk .mic svg { width: 1.2em; height: 1.2em; }
#as-talk .mic.on { background: rgba(255, 90, 78, 0.22); border-color: rgba(255, 90, 78, 0.6); color: #ffd2cd; }
#as-talk .mic .rec { font: 0.78em "Plex Mono", monospace; }
#as-talk .send { height: 2.4em; }
#as-talk .count { font: 0.72em "Plex Mono", monospace; color: var(--faint); text-align: right; }
#as-talk .count:empty { display: none; }
/* the talk panel rides above an on-screen keyboard: talk.js sets --kb (px) from the visual viewport while one is up */
#as-talk { bottom: calc(12px + var(--kb, 0px)); max-height: min(66vh, 620px, calc(100vh - var(--kb, 0px) - 24px)); }
/* portrait: a bottom sheet above the tab bar like the drawer and the agent card (it covers the card), touch-sized controls; with the
   keyboard up the tab bar is behind it, so the sheet sits on the keyboard instead and the box stays in sight */
@media (max-aspect-ratio: 999/1000) {
  #as-talk {
    --sheet-b: max(var(--above-bar), calc(var(--kb, 0px) + var(--gap)));
    left: 50%; bottom: var(--sheet-b); width: min(640px, calc(100vw - 2 * var(--gap))); border-radius: 18px; z-index: 7;
    max-height: min(62vh, calc(100vh - var(--sheet-b) - 64px)); transform: translate(-50%, 10px);
  }
  #as-talk.open { transform: translateX(-50%); }
  #as-talk .x, #as-talk .mic, #as-talk .send { min-width: 44px; min-height: 44px; }
  #as-talk textarea { font-size: 16px; min-height: 44px; }   /* 16 px: iOS doesn't zoom the page into the field */
  /* a narrow header: the Summoned tag and Dismiss go on their own row under the name */
  #as-talk .top { grid-template-columns: 2.8em 1fr auto auto; }
  #as-talk .sum { grid-row: 2; grid-column: 1 / -1; }
  #as-talk .sum .as-btn { min-height: 40px; }
}

/* event pills over the minis (the game places them each frame: Lot/LotPills): small glass, the agent's name, what they just did,
   a dot in the event's colour (started blue, ready amber, done/merged green, blocked red). The lot shows through; no paper. */
.as-pills { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.as-evpill {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; max-width: min(340px, 72vw);
  padding: 6px 12px 6px 10px; border-radius: 14px; font-size: 0.8em; line-height: 1.25; color: var(--text);
  background: rgba(12, 13, 16, 0.72); border: 1px solid var(--line-2);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  will-change: transform, opacity;
}
.as-evpill::after { /* a small tail toward the head */
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg);
  background: rgba(12, 13, 16, 0.72); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.as-evpill .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.as-evpill .l1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-evpill b { font-weight: 600; }
.as-evpill .t { color: var(--dim); }
.as-evpill .s { color: var(--faint); font-size: 0.86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-evpill .s:empty { display: none; }
.as-evpill.greet { border-color: rgba(255, 176, 0, 0.45); }
.as-evpill.greet .t { color: var(--text); }
@media (max-aspect-ratio: 999/1000) { .as-evpill { font-size: 0.78em; max-width: 78vw; } }