:root {
      --bg: #0b1020;
      --panel: #12182b;
      --panel-gradient-start: #151b34;
      --panel-gradient-end: #10162a;
      --accent: #8fb7ff;
      --text: #e6ebff;
      --muted: #a7b0c6;
      --good: #4ade80;
      --danger: #fb7185;
      --shadow: 0 10px 30px rgba(0,0,0,0.35);
      --radius: 16px;
      --font-heading: 'Quicksand', sans-serif;
      --font-body: 'Nunito', system-ui, -apple-system, sans-serif;
      --border-color: rgba(255,255,255,0.06);
      --btn-bg: #1a2342;
      --btn-bg-hover: #202b55;
      --btn-text: var(--text);
      --input-bg: #0f162d;
      --bubble-me-bg: #2441a1;
      --bubble-me-text: var(--text);
      --bubble-bot-bg: #0f1a3a;
      --bubble-bot-text: var(--text);
      --overlay-bg: rgba(5,8,18,0.6);
      --companion-bg: #0b1330;
      --companion-hover-outline: #2a3f7a;
      --hint-bg: rgba(0,0,0,0.4);
      --toast-bg: rgba(0,0,0,0.5);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: var(--font-body);
      color: var(--text);
      overflow: hidden;
      background: var(--bg);
      transition: background .3s, color .3s;
    }
    body:not(.light-mode) {
       background:
        radial-gradient(1200px 600px at 65% 35%, #18224a 0%, var(--bg) 60%),
        radial-gradient(800px 400px at 20% 80%, rgba(95,135,255,0.15), transparent 70%),
        radial-gradient(700px 300px at 90% 10%, rgba(170,120,255,0.12), transparent 70%);
    }
    body.light-mode {
      --bg: #cde2ff; /* Fallback */
      --panel: #ffffff;
      --panel-gradient-start: #fdfdfd;
      --panel-gradient-end: #f8fafc;
      --accent: #3b82f6;
      --text: #1e293b;
      --muted: #64748b;
      --shadow: 0 4px 15px rgba(0,0,0,0.1);
      --border-color: #e2e8f0;
      --btn-bg: #e2e8f0;
      --btn-bg-hover: #cbd5e1;
      --btn-text: #1e293b;
      --input-bg: #ffffff;
      --bubble-me-bg: #3b82f6;
      --bubble-me-text: #ffffff;
      --bubble-bot-bg: #e2e8f0;
      --bubble-bot-text: #1e293b;
      --overlay-bg: rgba(255,255,255,0.6);
      --companion-bg: #ffffff;
      --companion-hover-outline: #3b82f6;
      --hint-bg: rgba(255,255,255,0.4);
      --toast-bg: rgba(255,255,255,0.5);
      background: linear-gradient(to bottom, #EAF3FF, #FFFFFF);
    }

    /* Layout */
    .app {
      position: fixed; inset: 0;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 56px 1fr 40px;
      grid-template-areas:
        "header" "stage" "footer";
      gap: 10px;
      padding: 10px;
    }

    header {
      grid-area: header;
      display: flex; align-items: center; justify-content: space-between;
      background: linear-gradient(180deg, var(--panel-gradient-start), var(--panel-gradient-end));
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 8px 14px;
      z-index: 10;
    }
    .logo-title { display: flex; align-items: center; gap: 12px; }
    header h1 {
      font-family: var(--font-heading);
      font-size: 22px; margin: 0 0 2px 0; letter-spacing: .3px;
    }
    .logo-svg .swoosh, .logo-svg .planet-outline {
      stroke: var(--accent); stroke-width: 8px; fill: none;
    }
    .logo-svg .swoosh { stroke-linecap: round; }
    .tagline {
      font-size: 12px;
      color: var(--muted);
      font-weight: 400;
    }
    header .controls { display: flex; gap: 8px; position: relative; /* For dropdown positioning */ }
    .btn {
      appearance: none; border: 0; cursor: pointer;
      background: var(--btn-bg); color: var(--btn-text);
      padding: 8px 12px; border-radius: 10px; font-weight: 600;
      transition: transform .12s ease, background .2s ease, opacity .2s ease;
    }
    .btn:hover { transform: translateY(-1px); background: var(--btn-bg-hover); }

    #menuBtn {
      display: none; /* Hidden on desktop */
    }
    #controls-menu-content {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .stage {
      grid-area: stage;
      position: relative; border-radius: var(--radius);
      overflow: hidden; border: 1px solid var(--border-color);
      box-shadow: var(--shadow);
      background: var(--bg);
    }
    .stage-overlay {
      position: absolute; top: 12px; right: 12px;
      z-index: 2;
    }
    .stage-top-left {
      position: absolute; top: 12px; left: 12px;
      z-index: 2;
      display: flex; flex-direction: column; gap: 8px;
      align-items: flex-start;
    }
    canvas#scene { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
    .hint { position: absolute; left: 12px; bottom: 12px; font-size: 12px; color: var(--muted); background: var(--hint-bg); padding: 6px 8px; border-radius: 8px; z-index: 2; }
    .toast { background: var(--toast-bg); padding: 8px 10px; border-radius: 10px; font-size: 12px; color: var(--text); }
    .btn-round-icon { background: var(--btn-bg); color: var(--btn-text); font-size: 20px; line-height: 1; width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-content: center; }
    .btn-round-icon:hover { background: var(--btn-bg-hover); }

    /* Theme Switch */
    .theme-switch {
      position: relative;
      display: flex;
      align-items: center;
      width: 50px;
      height: 26px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .switch-track {
      background-color: #202b55;
      border-radius: 13px;
      position: absolute;
      inset: 0;
      transition: background-color .3s;
    }
    .switch-thumb {
      position: absolute;
      height: 20px; width: 20px; left: 3px; bottom: 3px;
      background-color: #f0f4f8;
      border-radius: 50%;
      transition: transform .3s ease;
      display: grid; place-content: center; font-size: 12px;
    }
    .theme-switch input:checked + .switch-track { background-color: #7aa2ff; }
    .theme-switch input:checked + .switch-track .switch-thumb { transform: translateX(24px); }

    .input {
      width: 100%;
      padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border-color);
      background: var(--input-bg); color: var(--text);
    }

    .chat {
      /* Desktop: Positioned as an overlay */
      position: fixed;
      top: 66px; /* header height + gap */
      right: 10px;
      bottom: 50px; /* footer height + gap */
      width: 420px;
      z-index: 5;
      display: grid; grid-template-rows: auto 1fr auto;
      background: linear-gradient(180deg, var(--panel-gradient-start), var(--panel-gradient-end));
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      transform: translateX(calc(100% + 20px));
      transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
      visibility: hidden;
    }
    .chat.visible { transform: translateX(0); visibility: visible; }
    .chat .head {
      position: relative; /* Positioning context for the close button */
      display: flex; align-items: center; gap: 10px;
      padding: 12px;
      border-bottom: 1px solid var(--border-color);
    }
    .chat .head .icon { font-size: 22px; }
    .chat .head .name { font-weight: 800; }
    .chat .head .role { font-size: 12px; color: var(--muted); }

    .messages { padding: 14px; overflow: auto; display: grid; gap: 10px; }
    .bubble { max-width: 85%; padding: 10px 12px; border-radius: 14px; line-height: 1.35; }
    .me { justify-self: end; background: var(--bubble-me-bg); color: var(--bubble-me-text); }
    .bot { justify-self: start; background: var(--bubble-bot-bg); color: var(--bubble-bot-text); border: 1px solid var(--border-color); }

    .composer { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; border-top: 1px solid var(--border-color); }

    .topic-starters {
      padding: 8px 10px 4px; display: flex; flex-wrap: wrap; gap: 6px;
      border-bottom: 1px solid var(--border-color);
    }
    .topic-starter {
      font-size: 12px; padding: 4px 10px; background: var(--btn-bg); border-radius: 999px; cursor: pointer;
    }
    .topic-starter:hover { background: var(--btn-bg-hover); }

    footer {
      grid-area: footer; display: flex; align-items: center; gap: 8px; color: var(--muted);
      padding: 0 2px; font-size: 12px;
    }
    .tag { padding: 4px 8px; background: var(--btn-bg); border-radius: 999px; border: 1px solid var(--border-color); }
    .link { color: var(--accent); text-decoration: none; }

    /* Modal */
    .modal {
      position: fixed; inset: 0; display: none; place-items: center; background: var(--overlay-bg);
      backdrop-filter: blur(4px);
    }
    .modal[open] { display: grid; }
    .card {
      width: min(720px, 92vw); max-height: 80vh; overflow: auto;
      position: relative;
      background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 14px; box-shadow: var(--shadow);
      padding: 16px; color: var(--text);
    }
    .modal-close-btn {
      position: absolute; top: 8px; right: 8px;
      width: 32px; height: 32px;
      border-radius: 50%;
      background: transparent;
      border: 0;
      color: var(--muted);
      font-size: 24px;
      cursor: pointer;
      transition: background .2s, color .2s;
      display: grid; place-content: center;
    }
    .modal-close-btn:hover { background: var(--btn-bg); color: var(--text); }
    .card h2 { font-family: var(--font-heading); }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
    .companion {
      display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px;
      padding: 10px; border-radius: 12px; background: var(--companion-bg); border: 1px solid var(--border-color);
      cursor: pointer;
      color: var(--text);
    }
    .companion:hover { outline: 1px solid var(--companion-hover-outline); }
    .companion .emoji { font-size: 28px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif; }
    .sr-only { position: absolute; left: -9999px; }

    /* Reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
      .hint { display: none; }
    }

    /* Mobile layout */
    @media (max-width: 850px) {
      .app {
        grid-template-columns: 1fr;
        grid-template-rows: 56px 1fr 40px;
        grid-template-areas:
          "header"
          "stage"
          "footer";
        padding: 0;
        gap: 0;
      }
      .stage, .chat, header {
        border-radius: 0;
        border-left: none;
        border-right: none;
      }
      .chat {
        /* On mobile, this is an overlay that slides up from the bottom,
           so it doesn't shrink the 3D stage. */
        top: auto;
        right: 0;
        bottom: 40px; /* Sits above the footer */
        left: 0;
        width: 100%;
        height: 60vh;
        max-height: 550px;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        /* Override desktop animation to slide from bottom */
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
      }
      .chat.visible {
        /* Override desktop .visible transform */
        transform: translateY(0);
      }
      .hint { bottom: 16px; }
      footer { padding: 8px 12px; }
      #welcome-headline {
        top: 28%; /* Adjust vertical position on tall screens to be closer to the globe */
        width: min(88vw, 60ch); /* Slightly adjust width for mobile */
      }
      #welcome-headline h2 {
        /* Use a different font size range for smaller screens */
        font-size: clamp(1.4rem, 5.5vw, 2rem);
      }
      #welcome-headline p {
        /* Adjust paragraph font size and margin for mobile */
        font-size: clamp(0.9rem, 3vw, 1rem);
        margin-top: 4px;
      }

      /* Controls Dropdown for Mobile */
      #menuBtn {
        display: grid; /* Show on mobile, use grid to center icon */
      }
      #controls-menu-content {
        display: none; /* Hide inline controls on mobile */
        position: absolute;
        top: calc(100% + 5px); /* Position below header */
        right: 0;
        background: var(--panel);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 10px;
        box-shadow: var(--shadow);
        z-index: 20;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 180px;
      }
      #controls-menu-content.visible {
        display: flex; /* Show dropdown when toggled */
      }
      #controls-menu-content .btn {
        text-align: left;
      }
      #controls-menu-content .theme-switch {
        display: flex; justify-content: space-between; align-items: center; padding: 4px 2px;
      }
      #controls-menu-content .theme-switch::before { content: "Theme"; color: var(--text); }
    }

    /* Floating Questions */
    #floating-questions-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 0;
    }
    .floating-question {
      position: absolute;
      bottom: -100px;
      background: var(--bubble-bot-bg);
      border: 1px solid var(--border-color);
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      padding: 10px 16px;
      border-radius: 14px;
      color: var(--bubble-bot-text);
      font-size: 15px;
      white-space: nowrap;
      animation: float-up linear infinite;
      opacity: 0;
      transform: translateX(-50%);
      margin-left: 40px; /* Make space for icon and tail */
    }
    /* Chat bubble icon and tail */
    .floating-question::before {
      content: '🙁'; /* Whisper/Speak Icon */
      position: absolute;
      left: -32px; /* Position left of the tail */
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      color: var(--muted);
      opacity: 0.7;
    }
    .floating-question::after {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-style: solid;
      /* Tail (unbordered, as ::before is used for the icon) */
      left: -10px;
      border-width: 8px 10px 8px 0;
      border-color: transparent var(--bubble-bot-bg) transparent transparent;
    }
    @keyframes float-up {
      0% { transform: translateY(0) translateX(-50%); opacity: 0; }
      10%, 90% { opacity: 0.7; }
      100% { transform: translateY(-110vh) translateX(-50%); opacity: 0; }
    }
    
    #welcome-headline {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 3;
      color: var(--text);
      pointer-events: none;
      transition: opacity 0.8s ease-in-out;
      /* Constrain width for better readability on wide screens, with padding on small screens. */
      width: min(90vw, 65ch);
    }
    #welcome-headline.hidden { opacity: 0; }
    #welcome-headline h2 {
      font-family: var(--font-heading);
      font-size: clamp(1.5rem, 5vw, 2.2rem);
      margin: 0;
      text-shadow: 0 2px 15px var(--bg);
    }
    #welcome-headline p {
      font-size: clamp(0.9rem, 2.5vw, 1.1rem); color: var(--muted); margin: 8px auto 0; text-shadow: 0 2px 10px var(--bg);
    }