:root {
  color-scheme: dark;
  --bg: #101112;
  --bg-soft: #17191b;
  --panel: rgba(24, 26, 28, 0.92);
  --panel-strong: rgba(30, 33, 36, 0.96);
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.2);
  --text: #f3f1ec;
  --muted: #a7abae;
  --accent: #8bd8c7;
  --accent-strong: #f1b46c;
  --danger: #ff8c78;
  --ok: #9ce2a2;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
  --radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  background: #101112;
  color: var(--text);
}

body {
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(139, 216, 199, 0.08), transparent 30%),
    linear-gradient(135deg, #101112 0%, #151719 48%, #111415 100%);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding: max(14px, env(safe-area-inset-top)) clamp(16px, 2.6vw, 34px) 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(15, 16, 17, 0.86);
  backdrop-filter: blur(18px);
  z-index: 5;
  flex: 0 0 auto;
}

.brand-block {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(1.18rem, 2.4vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: 0;
}

h1 span {
  color: var(--muted);
  font-weight: 600;
}

h2 {
  font-size: 0.96rem;
  letter-spacing: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.avatar-picker { display:grid; gap:4px; color:var(--muted); font-size:.7rem; }
.avatar-picker select { min-width:190px; min-height:42px; padding:0 34px 0 12px; border:1px solid var(--line-strong); border-radius:var(--radius); color:var(--text); background:#222629; }
.demo-button { width:calc(100% - 28px); min-height:42px; margin:0 14px 12px; border:1px solid rgba(139,216,199,.4); border-radius:var(--radius); color:var(--text); background:rgba(139,216,199,.12); }
.demo-button:disabled { opacity:.4; cursor:not-allowed; }
.analysis-section { display:grid; gap:12px; }
#readinessRating { color:var(--muted); font-size:.78rem; }
#readinessRating.ready { color:var(--ok); }
#readinessRating.partial { color:var(--accent-strong); }
#readinessRating.not-ready { color:var(--danger); }
.readiness-checks { display:flex; flex-wrap:wrap; gap:6px; }
.readiness-checks span { padding:5px 8px; border:1px solid var(--line); border-radius:999px; font-size:.7rem; color:var(--muted); }
.readiness-checks .ok { color:var(--ok); border-color:rgba(156,226,162,.35); }
.analysis-lists { display:grid; gap:6px; }
.analysis-lists p { color:var(--muted); font-size:.74rem; line-height:1.4; overflow-wrap:anywhere; }
.analysis-lists span { color:var(--text); }
.behavior-section { display:grid; gap:12px; }
.behavior-toggles { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.behavior-toggles label { display:flex; align-items:center; gap:7px; padding:9px; border:1px solid var(--line); border-radius:var(--radius); font-size:.76rem; }
.behavior-toggles input { accent-color:var(--accent); }
.behavior-field { display:grid; gap:7px; color:var(--muted); font-size:.76rem; }
.behavior-field>span { display:flex; justify-content:space-between; }
.behavior-field select { width:100%; min-height:40px; padding:0 10px; border:1px solid var(--line); border-radius:var(--radius); color:var(--text); background:var(--bg-soft); }
.behavior-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.behavior-actions button,#greetingButton,.pause-motion { min-height:40px; border:1px solid var(--line); border-radius:var(--radius); color:var(--text); background:rgba(255,255,255,.05); }
.personality-card { padding:10px; border:1px solid var(--line); border-radius:var(--radius); color:var(--muted); font-size:.76rem; }
.personality-card summary { cursor:pointer; color:var(--text); }
.personality-card p { margin:8px 0 0; line-height:1.45; }
.pause-motion[aria-pressed="true"] { border-color:rgba(255,140,120,.55); color:var(--danger); background:rgba(255,140,120,.1); }
.speech-section { display:grid; gap:12px; }
.speech-section textarea { width:100%; resize:vertical; min-height:88px; padding:10px; border:1px solid var(--line); border-radius:var(--radius); color:var(--text); background:var(--bg-soft); line-height:1.45; }
.speech-field { display:grid; gap:7px; color:var(--muted); font-size:.76rem; }
.speech-field>span { display:flex; justify-content:space-between; }
.speech-field select { width:100%; min-height:40px; padding:0 10px; border:1px solid var(--line); border-radius:var(--radius); color:var(--text); background:var(--bg-soft); }
.speech-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.speech-actions button { min-height:42px; border:1px solid var(--line); border-radius:var(--radius); color:var(--text); background:rgba(255,255,255,.05); }
#speakButton { border-color:rgba(139,216,199,.45); background:rgba(139,216,199,.12); }
#pipelineTestButton, #timelineOnlyTestButton { border-color:rgba(246,190,93,.5); background:rgba(246,190,93,.1); }
.pipeline-test-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pipeline-test-options label { display:grid; gap:5px; color:var(--muted); font-size:.72rem; }
.pipeline-test-options select { min-height:36px; padding:0 8px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--bg-soft); }
.pipeline-test-options .pipeline-checkbox { display:flex; align-items:center; gap:7px; padding-top:18px; }
.pipeline-test-options input { accent-color:var(--accent); }
.speech-actions button:disabled { opacity:.4; cursor:not-allowed; }
.speech-visemes { color:var(--muted); font-size:.72rem; line-height:1.4; overflow-wrap:anywhere; }
[hidden] { display: none !important; }
body:not(.inspection-mode) .diagnostic-only { display: none !important; }
.speech-heading-actions { display:flex; align-items:center; gap:8px; }
.config-toggle { display:inline-grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:50%; color:var(--text); background:rgba(255,255,255,.06); font-size:1rem; }
.config-toggle[aria-expanded="true"] { border-color:rgba(139,216,199,.5); color:var(--accent); background:rgba(139,216,199,.12); }
.configuration-panel { display:grid; gap:12px; }
.inspection-mode-toggle { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.035); }
.inspection-mode-toggle span { display:grid; gap:3px; }
.inspection-mode-toggle small { color:var(--muted); line-height:1.35; }
.inspection-mode-toggle input { width:20px; height:20px; flex:0 0 auto; accent-color:var(--accent); }
.diagnostic-panel { max-height:45dvh; overflow:auto; }
.diagnostic-panel:empty { display:none; }
.diagnostic-panel .pipeline-debug { position:static; width:100%; max-height:none; overflow:visible; pointer-events:auto; background:rgba(12,14,15,.72); }
body:not(.inspection-mode) .speech-actions { grid-template-columns:1fr 1fr; }
.face-action-panel, .face-motion-config { display:grid; gap:12px; }
.face-action-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.face-action-buttons button { min-height:40px; padding:6px 9px; border:1px solid var(--line); border-radius:var(--radius); color:var(--text); background:rgba(255,255,255,.05); }
.face-action-buttons button:hover { border-color:rgba(139,216,199,.45); background:rgba(139,216,199,.09); }
.face-action-diagnostics { display:grid; gap:7px; padding:10px; border:1px solid var(--line); border-radius:var(--radius); color:var(--muted); font:0.7rem/1.4 ui-monospace,Consolas,monospace; }
.face-action-diagnostics span { display:grid; grid-template-columns:minmax(92px,auto) minmax(0,1fr); gap:8px; }
.face-action-diagnostics b { color:var(--text); overflow-wrap:anywhere; }
.face-action-diagnostics small { color:var(--accent-strong); overflow-wrap:anywhere; }
.command-diagnostic-panel, .command-config-panel { display:grid; gap:12px; }
.command-config-toggles { display:grid; gap:8px; }
.command-config-toggles label { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.035); }
.command-config-toggles span { display:grid; gap:3px; }
.command-config-toggles small { color:var(--muted); line-height:1.35; }
.command-config-toggles input { width:20px; height:20px; flex:0 0 auto; accent-color:var(--accent); }
.action-command-toast { position:absolute; z-index:7; top:14px; left:50%; max-width:calc(100% - 28px); padding:9px 14px; transform:translateX(-50%); border:1px solid rgba(139,216,199,.48); border-radius:999px; color:#eafffa; background:rgba(25,71,62,.9); box-shadow:0 10px 28px rgba(0,0,0,.26); font-size:.76rem; font-weight:700; text-align:center; pointer-events:none; backdrop-filter:blur(12px); }
.lip-config-section { display:grid; gap:12px; }
.lip-config-range { display:grid; gap:6px; color:var(--muted); font-size:.76rem; }
.lip-config-range>span { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lip-config-range output { color:var(--accent); font-variant-numeric:tabular-nums; }
.lip-config-range input[type=range] { width:100%; accent-color:var(--accent); }
.lip-config-switches { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lip-config-switches label { display:flex; align-items:center; gap:7px; padding:9px; border:1px solid var(--line); border-radius:var(--radius); color:var(--muted); font-size:.74rem; }
.lip-config-switches input { flex:0 0 auto; accent-color:var(--accent); }
.lip-config-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lip-config-actions button { min-height:40px; border:1px solid var(--line); border-radius:var(--radius); color:var(--text); background:rgba(255,255,255,.05); }
.lip-config-actions button:last-child { border-color:rgba(139,216,199,.4); background:rgba(139,216,199,.1); }
.speech-provider-debug { display:grid; grid-template-columns:1fr 1fr; gap:7px 10px; margin:0; padding:10px; border:1px solid var(--line); border-radius:var(--radius); color:var(--muted); font-size:.72rem; }
.speech-provider-debug legend { padding:0 5px; color:var(--text); font-weight:700; }
.speech-provider-debug label { display:flex; align-items:center; gap:6px; }
.speech-provider-debug input { accent-color:var(--accent); }
.speech-provider-debug label:has(input:disabled) { opacity:.55; }
.speech-provider-debug p,.speech-provider-debug>span { grid-column:1 / -1; }
.speech-provider-debug strong { color:var(--accent); }
.speech-provider-debug>span { font-size:.68rem; }
.speech-provider-debug .azure-token-field { grid-column:1 / -1; display:grid; gap:5px; }
.azure-token-field input { min-height:36px; padding:0 9px; border:1px solid var(--line); border-radius:7px; color:var(--text); background:var(--bg-soft); }
.token-actions, .speech-config-actions { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.token-actions button, .speech-config-actions button { min-height:36px; padding:6px 8px; border:1px solid var(--line); border-radius:7px; color:var(--text); background:rgba(255,255,255,.05); font-size:.7rem; }
.token-security-note { grid-column:1 / -1; color:var(--muted); font-size:.64rem; line-height:1.4; }
.speech-config-restore { grid-column:1 / -1; display:grid; gap:5px; padding:9px; border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:.68rem; }
.speech-config-restore span { display:flex; justify-content:space-between; gap:8px; }
.speech-config-restore b { color:var(--text); }
.speech-config-restore small { color:var(--accent-strong); overflow-wrap:anywhere; }
#azureConnectionTestButton { grid-column:1 / -1; min-height:38px; border:1px solid rgba(246,190,93,.5); border-radius:var(--radius); color:var(--text); background:rgba(246,190,93,.1); }
#azureConnectionTestButton:disabled { opacity:.5; cursor:wait; }
#azureDiagnostics { grid-column:1 / -1; max-height:260px; margin:0; padding:9px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:#101214; font:0.66rem/1.4 ui-monospace,Consolas,monospace; }

.file-button,
.secondary-button,
.expression-buttons button {
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  overflow: hidden;
}

.file-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.secondary-button {
  padding: 0 14px;
}

.file-button:hover,
.secondary-button:hover,
.expression-buttons button:not(:disabled):hover {
  border-color: rgba(139, 216, 199, 0.55);
  background: rgba(139, 216, 199, 0.12);
}

.file-button:active,
.secondary-button:active,
.expression-buttons button:not(:disabled):active {
  transform: translateY(1px);
}

.lab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 14px clamp(12px, 2vw, 24px) max(14px, env(safe-area-inset-bottom));
}

.viewport-panel,
.inspector {
  min-height: 0;
}

.viewport-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 38%),
    #141719;
  box-shadow: var(--shadow);
}

.viewer {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  outline: none;
  touch-action: none;
}

.viewer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.camera-toolbar {
  position: absolute;
  z-index: 5;
  top: 14px;
  left: 50%;
  display: grid;
  gap: 8px;
  width: min(760px, calc(100% - 28px));
  transform: translateX(-50%);
  pointer-events: none;
}

.camera-presets,
.camera-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  pointer-events: auto;
}

.camera-presets button {
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--text);
  background: rgba(18, 19, 20, 0.82);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(14px);
}

