/* Desktop integration only. Chat, composer and settings inherit the web theme. */
:root { --sidebar-width: 214px; }
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
button, input, textarea, select { font-family: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid rgba(255,255,255,.4); outline-offset: 3px; }
.chat-app { height: 100vh; min-height: 0; grid-template-columns: var(--sidebar-width) minmax(0,1fr); }
.chat-sidebar { padding: 24px 14px 16px; }
.sidebar-topline { min-height: 49px; margin-bottom: 20px; padding-inline: 8px; }
.chat-brand-lockup { flex-direction: row; gap: 10px; }
.chat-brand-lockup > strong { font-size: 25px; font-weight: 600; letter-spacing: -.8px; text-transform: none; line-height: 1.15; color: #edf0f4; }
.chat-brand-lockup > strong small { display: block; margin-top: 6px; font-size: 8px; letter-spacing: 2.5px; color: var(--muted); font-weight: 500; }
.sidebar-topline .arc-mark { width: 38px; height: 38px; background: none; border: 0; box-shadow: none; }
.sidebar-topline .arc-mark img { width: 48px; height: 48px; max-width: none; object-fit: contain; transform: translate(-5px,-5px); }
.sidebar-collapse { display: none; }
.new-chat-button { margin-bottom: 20px; }
.conversation-history { padding-top: 2px; }
.history-item { min-height: 46px; }

/* Desktop destinations use the same restrained surfaces as conversation history. */
.desktop-navigation { border-top: 1px solid #151820; padding-top: 15px; margin-top: auto; flex-shrink: 0; }
.desktop-navigation > span { display: block; margin: 0 9px 10px; color: #626a77; font-size: 9px; letter-spacing: 1.4px; }
.desktop-navigation > button { display: flex; align-items: center; width: 100%; gap: 10px; border: 0; background: none; border-radius: 8px; color: #9198a4; padding: 8px 10px; text-align: left; font-size: 11px; cursor: pointer; }
.desktop-navigation > button:hover { background: rgba(255,255,255,.04); color: #e0e3e9; }
.desktop-navigation > button > span { width: 16px; text-align: center; color: #7f8793; font-size: 15px; }
.sidebar-footer { margin-top: 12px; padding-top: 12px; }
.sidebar-footer > div { display: none; }
.sidebar-footer a { margin-top: 0; }
.chat-topbar { min-height: 64px; padding-inline: 24px; }
.topbar-actions { gap: 7px; }
.desktop-bridge-state { height: 28px; border: 1px solid #202936; border-radius: 8px; padding: 0 10px; background: #0d1219; color: #7e8b9a; font-size: 9px; white-space: nowrap; cursor: pointer; }
.desktop-bridge-state::before { content: ''; display: inline-block; margin-right: 6px; width: 5px; height: 5px; border-radius: 50%; background: #69727f; }
.desktop-bridge-state.connected::before { background: #81b89b; }
.desktop-bridge-state:hover { border-color: #34404e; color: #c4cbd4; }
.welcome-state { margin-top: 0; }
.welcome-brand { margin-bottom: 26px; }
.composer-dock { padding-bottom: 21px; }
.message-thread { max-width: 860px; }

/* Browser sign-in is the only desktop-specific dialog. Other dialogs, including
   the neutral glass settings panel, use chat.css without colour overrides. */
.desktop-login { max-width: 450px; border-radius: 22px; }
.desktop-login .auth-shell { padding: 28px; }
.desktop-code { margin: 22px 0; padding: 22px 15px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; text-align: center; }
.desktop-code small { display: block; color: #858b96; font-size: 9px; letter-spacing: 1px; }
.desktop-code strong { display: block; margin: 13px 0 10px 10px; color: #eceef2; font-size: 37px; letter-spacing: 10px; font-variant-numeric: tabular-nums; }
.desktop-code > span { display: block; color: #939aa5; font-size: 11px; line-height: 1.65; }
.desktop-cancel-login { display: block; margin: 12px auto; border: 0; background: none; color: #969da7; font-size: 11px; cursor: pointer; }
.desktop-login .auth-submit { border-radius: 9px; font-size: 12px; }
.desktop-login .auth-create { line-height: 1.7; color: #77808c; }
@media (max-width:1100px) {
  .chat-topbar { padding-inline: 18px; }
  .diagnostics-button span:last-child { display: none; }
  .topbar-actions { gap: 4px; }
  .desktop-bridge-state { font-size: 0; width: 26px; padding: 0; }
  .desktop-bridge-state::before { margin: 0; }
  .welcome-state { margin-top: 0; }
  .chat-sidebar { padding-inline: 12px; }
  .studio-status [data-connection-label] { max-width: 150px; }
  .animator-topbar-button { padding-inline: 8px; }
  .conversation-heading > span { display: none; }
}
@media (prefers-reduced-motion:reduce) { * { animation: none !important; transition: none !important; } }

/* A crisp outline cog, with a gentle mechanical response on hover. */
.chat-sidebar > .settings-button{border:1px solid transparent;border-radius:11px;color:#9aA2ae;transition:background .18s,border-color .18s,color .18s}
.chat-sidebar > .settings-button svg{width:21px;height:21px;transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.chat-sidebar > .settings-button:hover{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.07);color:#e4e9f0}
.chat-sidebar > .settings-button:hover svg{transform:rotate(30deg)}
/* Blur is temporary during entry, leaving the 3D canvas sharp at rest. */
.chat-app.animator-open .animator-workspace{animation:desktop-animator-enter 440ms cubic-bezier(.16,.8,.2,1) both;transform-origin:right center}
.settings-dialog[open],.desktop-login[open]{animation:desktop-dialog-enter 260ms cubic-bezier(.2,.75,.2,1) both}
.desktop-navigation > button{transition:color .18s,background .18s,transform .18s}.desktop-navigation > button:hover{transform:translateX(2px)}
@keyframes desktop-animator-enter{from{opacity:0;transform:translateX(38px) scale(.985);filter:blur(7px)}60%{opacity:1;filter:blur(1px)}to{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}}
@keyframes desktop-dialog-enter{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.chat-sidebar > .settings-button:hover svg,.desktop-navigation > button:hover{transform:none}}

.settings-stat-grid .desktop-account-card{padding:16px 18px}
.desktop-account-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.desktop-account-heading>div{min-width:0}.desktop-account-heading strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.desktop-usage-refresh{display:grid;place-items:center;flex:none;width:27px;height:27px;padding:5px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(255,255,255,.035);color:#a8b2c1;cursor:pointer}
.desktop-usage-refresh svg{width:16px;height:16px}.desktop-usage-refresh:hover:not(:disabled){background:rgba(255,255,255,.08);color:#f1f4f8}.desktop-usage-refresh:disabled{opacity:.4;cursor:default}.desktop-usage-refresh.refreshing svg{animation:activity-spin 1s linear infinite}
.desktop-usage-row{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.065)}
.desktop-usage-wheel{--usage-colour:#7bbcd9;position:relative;flex:none;width:62px;height:62px;color:var(--usage-colour)}
.desktop-usage-wheel[data-level="warning"]{--usage-colour:#deb974}.desktop-usage-wheel[data-level="danger"]{--usage-colour:#e48e95}.desktop-usage-wheel.unavailable{--usage-colour:#777f8d}
.desktop-usage-wheel svg{width:100%;height:100%;transform:rotate(-90deg)}.desktop-usage-wheel circle{fill:none;stroke-width:4}.usage-track{stroke:rgba(255,255,255,.09)}.usage-progress{stroke:var(--usage-colour);stroke-linecap:round;transition:stroke-dasharray .45s ease,stroke .2s}
.settings-stat-grid .desktop-usage-wheel>strong{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:inherit;font-size:14px;font-variant-numeric:tabular-nums}
.desktop-usage-copy{min-width:0}.settings-stat-grid .desktop-usage-copy strong{font-size:11px;margin:0;color:#cfd5df}.settings-stat-grid .desktop-usage-copy span{font-size:10px;line-height:1.5;color:#a8afbc;margin-top:5px}.settings-stat-grid .desktop-usage-copy small{display:block;font-size:9px;margin-top:4px;color:#8b94a2}
.desktop-usage-status{margin:10px 0 0;font-size:10px;line-height:1.5;color:#d8b88d}
@media(prefers-reduced-motion:reduce){.desktop-usage-refresh.refreshing svg{animation:none}.usage-progress{transition:none}}

.desktop-providers{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.desktop-provider-heading{display:flex;gap:20px;justify-content:space-between;align-items:flex-start}.desktop-provider-heading span{font-size:9px;color:#9098a4;letter-spacing:1.2px}.desktop-provider-heading h3{margin:7px 0;font-size:18px;font-weight:580;color:#eef0f4}.desktop-provider-heading p,.desktop-provider-note{font-size:11px;color:#929ba8;line-height:1.7}
.desktop-providers button{border:1px solid #ffffff18;border-radius:8px;background:#ffffff09;color:#cdd3dc;padding:7px 11px;font-size:11px;cursor:pointer}.desktop-providers button:hover:not(:disabled){background:#ffffff13;border-color:#ffffff2a}.desktop-providers button:disabled{opacity:.45;cursor:default}
.desktop-provider-target{display:grid;gap:8px;margin-top:18px;font-size:11px;color:#a7b0bc}.desktop-providers select,.desktop-providers input{width:100%;min-width:0;padding:10px 11px;border:1px solid #ffffff16;border-radius:8px;background:#111318;color:#d9dfe8;font-size:11px;font-family:inherit;outline:none}.desktop-providers input:focus,.desktop-providers select:focus{border-color:#718398;box-shadow:0 0 0 2px #96b0d20b}.desktop-providers input::placeholder{color:#6f7885}
.desktop-provider-status{font-size:11px;line-height:1.6;color:#99a5b5;margin:14px 0}.desktop-provider-status.error{color:#d8a2a2}
.desktop-provider{border:1px solid #ffffff12;border-radius:12px;background:#ffffff04;margin:8px 0;overflow:hidden}.desktop-provider summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px;cursor:pointer;list-style:none;color:#d6dce5;font-size:12px}.desktop-provider summary::after{content:'⌄';color:#7d8896}.desktop-provider[open] summary::after{transform:rotate(180deg)}.desktop-provider summary small{margin-left:auto;font-size:9px;color:#8e9dac}.desktop-provider[open]{border-color:#ffffff22;background:#ffffff07}.desktop-provider-fields{display:grid;gap:14px;padding:0 15px 16px}.desktop-provider-fields>label{display:grid;gap:7px;font-size:10px;color:#959fac}.desktop-provider-key{display:flex;gap:6px}.desktop-provider-key input{flex:1}.desktop-provider-key button{flex:none}.desktop-provider-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:2px}.desktop-provider-actions [data-provider-activate]{background:#aebed318;color:#dce6f4;border-color:#8eabc83a}.desktop-provider-use{margin:15px 0 9px}.desktop-provider-note{margin:6px 0 20px}
.desktop-usage-refresh{padding-left:4px;padding-right:6px}.desktop-usage-refresh.refreshing svg{animation:none}.usage-progress{transition:stroke .2s}
.desktop-buy-credits{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 0 0;margin-top:14px;border:0;border-top:1px solid #ffffff13;background:none;color:#b5c4d8;font:inherit;font-size:10px;cursor:pointer}.desktop-buy-credits:hover{color:#e3ebf5}

/* A collapsed desktop rail must hide labels as well as shrink its grid column. */
.chat-app.sidebar-collapsed .chat-sidebar{padding-inline:10px}
.chat-app.sidebar-collapsed .sidebar-topline{padding:0;justify-content:center}
.chat-app.sidebar-collapsed .chat-brand-lockup>strong,
.chat-app.sidebar-collapsed .desktop-navigation>span{display:none}
.chat-app.sidebar-collapsed .desktop-navigation>button{font-size:0;justify-content:center;padding:10px 0;gap:0}
.chat-app.sidebar-collapsed .desktop-navigation>button>span{font-size:17px}
@media(max-width:1100px){
 .chat-app.animator-open .chat-sidebar{padding-inline:10px}
 .chat-app.animator-open .sidebar-topline{padding:0;justify-content:center}
 .chat-app.animator-open .chat-brand-lockup>strong,.chat-app.animator-open .desktop-navigation>span{display:none}
 .chat-app.animator-open .desktop-navigation>button{font-size:0;justify-content:center;padding:10px 0;gap:0}
 .chat-app.animator-open .desktop-navigation>button>span{font-size:17px}
}