/* Office HQ, cozy edition. Palette and shapes follow design/cozy-art-direction.md. */
:root {
  --font: "Nunito", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --sky: #F6E7D6;
  --panel: #FFF8EE; --panel-2: #F8ECDD; --line: #EBDAC5;
  --ink: #4A3A32; --ink-2: #7B665A; --ink-3: #A8958A;
  --accent: #E8846B; --accent-ink: #FFFFFF; --accent-bg: #FCE3DA;
  --ok: #4E9F78; --ok-bg: #E1F2E7;
  --warn: #A8741F; --warn-bg: #FFF1D6;
  --bad: #C4553D; --bad-bg: #FBE1DA;
  --chip: rgba(255, 248, 238, .94); --chip-ink: #4A3A32;
  --shadow: 0 8px 24px rgba(120, 80, 50, .16), 0 1px 2px rgba(120, 80, 50, .10);
  --me: #E8846B; --me-ink: #FFFFFF; --them: #FFFFFF;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --panel: #2F2724; --panel-2: #3A302C; --line: #4B3F39;
    --ink: #F6EBDD; --ink-2: #CDBBAA; --ink-3: #9C8A7E;
    --accent: #F29A80; --accent-ink: #2F2724; --accent-bg: #4A3029;
    --ok: #7ED3A6; --ok-bg: #22392D;
    --warn: #F3C86E; --warn-bg: #45381F;
    --bad: #FF9C86; --bad-bg: #4A2A24;
    --chip: rgba(47, 39, 36, .92); --chip-ink: #F6EBDD;
    --shadow: 0 8px 24px rgba(0, 0, 0, .35);
    --me: #F29A80; --me-ink: #2F2724; --them: #3A302C;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sky); font-family: var(--font); color: var(--ink); }
body.night { --sky: #262A4A; }
#world { position: fixed; inset: 0; }
/* The canvas handles its own drags and pinches; stop the browser panning, zooming or popping the magnifier. */
#world canvas { display: block; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#world canvas:active { cursor: grabbing; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

/* World labels follow the scene's day/night, not the UI theme. */
.lbl { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; will-change: transform; }
.lbl.clickable > * { pointer-events: auto; cursor: pointer; }
.lbl.clickable > .person-card { pointer-events: none; cursor: default; }
.person-card {
  display: flex; flex-direction: column; gap: 2px; max-width: 200px; white-space: nowrap;
  background: #FFFDF8; color: #4A3A32; padding: 6px 10px 6px 8px; border-radius: 12px; pointer-events: none;
  box-shadow: 0 2px 0 rgba(120, 80, 50, .12), 0 4px 10px rgba(120, 80, 50, .14);
}
.person-card > * { overflow: hidden; text-overflow: ellipsis; }
.person-card b { font: 800 13px/1.2 var(--font); display: flex; align-items: center; gap: 6px; }
.person-card i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent); }
.person-card span { font: 600 11.5px/1.2 var(--font); color: #8A7465; }
.person-card small { font: 600 11px/1.2 var(--font); color: #8A7465; }
body.night .person-card { background: #3A302C; color: #F6EBDD; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
body.night .person-card span, body.night .person-card small { color: #CDBBAA; }
.bubble {
  position: relative; white-space: nowrap; font: 700 12.5px/1 var(--font);
  background: #FFFFFF; color: #4A3A32; padding: 7px 11px; border-radius: 14px;
  box-shadow: 0 2px 0 rgba(120, 80, 50, .10), 0 6px 14px rgba(120, 80, 50, .14);
}
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px;
  background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 3px 0;
}
.bubble.idea { background: #FFF3DC; }
.bubble.talk { background: #E6F1FA; color: #3C6B92; }
.bubble.chat { background: #FFFFFF; color: #8A7465; font: 800 17px/1 var(--font); padding: 6px 12px 7px; letter-spacing: 2px; animation: chatpop .18s ease-out; }
.bubble.zz { background: #ECE6FB; color: #7C6BC6; font: 900 15px/1 var(--font); padding: 6px 12px 7px; letter-spacing: 1px; }
.bubble.zz span { display: inline-block; animation: zfloat 2.4s ease-in-out infinite; }
.bubble.zz span:nth-child(2) { font-size: 12px; animation-delay: .3s; }
.bubble.zz span:nth-child(3) { font-size: 10px; animation-delay: .6s; }
.bubble.zz small { font: 800 11px/1 var(--font); letter-spacing: 0; margin-left: 4px; }
.bubble.hire { background: #FFF8EE; color: #E8846B; border: 2px dashed #E8846B; font-weight: 900; font-size: 14px; padding: 7px 13px; }
.bubble.hire::after { display: none; }
.sign {
  font: 900 14px/1 var(--font); color: #FFF8EE; background: #C98F5E; padding: 7px 12px 8px;
  border-radius: 10px; box-shadow: 0 3px 0 #A06E46, 0 6px 14px rgba(120, 80, 50, .2);
  display: inline-flex; gap: 7px; align-items: center; white-space: nowrap;
}
.sign i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #FFF8EE; }
.sign.soft { background: rgba(255, 253, 248, .92); color: #8A7465; box-shadow: 0 4px 12px rgba(120, 80, 50, .14); font-weight: 800; }
.sign small { font-weight: 700; font-size: 11px; opacity: .8; }
.sign.wing { font-size: 17px; padding: 9px 16px 10px; background: #FFF8EE; color: #6B4E3D; box-shadow: 0 3px 0 var(--c), 0 8px 18px rgba(120, 80, 50, .2); border: 2px solid var(--c); }
.sign.wing small { text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
/* A team room's sign: a cream pill with the role's colour under it. Hidden when zoomed far out. */
.sign.team { font-size: 13px; background: #FFF8EE; color: #6B4E3D; box-shadow: 0 2px 0 var(--c), 0 6px 14px rgba(120, 80, 50, .16); }
.sign.soft.team { font-size: 11.5px; box-shadow: 0 4px 12px rgba(120, 80, 50, .14); }
body.far .sign.team { display: none; }
body.night .sign.team { background: #3A302C; color: #F6EBDD; }
body.night .sign.soft.team { background: rgba(58, 48, 44, .9); color: #CDBBAA; }
.chip .role-dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.chip i.role-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); display: inline-block; }
body.night .sign.wing { background: #3A302C; color: #F6EBDD; }
/* Floors: the round badge (G, 1, 2…) on a project's plank, the elevator's indicator, panel rows and nav. */
.badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: var(--c, #C9A88A); color: #4A3426; font: 900 12px/1 var(--font); }
.sign.lift { font-size: 13px; background: #FFF8EE; color: #6B4E3D; box-shadow: 0 2px 0 #C9A24B, 0 6px 14px rgba(120, 80, 50, .16); }
body.far .sign.lift { display: none; }
body.night .sign.lift { background: #3A302C; color: #F6EBDD; }
.chip.project .project-name { display: inline-flex; align-items: center; gap: 6px; }
.chip.floor-other { opacity: .72; }
.chip.floor-other:hover { opacity: 1; }
#fade { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; background: #8E8174; transition: opacity .5s ease; }
#fade.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #fade { transition: none; } }
.lift-list { display: flex; flex-direction: column; max-height: 60vh; overflow: auto; border-radius: 16px; background: var(--panel-2); }
.lift-row { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left;
  padding: 11px 13px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: 800 14px/1.3 var(--font); }
.lift-row:first-child { border-top: 0; }
.lift-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--bar, 0) * 100%); background: var(--c); opacity: .14; pointer-events: none; }
button.lift-row { cursor: pointer; }
button.lift-row:hover, button.lift-row:focus-visible { background: rgba(0, 0, 0, .05); outline: none; box-shadow: inset 0 0 0 2px var(--c); }
.lift-row .count { color: var(--ink-2); font-weight: 700; font-size: 12px; }
.lift-row .you { grid-column: 2 / 4; font-size: 12px; color: var(--ink-2); font-weight: 800; }
.lift-row.here { opacity: .7; }
.sign.warn { background: #FBE1DA; color: #C4553D; box-shadow: 0 4px 12px rgba(120, 80, 50, .14); font-weight: 800; }
body.night .bubble.zz { background: #3B3566; color: #CFC4FF; }
body.night .sign.soft { background: rgba(58, 48, 44, .9); color: #CDBBAA; }
@keyframes zfloat { 50% { transform: translateY(-3px); } }
@keyframes chatpop { from { transform: scale(.6); opacity: 0; } }

/* HUD */
.chip {
  background: var(--chip); color: var(--chip-ink); font: 700 13px/1 var(--font);
  padding: 9px 14px; border-radius: 999px; box-shadow: var(--shadow); border: 0;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
button.chip { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
button.chip:hover { filter: brightness(.97); }
button.chip.warn { background: var(--warn-bg); color: var(--warn); font-weight: 800; }
.field-head { display: flex; align-items: baseline; gap: 8px; }
.field-head .optional { font-weight: 600; }
.token-state { font-weight: 800; font-size: 12px; margin-left: auto; }
.token-state.ok { color: var(--ok); }
.token-state.missing { color: var(--warn); }
#hud-top { position: fixed; top: 16px; left: 16px; right: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; pointer-events: none; }
#hud-top > * { pointer-events: auto; }
#hud-top .spacer { flex: 1; pointer-events: none; }
#rooms-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.chip.project { display: inline-flex; align-items: center; gap: 6px; padding: 4px; box-shadow: var(--shadow), inset 0 0 0 2px var(--c); }
.chip.project .project-name { font-weight: 900; padding: 0 6px 0 10px; }
.chip.project button.project-name { background: none; border: 0; color: inherit; font-family: inherit; font-size: inherit; cursor: pointer; }
.chip.project .chip { box-shadow: none; background: var(--panel-2); padding: 6px 11px; }
.list > .project-row { border-left: 4px solid var(--c); padding-left: 10px; display: grid; gap: 6px; }
.project-row i.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); display: inline-block; margin-right: 6px; }
.chip i.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); display: inline-block; }
.chip .count { font-weight: 800; font-size: 11px; color: var(--ink-2); background: var(--panel-2); border-radius: 999px; padding: 3px 7px; }
#hud-help { position: fixed; left: 16px; bottom: 16px; font-weight: 600; font-size: 12px; color: var(--ink-2); }
kbd {
  font: 800 12px/1 var(--mono); background: var(--panel); color: var(--ink);
  border: 1.5px solid var(--line); border-bottom-width: 3px; border-radius: 7px; padding: 3px 7px;
}
#prompt {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; font-size: 15px; font-weight: 700; white-space: nowrap;
  transition: left .2s; cursor: pointer;
}
#prompt kbd { background: var(--accent); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 70%, #000); font-size: 13px; padding: 4px 9px; }
#prompt .role { color: var(--ink-2); font-weight: 600; }
#toasts { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 30; align-items: center; transition: left .2s; }
body.panel-open #toasts, body.panel-open #prompt { left: calc((100vw - 432px) / 2); }
.toast { background: var(--panel); color: var(--ink); padding: 10px 16px; border-radius: 14px; font: 700 14px/1.35 var(--font); max-width: 520px; box-shadow: var(--shadow); }
.toast.bad { background: var(--bad-bg); color: var(--bad); }
.toast.ok { background: var(--ok-bg); color: var(--ok); }

/* Loading */
#loading { position: fixed; inset: 0; display: grid; place-items: center; background: var(--sky); z-index: 50; transition: opacity .5s; }
#loading.gone { opacity: 0; pointer-events: none; }
.loading-card { text-align: center; }
.loading-plant { font-size: 44px; animation: zfloat 2.4s ease-in-out infinite; }
.loading-card h1 { font: 900 30px/1.2 var(--font); margin: 6px 0; }
.loading-card p { color: var(--ink-2); margin: 0; font-weight: 600; }
/* Signing in, the card sits on the sky in both themes, so it brings its own panel. */

/* Who else is in the office (shared HQ) */
#who { display: flex; align-items: center; gap: 0; font-weight: 700; }
#who button.person { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px; border-radius: 8px; }
#who button.person:hover, #who button.person:focus-visible { background: color-mix(in srgb, currentColor 24%, transparent); outline: 2px solid currentColor; outline-offset: 1px; }
#who i.dot { box-shadow: 0 0 0 2px var(--chip); margin-right: 0; }

/* Panel */
#panel {
  position: fixed; top: 72px; right: 16px; bottom: 16px; width: 400px;
  background: var(--panel); color: var(--ink); border-radius: 22px;
  box-shadow: 0 18px 48px rgba(120, 80, 50, .22), 0 2px 6px rgba(120, 80, 50, .12);
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); z-index: 20;
}
@media (min-width: 721px) {
  #panel.chat-window { top: auto; height: min(520px, calc(100vh - 88px)); }
}
#panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; }
#panel-title { flex: 1; min-width: 0; }
#panel-body { flex: 1; overflow: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
#panel-body.chat-mode { padding: 0; gap: 0; overflow: hidden; }
.icon-btn { width: 34px; height: 34px; border-radius: 12px; border: 0; background: var(--panel-2); color: var(--ink-2); font: 800 15px/1 var(--font); cursor: pointer; flex: none; padding: 0; }
.title-row { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font: 900 19px/1 var(--font); flex: none;
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px color-mix(in srgb, var(--c) 40%, transparent); }
.name { font: 900 18px/1.15 var(--font); margin: 0; }
.sub { font: 600 13px/1.35 var(--font); color: var(--ink-2); margin: 0; }
h2 { font: 900 15px/1.2 var(--font); margin: 4px 0 0; }
p.hint { font: 600 13px/1.5 var(--font); color: var(--ink-2); margin: 0; }
code { font: 700 12.5px var(--mono); background: color-mix(in srgb, currentColor 10%, transparent); padding: 1px 5px; border-radius: 6px; }

button, .button {
  font: 800 14px/1 var(--font); border-radius: 14px; padding: 10px 15px; cursor: pointer;
  border: 0; background: var(--panel-2); color: var(--ink); text-decoration: none; display: inline-block;
}
button:hover, .button:hover { filter: brightness(.97); }
button.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 70%, #000); }
button.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 70%, #000); }
button.danger { color: var(--bad); background: var(--bad-bg); }
button:disabled { opacity: .55; cursor: default; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

label.field, div.field { display: flex; flex-direction: column; gap: 6px; font: 800 13px/1 var(--font); color: var(--ink-2); }
input[type=text], input[type=password], textarea, select {
  font: 600 14px/1.45 var(--font); color: var(--ink); background: var(--panel-2); width: 100%;
  border: 1.5px solid transparent; border-radius: 14px; padding: 10px 13px; outline: none;
}
/* iOS zooms the page into any field under 16px when you tap it. */
@media (pointer: coarse) { input[type=text], input[type=password], textarea, select { font-size: 16px; } }
textarea { resize: vertical; min-height: 90px; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); background: var(--panel); }
.look-edit { display: flex; flex-direction: column; gap: 14px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid var(--line); box-shadow: none; color: var(--ink-2); font-size: 12px; }
.swatch.on { outline: 3px solid var(--accent); outline-offset: 2px; }
label.check { display: inline-flex; gap: 6px; align-items: center; font: 700 14px/1 var(--font); color: var(--ink); cursor: pointer; }
.error-text { color: var(--bad); font: 700 13px/1.3 var(--font); }

.tabs { display: flex; gap: 4px; margin: 0 16px 4px; padding: 4px; background: var(--panel-2); border-radius: 14px; }
.tabs button { flex: 1; border: 0; background: transparent; font: 800 13px/1 var(--font); color: var(--ink-2); padding: 8px; border-radius: 10px; box-shadow: none; }
.tabs button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(120, 80, 50, .15); }
.tab-body { flex: 1; overflow: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 14px; }

/* Chat */
.chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.messages { flex: 1; overflow: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 84%; padding: 10px 13px; border-radius: 18px; font: 600 14px/1.45 var(--font); overflow-wrap: anywhere; }
.msg.me { align-self: flex-end; background: var(--me); color: var(--me-ink); border-bottom-right-radius: 6px; white-space: pre-wrap; }
.msg.them { align-self: flex-start; background: var(--them); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg.them.streaming { white-space: pre-wrap; }
.msg .who { font: 900 12px/1.2 var(--font); margin-bottom: 4px; }
.msg p { margin: 0 0 8px; } .msg p:last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 0 0 8px; padding-left: 20px; }
.msg pre { background: color-mix(in srgb, currentColor 8%, transparent); padding: 8px; border-radius: 10px; overflow: auto; margin: 0 0 8px; }
.msg pre code { background: none; padding: 0; }
.msg a { color: inherit; }
.activity { align-self: flex-start; font: 700 12px/1.3 var(--font); color: var(--ink-3); padding-left: 6px; }
.ticket-chip { align-self: flex-start; font: 800 13px/1.3 var(--font); background: var(--ok-bg); color: var(--ok); padding: 7px 12px; border-radius: 12px; text-decoration: none; }
.err-line { align-self: flex-start; font: 700 13px/1.4 var(--font); background: var(--bad-bg); color: var(--bad); padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; max-width: 88%; }
.empty-note { align-self: center; text-align: center; max-width: 85%; margin: auto 0; font: 600 13px/1.5 var(--font); color: var(--ink-2); }
.day-note { align-self: center; text-align: center; max-width: 85%; font: 800 11px/1.4 var(--font); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.tag-meeting { font: 800 10px/1 var(--font); padding: 3px 6px; border-radius: 6px; background: var(--warn-bg); color: var(--warn); margin-left: 4px; vertical-align: 1px; }
.composer { border-top: 1px solid var(--line); padding: 12px 16px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.to-run { flex-basis: 100%; display: flex; align-items: center; gap: 6px; font: 800 12px/1.3 var(--font); color: var(--ink-2); cursor: pointer; }
.to-run[hidden] { display: none; }
.to-run input { width: auto; margin: 0; accent-color: var(--accent); }
.run-note { align-self: flex-end; font: 700 12px/1.3 var(--font); color: var(--ink-3); padding-right: 6px; margin-top: -4px; }
.composer textarea { flex: 1; min-height: 44px; max-height: 160px; resize: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.att-note { flex-basis: 100%; font: 700 13px/1.4 var(--font); background: var(--bad-bg); color: var(--bad); padding: 6px 12px; border-radius: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-note[hidden], .tray[hidden], .drop-veil[hidden] { display: none; }
.tray { flex-basis: 100%; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.tray-item { position: relative; flex: none; height: 56px; }
.tray-item > img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); display: block; }
.tray-x { position: absolute; top: -6px; right: -6px; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; font-size: 0; cursor: pointer; box-shadow: none; }
.tray-x::before { content: '✕'; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--panel); font: 800 11px/20px var(--font); text-align: center; }
.file-chip { box-sizing: border-box; height: 56px; min-width: 120px; max-width: 180px; padding: 10px 28px 10px 10px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.file-chip .att-name { font: 800 12px/1.2 var(--font); color: var(--ink); white-space: nowrap; }
.file-chip .att-size { font: 700 11px/1.2 var(--font); color: var(--ink-3); white-space: nowrap; }
.att-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg.me > .att-grid:first-child { margin-top: 0; }
.att-grid .file-chip { height: auto; padding: 8px 10px; background: rgba(255, 255, 255, .2); border-color: transparent; }
.att-grid .file-chip .att-name, .att-grid .file-chip .att-size { color: var(--me-ink); }
.att-thumb { display: block; max-width: 100%; }
.att-thumb img { display: block; max-width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; }
.att-thumb .pending { opacity: .6; }
.drop-veil { position: absolute; inset: 0 0 auto 0; background: color-mix(in srgb, var(--accent-bg) 90%, transparent); display: flex; align-items: center; justify-content: center; font: 800 16px/1 var(--font); color: var(--accent); pointer-events: none; z-index: 5; }
.drop-veil::after { content: ''; position: absolute; inset: 10px; border: 2px dashed var(--accent); border-radius: 14px; }
#emp-tab { position: relative; }
.composer .primary { flex: none; }
@media (max-width: 720px) { .att-thumb img { max-height: 140px; } }
@media (max-height: 360px) { .att-note { display: none; } }
.typing { display: inline-flex; gap: 3px; vertical-align: middle; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }

/* Lists and boards */
.list { display: flex; flex-direction: column; background: var(--panel-2); border-radius: 16px; overflow: hidden; }
.list > * { padding: 10px 13px; border-top: 1px solid var(--line); font: 700 14px/1.35 var(--font); display: flex; gap: 8px; align-items: center; }
.list > *:first-child { border-top: 0; }
.list a { color: var(--ink); text-decoration: none; }
.list a:hover { text-decoration: underline; }
.pill { font: 800 12px/1 var(--font); padding: 6px 10px; border-radius: 999px; background: var(--panel); color: var(--ink-2); white-space: nowrap; }
.pill.todo { background: var(--accent-bg); color: var(--accent); }
.pill.progress { background: var(--warn-bg); color: var(--warn); }
.pill.done { background: var(--ok-bg); color: var(--ok); }
.pill.failed { background: var(--bad-bg); color: var(--bad); }
.notes { font: 600 14px/1.55 var(--font); background: var(--panel-2); padding: 12px 14px; border-radius: 16px; }
.notes p, .notes ul { margin: 0 0 8px; } .notes ul { padding-left: 20px; }
.diff { font: 600 12.5px/1.45 var(--mono); display: flex; flex-direction: column; gap: 4px; }
.diff div { padding: 5px 9px; border-radius: 9px; white-space: pre-wrap; }
.diff .add { background: var(--ok-bg); color: var(--ok); }
.diff .del { background: var(--bad-bg); color: var(--bad); }
.stage { display: flex; align-items: center; gap: 8px; }
.stage .num { width: 24px; height: 24px; border-radius: 50%; background: var(--c, var(--accent)); color: #fff; display: grid; place-items: center; font: 900 12px/1 var(--font); flex: none; }
.stage .label { flex: 1; }
.stage button { padding: 6px 9px; font-size: 13px; background: var(--panel); }

@media (max-width: 720px) {
  .lift-row::before { display: none; }
  .lift-row { grid-template-columns: auto 1fr; }
  .lift-row .count { grid-column: 2; }
  #hud-help, #help-btn { display: none; }
  #hud-top { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; top: 10px; left: 10px; right: 0; padding-right: 10px; }
  #hud-top::-webkit-scrollbar { display: none; }
  #rooms-nav { flex-wrap: nowrap; }
  #hud-top .chip { flex: none; font-size: 12px; padding: 8px 12px; }
  .bubble { font-size: 11.5px; }
  .sign.team { font-size: 11.5px; }
  .sign.team .nm { display: none; }
  #panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 62vh; border-radius: 22px 22px 0 0; }
  #panel.chat-window { height: 52vh; min-height: 300px; }
  body.panel-open #toasts, body.panel-open #prompt { left: 50%; }
  #prompt { bottom: 20px; font-size: 14px; }
}

/* The way in: everyone who works here, as a list to pick yourself from. */
.list.players > button.player { background: none; border: 0; border-radius: 0; box-shadow: none; width: 100%; text-align: left; cursor: pointer; color: inherit; }
.list.players > button.player:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.list.players > button.player.on { background: var(--accent-bg); color: var(--accent); }
.list.players .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); display: inline-block; flex: none; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.list select { background: var(--panel); }
p.hint.warn { color: var(--warn); background: var(--warn-bg); padding: 8px 10px; border-radius: 10px; }

/* sign in with GitHub */
button.wide { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 8px; }
button.link { background: none; border: 0; box-shadow: none; padding: 0; color: var(--ink-2); text-decoration: underline; font: 600 13px var(--font); cursor: pointer; }
.code { font: 800 28px/1.2 var(--mono); letter-spacing: 0.06em; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, currentColor 8%, transparent); user-select: all; }

/* badges */
#badge-btn { display: inline-flex; align-items: center; gap: 6px; }
#badge-btn[hidden] { display: none; }
.avatar-disc { position: relative; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; background: var(--c); color: #4A3A32; font: 800 8px/1 var(--font); }
.avatar-disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#badge-pop { position: fixed; z-index: 30; width: 280px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px 14px; border-radius: 16px; background: #FFFDF8; color: #4A3A32; box-shadow: 0 2px 0 rgba(120, 80, 50, .12), 0 10px 28px rgba(120, 80, 50, .24); animation: badge-in 120ms ease-out; outline: none; }
#badge-pop:focus-visible { outline: 2px solid #C4553D; }
@keyframes badge-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { #badge-pop { animation: none; } }
.badge-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(120, 80, 50, .18); }
.badge-head .avatar-disc { width: 40px; height: 40px; font-size: 15px; }
.badge-rooms { padding-top: 8px; font: 700 13px/1.4 var(--font); }
.badge-rooms.scroll { max-height: 260px; overflow: auto; }
.badge-rooms .opens { margin: 0 0 6px; font-weight: 800; }
.badge-rooms h3 { margin: 8px 0 2px; font: 800 12px/1.2 var(--font); text-transform: uppercase; letter-spacing: .06em; color: #8A7465; }
.badge-rooms ul { margin: 0; padding: 0 0 0 10px; list-style: none; }
.badge-rooms .sub { display: block; font-weight: 600; font-size: 12px; color: #8A7465; }
@media (max-width: 720px) { #badge-pop { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; border-radius: 16px 16px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); } }
body.night #badge-pop { background: #3A302C; color: #F6EBDD; }
body.night .badge-rooms h3, body.night .badge-rooms .sub { color: #CDBBAA; }
/* New project form: a chip per picked repo, the star marks the home repo. */
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; border-radius: 999px; background: var(--panel-2); font: 700 13px/1.2 var(--font); }
.pchip button { background: none; border: 0; box-shadow: none; padding: 0 3px; cursor: pointer; color: inherit; font: inherit; }
.pchip .star { color: var(--accent); }
.pchip .star:not(.on) { opacity: .6; }
.pchip .star:not(button) { cursor: default; }