.camera-presets button:hover {
  border-color: var(--line-strong);
}

.camera-presets button.is-active {
  border-color: rgba(139, 216, 199, 0.72);
  color: #eafffa;
  background: rgba(43, 92, 82, 0.88);
}

.camera-options {
  font-size: 0.76rem;
  color: var(--muted);
}

.camera-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(18, 19, 20, 0.68);
  backdrop-filter: blur(10px);
}

.camera-options input {
  accent-color: var(--accent);
}

.viewer .mobile-speak-button {
  display: none;
}

.pipeline-debug {
  position: absolute;
  z-index: 7;
  top: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 12px;
  padding: 10px 12px;
  border: 1px solid rgba(246, 190, 93, .42);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(12, 14, 15, .84);
  font: 0.7rem/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.pipeline-debug[hidden] { display:none; }
.pipeline-debug strong, .pipeline-debug small { grid-column:1 / -1; }
.pipeline-debug strong, .pipeline-debug b { color:var(--text); }
.pipeline-debug small { max-width:280px; color:#f6be5d; }

.drop-overlay {
  position: absolute;
  inset: 16px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(139, 216, 199, 0.46);
  border-radius: var(--radius);
  background: rgba(16, 17, 18, 0.72);
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.985);
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 8;
}

.viewer.is-dragging .drop-overlay {
  opacity: 1;
  transform: scale(1);
}

.drop-overlay div {
  display: grid;
  gap: 8px;
  padding: 22px;
  max-width: 460px;
  text-align: center;
}

.drop-overlay strong {
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
}

.drop-overlay span,
.muted-copy,
.empty-state {
  color: var(--muted);
  line-height: 1.45;
}

.status-message {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  display: none;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(18, 19, 20, 0.88);
  color: var(--text);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.status-message.is-visible {
  display: block;
}

.status-message.error {
  border-color: rgba(255, 140, 120, 0.55);
  color: #ffd7ce;
}

.status-message.info {
  border-color: rgba(139, 216, 199, 0.42);
}

.inspector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 24px;
}

.panel-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22);
}

