:root {
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --side-w: 272px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

.app { display: flex; height: 100dvh; overflow: hidden; }

/* ---------- sidebar ---------- */
.side {
  width: var(--side-w); flex: none; background: var(--side-bg); color: #dfe2f5; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 14px 12px; gap: 6px;
}
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 10px; }
.side-brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 19px; color: #fff; letter-spacing: -.02em; }
.side-brand img { width: 26px; height: 26px; }
.new-chat {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); cursor: pointer; font-weight: 600; font-size: 14.5px; color: #fff;
  transition: background .15s;
}
.new-chat:hover { background: rgba(255,255,255,.12); }
.recents-label { font-size: 12px; font-weight: 600; color: #7e84ad; padding: 12px 10px 6px; }
.recents { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 1px; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.recent {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; font-size: 14px; color: #c3c7e6; cursor: pointer; position: relative;
}
.recent span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.recent:hover, .recent.active { background: rgba(255,255,255,.07); color: #fff; }
.recent .del { opacity: 0; border: 0; background: none; cursor: pointer; padding: 2px; color: #8a90b8; border-radius: 6px; }
.recent:hover .del { opacity: 1; }
.recent .del:hover { color: #fff; background: rgba(255,255,255,.1); }
.recents .none { font-size: 13px; color: #7e84ad; padding: 6px 10px; }

.assist-promo {
  display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; margin-top: 8px;
  background: linear-gradient(135deg, rgba(0,212,255,.16), rgba(255,255,255,.03)); border: 1px solid rgba(0,212,255,.22);
}
.assist-promo img { width: 46px; height: 46px; flex: none; }
.assist-promo b { display: block; font-size: 13.5px; color: #fff; }
.assist-promo span { font-size: 12.5px; color: #9fd9ea; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 8px; font-size: 14px; }
.side-user .avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--cyan); color: var(--ink); font-weight: 700; }
.side-user b { display: block; color: #fff; font-size: 14px; }
.side-user span { font-size: 12.5px; color: #8a90b8; }
.side-user .who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 4px; margin: -4px; border-radius: 12px; }
.side-user .who:hover { background: rgba(255,255,255,.06); }
.side-user .avatar { flex: none; }
.side-user .who-text { min-width: 0; }
.side-user .who-text b, .side-user .who-text span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .upgrade.plan-badge { border-color: transparent; background: var(--cyan); color: var(--ink); }
.side-user .upgrade { flex: none; margin-left: auto; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: #fff; }
.side-user .upgrade:hover { background: rgba(255,255,255,.08); }

.side-brand span small { font-weight: 500; color: var(--cyan); margin-left: 6px; }

/* ---------- main ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.topbar { display: flex; align-items: center; gap: 8px; height: 58px; padding: 0 16px; flex: none; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.topbar .ts-btn { width: 34px; height: 34px; border: 0; color: var(--muted); }
.topbar .ts-btn:hover { background: var(--user); color: var(--text); }
.top-link { font-size: 13.5px; color: var(--muted); padding: 6px 10px; border-radius: 8px; }
.top-link:hover { background: var(--user); color: var(--text); }
.icon-btn { border: 0; background: none; cursor: pointer; padding: 8px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.icon-btn:hover { background: var(--user); color: var(--text); }
.side .icon-btn { color: #c3c7e6; }
.side .icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.only-mobile { display: none; }

.app-title { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.app-title b { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.plan-chip { font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; background: var(--navy); color: var(--cyan); }
.app-title b, .credits { white-space: nowrap; }
.credits { font-size: 13px; font-weight: 600; color: var(--cyan-ink); background: var(--cyan-soft); padding: 6px 12px; border-radius: 999px; }
.credits.low { background: var(--err-bg); color: var(--err-text); }

/* Insight and Flow without Plus */
.locked[hidden] { display: none; }
.locked { flex: 1; display: grid; place-items: center; padding: 24px; overflow-y: auto; }
.app.is-locked .scroller, .app.is-locked .composer-wrap, .app.checking .composer-wrap, .app.checking .scroller { display: none; }
.locked-card { width: min(460px, 100%); text-align: center; }
.locked-icon { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 22px; background: var(--navy); color: var(--cyan); display: grid; place-items: center; box-shadow: 0 20px 40px -16px rgba(27,31,59,.5); }
.locked h1 { font-family: var(--display); font-size: clamp(26px, 4vw, 34px); letter-spacing: -.03em; margin: 14px 0 10px; line-height: 1.15; }
.locked p { color: var(--muted); margin: 0 0 24px; font-size: 15.5px; line-height: 1.55; }
.locked-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-lock { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid var(--line); background: var(--surface); }
.btn-lock.primary { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-fg); }
.btn-lock:hover { transform: translateY(-1px); }
.locked .locked-login { margin: 18px 0 0; font-size: 14px; }
.locked-login a { color: var(--cyan-2); font-weight: 600; }

.scroller { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.thread { max-width: 780px; margin: 0 auto; padding: 12px 24px 40px; }

/* empty / welcome state */
.empty { display: none; text-align: center; padding: 0 24px 26px; }
.empty-mark { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: 0 10px 30px -10px rgba(27,31,59,.25); }
.empty-mark img { width: 40px; height: 40px; }
.empty-mark svg { color: var(--strong); }
.empty h1 { font-family: var(--display); font-size: clamp(28px, 4vw, 40px); letter-spacing: -.03em; margin: 0 0 8px; font-weight: 600; }
.empty p { color: var(--muted); margin: 0; font-size: 16px; }
.is-empty .empty { display: block; }
.is-empty .scroller { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.is-empty .thread { display: none; }
.empty { width: 100%; max-width: 780px; }
.is-empty .composer-wrap { flex: 1 1 0; justify-content: flex-start; }

/* messages */
.msg { margin: 26px 0; }
.msg-user { display: flex; justify-content: flex-end; }
.msg-user .bubble { background: var(--user); padding: 11px 18px; border-radius: 22px 22px 6px 22px; max-width: 80%; white-space: pre-wrap; word-wrap: break-word; font-size: 15.5px; line-height: 1.55; }
.msg-ai { display: flex; gap: 14px; }
.msg-ai .av { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; margin-top: 1px; }
.msg-ai .av img { width: 19px; height: 19px; }
.msg-ai .body { flex: 1; min-width: 0; }
.msg-ai .name { font-size: 13px; font-weight: 600; color: var(--muted); margin: 5px 0 6px; }
.md { font-size: 15.5px; line-height: 1.7; word-wrap: break-word; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 14px; }
.md h1, .md h2, .md h3, .md h4 { font-family: var(--display); letter-spacing: -.02em; line-height: 1.25; margin: 24px 0 10px; }
.md h1 { font-size: 24px; } .md h2 { font-size: 21px; } .md h3 { font-size: 18px; } .md h4 { font-size: 16px; }
.md ul, .md ol { margin: 0 0 14px; padding-left: 24px; }
.md li { margin: 5px 0; }
.md li::marker { color: var(--cyan-2); }
.md a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.md strong { font-weight: 650; }
.md blockquote { margin: 0 0 14px; padding: 4px 16px; border-left: 3px solid var(--cyan); color: var(--muted); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.md code { font-family: var(--mono); font-size: .86em; background: var(--user); padding: 2px 6px; border-radius: 6px; }
.md table { border-collapse: collapse; width: 100%; margin: 4px 0 16px; font-size: 14.5px; display: block; overflow-x: auto; }
.md th, .md td { border-bottom: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.md th { font-weight: 600; background: var(--surface-2); }
.md th:first-child { border-top-left-radius: 8px; } .md th:last-child { border-top-right-radius: 8px; }

.codeblock { margin: 0 0 16px; border-radius: 14px; overflow: hidden; background: #14172e; border: 1px solid #22264a; }
.codeblock-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; font-size: 12.5px; color: #9aa0c8; background: #1b1f3b; font-family: var(--mono); }
.codeblock-head button { border: 0; background: none; color: #c7cbee; cursor: pointer; font: 500 12.5px var(--font); display: flex; gap: 6px; align-items: center; padding: 4px 8px; border-radius: 6px; }
.codeblock-head button:hover { background: rgba(255,255,255,.08); }
.codeblock pre { margin: 0; padding: 16px; overflow-x: auto; }
.codeblock pre code { background: none; padding: 0; font-size: 13.5px; line-height: 1.65; color: #e4e6f7; border-radius: 0; }
.codeblock pre code.hljs { background: none; padding: 0; }

/* Flow design previews */
.design { margin: 4px 0 18px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: 0 12px 30px -16px rgba(27,31,59,.25); }
.design-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.design-head .tab { border: 0; background: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.design-head .tab.on { background: var(--primary-bg); color: var(--primary-fg); }
.design-head .sp { flex: 1; }
.design-head .act { border: 0; background: none; cursor: pointer; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.design-head .act:hover { background: var(--user); color: var(--text); }
.design-stage { background: repeating-conic-gradient(#f1f2f7 0 25%, #fff 0 50%) 0 0 / 20px 20px; display: grid; place-items: center; min-height: 280px; padding: 28px; }
.design-stage img { max-width: 100%; max-height: 420px; width: 360px; height: auto; }
.design-stage.site { padding: 0; background: #fff; }
.design-stage iframe { width: 100%; height: 460px; border: 0; display: block; background: #fff; }
.design .codeblock { margin: 0; border-radius: 0; border: 0; }
.design .codeblock pre { max-height: 460px; }
.building { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 16px; margin: 4px 0 16px; background: linear-gradient(110deg, var(--surface-2) 30%, var(--surface) 50%, var(--surface-2) 70%); background-size: 250% 100%; animation: shimmer 1.6s linear infinite; border: 1px solid var(--line); }
.building .spark { width: 38px; height: 38px; border-radius: 11px; background: var(--navy); display: grid; place-items: center; flex: none; }
.building .spark img { width: 22px; height: 22px; }
.building b { display: block; font-size: 14.5px; }
.building span { font-size: 13px; color: var(--muted); }
@keyframes shimmer { to { background-position: -250% 0; } }

/* message actions */
.actions { display: flex; gap: 2px; margin-top: 8px; opacity: 0; transition: opacity .15s; }
.msg-ai:hover .actions, .msg-ai.last .actions { opacity: 1; }
.actions button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 6px; border-radius: 8px; display: grid; place-items: center; }
.actions button:hover { background: var(--user); color: var(--text); }

/* thinking indicator */
.thinking { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14.5px; }
.orb { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from 0deg, var(--cyan), var(--navy), var(--cyan)); animation: spin 1.1s linear infinite; -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
@keyframes spin { to { transform: rotate(360deg); } }
.cursor::after { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); margin-left: 6px; vertical-align: 1px; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.6); opacity: .5; } }
.err { color: var(--err-text); background: var(--err-bg); border: 1px solid var(--err-line); padding: 10px 14px; border-radius: 12px; font-size: 14.5px; }

/* ---------- composer ---------- */
.composer-wrap { flex: none; display: flex; flex-direction: column; padding: 0 24px 12px; }
.composer {
  width: 100%; max-width: 780px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  padding: 14px 14px 10px 18px; box-shadow: 0 8px 30px -12px rgba(27,31,59,.18); transition: border-color .15s, box-shadow .15s;
}
.composer:focus-within { border-color: var(--track); box-shadow: 0 10px 36px -12px rgba(27,31,59,.26), 0 0 0 4px rgba(0,212,255,.1); }
.composer textarea { width: 100%; border: 0; outline: 0; resize: none; font: 16px/1.5 var(--font); color: var(--text); max-height: 240px; background: none; padding: 2px 0; }
.composer textarea::placeholder { color: #9aa0bd; }
.composer-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.composer-tools { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; position: relative; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 13px; color: var(--muted); }
.chip-btn:hover { background: var(--bg); color: var(--text); }
.chip-btn.on { background: var(--cyan-soft); border-color: rgba(0,169,214,.4); color: var(--cyan-ink); }
.chip-btn .dots { display: flex; }
.chip-btn .dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -5px; font-style: normal; font-size: 8px; display: grid; place-items: center; color: #fff; font-weight: 700; }
.chip-btn .dots i:first-child { margin-left: 0; }
.send { width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; background: var(--primary-bg); color: var(--primary-fg); display: grid; place-items: center; flex: none; transition: background .15s, transform .15s; }
.send:hover:not(:disabled) { background: var(--navy-3); }
.send:disabled { background: var(--track); cursor: default; }
.send .i-stop { display: none; }
.streaming .send { background: var(--primary-bg); }
.streaming .send .i-send { display: none; }
.streaming .send .i-stop { display: block; }
.fineprint { text-align: center; font-size: 12px; color: var(--muted); margin: 10px 0 0; }

.suggestions { order: 3; display: none; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 780px; width: 100%; margin: 18px auto 0; }
.is-empty .suggestions { display: grid; }
.is-empty .fineprint { display: none; }
.sugg { text-align: left; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent); border-radius: 16px; padding: 13px 16px; cursor: pointer; font-size: 14px; color: var(--text); transition: background .15s, border-color .15s, transform .15s; }
.sugg:hover { background: var(--surface); border-color: var(--line-strong); transform: translateY(-1px); }
.sugg small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* connectors popover (Insight) */
.popover {
  position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 20; width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 20px 50px -12px rgba(27,31,59,.3); padding: 8px; display: none;
}
.popover.open { display: block; }
.popover h6 { margin: 6px 8px 8px; font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.conn { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.conn:hover { background: var(--bg); }
.conn .logo { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; flex: none; }
.conn .tg { margin-left: auto; width: 34px; height: 20px; border-radius: 99px; background: #d9dcea; position: relative; transition: background .15s; flex: none; }
.conn .tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.conn.on .tg { background: var(--cyan-2); }
.conn.on .tg::after { left: 16px; }

/* preview modal */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(11,13,31,.55); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-card { width: min(1200px, 100%); height: min(860px, 100%); background: var(--surface); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--line); }
.modal-body { flex: 1; display: grid; place-items: center; background: repeating-conic-gradient(#f1f2f7 0 25%, #fff 0 50%) 0 0 / 20px 20px; overflow: auto; }
.modal-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.modal-body img { max-width: 80%; max-height: 80%; width: 520px; }

.scrim { display: none; }

@media (max-width: 860px) {
  .only-mobile { display: grid; }
  .side { position: fixed; inset: 0 auto 0 0; z-index: 60; transform: translateX(-100%); transition: transform .25s ease; width: 290px; }
  .app.side-open .side { transform: none; }
  .app.side-open .scrim { display: block; position: fixed; inset: 0; background: rgba(11,13,31,.45); z-index: 55; }
  .thread { padding: 8px 16px 30px; }
  .composer-wrap { padding: 0 12px 10px; }
  .suggestions { grid-template-columns: 1fr; }
  .suggestions .sugg:nth-child(n+3) { display: none; }
  .top-link { display: none; }
  .app-title .plan-chip { display: none; }
  .app-title b { font-size: 16px; }
  .msg-user .bubble { max-width: 88%; }
  .msg-ai { gap: 10px; }
}