:root {
  color-scheme: dark;
  --ink: #ececec;
  --muted: #a6a6a6;
  --line: #404040;
  --surface: #212121;
  --canvas: #212121;
  --soft: #303030;
  --accent: #85d7ad;
  --danger: #ff9f9a;
}
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #202123;
  --muted: #72757c;
  --line: #e5e7eb;
  --surface: #fff;
  --canvas: #fff;
  --soft: #f4f4f4;
  --accent: #1b7254;
  --danger: #a62d29;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 14px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: inherit; }
:focus-visible { outline: 2px solid #218365; outline-offset: 2px; }
.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; }
.chat-app { height: 100dvh; min-height: 400px; display: flex; flex-direction: column; background: var(--surface); }
.setup-screen { flex: 1; min-height: 0; display: grid; place-items: safe center; overflow-y: auto; padding: 18px 18px 24px; }
.setup-card { width: min(100%, 540px); text-align: center; }
.setup-mark { width: 56px; height: 56px; margin: 0 auto; }
.panda-face { display: block; flex: none; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: #fff url('/panda-happy.webp') 14% 63% / 360% 360% no-repeat; }
.setup-card h1 { margin: 12px 0 6px; font-size: clamp(29px, 5vw, 39px); line-height: 1.12; letter-spacing: -.055em; }
.setup-card > p { max-width: 440px; margin: 0 auto 15px; color: var(--muted); line-height: 1.65; font-size: 14px; }
.panda-guide { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 112px; margin-bottom: 17px; padding: 9px; border: 1px solid var(--line); border-radius: 17px; background: var(--soft); text-align: left; }
.panda-guide-art { position: relative; flex: none; width: 94px; height: 94px; overflow: hidden; border-radius: 12px; background: #fff; }
.panda-guide-art img { position: absolute; width: 175%; height: 175%; max-width: none; left: -59%; top: -53%; }
.panda-guide-demo { min-width: 0; flex: 1; pointer-events: none; }
.panda-guide-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.panda-demo-address { display: flex; align-items: center; gap: 2px; min-height: 32px; padding: 5px 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); white-space: nowrap; font-size: 11px; }
.panda-demo-typing { display: inline-block; flex: none; width: 0; overflow: hidden; border-right: 1px solid var(--accent); color: var(--ink); font: 650 11px/1.3 ui-monospace, SFMono-Regular, monospace; animation: panda-type 6s steps(7,end) -2.4s infinite; }
.panda-demo-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; min-height: 29px; margin-top: 7px; padding: 4px 10px; border-radius: 7px; background: #276d52; color: #fff; font-size: 11px; font-weight: 700; animation: panda-press 6s ease-in-out -2.4s infinite; }
.panda-demo-button span { font-size: 14px; line-height: 1; }
@keyframes panda-type { 0%, 8% { width: 0; } 42%, 78% { width: 7ch; } 92%, 100% { width: 0; } }
@keyframes panda-press { 0%, 51%, 66%, 100% { transform: scale(1); } 58% { transform: scale(.92); } }
@media (prefers-reduced-motion: reduce) {
  .panda-demo-typing { width: 7ch; animation: none; }
  .panda-demo-button { animation: none; }
}
.expiry-notice { color: #7b4136; background: #fff5f1; border: 1px solid #f1d6cc; border-radius: 11px; padding: 11px 13px; font-size: 12px; line-height: 1.5; }
.expiry-notice { margin: 9px 0 18px; }
.expiry-notice button { border: 0; background: transparent; color: #8a3426; text-decoration: underline; font: inherit; font-weight: 700; cursor: pointer; }
.setup-card form { text-align: left; }
.setup-card label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 650; }
.slug-field { display: flex; align-items: center; min-height: 54px; border: 1px solid #d5d9d7; border-radius: 13px; background: #fff; overflow: hidden; }
.slug-field:focus-within { border-color: #4b9772; box-shadow: 0 0 0 3px #e2f1e7; }
.slug-field input { min-width: 0; flex: 1; border: 0; outline: 0; padding: 15px 13px; color: var(--ink); background: transparent; font-size: 15px; }
.slug-field span { flex: none; padding-right: 13px; color: #6c7470; font-size: 13px; }
.slug-rules { display: grid; gap: 5px; list-style: none; margin: 12px 2px 0; padding: 0; }
.slug-rules li { display: flex; align-items: center; gap: 7px; color: #7a817d; font-size: 12px; line-height: 1.35; }
.slug-rules li span { flex: none; width: 20px; text-align: center; font-size: 15px; font-weight: 700; line-height: 1; }
.slug-rules li[data-status="valid"] { color: #237451; }
.slug-rules li[data-status="invalid"] { color: #9a4240; font-weight: 650; }
.slug-invalid-characters { display: grid; gap: 4px; list-style: none; margin: 8px 2px 0; padding: 0; color: var(--danger); font-size: 12px; font-weight: 650; }
.slug-invalid-characters:empty { display: none; }
.slug-invalid-characters li::before { content: '✗'; margin-right: 9px; }
.slug-invalid-characters code { display: inline-block; min-width: 21px; padding: 0 4px; border: 1px solid currentColor; border-radius: 4px; text-align: center; font: 700 12px/1.4 ui-monospace, SFMono-Regular, monospace; }
.slug-field:has(input[aria-invalid="true"]) { border-color: #9a4240; }
.slug-field:focus-within:has(input[aria-invalid="true"]) { border-color: #9a4240; box-shadow: 0 0 0 3px #f7e3e0; }
.slug-status { min-height: 20px; margin: 8px 2px 0; color: #7a817d; font-size: 12px; }
.slug-status[data-status="available"] { color: #237451; }
.slug-status[data-status="taken"], .slug-status[data-status="reserved"], .slug-status[data-status="invalid"] { color: #9a4240; }
.slug-status[data-status="error"] { color: #9a4240; }
.setup-error { margin: 10px 2px 0; color: var(--danger); font-size: 12px; }
.setup-submit { width: 100%; min-height: 46px; margin-top: 17px; border: 0; border-radius: 11px; background: #202123; color: #fff; font-weight: 650; }
.setup-submit:hover:not(:disabled) { background: #3b3d3e; }
.setup-submit:disabled { background: #d5d9d7; color: #707873; opacity: 1; }
.setup-footnote { margin: 8px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.workspace { display: flex; flex: 1; min-height: 0; }
.chat-panel { width: 50%; min-width: 0; display: flex; flex-direction: column; }
.mobile-view-switch { display: none; }
.preview-panel { width: 50%; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: #f7f8f7; }
.preview-toolbar { min-height: 55px; padding: 9px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); background: #fff; }
.preview-title { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 13px; }
.preview-title strong { font-size: 14px; }
.preview-live { padding: 3px 7px; border-radius: 7px; background: #eaf5ee; color: #267353; font-size: 11px; font-weight: 650; }
.preview-actions { display: flex; align-items: center; gap: 7px; }
.preview-refresh, .preview-open { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 9px; border: 1px solid #dedfe0; border-radius: 9px; background: #fff; color: #333; text-decoration: none; font-size: 11px; font-weight: 600; white-space: nowrap; }
.preview-refresh:hover, .preview-open:hover { background: #f3f5f3; }
.preview-refresh { font-size: 17px; line-height: 1; }
.preview-refresh span { font-size: 11px; }
.preview-address { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 16px; border-bottom: 1px solid var(--line); background: #fff; color: #777; font-size: 11px; }
.preview-frame-wrap { flex: 1; min-height: 0; margin: 16px; overflow: hidden; border: 1px solid #dfe3df; border-radius: 12px; background: #fff; box-shadow: 0 5px 24px rgba(0,0,0,.07); }
.preview-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.preview-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; color: #6e7370; text-align: center; }
.preview-empty-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 13px; background: #e9eee9; color: #36805c; font-size: 25px; }
.preview-empty h2 { margin: 0; color: #343936; font-size: 19px; letter-spacing: -.03em; }
.preview-empty p { max-width: 340px; margin: 8px 0 0; font-size: 13px; }
.app-header { min-height: 65px; display: flex; align-items: center; gap: 18px; padding: 12px 23px; border-bottom: 1px solid #f2f2f2; }
.header-start { min-width: 0; display: flex; align-items: center; gap: 18px; }
.brand { font-size: 17px; font-weight: 720; letter-spacing: -.045em; white-space: nowrap; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 15px; min-width: 0; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); white-space: nowrap; font-size: 12px; font-weight: 650; }
.theme-toggle:hover { background: var(--soft); }
.theme-icon { font-size: 17px; line-height: 1; }
.header-site { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #2b765a; font-weight: 650; text-decoration: none; }
.header-site:hover { text-decoration: underline; }
.header-account { border: 1px solid #dedfe1; background: #fff; border-radius: 20px; padding: 6px 13px; white-space: nowrap; font-size: 12px; font-weight: 650; }
.header-account:hover { background: #f5f5f5; }
.conversation { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.conversation-inner { width: min(100% - 40px, 760px); min-height: 100%; margin: 0 auto; padding: 35px 0 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 27px; }
.welcome { margin: auto 0; text-align: center; padding: 20px 0 15px; }
.welcome-mark { width: 48px; height: 48px; margin: 0 auto 20px; }
.welcome h1 { margin: 0; font-size: clamp(26px, 3.2vw, 34px); font-weight: 660; letter-spacing: -.055em; }
.welcome p { margin: 10px auto 0; max-width: 440px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.message { width: 100%; display: flex; }
.message.user { justify-content: flex-end; }
.message-content { max-width: min(84%, 660px); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.68; font-size: 15px; }
.message.user .message-content { padding: 11px 17px; background: #f4f4f4; border-radius: 22px; border-bottom-right-radius: 7px; }
.message.assistant .message-content { padding: 0 8px; }
.message-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.message-attachments span { padding: 4px 8px; border-radius: 7px; background: #e8e8e8; font-size: 11px; }
.site-link-in-message { display: block; width: fit-content; max-width: 100%; margin-top: 14px; padding: 10px 13px; background: #f2f8f5; border: 1px solid #d4e7db; border-radius: 11px; color: #156c4c; text-decoration: none; font-size: 13px; font-weight: 650; }
.site-link-in-message:hover { background: #e8f4ed; }
.site-link-in-message span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px; color: #4b7965; font-size: 11px; font-weight: 450; }
.execution-meta { margin-top: 9px; color: #777d80; font-size: 11px; line-height: 1.5; }
.thinking { align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.thinking-dots { display: flex; gap: 4px; padding-left: 8px; }
.thinking-dots i { width: 6px; height: 6px; background: #8a8e93; border-radius: 50%; animation: pulse 1.1s infinite alternate; }
.thinking-dots i:nth-child(2) { animation-delay: .2s; }
.thinking-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes pulse { to { opacity: .25; transform: translateY(-3px); } }
.composer-wrap { width: min(100% - 40px, 760px); margin: 0 auto; padding: 0 0 16px; flex: none; }
.composer { position: relative; border: 1px solid #e1e2e3; border-radius: 25px; padding: 5px 8px; background: #fff; box-shadow: 0 5px 22px rgba(0,0,0,.06); }
.composer:focus-within { border-color: #bfc6c3; }
.composer-line { display: flex; align-items: flex-end; min-height: 44px; gap: 3px; }
.composer textarea { display: block; flex: 1; min-width: 0; min-height: 39px; max-height: 180px; border: 0; outline: 0; resize: none; padding: 9px 5px 7px; color: var(--ink); background: transparent; line-height: 1.45; font-size: 14px; }
.composer textarea::placeholder { color: #878a90; }
.composer-tools-left, .composer-tools-right { display: flex; align-items: center; gap: 1px; flex: none; }
.picker-trigger { display: flex; align-items: center; gap: 2px; height: 34px; padding: 0 5px; border: 0; border-radius: 9px; background: transparent; color: #55595e; font-size: 12px; white-space: nowrap; }
.picker-trigger:hover, .picker-trigger[aria-expanded="true"] { background: #f1f1f1; }
.picker-trigger-model { font-weight: 650; color: #282a2d; }
.picker-chevron { margin-left: 2px; font-size: 15px; line-height: 1; }
.picker-menu { position: absolute; z-index: 12; right: 8px; bottom: calc(100% + 8px); width: min(264px, calc(100vw - 28px)); padding: 8px; border: 1px solid #e4e4e4; border-radius: 15px; background: #fff; box-shadow: 0 12px 38px rgba(0,0,0,.17); }
.picker-heading { display: flex; align-items: center; min-height: 34px; padding: 3px 8px 7px; font-size: 12px; font-weight: 700; color: #686b70; }
.picker-back { width: 25px; height: 25px; padding: 0; margin-right: 5px; border: 0; border-radius: 7px; background: transparent; color: #333; font-size: 23px; line-height: 1; }
.picker-back:hover { background: #f1f1f1; }
.picker-model-row, .picker-model-option { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; font-size: 13px; }
.picker-model-row:hover, .picker-model-option:hover { background: #f3f3f3; }
.picker-model-row span:last-child { color: #777; font-size: 20px; line-height: 1; }
.picker-model-option[aria-checked="true"] { background: #f3f5f4; font-weight: 650; }
.picker-model-option span:last-child { color: #317e5d; }
.picker-effort-label { display: flex; justify-content: space-between; gap: 8px; margin: 8px 9px 3px; color: #6e7175; font-size: 12px; }
.picker-effort-label strong { color: var(--ink); font-weight: 650; }
.effort-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; margin: 0 7px; }
.effort-steps::before { content: ''; position: absolute; left: 10%; right: 10%; top: 17px; height: 3px; border-radius: 3px; background: #dedfe1; }
.effort-step { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 34px; padding: 0; border: 0; background: transparent; }
.effort-dot { width: 9px; height: 9px; border-radius: 50%; background: #a7aaae; transition: transform .15s ease, background-color .15s ease; }
.effort-step:hover .effort-dot { transform: scale(1.4); }
.effort-step.selected .effort-dot { width: 17px; height: 17px; background: #202123; box-shadow: 0 0 0 3px #e8e8e8; }
.picker-effort-ends { display: flex; justify-content: space-between; margin: 0 10px 5px; color: #8a8e92; font-size: 10px; }
.tool-button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #494d51; font-size: 20px; line-height: 1; }
.tool-button:hover, .tool-button.active { background: #eee; }
.attach-button { font-size: 29px; padding-bottom: 3px; }
.attachment-count { color: #75797e; font-size: 11px; white-space: nowrap; }
.mic-button svg { width: 20px; height: 20px; }
.voice-button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; color: #fff; background: #232323; }
.voice-button svg { width: 18px; height: 18px; }
.voice-button:hover { background: #3a3a3a; }
.voice-button.active { background: #1d7659; }
.send-button { width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; background: #222; color: #fff; font-size: 22px; font-weight: 700; line-height: 1; }
.send-button:hover:not(:disabled) { background: #3b3b3b; }
.send-button:disabled { background: #dedede; color: #8a8a8a; opacity: 1; }
.voice-button[hidden], .send-button[hidden] { display: none; }
.attachments { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 8px 7px; }
.attachment { display: flex; align-items: center; gap: 6px; max-width: 190px; padding: 5px 7px; border: 1px solid #e5e5e5; border-radius: 10px; background: #fafafa; font-size: 11px; }
.attachment img { width: 28px; height: 28px; object-fit: cover; border-radius: 5px; }
.attachment span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment button { border: 0; background: transparent; color: #6b6b6b; font-size: 17px; line-height: 1; }
.composer-note { margin: 7px 0 0; color: #989a9e; text-align: center; font-size: 10px; }
.chat-error, .voice-status { position: relative; margin-bottom: 8px; padding: 8px 12px; border-radius: 9px; font-size: 12px; }
.chat-error { color: var(--danger); background: #fff0ef; border: 1px solid #f3cfcb; }
.chat-error button { position: absolute; top: 3px; right: 8px; border: 0; background: none; font-size: 18px; color: inherit; }
.voice-status { color: #246347; background: #eef9f3; border: 1px solid #d4e9db; }
.auth-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(24,28,25,.48); }
.auth-dialog { position: fixed; z-index: 21; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(100% - 32px, 410px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 30px; border-radius: 19px; background: #fff; box-shadow: 0 25px 80px rgba(0,0,0,.2); }
.auth-close { position: absolute; top: 12px; right: 13px; width: 28px; height: 28px; border: 0; background: transparent; color: #686a6d; font-size: 24px; }
.auth-logo { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.auth-dialog h2 { margin: 12px 0 4px; font-size: 27px; letter-spacing: -.05em; }
.auth-dialog p { color: var(--muted); margin: 0 0 22px; font-size: 13px; }
.pending-message { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #f4f7f5; border-radius: 9px; padding: 10px; margin-bottom: 18px; color: #3c5d4c; font-size: 12px; }
.auth-dialog form { display: grid; }
.auth-dialog label { margin: 0 0 5px; color: #474a4d; font-size: 12px; font-weight: 700; }
.auth-dialog input { width: 100%; height: 43px; margin: 0 0 16px; padding: 0 12px; border: 1px solid #d4d7d5; border-radius: 9px; outline: 0; }
.auth-dialog input:focus { border-color: #459273; box-shadow: 0 0 0 3px #dcefe4; }
.auth-submit { width: 100%; height: 43px; border: 0; border-radius: 9px; background: #1b7254; color: #fff; font-weight: 700; }
.auth-submit:hover:not(:disabled) { background: #135b41; }
.auth-submit:disabled { cursor: wait; opacity: .65; }
.auth-dialog .auth-waiting { margin: 15px 0 10px; padding: 10px 12px; color: #3d6753; background: #edf7f0; border-radius: 9px; line-height: 1.45; }
.auth-secondary-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 5px; }
.auth-secondary-actions button { border: 0; padding: 4px 0; background: transparent; color: #1b7254; font-size: 12px; font-weight: 650; }
.auth-secondary-actions button:disabled { opacity: .5; cursor: wait; }
.form-error { margin-bottom: 12px; padding: 8px; border-radius: 8px; color: var(--danger); background: #fff0ef; font-size: 12px; }
@media (max-width: 900px) {
  .mobile-view-switch { display: flex; flex: none; align-items: center; gap: 3px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #fff; }
  .mobile-view-switch button { min-height: 32px; padding: 4px 14px; border: 0; border-radius: 8px; background: transparent; color: #666b68; font-size: 13px; font-weight: 650; }
  .mobile-view-switch button[aria-selected="true"] { background: #edf2ee; color: #175b40; }
  .chat-panel, .preview-panel { width: 100%; }
  .preview-panel { display: none; border-left: 0; }
  .workspace.show-preview .chat-panel { display: none; }
  .workspace.show-preview .preview-panel { display: flex; }
  .preview-frame-wrap { margin: 9px; }
}
@media (max-width: 700px) {
  .app-header { gap: 8px; padding: 9px 14px; flex-wrap: wrap; }
  .header-start { width: 100%; justify-content: space-between; gap: 8px; }
  .brand { font-size: 15px; }
  .header-right { width: 100%; justify-content: flex-end; }
  .header-site { max-width: 135px; }
  .conversation-inner { width: min(100% - 28px, 760px); padding-top: 20px; }
  .composer-wrap { width: min(100% - 18px, 760px); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .composer { border-radius: 20px; }
  .welcome { padding-bottom: 30px; }
  .message-content { max-width: 90%; }
}
@media (max-width: 410px) {
  .setup-screen { place-items: start center; padding: 12px 18px 18px; }
  .setup-mark { width: 48px; height: 48px; }
  .setup-card h1 { margin: 9px 0 4px; font-size: 27px; }
  .setup-card > p { margin-bottom: 12px; font-size: 12px; }
  .panda-guide { min-height: 98px; gap: 8px; margin-bottom: 14px; padding: 7px; }
  .panda-guide-art { width: 72px; height: 82px; }
  .panda-demo-address { padding: 5px; font-size: 10px; }
  .panda-demo-typing { font-size: 10px; }
  .slug-rules { gap: 3px; margin-top: 9px; }
  .slug-status { margin-top: 4px; }
  .setup-submit { margin-top: 10px; }
  .slug-field input { padding: 14px 9px; font-size: 14px; }
  .slug-field span { padding-right: 9px; font-size: 11px; }
  .header-site { max-width: 92px; }
  .composer-line { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "prompt prompt" "left right"; }
  .composer textarea { grid-area: prompt; width: 100%; min-height: 36px; }
  .composer-tools-left { grid-area: left; }
  .composer-tools-right { grid-area: right; }
  .composer-tools-right { gap: 1px; }
  .picker-trigger { font-size: 11px; padding: 0 3px; }
  .composer-note { font-size: 9px; }
}

/* The app starts dark. Customer websites inside the preview iframe keep their own styling. */
html:not([data-theme="light"]) .app-header { border-bottom-color: #363636; }
html:not([data-theme="light"]) .header-site { color: #91dbb5; }
html:not([data-theme="light"]) .header-account,
html:not([data-theme="light"]) .preview-refresh,
html:not([data-theme="light"]) .preview-open { border-color: #4a4a4a; background: #303030; color: #ececec; }
html:not([data-theme="light"]) .header-account:hover,
html:not([data-theme="light"]) .preview-refresh:hover,
html:not([data-theme="light"]) .preview-open:hover { background: #3d3d3d; }
html:not([data-theme="light"]) .expiry-notice { border-color: #74534a; background: #382b28; color: #f1c6b6; }
html:not([data-theme="light"]) .expiry-notice button { color: #ffcab8; }
html:not([data-theme="light"]) .slug-field { border-color: #525252; background: #303030; }
html:not([data-theme="light"]) .slug-field:focus-within { border-color: #85d7ad; box-shadow: 0 0 0 3px #254b3c; }
html:not([data-theme="light"]) .slug-field span,
html:not([data-theme="light"]) .slug-rules li,
html:not([data-theme="light"]) .slug-status { color: #aaa; }
html:not([data-theme="light"]) .slug-rules li[data-status="valid"],
html:not([data-theme="light"]) .slug-status[data-status="available"] { color: #92dfb1; }
html:not([data-theme="light"]) .slug-rules li[data-status="invalid"],
html:not([data-theme="light"]) .slug-status[data-status="taken"],
html:not([data-theme="light"]) .slug-status[data-status="reserved"],
html:not([data-theme="light"]) .slug-status[data-status="invalid"],
html:not([data-theme="light"]) .slug-status[data-status="error"] { color: #ffa39e; }
html:not([data-theme="light"]) .slug-field:has(input[aria-invalid="true"]) { border-color: #f28f88; }
html:not([data-theme="light"]) .slug-field:focus-within:has(input[aria-invalid="true"]) { box-shadow: 0 0 0 3px #553534; }
html:not([data-theme="light"]) .setup-submit { background: #ececec; color: #212121; }
html:not([data-theme="light"]) .setup-submit:hover:not(:disabled) { background: #d6d6d6; }
html:not([data-theme="light"]) .setup-submit:disabled { background: #454545; color: #a6a6a6; }
html:not([data-theme="light"]) .preview-panel { background: #252525; }
html:not([data-theme="light"]) .preview-toolbar,
html:not([data-theme="light"]) .preview-address { background: #212121; }
html:not([data-theme="light"]) .preview-address,
html:not([data-theme="light"]) .preview-empty { color: #aaa; }
html:not([data-theme="light"]) .preview-live { background: #294738; color: #a5e9bf; }
html:not([data-theme="light"]) .preview-frame-wrap { border-color: #4a4a4a; background: #fff; box-shadow: 0 5px 24px rgba(0,0,0,.22); }
html:not([data-theme="light"]) .preview-empty-icon { background: #303f35; color: #9be5b8; }
html:not([data-theme="light"]) .preview-empty h2 { color: #ececec; }
html:not([data-theme="light"]) .message.user .message-content { background: #303030; }
html:not([data-theme="light"]) .message-attachments span { background: #414141; }
html:not([data-theme="light"]) .site-link-in-message { border-color: #3f6d52; background: #263b2d; color: #a0e5b8; }
html:not([data-theme="light"]) .site-link-in-message:hover { background: #304a37; }
html:not([data-theme="light"]) .site-link-in-message span { color: #aad2b7; }
html:not([data-theme="light"]) .execution-meta { color: #a6a6a6; }
html:not([data-theme="light"]) .thinking-dots i { background: #aaa; }
html:not([data-theme="light"]) .composer { border-color: #4c4c4c; background: #303030; box-shadow: 0 5px 22px rgba(0,0,0,.18); }
html:not([data-theme="light"]) .composer:focus-within { border-color: #727272; }
html:not([data-theme="light"]) .composer textarea::placeholder { color: #aaa; }
html:not([data-theme="light"]) .picker-trigger,
html:not([data-theme="light"]) .picker-trigger-model,
html:not([data-theme="light"]) .tool-button { color: #e3e3e3; }
html:not([data-theme="light"]) .picker-trigger:hover,
html:not([data-theme="light"]) .picker-trigger[aria-expanded="true"],
html:not([data-theme="light"]) .tool-button:hover,
html:not([data-theme="light"]) .tool-button.active { background: #484848; }
html:not([data-theme="light"]) .picker-menu { border-color: #505050; background: #303030; box-shadow: 0 12px 38px rgba(0,0,0,.45); }
html:not([data-theme="light"]) .picker-heading,
html:not([data-theme="light"]) .picker-effort-label,
html:not([data-theme="light"]) .picker-effort-ends,
html:not([data-theme="light"]) .picker-model-row span:last-child { color: #b5b5b5; }
html:not([data-theme="light"]) .picker-back { color: #ececec; }
html:not([data-theme="light"]) .picker-back:hover,
html:not([data-theme="light"]) .picker-model-row:hover,
html:not([data-theme="light"]) .picker-model-option:hover { background: #424242; }
html:not([data-theme="light"]) .picker-model-option[aria-checked="true"] { background: #415448; }
html:not([data-theme="light"]) .picker-model-option span:last-child { color: #9ae2b3; }
html:not([data-theme="light"]) .effort-steps::before { background: #626262; }
html:not([data-theme="light"]) .effort-dot { background: #a4a4a4; }
html:not([data-theme="light"]) .effort-step.selected .effort-dot { background: #ececec; box-shadow: 0 0 0 3px #575757; }
html:not([data-theme="light"]) .voice-button,
html:not([data-theme="light"]) .send-button { background: #ececec; color: #212121; }
html:not([data-theme="light"]) .voice-button:hover,
html:not([data-theme="light"]) .send-button:hover:not(:disabled) { background: #d6d6d6; }
html:not([data-theme="light"]) .voice-button.active { background: #89d8aa; }
html:not([data-theme="light"]) .send-button:disabled { background: #4d4d4d; color: #a4a4a4; }
html:not([data-theme="light"]) .attachment { border-color: #575757; background: #393939; }
html:not([data-theme="light"]) .attachment button,
html:not([data-theme="light"]) .attachment-count,
html:not([data-theme="light"]) .composer-note { color: #aaa; }
html:not([data-theme="light"]) .chat-error,
html:not([data-theme="light"]) .form-error { border-color: #754740; background: #3c2927; }
html:not([data-theme="light"]) .voice-status { border-color: #446d52; background: #293e31; color: #b1e9c0; }
html:not([data-theme="light"]) .auth-backdrop { background: rgba(0,0,0,.7); }
html:not([data-theme="light"]) .auth-dialog { border: 1px solid #505050; background: #282828; box-shadow: 0 25px 80px rgba(0,0,0,.5); }
html:not([data-theme="light"]) .auth-close,
html:not([data-theme="light"]) .auth-dialog label { color: #c9c9c9; }
html:not([data-theme="light"]) .auth-dialog input { border-color: #585858; background: #333; color: #ececec; }
html:not([data-theme="light"]) .auth-dialog input:focus { border-color: #85d7ad; box-shadow: 0 0 0 3px #254b3c; }
html:not([data-theme="light"]) .pending-message,
html:not([data-theme="light"]) .auth-dialog .auth-waiting { background: #2c4032; color: #b9e8c6; }
html:not([data-theme="light"]) .auth-secondary-actions button { color: #9ce2b6; }
@media (max-width: 900px) {
  html:not([data-theme="light"]) .mobile-view-switch { background: #212121; }
  html:not([data-theme="light"]) .mobile-view-switch button { color: #aaa; }
  html:not([data-theme="light"]) .mobile-view-switch button[aria-selected="true"] { background: #3b4e41; color: #b7e9c7; }
}