/* Graphite — CO.OP's design language.
   Warm near-black, quiet frosted surfaces, tight grotesk type. Colour belongs to AI only:
   an iridescent ring while an agent thinks, and a gradient signature per agent (--s1, --s2). */
:root, :root[data-theme=dark] {
  --bg: #0f0e0d;
  --side: #0b0a09;
  --surface: #191816;
  --surface-2: #22201e;
  --menu: #191816;
  --hover: rgba(255, 246, 236, .05);
  --line: rgba(255, 246, 236, .08);
  --text: #f1ede8;
  --muted: #8e8882;
  --code-bg: #0a0908;
  --shadow: 0 0 0 1px var(--line);
  --iris: conic-gradient(from var(--spin, 0deg), #9cc8ff, #b9a6ff, #ffa6d4, #ffd29a, #a6f0d0, #9cc8ff);
  --ai: #c9bcff;
  --ai-bg: rgba(255, 246, 236, .025);
  --display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
}
:root[data-theme=light] {
  --bg: #f6f3ef; --side: #efebe6; --surface: #ffffff; --surface-2: #ebe6e0; --menu: #ffffff;
  --hover: rgba(30, 24, 18, .05); --line: rgba(30, 24, 18, .1); --text: #1a1714; --muted: #7b736b; --code-bg: #f1ede8;
  --ai: #6b55e0; --ai-bg: rgba(30, 24, 18, .02);
}
@property --spin { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@keyframes spin { to { --spin: 360deg; } }

body { background: var(--bg); }
h1, h2, h3, .l-title, .l-h2, .hello h2, .su-body h1, .logo .wm { font-family: var(--display); }
em { font-style: normal; }

/* surfaces: one frosted recipe, used sparingly */
.sidebar { background: var(--side); border-right: 1px solid var(--line); }
.composer, .menu, .dlg { background: var(--surface); background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(0, 0, 0, .35); }
.composer { border-radius: 22px; }

/* ---------- AI: iridescence and signatures ---------- */
.ai-mark, .msg-ai .ai-mark { position: relative; background: none !important; color: var(--text) !important; }
.ai-mark::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px; background: linear-gradient(135deg, var(--s1, #b9a6ff), var(--s2, #9cc8ff));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.msg-ai { position: relative; background: var(--ai-bg) !important; box-shadow: 0 0 0 1px var(--line) !important; border-radius: 18px; overflow: hidden; }
.msg-ai::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(var(--s1, #b9a6ff), var(--s2, #9cc8ff)); }
.msg-ai .agent-name { background: linear-gradient(90deg, var(--s1, #b9a6ff), var(--s2, #9cc8ff)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.mention { color: var(--text); background: var(--surface-2); border-radius: 6px; padding: 0 5px; font-weight: 500; }
.msg-user.tagged .bubble { box-shadow: inset 0 0 0 1px rgba(201, 188, 255, .5); }
/* thinking: the iridescent ring turns */
.working .mark { position: relative; }
.working .pulse { width: 22px; height: 22px; border-radius: 50%; background: var(--iris); animation: spin 2.4s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 7px, #000 7.5px); mask: radial-gradient(circle, transparent 7px, #000 7.5px); }
.working .now { background: none; -webkit-text-fill-color: currentColor; color: var(--text); }
.cc-dot.ok { background: var(--iris); animation: spin 3s linear infinite; }

@keyframes orbit { to { transform: rotate(360deg); } }
/* ---------- app details ---------- */
.hello h2 em { font-weight: 300; color: var(--muted); }
.update-bar { background: var(--surface); }
.side-version { font-family: ui-monospace, monospace; }
@media (prefers-reduced-motion: reduce) { .working .pulse, .cc-dot.ok { animation: none; } }

/* ---------- Mac app onboarding ---------- */
.onboard { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); animation: pop .5s ease; }
.ob-art { position: relative; display: grid; place-items: center; overflow: hidden; border-right: 1px solid var(--line); background: linear-gradient(160deg, #13120f, #0b0a09); }
.ob-orb { position: absolute; width: 420px; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); animation: orbit 60s linear infinite; }
.ob-orb.o2 { width: 300px; animation-duration: 40s; animation-direction: reverse; }
.ob-orb.o3 { width: 540px; animation-duration: 90s; }
.ob-orb .dot { position: absolute; top: -6px; left: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
.ob-orb .dot.ai { width: 16px; height: 16px; background: var(--iris); animation: spin 3s linear infinite; }
.ob-art .logo { position: relative; flex-direction: column; }
.ob-side { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(32px, 6vw, 80px); overflow-y: auto; }
.ob-step { display: flex; flex-direction: column; animation: pop .5s cubic-bezier(.2,.8,.2,1); max-width: 440px; }
.ob-kicker { font: 500 11px ui-monospace, "SF Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.ob-title { font: 650 40px/1.04 var(--display); letter-spacing: -.045em; margin: 0 0 10px; }
.ob-lead { color: var(--muted); margin: 0 0 26px; }
.ob-auth .auth-box { width: 100%; text-align: left; animation: none; }
.ob-auth .auth-box > .logo { display: none; }
.ob-ais { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.ob-ai { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.ob-ai input { display: none; }
.ob-ai:has(input:checked) { box-shadow: 0 0 0 1px rgba(255, 246, 236, .4); }
.ob-ai-ic { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--s1), var(--s2)); flex: none; opacity: .35; }
.ob-ai.ok .ob-ai-ic { opacity: 1; }
.ob-ai-t { flex: 1; display: flex; flex-direction: column; }
.ob-ai-t small { color: var(--muted); }
.ob-ok { font-size: 12.5px; color: var(--muted); }
.ob-row { display: flex; align-items: center; gap: 12px; }
.ob-row .primary { padding: 11px 22px; }
.ob-dots { position: absolute; bottom: 32px; left: clamp(32px, 6vw, 80px); display: flex; gap: 6px; }
.ob-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .3s; }
.ob-dots i.on { width: 20px; background: var(--text); }
/* inside the joined Mac app, Touch ID passkeys belong to the website: hide them */
.in-app .onboard .auth-box #loginBtn, .in-app .onboard .auth-box #registerForm, .in-app .onboard .passkey-hint { display: none; }
@media (max-width: 760px) { .onboard { grid-template-columns: 1fr; } .ob-art { display: none; } }

.workshop-bar { flex-wrap: wrap; }
.ws-review { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.ob-busy { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ob-busy i { width: 14px; height: 14px; border-radius: 50%; background: var(--iris); animation: spin 1.2s linear infinite; -webkit-mask: radial-gradient(circle, transparent 4.5px, #000 5px); }
.hello h2 em, .landing em, .l-title em, .l-h2 em { font-family: var(--display); font-style: normal; font-weight: 300; color: var(--muted); }

.chat { min-width: 420px; }
@media (max-width: 900px) { .chat { min-width: 0; } }
.canvas { flex: 1 1 52%; }

/* Titles mix a tight bold grotesk with a serif italic (the user's choice, 2026-10-28) */
:root { --serif: "Instrument Serif", ui-serif, "New York", Georgia, serif; }
.hello h2 em, .landing em, .l-title em, .l-h2 em, .ob-title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--text); letter-spacing: -.01em; font-size: 1.06em; }

/* Sign-in: the quick ways come alone first (Touch ID, a first name), the rest unfolds on demand. */
.auth-quick { display: flex; flex-direction: column; gap: 12px; }
.auth-quick:not(:has(> :not([hidden]))) { display: none; }
.auth-invite { margin: 0; color: var(--muted); font-size: 14px; }
.auth-box.quick .auth-tabs, .auth-box.quick .auth-pane, .auth-box.quick #devLoginBtn, .auth-box:not(.quick) #joinForm2 { display: none; }
#otherWays { align-self: center; }
.in-app .auth-box #loginBtn, .in-app .auth-box #registerForm, .in-app .auth-box .passkey-hint, .in-app .auth-box .oauth-row { display: none; }
/* The number to match: the asking device shows it large, the signed-in one picks it among three. */
.approve-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.approve-num { font: 600 56px/1 var(--display); letter-spacing: -.04em; background: var(--iris); -webkit-background-clip: text; background-clip: text; color: transparent; animation: irisSpin 6s linear infinite; }
@keyframes irisSpin { to { --spin: 360deg; } }
.approve-dlg { width: min(420px, calc(100vw - 32px)); }
.approve-body { display: flex; flex-direction: column; gap: 10px; padding: 8px 6px 4px; text-align: center; }
.approve-body h2 { margin: 0; font: 600 22px var(--display); letter-spacing: -.02em; }
.approve-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0; }
.approve-choice { padding: 18px 0; border: 0; border-radius: 14px; background: var(--surface-2); color: var(--text); font: 600 28px var(--display); cursor: pointer; transition: transform .15s, background .15s; }
.approve-choice:hover { transform: translateY(-2px); background: var(--hover); box-shadow: var(--shadow); }
/* Adding a collaborator by identifier, above the link. */
.add-member { display: flex; gap: 8px; }
.add-member input { flex: 1; min-width: 0; }

/* Connectors and skills of the member's AI: one row each, off until switched on. */
.cc-conn { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.conn-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; }
.conn-row:hover { background: var(--hover); }
.conn-row input { width: 16px; height: 16px; accent-color: var(--text); flex: none; }
.conn-row span { display: flex; flex-direction: column; min-width: 0; }
.conn-row small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Unread messages of a project, in the sidebar. */
#roomList a .unread { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--text); color: var(--bg); font: 600 11px/18px var(--ui, system-ui); text-align: center; font-variant-numeric: tabular-nums; }