.panel-section.compact {
  padding: 14px;
}

.panel-section:not(.compact) {
  padding: 0;
}

.panel-section.grow {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 0;
}

.panel-section.compact .section-heading {
  padding: 0;
}

.sticky-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-strong);
}

.state-pill,
.count-badge,
.morph-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.state-pill.ok {
  border-color: rgba(156, 226, 162, 0.5);
  color: var(--ok);
}

.state-pill.error {
  border-color: rgba(255, 140, 120, 0.5);
  color: var(--danger);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.metrics-grid div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.metrics-grid span,
.model-details dt,
.morph-meta {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.metrics-grid strong {
  display: block;
  margin-top: 3px;
  font-size: 1rem;
  line-height: 1.1;
  word-break: break-word;
}

.model-details {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.model-details div {
  display: grid;
  gap: 3px;
}

.model-details dd {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  word-break: break-word;
}

.expression-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 14px 10px;
}

.expression-buttons button {
  padding: 0 10px;
  min-width: 0;
}

.expression-buttons button:disabled {
  cursor: not-allowed;
  color: rgba(243, 241, 236, 0.35);
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}

.muted-copy {
  padding: 0 14px 14px;
  font-size: 0.86rem;
}

.morph-list {
  height: auto;
  overflow: visible;
  padding: 12px;
}

.empty-state {
  padding: 6px 2px 16px;
  font-size: 0.9rem;
}

.morph-control {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.morph-control:first-child {
  padding-top: 0;
}

.morph-control:last-child {
  border-bottom: 0;
}

.morph-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.morph-name {
  min-width: 0;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

.morph-value {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.morph-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.morph-tag {
  min-height: 20px;
  padding: 1px 7px;
  font-size: 0.68rem;
}

.morph-tag.blink {
  color: #b6d9ff;
}

.morph-tag.jaw {
  color: var(--accent-strong);
}

.morph-tag.smile {
  color: #ffe08f;
}

.morph-tag.pucker {
  color: #dfb6ff;
}

.morph-range-row {
  display: grid;
  grid-template-columns: 1fr 40px;
  align-items: center;
  gap: 10px;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.morph-reset {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.morph-reset:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

@media (max-width: 1100px) {
  .lab-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
  }
}

@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  .app-shell {
    min-height: 100dvh;
    height: auto;
    overflow: visible;
  }

  .lab-layout {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 76px);
    overflow: visible;
  }

  .viewport-panel {
    min-height: 62dvh;
    flex: 0 0 62dvh;
  }

  .viewer {
    min-height: 62dvh;
  }

  .inspector {
    overflow: visible;
  }

  .panel-section.grow {
    min-height: 280px;
  }

  .morph-list {
    max-height: 42dvh;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .camera-toolbar {
    top: auto;
    bottom: 42px;
    width: calc(100% - 16px);
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(15, 17, 18, 0.78);
    backdrop-filter: blur(16px);
  }

  .camera-presets,
  .camera-options {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .camera-presets button,
  .camera-options label {
    flex: 0 0 auto;
  }

  .viewer .mobile-speak-button {
    position: absolute;
    z-index: 6;
    right: 28%;
    bottom: 4px;
    left: 28%;
    display: block;
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid rgba(139, 216, 199, 0.7);
    border-radius: 999px;
    color: #eafffa;
    background: linear-gradient(135deg, rgba(43, 112, 96, 0.96), rgba(35, 78, 72, 0.96));
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
}

@media (max-width: 640px) {
  .camera-toolbar {
    top: auto;
    bottom: 42px;
    width: calc(100% - 16px);
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(15, 17, 18, 0.78);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px);
  }

  .camera-presets {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .camera-presets::-webkit-scrollbar {
    display: none;
  }

  .camera-presets button {
    flex: 0 0 auto;
    min-height: 32px;
    padding-inline: 9px;
    font-size: 0.75rem;
    box-shadow: none;
  }

  .camera-options {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    font-size: 0.68rem;
    scrollbar-width: none;
  }

  .camera-options::-webkit-scrollbar {
    display: none;
  }

  .camera-options label {
    flex: 0 0 auto;
    padding: 3px 6px;
    background: transparent;
  }

  .viewer .mobile-speak-button {
    position: absolute;
    z-index: 6;
    right: 28%;
    bottom: 4px;
    left: 28%;
    display: block;
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid rgba(139, 216, 199, 0.7);
    border-radius: 999px;
    color: #eafffa;
    background: linear-gradient(135deg, rgba(43, 112, 96, 0.96), rgba(35, 78, 72, 0.96));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    backdrop-filter: blur(14px);
  }

  .mobile-speak-button:disabled {
    opacity: 0.48;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    width: 100%;
    justify-content: stretch;
  }

  .avatar-picker { flex:1 1 100%; }
  .avatar-picker select { width:100%; }

  .file-button,
  .secondary-button {
    flex: 1 1 150px;
  }

  .metrics-grid,
  .expression-buttons {
    grid-template-columns: 1fr;
  }

  .viewport-panel,
  .viewer {
    min-height: 58dvh;
  }
}



/* Phase 4B.3 fixed app shell */
html,
body {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  touch-action: none;
}

.app-shell {
  width: 100%;
  max-width: 100%;
  height: var(--phoenix-app-height, 100dvh);
  min-height: 0;
  overflow: hidden;
}

.topbar {
  min-height: 58px;
  padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
}

.topbar .eyebrow { display: none; }
.topbar h1 { font-size: clamp(1rem, 4vw, 1.3rem); }
.app-header-actions { display: flex; align-items: center; gap: 9px; }
.app-status { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.config-toggle { width: 44px; height: 44px; flex: 0 0 44px; }

.lab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  max-width: 1440px;
  min-height: 0;
  margin: 0 auto;
  padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  overflow: hidden;
}

.viewport-panel {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  border-radius: 14px;
}

.viewer {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
}

.viewer canvas { max-width: 100%; touch-action: none; }
.viewer .mobile-speak-button { display: none !important; }

.inspector {
  grid-column: 1;
  grid-row: 2;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 0;
}

body:not(.configuration-open) .inspector > :not(.speech-section) { display: none !important; }
body:not(.configuration-open) .diagnostic-only { display: none !important; }
body:not(.configuration-open) .speech-section .config-only { display: none !important; }

body:not(.configuration-open) .speech-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(24, 26, 28, 0.96);
}

body:not(.configuration-open) .speech-section-heading { display: none; }
body:not(.configuration-open) .speech-section textarea {
  grid-column: 1;
  min-width: 0;
  min-height: 48px;
  height: 48px;
  max-height: 82px;
  resize: none;
  font-size: 16px;
}
body:not(.configuration-open) .speech-actions {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(76px, 1fr));
  gap: 7px;
}
body:not(.configuration-open) .speech-actions button {
  min-width: 0;
  min-height: 48px;
  padding: 6px 10px;
}
#microphoneButton { opacity: .55; }

body.configuration-open .inspector {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 780px;
  height: var(--phoenix-app-height, 100dvh);
  max-height: var(--phoenix-app-height, 100dvh);
  margin-left: auto;
  padding: 0 max(12px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #121416;
  box-shadow: -24px 0 70px rgba(0, 0, 0, .5);
  touch-action: pan-y;
}

body.configuration-open::before {
  content: '';
  position: fixed;
  z-index: 49;
  inset: 0;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(5px);
}

.studio-header {
  position: sticky;
  z-index: 5;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  min-height: 64px;
  margin: 0 calc(-1 * max(12px, env(safe-area-inset-right))) 0 calc(-1 * max(12px, env(safe-area-inset-left)));
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: rgba(18, 20, 22, .96);
  backdrop-filter: blur(18px);
}
.studio-header span { color: var(--accent); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.studio-header button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: rgba(255,255,255,.07); font-size: 1.55rem; }
.studio-avatar-camera { display: grid; gap: 12px; }
.studio-avatar-camera .topbar-actions { justify-content: stretch; }
.studio-avatar-camera .avatar-picker { flex: 1 1 220px; }
.studio-avatar-camera .avatar-picker select { width: 100%; min-width: 0; }
.studio-avatar-camera .camera-toolbar { position: static; width: 100%; transform: none; pointer-events: auto; }
.studio-avatar-camera .camera-presets,
.studio-avatar-camera .camera-options { justify-content: flex-start; }

@media (max-width: 700px) {
  .topbar { min-height: 54px; }
  .app-status { font-size: .68rem; }
  .lab-layout { gap: 6px; padding-top: 6px; }
  body:not(.configuration-open) .speech-section { grid-template-columns: minmax(0, 1fr); }
  body:not(.configuration-open) .speech-section textarea { grid-column: 1; }
  body:not(.configuration-open) .speech-actions { grid-column: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body:not(.configuration-open) .speech-actions button { min-height: 44px; padding: 5px; font-size: .78rem; }
  body.configuration-open .inspector { max-width: none; }
  .studio-avatar-camera .topbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .studio-avatar-camera .avatar-picker { grid-column: 1 / -1; }
  .studio-avatar-camera .camera-presets,
  .studio-avatar-camera .camera-options { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; scrollbar-width: none; }
  .studio-avatar-camera .camera-presets button,
  .studio-avatar-camera .camera-options label { flex: 0 0 auto; }
  .metrics-grid, .expression-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-height: 560px) {
  .topbar { min-height: 46px; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
  .config-toggle { width: 38px; height: 38px; flex-basis: 38px; }
  body:not(.configuration-open) .speech-section textarea { min-height: 44px; height: 44px; }
  body:not(.configuration-open) .speech-actions button { min-height: 44px; }
}
/* Phase 0.4.5 avatar identity */
.header-avatar { display: flex; align-items: center; gap: 7px; margin-top: 3px; color: var(--muted); font-size: .72rem; }
.header-avatar strong { color: var(--text); }
.header-avatar img { width: 24px; height: 24px; flex: 0 0 24px; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; background: var(--bg-soft); }
.avatar-identity { display: grid; gap: 14px; }
.avatar-identity-heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.avatar-identity-heading img { width: 76px; height: 76px; flex: 0 0 76px; border: 1px solid var(--line-strong); border-radius: 20px; object-fit: cover; background: var(--bg-soft); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.avatar-identity-heading div { display: grid; gap: 4px; min-width: 0; }
.avatar-identity-heading span { color: var(--accent); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.avatar-identity-heading h2 { font-size: 1.2rem; }
.avatar-identity-heading p { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.avatar-identity-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; }
.avatar-identity-details div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.035); }
.avatar-identity-details dt { color: var(--muted); font-size: .7rem; }
.avatar-identity-details dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--text); font-size: .82rem; }
@media (max-width: 420px) {
  .header-avatar img { width: 22px; height: 22px; flex-basis: 22px; }
  .avatar-identity-details { grid-template-columns: 1fr; }
}
/* Phoenix Studio Professional 0.4.6 */
.studio-navigation,
.studio-content { min-width: 0; }
.studio-navigation { display: none; }
.studio-content { display: contents; }
.studio-category { min-width: 0; }
.studio-accordion-toggle { display: none; }
.studio-category-body { display: grid; gap: 12px; min-width: 0; }
.studio-future-note { margin: 4px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.studio-advanced,
.studio-developer-details { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.025); }
.studio-advanced > summary,
.studio-developer-details > summary { padding: 13px 14px; color: var(--text); font-size: .82rem; font-weight: 700; cursor: pointer; }
.studio-advanced[open] > summary,
.studio-developer-details[open] > summary { border-bottom: 1px solid var(--line); }
.studio-advanced > :not(summary) { margin: 12px; }
.studio-developer-details > .panel-section { margin: 0; border: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; }
.studio-info-list { display: grid; gap: 0; margin: 0; }
.studio-info-list div { display: grid; grid-template-columns: minmax(110px,.7fr) minmax(0,1.3fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.studio-info-list dt { color: var(--muted); }
.studio-info-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; text-align: right; }
.studio-info-panel blockquote { margin: 16px 0 0; padding: 14px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text); background: rgba(73,181,151,.08); font-style: italic; }
.studio-view-panel { display: grid; gap: 12px; }
.studio-view-panel .camera-toolbar { position: static; width: 100%; transform: none; pointer-events: auto; }
.studio-avatar-tools .topbar-actions { width: 100%; justify-content: stretch; }
.studio-avatar-tools .avatar-picker { flex: 1 1 220px; }
.studio-avatar-tools .avatar-picker select { width: 100%; min-width: 0; }
.studio-dev-tools > button { margin: 5px 6px 5px 0; }

body:not(.configuration-open) .inspector > .studio-content { display: block !important; }
body:not(.configuration-open) .studio-content > .studio-category:not([data-studio-category="speech"]) { display: none !important; }
body:not(.configuration-open) .studio-content > .studio-category[data-studio-category="speech"] { display: block !important; }
body:not(.configuration-open) .studio-category[data-studio-category="speech"] > .studio-accordion-toggle { display: none !important; }
body:not(.configuration-open) .studio-category[data-studio-category="speech"] > .studio-category-body { display: block !important; }

body.configuration-open .studio-content { display: block; width: 100%; }
body.configuration-open .studio-category { display: none; }
body.configuration-open .studio-category.is-active { display: block; }
body.configuration-open .studio-category-body { min-height: 0; }

@media (min-width: 821px) {
  body.configuration-open .inspector { max-width: 920px; }
  body.configuration-open .studio-navigation { position: sticky; z-index: 4; top: 64px; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; padding: 8px 0; background: rgba(18,20,22,.96); backdrop-filter: blur(18px); }
  .studio-tab { display: grid; place-items: center; gap: 4px; min-width: 0; min-height: 54px; padding: 7px 4px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; font-size: .68rem; }
  .studio-tab span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.05); font-size: .68rem; font-style: normal; }
  .studio-tab.is-active { border-color: rgba(73,181,151,.35); color: #dffbf2; background: rgba(73,181,151,.13); }
  body.configuration-open .studio-accordion-toggle { display: none; }
}

@media (max-width: 820px) {
  body.configuration-open .studio-navigation { display: none; }
  body.configuration-open .studio-content { display: grid; gap: 8px; }
  body.configuration-open .studio-category,
  body.configuration-open .studio-category.is-active { display: block; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); overflow: hidden; }
  body.configuration-open .studio-accordion-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 10px 14px; border: 0; color: var(--text); background: transparent; font-weight: 700; text-align: left; }
  .studio-accordion-toggle span { display: flex; align-items: center; gap: 10px; }
  .studio-accordion-toggle i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--accent); background: rgba(73,181,151,.1); font-size: .7rem; font-style: normal; }
  .studio-category:not(.is-active) .studio-category-body { display: none; }
  .studio-category.is-active .studio-accordion-toggle { border-bottom: 1px solid var(--line); background: rgba(73,181,151,.07); }
  .studio-category-body { padding: 10px; }
  .studio-category-body > .panel-section { margin: 0; }
  .studio-avatar-tools .topbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .studio-avatar-tools .avatar-picker { grid-column: 1 / -1; }
  .studio-view-panel .camera-presets,
  .studio-view-panel .camera-options { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; scrollbar-width: none; }
  .studio-view-panel .camera-presets button,
  .studio-view-panel .camera-options label { flex: 0 0 auto; }
}

@media (max-width: 420px) {
  .studio-info-list div { grid-template-columns: 1fr; gap: 4px; }
  .studio-info-list dd { text-align: left; }
}

/* Project Phoenix Design 1.0 - Version 0.4.6.5 */
:root {
  --accent: #00e0d1;
  --phoenix-bg: #0f1315;
  --phoenix-surface: #1a1f22;
  --phoenix-card: #2a3035;
  --phoenix-text: #e6ecef;
  --phoenix-glass: rgba(18, 22, 24, .78);
  --phoenix-glass-solid: rgba(18, 22, 24, .94);
  --phoenix-glow: rgba(0, 224, 209, .18);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html,
body {
  background: var(--phoenix-bg);
  color: var(--phoenix-text);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
}

.topbar {
  display: none !important;
}

.app-shell,
.lab-layout {
  width: 100%;
  max-width: none;
  height: var(--phoenix-app-height, 100dvh);
  min-height: 0;
}

.lab-layout {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
}

.viewport-panel {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--phoenix-bg);
  box-shadow: none;
}

.viewer,
.viewer canvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

.viewer .mobile-speak-button {
  display: none !important;
}

body:not(.configuration-open) #statusMessage {
  display: none !important;
}

