/* components.css — modal, input area, banners, chips */

  #workspaceSelect { min-width: 0; max-width: 260px; text-overflow: ellipsis; }

  /* Auth modal */
  .modal-overlay { position: fixed; inset: 0; background: var(--modal-overlay); display: flex; align-items: center; justify-content: center; z-index: 100; }
  .modal { background: var(--surface); border: none; border-radius: var(--radius-lg); padding: 32px; width: 380px; box-shadow: var(--shadow-lg); }
  .modal h2 { font-size: 20px; color: var(--accent); margin-bottom: 20px; }
  .modal input { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-family: inherit; font-size: 16px; margin-bottom: 14px; transition: border-color 0.2s, box-shadow 0.2s; }
  .modal input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
  .modal button { width: 100%; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 10px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
  .modal button:hover { background: var(--accent-hover); }
  .modal .error { color: var(--error); font-size: 14px; margin-bottom: 8px; display: none; }

  .welcome-query-chip { display: block; width: 100%; text-align: left; padding: 0.7rem 1.2rem; margin: 0.35rem 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); cursor: pointer; font-size: 0.95rem; font-family: inherit; transition: all 0.2s ease; }
  .welcome-query-chip:hover { background: var(--accent-subtle); border-color: var(--accent); transform: translateX(4px); box-shadow: var(--shadow-sm); }

  /* Input area */
  .input-area { padding: 12px 20px max(16px, env(safe-area-inset-bottom)); background: var(--surface); border-top: none; box-shadow: 0 -2px 12px rgba(0,0,0,0.06); flex-shrink: 0; position: relative; z-index: 5; }
  .file-previews { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
  .file-previews:empty { display: none; }
  .file-preview { display: flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; font-size: 13px; color: var(--text); max-width: 200px; }
  .file-preview img { width: 24px; height: 24px; object-fit: cover; border-radius: 2px; }
  .file-preview .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
  .file-preview .file-size { color: var(--text-dim); white-space: nowrap; }
  .file-preview .remove-file { cursor: pointer; color: var(--error); font-size: 14px; line-height: 1; padding: 0 2px; }
  .file-preview .remove-file:hover { opacity: 0.8; }
  .input-row { display: flex; gap: 8px; width: 100%; }
  .input-row textarea { flex: 1; background: var(--bg); color: var(--text); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: calc(15.5px * var(--font-scale)); resize: none; min-height: 44px; max-height: 200px; line-height: 1.5; transition: border-color 0.2s, box-shadow 0.2s; }
  .input-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
  .attach-btn { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--radius-md); width: 44px; height: 44px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; align-self: flex-end; flex-shrink: 0; transition: all 0.2s ease; }
  .attach-btn:hover { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent); }
  .input-row button.send { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: #fff; border: none; border-radius: var(--radius-md); padding: 0 20px; font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; align-self: flex-end; height: 44px; transition: all 0.2s ease; box-shadow: var(--shadow-sm); }
  .input-row button.send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .input-row button.send:disabled { opacity: 0.5; cursor: not-allowed; }
  .input-row button.send.stop { background: #666; }
  .input-row button.send.stop:hover { background: #555; }
  .input-row button.send.stopping { background: #666; cursor: wait; }

  /* Drop overlay */
  .drop-overlay { position: fixed; inset: 0; background: var(--drop-bg); border: 3px dashed var(--accent); z-index: 90; display: none; align-items: center; justify-content: center; pointer-events: none; }
  .drop-overlay.visible { display: flex; }
  .drop-overlay span { background: var(--surface); color: var(--accent); padding: 12px 24px; border-radius: var(--radius-lg); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg); }

  /* Attachment display in messages */
  .msg .attachment-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  .msg .attachment-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--chip-bg); border-radius: 4px; padding: 3px 8px; font-size: 13px; color: var(--text-dim); text-decoration: none; }
  .msg .attachment-chip:hover { background: var(--chip-bg-hover); }
  .msg .attachment-chip img { width: 32px; height: 32px; object-fit: cover; border-radius: 3px; }
  .msg.user .attachment-chip { background: var(--user-chip-bg); color: var(--user-msg-text); }
  .msg.user .attachment-chip:hover { background: var(--user-chip-bg-hover); }

  /* Archive banner */
  .archive-banner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 16px; background: var(--surface2); border-top: 1px solid var(--border); font-size: 14px; color: var(--text-dim); flex-shrink: 0; }
  .archive-banner button { background: var(--accent); color: var(--bg); border: none; border-radius: 4px; padding: 3px 10px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
  .archive-banner button:hover { background: var(--accent-hover); }

  /* Theme toggle */
  .theme-toggle { background: transparent; color: var(--text-dim); border: 1px solid var(--border); border-radius: 20px; padding: 4px 8px; font-size: 14px; cursor: pointer; line-height: 1; transition: all 0.2s ease; }
  .theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-subtle); }

  /* Version update banner */
  .update-banner {
      position: fixed;
      top: 60px;
      left: 50%;
      z-index: 9999;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 99px;
      padding: 8px 24px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%) translateY(-20px);
      transition: opacity 0.4s ease, transform 0.4s ease, filter 0.15s ease, box-shadow 0.15s ease;
      box-shadow: 0 4px 20px rgba(0,0,0,0.2);
      filter: brightness(1);
  }
  .update-banner::before { content: '\2191\2003'; }
  .update-banner.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
  .update-banner:hover { filter: brightness(1.3); box-shadow: 0 6px 28px rgba(0,0,0,0.3); }

  /* Confirm modal */
  .confirm-modal { width: 340px; padding: 28px 28px 22px; text-align: center; }
  .confirm-message { font-size: 15px; color: var(--text); line-height: 1.5; margin-bottom: 24px; }
  .confirm-buttons { display: flex; gap: 10px; }
  .confirm-btn { flex: 1; padding: 10px 16px; border: none; border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
  .confirm-btn.cancel { background: var(--surface2); color: var(--text); }
  .confirm-btn.cancel:hover { background: var(--border); }
  .confirm-btn.danger { background: var(--error); color: #fff; }
  .confirm-btn.danger:hover { filter: brightness(1.15); }
  .confirm-btn.primary { background: var(--accent); color: #fff; }
  .confirm-btn.primary:hover { background: var(--accent-hover); }

  /* ===== PTY mode indicator (top bar) ===== */
  .pty-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 10px 4px 9px;
    background: var(--accent-subtle);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 999px;
    color: var(--accent);
    font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
    line-height: 1; cursor: pointer; white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }
  .pty-badge:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(-1px); }
  .pty-badge[hidden] { display: none; }
  .pty-badge-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
    animation: pty-pulse 2s ease-out infinite;
  }
  .pty-badge-i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 10px; font-weight: 700; font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
  }
  @keyframes pty-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
  @media (max-width: 700px) {
    .pty-badge-label { display: none; }
    .pty-badge { padding: 4px 7px; }
  }

  /* ===== PTY mode explainer modal ===== */
  .pty-modal-overlay { z-index: 250; backdrop-filter: blur(3px); }
  .pty-modal {
    width: 440px; max-width: calc(100vw - 32px);
    padding: 0; overflow: hidden;
    animation: pty-modal-in 0.18s ease-out;
  }
  @keyframes pty-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }
  .pty-modal-header {
    display: flex; align-items: center; gap: 14px;
    padding: 24px 28px 20px;
    background: linear-gradient(135deg, var(--accent-subtle), transparent 80%);
    border-bottom: 1px solid var(--border);
  }
  .pty-modal-icon {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: var(--accent); color: #fff; font-size: 22px;
    box-shadow: var(--shadow-sm);
  }
  .pty-modal-kicker {
    font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 2px;
  }
  .pty-modal-header h2 { font-size: 19px; color: var(--text); margin: 0; }
  .pty-modal-lead, .pty-modal-body, .pty-modal-foot { margin: 0; }
  .pty-modal-lead {
    padding: 20px 28px 0; font-size: 15px; line-height: 1.55; color: var(--text);
  }
  .pty-modal-body {
    padding: 12px 28px 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary);
  }
  .pty-modal-lead strong, .pty-modal-body strong { color: var(--accent); font-weight: 700; }
  .pty-modal-note {
    margin: 18px 28px 0;
    padding: 14px 16px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
  }
  .pty-modal-note-title {
    display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px;
  }
  .pty-modal-list { margin: 0; padding: 0; list-style: none; }
  .pty-modal-list li {
    position: relative; padding-left: 20px; font-size: 14px; line-height: 1.5;
    color: var(--text); margin-bottom: 6px;
  }
  .pty-modal-list li:last-child { margin-bottom: 0; }
  .pty-modal-list li::before {
    content: ''; position: absolute; left: 4px; top: 8px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  }
  .pty-modal-foot {
    padding: 18px 28px 0; font-size: 13.5px; line-height: 1.55; color: var(--text-dim);
  }
  .pty-modal .pty-modal-close {
    width: calc(100% - 56px); margin: 22px 28px 26px;
    padding: 11px; border: none; border-radius: var(--radius-sm);
    background: var(--accent); color: #fff;
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: background 0.2s;
  }
  .pty-modal .pty-modal-close:hover { background: var(--accent-hover); }