* { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #1a1a2e;
    color: #eee;
    height: 100vh;
    display: flex;
    overflow: hidden;
  }

  /* ── 3D viewport (left) ── */
  #vrm-container {
    flex: 0 0 45%;
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.98), rgba(244, 244, 244, 0.94) 42%, rgba(230, 230, 230, 0.96) 100%);
  }
  #vrm-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(210, 210, 210, 0.22)),
      radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.55), transparent 48%);
    pointer-events: none;
    z-index: 0;
  }
  #vrm-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
  }
  #loading-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.6);
    font-size: 1.1rem; color: #aaa;
    z-index: 10;
    transition: opacity 0.4s;
  }
  #loading-overlay.hidden { opacity: 0; pointer-events: none; }

  /* ── Chat panel (right) ── */
  #chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #16213e;
    border-left: 1px solid #0f3460;
  }
  #chat-header {
    padding: 14px 20px;
    font-weight: 600;
    font-size: 1.05rem;
    border-bottom: 1px solid #0f3460;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  #chat-header .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
  #chat-header .spacer { flex: 1; }
  #header-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  #tts-volume-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: #d1d5db;
    font-size: 0.74rem;
  }
  #tts-volume-label {
    color: #cbd5e1;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  #tts-volume {
    width: 96px;
    accent-color: #f59e0b;
    cursor: pointer;
  }
  #tts-volume-value {
    min-width: 42px;
    text-align: right;
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
  }
  #tts-status {
    font-size: 0.74rem;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.06);
  }
  #tts-status.ready {
    color: #c9f7d5;
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(74, 222, 128, 0.3);
  }
  #tts-status.loading,
  #tts-status.playing {
    color: #fef3c7;
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(251, 191, 36, 0.3);
  }
  #tts-status.error,
  #tts-status.off {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(248, 113, 113, 0.26);
  }
  #messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    line-height: 1.5;
    font-size: 0.95rem;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .msg.user {
    align-self: flex-end;
    background: #533483;
    border-bottom-right-radius: 4px;
  }
  .msg.tutor {
    align-self: flex-start;
    background: #0f3460;
    border-bottom-left-radius: 4px;
  }
  .msg.observer {
    align-self: flex-start;
    background: #1a1a2e;
    border: 1px solid #e2b93b44;
    color: #e2b93b;
    font-size: 0.85rem;
    padding: 8px 12px;
  }
  .msg.system {
    align-self: center;
    color: #888;
    font-size: 0.82rem;
  }
  .msg.command {
    align-self: flex-start;
    background: #111827;
    border: 1px solid #334155;
    color: #e2e8f0;
    font-size: 0.85rem;
    padding: 10px 12px;
  }

  /* ── Input bar ── */
  #input-bar {
    display: flex;
    padding: 12px 16px;
    gap: 10px;
    border-top: 1px solid #0f3460;
    background: #1a1a2e;
  }
  #input-bar input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #333;
    background: #16213e;
    color: #eee;
    font-size: 0.95rem;
    outline: none;
  }
  #input-bar input:focus { border-color: #533483; }
  #input-bar button {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    background: #533483;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }
  #input-bar button:hover { background: #6b44a0; }
  #input-bar button:disabled { opacity: 0.5; cursor: default; }

  /* scrollbar */
  #messages::-webkit-scrollbar { width: 6px; }
  #messages::-webkit-scrollbar-track { background: transparent; }
  #messages::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }