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

    :root {
      --bg:           #09090f;
      --bg-card:      #11111c;
      --bg-card-alt:  #18182b;
      --bg-input:     #1e1e32;
      --border:       rgba(255,255,255,.07);
      --border-mid:   rgba(255,255,255,.11);
      --border-glow:  rgba(124,90,246,.4);

      --text:         #e8e6f0;
      --text-muted:   #7b7a8e;
      --text-faint:   #3a3952;

      --accent:       #7c5af6;
      --accent-dark:  #6344d4;
      --accent-soft:  rgba(124,90,246,.15);

      --bot-bubble:   #1a1a2d;
      --user-bubble:  #6344d4;

      --green-bg:     rgba(52,211,153,.12);
      --green-text:   #34d399;

      --radius:       14px;
      --radius-sm:    8px;
      --sidebar-w:    240px;
      --transition:   .18s ease;

      --font-display: 'DM Serif Display', Georgia, serif;
      --font-body:    'DM Sans', system-ui, sans-serif;
    }

    html, body { height: 100%; }

    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      overflow: hidden;
      font-size: 14px;
      line-height: 1.6;
    }

    /* ── MESH BACKGROUND ── */
    .mesh {
      position: fixed; inset: 0;
      pointer-events: none; z-index: 0; overflow: hidden;
    }
    .mesh__orb {
      position: absolute; border-radius: 50%;
      filter: blur(110px); opacity: .28;
      animation: drift 20s ease-in-out infinite alternate;
    }
    .mesh__orb--a {
      width:560px; height:560px;
      background: radial-gradient(circle,#5b21b6,transparent 70%);
      top:-180px; left:-140px; animation-duration:22s;
    }
    .mesh__orb--b {
      width:460px; height:460px;
      background: radial-gradient(circle,#1e3a8a,transparent 70%);
      top:50%; right:-180px; animation-duration:28s; animation-delay:-10s;
    }
    .mesh__orb--c {
      width:380px; height:380px;
      background: radial-gradient(circle,#6d28d9,transparent 70%);
      bottom:-80px; left:35%; animation-duration:24s; animation-delay:-5s;
    }
    @keyframes drift {
      from { transform: translate(0,0) scale(1); }
      to   { transform: translate(28px,36px) scale(1.07); }
    }

    /* ── APP SHELL ── */
    .app {
      position: relative; z-index: 1;
      display: flex; height: 100vh; overflow: hidden;
    }

    /* ════════════════════════════
       SIDEBAR
    ════════════════════════════ */
    .sidebar {
      width: var(--sidebar-w); flex-shrink: 0;
      background: rgba(14,14,23,.92);
      border-right: 1px solid var(--border);
      backdrop-filter: blur(24px);
      display: flex; flex-direction: column;
      height: 100vh; overflow: hidden;
    }

    .sb-brand {
      display: flex; align-items: center; gap: 10px;
      padding: 20px 16px 16px;
      border-bottom: 1px solid var(--border);
    }
    .sb-logo {
      width:34px; height:34px; border-radius:var(--radius-sm);
      background:var(--accent); display:flex;
      align-items:center; justify-content:center; flex-shrink:0;
    }
    .sb-logo i { font-size:18px; color:#fff; }
    .sb-brand-text .name {
      font-family:var(--font-display); font-size:15px;
      color:var(--text); letter-spacing:.02em;
    }
    .sb-brand-text .tag {
      font-size:10px; color:var(--text-muted);
      letter-spacing:.07em; text-transform:uppercase; margin-top:1px;
    }

    .sb-new {
      margin:12px 12px 4px; padding:8px 12px;
      background:var(--accent-soft); border:1px solid var(--border-glow);
      border-radius:var(--radius-sm); color:var(--text-muted);
      font-family:var(--font-body); font-size:12px;
      display:flex; align-items:center; gap:7px;
      cursor:pointer; transition:var(--transition);
    }
    .sb-new:hover { background:rgba(124,90,246,.25); color:var(--text); }
    .sb-new i { font-size:15px; }

    .sb-section {
      padding:14px 14px 6px; font-size:10px;
      color:var(--text-faint); letter-spacing:.1em;
      text-transform:uppercase; font-weight:600;
    }

    .sb-history { flex:1; overflow-y:auto; padding:0 6px; }
    .sb-history::-webkit-scrollbar { width:4px; }
    .sb-history::-webkit-scrollbar-thumb {
      background:var(--border-mid); border-radius:99px;
    }

    .sb-item {
      display:flex; align-items:center; gap:8px;
      padding:8px 10px; border-radius:var(--radius-sm);
      font-size:12px; color:var(--text-muted);
      cursor:pointer; transition:var(--transition);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .sb-item i { font-size:14px; flex-shrink:0; }
    .sb-item:hover { background:var(--bg-card-alt); color:var(--text); }
    .sb-item.active {
      background:var(--accent-soft);
      border:1px solid var(--border-glow); color:var(--text);
    }

    .sb-footer {
      padding:12px 14px;
      border-top:1px solid var(--border);
    }
    .sb-user { display:flex; align-items:center; gap:9px; }
    .sb-avatar {
      width:28px; height:28px; border-radius:50%;
      background:var(--accent); display:flex;
      align-items:center; justify-content:center;
      font-size:10px; font-weight:600; color:#fff; flex-shrink:0;
    }
    .sb-user-info .uname { font-size:12px; color:var(--text); }
    .sb-user-info .urole { font-size:10px; color:var(--text-muted); }

    /* ════════════════════════════
       CHAT AREA
    ════════════════════════════ */
    .chat-area {
      flex:1; display:flex; flex-direction:column;
      min-width:0; height:100vh;
    }

    /* Header */
    .chat-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 24px; border-bottom:1px solid var(--border);
      background:rgba(9,9,15,.75); backdrop-filter:blur(20px); flex-shrink:0;
    }
    .chat-header-left .title {
      font-family:var(--font-display); font-size:17px;
      color:var(--text); letter-spacing:.01em;
    }
    .chat-header-left .title em { font-style:italic; color:var(--accent); }
    .chat-header-left .subtitle {
      font-size:11px; color:var(--text-muted); margin-top:2px;
      display:flex; align-items:center; gap:6px;
    }
    .status-dot {
      width:6px; height:6px; border-radius:50%;
      background:#34d399; display:inline-block;
      animation:blink 2.5s ease infinite;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

    .header-actions { display:flex; gap:6px; }
    .icon-btn {
      width:32px; height:32px; background:transparent;
      border:1px solid var(--border-mid); border-radius:var(--radius-sm);
      color:var(--text-muted); display:flex;
      align-items:center; justify-content:center;
      cursor:pointer; transition:var(--transition);
    }
    .icon-btn:hover { background:var(--bg-card-alt); color:var(--text); }
    .icon-btn i { font-size:16px; }

    /* Messages */
    .messages {
      flex:1; overflow-y:auto;
      padding:24px; display:flex; flex-direction:column; gap:20px;
    }
    .messages::-webkit-scrollbar { width:5px; }
    .messages::-webkit-scrollbar-thumb {
      background:var(--border-mid); border-radius:99px;
    }

    /* Message row */
    .msg {
      display:flex; gap:10px; align-items:flex-start;
      animation:fadeUp .3s ease both;
    }
    .msg.user { flex-direction:row-reverse; }
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(10px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* Avatar */
    .msg-avatar {
      width:30px; height:30px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:11px; font-weight:600; flex-shrink:0; margin-top:2px;
    }
    .msg-avatar.bot {
      background:var(--green-bg);
      border:1px solid rgba(52,211,153,.22);
      color:var(--green-text);
    }
    .msg-avatar.user { background:var(--accent); color:#fff; }
    .msg-avatar i { font-size:14px; }

    /* Bubble */
    .bubble-wrap { display:flex; flex-direction:column; max-width:72%; }
    .msg.user .bubble-wrap { align-items:flex-end; }

    .sender-name {
      font-size:10px; color:var(--text-faint);
      margin-bottom:4px; letter-spacing:.04em;
    }
    .bubble {
      padding:11px 15px; border-radius:14px;
      font-size:13.5px; line-height:1.72;
    }
    .bubble.bot {
      background:var(--bot-bubble); border:1px solid var(--border-mid);
      border-top-left-radius:4px; color:var(--text);
    }
    .bubble.user {
      background:var(--user-bubble);
      border:1px solid rgba(124,90,246,.45);
      border-top-right-radius:4px; color:#fff;
    }
    .bubble strong { font-weight:600; }

    /* Source pills */
    .src-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
    .src-pill {
      display:flex; align-items:center; gap:5px;
      font-size:10px; padding:3px 10px; border-radius:99px;
      background:var(--bg-card-alt); border:1px solid var(--border-mid);
      color:var(--text-muted);
    }
    .src-pill i { font-size:11px; }

    /* Typing dots */
    .typing-indicator { display:flex; gap:5px; align-items:center; padding:4px 0; }
    .t-dot {
      width:6px; height:6px; border-radius:50%;
      background:var(--text-muted); animation:tdot 1.3s ease-in-out infinite;
    }
    .t-dot:nth-child(2) { animation-delay:.2s; }
    .t-dot:nth-child(3) { animation-delay:.4s; }
    @keyframes tdot {
      0%,60%,100% { transform:translateY(0); opacity:.5; }
      30%          { transform:translateY(-6px); opacity:1; }
    }

    /* ── SUGGESTION CHIPS ── */
    .suggestions {
      padding:0 24px 12px; display:flex;
      gap:8px; flex-wrap:wrap; flex-shrink:0;
    }
    .suggest-chip {
      padding:6px 13px;
      border:1px solid var(--border-mid); border-radius:99px;
      font-size:12px; color:var(--text-muted);
      background:transparent; cursor:pointer;
      font-family:var(--font-body); transition:var(--transition);
    }
    .suggest-chip:hover {
      border-color:var(--border-glow);
      background:var(--accent-soft); color:var(--text);
    }

    /* ── INPUT BAR ── */
    .input-area {
      padding:10px 20px 14px; border-top:1px solid var(--border);
      flex-shrink:0; background:rgba(9,9,15,.65); backdrop-filter:blur(16px);
    }
    .input-box {
      display:flex; align-items:flex-end; gap:10px;
      background:var(--bg-input); border:1px solid var(--border-mid);
      border-radius:12px; padding:10px 12px;
      transition:border-color var(--transition);
    }
    .input-box:focus-within {
      border-color:var(--accent);
      box-shadow:0 0 0 3px var(--accent-soft);
    }
    .input-box textarea {
      flex:1; background:transparent; border:none;
      outline:none; resize:none;
      font-size:13.5px; font-family:var(--font-body);
      color:var(--text); line-height:1.55;
      max-height:120px; min-height:22px;
    }
    .input-box textarea::placeholder { color:var(--text-faint); }

    .send-btn {
      width:34px; height:34px; border-radius:9px;
      background:var(--accent); border:none;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; flex-shrink:0; transition:var(--transition);
    }
    .send-btn:hover { background:var(--accent-dark); }
    .send-btn:disabled { opacity:.45; cursor:not-allowed; }
    .send-btn i { font-size:16px; color:#fff; }

    .input-footer {
      display:flex; justify-content:space-between;
      align-items:center; margin-top:7px; padding:0 2px;
    }
    .input-hint {
      font-size:10px; color:var(--text-faint);
      display:flex; align-items:center; gap:4px;
    }
    .input-hint i { font-size:11px; }

    /* ── RESPONSIVE ── */
    @media (max-width:720px) {
      .sidebar { display:none; }
      .messages { padding:16px; }
      .suggestions { padding:0 16px 10px; }
      .input-area { padding:8px 12px 12px; }
      .chat-header { padding:12px 16px; }
    }

    @keyframes spin { to { transform:rotate(360deg); } }