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

    :root {
      --bg: #0f1117;
      --surface: #1a1d27;
      --surface2: #222535;
      --border: #2e3248;
      --accent: #6366f1;
      --accent2: #818cf8;
      --text: #e2e8f0;
      --muted: #64748b;
      --success: #22c55e;
      --orange: #f97316;
      --radius: 12px;
      --grad-ai:    linear-gradient(135deg, #6366f1, #8b5cf6);
      --grad-send:  linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
      --grad-dl:    linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      --grad-up:    linear-gradient(135deg, rgba(99,102,241,0.18), rgba(168,85,247,0.14));
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* ── HEADER ─────────────────────────────────────────────────────────────── */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 28px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      font-size: 18px;
    }

    .logo-icon {
      width: 32px; height: 32px;
      background: var(--accent);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
    }

    .badge {
      font-size: 11px;
      background: rgba(99,102,241,0.2);
      color: var(--accent2);
      padding: 2px 8px;
      border-radius: 20px;
      border: 1px solid rgba(99,102,241,0.3);
    }

    /* ── MAIN LAYOUT ─────────────────────────────────────────────────────────── */
    .main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    /* ── PDF PANEL ───────────────────────────────────────────────────────────── */
    .pdf-panel {
      width: 55%;
      display: flex;
      flex-direction: column;
      border-right: 1px solid var(--border);
    }

    .pdf-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
      gap: 8px;
    }

    .pdf-toolbar-left {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
    }

    .pdf-filename {
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 180px;
    }

    .page-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
    }

    .page-nav button {
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text);
      width: 26px; height: 26px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      display: flex; align-items: center; justify-content: center;
    }
    .page-nav button:hover { border-color: var(--accent); }
    .page-nav button:disabled { opacity: 0.3; cursor: not-allowed; }

    .pdf-viewport {
      flex: 1;
      overflow: auto;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: 20px;
      background: #12131a;
    }

    #pdf-canvas {
      box-shadow: 0 4px 40px rgba(0,0,0,0.6);
      border-radius: 4px;
      max-width: 100%;
    }

    /* ── CHAT PANEL ──────────────────────────────────────────────────────────── */
    .chat-panel {
      width: 45%;
      display: flex;
      flex-direction: column;
      background: var(--surface);
    }

    .chat-header {
      padding: 14px 20px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .chat-header:has(#progress-container[style*="display:none"]),
    .chat-header:has(#progress-container[style*="display: none"]) {
      border-bottom-color: transparent;
    }

    .chat-header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .chat-header h2 {
      font-size: 14px;
      font-weight: 600;
    }

    .status-dot {
      display: inline-block;
      width: 7px; height: 7px;
      background: var(--success);
      border-radius: 50%;
      margin-right: 6px;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .message {
      display: flex;
      gap: 10px;
      animation: fadeIn 0.2s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .message.user { flex-direction: row-reverse; }

    .avatar {
      width: 30px; height: 30px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
    }

    .avatar.ai   { background: var(--grad-ai); box-shadow: 0 0 10px rgba(99,102,241,0.45); }
    .avatar.user { background: var(--surface2); border: 1px solid var(--border); }

    /* ── CHAT INPUT AREA ─────────────────────────────────────────────────────── */
    .chat-input-area {
      padding: 12px 16px;
      border-top: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex-shrink: 0;
    }

    .input-row {
      display: flex;
      gap: 8px;
    }

    #chat-input {
      flex: 1;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 14px;
      color: var(--text);
      font-size: 13px;
      resize: none;
      font-family: inherit;
      line-height: 1.4;
      transition: border-color 0.15s;
    }
    #chat-input:focus { outline: none; border-color: var(--accent); }
    #chat-input::placeholder { color: var(--muted); }

    #send-btn {
      width: 40px; height: 40px;
      background: var(--grad-send);
      border: none;
      border-radius: 10px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: all 0.18s;
      align-self: flex-end;
      box-shadow: 0 2px 12px rgba(99,102,241,0.4);
    }
    #send-btn:hover { filter: brightness(1.12); box-shadow: 0 2px 18px rgba(99,102,241,0.55); transform: translateY(-1px); }
    #send-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }

    .hint { font-size: 11px; color: var(--muted); text-align: center; padding: 4px 0 2px; }

    /* ── SCROLLBARS ──────────────────────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    /* ── MOBILE ──────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      body { height: 100svh; overflow: hidden; }
      header { padding: 10px 14px; }
      .main { flex-direction: column; overflow: hidden; height: calc(100svh - 57px); transition: height 0.05s; }
      .pdf-panel { width: 100%; height: 34svh; flex-shrink: 0; border-right: none; border-bottom: 1px solid var(--border); }
      .pdf-viewport { height: calc(34svh - 48px); overflow: auto; padding: 10px; }
      .chat-panel { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; }
      .chat-messages { flex: 1; overflow-y: auto; min-height: 0; }
      .chat-input-area { flex-shrink: 0; padding: 8px 10px; }
      .input-row { flex-wrap: nowrap; }
      #chat-input { min-width: 0; font-size: 16px; }
      #send-btn {
        flex-shrink: 0; width: 72px; height: 46px;
        font-size: 14px; font-weight: 700;
        background: #ffffff;
        color: #6366f1;
        box-shadow: 0 2px 10px rgba(0,0,0,0.12);
        border-radius: 12px;
        letter-spacing: 0.02em;
      }
      #send-btn:hover { filter: brightness(0.96); }
      #send-btn svg { display: none; }
      #send-btn::after { content: 'Send ›'; color: #6366f1; }
      .upload-btn {
        flex: 1;
        justify-content: center;
        padding: 10px 14px;
        font-size: 13px;
        border-radius: 12px;
        border-width: 2px;
        background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(168,85,247,0.18));
      }
      .chat-header { padding: 5px 12px; border-bottom-width: 0; }
      .chat-header-top { display: none; }
      .progress-bar-container { margin-top: 0; gap: 8px; padding: 2px 0; }
      .progress-bar-track { height: 3px; }
      .progress-label { font-size: 10px; }
      .chat-header:has(#progress-container:not([style*="display:none"])) { border-bottom: 1px solid var(--border); }
      .suggestions { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
      .suggestion { white-space: nowrap; flex-shrink: 0; }
    }