body:not(.configuration-open) .inspector {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: var(--phoenix-app-height, 100dvh);
  padding: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

body:not(.configuration-open) .inspector > .studio-content,
body:not(.configuration-open) .studio-content > .studio-category[data-studio-category="speech"],
body:not(.configuration-open) .studio-category[data-studio-category="speech"] > .studio-category-body {
  display: contents !important;
}

body:not(.configuration-open) .speech-section {
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  width: auto;
  max-width: 720px;
  margin: 0 auto;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: var(--phoenix-glass-solid);
  box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(0,224,209,.07), 0 0 28px var(--phoenix-glow);
  pointer-events: auto;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body:not(.configuration-open) .speech-section {
    background: var(--phoenix-glass);
  }
}

body:not(.configuration-open) .speech-section > .speech-field,
body:not(.configuration-open) .speech-section > .studio-advanced,
body:not(.configuration-open) .speech-section > .speech-provider-debug,
body:not(.configuration-open) .speech-section > .pipeline-test-options,
body:not(.configuration-open) .speech-section > .speech-visemes,
body:not(.configuration-open) .speech-section > .section-heading {
  display: none !important;
}

.assistant-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.assistant-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.assistant-identity > img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid rgba(0,224,209,.34);
  border-radius: 50%;
  object-fit: cover;
  background: #101416;
  box-shadow: 0 0 18px rgba(0,224,209,.12);
}

