/* Live desktop boundary. No selector affects the compact/mobile presentation. */
.desktop-live-nav[hidden], .desktop-live-nav [hidden], .desktop-live-divider[hidden] { display: none; }
.desktop-live-chat-context { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--app-border); }
.desktop-live-action-status:empty { display: none; }
.desktop-live-action-status { color: var(--app-danger); font-size: 12px; }
body.desktop-live-active { display: block; padding: 0; margin: 0; overflow: hidden; }
body.desktop-live-active #app { width: 100%; height: 100dvh; position: relative; background: var(--app-canvas-bg); }
body.desktop-live-active #app > .main.desktop-live-surface,
body.desktop-live-active #app > .desktop-live-host {
  position: absolute; top: 0; left: calc(var(--desktop-live-nav-width) + 5px);
  width: calc(100% - var(--desktop-live-nav-width) - 5px); inline-size: calc(100% - var(--desktop-live-nav-width) - 5px);
  height: 100dvh; block-size: 100dvh; max-width: none; max-height: none; max-block-size: none;
  min-inline-size: 0; max-inline-size: none; min-block-size: 0;
  margin: 0; border-radius: 0; box-shadow: none;
}
body.desktop-live-active #app > .desktop-live-host > .main.desktop-live-surface {
  position: relative;
  width: 100%; inline-size: 100%;
  height: 100%; block-size: 100%;
  max-width: none; max-height: none; max-block-size: none; max-inline-size: none;
  min-width: 0; min-height: 0; min-inline-size: 0; min-block-size: 0;
  margin: 0; border-radius: 0; box-shadow: none;
}
body.desktop-live-active .desktop-live-surface .panel-header { border-radius: 0; }
.desktop-live-nav {
  box-sizing: border-box; position: absolute; inset: 0 auto 0 0; width: var(--desktop-live-nav-width);
  display: flex; flex-direction: column; gap: 12px; padding: 22px 16px 16px;
  background: var(--app-sidebar-bg, var(--app-surface-muted)); color: var(--app-text); font: var(--app-font-body)/1.4 system-ui, sans-serif;
}
.desktop-live-nav * { box-sizing: border-box; }
.desktop-live-brand { font-size: 21px; font-weight: 750; padding: 0 8px 12px; }
.desktop-live-brand span { display: block; font-size: 12px; font-weight: 400; color: var(--app-text-muted); margin-top: 3px; }
.desktop-live-nav button { font: inherit; color: inherit; cursor: pointer; border: 1px solid transparent; border-radius: 9px; padding: 11px 12px; text-align: left; background: transparent; }
.desktop-live-nav button:hover { background: var(--app-primary-soft); }
.desktop-live-nav button:focus-visible, .desktop-live-nav input:focus-visible, .desktop-live-divider:focus-visible { outline: 2px solid var(--app-primary); outline-offset: -2px; }
.desktop-live-nav button:disabled { opacity: .45; cursor: default; }
.desktop-live-nav nav { display: grid; gap: 3px; }
.desktop-live-nav button[aria-current=true] { background: var(--app-primary-soft); border-color: var(--app-border); font-weight: 650; }
.desktop-live-session-heading { display: flex; align-items: center; gap: 8px; }
.desktop-live-nav .desktop-live-icon { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; font-size: 22px; line-height: 1; flex-shrink: 0; }
.desktop-live-session-heading [data-command=refresh] { margin-left: auto; }
.desktop-live-character { color: var(--app-text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-live-nav input { width: 100%; min-width: 0; border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-surface); color: var(--app-text); padding: 10px; font: inherit; }
.desktop-live-status { font-size: 12px; color: var(--app-text-muted); }
.desktop-live-status:empty { display: none; }
.desktop-live-session-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.desktop-live-session-list button { flex-shrink: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-live-nav footer { margin-top: auto; font-size: 11px; color: var(--app-text-muted); padding-top: 12px; border-top: 1px solid var(--app-border); }
.desktop-live-divider { position: absolute; top: 0; bottom: 0; left: var(--desktop-live-nav-width); width: 5px; background: var(--app-border); cursor: col-resize; touch-action: none; z-index: 2; }
.desktop-live-divider:hover { background: var(--app-primary); }
/* Individual chat workspace. The chat controller and its DOM stay shared with
   compact mode; only the desktop presentation changes inside this boundary. */
body.desktop-live-active #chat-panel {
  --desktop-chat-rail-width: 680px;
  --desktop-chat-bubble-width: 560px;
}
body.desktop-live-active #chat-panel #chat-content { min-height: 0; }
body.desktop-live-active #chat-panel #chat-header {
  box-sizing: border-box;
  min-height: 66px;
  padding: 11px 24px;
  box-shadow: 0 1px 0 var(--chat-header-border), 0 5px 18px rgba(15, 23, 42, .06);
  z-index: 12;
}
body.desktop-live-active #chat-panel #chat-header-identity { gap: 11px; }
body.desktop-live-active #chat-panel #chat-header-media {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}
body.desktop-live-active #chat-panel #chat-header-badge { max-width: 360px; }
body.desktop-live-active #chat-panel #chat-header .btn-panel-header {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 9px;
}
body.desktop-live-active #chat-panel #chat-chat {
  box-sizing: border-box;
  gap: 26px;
  padding: 36px max(32px, calc((100% - var(--desktop-chat-rail-width)) / 2)) 28px;
  scrollbar-gutter: stable;
}
body.desktop-live-active #chat-panel #chat-chat > .msg-container {
  max-width: min(82%, var(--desktop-chat-bubble-width));
}
body.desktop-live-active #chat-panel #chat-chat > .msg-container.bot {
  max-width: 100%;
}
body.desktop-live-active #chat-panel #chat-chat > .msg-container.story,
body.desktop-live-active #chat-panel #chat-chat > .msg-container.system-notice,
body.desktop-live-active #chat-panel #chat-chat > .msg-container.chat-date-divider-container,
body.desktop-live-active #chat-panel #chat-chat > .msg-container.chat-shared-divider-container {
  max-width: min(88%, 820px);
}
body.desktop-live-active #chat-panel #chat-chat > .msg-container > .msg {
  padding: 10px 14px;
  line-height: 1.75;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .07);
}
body.desktop-live-active #chat-panel :is(#chat-skill-tray, #chat-attachment-tray) {
  box-sizing: border-box;
  width: min(var(--desktop-chat-rail-width), calc(100% - 48px));
  align-self: center;
  border-inline: 1px solid var(--chat-border);
}
body.desktop-live-active #chat-panel #chat-skill-tray:not([hidden]) {
  min-height: 58px;
  max-height: none;
  padding: 8px 12px;
  border: 1px solid var(--chat-border);
  border-bottom: 0;
  border-radius: 15px 15px 0 0;
  background: var(--chat-surface);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .11);
  backdrop-filter: blur(18px);
}
body.desktop-live-active #chat-panel #chat-skill-tray:not([hidden]) .conversation-control-active-skills::before {
  content: "✦";
  margin-right: 6px;
  color: currentColor;
}
body.desktop-live-active #chat-panel #inputBar {
  --app-tool-dock-size: 42px;
  --app-tool-dock-radius: 10px;
  box-sizing: border-box;
  width: min(var(--desktop-chat-rail-width), calc(100% - 48px));
  flex: 0 0 auto;
  align-self: center;
  margin: 0 auto 18px;
  padding: 10px;
  border: 1px solid var(--chat-border);
  border-radius: 15px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .13), 0 2px 8px rgba(15, 23, 42, .07);
}
body.desktop-live-active #chat-panel #chat-skill-tray:not([hidden]) ~ #inputBar {
  border-radius: 0 0 15px 15px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .14), 0 2px 8px rgba(15, 23, 42, .07);
}
body.desktop-live-active #chat-panel #msgInput {
  min-height: 42px;
  height: 42px;
  max-height: min(240px, 42vh);
  padding: 10px 13px;
  border-radius: 10px;
}
body.desktop-live-active #chat-panel .chat-compose-btn {
  box-shadow: var(--app-shadow-sm, 0 2px 8px rgba(15, 23, 42, .12));
}
/* Voice shares the desktop conversation rail and keeps the mounted media,
   transcript and audio controls intact when crossing the compact breakpoint. */
