/* Valerie MAX desktop shell. Loaded last so it can reskin the proven UI without
   replacing backend hooks or security-sensitive controls. */
:root{
  --bg:#090806;--bg2:#0e0c09;--bg3:#141109;--bg4:#1a1610;--bg5:#221d13;
  --bg6:#2c2518;--gold:#c9a84c;--gold2:#e0c070;--gold3:#f0dfa0;
  --gold-dim:#7a6430;--text:#f0e8d8;--text2:#b8a882;--text3:#8a7c61;
  --border:#231e12;--border2:#332b18;--border3:#4a3f22;--sidebar-w:268px;
}
html,body{width:100%;height:100%;background:var(--bg)}
body{display:flex!important;flex-direction:column!important;overflow:hidden;position:relative}
body::before{content:"";position:fixed;top:-30%;left:30%;width:60vw;height:70vh;background:radial-gradient(ellipse,rgba(201,168,76,.055),transparent 70%);pointer-events:none;z-index:0}
body::after{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");opacity:.24;pointer-events:none;z-index:0}
button:focus-visible,[tabindex]:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.header-bar{position:relative;z-index:520;height:52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:rgba(9,8,6,.96);backdrop-filter:blur(12px);flex:0 0 auto}
.header-logo{width:var(--sidebar-w);height:100%;display:flex;align-items:center;gap:10px;padding:0 20px;border-right:1px solid var(--border);flex:0 0 auto}
.header-logo .logo-mark{width:30px;height:30px;border-radius:7px;box-shadow:0 2px 12px rgba(201,168,76,.35)}
.header-logo .logo-text{font-size:19px;letter-spacing:.03em}
.header-center{min-width:0;flex:1;padding:0 24px;display:flex;align-items:center}
.header-center .topbar-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text3);font-size:16px}
.header-right{display:flex;align-items:center;gap:9px;padding:0 18px 0 10px;flex:0 0 auto}
.header-right .token-badge-btn{height:30px;padding:4px 12px;font-family:'DM Mono',monospace;font-size:11px;background:rgba(201,168,76,.1);border-color:rgba(201,168,76,.28)}
.plan-badge{height:30px;padding:4px 12px;border-radius:20px;border:1px solid rgba(201,168,76,.4);background:linear-gradient(135deg,rgba(201,168,76,.15),rgba(240,159,54,.08));color:var(--gold3);font:600 11px 'DM Mono',monospace;letter-spacing:.04em;cursor:pointer}
.plan-badge:hover{background:linear-gradient(135deg,rgba(201,168,76,.23),rgba(240,159,54,.12))}
.header-right .game-mode-btn,.header-right .spicy-btn{width:34px;height:34px;min-width:34px;border-radius:9px;background:transparent;border:1px solid var(--border2);color:var(--text3);display:grid;place-items:center}
.header-right .game-mode-btn:hover{background:var(--bg4);border-color:var(--border3);color:var(--gold)}
.header-right .spicy-btn{border-radius:50%;font-size:17px}.spicy-wrap{position:relative}

.layout{position:relative;z-index:1;display:flex;flex:1;min-height:0;overflow:hidden}
.sidebar{height:100%!important;background:var(--bg2);border-color:var(--border)}
.sidebar-top{padding:14px 14px 10px;border-bottom:1px solid var(--border)}
.sidebar .logo{display:none!important}
.new-chat-btn{padding:9px 14px;border-radius:12px;color:var(--text2)}
.sidebar-section{padding:18px 14px 7px;font-size:9.5px;letter-spacing:.16em;color:#716550}
.chat-list{padding:0 10px}
.chat-item{padding:9px 11px;border-radius:10px;margin-bottom:2px}
.chat-item.active{background:var(--bg5);border-left:2px solid var(--gold);padding-left:9px}
.chat-item-time{color:#716550}
.sidebar-gallery-btn{margin:10px 10px 0;padding:11px 13px;border-radius:12px;background:var(--bg3)}
.sidebar-profile{padding:12px 10px}.profile-trigger{padding:8px 10px;border-radius:12px}.profile-avatar{box-shadow:0 0 10px rgba(201,168,76,.2)}
.profile-menu{left:10px;right:10px;border-radius:12px}

.main{height:100%!important;min-width:0;min-height:0;overflow:hidden;background:var(--bg)}
.main::before{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80%;height:40%;background:radial-gradient(ellipse,rgba(201,168,76,.04),transparent 70%);pointer-events:none;z-index:0}
.topbar{display:none!important}
.chat-area{position:relative;z-index:1;padding:32px 0 8px;gap:0}
.welcome{padding:48px 40px;gap:0;text-align:center}
.welcome-logo{font-family:'Cormorant Garamond',serif;font-size:72px!important;font-weight:300!important;line-height:1;background:linear-gradient(160deg,var(--gold2),var(--gold3),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent!important;margin-bottom:16px}
.welcome-sub{font-size:13.5px!important;color:var(--text3)!important;max-width:430px!important;line-height:1.7!important;margin-bottom:28px!important}
.welcome-hints{display:flex!important;gap:10px!important;flex-wrap:wrap;justify-content:center;max-width:720px!important}
.welcome-hint{appearance:none;padding:8px 18px!important;background:var(--bg3)!important;border:1px solid var(--border2)!important;border-radius:24px!important;font:400 12.5px 'DM Sans',sans-serif!important;color:var(--text2)!important;cursor:pointer}
.welcome-hint:hover{background:var(--bg5)!important;border-color:var(--gold-dim)!important;color:var(--gold3)!important;transform:none!important}
.valerie-public-landing{border-color:var(--border2)!important;background:linear-gradient(160deg,rgba(24,20,13,.96),rgba(10,9,7,.97))!important}

.msg-row{padding:0 28px;margin-bottom:22px}.msg-bubble{max-width:70%;padding:14px 18px;border-radius:16px;line-height:1.72;overflow-wrap:anywhere;word-break:break-word}.msg-bubble pre{max-width:100%;overflow-x:auto}.msg-row.user .msg-bubble{border-bottom-right-radius:4px}.msg-row.ai .msg-bubble{border-bottom-left-radius:4px}.msg-sender{font-size:10.5px;letter-spacing:.1em}.msg-row.ai .msg-sender::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 5px rgba(201,168,76,.6);margin-right:7px;vertical-align:1px}
.v3-answer-actions{opacity:.25;transition:opacity .18s}.msg-row:hover .v3-answer-actions,.msg-row:focus-within .v3-answer-actions{opacity:1}

.input-area{padding:14px 20px 18px;border-top:1px solid var(--border);background:rgba(9,8,6,.97);position:relative;z-index:5}
.input-area::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.15),transparent)}
.input-box{background:var(--bg3);border:1px solid var(--border2);border-radius:16px;overflow:hidden;transition:border-color .2s,box-shadow .2s}.input-box:focus-within{border-color:var(--gold-dim);box-shadow:0 0 0 3px rgba(201,168,76,.07)}
.input-top{padding:14px 16px 0}.input-textarea{min-height:52px;max-height:160px;font-size:14px;line-height:1.6}.input-textarea::placeholder{color:#716550}
.input-bottom{padding:10px 14px;border-top:1px solid var(--border)}.input-bottom-left{display:flex;align-items:center;gap:8px;min-width:0}.plus-btn{width:32px;height:32px;flex:0 0 auto}
.desktop-mode-pills{display:flex;background:var(--bg4);border-radius:20px;padding:2px;gap:2px}
.desktop-mode-pill{padding:4px 12px;border-radius:18px;border:0;background:transparent;color:var(--text3);font:400 11px 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap}.desktop-mode-pill.active{background:var(--bg);color:var(--gold);box-shadow:inset 0 0 0 1px var(--border2)}.desktop-mode-pill:hover:not(.active){color:var(--text2)}
.chat-inspect-attach-btn{width:32px!important;height:32px!important;border-radius:50%!important;font-size:14px!important}
.model-selector{background:var(--bg4);border-radius:20px;padding:2px}.model-btn{border-radius:18px!important}
.send-btn{width:36px;height:36px;box-shadow:0 2px 14px rgba(201,168,76,.28)}.send-btn:hover{transform:scale(1.06);box-shadow:0 4px 20px rgba(201,168,76,.42)}
.composer-disclaimer{margin-top:10px;color:#716550}.composer-disclaimer button{color:var(--text3)}

/* Panels and overlays inherit the same visual language. */
.overlay,.gallery-panel,.game-panel{backdrop-filter:blur(10px)}
.modal,.profile-menu,.plus-menu{border-color:var(--border2)!important;background:var(--bg3)!important}
.gallery-header,.gallery-tabs{background:var(--bg2)!important}

/* Desktop app window resilience, not the mobile interface. */
@media(max-width:1120px){.header-center{padding:0 14px}.msg-bubble{max-width:78%}.desktop-mode-pill{padding-inline:9px}.header-right{padding-right:10px}.plan-badge{display:none}}
@media(max-width:900px){:root{--sidebar-w:220px}.header-logo{padding-inline:14px}.header-center .topbar-title{display:none}.desktop-mode-pills{display:none}.msg-bubble{max-width:84%}}
@media(max-width:720px){.sidebar{display:none!important}.header-logo{width:auto;border-right:0}.header-center{display:none}.header-right{margin-left:auto}.input-area{padding-inline:12px}.msg-row{padding-inline:14px}.msg-bubble{max-width:92%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}