/* OHOP STUDIOS — project room + studio desk.
   One dark system shared by the client view and the studio view, matched to the public
   site: deep navy ground, cool blue ink, a warm sand accent for anything actionable. */
:root{
  color-scheme:dark;
  --bg:#03060f;
  --ink:#eaf2fb;
  --muted:#a9bace;
  --dim:#7e91a8;
  --line:#a5c9ff26;
  --line2:#a5c9ff14;
  --panel:linear-gradient(158deg,#0a1626f2,#050c17f7);
  --panel2:linear-gradient(158deg,#0c1a2cf2,#07111ef7);
  --accent:#ffd0a6;
  --accent-ink:#2a1708;
  --cool:#a8d8ff;
  --ok:#8ce0b4;
  --bad:#ffb4a8;
  --r:14px;
  --rl:22px;
  --pad:clamp(16px,4vw,44px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-height:100%;
  background:
    radial-gradient(1200px 620px at 78% -8%,#12304e80,transparent 62%),
    radial-gradient(900px 520px at 4% 4%,#1d2a4166,transparent 58%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:Manrope,Arial,sans-serif;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--cool)}
a:hover{color:#d6ecff}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:progress;opacity:.55}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── chrome ─────────────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:40;
  min-height:76px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px var(--pad);
  background:#03060fd9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line2);
}
.brand{
  text-decoration:none;color:var(--ink);
  font-weight:800;font-size:21px;letter-spacing:-.045em;line-height:1.1;
}
.brand small{
  display:block;margin-top:3px;
  font:9.5px/1 'IBM Plex Mono',monospace;letter-spacing:.2em;color:var(--dim);font-weight:400;
}
.header-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--dim)}
#connection{
  display:none;padding:0 12px;min-height:34px;align-items:center;
  border:1px solid var(--line2);border-radius:999px;
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;
}
@media (min-width:760px){#connection{display:inline-flex}}

/* ── type ───────────────────────────────────────────────────────────── */
.eyebrow{
  margin:0 0 12px;
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;
}
h1,h2,h3{margin:0 0 12px;letter-spacing:-.035em;line-height:1.12;color:var(--ink)}
h1{font-size:clamp(28px,4.2vw,50px)}
h2{font-size:clamp(19px,2.2vw,23px)}
h3{font-size:16px}
p{margin:0 0 12px;color:var(--muted)}
p:last-child{margin-bottom:0}
.fine{font-size:12px;line-height:1.6;color:var(--dim)}

/* ── buttons ────────────────────────────────────────────────────────── */
.primary,.quiet,.text-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 20px;border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:-.01em;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.primary{
  border:0;background:linear-gradient(120deg,#ffe4c9,#ffc79a);color:var(--accent-ink);
  box-shadow:inset 0 1px 0 #fff9,0 14px 30px -18px #ffb87a99;
}
.primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff9,0 18px 36px -18px #ffb87acc}
.primary:active{transform:scale(.985)}
.quiet{background:#ffffff08;border:1px solid var(--line);color:var(--ink)}
.quiet:hover{background:#ffffff12;border-color:#a5c9ff55}
.text-button{
  min-height:40px;padding:0;background:none;border:0;color:var(--cool);
  font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:4px;
}
.text-button:hover{color:#d6ecff}
.link-button{text-decoration:none}

/* ── forms ──────────────────────────────────────────────────────────── */
form{display:grid;gap:14px}
label{display:grid;gap:7px;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--muted)}
input,textarea,select{
  width:100%;min-width:0;min-height:48px;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;
  background:#050c17;color:var(--ink);font-size:16px;
  transition:border-color .2s ease,background .2s ease;
}
textarea{min-height:92px;resize:vertical;line-height:1.55}
input::placeholder,textarea::placeholder{color:#6a7d93}
input:focus,textarea:focus,select:focus{outline:none;border-color:#a5c9ff77;background:#071120}

/* ── panels ─────────────────────────────────────────────────────────── */
.panel{
  padding:clamp(18px,2.6vw,26px);
  border:1px solid var(--line);border-radius:var(--rl);
  background:var(--panel);
  box-shadow:inset 0 1px 0 #ffffff12,0 28px 60px -40px #000;
}
.panel-heading{
  display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;justify-content:space-between;
  margin-bottom:14px;
}
.panel-heading h2{margin:0}
.badge{
  display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;
  border:1px solid var(--line);background:#ffffff0d;
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--cool);
}
.count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;margin-left:8px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);
  font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;
}

/* ── notices ────────────────────────────────────────────────────────── */
#notice{
  margin:12px var(--pad) 0;padding:13px 16px;border-radius:12px;
  border:1px solid #8ce0b444;background:#0c2119;color:#ccf3e0;font-size:14px;
}
#notice.error{border-color:#ffb4a844;background:#24100d;color:#ffd9d1}

/* ── sign in ────────────────────────────────────────────────────────── */
.auth-shell{
  max-width:1240px;margin:auto;padding:clamp(28px,6vw,80px) var(--pad);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,460px);
  gap:clamp(28px,6vw,80px);align-items:center;
}
@media (max-width:900px){.auth-shell{grid-template-columns:minmax(0,1fr);gap:32px}}
.intro h1{margin-bottom:16px}
.intro>p:not(.eyebrow){max-width:42ch;font-size:16.5px}
.steps{display:grid;gap:10px;margin-top:28px}
.steps span{
  padding:13px 16px;border:1px solid var(--line2);border-radius:12px;background:#ffffff06;
  font-size:13px;color:var(--muted);
}
.auth-card{width:100%;justify-self:end;background:var(--panel2)}
.auth-card h2{font-size:clamp(24px,3vw,30px)}
.auth-links{display:flex;flex-wrap:wrap;gap:18px;margin:16px 0 14px}
.demo-link{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:13px;font-weight:600;text-decoration:none;color:var(--cool);
}
.demo-link:hover{text-decoration:underline;text-underline-offset:4px}

/* ── workspace ──────────────────────────────────────────────────────── */
#workspace,#support{padding:clamp(16px,3vw,32px) var(--pad) clamp(40px,6vw,72px);max-width:1400px;margin:0 auto}
#demo-banner{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-bottom:18px;padding:14px 18px;border-radius:14px;
  border:1px solid #ffd0a63d;background:#1d1408;color:#ffe7cf;font-size:13.5px;
}
#demo-banner strong{color:#fff}
#demo-banner button{
  min-height:38px;padding:0 14px;margin-left:auto;border-radius:999px;border:0;
  background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:700;
}
.workspace-grid,.support-grid{
  display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:clamp(14px,2vw,24px);align-items:start;
}
@media (max-width:960px){.workspace-grid,.support-grid{grid-template-columns:minmax(0,1fr)}}
.sidebar{
  position:sticky;top:96px;
  padding:20px;border:1px solid var(--line);border-radius:var(--rl);
  background:var(--panel);
}
@media (max-width:960px){.sidebar{position:static}}
.sidebar-note{margin-top:18px;font-size:12px;line-height:1.7;color:var(--dim)}
#rooms,#threads{display:flex;flex-direction:column;gap:8px}
#rooms button,#threads button{
  display:flex;flex-direction:column;gap:5px;width:100%;text-align:left;
  min-height:48px;padding:12px 14px;
  border:1px solid var(--line2);border-radius:12px;background:#ffffff05;
  color:var(--ink);font-size:14px;font-weight:600;letter-spacing:-.01em;
  transition:background .2s ease,border-color .2s ease;
}
#rooms button:hover,#threads button:hover{background:#ffffff0d;border-color:#a5c9ff44}
#rooms button.active,#threads button.active{
  background:linear-gradient(120deg,#16304b,#0e2135);border-color:#a5c9ff66;
}
#threads small{
  font-size:12px;font-weight:400;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
#threads .row{display:flex;align-items:center;gap:8px;justify-content:space-between;width:100%}
.thread-closed{opacity:.5}
#import-panel{margin-top:20px;padding-top:18px;border-top:1px solid var(--line2)}
#import-panel h3{font-size:14px;margin-bottom:6px}

/* ── empty states ───────────────────────────────────────────────────── */
.empty{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:clamp(26px,5vw,52px);
  border:1px dashed var(--line);border-radius:var(--rl);background:#ffffff04;
}
.empty h1{font-size:clamp(22px,3vw,30px);margin:0}
.empty p{max-width:52ch;margin:0}
.empty a{
  display:inline-flex;align-items:center;min-height:46px;padding:0 20px;
  border-radius:999px;background:linear-gradient(120deg,#ffe4c9,#ffc79a);
  color:var(--accent-ink);font-size:14px;font-weight:700;text-decoration:none;
}

/* ── project room ───────────────────────────────────────────────────── */
.room-title{
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;
  margin-bottom:clamp(14px,2vw,20px);
}
.room-title h1{margin:0;font-size:clamp(24px,3.4vw,38px)}
.room-columns{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(14px,2vw,22px);align-items:start}
@media (max-width:1100px){.room-columns{grid-template-columns:minmax(0,1fr)}}
.project-tools{display:grid;gap:clamp(14px,2vw,20px)}

/* ── conversations (client room + studio desk) ──────────────────────── */
.conversation{display:flex;flex-direction:column}
#messages,#thread-log{
  display:flex;flex-direction:column;gap:14px;
  min-height:220px;max-height:min(56vh,520px);overflow-y:auto;overscroll-behavior:contain;
  padding:4px 2px 8px;margin-bottom:16px;
}
.message,.chat-row{display:flex;flex-direction:column;gap:5px;max-width:82%}
.message.mine,.chat-row.studio{align-self:flex-end;align-items:flex-end}
.message:not(.mine),.chat-row.visitor{align-self:flex-start}
.bubble,.chat-row p{
  margin:0;padding:12px 15px;
  border:1px solid var(--line2);border-radius:16px 16px 16px 5px;
  background:#0a1523;font-size:14.5px;line-height:1.55;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.message.mine .bubble,.chat-row.studio p{
  border-radius:16px 16px 5px 16px;border-color:transparent;
  background:linear-gradient(120deg,#ffe4c9,#ffc79a);color:var(--accent-ink);
}
.message .meta,.chat-row span{font-size:11px;color:var(--dim)}
.message.mine .meta,.chat-row.studio span{text-align:right}
.compose-footer{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.compose-footer .fine{flex:1 1 180px}

/* Attachments in either conversation. */
.attach{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line);background:#ffffff08;color:var(--ink);
  font-size:13px;font-weight:700;
}
.attach:hover{background:#ffffff12}
.attach input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.shot{display:block;max-width:min(320px,100%);border-radius:14px;border:1px solid var(--line);overflow:hidden;line-height:0;background:#000}
.shot img,.shot video{display:block;width:100%;height:auto;max-height:280px;object-fit:cover}
.chat-row .shot,.message .shot{margin-top:2px}

/* ── revisions ──────────────────────────────────────────────────────── */
#revisions{display:grid;gap:10px;margin-bottom:16px}
#revisions .revision{
  padding:13px 15px;border:1px solid var(--line2);border-radius:12px;background:#ffffff05;
  font-size:14px;line-height:1.55;
}
#revisions .revision small{display:block;margin-top:6px;font-size:11px;color:var(--dim)}

/* ── studio desk ────────────────────────────────────────────────────── */
.support-head{
  display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;
  margin-bottom:clamp(16px,2.5vw,26px);
}
.support-head h1{margin:6px 0 0;font-size:clamp(24px,3.4vw,38px)}
.desk-switch{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 18px;
  border:1px solid var(--line);border-radius:999px;background:var(--panel);cursor:pointer;
}
.desk-switch:hover{border-color:#a5c9ff55}
.desk-switch input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--accent);cursor:pointer}
.desk-switch span{display:flex;flex-direction:column;gap:1px;font-size:11.5px;color:var(--dim);line-height:1.35}
.desk-switch strong{font-size:14px;color:var(--ink);letter-spacing:-.015em}
.desk-switch:has(input:checked) strong{color:var(--accent)}
.thread-actions{display:flex;gap:8px;flex-wrap:wrap}
.thread-actions .quiet{min-height:40px;padding:0 14px;font-size:13px}

/* ── footer ─────────────────────────────────────────────────────────── */
footer{
  display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;
  padding:26px var(--pad);border-top:1px solid var(--line2);
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
footer span{flex:1 1 auto;text-transform:none;letter-spacing:.02em;font-family:Manrope,Arial,sans-serif;font-size:12px}
footer a{color:var(--cool);text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:4px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Phone: the header was squeezing the Live chat and Sign out buttons out of reach.
   Let it wrap onto a second row and keep every control a full tap target. */
@media (max-width:700px){
  header{flex-wrap:wrap;gap:10px;padding:12px var(--pad)}
  .brand{flex:1 1 auto;font-size:18px}
  .header-actions{flex:1 1 100%;gap:8px;justify-content:flex-start}
  .header-actions button{
    flex:1 1 0;min-height:46px;padding:0 14px;border-radius:12px;
    font-size:13.5px;font-weight:700;white-space:nowrap;
  }
  #support-toggle{
    background:linear-gradient(120deg,#16304b,#0e2135);
    border-color:#a5c9ff55;color:var(--ink);
  }
}

/* Conversations: keep the newest message in view without the layout jumping, and stop a
   playing clip from being torn out of the DOM by a refresh. */
#messages,#thread-log{scroll-behavior:smooth;contain:layout paint}
@media (prefers-reduced-motion:reduce){#messages,#thread-log{scroll-behavior:auto}}
.shot img,.shot video{background:#05101c}

/* ── stages ─────────────────────────────────────────────────────────── */
#stages{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  list-style:none;margin:0 0 clamp(16px,2.4vw,24px);padding:0;
}
@media (max-width:760px){#stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
#stages li{
  display:flex;flex-direction:column;gap:3px;
  padding:13px 15px;border:1px solid var(--line2);border-radius:14px;background:#ffffff05;
  color:var(--dim);
}
#stages strong{font-size:13.5px;letter-spacing:-.01em;color:var(--muted)}
#stages span{font-size:11.5px;line-height:1.4}
#stages li.done{border-color:#8ce0b43d;background:#0c1c18}
#stages li.done strong{color:var(--ok)}
#stages li.now{
  border-color:#ffd0a666;background:linear-gradient(140deg,#231708,#120d08);
  box-shadow:inset 0 1px 0 #ffffff14;
}
#stages li.now strong{color:var(--accent)}
#stages li.now span{color:#e8d3bd}
.stage-note{
  margin:0;padding:14px 16px;border-radius:12px;
  border:1px dashed var(--line);background:#ffffff05;
  font-size:13.5px;line-height:1.6;color:var(--muted);
}

/* ── planning brief + build status ──────────────────────────────────── */
#brief-form textarea{min-height:64px}
#brief-owner{margin-top:16px}
.build-now{
  margin:0 0 6px;font-size:clamp(17px,2.2vw,21px);font-weight:700;
  letter-spacing:-.02em;color:var(--accent);
}
#brief-recap{margin-top:18px;border-top:1px solid var(--line2);padding-top:14px}
#brief-recap summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--cool);min-height:32px}
#brief-recap dl{display:grid;gap:4px;margin:12px 0 0}
#brief-recap dt{font:10px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
#brief-recap dd{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--muted);white-space:pre-wrap}

/* ── revisions ──────────────────────────────────────────────────────── */
#revisions .revision{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
#revisions .revision p{margin:0}
#revisions .revision small{font-size:11px;color:var(--dim);text-transform:capitalize}
#revisions .revision.done{opacity:.55}
#revisions .revision button{min-height:38px;padding:0 14px;font-size:12.5px}
#revision-allowance{margin-bottom:12px}

/* ── referral desk ──────────────────────────────────────────────────── */
#referral-list{display:grid;gap:clamp(12px,2vw,18px);margin-bottom:18px}
.referral-code{
  margin:0 0 12px;padding:12px 16px;border-radius:12px;
  border:1px solid #ffd0a64d;background:#1d1408;
  font:16px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:var(--accent);
}
.referral-detail{display:grid;gap:3px;margin:0 0 14px}
.referral-detail dt{font:10px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.referral-detail dd{margin:0 0 9px;font-size:14px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}

.sale-list{display:grid;gap:6px;margin:0 0 14px}
.sale{
  display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;
  padding:10px 13px;border:1px solid var(--line2);border-radius:11px;background:#ffffff05;
  font-size:13.5px;color:var(--muted);
}
.sale strong{color:var(--accent);font-size:14px}
.sale.done{opacity:.5}
.sale.done strong{color:var(--ok)}
.sale button{margin-left:auto;min-height:36px;padding:0 13px;font-size:12.5px}

/* ── live visitors ──────────────────────────────────────────────────── */
#visitor-list{display:grid;gap:clamp(10px,1.8vw,16px);margin-bottom:18px}
.visitor h2{font-family:'IBM Plex Mono',monospace;font-size:15px;letter-spacing:-.01em;overflow-wrap:anywhere}
.badge.live{
  border-color:#8ce0b44d;background:#0c1c18;color:var(--ok);
  display:inline-flex;align-items:center;gap:7px;
}
.badge.live::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 #8ce0b499;animation:vpulse 2s ease-out infinite;
}
@keyframes vpulse{70%{box-shadow:0 0 0 7px #8ce0b400}100%{box-shadow:0 0 0 0 #8ce0b400}}
@media (prefers-reduced-motion:reduce){.badge.live::before{animation:none}}
.visitor-detail{margin:0 0 13px}
.visitor-detail dd{margin:0 0 4px;font-size:13.5px;line-height:1.5;color:var(--dim);overflow-wrap:anywhere}
.visitor-say{display:flex;flex-wrap:wrap;gap:8px}
.visitor-say input{flex:1 1 200px;min-height:46px;margin:0}
.visitor-say button{min-height:46px;padding:0 20px;white-space:nowrap}

/* A visitor card should read as a sentence, with the path demoted to a footnote. */
.visitor h2{font-family:inherit;font-size:clamp(17px,2.4vw,20px);letter-spacing:-.02em;line-height:1.25}
.visitor.hot{border-color:#ffd0a63d}
.visitor-read{
  margin:0 0 6px;padding:11px 14px;border-radius:11px;
  border:1px solid var(--line2);background:#ffffff05;
  font-size:14px;line-height:1.55;color:var(--muted);
}
.visitor-read.hot{border-color:#ffd0a640;background:#1d140880;color:#f0dcc6}
.visitor-path{margin:0 0 13px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--dim)}

/* ── Studio inbox (design 1b): left rail, message-preview list, full-height chat, client file ── */
#rooms .inbox-row{gap:6px;padding:14px 16px;border-radius:12px}
.row-top{display:flex;align-items:center;gap:10px;width:100%}
.row-av{flex:none;width:30px;height:30px;border-radius:9px;background:#16263b;display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--ink)}
.inbox-row.waiting .row-av{background:var(--accent);color:var(--accent-ink)}
.row-name{flex:1;min-width:0;font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-row.waiting .row-name{font-weight:800}
.row-time{flex:none;font-size:11px;font-weight:500;color:var(--dim)}
.row-preview{display:block;width:100%;font-size:13px;font-weight:400;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-row.waiting .row-preview{color:var(--ink)}
.row-chips{display:flex;gap:6px;align-items:center;width:100%}
.chip{font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:5px;background:#16263b;color:var(--muted)}
.chip.warm{background:#ffd0a624;color:var(--accent)}
.row-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--accent)}
#client-file{display:grid;gap:18px}
#client-file .eyebrow{margin:0}
.cf-card{padding:14px;border-radius:14px;background:#050c17;border:1px solid var(--line2);display:grid;gap:2px}
.cf-label{font-size:12px;color:var(--muted)}
.cf-sub{font-size:12px;color:var(--dim)}
.cf-pay{display:flex;justify-content:space-between;align-items:baseline}
.cf-pay strong{font-size:24px;letter-spacing:-.03em}
.cf-ok{font-size:12px;font-weight:700;color:var(--ok)}
.cf-block{display:grid;gap:8px}
.cf-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.cf-bars span{height:6px;border-radius:9px;background:#16263b}
.cf-bars span.done{background:var(--ok)}
.cf-bars span.now{background:var(--accent)}
.cf-stage{font-size:14px}
.cf-rounds{display:flex;gap:6px}
.cf-rounds span{width:26px;height:26px;border-radius:8px;border:1.5px solid #a5c9ff4d}
.cf-rounds span.used{background:var(--accent);border-color:var(--accent)}
.cf-brief{margin:0;font-size:13px;line-height:1.5;color:var(--ink)}
.cf-ref{padding:12px;border-radius:12px;border:1px dashed var(--line);display:grid;gap:2px}
.cf-ref strong{font-size:13px}

@media (min-width:1100px){
  body.studio{--rail:84px}
  body.studio header{position:fixed;left:0;top:0;bottom:0;width:var(--rail);min-height:0;flex-direction:column;justify-content:flex-start;align-items:center;gap:22px;padding:20px 0;border-bottom:0;border-right:1px solid var(--line2);background:#050a14}
  body.studio .brand{font-size:16px;text-align:center}
  body.studio .brand small{display:none}
  body.studio .header-actions{flex:1;flex-direction:column;flex-wrap:nowrap;gap:8px;width:100%;padding:0 10px}
  body.studio #connection{display:none}
  body.studio .header-actions button{position:relative;width:100%;min-height:58px;padding:6px 4px;border-radius:14px;flex-direction:column;gap:2px;font-size:11px;font-weight:700;background:none;border:1px solid transparent;color:var(--muted)}
  body.studio .header-actions button:hover{background:#ffffff0a;color:var(--ink)}
  body.studio .header-actions .count{position:absolute;top:4px;right:6px;margin:0;min-width:18px;height:18px;font-size:10px}
  body.studio #logout{margin-top:auto}
  body.studio #notice,body.studio #workspace,body.studio #support,body.studio #visitors,body.studio #referrals{margin-left:var(--rail)}
  body.studio #support,body.studio #visitors,body.studio #referrals{max-width:none;padding:28px 32px}
  body.studio footer{display:none}
  body.studio #workspace{max-width:none;padding:0;height:100vh}
  body.studio #demo-banner{margin:0;border-radius:0}
  body.studio .workspace-grid{grid-template-columns:340px minmax(0,1fr);gap:0;height:100%;align-items:stretch}
  body.studio .workspace-grid>.sidebar{position:static;height:100vh;overflow-y:auto;border:0;border-right:1px solid var(--line2);border-radius:0;background:#050a14;padding:22px 12px}
  body.studio .workspace-grid>.sidebar>.eyebrow{padding:0 6px}
  body.studio .sidebar-note{display:none}
  body.studio #rooms{gap:2px}
  body.studio #rooms .inbox-row{border:0;border-left:3px solid transparent;border-radius:10px;background:none}
  body.studio #rooms .inbox-row:hover{background:#ffffff08}
  body.studio #rooms .inbox-row.active{background:#0c1a2c;border-left-color:var(--accent)}
  body.studio #import-panel{margin:18px 6px 0}
  body.studio #room-main{height:100vh;overflow:hidden}
  body.studio #empty{margin:32px}
  body.studio #room{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto minmax(0,1fr);height:100vh}
  body.studio .room-title{grid-column:1;grid-row:1;margin:0;padding:18px 24px;border-bottom:1px solid var(--line2);align-items:center}
  body.studio .room-title .eyebrow{display:none}
  body.studio .room-title h1{font-size:20px;letter-spacing:-.02em}
  body.studio #stages{grid-column:2;grid-row:1;margin:0;padding:18px 20px;gap:4px;background:#050a14;border-left:1px solid var(--line2);border-bottom:1px solid var(--line2)}
  body.studio #stages li{padding:8px 0 0;border:0;border-top:5px solid #16263b;border-radius:0;background:none;box-shadow:none}
  body.studio #stages li span{display:none}
  body.studio #stages strong{font-size:11px}
  body.studio #stages li.done{border-top-color:var(--ok);background:none}
  body.studio #stages li.now{border-top-color:var(--accent);background:none}
  body.studio .room-columns{display:contents}
  body.studio .conversation{grid-column:1;grid-row:2;min-height:0;border:0;border-radius:0;box-shadow:none;background:radial-gradient(600px 300px at 70% 0%,#12304e55,transparent);padding:16px 24px 20px}
  body.studio .conversation .panel-heading{display:none}
  body.studio #messages{flex:1;min-height:0;max-height:none}
  body.studio .project-tools{grid-column:2;grid-row:2;min-height:0;overflow-y:auto;align-content:start;gap:14px;padding:18px 16px;background:#050a14;border-left:1px solid var(--line2)}
  body.studio .project-tools>.panel{padding:16px;border-radius:14px;box-shadow:none;background:#0a1626}
  body.studio .project-tools>#client-file{padding:4px 4px 8px;border:0;background:none}
  body.studio .project-tools h2{font-size:17px}
}

/* Typing indicator + long-form brief */
.typing{display:flex;align-items:center;gap:4px;margin:-8px 0 12px;font-size:12px;color:var(--dim)}
.typing span{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:tdot 1.1s ease-in-out infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
.typing em{font-style:normal;margin-left:6px}
@keyframes tdot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.brief-group{border:0;margin:0 0 6px;padding:14px 0 0;border-top:1px solid var(--line2);display:grid;gap:12px;min-width:0}
.brief-group legend{padding:0 0 10px;font:10px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--cool)}
.brief-intro{margin:0 0 4px}

/* Questionnaire card in the conversation + full-size dialog */
.brief-card{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:14px 16px;margin-bottom:14px;border:1px solid #ffd0a655;border-radius:16px;background:linear-gradient(120deg,#231708,#120d08)}
.brief-card .eyebrow{margin:0 0 4px;color:var(--accent)}
.brief-card strong{display:block;font-size:16px;letter-spacing:-.02em}
.brief-card .primary{min-height:42px}
.brief-dialog{width:min(760px,94vw);max-height:90vh;overflow:hidden;padding:0;border:1px solid var(--line);border-radius:22px;background:#07101d;color:var(--ink)}
.brief-dialog::backdrop{background:#03060fcc;backdrop-filter:blur(4px)}
.brief-dialog>.panel{border:0;box-shadow:none;background:none;max-height:90vh;overflow-y:auto}
.brief-x{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#0a1626;color:var(--ink);font-size:14px}
body.studio .conversation #brief-card{flex:none}

.brief-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;position:sticky;bottom:0;padding:12px 0 2px;background:linear-gradient(transparent,#07101d 30%)}

/* ── Client room (design 2a) ── */
.next-step{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3vw,30px);border-radius:var(--rl);border:1px solid #a5c9ff24;background:linear-gradient(158deg,#0c1a2c,#050c17)}
.next-step .eyebrow{margin:0;color:var(--accent)}
.next-step h2{margin:0;font-size:clamp(24px,2.8vw,32px);line-height:1.1}
.next-step p{margin:0;max-width:46ch;font-size:15px;line-height:1.6}
.ns-progress{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:4px}
.ns-bar{height:8px;border-radius:99px;background:#16263b;overflow:hidden}
.ns-bar i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.ns-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:8px}
body.client #brief-card{display:none!important}
body.client #stages{counter-reset:st}
body.client #stages li{counter-increment:st}
body.client #stages li::before{content:"STEP " counter(st);font:10px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--dim)}
body.client #stages li.now::before{content:"STEP " counter(st) " · NOW";color:var(--accent)}
body.client #project-status{display:none}
body.client .room-title .eyebrow{color:var(--cool)}
body.client .room-title h1{font-size:clamp(28px,4vw,42px)}
body.client .workspace-grid.single{grid-template-columns:minmax(0,1fr)}
body.client .workspace-grid.single>.sidebar{display:none}

/* ── Client on phones (design 2e) ── */
.client-tabs,.ns-msgs,.brief-stepnav{display:none}
.brief-steps{display:grid;gap:8px;margin-bottom:14px}
.brief-steps span{font:10px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--muted)}
.bs-bar{height:4px;border-radius:9px;background:#16263b;overflow:hidden}
.bs-bar i{display:block;height:100%;background:var(--accent);border-radius:9px;transition:width .25s ease}
@media all{
  body.client{padding-bottom:76px}
  body.client footer{display:none}
  body.client .client-tabs{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;height:68px;padding-bottom:env(safe-area-inset-bottom);background:#050a14f2;border-top:1px solid var(--line2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  body.client .client-tabs button{background:none;border:0;color:var(--dim);font-size:12.5px;font-weight:700;min-height:56px}
  body.client .client-tabs button.on{color:var(--accent)}
  body.client:not([data-tab=home]) .next-step{display:none}
  body.client[data-tab=home] .conversation,body.client[data-tab=home] .project-tools{display:none}
  body.client[data-tab=chat] .project-tools,body.client[data-tab=chat] #stages,body.client[data-tab=chat] .room-title{display:none}
  body.client[data-tab=preview] .conversation{display:none}
  body.client[data-tab=preview] #mockup-panel{display:none!important}
  body.client[data-tab=concepts] .conversation{display:none}
  body.client[data-tab=concepts] .project-tools>:not(#mockup-panel){display:none!important}
  body.client[data-tab=chat] .conversation{min-height:calc(100dvh - 190px)}
  body.client[data-tab=chat] #messages{flex:1;max-height:none}
  body.client .room-columns{grid-template-columns:minmax(0,1fr)}
  body.client #stages{grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:16px}
  body.client #stages li{padding:0;height:5px;min-height:0;border:0;border-radius:9px;background:#16263b;box-shadow:none}
  body.client #stages li>*,body.client #stages li::before{display:none}
  body.client #stages li.now{background:var(--accent)}
  body.client #stages li.done{background:var(--ok)}
  body.client .room-title h1{font-size:30px}
  body.client .next-step{background:linear-gradient(140deg,#231708,#120d08);border-color:#ffd0a666}
  body.client .ns-actions{flex-direction:column}
  body.client .ns-actions>*{width:100%}
  body.client .ns-msgs{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:6px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:#0a1626;color:var(--ink);text-align:left}
  body.client .ns-msgs span{display:grid;gap:2px;min-width:0}
  body.client .ns-msgs strong{font-size:15px}
  body.client .ns-msgs small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.client .ns-msgs b{font-size:22px;color:var(--cool)}
  body.client .brief-dialog{width:min(520px,100vw)}
  body.client .brief-dialog>.panel{padding:64px 22px 20px}
  .brief-stepnav{display:flex;gap:10px;position:sticky;bottom:0;padding:12px 0 4px;background:linear-gradient(transparent,#07101d 30%)}
  .brief-stepnav button{flex:1}
  .brief-actions.mobile-hide{display:none}
}

@media (max-width:700px){
  .brief-dialog,body.client .brief-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  .brief-dialog>.panel,body.client .brief-dialog>.panel{height:100dvh;max-height:100dvh;padding:64px 20px 20px}
}
/* On a computer the client room stays the same app-like column, centered. */
body.client #workspace{max-width:480px}
body.client[data-tab=concepts] #workspace{max-width:1280px}
body.client[data-tab=concepts] .client-tabs{max-width:720px}
body.client .client-tabs{max-width:480px;margin:0 auto;border-left:1px solid var(--line2);border-right:1px solid var(--line2)}
body.client header .header-actions #connection{display:none}
body.client .room-title{margin-bottom:14px}
body.client .room-title h1 em{font-style:normal;color:var(--accent)}

@media (min-width:701px){body.client .client-tabs{max-width:calc(480px - 2 * var(--pad));border:1px solid var(--line2);border-bottom:0;border-radius:18px 18px 0 0}}

.approve-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:999px;border:1px solid #8ce0b466;background:#0c1c18;color:var(--ok);font-size:14px;font-weight:800}
.approve-btn:hover{background:#10271f}
#approve{border-color:#8ce0b466;background:#0c1c18;color:var(--ok);font-weight:800}

.confirm-dialog{width:min(420px,92vw);padding:24px;border:1px solid var(--line);border-radius:22px;background:#07101d;color:var(--ink);box-shadow:0 30px 80px -20px #000}
.confirm-dialog::backdrop{background:#03060fcc;backdrop-filter:blur(4px)}
.confirm-dialog .eyebrow{margin:0 0 10px;color:var(--accent)}
.confirm-dialog h2{font-size:20px;margin:0 0 8px}
.confirm-dialog p{font-size:14px;line-height:1.6}
.confirm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* ── Mockup-first concept studio ───────────────────────────────────── */
.mockup-panel{position:relative;overflow:hidden;background:radial-gradient(620px 260px at 8% 0,#24487355,transparent 70%),var(--panel)}
.mockup-progress{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:14px 0;color:var(--muted)}
.mockup-progress i{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.mockup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}
.concept-card{padding:0;border:1px solid var(--line);border-radius:18px;background:#06101d;color:var(--ink);text-align:left;overflow:hidden;transition:transform .2s,border-color .2s;min-width:0}
.concept-card:hover{transform:translateY(-3px);border-color:#a8d8ff66}
.concept-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 20px 50px -32px #ffd0a6}
.concept-card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;background:#02050a}
.concept-copy{display:grid;gap:3px;padding:13px}.concept-copy strong{font-size:14px}.concept-copy small{color:var(--dim);line-height:1.35}
.concept-line{display:flex;align-items:center;justify-content:space-between;gap:8px}.concept-check{color:var(--accent);font-size:11px}
.mockup-empty{display:grid;gap:5px;padding:22px;margin:14px 0;border:1px dashed var(--line);border-radius:16px;color:var(--muted)}
.mockup-empty strong{color:var(--ink)}
.mockup-actions{display:flex;align-items:end;flex-wrap:wrap;gap:10px;margin-top:16px}.mockup-actions label{flex:1;min-width:210px}.mockup-actions select{margin-top:5px}
.mockup-approval{margin-top:16px;padding:17px;border:1px solid #8ce0b455;border-radius:16px;background:#0b1d18}.mockup-approval strong{color:var(--ok)}
.mockup-approval .approve-design{width:100%;margin-top:12px;background:var(--ok);color:#04100a}
.mockup-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#030711}
.mockup-compare figure{margin:0}.mockup-compare img{width:100%;max-height:440px;object-fit:contain;object-position:top;background:#000;border-radius:10px}.mockup-compare figcaption{display:flex;justify-content:space-between;gap:8px;margin-top:7px;color:var(--muted);font-size:12px}
.mockup-dialog{width:min(1240px,96vw);height:min(900px,94dvh);padding:0;border:1px solid var(--line);border-radius:22px;background:#040913;color:var(--ink);overflow:hidden;box-shadow:0 40px 120px #000}
.mockup-dialog::backdrop{background:#01040be8;backdrop-filter:blur(8px)}
.mockup-view{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.7fr);height:100%}
.mockup-view figure{margin:0;overflow:auto;background:#010307}.mockup-view figure img{display:block;width:100%;height:auto;min-height:100%;object-fit:contain;object-position:top}
.mockup-detail{padding:54px 28px 28px;overflow:auto}.mockup-detail h2{font-size:32px}.mockup-detail>p{line-height:1.7}
.mockup-detail dl{display:grid;gap:11px;margin:22px 0}.mockup-detail dt{font:10px 'IBM Plex Mono',monospace;letter-spacing:.13em;color:var(--dim);text-transform:uppercase}.mockup-detail dd{margin:2px 0 0;color:var(--ink);font-size:13px}
.mockup-detail-actions{display:grid;gap:8px;margin-top:22px}.mockup-detail-actions button{width:100%}
#mockup-note-box{display:grid;gap:10px;margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#071322}#mockup-note-box textarea{margin-top:6px}
.mix-dialog{width:min(640px,94vw);max-height:90dvh;overflow:auto;padding:34px}.mix-dialog form,.mix-dialog #mix-fields{display:grid;gap:12px}.mix-row{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:center}.mix-row label{font-size:13px;color:var(--muted)}
@media(max-width:800px){.mockup-grid{grid-template-columns:1fr 1fr}.mockup-view{grid-template-columns:1fr}.mockup-dialog{width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0}.mockup-view figure{min-height:55dvh}.mockup-detail{padding:32px 20px 90px}}
@media(max-width:520px){.mockup-grid{grid-template-columns:1fr}.mockup-compare{grid-template-columns:1fr}.mix-row{grid-template-columns:1fr;gap:3px}}
@media(prefers-reduced-motion:reduce){.mockup-progress i{animation:none}.concept-card:hover{transform:none}}