/* teamwear.ai chat — dark theme after the prototype (D:\teamwearai_prototype):
   the page scrolls, the composer is docked, the preview floats. */
:root {
  --bg: #0b0b0f;
  --surface: #14141b;
  --surface-2: #181822;
  --ink: #ececf2;
  --muted: #8b8ba3;
  --line: #26263a;
  --line-strong: #3d3d58;
  --field: #1c1c26;
  --accent: #00e0a4;
  --accent-dim: #00b586;
  --accent-ink: #04140f;
  --user: #1b2b3a;
  --user-line: #243b52;
  --user-ink: #ececf2;
  --danger: #e5484d;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.45);
  --wrap: 760px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* the hidden attribute must beat the display rules below */
html { scroll-behavior: auto; }   /* the auto-pin needs instant scrolls: a smooth one is still moving when the next chunk lands */
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; min-height: 100vh; }
button, input, textarea, select { font: inherit; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; }
.muted { color: var(--muted); }

/* ---- header ---- */
.top { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: rgba(11,11,15,.92); backdrop-filter: blur(8px); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: .2px; }
.brand .logo { display: block; height: 26px; width: auto; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.top-right { display: flex; gap: 10px; align-items: center; }
.status { font-size: 11px; color: var(--muted); border: 1px solid var(--line); padding: 2px 8px; border-radius: 99px; }
.model { font-size: 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 99px; padding: 4px 10px; max-width: 200px; cursor: pointer; }
.model:focus { outline: none; border-color: var(--accent-dim); }
.status.bad { color: #ff7b7b; border-color: #4a2626; }

/* ---- the thread (document flow; bottom padding is set from the dock's height) ---- */
.thread { display: flex; flex-direction: column; gap: 14px; padding: 20px 16px 160px; }
.empty { text-align: center; margin: 12vh 0 0; padding: 32px 8px; }
.empty h1 { font-size: 28px; margin: 0 0 6px; letter-spacing: -.02em; font-weight: 600; }
.entries { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }

.msg { max-width: 82%; display: flex; flex-direction: column; gap: 8px; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.assistant { align-self: flex-start; }
.bubble { padding: 10px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); white-space: pre-wrap; word-wrap: break-word; }
.msg.assistant .bubble { border-bottom-left-radius: 5px; }
.msg.user .bubble { background: var(--user); border-color: var(--user-line); color: var(--user-ink); border-bottom-right-radius: 5px; }
.bubble p { margin: 0 0 8px; } .bubble p:last-child { margin: 0; }
.bubble ul { margin: 4px 0; padding-left: 18px; }
.bubble a { color: var(--accent); }
/* the typewriter's caret: on the last line of whatever is being typed */
.bubble.typing-out > p:last-child::after, .bubble.typing-out > ul:last-child > li:last-child::after, .bubble.typing-out:empty::after { content: '▍'; color: var(--accent); margin-left: 1px; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.thinking { font-size: 12px; color: var(--muted); display: none; }   /* the model's reasoning is noise for a customer; add ?debug=1 to the page to see it */
body.debug .thinking { display: block; }
.thinking summary { cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #3a3a52; box-shadow: none; }
.chip.running .dot { background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: pulse 1s infinite; }
.chip.ok .dot { background: var(--accent-dim); }
.chip.err .dot { background: var(--danger); }
@keyframes pulse { 50% { opacity: .3; } }

/* ---- cards ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.card h4 { margin: 0 0 8px; font-size: 14px; color: var(--accent); }
.design-previews { display: flex; gap: 8px; }
.design-previews img { width: 100%; max-width: 260px; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 12px; border: 1px solid var(--line); }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.swatch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.swatch i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); display: inline-block; }
.slots { margin-top: 8px; display: grid; gap: 6px; }
.slots label { font-size: 12px; color: var(--muted); display: grid; gap: 2px; }
.slots input { padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--field); color: var(--ink); }

.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.option { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px; cursor: pointer; text-align: left; color: var(--ink); }
.option:hover { border-color: var(--accent); }
.option img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 10px; }
.option .name { font-weight: 600; font-size: 13px; margin-top: 6px; }
.option .sub { font-size: 12px; color: var(--muted); }

table.price { width: 100%; border-collapse: collapse; font-size: 14px; }
table.price td { padding: 4px 0; border-bottom: 1px solid var(--line); }
table.price tr:last-child td { border: 0; font-weight: 700; }
table.price td:last-child { text-align: right; }

/* ---- buttons ---- */
.btn { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 14px; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.btn.primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--accent-ink); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.icon { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.btn.link { display: inline-block; text-decoration: none; }
.btn:disabled { opacity: .45; cursor: default; }

/* ---- the dock: replies + composer, fixed to the bottom ---- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; background: rgba(11,11,15,.94); backdrop-filter: blur(8px); border-top: 1px solid var(--line); padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
.replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 10px; }
.replies .btn { font-size: 13px; padding: 7px 12px; }
.composer .row { display: flex; gap: 10px; align-items: flex-end; }
.composer textarea { flex: 1; resize: none; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--field); color: var(--ink); min-height: 44px; max-height: 160px; outline: none; }
.composer textarea:focus { border-color: var(--accent-dim); }
.composer .btn.primary, .composer .btn.danger { height: 44px; padding: 0 18px; border-radius: 12px; }
.attachments { display: flex; gap: 8px; padding-bottom: 8px; }
.attachments img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* ---- colour picker (public/colourPicker.js) ---- */
.cp-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cp-sheet { width: min(720px, 100%); max-height: min(88vh, 820px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.cp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cp-head strong { color: var(--accent); }
.cp-slots { display: flex; gap: 8px; padding: 10px 14px 0; flex-wrap: wrap; }
.cp-slot { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--field); color: var(--ink); cursor: pointer; font: inherit; font-size: 12px; text-align: left; }
.cp-slot.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cp-slot.cp-add { border-style: dashed; color: var(--muted); }
.cp-slot i.cp-none { display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; color: var(--muted); }
.cp-slot span { display: flex; flex-direction: column; line-height: 1.25; }
.cp-slot i, .cp-chip i, .cp-current i, .cp-fam i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); flex: none; display: inline-block; }
.cp-slot i.cp-none { background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,.12) 4px 8px); }
.cp-slot em { font-style: normal; color: var(--muted); padding-left: 4px; }
.cp-tabs { display: flex; gap: 4px; padding: 10px 14px 0; }
.cp-tabs button { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; }
.cp-tabs button.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.cp-body { flex: 1; overflow: auto; padding: 10px 14px; min-height: 280px; }
.cp-search { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--field); color: var(--ink); outline: none; }
.cp-search:focus { border-color: var(--accent-dim); }
.cp-fams { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.cp-fam { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; padding: 3px 9px 3px 4px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.cp-fam i { width: 14px; height: 14px; }
.cp-fam.on { color: var(--ink); border-color: var(--accent-dim); }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 3px; }
.cp-sw { aspect-ratio: 1; border: 0; border-radius: 4px; cursor: pointer; padding: 0; outline: 1px solid rgba(255,255,255,.06); }
.cp-sw:hover { transform: scale(1.25); position: relative; z-index: 1; outline-color: rgba(255,255,255,.6); }
.cp-sw.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.cp-loading { grid-column: 1 / -1; padding: 20px 0; text-align: center; }
.cp-sources { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cp-src { width: 44px; height: 44px; padding: 2px; border-radius: 8px; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; }
.cp-src.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cp-src img { width: 100%; height: 100%; object-fit: contain; }
.cp-dominant { margin-top: 10px; }
.cp-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--field); color: var(--ink); cursor: pointer; }
.cp-chip:hover { border-color: var(--accent-dim); }
.cp-canvas-wrap { margin-top: 10px; max-height: 360px; overflow: auto; border-radius: 10px; border: 1px solid var(--line); background: repeating-conic-gradient(#2a2a33 0 25%, #22222a 0 50%) 0 0 / 16px 16px; }
.cp-canvas { display: block; cursor: crosshair; }
.cp-zoom { display: flex; gap: 4px; align-items: center; margin-top: 6px; font-size: 12px; }
.cp-zoom .muted { margin-left: 6px; }
.cp-sample { margin-top: 6px; font-size: 12.5px; }
.cp-sample .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -2px; border: 1px solid rgba(255,255,255,.3); }
.cp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
.cp-current { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
/* the head, slots, tabs and foot keep their size; only the body scrolls */
.cp-head, .cp-slots, .cp-tabs, .cp-foot { flex: none; }
.cp-slots { align-items: flex-start; }
.cp-body { min-height: 0; }
.cp-slot { flex: none; height: auto; }
.cp-slot i, .cp-chip i, .cp-current i { align-self: center; height: 22px; width: 22px; }
.cp-canvas-wrap { max-height: 300px; }
@media (max-width: 600px) { .cp-overlay { padding: 0; } .cp-sheet { max-height: 100vh; height: 100%; border-radius: 0; } }
.panel-colours .swatch { background: none; border: 0; cursor: pointer; color: var(--ink); font-size: 12px; }

/* ---- floating preview ---- */
.panel { position: fixed; right: 20px; bottom: 96px; width: 300px; max-height: min(70vh, 560px); z-index: 9; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: auto; }
.panel-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); cursor: grab; user-select: none; touch-action: none; }
.panel-head:active { cursor: grabbing; }
.panel-head strong { font-size: 13px; color: var(--accent); }
.panel-body { padding: 12px; }
.panel .design-previews img { max-width: 100%; }
/* the optional live 3D view (an iframe of the design service's viewer) */
.panel-3d { position: relative; margin: 12px 12px 0; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #f2f2f2; border: 1px solid var(--line); }
.panel-3d iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.panel-3d-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #666; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.panel-3d-status[hidden] { display: none; }
/* the 3D view opens large, like a picture in the lightbox — the same iframe, grown in
   place (moving it would reload the viewer); the backdrop is its ::before */
.panel-3d .panel-3d-zoom { z-index: 2; }
.panel-3d:hover .panel-3d-zoom, .panel-3d .panel-3d-zoom:focus { opacity: 1; }
.panel-3d-zoom[hidden] { display: none; }
.panel-3d.expanded { position: fixed; inset: 24px; margin: 0; z-index: 100; aspect-ratio: auto; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.panel-3d.expanded::before { content: ''; position: fixed; inset: 0; background: rgba(5,5,8,.9); z-index: -1; cursor: zoom-out; }
.panel-3d-bar { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 2; }
.panel-3d-bar[hidden] { display: none; }
.panel-3d-bar .btn { background: var(--surface); }
@media (max-width: 600px) { .panel-3d.expanded { inset: 8px; } }
.panel.wide { width: 380px; }
.panel-toggle { position: fixed; right: 20px; bottom: 96px; z-index: 9; border: 1px solid var(--accent-dim); background: var(--surface); color: var(--accent); padding: 8px 16px 8px 8px; border-radius: 999px; box-shadow: var(--shadow); cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.panel-toggle img { width: 30px; height: 30px; object-fit: contain; background: #fff; border-radius: 999px; }

.roster { display: grid; gap: 6px; margin-top: 8px; }
.roster .r { display: grid; grid-template-columns: 1fr 70px 80px auto; gap: 6px; }
.roster input, .roster select { padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--field); color: var(--ink); }
.error { background: #3a1416; color: #ffb4b4; border: 1px solid #5c2226; padding: 10px 14px; border-radius: 12px; }

@media (max-width: 860px) {
  .thread { padding-left: 12px; padding-right: 12px; }
  .msg { max-width: 92%; }
  .panel { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 70vh; border-radius: 16px 16px 0 0; }
  .panel-head { cursor: default; }
}

.candidates .option img { aspect-ratio: 1; }
.swatches.big .swatch { font-size: 13px; color: var(--ink); }
.swatches.big .swatch i { width: 26px; height: 26px; }
.image-check img { width: 120px; height: 120px; object-fit: contain; background: #fff; border-radius: 8px; }
.crest img { width: 160px; height: 160px; object-fit: contain; background: #fff; border-radius: 10px; }
.tryon img { display: block; width: 100%; max-width: 420px; border-radius: 12px; border: 1px solid var(--line); }
.crest .variants { display: flex; flex-wrap: wrap; gap: 12px; }
.crest .variant { margin: 0; text-align: center; font-size: 12px; color: var(--muted); }
.crest .variant img { display: block; margin: 0 auto 4px; }
.crest .variant.flawed img { outline: 2px dashed var(--danger); outline-offset: 2px; }
.crest .variant figcaption { font-weight: 600; }

/* ---- images open full size in a lightbox; every rendered image gets a zoom control ---- */
.zoomwrap { position: relative; display: inline-block; max-width: 100%; }
.zoomwrap > img { display: block; cursor: zoom-in; }
.zoom { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 999px; background: rgba(20,20,27,.9); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; color: var(--ink); cursor: zoom-in; opacity: 0; transition: opacity .15s; user-select: none; }
.zoomwrap:hover .zoom, .zoom:focus { opacity: 1; }
@media (hover: none) { .zoom { opacity: 1; } }
.option .zoomwrap { display: block; }
.option .zoomwrap > img { width: 100%; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(5,5,8,.9); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(96vw, 1400px); max-height: 92vh; object-fit: contain; background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); cursor: zoom-out; }
.lightbox .lb-close { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }

/* ---- sign-in page ---- */
.login { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 60px); padding: 24px 16px; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 14px; }
.login-card h1 { margin: 0; font-size: 22px; font-weight: 600; }
.login-card p { margin: -6px 0 4px; }
.login-card label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.login-card input { padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--field); color: var(--ink); font-size: 15px; }
.login-card input:focus { outline: none; border-color: var(--accent-dim); }
.login-card .btn.primary { height: 44px; border-radius: 12px; }

/* ---- legal links: a quiet line under the composer and on every standalone page ---- */
.legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding-top: 8px; font-size: 11px; color: var(--muted); opacity: .75; }
.legal a { color: inherit; text-decoration: none; }
.legal a:hover, .legal a:focus-visible { color: var(--ink); text-decoration: underline; }
.login-page .legal { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }

/* ---- standalone pages: about, terms, privacy ---- */
.top a.brand { color: inherit; text-decoration: none; }
.doc { padding: 32px 16px 24px; line-height: 1.65; }
.doc h1 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 4px; }
.doc h2 { font-size: 17px; font-weight: 600; margin: 32px 0 8px; }
.doc p, .doc ul { margin: 0 0 12px; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 4px; }
.doc a { color: var(--accent); }
.doc .updated { font-size: 13px; margin-bottom: 24px; }
.doc .lead { font-size: 18px; color: var(--ink); }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 16px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.doc th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.doc code { font-size: 13px; background: var(--field); padding: 1px 6px; border-radius: 6px; }
.doc-foot { border-top: 1px solid var(--line); padding: 8px 16px 24px; }
/* details still to be filled in before launch: impossible to miss */
mark.fill { background: #4a3a00; color: #ffd966; padding: 0 4px; border-radius: 4px; }
@media (max-width: 600px) { .doc table, .doc thead, .doc tbody, .doc tr, .doc th, .doc td { display: block; } .doc thead { display: none; } .doc tr { padding: 8px 0; border-bottom: 1px solid var(--line); } .doc td { border: 0; padding: 2px 0; } }