/* Velours Galerie carries through into the working application and its dialogs. */
:root {
  color-scheme: dark;
  --charcoal: #101223;
  --ivory: #f4e7d4;
  --gold: #f4e7d4;
  --surface: #191d2d;
  --muted: #b5b8c8;
  --line: #34394e;
  --shadow: 0 18px 60px #0005;
  --app-pine: #f4e7d4;
  --app-sky: #23283c;
}
::selection { background: #f4e7d4; color: #101223; }
:focus-visible { outline: 3px solid #f4e7d4; outline-offset: 4px; }
body.app-active { background: #101223; }
#app { min-height: 0; background: #101223; }
#app .app-header { background: #23283c; padding-inline: 28px; }
#app .wordmark { color: #f4e7d4; }
#app .wordmark span { color: inherit; }
#app .mode-switch { background: #23283c; border-color: #444a63; border-radius: 9px; gap: 4px; }
#app .mode-switch button { color: #f4e7d4; border-radius: 6px; font-size: 13px; }
#app .mode-switch button[aria-pressed=true] { background: #101223; color: #f4e7d4; box-shadow: none; text-decoration: none; border-color: #444a63; }
:is(#app, dialog) button:hover, :is(#app, dialog) .button:hover { background: #2a3046; color: #f4e7d4; }
:is(#app, dialog) button:active:not(:disabled), :is(#app, dialog) .button:active { filter: none; background: #343b52; color: #f4e7d4; }
:is(#app, dialog) .primary { background: #f4e7d4; border-color: #f4e7d4; color: #101223; }
:is(#app, dialog) .primary:hover { background: #fff3df; border-color: #fff3df; color: #101223; }
:is(#app, dialog) .primary:active:not(:disabled) { background: #f4e7d4; border-color: #f4e7d4; color: #101223; }
:is(#app, dialog) button:disabled, :is(#app, dialog) button:disabled:hover { opacity: 1; background: #262b3c; color: #a8acbf; border-color: #444a63; cursor: not-allowed; box-shadow: none; }
:is(#app, dialog) a:hover { color: #f4e7d4; }
:is(#app, dialog) a:active { color: #f4e7d4; }
:is(#app, dialog) .outline { border-color: #596078; }
#app .companions { background: #191d2d; padding: 28px 20px 22px; }
#app .panel-heading h2 { font-size: 25px; }
#app .companions>p { font-size: 13px; line-height: 1.6; max-width: 24ch; }
#app #companion-list { margin: 22px -8px 16px; }
#app .companion { padding: 13px 10px; border-radius: 9px; gap: 12px; }
#app .companion:hover { background: #252b40; }
#app .companion[aria-pressed=true] { border-color: #737b98; background: #101223; color: #f4e7d4; }
#app .companion[aria-pressed=true]:hover { background: #2c334b; }
#app .companion small { color: #b5b8c8; font-size: 12px; line-height: 1.45; display: block; }
#app .companion .tagline { font-size: 12px; margin-bottom: 5px; }
#app .portrait { width: 42px; height: 52px; color: #f4e7d4; background: #293149; border-radius: 20px 20px 6px 6px; }
#app img.portrait, #app img.empty-portrait { object-fit: cover; object-position: center 30%; }
#app .local-note { border-top: 1px solid #34394e; padding-top: 18px; margin-top: auto; }
#app .companions>.button { margin-bottom: 24px; font-size: 13px; }
#app .conversation { background: #101223; }
#app .conversation-header { padding: 20px 32px; min-height: 94px; background: #101223; }
#app .conversation-person { display: flex; align-items: center; gap: 13px; min-width: 0; }
#app .conversation-person>div:last-child { min-width: 0; }
#app #chat-portrait { flex-shrink: 0; }
#app #chat-portrait .portrait { display: block; width: 37px; height: 46px; }
#app .conversation-header h1 { color: #f4e7d4; font-size: 27px; }
#app .conversation-header p { font-size: 13px; line-height: 1.5; }
#app .mobile-tools { gap: 7px; }
#app .mobile-tools button { border: 1px solid #596078; border-radius: 6px; }
#app .mobile-tools button[aria-expanded=true] { background: #2a3046; color: #f4e7d4; border-color: #f4e7d4; }
#app .messages { padding: 30px max(28px, calc((100% - 72ch) / 2)) 16px; }
#app .messages, #app .companions, #app .memory-panel, dialog { scrollbar-color: #68708c transparent; scrollbar-width: thin; }
#app .empty-state { min-height: 300px; max-width: 550px; margin-inline: auto; padding-block: 24px; }
#app .empty-portrait { height: 100px; width: 80px; border-radius: 40px 40px 10px 10px; margin-bottom: 22px; color: #f4e7d4; background: #23283c; }
#app .empty-state h2 { color: #f4e7d4; font-size: clamp(27px, 2.6vw, 36px); max-width: 22ch; }
#app .empty-state p { max-width: 40ch; font-size: 14px; line-height: 1.7; margin-block: 15px 22px; }
#app .conversation-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 480px; }
#app .conversation-starters button { font-size: 12px; padding: 10px 13px; background: transparent; }
#app .conversation-starters button:hover { background: #2a3046; }
#app .message { max-width: 100%; padding-bottom: 24px; content-visibility: visible; contain-intrinsic-size: none; }
#app .message-head { color: #f4e7d4; font-size: 13px; font-weight: 600; }
#app .message-body { font-size: 16px; line-height: 1.8; }
#app .message.user { max-width: min(85%, 62ch); background: #242b40; border: 1px solid #444a63; border-radius: 14px 14px 4px 14px; padding: 15px 18px 5px; }
#app .message.user .message-head { color: #f4e7d4; }
#app .message-actions { margin-top: 10px; gap: 4px; }
#app .message-actions button { border-radius: 5px; padding-inline: 9px; }
#app .message-actions button:hover { background: #2a3046; color: #f4e7d4; }
#app .message.streaming .message-body::after { width: 2px; background: #f4e7d4; }
#app .scene-header { color: #f4e7d4; border-bottom: 1px solid #34394e; margin-bottom: 14px; }
#app .compose-area { padding: 0 max(28px, calc((100% - 72ch) / 2)) 14px; }
#app .compose-area form { border: 1px solid #666e87; background: #191d2d; border-radius: 14px; padding: 16px 17px 11px; box-shadow: none; }
#app .compose-area form:focus-within { border-color: #f4e7d4; box-shadow: 0 0 0 1px #f4e7d4; }
#app .compose-area textarea { color: #f4e7d4; font-size: 16px; min-height: 55px; }
#app .compose-area textarea:focus-visible { outline: none; } /* The containing form carries the visible focus ring. */
#app .compose-area textarea:disabled { opacity: 1; }
#app .compose-controls span { font-size: 12px; line-height: 1.5; }
#app .compose-controls .primary { min-width: 76px; }
#app .ai-note { color: #b5b8c8; line-height: 1.5; }
#app .notice, #app .error-notice { background: #2e2a34; border-color: #736275; color: #f4e7d4; }
#app .notice { margin-inline: 28px; }
#app .memory-panel { background: #191d2d; padding: 28px 22px; }
#app .memory-visual { background: #101223; border: 1px solid #34394e; padding: 12px 10px 17px; margin: 22px 0 18px; border-radius: 12px; }
#app .ink-art, #app .ink-trace { color: #f4e7d4; }
#app .ink-shadow { color: #9db8ab; opacity: .5; stroke-width: 4px; }
#app .memory-visual strong { color: #f4e7d4; }
#app .memory-panel .small-copy { line-height: 1.7; }
#app .lore-entry { padding-block: 18px; }
#app .lore-entry h4 { font-size: 15px; }
#app .lore-entry p { font-size: 13px; }
.drawer-backdrop { background: #f4e7d43d; backdrop-filter: blur(2px); }
dialog { background: #101223; border-color: #444a63; box-shadow: 0 18px 70px #0007; padding: 28px 30px 30px; }
dialog::backdrop { background: #f4e7d466; backdrop-filter: blur(4px); }
dialog .dialog-heading h2 { color: #f4e7d4; }
dialog input, dialog select, dialog textarea { background: #191d2d; border-color: #666e87; color: #f4e7d4; font-size: 16px; }
dialog input:hover, dialog select:hover, dialog textarea:hover { border-color: #f4e7d4; }
dialog .settings-grid input, dialog .settings-grid select { font-size: 14px; }
dialog .check-row input { accent-color: #f4e7d4; }
dialog .data-settings { border-top-color: #34394e; }
dialog .data-settings h3 { color: #f4e7d4; }
.toast { background: #f4e7d4; color: #101223; }
@media (max-width: 760px) {
  #app .app-header { padding-inline: 15px; }
  #app .mode-switch { gap: 2px; }
  #app .mode-switch button { min-width: 58px; padding-inline: 10px; font-size: 12px; }
  #app .companions { padding: 22px; }
  #app .conversation-header { padding: 14px 20px 12px; min-height: 0; }
  #app .conversation-header h1 { font-size: 23px; }
  #app .conversation-header p { font-size: 12px; }
  #app .mobile-tools { margin-top: 12px; }
  #app .messages { padding: 24px 20px 12px; }
  #app .message-body { font-size: 15px; line-height: 1.75; }
  #app .message.user { max-width: 95%; }
  #app .empty-state { min-height: 240px; padding-block: 16px; }
  #app .empty-portrait { width: 56px; height: 70px; margin-bottom: 16px; }
  #app .empty-state h2 { font-size: 27px; }
  #app .empty-state p { font-size: 13px; margin-block: 12px 16px; }
  #app .conversation-starters { gap: 6px; }
  #app .compose-area { padding: 0 13px calc(10px + env(safe-area-inset-bottom)); }
  #app .compose-area form { padding: 12px; }
  #app .compose-area textarea { min-height: 45px; }
  #app .notice { margin-inline: 14px; }
  dialog { padding: 22px; }
  dialog .settings-grid input, dialog .settings-grid select { font-size: 16px; }
}
@media (max-height: 600px) {
  #app .conversation-header { padding-block: 10px; }
  #app .empty-state { min-height: 200px; }
  #app .empty-portrait { width: 40px; height: 50px; margin-bottom: 10px; }
  #app .compose-area textarea { min-height: 40px; }
}
@media (max-width: 360px) {
  #app .app-header { padding-inline: 10px; gap: 6px; }
  #app .app-header .wordmark { font-size: 24px; }
  #app .mode-switch button { min-width: 50px; padding-inline: 8px; }
}