/* An uninterrupted lounge, with the cast at the centre of the conversation. */
body.cast-focus { height: 100dvh; overflow: hidden; background: #fff; }
.cast-focus .app-shell, .cast-focus .main-area, .cast-focus .lounge-grid,
.cast-focus .cast-section { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; max-width: none; display: block; }
.cast-focus .cast-stage { position: absolute; inset: 0; height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.cast-focus .cast-stage:before { display: none; }
.cast-focus .room { background: #fff; background-size: cover; background-position: center; }
body.cast-focus:not([data-background-ready="true"]) .room::before,
body.cast-focus:not([data-background-ready="true"]) .room::after,
body.cast-focus:not([data-background-ready="true"]) .room-foreground,
body.cast-focus:not([data-background-ready="true"]) .cast-stage::after { display: none; }
.cast-focus #cast-canvas { inset: 0; width: 100%; height: 100%; --cast-safe-top: 84px; --cast-safe-bottom: 240px; mask-image: none; }
.cast-focus .cast-model-notice { top: 41%; left: 50%; right: auto; transform: translateX(-50%); width: min(400px, calc(100% - 48px)); }

.lounge-header { position: absolute; inset: 0 0 auto; z-index: 10; height: 82px; display: flex; align-items: center; gap: 32px; padding: 0 32px; background: linear-gradient(180deg, #140e1d9c, #140e1d00); }
.lounge-header nav { display: flex; align-items: center; gap: 5px; margin: 0 auto; }
.cast-focus .nav-item { width: auto; margin: 0; padding: 10px 13px; display: flex; gap: 8px; border-radius: 24px; font-size: 11px; white-space: nowrap; color: #ddcddf; min-height: 40px; }
.cast-focus .nav-item svg { width: 16px; height: 16px; }
.cast-focus .nav-item.active, .cast-focus #conversation-toggle[aria-expanded="true"] { background: #f2d5bb12; color: #f1d1ac; box-shadow: inset 0 0 0 1px #f2d5bb24; }
.cast-focus .nav-item:hover { background: #f2d5bb18; color: #fff0dc; }
.cast-focus .nav-item .count { display: inline-block; margin: 0 0 0 2px; padding: 1px 5px; background: #fff1; color: #d4bfcd; font-size: 9px; }
.lounge-account { min-width: 154px; }
.cast-focus .account { padding: 0; gap: 9px; width: auto; max-width: 210px; margin-left: auto; }
.cast-focus .account-avatar { width: 33px; height: 33px; background: #291d3190; }
.cast-focus .account strong { max-width: 124px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e9dbe6; }
.cast-focus .account small { color: #bda9c4; font-size: 9px; margin-top: 3px; }
.cast-focus .account > [data-icon]:last-child { display: none; }

.cast-focus .stage-top { top: 108px; left: 36px; right: 36px; justify-content: flex-start; gap: 10px; }
.cast-focus .stage-label { background: #261a2d55; border: 1px solid #e6ccdd20; padding: 8px 11px; font-size: 10px; color: #e5d8e2; backdrop-filter: blur(16px); }
.cast-focus .stage-top .stage-icon { width: 31px; height: 31px; }
.cast-identity { position: absolute; z-index: 3; left: 38px; top: 24%; max-width: 260px; text-shadow: 0 2px 24px #180c20; pointer-events: none; }
.cast-identity:before { content: ""; position: absolute; z-index: -1; inset: -35px -48px; background: radial-gradient(ellipse at 35% 50%, #160d1bb8, #160d1b24 54%, transparent 75%); pointer-events: none; }
.lounge-kicker { color: #d6bda9; font-size: 11px; letter-spacing: .12em; margin-bottom: 19px; }
.cast-focus .cast-name { font-size: clamp(40px, 4.4vw, 64px); letter-spacing: .12em; display: flex; align-items: baseline; gap: 14px; line-height: 1.3; }
.cast-focus .cast-age { font-size: 10px; letter-spacing: .02em; padding: 3px 7px; border-color: #e2bbcb1c; }
.cast-description { color: #d9c3d1; font-size: 11px; margin-top: 13px; letter-spacing: .06em; }
.identity-line { display: block; width: 38px; height: 1px; margin-top: 23px; background: linear-gradient(90deg, #e2bc92, #e2bc9200); }
.cast-focus .stage-actions { position: absolute; z-index: 5; bottom: 36px; right: 36px; display: flex; gap: 10px; }
.cast-focus .stage-icon { width: 40px; height: 40px; border-radius: 50%; background: #23192b70; backdrop-filter: blur(18px); }
.cast-focus .stage-icon svg { width: 17px; height: 17px; }

.cast-details { position: absolute; z-index: 4; left: 36px; bottom: 102px; width: 190px; }
.cast-focus .cast-options { display: flex; flex-direction: column; border: 1px solid #dfb7cf1f; background: #24192a66; backdrop-filter: blur(22px); border-radius: 14px; margin: 0; box-shadow: 0 12px 45px #0a06121a; overflow: hidden; }
.cast-focus .cast-options button { display: flex; align-items: center; width: 100%; padding: 12px 14px; gap: 11px; text-align: left; }
.cast-focus .cast-options button + button { border: 0; border-top: 1px solid #dfb7cf14; }
.cast-focus .cast-options button > span:nth-child(2) { min-width: 0; flex: 1; }
.cast-focus .cast-options small { display: block; font-size: 9px; color: #bda7c4; margin-bottom: 4px; }
.cast-focus .cast-options strong { display: block; font-size: 11px; max-width: 118px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast-focus .option-icon svg { width: 17px; height: 17px; }
.cast-focus .cast-options button > [data-icon] svg { width: 12px; height: 12px; color: #a58baf; }
.cast-focus .model-preview-link { font-size: 9px; color: #c9afc5; padding: 6px 7px; margin: 0; border: 0; justify-content: flex-start; }

.conversation-dock { position: absolute; z-index: 6; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(660px, calc(100% - 540px)); }
.reply-content { position: relative; margin: 0 0 16px; padding: 0 22px; text-align: center; color: #fff1ef; text-shadow: 0 2px 15px #0c071e, 0 1px 4px #0c071e; }
.reply-content:has(.latest-speech-replay:not([hidden])) { padding-right: 54px; }
.latest-speech-replay { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #ead4b53d; border-radius: 50%; color: #f1d7b3; background: #231a2b8c; box-shadow: 0 3px 12px #0c071e26; backdrop-filter: blur(12px); transition: background .15s, border-color .15s; }
.latest-speech-replay svg { width: 20px; height: 20px; }
.latest-speech-replay:hover:not(:disabled) { background: #6b4b4b9c; border-color: #f1d7b38c; }
.latest-speech-replay:focus-visible { outline: 2px solid #f1d7b3; outline-offset: 3px; }
.latest-speech-replay:disabled { opacity: .4; }
.reply-mark { position: absolute; left: 0; top: -15px; font-family: var(--serif); font-size: 43px; color: #eac6a495; font-weight: 400; }
#current-reply { font-family: var(--serif); font-size: calc(16px * var(--reply-text-scale, 1)); line-height: 1.85; letter-spacing: .035em; max-height: 118px; overflow-y: auto; overflow-wrap: anywhere; white-space: normal; }
.reply-content:has(#current-reply[hidden]):has(#caption[hidden]) { min-height: 44px; }
.reply-content:has(#current-reply[hidden]):has(#caption[hidden]) .reply-mark { display: none; }
.reply-content:has(#current-reply[hidden]):has(#caption[hidden]):not(:has(.latest-speech-replay:not([hidden]))) { display: none; }
.cast-focus .caption { position: static; inset: auto; transform: none; width: auto; max-width: none; max-height: 118px; overflow-y: auto; overflow-wrap: anywhere; white-space: normal; font-family: var(--serif); font-size: calc(16px * var(--reply-text-scale, 1)); line-height: 1.85; letter-spacing: .035em; background: none; border: 0; box-shadow: none; padding: 0; }
/* Keep touch/wheel scrolling without a fading scrollbar or a width change.
   On-stage captions collapse paragraph whitespace; saved history stays intact. */
#current-reply, .cast-focus .caption { scrollbar-width: none; overflow-anchor: none; }
#current-reply::-webkit-scrollbar, .cast-focus .caption::-webkit-scrollbar { display: none; width: 0; height: 0; }
.reply-content:has(#caption:not([hidden])) #current-reply { display: none; }
.cast-focus .chat-error { margin: 0 0 10px; padding: 11px 14px; border: 1px solid #d79ba445; border-radius: 12px; background: #37212eee; color: #f1cbd1; font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
.cast-focus .thinking { justify-content: center; color: #eed5e7; padding: 0 0 10px; font-size: 10px; text-shadow: 0 1px 6px #140a20; }
.cast-focus .chat-composer { border: 1px solid #edd5e52c; padding: 10px; background: #2218299e; backdrop-filter: blur(28px); border-radius: 20px; box-shadow: 0 12px 50px #0a061a38, inset 0 1px 0 #f4d8ea0a; }
.reply-suggestions { margin: 0 0 10px; padding: 2px 3px 10px; border-bottom: 1px solid #e7c6d51a; }
/* Keep the candidate row in layout while speech is playing, so revealing it
   cannot push the reply upward. Visibility also keeps it out of focus and AX. */
.reply-suggestions[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.reply-suggestions-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; min-height: 36px; }
.reply-suggestion { min-height: 36px; padding: 7px 10px; border: 1px solid #ddc2af38; border-radius: 11px; background: #f6d5b90b; color: #efded6; font-size: 11px; line-height: 1.65; text-align: center; overflow-wrap: anywhere; transition: background .15s, border-color .15s; }
.reply-suggestion:hover:not(:disabled) { background: #efc49e20; border-color: #e7c5a46b; }
.reply-suggestion:focus-visible { outline: 2px solid #e6c6a2; outline-offset: 2px; }
.reply-suggestion:disabled { opacity: .45; cursor: default; }
.cast-focus #chat-form { padding: 10px 12px 8px; border: 1px solid #edd5e566; background: #160f248c; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 8px; border-radius: 14px; transition: border-color .15s, box-shadow .15s, background .15s; }
.cast-focus #chat-form:focus-within { border-color: #e6c6a2; background: #201529b3; box-shadow: 0 0 0 2px #e6c6a226; }
.cast-focus #message { min-width: 0; font-size: 13px; min-height: 32px; line-height: 1.8; max-height: 96px; padding: 5px 0 2px; caret-color: #ead4b5; }
.cast-focus #message:focus-visible { outline: none; }
.cast-focus #message::placeholder { color: #ba9ec1; }
.cast-focus .composer-bottom { gap: 7px; align-self: end; padding-bottom: 1px; }
.cast-focus .composer-bottom .icon-button { width: 34px; height: 34px; color: #d8bedf; }
.message-feedback { display:flex; align-items:baseline; justify-content:flex-end; gap:12px; margin-top:3px; }
.cast-focus .message-feedback { grid-column:1 / -1; }
.cast-focus #input-hint { display:inline; margin-right:auto; color:#c0a8c6; font-size:10px; line-height:1.6; }
.cast-focus #input-hint:empty { display:none; }
#message-count { color:#c5b2c5; font-size:10px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.message-length-error { margin:0; padding:3px 0 2px; color:#f0b5c0; font-size:11px; line-height:1.6; }
.cast-focus .message-length-error { grid-column:1 / -1; }
#chat-form[data-over-limit="true"] #message-count { color:#f0b5c0; }
.cast-focus #chat-form[data-over-limit="true"] { outline:1px solid #e29eac66; outline-offset:3px; }
.cast-focus .send-button { width: 35px; height: 35px; border-radius: 50%; margin-left: 0; background: #e6c6a2; color: #382535; }
.cast-focus .send-button svg { width: 17px; height: 17px; }
.conversation-tools { display: flex; justify-content: flex-end; padding: 5px 4px 0; }
.cast-focus .log-reset-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 5px 10px; border: 1px solid #dfc2d322; border-radius: 14px; color: #d2b9d0; font-size: 10px; line-height: 1.5; white-space: nowrap; }
.cast-focus .log-reset-button svg { width: 12px; height: 12px; }
.cast-focus .log-reset-button:hover { color: #f4d8e1; background: #dfc2d312; border-color: #dfc2d344; }
.history-reset { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 17px; border-top: 1px solid #dfc2d31a; flex-shrink: 0; }
.history-reset p { color: #b7a0bd; font-size: 9px; line-height: 1.7; }
.reset-log-modal { width: 460px; }
.reset-log-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.reset-log-actions .secondary-button { min-height: 42px; padding-inline: 17px; }
.cast-focus .chat-disclosure { margin-top: 9px; color: #bba5be; font-size: 9px; text-shadow: 0 1px 5px #140a20; }

.cast-focus .chat-panel { position: absolute; z-index: 20; top: 94px; bottom: 100px; right: 24px; width: min(390px, calc(100% - 32px)); height: auto; min-height: 0; display: flex; flex-direction: column; border-radius: 18px; border: 1px solid #e0bfd238; background: #211829f0; backdrop-filter: blur(26px); box-shadow: 0 20px 80px #07041055; }
.cast-focus .chat-header { padding: 17px; gap: 9px; }
.cast-focus .chat-header h2 { font-size: 12px; }
.cast-focus .chat-header > .icon-button { margin-left: 0; }
.cast-focus #chat-menu { margin-left: auto; }
.cast-focus .chat-avatar { width: 32px; height: 36px; }
.cast-focus .chat-log { padding: 18px; }
.cast-focus .message-bubble { font-size: 12px; }
.cast-focus .chat-message { margin-bottom: 22px; }
.cast-focus .welcome-card { padding: 18px 0; }
.lounge-footer { position: absolute; z-index: 5; bottom: 28px; left: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cast-focus .connection { padding: 0; border: 0; font-size: 9px; color: #c6afc9; gap: 7px; }
.cast-focus .connection .icon-button { display: inline-flex; width: 24px; height: 24px; margin-left: 2px; }
.cast-focus #voice-status { display: inline; }
.lounge-footer #privacy-button { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #b59bba; padding: 0; }
.lounge-footer #privacy-button svg { width: 11px; height: 11px; }
.cast-focus .toast { left: 50%; bottom: 135px; max-width: calc(100% - 32px); }
.cast-focus .modal::backdrop { background: #0c0814aa; backdrop-filter: blur(12px); }

@media (max-width: 1180px) {
  .lounge-header { padding-inline: 24px; gap: 18px; }
  .cast-focus .nav-item { padding-inline: 10px; }
  .cast-focus .lounge-home { display: none; }
  .lounge-account { min-width: 125px; }
  .cast-focus .account strong { max-width: 100px; }
  .cast-focus .stage-top, .cast-identity, .cast-details, .lounge-footer { left: 26px; }
  .cast-focus .stage-top { right: 26px; }
  .cast-details { width: 170px; }
  .conversation-dock { width: min(620px, calc(100% - 440px)); }
  .cast-focus .stage-actions { right: 26px; }
}
@media (max-width: 940px) {
  .lounge-footer { display: none; }
  .cast-focus .nav-item { font-size: 10px; padding-inline: 10px; gap: 6px; }
  .lounge-account { min-width: 0; }
  .cast-focus .account > span:not(.account-avatar) { display: none; }
  .cast-focus .stage-top { top: 95px; }
  .cast-identity { top: 25%; }
  .cast-focus .cast-name { font-size: 44px; }
  .cast-details { width: 154px; top: 47%; bottom: auto; }
  .cast-focus .cast-options button { padding: 11px; gap: 8px; }
  .cast-focus .cast-options strong { max-width: 95px; font-size: 10px; }
  .cast-focus .cast-options .option-icon { display: none; }
  .conversation-dock { width: min(600px, calc(100% - 48px)); left: 50%; right: auto; transform: translateX(-50%); }
  .cast-focus .stage-actions { top: 44%; bottom: auto; right: 24px; flex-direction: column; }
  .cast-focus .chat-panel { bottom: 110px; }
  #current-reply, .cast-focus .caption { font-size: calc(15px * var(--reply-text-scale, 1)); }
}
@media (max-width: 640px) {
  .lounge-header { height: 66px; padding: max(10px, env(safe-area-inset-top)) 16px 8px; gap: 10px; }
  .lounge-header nav { gap: 1px; margin: 0 0 0 auto; }
  .cast-focus .nav-item { width: 34px; min-height: 36px; padding: 8px; justify-content: center; }
  .cast-focus .nav-text, .cast-focus .nav-item .count { display: none; }
  .cast-focus .nav-item svg { width: 17px; height: 17px; }
  .cast-focus .account-avatar { width: 29px; height: 29px; }
  .cast-focus .stage-top { top: 76px; left: auto; right: 16px; }
  .cast-focus .stage-label { font-size: 9px; padding: 7px 9px; }
  .cast-focus .stage-top .stage-icon { display: none; }
  .cast-identity { top: 77px; left: 20px; }
  .cast-identity:before { inset: -16px -28px; background: radial-gradient(ellipse at 35% 50%, #160d1b80, transparent 76%); }
  .lounge-kicker, .identity-line, .cast-focus .cast-age { display: none; }
  .cast-focus .cast-name { font-size: 29px; letter-spacing: .09em; line-height: 1.2; }
  .cast-description { font-size: 9px; margin-top: 7px; }
  .cast-details { display: none; }
  .cast-focus #cast-canvas { --cast-safe-top: 126px; --cast-safe-bottom: 245px; }
  .reply-suggestions { margin-bottom: 7px; padding-bottom: 8px; }
  .reply-suggestions-list { gap: 5px; min-height: 44px; }
  .reply-suggestion { min-height: 44px; padding: 6px 7px; font-size: 10px; line-height: 1.55; }
  .cast-focus .stage-actions { top: 44%; bottom: auto; right: 15px; gap: 7px; }
  .cast-focus .stage-icon { width: 33px; height: 33px; }
  .cast-focus .stage-icon svg { width: 15px; height: 15px; }
  .conversation-dock { left: 14px; right: 14px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; transform: none; }
  .reply-content { margin-bottom: 12px; padding-inline: 17px; }
  .reply-mark { font-size: 33px; top: -10px; }
  #current-reply, .cast-focus .caption { font-size: calc(14px * var(--reply-text-scale, 1)); line-height: 1.8; max-height: 101px; }
  .cast-focus .chat-composer { padding: 8px; border-radius: 18px; }
  .cast-focus #chat-form { padding: 8px 10px 6px; gap: 5px; }
  .cast-focus #message { font-size: 16px; min-height: 35px; max-height: 72px; padding-top: 3px; }
  .cast-focus .composer-bottom { gap: 2px; }
  .cast-focus .composer-bottom .icon-button { width: 32px; height: 34px; }
  .cast-focus .suggestions { justify-content: flex-start; padding-left: 4px; }
  .cast-focus .suggestions button { font-size: 9px; padding: 5px 10px; }
  .cast-focus .chat-disclosure { margin-top: 7px; font-size: 8px; }
  .lounge-footer { display: none; }
  .cast-focus .chat-panel { top: 70px; right: 10px; bottom: 12px; width: calc(100% - 20px); background: #211829fa; }
  .cast-focus.history-open .conversation-dock { visibility: hidden; }
  .cast-focus .chat-header { padding: 15px; }
  .cast-focus .toast { bottom: 120px; }
}
@media (max-height: 620px) {
  .cast-focus #cast-canvas { --cast-safe-top: 60px; --cast-safe-bottom: 150px; }
  .cast-focus .stage-top { top: 72px; }
  .cast-identity { top: 135px; }
  .cast-details { display: none; }
  .conversation-dock { bottom: 10px; }
  .reply-content { margin-bottom: 7px; }
  #current-reply, .cast-focus .caption { max-height: 68px; font-size: calc(13px * var(--reply-text-scale, 1)); }
  .cast-focus .chat-disclosure, .cast-focus .suggestions { display: none; }
  .cast-focus .stage-actions { top: 28%; bottom: auto; }
  .cast-focus .chat-panel { top: 72px; bottom: 12px; }
}
@media (max-width: 380px) {
  .lounge-header { padding-inline: 12px; gap: 7px; }
  .cast-focus .nav-item { width: 31px; padding-inline: 7px; }
}