*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* === RECTOKEN Brand Guidelines v1.0 === */
      --rec-green: #1FBA5A;
      --rec-green-deep: #0E7A3B;
      --rec-green-glow: #3FE579;
      --rec-ink: #0B1220;
      --rec-paper: #FAFBF7;
      --rec-mint: #E8F7EC;
      --rec-line: #E5E9DF;
      --rec-muted: #5C6770;

      /* === Mapped to chat UI tokens (light theme per brand) === */
      --bg: #FAFBF7;
      --bg-secondary: #FFFFFF;
      --surface: #FFFFFF;
      --surface-hover: #F2F4EE;
      --border: #E5E9DF;
      --border-glow: rgba(31,186,90,0.18);
      --text: #0B1220;
      --text-secondary: #5C6770;
      --muted: #8FA0AE;
      --user-bg: #E8F7EC;
      --accent: #1FBA5A;
      --accent-hover: #0E7A3B;
      --accent-dim: #0E7A3B;
      --accent-light: rgba(31,186,90,.10);
      --chip-bg: rgba(31,186,90,.06);
      --chip-border: rgba(31,186,90,.30);
      --chip-text: #0E7A3B;
      --input-bg: #FFFFFF;
      --shadow-sm: 0 1px 2px rgba(11,18,32,.06);
      --shadow-md: 0 4px 16px rgba(11,18,32,.08);
      --shadow-glow: 0 0 20px rgba(31,186,90,.15);

      /* Font stack — Inter + Noto Sans Thai (used everywhere for performance + readability) */
      --ff-body: 'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif;
      --ff-display: 'Inter', 'Noto Sans Thai', sans-serif;
      --ff-mono: 'Inter', 'Noto Sans Thai', ui-monospace, monospace;
    }

    body {
      font-family: var(--ff-body);
      background: var(--bg);
      color: var(--text);
      height: 100vh;
      display: flex;
      flex-direction: column;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ── Splash / Intro Animation ── */
    #splash {
      position: fixed; inset: 0; z-index: 100;
      background: var(--rec-paper);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      animation: splashFade 0.5s ease 2.5s forwards;
    }
    @keyframes splashFade { to { opacity: 0; pointer-events: none; } }

    /* Bolt logo (per RECTOKEN brand guidelines) */
    .splash-logo {
      width: 120px; height: 120px; border-radius: 50%;
      overflow: hidden; flex-shrink: 0;
      border: 3px solid var(--rec-green);
      box-shadow: 0 0 0 8px rgba(31,186,90,.10), 0 0 40px rgba(31,186,90,.3);
      animation: logoFloat 2s ease-in-out infinite, logoGlow 1.5s ease-in-out infinite alternate;
    }
    .splash-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    @keyframes logoFloat {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    @keyframes logoGlow {
      from { box-shadow: 0 0 0 8px rgba(31,186,90,.10), 0 0 30px rgba(31,186,90,.25); }
      to   { box-shadow: 0 0 0 14px rgba(31,186,90,.15), 0 0 60px rgba(31,186,90,.45); }
    }
    .splash-text {
      margin-top: 24px; font-family: var(--ff-display);
      font-size: 24px; font-weight: 800; color: var(--rec-ink);
      letter-spacing: -0.5px;
      animation: fadeInUp 0.6s ease 0.3s both;
    }
    .splash-sub {
      margin-top: 8px; font-family: var(--ff-mono);
      font-size: 11px; color: var(--rec-muted); letter-spacing: 2.5px;
      text-transform: uppercase;
      animation: fadeInUp 0.6s ease 0.6s both;
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Particle BG (subtle, brand green) ── */
    .particles {
      position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    }
    .particle {
      position: absolute; border-radius: 50%;
      background: radial-gradient(circle, rgba(31,186,90,.08) 0%, transparent 70%);
      animation: floatParticle linear infinite;
    }
    @keyframes floatParticle {
      0%   { transform: translateY(100vh) scale(0); opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { transform: translateY(-10vh) scale(1); opacity: 0; }
    }

    /* ── Header ── */
    header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 24px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg) 100%);
      position: sticky;
      top: 0;
      z-index: 10;
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(12px);
    }

    .agent-avatar {
      width: 44px; height: 44px; border-radius: 50%;
      overflow: hidden; flex-shrink: 0;
      border: 2px solid var(--rec-green);
      box-shadow: 0 2px 10px rgba(31,186,90,.30);
      animation: subtleGlow 3s ease-in-out infinite alternate;
    }
    .agent-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    @keyframes subtleGlow {
      from { box-shadow: 0 2px 10px rgba(31,186,90,.25); }
      to   { box-shadow: 0 2px 18px rgba(31,186,90,.50); }
    }

    .agent-info h1 {
      font-family: var(--ff-display);
      font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--rec-ink);
      letter-spacing: -0.3px;
    }
    .agent-info p  { font-size: 13px; color: var(--rec-muted); font-weight: 400; margin-top: 2px; }

    .header-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .app-version {
      font-family: ui-monospace, 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--rec-muted);
      letter-spacing: 0.5px;
      opacity: 0.65;
      user-select: none;
    }
    /* Language picker — subtle dropdown next to version */
    .lang-picker { position: relative; }
    .lang-btn {
      background: var(--rec-mint);
      border: 1px solid rgba(31,186,90,.30);
      color: var(--rec-green-deep);
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 9px;
      border-radius: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all .2s;
    }
    .lang-btn:hover { background: rgba(31,186,90,.18); border-color: var(--rec-green); }
    .lang-menu {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: #fff;
      border: 1px solid var(--rec-line);
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(11,18,32,.10);
      padding: 4px;
      min-width: 160px;
      z-index: 20;
      max-height: 360px;
      overflow-y: auto;
    }
    .lang-menu[hidden] { display: none !important; }
    .lang-menu button {
      width: 100%;
      background: transparent;
      border: none;
      padding: 8px 10px;
      font-family: inherit;
      font-size: 13.5px;
      color: var(--rec-ink);
      text-align: left;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .lang-menu button:hover { background: var(--rec-mint); }
    .lang-menu button.active {
      background: var(--rec-mint);
      color: var(--rec-green-deep);
      font-weight: 600;
    }
    .lang-menu button.active::after {
      content: '✓';
      margin-left: auto;
      color: var(--rec-green);
    }
    .online-dot {
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--rec-green);
      box-shadow: 0 0 0 3px rgba(31,186,90,.18);
      animation: pulse-dot 2s infinite;
    }
    @keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 3px rgba(31,186,90,.18)} 50%{box-shadow:0 0 0 8px rgba(31,186,90,.05)} }

    /* ── Chat ── */
    main { flex: 1; overflow-y: auto; padding: 24px 0 14px; scroll-behavior: smooth; position: relative; z-index: 1; }

    .messages {
      max-width: 700px; margin: 0 auto;
      padding: 0 20px;
      display: flex; flex-direction: column; gap: 18px;
    }

    /* ── Bubble ── */
    .msg {
      display: flex; gap: 10px; align-items: flex-end;
      animation: msgSlideIn 0.3s ease both;
    }
    @keyframes msgSlideIn {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .msg.user { flex-direction: row-reverse; }

    .av {
      width: 32px; height: 32px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 700; flex-shrink: 0; letter-spacing: -0.3px;
      overflow: hidden;
    }
    .msg.bot  .av { border: 1.5px solid var(--rec-green); }
    .msg.bot  .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .msg.user .av {
      background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 35%, #2dd4bf 70%, #1FBA5A 100%);
      color: #FFFFFF;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.3px;
      box-shadow: 0 2px 8px rgba(45,212,191,.25);
    }

    .bubble {
      max-width: 80%; padding: 12px 16px; border-radius: 18px;
      font-size: 16px; line-height: 1.65; letter-spacing: -0.01em;
    }
    .msg.bot  .bubble {
      background: var(--surface); border:1px solid var(--border);
      border-bottom-left-radius:4px; box-shadow: var(--shadow-sm);
    }
    .msg.user .bubble {
      background: var(--user-bg); border: 1px solid rgba(31,186,90,0.3);
      border-bottom-right-radius:4px; color: var(--text);
    }

    .bubble strong { color: #0E7A3B; font-weight: 600; }
    .bubble em { color: var(--text-secondary); font-style: italic; }
    .bubble a { color: var(--accent); text-decoration: none; font-weight: 500; }
    .bubble a:hover { text-decoration: underline; color: #0E7A3B; }
    .bubble ul { padding-left: 18px; margin: 6px 0; }
    .bubble li { margin-bottom: 4px; }
    .bubble code { background: rgba(31,186,90,.1); padding: 2px 6px; border-radius: 4px; font-size: 14px; color: #0E7A3B; }

    .tag {
      display: inline-block; background: var(--accent-light); color: var(--accent);
      font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 12px;
    }

    .bubble table { width:100%; border-collapse:collapse; margin:10px 0; font-size:14px; }
    .bubble th { background:rgba(31,186,90,.1); padding:6px 10px; text-align:left; font-weight:600; border:1px solid var(--border); color:#0E7A3B; }
    .bubble td { padding:6px 10px; border:1px solid var(--border); }

    /* ── Chips ── */
    .chips {
      display: flex; flex-wrap: wrap; gap: 8px;
      max-width: 700px; margin: 0 auto; padding: 6px 20px 2px;
      position: relative; z-index: 1;
    }
    .chip {
      background: var(--chip-bg); border: 1px solid var(--chip-border);
      color: var(--chip-text); font-size: 14.5px; font-weight: 500;
      padding: 8px 14px; border-radius: 18px; cursor: pointer;
      transition: all .25s ease; font-family: inherit;
      animation: chipFadeIn 0.3s ease both;
      max-width: 320px;
      white-space: normal;
      line-height: 1.35;
      text-align: left;
      word-break: break-word;
    }
    .chip:nth-child(1) { animation-delay: 0s; }
    .chip:nth-child(2) { animation-delay: .05s; }
    .chip:nth-child(3) { animation-delay: .1s; }
    .chip:nth-child(4) { animation-delay: .15s; }
    .chip:nth-child(5) { animation-delay: .2s; }
    .chip:nth-child(6) { animation-delay: .25s; }
    @keyframes chipFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

    .chip:hover {
      background: rgba(31,186,90,.18); border-color: var(--accent);
      transform: translateY(-2px); box-shadow: 0 4px 12px rgba(31,186,90,.15);
    }
    /* Exit chip (last one, "คุยเรื่องอื่น") — muted style */
    .chip-exit {
      background: transparent !important;
      border-color: var(--rec-line) !important;
      color: var(--rec-muted) !important;
    }
    .chip-exit:hover {
      background: var(--rec-line) !important;
      border-color: var(--rec-muted) !important;
      color: var(--rec-ink) !important;
    }

    /* ── Mobile: keep all 4 chips, smaller text ── */
    @media (max-width: 600px) {
      .chips { gap: 6px; padding: 6px 12px 2px; }
      .chip { font-size: 13.5px; padding: 7px 12px; max-width: 100%; }
    }

    /* ── Mobile: compact header (was huge on phones) ── */
    @media (max-width: 600px) {
      header {
        padding: 8px 12px;
        gap: 10px;
      }
      .agent-avatar {
        width: 36px;
        height: 36px;
        border-width: 1.5px;
      }
      .agent-info { min-width: 0; flex: 1; }
      .agent-info h1 {
        font-size: 15px;
        letter-spacing: -0.2px;
      }
      .agent-info p {
        font-size: 11px;
        line-height: 1.3;
        margin-top: 1px;
        /* ครอบ 1 บรรทัด ไม่ wrap */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .header-right { gap: 6px; }
      .lang-btn {
        font-size: 11px;
        padding: 3px 7px;
        border-radius: 12px;
        gap: 3px;
      }
      .app-version {
        font-size: 9.5px;
        opacity: 0.5;
      }
      .online-dot {
        width: 7px;
        height: 7px;
      }
      /* main padding ก็เล็กลงนิด */
      main { padding-top: 16px; }
      .messages { padding: 0 14px; }
      .bubble { font-size: 15px; padding: 10px 14px; }
      .input-wrap { padding: 10px 12px 12px; }
    }

    /* ── Typing ── */
    .typing .bubble { padding: 14px 16px; }
    .dots { display: flex; gap: 5px; align-items: center; }
    .dots span { width:7px; height:7px; border-radius:50%; background: var(--accent); animation:bounce 1.2s infinite ease-in-out; }
    .dots span:nth-child(2) { animation-delay:.2s; }
    .dots span:nth-child(3) { animation-delay:.4s; }
    @keyframes bounce { 0%,80%,100%{transform:scale(.8);opacity:.3}40%{transform:scale(1.2);opacity:1} }

    /* ── Lead Card ── */
    .lead-card {
      background: linear-gradient(135deg, rgba(31,186,90,.08) 0%, rgba(14,122,59,.08) 100%);
      border: 1.5px solid rgba(31,186,90,.3); border-radius: 16px;
      padding: 22px; font-size: 14px;
      box-shadow: var(--shadow-md), var(--shadow-glow);
    }
    .lead-card h3 { font-size:15px; font-weight:700; margin-bottom:14px; color:#0E7A3B; }
    .lead-card table td { border:none !important; }
    .lead-btn {
      width:100%; background: var(--accent-dim); color:#fff; border:none;
      border-radius:12px; padding:13px; font-size:15.5px; font-weight:600;
      cursor:pointer; font-family:inherit; transition: all .25s;
    }
    .lead-btn:hover { background: var(--accent-hover); box-shadow: 0 0 20px rgba(31,186,90,.2); }

    .lead-success { text-align:center; padding:22px; }
    .lead-success .icon { font-size:36px; margin-bottom:10px; }
    .lead-success h3 { font-size:16px; font-weight:700; color: #0E7A3B; margin-bottom:6px; }
    .lead-success p { color: var(--text-secondary); font-size:15px; line-height:1.65; }
    .lead-success .sig { margin-top:14px; font-size:12px; color: var(--muted); }
    .lead-success .sig a { color: var(--accent); }

    /* ── Input bar ── */
    .input-wrap {
      background: var(--bg-secondary); border-top:1px solid var(--border);
      padding:14px 20px 18px;
      box-shadow: 0 -2px 12px rgba(11,18,32,.05);
      position: relative; z-index: 1;
    }
    .input-inner {
      max-width:700px; margin:0 auto;
      display:flex; gap:8px; align-items:flex-end;
      background: var(--input-bg); border:1.5px solid var(--border); border-radius:16px;
      padding:10px 12px 10px 16px; transition: all .25s;
    }
    .input-inner:focus-within { border-color: var(--accent); box-shadow:0 0 0 3px rgba(31,186,90,.12); }

    #chatInput {
      flex:1; border:none; background:transparent;
      font-size:16px; color: var(--text); resize:none; outline:none;
      max-height:120px; line-height:1.5; font-family:inherit;
    }
    #chatInput::placeholder { color: var(--muted); }

    #sendBtn {
      width:34px; height:34px; border-radius:10px;
      border:none; background: var(--accent-dim); color:#fff;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      flex-shrink:0; transition: all .25s;
    }
    #sendBtn:hover { background: var(--accent); transform:scale(1.08); box-shadow: 0 0 12px rgba(31,186,90,.3); }
    #sendBtn:disabled { background: #E5E9DF; cursor:default; color:#8FA0AE; transform:none; box-shadow:none; }

    .hint { text-align:center; font-size:12px; color: var(--muted); margin-top:8px; letter-spacing: -0.01em; }
    .hint a { color: var(--muted); }
    .hint strong { color: var(--text-secondary); }

    /* ── Scrollbar (dark) ── */
    main::-webkit-scrollbar { width: 6px; }
    main::-webkit-scrollbar-track { background: transparent; }
    main::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    main::-webkit-scrollbar-thumb:hover { background: var(--muted); }