body.desktop-live-active #voice_mode-panel {
  --desktop-voice-rail-width: 680px;
  --desktop-voice-dock-bg: rgba(18, 23, 29, .94);
  --desktop-voice-dock-border: rgba(255, 255, 255, .18);
}
body.desktop-live-active #voice_mode-panel .voice-mode-shell {
  border-width: 1px;
  border-radius: 0;
}
body.desktop-live-active #voice_mode-panel .voice-mode-topbar {
  grid-template-columns: minmax(0, 1fr) 40px;
  height: 66px;
  min-height: 66px;
  max-height: 66px;
  padding: 10px 24px;
}
body.desktop-live-active #voice_mode-panel .voice-mode-title-wrap {
  grid-column: 1;
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
}
body.desktop-live-active #voice_mode-panel .voice-mode-title {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.desktop-live-active #voice_mode-panel .voice-mode-profile-pill {
  flex: 0 1 auto;
}
body.desktop-live-active #voice_mode-panel #voice_mode-back-btn {
  grid-column: 2;
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 9px;
}
body.desktop-live-active #voice_mode-panel .voice-mode-chat-overlay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  padding-inline: max(24px, calc((100% - var(--desktop-voice-rail-width)) / 2));
}
body.desktop-live-active #voice_mode-panel .voice-mode-transcript {
  grid-column: 1 / -1;
  grid-row: 1;
  gap: 26px;
  padding: 36px 4px 28px;
  scrollbar-gutter: stable;
}
body.desktop-live-active #voice_mode-panel .voice-bubble {
  max-width: min(82%, 560px);
  padding: 10px 14px;
  line-height: 1.75;
}
body.desktop-live-active #voice_mode-panel .voice-bubble-assistant {
  max-width: 100%;
}
body.desktop-live-active #voice_mode-panel .voice-mode-participant-controls {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  justify-content: flex-start;
  overflow-x: auto;
  padding: 10px 14px;
  border: 1px solid var(--desktop-voice-dock-border);
  border-right: 0;
  border-bottom: 0;
  border-radius: 15px 0 0 0;
  background: var(--desktop-voice-dock-bg);
}
body.desktop-live-active #voice_mode-panel .voice-mode-mic-panel {
  grid-column: 2;
  grid-row: 2;
  padding: 10px 14px;
  border: 1px solid var(--desktop-voice-dock-border);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 15px 0 0;
  background: var(--desktop-voice-dock-bg);
}
body.desktop-live-active #voice_mode-panel .voice-mode-participant-controls[hidden] + .voice-mode-mic-panel {
  grid-column: 1 / -1;
  border-left: 1px solid var(--desktop-voice-dock-border);
  border-radius: 15px 15px 0 0;
}
body.desktop-live-active #voice_mode-panel .voice-audio-controls {
  flex: 0 0 auto;
}
body.desktop-live-active #voice_mode-panel .voice-mode-text-composer {
  grid-column: 1 / -1;
  grid-row: 3;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--desktop-voice-dock-border);
  border-radius: 0 0 15px 15px;
  background: var(--desktop-voice-dock-bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
}
body.desktop-live-active #voice_mode-panel .voice-mode-text-input {
  height: 42px;
  border-radius: 10px;
}
body.desktop-live-active #voice_mode-panel .voice-mode-text-send {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 10px;
}
body.desktop-live-active #voice_mode-panel .voice-mode-status {
  grid-column: 1 / -1;
  grid-row: 4;
  border: 0;
  background: transparent;
  padding-block: 10px 14px;
}
/* Keep the default floating preview above the right-hand audio controls;
   the camera drag controller can still supply an explicit position. */
body.desktop-live-active #voice_mode-panel.voice-camera-stage-active .voice-mode-media-wrap,
body.desktop-live-active #voice_mode-panel .voice-camera-preview:not(.camera-stage-mode) {
  top: var(--voice-pip-top, 64px);
  bottom: var(--voice-pip-bottom, auto);
}
body.desktop-live-active #bonds-panel .bonds-panel { max-width: var(--desktop-content-width); margin-inline: auto; padding: 24px; }
body.desktop-live-active #bonds-panel .bond-card { flex-basis: 310px; }
body.desktop-live-active #bonds-panel .bonds-directory { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
body.desktop-live-active .desktop-live-surface .carla-ui-panel-header { border-radius: 0; }

/* Shared desktop panel geometry. Width choice lives in live-panel-policy.js. */
body.desktop-live-active { font-size: var(--app-font-body); color: var(--app-text); }
.desktop-live-surface { --desktop-content-width: 720px; }
body.desktop-live-active #app .desktop-live-surface { background-color: var(--app-canvas-bg); }
.desktop-live-surface[data-desktop-width="reading"] { --desktop-content-width: 760px; }
.desktop-live-surface[data-desktop-width="list"] { --desktop-content-width: 900px; }
.desktop-live-surface[data-desktop-width="collection"] { --desktop-content-width: 1100px; }
.desktop-live-surface[data-desktop-width="narrow"] { --desktop-content-width: 560px; }
.desktop-live-surface[data-desktop-width="auth"] { --desktop-content-width: 480px; }
body.desktop-live-standalone #app > .main.desktop-live-surface {
  left: 0; width: 100%; inline-size: 100%; padding: 32px;
  display: flex; align-items: center; justify-content: center;
}
body.desktop-live-standalone .desktop-live-surface > .app-react-panel {
  width: min(100%, var(--desktop-content-width)); height: auto; max-height: 100%;
  border: 1px solid var(--app-border); border-radius: var(--carla-ui-radius-lg);
}
body.desktop-live-standalone .desktop-live-surface > .app-react-panel .carla-ui-container { border: 0; padding: 0; }
body.desktop-live-active .desktop-live-standard .app-react-panel { isolation: isolate; }
body.desktop-live-active .desktop-live-standard .app-react-panel__content {
  padding: 28px max(24px, calc((100% - var(--desktop-content-width)) / 2));
  scrollbar-gutter: stable both-edges;
}
body.desktop-live-active .desktop-live-standard .app-react-panel__content > .carla-ui-container {
  width: 100%; max-width: var(--desktop-content-width); min-width: 0;
  padding: 24px; margin-inline: auto; border: 1px solid var(--app-border);
  border-radius: var(--carla-ui-radius-lg); background: var(--app-surface);
}
body.desktop-live-active .desktop-live-standard .app-react-panel__footer {
  display: flex; flex-wrap: wrap; justify-content: center;
  padding-inline: max(24px, calc((100% - var(--desktop-content-width)) / 2));
}
body.desktop-live-active .desktop-live-standard .app-react-panel__footer > :is(button, .carla-ui-action-button),
body.desktop-live-active .desktop-live-standard .app-react-panel__footer > div > :is(button, .carla-ui-action-button) {
  width: auto; min-width: 128px; max-width: 100%;
}
body.desktop-live-active .desktop-live-standard :is(.carla-ui-panel-header, .app-react-panel__header) { padding-inline: 30px; }
body.desktop-live-active #app .desktop-live-surface :is(.carla-ui-panel-header__title, .app-react-panel__header, .carla-ui-panel-header) { font-weight: 600; }
body.desktop-live-active .desktop-live-standard :is(input, select, textarea, button) { font-size: var(--app-font-control); }
body.desktop-live-active .desktop-live-standard :is(.carla-ui-field__label, .carla-ui-button, strong, summary) { font-weight: 600; }
body.desktop-live-active .desktop-live-standard .carla-ui-control { padding: 8px 12px; }
body.desktop-live-active .desktop-live-standard .carla-ui-textarea { min-height: 96px; }
body.desktop-live-active .desktop-live-standard .app-react-form { gap: 18px; }
body.desktop-live-active .desktop-live-standard .app-react-form__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
body.desktop-live-active #edit_character_profile-avatar { margin-inline: auto; }
body.desktop-live-active .desktop-live-standard .app-react-menu { gap: 10px; }
body.desktop-live-active .desktop-live-standard .app-react-menu > button { min-height: 58px; grid-template-columns: 32px 1fr 20px; border-radius: var(--carla-ui-radius-md); box-shadow: none; }
body.desktop-live-active .desktop-live-standard .app-react-menu__icon { width: 32px; height: 32px; font-size: 20px; }
body.desktop-live-active .desktop-live-standard .app-react-menu > button:hover { transform: none; }
body.desktop-live-active .desktop-live-standard .app-react-menu > button > strong { font-size: var(--app-font-body); }
body.desktop-live-active .desktop-live-standard .sessions-detail-body { overflow-y: auto; }
body.desktop-live-active .desktop-live-standard .session-card-title { font-size: var(--app-font-body); font-weight: 600; }
body.desktop-live-active .desktop-live-standard .session-card:hover { transform: none; }
body.desktop-live-active .desktop-live-standard .sessions-list-actions { display: flex; width: auto; }
.desktop-live-nav { overflow-y: auto; border-right: 1px solid var(--app-border); }
.desktop-live-nav nav { flex: 0 0 auto; }
.desktop-live-identity { padding: 0 12px; color: var(--app-text); font-size: var(--app-font-title); font-weight: 600; }
.desktop-live-utilities { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--app-border); }
.desktop-live-nav nav button[aria-current=true] { color: var(--app-primary); }
.desktop-live-nav .desktop-live-chat-context { flex: 1 0 240px; }
body.desktop-live-active .desktop-live-standard:not(#edit_character_profile-panel) .app-react-hidden-bg {
  display: block !important; position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; background-color: var(--app-canvas-bg);
  opacity: 1 !important; background-size: cover; background-position: center; pointer-events: none;
}
/* Content surfaces provide contrast; character imagery is never shaded. */
body.desktop-live-active .desktop-live-standard:not(#edit_character_profile-panel) .app-react-panel:has(.app-react-hidden-bg) { background: transparent; }
@media (min-width: 1400px) {
  body.desktop-live-active #edit_character-panel .app-react-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.desktop-live-active #bonds-panel .carla-ui-container { max-width: var(--desktop-content-width); margin-inline: auto; }
body.desktop-live-active .desktop-live-standard .app-react-auth { width: 100%; min-height: 0; max-height: 100%; overflow-y: auto; }
body.desktop-live-active .desktop-live-standard .app-react-auth__card { width: min(100%, var(--desktop-content-width)); }
body.desktop-live-active .desktop-live-standard .app-react-auth__card h1 {
  margin: -24px -24px 10px; padding: 22px; border-radius: var(--carla-ui-radius-lg) var(--carla-ui-radius-lg) 0 0;
  background: var(--app-header-bg); color: var(--app-header-fg); font-size: 22px; font-weight: 600;
}
body.desktop-live-active .desktop-live-standard .login-legal-note { color: var(--app-text-muted); }
body.desktop-live-active .desktop-live-standard .login-legal-note a { color: var(--app-primary); }
body.desktop-live-active .desktop-live-standard .app-react-auth__card :is(button, input) { width: 100%; max-width: none; }
body.desktop-live-active .desktop-live-standard .app-react-panel :is(.carla-ui-panel-header__title, button) { text-shadow: none; }

/* Dialogs share the same surface; each component retains positioning and focus. */
html[data-desktop-shell] :is(.app-react-story-dialog, .app-react-reward-dialog, .app-react-message, .guest-nickname-dialog__window, .voice-settings-dialog) {
  color: var(--app-text); background: var(--app-surface); border-color: var(--app-border);
  border-radius: var(--carla-ui-radius-lg); box-shadow: var(--app-shadow-md); font-size: var(--app-font-body);
}
html[data-desktop-shell] :is(.guest-nickname-dialog__title, .voice-settings-title) { color: var(--app-text); font-size: var(--app-font-display); }
html[data-desktop-shell] :is(.app-react-reward-dialog__eyebrow, .app-react-reward-dialog blockquote) { color: var(--app-primary); }
html[data-desktop-shell] .app-react-dialog-backdrop--reward { background-color: var(--app-canvas-bg); background-image: var(--reward-image, none); }
html[data-desktop-shell] #confirm-dialog-text { font-size: var(--app-font-body); }
html[data-desktop-shell] .voice-settings-header { background: var(--app-header-bg); color: var(--app-header-fg); }
html[data-desktop-shell] .voice-settings-title { color: inherit; }
html[data-desktop-shell] .voice-settings-body { color: var(--app-text); background: var(--app-surface); }
html[data-desktop-shell] .voice-settings-field :is(input:not([type=range]), select) { background: var(--app-input-bg); color: var(--app-text); border-color: var(--app-border); }

/* Collections use available desktop width; item controls remain their owners'. */
body.desktop-live-active .desktop-live-standard :is(.characters-react-list, #story-library-list) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; padding: 0;
}
body.desktop-live-active .desktop-live-standard .characters-react-list > :is(.carla-ui-empty-state, .carla-ui-status) { grid-column: 1 / -1; }
body.desktop-live-active .desktop-live-standard .character-item { grid-template-columns: minmax(0, 1fr) auto; align-content: start; padding: 14px; gap: 12px; }
body.desktop-live-active .desktop-live-standard .character-avatar { grid-column: 1 / -1; width: 100%; height: 220px; border-radius: var(--carla-ui-radius-md); object-position: center 25%; }
body.desktop-live-active .desktop-live-standard .character-actions { grid-column: 2; }
body.desktop-live-active .desktop-live-standard .character-more-btn { color: var(--app-text-muted); }
body.desktop-live-active .desktop-live-standard .character-actions-menu { color: var(--app-text); }
body.desktop-live-active .desktop-live-standard .character-actions-menu button { color: inherit; }
/* Record collections use the same reading density as the conversation. */
body.desktop-live-active .desktop-live-standard .memory-bubble { padding: 14px 16px; gap: 10px; border-radius: var(--carla-ui-radius-md); }
body.desktop-live-active .desktop-live-standard .mem-text { font-size: var(--app-font-body); font-weight: 500; line-height: 1.6; }
body.desktop-live-active .desktop-live-standard .memory-meta { font-size: var(--app-font-caption); }
body.desktop-live-active .desktop-live-standard .reminder-card__schedule { grid-template-columns: auto auto; justify-content: start; gap: 24px; border: 0; border-radius: 0; background: transparent; }
body.desktop-live-active .desktop-live-standard .reminder-card__schedule-item { padding: 0; }
body.desktop-live-active .desktop-live-standard .reminder-card__schedule-item + .reminder-card__schedule-item { border: 0; }
body.desktop-live-active .desktop-live-standard .reminder-card__schedule-item > span { font-weight: 500; letter-spacing: 0; text-transform: none; }
body.desktop-live-active .desktop-live-standard .reminder-card__schedule-item time { font-size: var(--app-font-body); font-weight: 400; }

body.desktop-live-active .desktop-live-standard .app-react-candidate-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
body.desktop-live-active .desktop-live-standard .app-react-candidate-card { grid-template-columns: 64px minmax(0, 1fr); }
body.desktop-live-active .desktop-live-standard .app-react-candidate-card__actions { grid-column: 1 / -1; display: flex; align-items: end; }


/* Enfoque: a contained conversation inside the existing desktop workspace.
   Geometry is shared by all themes. The rose-header/charcoal-sidebar skin belongs to the
   character theme, whose image/video renderers remain the background owners. */
body.desktop-live-active .desktop-live-nav {
  padding: 26px 14px 18px;
  gap: 18px;
}
body.desktop-live-active .desktop-live-brand { font-size: 20px; font-weight: 650; letter-spacing: -.5px; }
body.desktop-live-active .desktop-live-brand span { margin-top: 5px; font-size: 11px; letter-spacing: 0; }
body.desktop-live-active .desktop-live-nav button:not(.desktop-live-icon) { font-size: 13px; font-weight: 400; }
body.desktop-live-active .desktop-live-nav button[aria-current=true] { font-weight: 600; }
body.desktop-live-active .desktop-live-session-heading strong { font-size: var(--app-font-body); font-weight: 600; }
body.desktop-live-active .desktop-live-nav input { padding: 10px 12px; font-size: 12px; }
body.desktop-live-active .desktop-live-divider { background: transparent; }
body.desktop-live-active .desktop-live-divider::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 1px; background: var(--app-border); }
body.desktop-live-active .desktop-live-divider:hover::before { width: 3px; background: var(--app-primary); }
body.desktop-live-active #chat-panel #chat-header,
body.desktop-live-active #voice_mode-panel .voice-mode-topbar { padding-inline: 30px; min-height: 74px; height: 74px; max-height: 74px; box-shadow: none; }
body.desktop-live-active #chat-panel #titleText,
body.desktop-live-active #voice_mode-panel .voice-mode-title { font-size: 17px; font-weight: 600; }
body.desktop-live-active #chat-panel #chat-header-badge { padding: 0; border: 0; background: transparent; box-shadow: none; }
body.desktop-live-active #chat-panel #chat-header-badge::after { display: none; }
body.desktop-live-active #chat-panel #chat-header-media { width: 36px; height: 36px; flex-basis: 36px; border-width: 1px; box-shadow: none; }
body.desktop-live-active #chat-panel #inputBar {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px 38px;
  align-items: end;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 20px;
  --app-tool-dock-size: 38px;
  --app-tool-dock-icon-size: 20px;
  --app-tool-dock-radius: 50%;
}
body.desktop-live-active #chat-panel #msgInput {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-height: 38px;
  height: 38px;
  padding: 9px 3px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
}
body.desktop-live-active #chat-panel #inputBar:focus-within { border-color: var(--chat-accent); }
body.desktop-live-active #chat-panel #msgInput:focus { outline: none; box-shadow: none; }
body.desktop-live-active #chat-panel #attach { grid-column: 1; grid-row: 1; }
body.desktop-live-active #chat-panel #voiceModeToggle { grid-column: 3; grid-row: 1; }
body.desktop-live-active #chat-panel #send { grid-column: 4; grid-row: 1; }
body.desktop-live-active #chat-panel .chat-compose-btn { border: 0; box-shadow: none; }
body.desktop-live-active #chat-panel .chat-compose-btn:hover { transform: none; box-shadow: none; }
body.desktop-live-active #chat-panel #chat-skill-tray:not([hidden]) { border-radius: 20px 20px 0 0; box-shadow: none; padding: 8px 14px; }
body.desktop-live-active #chat-panel #chat-skill-tray:not([hidden]) ~ #inputBar { border-radius: 0 0 20px 20px; }
body.desktop-live-active #chat-panel .msg-container.bot > .msg { padding-inline: 4px; }
body.desktop-live-active #voice_mode-panel .voice-bubble-assistant { padding-inline: 4px; }
body.desktop-live-active #chat-panel .msg,
body.desktop-live-active #voice_mode-panel .voice-bubble,
body.desktop-live-active #voice_mode-panel .voice-mode-text-input { font-size: 13px; }
body.desktop-live-active #chat-panel #chat-chat > .msg-container > .msg,
body.desktop-live-active #voice_mode-panel .voice-bubble { line-height: 1.6; }

/* Shared desktop chrome palette: prototype 01, Header rosa. */
.voice-mode-indicator { display: none; }
body.desktop-live-active #voice_mode-panel .voice-mode-topbar {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
body.desktop-live-active #voice_mode-panel .voice-mode-title-wrap {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
body.desktop-live-active #voice_mode-panel .voice-mode-title { max-width: 100%; }
body.desktop-live-active #voice_mode-panel .voice-mode-indicator {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  padding: 6px 17px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
body.desktop-live-active #voice_mode-panel .voice-mode-indicator svg { width: 21px; height: 21px; }
body.desktop-live-active #voice_mode-panel #voice_mode-back-btn { grid-column: 3; justify-self: end; }

/* Keepsake collections use an open canvas without a second card around the cards. */
body.desktop-live-active :is(#story_rewards-panel, #character-social-panel, #character-social-post-viewer-panel) .app-react-panel__content > .carla-ui-container { padding: 0; border: 0; background: transparent; }