.assistant-identity > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.assistant-identity strong {
  overflow: hidden;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(230,236,239,.82);
  font-size: .72rem;
  line-height: 1;
}

.assistant-status i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #35e46d;
  box-shadow: 0 0 8px rgba(53,228,109,.5);
}

.speech-section.is-speaking .assistant-status i {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(0,224,209,.6);
  animation: phoenix-status-pulse 1.8s ease-in-out infinite;
}

@keyframes phoenix-status-pulse {
  0%, 100% { opacity: .72; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

.assistant-brand {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.assistant-brand > span {
  overflow: hidden;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.config-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 50%;
  color: var(--phoenix-text);
  background: rgba(255,255,255,.06);
  box-shadow: none;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}

.config-toggle:hover,
.config-toggle:focus-visible {
  border-color: rgba(0,224,209,.52);
  background: rgba(0,224,209,.1);
}

.config-toggle:active {
  transform: scale(.96);
}

.config-toggle svg,
.speech-action svg,
.composer-microphone svg,
.studio-tab svg,
.studio-accordion-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(4,9,11,.34);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.message-composer:focus-within {
  border-color: rgba(0,224,209,.52);
  box-shadow: 0 0 0 3px rgba(0,224,209,.1);
}

body:not(.configuration-open) .speech-section .message-composer textarea {
  grid-column: 1;
  width: 100%;
  height: 46px;
  min-height: 46px;
  max-height: 88px;
  padding: 12px 8px 10px 13px;
  border: 0;
  border-radius: 14px 0 0 14px;
  outline: 0;
  resize: none;
  color: var(--phoenix-text);
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
}

.message-composer textarea::placeholder {
  color: rgba(230,236,239,.58);
}

.composer-microphone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  opacity: .72;
}

.speech-actions {
  display: grid;
  grid-template-columns: .86fr 1.32fr .86fr;
  gap: 8px;
}

.speech-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 50px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: var(--phoenix-text);
  background: rgba(4,9,11,.34);
  font: inherit;
  font-size: .78rem;
  font-weight: 650;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.speech-action.primary {
  border-color: rgba(0,224,209,.7);
  color: #eafffd;
  background: rgba(0,224,209,.13);
  box-shadow: 0 0 18px rgba(0,224,209,.12);
}

.speech-action:hover,
.speech-action:focus-visible {
  border-color: rgba(0,224,209,.62);
  outline: none;
}

.speech-action:active {
  transform: scale(.97);
}

.speech-action:disabled {
  opacity: .44;
  cursor: not-allowed;
}

.speech-section.is-speaking #speakButton {
  border-color: var(--accent);
  background: rgba(0,224,209,.2);
  box-shadow: 0 0 22px rgba(0,224,209,.2);
}

body.configuration-open .assistant-bar {
  display: none;
}

body.configuration-open .message-composer {
  display: block;
  border: 0;
  background: transparent;
}

body.configuration-open .message-composer textarea {
  width: 100%;
  min-height: 96px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--bg-soft);
  resize: vertical;
}

