/* CluserAI — linked-node ledger system. This layer changes presentation, not product behavior. */
:root {
  --bg: #11151c;
  --bg2: #171d25;
  --bg3: #1e2630;
  --bgh: #28323e;
  --bga: #303c49;
  --br: #2d3743;
  --brL: #435161;
  --txt: #edf2f7;
  --txt2: #c4ced9;
  --txt3: #8d9aaa;
  --acc: #edf4fa;
  --accH: #ffffff;
  --accL: rgba(83, 184, 226, .12);
  --accG: rgba(0, 0, 0, .24);
  --acc2: #67c7ec;
  --acc2L: rgba(103, 199, 236, .12);
  --brand-blue: #4c94ff;
  --brand-cyan: #58c9e7;
  --brand-violet: #ac8dff;
  --danger: #ff8a83;
  --success: #66c999;
  --warn: #efbd61;
  --shadow: 0 14px 40px rgba(0, 0, 0, .24);
  --shadowS: 0 2px 10px rgba(0, 0, 0, .16);
  --r: 12px;
  --rS: 7px;
  --rL: 18px;
  --rXL: 24px;
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f8fb;
  --bg2: #ffffff;
  --bg3: #f1f4f8;
  --bgh: #eaf0f6;
  --bga: #e1eaf2;
  --br: #dfe5ec;
  --brL: #c7d1dd;
  --txt: #17212d;
  --txt2: #465463;
  --txt3: #738091;
  --acc: #17212d;
  --accH: #0f1721;
  --accL: rgba(26, 125, 179, .08);
  --accG: rgba(26, 45, 70, .08);
  --acc2: #087fb6;
  --acc2L: rgba(8, 127, 182, .10);
  --brand-blue: #1768d4;
  --brand-cyan: #087f9c;
  --brand-violet: #7253bf;
  --danger: #b42318;
  --success: #216e4e;
  --warn: #8b5a00;
  --shadow: 0 14px 38px rgba(25, 45, 70, .09);
  --shadowS: 0 2px 10px rgba(25, 45, 70, .06);
}
html, body { min-width: 320px; background: var(--bg); color: var(--txt); }
body { font-family: var(--font), Inter, system-ui, sans-serif; }
:where(button, a, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 3px; }
button { -webkit-tap-highlight-color: transparent; }

/* Public entry: the actual linked-node mark becomes a quiet, oversized watermark. */
#introPage { align-items: stretch; background: var(--bg); }
.intro-bg { display: block; position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
.intro-bg::after { display: none; }
.intro-grid { display: none; }
.intro-content { position: relative; align-items: flex-start; text-align: left; width: min(100%, 1120px); max-width: 1120px; padding: clamp(30px, 7vh, 72px) clamp(18px, 3.8vw, 42px) 48px; }
.intro-logo-wrap { width: 44px; height: 44px; margin: 0 0 36px; border: 0; border-radius: 12px; box-shadow: none; animation: none; }
.intro-logo-wrap img { object-fit: cover; }
.intro-badge { display: none; }
.intro-title { max-width: 650px; margin: 0 0 16px; font-size: clamp(42px, 5.4vw, 66px); font-weight: 600; letter-spacing: -.06em; line-height: 1.02; animation: introReveal .5s ease-out both; }
.intro-title .t1 { color: var(--txt2); background: none; -webkit-text-fill-color: currentColor; }
.intro-title .t2 { color: var(--txt); background: none; -webkit-text-fill-color: currentColor; }
.intro-sub { max-width: 560px; margin: 0 0 26px; color: var(--txt); font-size: 18px; line-height: 1.6; animation: introReveal .5s .06s ease-out both; }
.intro-actions { justify-content: flex-start; gap: 10px; margin: 0 0 clamp(30px, 5vh, 48px); animation: introReveal .5s .12s ease-out both; }
.btn-intro-primary, .btn-intro-secondary { min-height: 46px; padding: 12px 20px; border-radius: 11px; font-size: 14px; font-weight: 600; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.btn-intro-primary { gap: 10px; border: 1px solid var(--txt); background: var(--txt); color: var(--bg2); box-shadow: none; }
.btn-intro-primary svg { width: 17px; height: 17px; }
.btn-intro-primary:hover { transform: translateY(-1px); background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; box-shadow: none; }
.btn-intro-secondary { border: 1px solid var(--brL); background: var(--bg2); color: var(--txt); }
.btn-intro-secondary:hover { border-color: var(--brand-cyan); background: var(--accL); color: var(--txt); }
.intro-preview { position: absolute; z-index: 1; top: 128px; right: clamp(18px, 3.8vw, 42px); width: min(48%, 540px); margin: 0; overflow: hidden; border: 0; border-radius: 10px; background: var(--bg2); animation: introReveal .56s .1s ease-out both; }
.intro-preview img { display: block; width: 100%; height: auto; }
.intro-preview figcaption { padding: 9px 4px; color: var(--txt2); font-size: 14px; line-height: 1.35; }
.intro-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; width: 100%; max-width: none; margin: 0; }
.intro-feat { min-height: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; padding: 12px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.intro-feat:hover { transform: none; background: transparent; box-shadow: none; }
.intro-feat-icon { display: grid; place-items: center; width: 23px; height: 23px; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--brand-cyan); grid-row: 1; }
.intro-feat-icon svg { width: 20px; height: 20px; }
.intro-feat-title { align-self: center; margin: 0; color: var(--txt); font-size: 14px; font-weight: 600; }
.intro-feat-desc { grid-column: 2; color: var(--txt); font-size: 16px; line-height: 1.5; }
@keyframes introReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 761px) { .intro-content { min-height: 100dvh; justify-content: center; } }

