/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
    .btn {
      padding: 8px 18px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all 0.15s;
    }

    .btn-ghost {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border);
    }
    .btn-ghost:hover { color: var(--text); border-color: var(--accent); }

    .upload-btn {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 7px 16px;
      background: var(--grad-up);
      border: 1.5px solid rgba(99,102,241,0.45);
      border-radius: 10px;
      color: var(--accent2);
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: all 0.18s;
      white-space: nowrap;
      letter-spacing: 0.01em;
    }
    .upload-btn:hover {
      background: linear-gradient(135deg, rgba(99,102,241,0.28), rgba(168,85,247,0.24));
      border-color: var(--accent);
      color: #fff;
      box-shadow: 0 0 14px rgba(99,102,241,0.3);
    }
    #file-input { display: none; }

    /* ── PROGRESS BAR ────────────────────────────────────────────────────────── */
    .progress-bar-container {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
    }

    .progress-bar-track {
      flex: 1;
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
    }

    .progress-bar-fill {
      height: 100%;
      background: var(--accent);
      border-radius: 2px;
      transition: width 0.4s ease;
      width: 0%;
    }

    .progress-label {
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
    }

    /* ── CHAT BUBBLES ────────────────────────────────────────────────────────── */
    .bubble {
      max-width: 82%;
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 13px;
      line-height: 1.5;
    }

    .message.ai   .bubble { background: var(--surface2); border: 1px solid var(--border); border-top-left-radius: 4px; }
    .message.user .bubble { background: var(--accent); color: white; border-top-right-radius: 4px; }

    .bubble.loading { display: flex; gap: 4px; align-items: center; padding: 14px; }

    .dot { width: 6px; height: 6px; background: var(--muted); border-radius: 50%; animation: bounce 1.2s infinite; }
    .dot:nth-child(2) { animation-delay: 0.2s; }
    .dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes bounce { 0%,80%,100%{ transform:translateY(0); } 40%{ transform:translateY(-6px); } }

    /* ── DOWNLOAD BUBBLE ─────────────────────────────────────────────────────── */
    .bubble-download {
      display: flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(16,163,74,0.07));
      border: 1.5px solid rgba(34,197,94,0.35);
      border-radius: 14px;
      padding: 14px 18px;
      max-width: 82%;
      box-shadow: 0 0 20px rgba(34,197,94,0.12);
    }

    .dl-text { font-size: 12px; color: var(--success); flex: 1; font-weight: 500; }

    .dl-btn {
      background: var(--grad-dl);
      color: white;
      border: none;
      border-radius: 10px;
      padding: 8px 18px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      box-shadow: 0 2px 12px rgba(34,197,94,0.4);
      transition: all 0.18s;
      letter-spacing: 0.01em;
    }
    .dl-btn:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(34,197,94,0.5); }

    /* ── SUGGESTIONS ─────────────────────────────────────────────────────────── */
    .suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 0 0 4px;
      min-height: 28px;
    }

    .suggestion {
      font-size: 12px;
      padding: 4px 12px;
      background: rgba(99,102,241,0.1);
      border: 1px solid rgba(99,102,241,0.25);
      border-radius: 20px;
      cursor: pointer;
      color: var(--accent2);
      transition: all 0.15s;
      white-space: nowrap;
    }
    .suggestion:hover { background: rgba(99,102,241,0.2); }

    .suggestion-explain {
      background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(239,68,68,0.08));
      border-color: rgba(249,115,22,0.5);
      color: var(--orange);
      font-weight: 600;
    }
    .suggestion-explain:hover {
      background: linear-gradient(135deg, rgba(249,115,22,0.25), rgba(239,68,68,0.15));
      border-color: var(--orange);
      box-shadow: 0 0 10px rgba(249,115,22,0.25);
    }

    .suggestion-export {
      background: rgba(34,197,94,0.08);
      border-color: rgba(34,197,94,0.3);
      color: #16a34a;
    }
    .suggestion-export:hover { background: rgba(34,197,94,0.18); }

    .edit-btn {
      display: inline-block;
      margin-left: 8px;
      font-size: 11px;
      padding: 2px 8px;
      background: rgba(99,102,241,0.08);
      border: 1px solid rgba(99,102,241,0.25);
      border-radius: 12px;
      color: var(--accent2);
      cursor: pointer;
      vertical-align: middle;
    }
    .edit-btn:hover { background: rgba(99,102,241,0.2); }

    /* ── LOADING OVERLAY ─────────────────────────────────────────────────────── */
    #loading-overlay {
      position: fixed; inset: 0;
      background: rgba(15,17,23,0.85);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 100;
      gap: 12px;
    }

    .spinner {
      width: 36px; height: 36px;
      border: 3px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }