/* My Room: additive styles on the live homepage. */
.vn-dialogue-wrap { position:relative; }
.sc-entry { position:absolute; z-index:3; right:28px; bottom:calc(100% - 9px); width:78px; min-height:44px; margin:0; padding:0; border:0; background:none; cursor:pointer; line-height:0; border-radius:5px; -webkit-tap-highlight-color:transparent; }
.sc-entry .vn-peek { position:static; width:100%; height:auto; display:block; }
.sc-entry:hover .vn-peek,.sc-entry:focus-visible .vn-peek { animation:peek-hop .5s cubic-bezier(.34,1.56,.64,1); }
.sc-entry:focus-visible { outline:2px solid #f0d999; outline-offset:3px; }
.sc-entry-badge { position:absolute; right:-9px; top:3px; padding:0 5px 3px; font:700 16px/14px var(--body); letter-spacing:1px; color:#f1d895; background:#0b0c12ee; border:1px solid #d6b25e99; border-radius:6px 6px 6px 0; pointer-events:none; }
@media (orientation:portrait),(max-width:820px) and (min-height:561px) { .sc-entry { right:18px; width:62px; bottom:calc(100% - 7px); } }
.sc-room { --sc-line:#c5a36350; --sc-muted:#aba697; color:#eee8db; font:400 14px/1.7 var(--body); color-scheme:dark; position:fixed; inset:32px 32px auto auto; margin:0; padding:0; width:min(550px,calc(100vw - 64px)); height:calc(100dvh - 64px); max-height:850px; max-width:none; overflow:hidden; border:1px solid #c7a35d; border-radius:5px; background:#0a0c12; box-shadow:0 28px 90px #0009,inset 0 0 0 4px #0a0c12,inset 0 0 0 5px #d6b25e21; }
.sc-room[open] { display:flex; flex-direction:column; animation:sc-arrive .26s ease-out; }
.sc-room::backdrop { background:rgba(2,4,10,.24); }
.sc-room *, .sc-room *::before, .sc-room *::after { box-sizing:border-box; }
.sc-room button,.sc-room textarea { font:inherit; }
.sc-room button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sc-room button:focus-visible,.sc-room textarea:focus-visible { outline:2px solid #f0d999; outline-offset:3px; }
.sc-room button:disabled { opacity:.4; cursor:default; }
.sc-handle { display:none; }
.sc-header { flex:none; display:flex; gap:13px; align-items:center; padding:25px 23px 18px; position:relative; background:linear-gradient(130deg,#ba934a11,transparent 75%); border-bottom:1px solid var(--sc-line); }
.sc-portrait { flex:none; width:48px; height:54px; background:var(--faces) 25% 0 / 500% 100% no-repeat,#182336; border:1px solid #b99550; box-shadow:0 0 0 3px #0a0c12,0 0 0 4px #b9955038; border-radius:2px; }
.sc-portrait[data-face="serious"] { background-position:0 0; }
.sc-portrait[data-face="calm"] { background-position:100% 0; }
.sc-portrait[data-face="happy"] { background-position:75% 0; }
.sc-heading { flex:1; min-width:0; }
.sc-eyebrow { color:#ae9462; font:500 9px/1.4 var(--latin); letter-spacing:2.4px; }
.sc-heading h2 { display:flex; align-items:baseline; gap:9px; font:600 21px/1.5 var(--latin); letter-spacing:2px; margin:2px 0 0; color:#f2db9d; }
.sc-heading h2 small { font:400 10px/1.4 var(--body); color:#aea38e; letter-spacing:1px; }
.sc-status { font-size:11px; color:#b9b5ab; display:flex; gap:6px; align-items:center; }
.sc-status::before { content:""; width:4px; height:4px; border-radius:50%; background:#d6b25e; }
.sc-tools { display:flex; gap:2px; align-items:center; }
.sc-icon { display:grid; place-items:center; width:36px; height:40px; border:0; border-radius:3px; color:#b3a58a; background:transparent; }
.sc-icon:hover { background:#d6b25e0f; color:#f1d797; }
.sc-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sc-mode { flex:none; font-size:10px; color:#b3a48b; padding:7px 22px; border-bottom:1px solid #d6b25e13; background:#d6b25e06; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sc-mode span:last-child { letter-spacing:1.2px; font:500 8px/1.4 var(--latin); color:#857a66; }
.sc-log { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:27px 25px 20px; scrollbar-width:thin; scrollbar-color:#5c4b2d transparent; scroll-behavior:smooth; }
.sc-divider { display:flex; align-items:center; gap:12px; margin:0 0 23px; font-size:10px; color:#857d6e; letter-spacing:1px; }
.sc-divider::before,.sc-divider::after { content:""; height:1px; background:#d6b25e24; flex:1; }
.sc-message { margin:0 0 24px; }
.sc-message-label { display:flex; align-items:center; gap:8px; margin-bottom:7px; color:#d7ba7a; font:500 10px/1.5 var(--latin); letter-spacing:1.6px; }
.sc-message-label::before { content:"◇"; font-size:13px; }
.sc-message-body { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.9; margin:0; }
.sc-message.assistant .sc-message-body { padding-left:17px; border-left:1px solid #c6a36448; }
.sc-message.user { max-width:88%; margin-left:auto; }
.sc-message.user .sc-message-label { justify-content:flex-end; color:#a5b5ca; letter-spacing:1px; }
.sc-message.user .sc-message-label::before { display:none; }
.sc-message.user .sc-message-body { padding:10px 14px; background:#172131a3; border:1px solid #7b9ac02b; border-radius:8px 1px 8px 8px; color:#e3eaf3; }
.sc-message-meta { display:block; font:400 10px/1.5 var(--body); color:#9d927f; margin:7px 0 0 18px; }
.sc-message.is-writing .sc-message-body::after { content:""; display:inline-block; width:5px; height:15px; margin-left:5px; background:#dec47e; vertical-align:-2px; animation:sc-cursor .8s ease infinite; }
.sc-message.is-waiting .sc-message-body { color:#aaa18d; }
.sc-welcome { text-align:center; padding:21px 0 30px; }
.sc-welcome-mark { width:44px; height:44px; object-fit:contain; opacity:.82; filter:drop-shadow(0 0 16px #e7bb4155); }
.sc-welcome .sc-welcome-title { margin:13px 0 9px; color:#ecd69f; font:600 21px/1.6 var(--serif); letter-spacing:1px; }
.sc-welcome p { margin:0; color:#aaa79e; font-size:12px; line-height:1.8; }
.sc-bottom { flex:none; padding:0 23px max(16px,env(safe-area-inset-bottom)); background:linear-gradient(0deg,#0a0c12 82%,#0a0c1200); }
.sc-prompts { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.sc-prompt { color:#c4b48e; background:#b4955510; border:1px solid #b4955540; border-radius:3px; padding:6px 11px; font-size:11px!important; }
.sc-prompt:hover { color:#f4dc9c; border-color:#c7a660; background:#b4955520; }
.sc-compose { display:flex; gap:10px; align-items:flex-end; padding:11px 11px 11px 15px; background:#11151e; border:1px solid #b99a595c; border-radius:4px; transition:border-color .2s; }
.sc-compose:focus-within { border-color:#dcc080; box-shadow:0 0 0 2px #d6b25e0b; }
.sc-compose textarea { resize:none; flex:1; min-width:0; min-height:28px; max-height:112px; height:28px; background:none; border:0; padding:3px 0; color:#ede9dd; font-size:14px; line-height:22px; outline:none!important; overflow-y:auto; }
.sc-compose textarea::placeholder { color:#797a7e; }
.sc-send { flex:none; min-width:42px; height:34px; padding:0 10px; display:grid; place-items:center; border:1px solid #ddc07b; border-radius:3px; background:linear-gradient(135deg,#e7cf94,#b8934e); color:#211a0c; }
.sc-send svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sc-send[data-action="stop"] { background:#272317; color:#e8cf93; }
.sc-send:disabled { background:#28271f; color:#8c846d; border-color:#62553d; }
.sc-footnote { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; color:#767570; font-size:10px; line-height:1.5; }
.sc-footnote .sc-model { font-size:9px; color:#93876f; }
.sc-notice { color:#d7b991; background:#c9985010; border:1px solid #b98b4233; font-size:12px; padding:10px 12px; border-radius:3px; margin:0 0 12px; }
.sc-retry { display:block; border:0; background:none; color:#ecd18b; text-decoration:underline; text-underline-offset:3px; padding:5px 0 0; font-size:12px!important; }
.sc-history { flex:1; min-height:0; overflow:auto; padding:24px; }
.sc-history h3 { color:#e2c481; font:600 18px/1.6 var(--serif); margin:0 0 8px; }
.sc-history-note { color:#938d82; font-size:12px; margin:0 0 22px; }
.sc-history-item { width:100%; display:block; text-align:left; padding:15px 3px; border:0; border-bottom:1px solid #b49a5929; background:none; color:#e8dfcc; }
.sc-history-item span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-history-item small { display:block; color:#928979; margin-top:4px; font-size:10px; }
.sc-history-empty { color:#999184; padding:20px 0; }
.sc-back { border:1px solid #c1a46566; border-radius:3px; padding:6px 12px; color:#d8c08a; background:transparent; margin-top:24px; }
.sc-announcer { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.sc-room [hidden] { display:none!important; }
.sc-unlock { flex:1; min-height:0; overflow:auto; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:26px; }
.sc-unlock > img { opacity:.9; filter:drop-shadow(0 0 18px #d6b25e44); }
.sc-unlock h3 { color:#ecd69f; font:600 21px/1.7 var(--serif); margin:20px 0 10px; }
.sc-unlock p { color:#aaa394; font-size:12px; margin:0 0 24px; }
.sc-unlock form { width:100%; max-width:290px; }
.sc-unlock input { width:100%; background:#121620; color:#eee8db; border:1px solid #b99a5959; border-radius:3px; font:400 16px/1.6 var(--body); padding:11px 14px; }
.sc-unlock input:focus-visible { outline:2px solid #d6b25e; outline-offset:2px; }
.sc-unlock input + label + input { margin-top:10px; }
.sc-unlock button { width:100%; margin-top:12px; padding:12px; border:1px solid #d6b25e; border-radius:3px; background:linear-gradient(120deg,#ead396,#b6914c); color:#251d10; }
.sc-unlock #sc-login-error { color:#dfb486; margin:14px 0 0; }
.sc-unlock small { color:#7e786e; font-size:10px; margin-top:18px; }
.sc-lock { border:0; padding:0; color:#ac9871; background:none; font-size:10px!important; }
@keyframes sc-arrive { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes sc-cursor { 50% { opacity:.25; } }
@media (max-width:640px) {
  .sc-room { inset:auto 0 var(--sc-keyboard-offset,0px); width:100%; height:min(74dvh,800px); max-height:calc(var(--sc-viewport-height,100dvh) - 16px); border-radius:15px 15px 0 0; border-bottom:0; }
  .sc-room::backdrop { background:linear-gradient(180deg,#02040a05,#02040a55 42%,#02040a88); }
  .sc-handle { display:block; flex:none; width:32px; height:3px; margin:9px auto 0; background:#b59b6744; border-radius:3px; }
  .sc-header { padding:14px 18px 13px; gap:12px; }
  .sc-portrait { width:39px; height:44px; }
  .sc-heading h2 { font-size:19px; }
  .sc-heading h2 small { font-size:9px; }
  .sc-eyebrow { font-size:8px; letter-spacing:1.5px; }
  .sc-status { font-size:10px; }
  .sc-tools { gap:0; margin-right:-6px; }
  .sc-icon { width:34px; height:44px; }
  .sc-mode { padding:6px 18px; font-size:10px; }
  .sc-log { padding:20px 20px 14px; }
  .sc-welcome { padding:6px 0 24px; }
  .sc-welcome-mark { width:34px; height:34px; }
  .sc-welcome .sc-welcome-title { font-size:19px; margin-top:8px; }
  .sc-message { margin-bottom:20px; }
  .sc-bottom { padding:0 16px max(13px,env(safe-area-inset-bottom)); }
  .sc-prompts { gap:6px; margin-bottom:10px; }
  .sc-prompt { padding:8px 10px; min-height:38px; font-size:10px!important; }
  .sc-compose { padding:9px 9px 9px 12px; }
  .sc-compose textarea { font-size:16px; padding-top:6px; }
  .sc-send { min-width:42px; height:38px; }
  .sc-footnote { font-size:9px; }
  .sc-footnote .sc-model { font-size:8px; }
  .sc-room.is-keyboard { height:calc(var(--sc-viewport-height) - 12px); }
  .sc-room.is-keyboard .sc-prompts,.sc-room.is-keyboard .sc-footnote,.sc-room.is-keyboard .sc-mode { display:none; }
}
@media (max-width:350px) {
  .sc-heading h2 small { display:none; }
  .sc-header { padding-left:14px; padding-right:12px; }
  .sc-log { padding-left:17px; padding-right:17px; }
  .sc-tools .sc-icon { width:31px; }
  .sc-mode span:last-child { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .sc-room[open],.sc-message.is-writing .sc-message-body::after { animation:none; }
  .sc-log { scroll-behavior:auto; }
}