body.configuration-open .composer-microphone {
  display: none;
}

body.configuration-open .speech-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.configuration-open .speech-action {
  border-radius: var(--radius);
}

body.configuration-open .inspector {
  background: rgba(15,19,21,.98);
}

.studio-tab svg,
.studio-accordion-toggle svg {
  width: 21px;
  height: 21px;
}

.studio-tab span,
.studio-accordion-toggle i {
  color: var(--accent);
}

@media (max-width: 480px) {
  body:not(.configuration-open) .speech-section {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    gap: 8px;
    padding: 10px;
    border-radius: 17px;
  }

  .assistant-identity > img {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .assistant-brand > span {
    max-width: 108px;
    font-size: .72rem;
  }

  .config-toggle {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .speech-action {
    min-height: 48px;
    padding-inline: 6px;
    font-size: .7rem;
  }

  .speech-action svg {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 481px) and (max-width: 1024px) {
  body:not(.configuration-open) .speech-section {
    width: min(720px, calc(100% - 28px));
    left: 50%;
    transform: translateX(-50%);
    padding: 13px;
  }

  .assistant-identity > img {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .speech-action {
    min-height: 54px;
  }
}

@media (min-width: 1025px) {
  body:not(.configuration-open) .speech-section {
    right: 22px;
    bottom: 20px;
    left: 22px;
    grid-template-columns: 210px minmax(260px, 1fr) 330px;
    align-items: center;
    width: auto;
    max-width: 1120px;
    margin: 0 auto;
    padding: 14px 16px;
  }

  body:not(.configuration-open) .assistant-bar {
    grid-column: 1;
  }

  body:not(.configuration-open) .message-composer {
    grid-column: 2;
  }

  body:not(.configuration-open) .speech-actions {
    grid-column: 3;
  }

  .assistant-brand {
    display: grid;
    justify-items: end;
    gap: 4px;
  }

  .assistant-brand > span {
    font-size: .72rem;
  }

  body.configuration-open .inspector {
    max-width: 520px;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (min-width: 600px) {
  body:not(.configuration-open) .speech-section {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: auto;
    transform: none;
    align-content: center;
    width: min(52vw, 560px);
    max-width: none;
    margin: 0;
    padding: 10px;
  }

  .assistant-identity > img {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  body:not(.configuration-open) .speech-section .message-composer textarea {
    height: 44px;
    min-height: 44px;
  }

  .speech-action {
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .config-toggle,
  .speech-action {
    transition: none;
  }

  .speech-section.is-speaking .assistant-status i {
    animation: none;
  }
}
/* Phase 5.0A - kompakte KI-Antwort und Providerstatus */
.assistant-response {
  position: fixed;
  z-index: 19;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 184px);
  left: max(12px, env(safe-area-inset-left));
  width: auto;
  max-width: 680px;
  max-height: min(132px, 20dvh);
  margin: 0 auto;
  padding: 13px 44px 13px 15px;
  overflow-y: auto;
  border: 1px solid rgba(0,224,209,.26);
  border-radius: 15px;
  color: var(--phoenix-text);
  background: rgba(18,22,24,.92);
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  pointer-events: auto;
}
.assistant-response[hidden] { display: none !important; }
.assistant-response p { margin: 0; font-size: .88rem; line-height: 1.45; white-space: pre-wrap; }
.assistant-response button {
  position: absolute; top: 6px; right: 7px; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; color: var(--phoenix-text); background: rgba(255,255,255,.06); font-size: 1.35rem;
}
.message-composer.is-invalid { animation: phoenix-input-warning .34s ease; border-color: #ffb347; }
@keyframes phoenix-input-warning { 0%,100% { transform: translateX(0); } 35% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }
.speech-section.is-thinking .assistant-status i { background: #ffb347; box-shadow: 0 0 9px rgba(255,179,71,.5); }
.ai-status-details dd { overflow-wrap: anywhere; }
.ai-status-panel .muted-copy { display: block; margin-top: 10px; }

@media (min-width: 481px) and (max-width: 1024px) {
  .assistant-response { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 158px); width: min(690px, calc(100% - 32px)); left: 50%; transform: translateX(-50%); }
}
@media (min-width: 1025px) {
  .assistant-response { bottom: 126px; max-width: 760px; }
}
@media (orientation: landscape) and (max-height: 560px) and (min-width: 600px) {
  .assistant-response { top: max(10px, env(safe-area-inset-top)); right: auto; bottom: auto; left: max(10px, env(safe-area-inset-left)); width: min(42vw, 350px); max-height: calc(100dvh - 20px); margin: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .message-composer.is-invalid { animation: none; } }
body.configuration-open .assistant-response { display: none !important; }