/* Theme: light by default, dark via the system setting or the switch (html[data-theme], static/js/theme.js). */
:root { color-scheme:light; --ink:#221d36; --muted:#746d83; --paper:#fffaf7; --rose:#e98597; --plum:#80649f; --line:#e8dfe4; --wash:#f7ece9; --surface:#fff; --surface-2:#fcf5f1; --bubble:#f3edf0; --hover:#f1e6eb; --soft:#fffaf8; --chip-bg:#f1eaf7; --chip-ink:#6d5a86; --ink-soft:#514a60; --link:#875e87; --button:#221d36; --danger-bg:#ffeced; --danger-ink:#9c3d50; --danger-soft:#fff8f8; --success-bg:#e8f5eb; --success-ink:#387050; --thumb:#e9dfe6; --card-glass:rgba(255,253,251,.85); --focus:#f4e7f0; }
:root[data-theme="dark"] { color-scheme:dark; --ink:#ece6f3; --muted:#a39bb0; --paper:#16121d; --rose:#e98597; --plum:#8e70bd; --line:#332a40; --wash:#1a1522; --surface:#211b2b; --surface-2:#1b1624; --bubble:#2a2236; --hover:#2f2640; --soft:#1e1827; --chip-bg:#352a47; --chip-ink:#dccdf0; --ink-soft:#cdc4d9; --link:#dcaad6; --button:#7b5fae; --danger-bg:#3b1e27; --danger-ink:#f4a7b4; --danger-soft:#2a1a20; --success-bg:#183024; --success-ink:#9fd8b2; --thumb:#2a2236; --card-glass:rgba(33,27,43,.9); --focus:#3b2d4d; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme:dark; --ink:#ece6f3; --muted:#a39bb0; --paper:#16121d; --rose:#e98597; --plum:#8e70bd; --line:#332a40; --wash:#1a1522; --surface:#211b2b; --surface-2:#1b1624; --bubble:#2a2236; --hover:#2f2640; --soft:#1e1827; --chip-bg:#352a47; --chip-ink:#dccdf0; --ink-soft:#cdc4d9; --link:#dcaad6; --button:#7b5fae; --danger-bg:#3b1e27; --danger-ink:#f4a7b4; --danger-soft:#2a1a20; --success-bg:#183024; --success-ink:#9fd8b2; --thumb:#2a2236; --card-glass:rgba(33,27,43,.9); --focus:#3b2d4d; } }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; } button,input,textarea { font:inherit; } button { cursor:pointer; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:20px; font-weight:800; letter-spacing:-.8px; }.brand-mark { width:27px; height:27px; position:relative; transform:rotate(45deg); border-radius:9px 9px 4px 9px; background:linear-gradient(135deg,#ee92a1,#987ac2); }.brand-mark::after { content:""; position:absolute; width:7px; height:7px; top:8px; left:8px; border-radius:50%; background:var(--surface); }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 80% 10%,#e7d8f4,transparent 32rem),radial-gradient(circle at 10% 90%,#ffdbce,transparent 28rem),var(--wash); }.auth-card { width:min(100%,440px); padding:42px; border:1px solid rgba(96,69,103,.12); border-radius:24px; background:var(--card-glass); box-shadow:0 22px 55px rgba(75,52,86,.12); }.eyebrow { margin:27px 0 8px; color:#966786; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; }.auth-card h1,.chat-header h1 { margin:0; letter-spacing:-1.5px; }.auth-card h1 { font-size:34px; }.muted,.chat-note { color:var(--muted); }.login-form { display:grid; gap:16px; margin-top:28px; }.login-form label { display:grid; gap:6px; color:var(--ink-soft); font-size:13px; font-weight:700; }.login-form input,.composer textarea { border:1px solid var(--line); border-radius:11px; outline:none; background:var(--surface); }.login-form input { padding:12px; }.login-form input:focus,.composer textarea:focus { border-color:#b689ac; box-shadow:0 0 0 3px var(--focus); }.login-form button,.composer button,.new-chat { border:0; border-radius:11px; color:#fff; background:var(--button); font-weight:700; }.login-form button { padding:13px; margin-top:4px; }.notice { padding:10px; border-radius:9px; color:var(--danger-ink); background:var(--danger-bg); font-size:13px; }
.app-shell { display:grid; grid-template-columns:270px minmax(0,1fr); min-height:100vh; }.sidebar { display:flex; flex-direction:column; gap:24px; padding:28px 18px; border-right:1px solid var(--line); background:var(--surface-2); }.new-chat { padding:12px 15px; text-align:left; }.conversation-list { display:grid; gap:4px; overflow:auto; }.conversation { overflow:hidden; padding:9px 10px; border-radius:8px; color:var(--muted); text-decoration:none; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.conversation:hover,.conversation.active { color:var(--ink); background:var(--hover); }.logout-form { margin-top:auto; }.text-button { padding:8px; border:0; color:var(--muted); background:none; font-size:13px; }
.chat-main { display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; min-height:100vh; max-width:960px; width:100%; margin:auto; padding:35px clamp(20px,5vw,70px) 20px; }.chat-header { display:flex; align-items:start; justify-content:space-between; padding-bottom:26px; border-bottom:1px solid var(--line); }.chat-header .eyebrow { margin:0 0 5px; }.chat-header h1 { font-size:27px; }.adult-badge { padding:5px 8px; border-radius:7px; color:#885c83; background:var(--hover); font-size:11px; font-weight:800; }.messages { display:flex; flex-direction:column; gap:20px; overflow-y:auto; padding:30px 0; }.message { max-width:min(620px,88%); }.message.user { align-self:end; }.message-label { display:block; margin:0 0 5px 4px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; }.message p { margin:0; padding:13px 15px; border-radius:4px 16px 16px 16px; background:var(--bubble); white-space:pre-wrap; }.message.user p { border-radius:16px 4px 16px 16px; color:#fff; background:linear-gradient(130deg,#765e9d,#c07899); }.empty-state { align-self:center; max-width:340px; margin:auto; text-align:center; color:var(--muted); }.empty-state span { display:grid; place-items:center; width:42px; height:42px; margin:auto; border-radius:50%; color:#9a668d; background:var(--hover); }.composer { display:flex; align-items:end; gap:10px; padding:10px; border:1px solid var(--line); border-radius:17px; background:var(--surface); box-shadow:0 9px 24px rgba(57,39,68,.07); }.composer textarea { flex:1; resize:none; min-height:43px; max-height:150px; padding:11px 8px; border:0; box-shadow:none!important; }.composer button { padding:12px 15px; }.composer button:disabled { cursor:wait; opacity:.55; }.chat-note { margin:11px 3px 0; font-size:11px; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media (max-width:720px) { .app-shell { grid-template-columns:1fr; }.sidebar { display:grid; grid-template-columns:1fr auto; align-items:center; padding:15px 18px; border-right:0; border-bottom:1px solid var(--line); }.new-chat { grid-column:2; grid-row:1; font-size:0; padding:9px 11px; }.new-chat::first-letter { font-size:19px; }.conversation-list,.logout-form { display:none; }.chat-main { min-height:calc(100vh - 64px); padding:23px 18px 14px; }.chat-header h1 { font-size:23px; }.messages { padding:22px 0; }.auth-card { padding:31px 25px; } }
.sidebar-footer { margin-top:auto; }.admin-link { display:block; padding:8px; color:var(--muted); font-size:13px; text-decoration:none; }.admin-shell { width:min(920px,calc(100% - 40px)); margin:auto; padding:25px 0 70px; }.admin-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:28px; border-bottom:1px solid var(--line); }.admin-header>a:last-child,.field-note a { color:var(--link); font-size:13px; }.admin-intro { max-width:640px; margin:38px 0 24px; }.admin-intro .eyebrow { margin:0 0 7px; }.admin-intro h1 { margin:0; font-size:38px; letter-spacing:-2px; }.admin-intro p:last-child,.field-note { color:var(--muted); }.admin-form { display:grid; gap:18px; }.admin-form section { display:grid; gap:13px; padding:24px; border:1px solid var(--line); border-radius:17px; background:var(--surface); }.admin-form h2 { margin:0; font-size:18px; }.admin-form label { display:grid; gap:7px; color:var(--ink-soft); font-size:13px; font-weight:700; }.admin-form input,.admin-form textarea,.admin-form select { width:100%; padding:10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); }.admin-form textarea { resize:vertical; }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }.toggle { grid-template-columns:auto 1fr; align-items:start; }.toggle input { width:auto; margin-top:3px; }.save-button { justify-self:start; border:0; border-radius:10px; padding:13px 19px; color:#fff; background:var(--button); font-weight:800; }.notice.success { color:var(--success-ink); background:var(--success-bg); } @media (max-width:520px) { .admin-shell { width:min(100% - 28px,920px); }.form-grid { grid-template-columns:1fr; }.admin-intro h1 { font-size:30px; } }
/* Companions, admin navigation and tables */
.avatar { display:inline-grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; object-fit:cover; color:#fff; background:linear-gradient(135deg,#ee92a1,#987ac2); font-weight:800; }.avatar.large { width:120px; height:120px; font-size:40px; border-radius:22px; }
.chat-title { display:flex; align-items:center; gap:14px; }.chat-header .adult-badge { text-decoration:none; }
.companion-switcher { display:grid; gap:4px; }.companion-link { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:10px; color:var(--ink); text-decoration:none; font-weight:700; font-size:14px; }.companion-link .avatar { width:30px; height:30px; font-size:13px; }.companion-link.active,.companion-link:hover { background:var(--hover); }
.sidebar-footer .logout-form { margin-top:0; }
.admin-nav,.period-switch { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }.admin-nav a,.period-switch a { padding:8px 13px; border-radius:999px; color:var(--muted); font-size:13px; font-weight:700; text-decoration:none; }.admin-nav a.active,.period-switch a.active,.admin-nav a:hover { color:var(--ink); background:var(--hover); }
.admin-intro h2 { margin:0; font-size:22px; }.admin-shell > h2 { margin:34px 0 12px; font-size:20px; }
.companion-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }.companion-card { display:grid; gap:12px; align-content:start; padding:20px; border:1px solid var(--line); border-radius:17px; background:var(--surface); color:var(--ink); text-decoration:none; }.companion-card h2 { margin:0; font-size:18px; }.companion-card p { margin:4px 0 0; color:var(--muted); font-size:13px; }.companion-card .avatar { width:64px; height:64px; font-size:24px; border-radius:18px; }.companion-card.inactive { opacity:.6; }.companion-card.new { place-items:center; min-height:200px; border-style:dashed; color:var(--muted); }
.card-actions { display:flex; align-items:center; gap:14px; }.card-actions a { color:var(--link); font-size:13px; }.card-actions a.button { padding:9px 15px; border-radius:10px; color:#fff; background:var(--button); font-weight:700; text-decoration:none; }
.chip { display:inline-block; margin:2px 4px 2px 0; padding:2px 8px; border-radius:999px; color:var(--chip-ink); background:var(--chip-bg); font-size:11px; font-weight:700; }.chip.warn { color:var(--danger-ink); background:var(--danger-bg); }
.table-wrap { overflow-x:auto; margin-bottom:24px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }.data-table { width:100%; border-collapse:collapse; font-size:13px; }.data-table th,.data-table td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }.data-table th { color:var(--muted); font-size:11px; letter-spacing:.6px; text-transform:uppercase; }.data-table tr:last-child td { border-bottom:0; }.data-table a { color:var(--link); }.muted-row { color:var(--muted); }
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:18px 0 24px; }.stat { display:grid; gap:4px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }.stat span,.stat small { color:var(--muted); font-size:12px; }.stat strong { font-size:22px; letter-spacing:-.5px; }
.danger-zone { margin-top:30px; padding:16px 20px; border:1px solid #f1c9d0; border-radius:14px; background:var(--danger-soft); }.danger-zone summary { cursor:pointer; color:var(--danger-ink); font-weight:700; }.danger-button { border:0; border-radius:10px; padding:11px 16px; color:#fff; background:#b3475c; font-weight:800; }
.reference-button { margin-top:8px; padding:7px 11px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--surface); font-size:12px; font-weight:700; }
@media (max-width:720px) { .companion-switcher { grid-column:1/-1; display:flex; overflow-x:auto; }.companion-link { flex:none; }.sidebar-footer { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; margin:0; }.sidebar-footer .logout-form { display:block; }.chat-title .avatar { width:34px; height:34px; } }
/* Media in chat: thumbnails, modal, "taking a photo" note */
.media-box { display:block; margin-top:8px; white-space:normal; }
.media-thumb { position:relative; display:block; padding:0; border:0; border-radius:12px; overflow:hidden; background:var(--thumb); cursor:zoom-in; }
.media-thumb img,.media-thumb video { display:block; width:180px; height:230px; object-fit:cover; transition:transform .2s; }
.media-thumb:hover img,.media-thumb:hover video { transform:scale(1.04); }
.media-thumb:focus-visible { outline:3px solid #b689ac; outline-offset:2px; }
.media-thumb.video::after { content:"▶"; position:absolute; inset:50% auto auto 50%; display:grid; place-items:center; width:46px; height:46px; margin:-23px 0 0 -23px; padding-left:3px; border-radius:50%; color:#fff; background:rgba(34,29,54,.6); font-size:18px; }
.media-working { display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; color:var(--chip-ink); background:var(--surface); font-size:13px; font-weight:600; }
.rec-dot { width:9px; height:9px; border-radius:50%; background:#e0445e; animation:rec-pulse 1.2s ease-in-out infinite; }
@keyframes rec-pulse { 50% { opacity:.25; transform:scale(.8); } }
.media-modal { width:min(94vw,900px); max-height:94vh; padding:0; border:0; border-radius:18px; background:#15111f; color:#fff; overflow:hidden; }
.media-modal::backdrop { background:rgba(20,14,28,.78); }
.modal-body { display:grid; place-items:center; }
.modal-body img,.modal-body video { display:block; max-width:100%; max-height:calc(94vh - 60px); object-fit:contain; }
.modal-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px; }
.modal-footer:empty { display:none; }
.modal-footer small { color:#bfb5cc; font-size:12px; }
.modal-footer .reference-button { margin:0; }
.modal-close { position:absolute; top:10px; right:10px; z-index:1; width:38px; height:38px; border:0; border-radius:50%; color:#fff; background:rgba(0,0,0,.55); font-size:24px; line-height:1; }
.reference-button { padding:7px 11px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--surface); font-size:12px; font-weight:700; }
@media (max-width:520px) { .media-thumb img,.media-thumb video { width:150px; height:190px; } }
@media (prefers-reduced-motion:reduce) { .rec-dot { animation:none; }.media-thumb img,.media-thumb video { transition:none; } }
/* Fixed-height chat: only the message list scrolls, the composer stays visible */
.app-shell { height:100vh; height:100dvh; min-height:0; }
.chat-main { height:100vh; height:100dvh; min-height:0; }
.sidebar { min-height:0; overflow-y:auto; }
.messages { min-height:0; }
.composer { flex-wrap:wrap; }
.composer textarea { min-width:0; flex-basis:200px; }
@media (max-width:720px) {
  .app-shell { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
  .chat-main { height:auto; min-height:0; margin:0; }  /* vertical auto margins would stop the grid from sizing it */
  .composer textarea { flex-basis:100%; }
  .composer button { flex:1; padding:10px 12px; }
}
.composer button { white-space:nowrap; }
/* Companion wizard */
.wizard { display:grid; gap:18px; }
.wizard-steps { display:flex; gap:6px; margin:0; padding:0; list-style:none; overflow-x:auto; }
.wizard-steps button { display:flex; align-items:center; gap:8px; padding:8px 14px 8px 8px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--surface); font-size:13px; font-weight:700; white-space:nowrap; }
.wizard-steps button span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--hover); font-size:12px; }
.wizard-steps button.active { color:#fff; border-color:var(--button); background:var(--button); }
.wizard-steps button.active span { color:var(--ink); background:var(--surface); }
.wizard-steps button:disabled { cursor:default; opacity:.45; }
.wizard-step { display:grid; gap:16px; padding:24px; border:1px solid var(--line); border-radius:17px; background:var(--surface); }
.wizard-step[hidden] { display:none; }
.wizard-step h2 { margin:0; font-size:20px; }
.wizard-step h3 { margin:0 0 8px; font-size:14px; }
.wizard-step h3 small { color:var(--muted); font-weight:500; }
.wizard-step label { display:grid; gap:7px; color:var(--ink-soft); font-size:13px; font-weight:700; }
.wizard-step input:not([type=checkbox]),.wizard-step textarea { width:100%; padding:10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font:inherit; }
.wizard-step textarea { resize:vertical; }
.template-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }
.template-card { display:grid; gap:4px; justify-items:start; padding:16px; border:2px solid var(--line); border-radius:15px; background:var(--soft); color:var(--ink); text-align:left; transition:transform .15s,border-color .15s; }
.template-card:hover { transform:translateY(-2px); border-color:#d9b8cf; }
.template-card.selected { border-color:var(--plum); background:var(--chip-bg); }
.template-emoji { font-size:26px; }
.template-card small { color:var(--muted); font-size:12px; }
.wizard-alt { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.surprise-button { justify-self:start; padding:12px 18px; border:0; border-radius:12px; color:#fff; background:linear-gradient(130deg,#765e9d,#c07899); font-weight:800; }
.surprise-button:disabled { cursor:default; opacity:.5; }
.link-button { padding:0; border:0; color:var(--link); background:none; font-size:13px; text-decoration:underline; }
.ghost-button { justify-self:start; padding:10px 15px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--surface); font-weight:700; }
.pick-list { display:flex; flex-wrap:wrap; gap:7px; }
.pick { padding:7px 12px; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft); background:var(--surface); font-size:13px; font-weight:600; }
.pick[aria-pressed=true] { border-color:var(--plum); color:#fff; background:var(--plum); }
.pick.shake { animation:shake .35s; }
@keyframes shake { 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }
.style-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; }
.style-card { display:grid; gap:3px; padding:12px 14px; border-radius:13px; text-align:left; }
.style-card small { color:var(--muted); font-weight:500; }
.style-card[aria-pressed=true] small { color:#efe6f7; }
.input-with-button { display:flex; gap:6px; }
.input-with-button button { flex:none; width:44px; border:1px solid var(--line); border-radius:9px; background:var(--surface); font-size:18px; }
.more-details { display:grid; gap:12px; padding:14px 16px; border:1px dashed var(--line); border-radius:13px; }
.more-details[open] { background:var(--soft); }
.more-details summary { cursor:pointer; color:var(--link); font-size:13px; font-weight:700; }
.more-details > * + * { margin-top:10px; }
.portrait-area { display:grid; gap:10px; padding-top:6px; border-top:1px solid var(--line); }
.portrait-grid { display:flex; flex-wrap:wrap; gap:10px; }
.portrait-option { padding:0; border:3px solid transparent; border-radius:14px; overflow:hidden; background:var(--thumb); }
.portrait-option img { display:block; width:150px; height:190px; object-fit:cover; }
.portrait-option.selected { border-color:var(--plum); box-shadow:0 0 0 3px #eadcf5; }
.current-reference { display:flex; align-items:center; gap:14px; }
.preview-card { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; padding:22px; border-radius:17px; background:linear-gradient(135deg,#fdf1f3,#f3ecfa); }
.preview-image img,.preview-image .avatar { display:grid; width:150px; height:190px; border-radius:16px; object-fit:cover; font-size:54px; }
.preview-card h3 { margin:0; font-size:26px; letter-spacing:-.8px; }
.preview-card .field-note { margin:4px 0 10px; }
.preview-card blockquote { margin:14px 0 0; padding:12px 14px; border-radius:4px 14px 14px 14px; background:var(--surface); color:var(--ink); font-size:14px; }
.wizard-nav { display:flex; justify-content:space-between; gap:10px; }
.wizard-nav .save-button { margin-left:auto; }
.wizard-nav [hidden] { display:none; }
.starters { display:flex; flex-wrap:wrap; gap:7px; padding-bottom:10px; }
.story-mode { margin:0 0 10px; padding:10px 13px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }.story-mode summary { cursor:pointer; color:#765e9d; font-size:13px; font-weight:800; }.story-mode > div { display:flex; flex-wrap:wrap; gap:7px; padding-top:10px; }.story-mode button { padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--chip-ink); background:var(--soft); font-size:12px; font-weight:700; }
.starter { padding:8px 13px; border:1px solid var(--line); border-radius:999px; color:var(--chip-ink); background:var(--surface); font-size:13px; font-weight:600; }
.starter:hover { border-color:var(--plum); }
@media (max-width:560px) { .preview-card { grid-template-columns:1fr; }.wizard-step { padding:18px; }.template-grid { grid-template-columns:1fr 1fr; } }
@media (prefers-reduced-motion:reduce) { .template-card,.pick.shake { transition:none; animation:none; } }
.wizard-steps { flex-wrap:wrap; }
.narrow-shell { max-width:620px; }.media-presets { display:flex; flex-wrap:wrap; gap:7px; padding:10px 2px 0; }.media-presets button { border:1px solid var(--line); border-radius:999px; padding:6px 10px; background:var(--surface); color:var(--muted); font-size:12px; cursor:pointer; }.media-presets button:hover { color:var(--ink); background:#f7eef2; }
.report-button { margin:6px 0 0 4px; padding:0; border:0; background:transparent; color:var(--muted); font-size:11px; cursor:pointer; }.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:15px; }.gallery-card { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--surface); }.gallery-card img,.gallery-card video { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:#f1edf0; }.gallery-card p,.gallery-card small { display:block; margin:10px 12px; color:var(--muted); font-size:12px; }.gallery-card small { margin-top:-4px; }
.site-footer { padding:18px; text-align:center; }.site-footer a { color:var(--muted); font-size:12px; }.privacy-copy { display:grid; gap:5px; padding:24px; border:1px solid var(--line); border-radius:17px; background:var(--surface); }.privacy-copy h2 { margin:12px 0 0; font-size:17px; }.privacy-copy p { margin:0; color:var(--muted); line-height:1.55; }
.media-box > .reference-button { display:block; margin:8px 0 0; }
.extension-modal { width:min(540px,calc(100% - 32px)); border:0; border-radius:18px; padding:0; color:var(--ink); box-shadow:0 24px 80px rgba(35,24,42,.28); }.extension-modal::backdrop { background:rgba(35,24,42,.5); }.extension-dialog-form { position:relative; display:grid; gap:12px; padding:28px; }.extension-dialog-form h2 { margin:0; font-size:24px; }.extension-dialog-form .eyebrow { margin:0; }.extension-dialog-form label { font-size:13px; font-weight:700; }.extension-dialog-form textarea { width:100%; resize:vertical; padding:11px; border:1px solid var(--line); border-radius:10px; color:var(--ink); font:inherit; box-sizing:border-box; }.extension-actions { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:4px; }.extension-actions .save-button { justify-self:auto; }
.shared-scene-button { margin-top:8px; background:#6f4f73; }
.trim-preview video { display:block; width:100%; max-height:220px; border-radius:10px; background:#17131a; }.extension-dialog-form input[type="range"] { width:100%; accent-color:#6f4f73; }
.memory-list { display:grid; gap:10px; margin-top:20px; }.memory-list article { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }.memory-list p { margin:0; }
/* Message actions: read aloud, edit, "Andere Antwort" */
.message-label { display:flex; align-items:center; gap:6px; }
.message-action { padding:2px 7px; border:1px solid transparent; border-radius:999px; color:var(--muted); background:none; font-size:12px; font-weight:700; letter-spacing:0; text-transform:none; }
.message-action:hover,.message-action:focus-visible { border-color:var(--line); color:var(--ink); background:var(--surface); }
.message-action:disabled { cursor:wait; opacity:.6; }
.redo-button { display:block; margin-top:6px; }
.message.user .message-label { justify-content:flex-end; }
.message.typing p { color:var(--muted); animation:typing-fade 1.4s ease-in-out infinite; }
@keyframes typing-fade { 50% { opacity:.45; } }
.message.failed p { color:var(--danger-ink); background:var(--danger-bg); }
.edit-box { display:grid; gap:6px; }
.edit-box textarea { width:100%; min-width:min(420px,70vw); padding:10px 12px; border:1px solid #b689ac; border-radius:14px; font:inherit; resize:vertical; }
.edit-box div { display:flex; justify-content:flex-end; gap:6px; }
/* Unread */
.unread-badge { min-width:20px; margin-left:auto; padding:1px 6px; border-radius:999px; color:#fff; background:#e0445e; font-size:11px; font-weight:800; text-align:center; }
.unread-badge[hidden],.unread-dot[hidden] { display:none; }
.unread-dot { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#e0445e; vertical-align:1px; }
.relation-note { margin:4px 0 0; color:var(--muted); font-size:12px; }
/* Voice */
.mic-button { padding:12px 13px !important; color:var(--ink) !important; background:var(--hover) !important; }
.mic-button.recording { color:#fff !important; background:#e0445e !important; animation:rec-pulse 1.2s ease-in-out infinite; }
.voice-option input { position:absolute; opacity:0; pointer-events:none; }
.voice-option span { display:inline-block; padding:7px 12px; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft); background:var(--surface); font-size:13px; font-weight:600; cursor:pointer; }
.voice-option input:checked + span { border-color:var(--plum); color:#fff; background:var(--plum); }
.voice-option input:focus-visible + span { outline:3px solid #b689ac; outline-offset:2px; }
/* Installable app / push */
.push-toggle { border:0; background:none; text-align:left; cursor:pointer; }
.install-hint { margin:0; padding:8px; color:var(--muted); font-size:12px; }
@media (prefers-reduced-motion:reduce) { .message.typing p,.mic-button.recording { animation:none; } }
.menu-toggle { display:none; }
@media (max-width:720px) {
  .menu-toggle { display:block; grid-column:2; grid-row:1; padding:8px 12px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--surface); font-size:13px; font-weight:700; }
  .sidebar .new-chat { grid-row:1; grid-column:3; }
  .sidebar { grid-template-columns:1fr auto auto; gap:10px 8px; }
  .sidebar-footer { display:none; }
  .sidebar.menu-open .sidebar-footer { display:flex; }
}
.env-banner { position:sticky; top:0; z-index:50; padding:5px 12px; color:#fff; background:#c26a00; font-size:12px; font-weight:800; text-align:center; letter-spacing:.3px; }
/* Remaining usage today */
.usage-meter { display:flex; align-items:center; gap:8px; margin:8px 3px 0; color:var(--muted); font-size:12px; }
.usage-meter meter { width:70px; height:6px; flex:none; }
.usage-meter.low { color:var(--danger-ink); font-weight:700; }

/* Dark theme: gradients that cannot be expressed with the tokens above */
:root[data-theme="dark"] .auth-shell { background:radial-gradient(circle at 80% 10%,#2c2140,transparent 32rem),radial-gradient(circle at 10% 90%,#2d1c24,transparent 28rem),var(--wash); } :root[data-theme="dark"] .preview-card { background:linear-gradient(135deg,#2a1f2e,#231d33); } :root[data-theme="dark"] .message.user p { color:#fff; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .auth-shell { background:radial-gradient(circle at 80% 10%,#2c2140,transparent 32rem),radial-gradient(circle at 10% 90%,#2d1c24,transparent 28rem),var(--wash); } :root:not([data-theme="light"]) .preview-card { background:linear-gradient(135deg,#2a1f2e,#231d33); } :root:not([data-theme="light"]) .message.user p { color:#fff; } }
.theme-toggle { border:0; color:var(--muted); background:none; font:inherit; font-size:12px; cursor:pointer; }
.data-section { margin-top:18px; padding:24px; border:1px solid var(--line); border-radius:17px; background:var(--surface); }.data-section h2 { margin:0 0 8px; font-size:18px; }