/* Authentication and email verification. Keep long forms scrollable on short viewports. */
#authPage, #verifyEmailPage { align-items: center; justify-content: center; overflow-y: auto; background: var(--bg); }
.auth-bg { display: block; position: fixed; inset: 0; background: radial-gradient(ellipse at 18% 20%, rgba(23, 104, 212, .08), transparent 30%), radial-gradient(ellipse at 88% 78%, rgba(8, 127, 156, .065), transparent 35%); }
.auth-wrap { position: relative; z-index: 1; width: min(100%, 520px); padding: 28px 20px; }
.auth-card { position: relative; width: 100%; max-height: calc(100dvh - 36px); overflow-y: auto; padding: clamp(22px, 5vw, 34px); border: 1px solid var(--br); border-radius: 16px; background: var(--bg2); box-shadow: var(--shadow); }
.auth-logo-wrap { margin-bottom: 26px; gap: 12px; }
.auth-logo-img { width: 42px; height: 42px; border: 1px solid var(--br); border-radius: 11px; box-shadow: none; }
.auth-brand { color: var(--txt); font-weight: 650; letter-spacing: -.03em; }
.auth-brand-sub { color: var(--txt3); font-size: 11px; }
.auth-title { margin-bottom: 22px; color: var(--txt); font-size: 25px; font-weight: 600; letter-spacing: -.04em; }
.back-btn { top: 16px; left: 16px; min-height: 40px; border-radius: 9px; color: var(--txt2); }
.back-btn:hover { background: var(--bg3); color: var(--txt); }
.fgroup { margin-bottom: 15px; }
.flabel { margin-bottom: 6px; color: var(--txt2); font-size: 12px; font-weight: 600; }
.finput { min-height: 46px; padding: 11px 12px; border: 1px solid var(--brL); border-radius: 9px; background: var(--bg); color: var(--txt); font: 14px var(--font); }
.finput::placeholder { color: var(--txt3); opacity: 1; }
.finput:focus { border-color: var(--brand-cyan); box-shadow: 0 0 0 3px var(--accL); outline: none; }
.errmsg[role="alert"] { color: var(--danger); font-size: 12px; }
.remember-row { color: var(--txt2); font-size: 12px; }
#forgotPwLink, #goRegister, #goLogin, #veLogoutLink { min-height: 40px; padding: 6px 4px; border: 0; background: transparent; color: var(--brand-cyan); font: 600 12px var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.btn-auth { min-height: 46px; margin-top: 8px; border: 1px solid var(--txt); border-radius: 10px; background: var(--txt); color: var(--bg2); font: 600 14px var(--font); }
.btn-auth:hover { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.btn-google { min-height: 46px; border: 1px solid var(--brL); border-radius: 10px; background: var(--bg2); color: var(--txt); font-weight: 500; }
.btn-google:hover { border-color: var(--brand-cyan); background: var(--accL); }
.auth-divider { color: var(--txt3); }
.auth-switch { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px; color: var(--txt2); font-size: 12px; }
#verifyEmailPage .auth-card { text-align: left !important; }
#verifyEmailPage #veLogoImg { margin-bottom: 14px; }

/* Product shell and navigation. */
#appPage, #appPage .main { background: var(--bg); color: var(--txt); }
#appPage .sidebar { width: 264px; padding: 0 12px; border-right: 1px solid var(--br); background: var(--bg); }
.sb-header { padding: 18px 6px 15px; }
.sb-logo { gap: 10px; }
.sb-logo-img { width: 30px; height: 30px; border: 1px solid var(--br); border-radius: 8px; }
.sb-brand { color: var(--txt); font-size: 15px; font-weight: 650; letter-spacing: -.03em; }
.btn-new { min-height: 40px; border: 1px solid var(--brL); border-radius: 9px; background: var(--bg2); color: var(--txt); font-size: 12px; font-weight: 550; box-shadow: none; }
.btn-new:hover { border-color: var(--brand-cyan); background: var(--accL); color: var(--txt); box-shadow: none; }
.sb-search { padding: 12px 4px 14px; }
.sb-search-wrap { min-height: 38px; border-radius: 8px; background: var(--bg2); }
.sb-search-input { height: 38px; border: 1px solid var(--br); border-radius: 8px; background: transparent; color: var(--txt); font-size: 12px; }
.sb-search-input:focus { border-color: var(--brand-cyan); box-shadow: 0 0 0 2px var(--accL); }
.sb-convs { padding: 4px 2px; }
.conv-group-label { margin: 18px 8px 7px; color: var(--txt3); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.conv-item { min-height: 38px; margin: 2px 0; border: 1px solid transparent; border-radius: 8px; color: var(--txt2); }
.conv-item:hover, .sb-nav:hover { background: var(--bg3); color: var(--txt); }
.conv-item.active, .sb-nav.active { background: var(--bg3); border-color: var(--br); color: var(--txt); }
.sb-footer { padding: 10px 2px 12px; border-top: 1px solid var(--br); }
.user-row { min-height: 46px; }
.user-av { border: 1px solid var(--br); background: var(--bg3); color: var(--txt); }
.sb-primary-links { display: grid; gap: 2px; margin-top: 8px; }
.sb-primary-links .sb-nav { min-height: 40px; padding: 9px 10px; border-radius: 8px; }
.sb-nav { min-height: 40px; border-radius: 8px; color: var(--txt2); }
.topbar { min-height: 58px; padding-inline: 20px; border-bottom: 1px solid var(--br); background: var(--bg); }
.topbar-title { color: var(--txt); font-size: 13px; font-weight: 550; }
.menu-toggle, .icon-btn { border-radius: 8px; }
.topbar-actions { gap: 12px; }
.topbar-actions .cl-usage-meter { max-width: 240px; }
.topbar-actions #topNewChatBtn { border-radius: 9px; background: var(--bg2); }
.topbar-actions #topNewChatBtn:hover { border-color: var(--brand-cyan); background: var(--accL); }

/* Chat canvas, examples and message rhythm. */
.chat-area { background: var(--bg); scrollbar-color: var(--brL) transparent; }
.welcome { max-width: 760px; padding: clamp(28px, 7vh, 64px) 24px 32px; }
.welcome-logo { width: 42px; height: 42px; margin-bottom: 18px; border: 1px solid var(--br); border-radius: 11px; box-shadow: none; }
.welcome-title { margin-bottom: 8px; color: var(--txt); font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -.045em; }
.welcome-sub { max-width: 470px; margin-bottom: 27px; color: var(--txt2); font-size: 14px; line-height: 1.65; }
.sug-grid { gap: 10px; max-width: 720px; }
.sug-card { min-height: 86px; padding: 14px 15px; border: 1px solid var(--br); border-radius: 10px; background: var(--bg2); color: var(--txt); text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.sug-card:hover { transform: none; border-color: var(--brand-cyan); background: var(--accL); box-shadow: none; }
.sug-card:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }
.sug-lbl { color: var(--txt); font-size: 12px; font-weight: 600; }
.sug-icon { color: var(--brand-cyan); }
.sug-txt { color: var(--txt2); font-size: 12px; line-height: 1.5; }
.chat-msgs { max-width: 840px; gap: 22px; padding: 28px 22px 24px; }
.msg-row.user .msg-bubble { max-width: min(86%, 680px); padding: 11px 15px; border: 1px solid var(--br); border-radius: 17px; background: var(--bg3); color: var(--txt); }
.msg-row.assistant .msg-bubble { max-width: 100%; padding: 4px 0; background: transparent; color: var(--txt); line-height: 1.75; }

/* Composer hierarchy: prompt → active skills → response options with model opposite Search → plus left / mic-send right. */
#chatPage .input-area { width: min(100%, 960px); padding: 8px 22px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
#chatPage .input-wrap { max-width: 900px; }
#chatPage .input-box { gap: 10px; padding: 14px 15px 12px; border: 1px solid var(--brL); border-radius: 18px; background: var(--bg2); box-shadow: var(--shadowS); }
#chatPage .input-box:focus-within { border-color: var(--brand-cyan); box-shadow: 0 0 0 3px var(--accL), var(--shadowS); }
#chatPage #msgInput { min-height: 58px; color: var(--txt); }
#chatPage #msgInput::placeholder { color: var(--txt3); opacity: 1; }
#chatPage .cl-active-skills-trigger { min-height: 34px; border-radius: 8px; }
#chatPage .cl-mode-model-row { display: grid; grid-template-columns: minmax(0, 1fr) 136px; grid-template-areas: "options model"; align-items: center; column-gap: 10px; min-width: 0; width: 100%; }
#chatPage .cl-mode-bar { grid-area: options; gap: 7px; width: 100%; max-width: none; min-width: 0; margin: 0; }
#chatPage .cl-mode-btn { min-height: 44px; padding: 8px 10px; border-radius: 8px; background: transparent; color: var(--txt2); font-size: 12px; }
#chatPage .cl-mode-btn[aria-pressed="true"] { border-color: color-mix(in srgb, var(--brand-cyan) 38%, var(--br)); background: var(--accL); color: var(--brand-cyan); }
#chatPage .cl-mode-btn:disabled { opacity: .68; border-style: dashed; }
#chatPage .cl-composer-bottom-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: 44px; grid-template-areas: "attach . actions"; align-items: center; column-gap: 10px; min-width: 0; padding-top: 7px; border-top: 1px solid var(--br); }
#chatPage .cl-attach-control { grid-area: attach; display: flex; align-self: center; align-items: center; justify-content: flex-start; min-width: 0; }
#chatPage .cl-composer-right-controls { display: contents; }
#chatPage .cl-model-picker { position: relative; grid-area: model; justify-self: end; align-self: center; flex: 0 0 136px; width: 136px; min-width: 0; max-width: 136px; }
#chatPage .cl-model-trigger { box-sizing: border-box; min-height: 44px; width: 100%; padding: 8px 10px; border-radius: 9px; background: var(--bg2); font-size: 12px; }
#chatPage .cl-model-trigger-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chatPage .cl-model-options { left: auto; right: 0; width: min(230px, calc(100vw - 32px)); min-width: min(210px, calc(100vw - 32px)); max-width: min(86vw, 300px); }
#chatPage .composer-tools { grid-area: actions; display: flex; justify-self: end; align-self: center; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 6px; margin: 0; }
#chatPage .cl-model-trigger:hover, #chatPage .cl-model-trigger[aria-expanded="true"] { border-color: var(--brand-cyan); }
#chatPage .attach-btn, #chatPage .voice-btn, #chatPage #sendBtn, #chatPage #stopBtn { min-width: 44px; min-height: 44px; border-radius: 10px; }
#chatPage .attach-btn { border-color: var(--br); background: var(--bg); color: var(--txt2); }
#chatPage .attach-btn:hover, #chatPage .voice-btn:hover { border-color: var(--brand-cyan); background: var(--accL); color: var(--brand-cyan); }
#chatPage #sendBtn, #chatPage #stopBtn { border: 1px solid var(--txt); background: var(--txt); color: var(--bg2); }
#chatPage #sendBtn:hover, #chatPage #stopBtn:hover { border-color: var(--brand-blue); background: var(--brand-blue); color: #fff; }
#chatPage dialog.attach-menu { width: min(420px, calc(100vw - 32px)); border-color: var(--br); border-radius: 16px; background: var(--bg2); color: var(--txt); box-shadow: var(--shadow); }
#chatPage .attach-sheet-header { min-height: 54px; border-bottom: 1px solid var(--br); }
#chatPage .attach-option { min-height: 86px; border-radius: 11px; }
#chatPage .attach-option:hover, #chatPage .attach-option:focus-visible { background: var(--accL); }
.footer-note { color: var(--txt3); font-size: 11px; }

/* Inner pages: consistent open-plane layout and readable dense content. */
.inner-page { padding: clamp(20px, 4vw, 40px); background: var(--bg); color: var(--txt); }
.pg-header { max-width: 1040px; margin: 0 auto 26px; }
.pg-title { color: var(--txt); font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.045em; }
.pg-sub { max-width: 680px; color: var(--txt2); font-size: 14px; line-height: 1.65; }
.set-row, .about-card, .cl-plan-card, .cl-plan-feature-section, .cl-skills-card { border-color: var(--br); border-radius: 10px; background: var(--bg2); box-shadow: none; }
.set-row { padding: 18px 20px; }
.set-row:hover, .set-list-btn:hover { background: var(--bg2); }
.set-row-title, .about-card h2 { color: var(--txt); font-weight: 600; }
.set-row-desc, .about-card p { color: var(--txt2); }
.opt-chip { min-height: 40px; border-radius: 8px; }
.opt-chip.sel { border-color: var(--txt); background: var(--txt); color: var(--bg2); }
.save-btn { min-height: 44px; border-radius: 9px; }
.cl-plan-grid { gap: 12px; }
.cl-plan-card { padding: 21px; }
.cl-plan-card[data-current="true"] { border-color: var(--brand-cyan); box-shadow: 0 0 0 1px var(--accL); }
.cl-plan-price strong { letter-spacing: -.04em; }
.cl-plan-feature-section { padding: 21px; }
.cl-plan-feature-card { border-color: var(--br); border-radius: 9px; background: var(--bg); }
.cl-upgrade-back, .cl-skills-header-actions button, .cl-skills-search { min-height: 42px; border-radius: 9px; }
.cl-skills-header { margin-bottom: 22px; }
.cl-skills-card { border-radius: 10px; }
.cl-skills-card:focus-within { border-color: var(--brand-cyan); }
.cl-skills-active { color: var(--brand-cyan); }
.cl-skills-count { font-variant-numeric: tabular-nums; }
#settingsPage, #upgradePage, #skillsPage, #aboutPage { overflow-y: auto; overscroll-behavior: contain; }

@media (max-width: 760px) {
  .intro-content { min-height: 0; justify-content: flex-start; padding: 34px 22px 32px; }
  .intro-logo-wrap { margin-bottom: 30px; }
  .intro-title { max-width: 620px; font-size: clamp(40px, 10vw, 58px); }
  .intro-sub { font-size: 16px; }
  .intro-actions { margin-bottom: 24px; }
  .intro-preview { position: relative; top: auto; right: auto; width: 100%; max-width: 560px; margin: 4px 0 30px; align-self: center; }
  .intro-features { grid-template-columns: 1fr; max-width: 560px; gap: 18px; }
  .intro-feat { min-height: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 10px 0 0; }
  .intro-feat-icon { grid-row: 1; margin: 0; }
  .intro-feat-title { align-self: end; }
  .intro-feat-desc { align-self: start; grid-column: 2; }
  #appPage .sidebar { width: min(84vw, 300px); }
  .topbar { min-height: 54px; padding-inline: 10px; }
  .topbar-actions { gap: 7px; }
  .topbar-actions .cl-usage-meter { width: min(39vw, 174px); min-width: 92px; }
  .topbar-actions .cl-usage-heading { font-size: 11px; }
  .topbar-actions .cl-usage-reset { font-size: 11px; }
  .welcome { padding: 34px 18px 24px; }
  .welcome-title { font-size: 27px; }
  .sug-grid { grid-template-columns: 1fr; max-width: 520px; }
  #chatPage .input-area { width: 100%; padding-inline: calc(12px + env(safe-area-inset-left, 0px)); }
  #chatPage .input-box { gap: 8px; padding: 11px; border-radius: 15px; }
  #chatPage .cl-mode-model-row { grid-template-columns: minmax(0, 1fr) 136px; grid-template-rows: 44px 44px; grid-template-areas: "options ." "options model"; column-gap: 8px; row-gap: 5px; align-items: stretch; }
  #chatPage .cl-mode-bar { grid-area: options; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 4px; height: 93px; }
  #chatPage .cl-mode-btn { flex: 0 0 44px; min-height: 44px; }
  #chatPage .cl-model-picker { grid-area: model; align-self: center; }
  #chatPage .cl-composer-bottom-row { grid-template-rows: 44px; grid-template-areas: "attach . actions"; column-gap: 8px; }
  #chatPage .cl-composer-right-controls { display: contents; }
  #chatPage .cl-model-picker { flex-basis: 136px; width: 136px; max-width: 136px; }
  #chatPage .composer-tools { gap: 5px; }
  #chatPage .attach-btn, #chatPage .voice-btn, #chatPage #sendBtn, #chatPage #stopBtn { min-width: 44px; min-height: 44px; }
  .inner-page { padding: 20px 16px; }
  .cl-plan-grid, .cl-plan-feature-grid { grid-template-columns: 1fr; }
  .auth-wrap { padding: 16px 12px; }
  .auth-card { max-height: calc(100dvh - 24px); }
}
@media (max-width: 380px) {
  .intro-content { padding-inline: 18px; }
  .intro-title { font-size: 39px; }
  .intro-preview { margin-bottom: 26px; }
  .intro-actions { width: 100%; }
  .intro-actions button { flex: 1 1 130px; justify-content: center; }
  .topbar-actions .cl-usage-reset { display: none; }
  .topbar-actions .cl-usage-meter { min-width: 88px; }
  #chatPage .cl-mode-model-row { grid-template-columns: minmax(0, 1fr) 120px; column-gap: 6px; }
  #chatPage .cl-model-picker { flex-basis: 120px; width: 120px; max-width: 120px; }
  #chatPage .cl-model-trigger { gap: 6px; padding-inline: 7px; font-size: 11px; }
  #chatPage #webSearchToggle { gap: 5px; padding-inline: 6px; font-size: 11px; }
  #chatPage .cl-composer-bottom-row { column-gap: 6px; }
  #chatPage .cl-composer-right-controls { display: contents; }
  #chatPage .cl-model-picker { flex-basis: 136px; width: 136px; max-width: 136px; }
  #chatPage .attach-btn, #chatPage .voice-btn, #chatPage #sendBtn, #chatPage #stopBtn { min-width: 44px; min-height: 44px; }
  #chatPage .cl-model-trigger { min-height: 44px; padding-inline: 8px; font-size: 12px; }
}
@media (max-width: 600px) {
  #chatPage .input-area { padding-top: 4px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  #chatPage .input-box { grid-template-columns: minmax(0, 1fr); grid-template-areas: "preview" "message" "controls" "bottom"; gap: 4px; padding: 8px 10px; border-radius: 15px; }
  #chatPage #msgInput { min-height: 44px; padding: 0 2px; line-height: 1.45; }
  #chatPage .cl-mobile-compact-controls { grid-area: controls; display: grid; grid-template-columns: 44px minmax(92px, 1fr) 120px; grid-template-areas: "skills options model"; align-items: center; gap: 4px; min-width: 0; width: 100%; }
  #chatPage .cl-active-skills { grid-area: skills; width: 44px; min-width: 44px; flex: 0 0 44px; }
  #chatPage .cl-active-skills-trigger { box-sizing: border-box; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; gap: 0; justify-content: center; border-radius: 10px; }
  #chatPage .cl-mobile-compact-label, #chatPage #activeSkillsLabel, #chatPage #activeSkillsCount { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
  #chatPage .cl-active-skills-chevron { display: none; }
  #chatPage .cl-mode-model-row { display: contents; }
  #chatPage .cl-mode-bar { grid-area: options; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 4px; height: 44px; }
  #chatPage .cl-mode-btn { box-sizing: border-box; display: inline-flex; flex: 0 0 44px; width: 44px; min-width: 44px; max-width: 44px; height: 44px; min-height: 44px; padding: 0; gap: 0; justify-content: center; border-radius: 10px; }
  #chatPage .cl-mode-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
  #chatPage .cl-model-picker { grid-area: model; flex: 0 0 120px; width: 120px; min-width: 120px; max-width: 120px; }
  #chatPage .cl-composer-bottom-row { grid-template-rows: 44px; grid-template-areas: "attach . actions"; column-gap: 8px; row-gap: 4px; padding-top: 0; border-top: 0; }
  #chatPage .attach-btn, #chatPage .voice-btn, #chatPage #sendBtn, #chatPage #stopBtn { box-sizing: border-box; width: 44px; min-width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; }
  #chatPage .footer-note { margin-top: 4px; }
}
@media (max-width: 380px) {
  #chatPage .cl-mode-model-row { grid-template-columns: minmax(0, 1fr) 120px; column-gap: 6px; }
  #chatPage .cl-model-picker { flex-basis: 120px; width: 120px; max-width: 120px; }
  #chatPage .cl-model-trigger { gap: 6px; padding-inline: 7px; font-size: 11px; }
}
@media (min-width: 761px) and (max-width: 900px) { .intro-features { grid-template-columns: 1fr; gap: 16px; } }
@media (max-height: 700px) and (min-width: 761px) {
  .intro-content { padding-top: 26px; padding-bottom: 22px; }
  .intro-logo-wrap { margin-bottom: 20px; }
  .intro-actions { margin-bottom: 24px; }
  .intro-feat { min-height: 126px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}