/* ══════════════════════════════════════════════════════════════════
   proxyai.one — Premium B2B SaaS Light Theme
   Inspired by Linear · Stripe · Notion · Apple
   White / Grey / Graphite / Black  |  Mobile-first
   ══════════════════════════════════════════════════════════════════ */

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

:root {
  /* ── Surfaces ─────────────────────────────────────────────── */
  --bg:              #FFFFFF;
  --bg-subtle:       #FAFAFA;
  --surface:         #F4F4F5;
  --surface-hover:   #EDEDEE;

  /* ── Borders ──────────────────────────────────────────────── */
  --border:          #E4E4E7;
  --border-strong:   #C8C8CE;

  /* ── Text ─────────────────────────────────────────────────── */
  --text:            #09090B;
  --text-secondary:  #52525B;
  --text-tertiary:   #A1A1AA;

  /* ── Accent – used sparingly ──────────────────────────────── */
  --accent:          #18181B;      /* CTA buttons, active indicators */
  --accent-blue:     #2563EB;      /* focus rings, interactive tags   */

  /* ── Semantic ─────────────────────────────────────────────── */
  --success:         #16A34A;
  --warning:         #B45309;
  --error:           #DC2626;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 18px rgba(0,0,0,0.08);

  /* ── Geometry ─────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* ── Typography ───────────────────────────────────────────── */
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', ui-monospace,
               Consolas, monospace;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  height: 100vh;
  display: flex;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  width: 100%;
  max-width: 1240px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.hidden { display: none !important; }


/* ══════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════ */

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  height: 52px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

header h1 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.3px;
}

.badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-tertiary);
  border: 1px solid var(--border);
  letter-spacing: 0.2px;
}

#user-info {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

#user-info #user-name {
  color: var(--text-secondary);
  font-weight: 500;
}

#logout-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

#logout-btn:hover {
  border-color: var(--error);
  color: var(--error);
  background: rgba(220,38,38,0.04);
}


/* ══════════════════════════════════════════════════════════════════
   VIEWS — shared wrapper
   ══════════════════════════════════════════════════════════════════ */

.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


/* ══════════════════════════════════════════════════════════════════
   AUTH
   ══════════════════════════════════════════════════════════════════ */

#view-auth {
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
}

.auth-tabs {
  display: flex;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.auth-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.auth-tab:hover { color: var(--text-secondary); }

.auth-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-form input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-form input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.auth-form input::placeholder { color: var(--text-tertiary); }

.auth-form button[type="submit"] {
  background: var(--accent);
  color: #FFF;
  border: none;
  border-radius: var(--radius-md);
  padding: 11px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  margin-top: 4px;
  transition: opacity 0.15s, transform 0.1s;
}

.auth-form button[type="submit"]:hover  { opacity: 0.87; }
.auth-form button[type="submit"]:active { transform: scale(0.99); }

.auth-error {
  color: var(--error);
  font-size: 12.5px;
  min-height: 18px;
}


/* ══════════════════════════════════════════════════════════════════
   FIELD SELECTION
   ══════════════════════════════════════════════════════════════════ */

#view-field {
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
}

.field-card {
  width: 100%;
  max-width: 520px;
  padding: 24px;
}

.field-card h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 6px;
}

.subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 28px;
}

.field-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.field-btn:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.field-count {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 400;
}


/* ══════════════════════════════════════════════════════════════════
   DATA TYPES
   ══════════════════════════════════════════════════════════════════ */

#view-datatypes {
  align-items: center;
  padding: 32px 24px;
  overflow-y: auto;
  background: var(--bg-subtle);
}

.datatypes-card {
  width: 100%;
  max-width: 560px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
}

.datatypes-header { margin-bottom: 20px; }

.datatypes-header h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.datatypes-list {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}

.dt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

.dt-row:last-child { border-bottom: none; }
.dt-row:hover { background: var(--bg-subtle); }

.dt-text { font-size: 13.5px; }

.dt-remove {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}
.dt-remove:hover { color: var(--error); }

.datatypes-add {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.datatypes-add input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.datatypes-add input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.datatypes-add input::placeholder { color: var(--text-tertiary); }

.datatypes-add button {
  background: var(--accent);
  color: #FFF;
  border: none;
  border-radius: var(--radius-md);
  width: 38px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: opacity 0.15s;
}
.datatypes-add button:hover { opacity: 0.85; }

.datatypes-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}


/* ══════════════════════════════════════════════════════════════════
   BUTTONS — shared
   ══════════════════════════════════════════════════════════════════ */

.btn-secondary {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-secondary:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface);
}

.btn-primary {
  background: var(--accent);
  border: none;
  color: #FFF;
  border-radius: var(--radius-md);
  padding: 8px 20px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  transition: opacity 0.15s;
}
.btn-primary:hover    { opacity: 0.87; }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }


/* ══════════════════════════════════════════════════════════════════
   CONSOLE VIEW — wrapper
   ══════════════════════════════════════════════════════════════════ */

#view-console {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


/* ── Console Tabs ─────────────────────────────────────────────── */

#console-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  padding: 0 24px;
}

.console-tab {
  padding: 14px 2px;
  margin-right: 24px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--font);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-tertiary);
  cursor: pointer;
  letter-spacing: -0.1px;
  transition: color 0.15s;
}
.console-tab:hover  { color: var(--text-secondary); }
.console-tab.active { color: var(--text); border-bottom-color: var(--text); }


/* ── Role badge ───────────────────────────────────────────────── */

.role-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(37,99,235,0.07);
  color: var(--accent-blue);
  border: 1px solid rgba(37,99,235,0.18);
  letter-spacing: 0.4px;
}


/* ══════════════════════════════════════════════════════════════════
   ADMIN PANEL
   ══════════════════════════════════════════════════════════════════ */

#admin-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 24px;
  gap: 16px;
}

#admin-toolbar { display: flex; gap: 8px; }

#admin-refresh-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 7px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#admin-refresh-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface);
}

#admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
#admin-users-table th {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.5px;
}
#admin-users-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
#admin-users-table tr:hover td { background: var(--bg-subtle); }

.role-pill {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.role-admin {
  background: rgba(37,99,235,0.07);
  color: var(--accent-blue);
  border: 1px solid rgba(37,99,235,0.18);
}
.role-user {
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.status-pill {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.status-active {
  background: rgba(22,163,74,0.07);
  color: var(--success);
  border: 1px solid rgba(22,163,74,0.18);
}
.status-disabled {
  background: rgba(220,38,38,0.06);
  color: var(--error);
  border: 1px solid rgba(220,38,38,0.15);
}

.self-badge {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 6px;
}

.admin-actions { display: flex; gap: 6px; }

.admin-role-btn, .admin-status-btn {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
}
.admin-role-btn:hover   { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(37,99,235,0.04); }
.admin-status-btn:hover { border-color: var(--error);       color: var(--error);       background: rgba(220,38,38,0.04); }
.admin-role-btn:disabled,
.admin-status-btn:disabled { opacity: 0.3; cursor: not-allowed; }


/* ══════════════════════════════════════════════════════════════════
   QUERY HISTORY
   ══════════════════════════════════════════════════════════════════ */

#history-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#history-toolbar {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#history-refresh-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
#history-refresh-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface);
}

#history-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

#history-list::-webkit-scrollbar { width: 5px; }
#history-list::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

.history-entry {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s;
}
.history-entry:hover { box-shadow: var(--shadow-md); }

.history-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 11.5px;
  flex-wrap: wrap;
}

.history-ts {
  color: var(--text-tertiary);
  font-size: 11px;
}

.history-badge {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.history-badge.pii      { color: var(--error);      background: rgba(220,38,38,0.05); border-color: rgba(220,38,38,0.15); }
.history-badge.provider { color: var(--accent-blue); background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.15); }

.history-queries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.history-query-block {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.history-query-label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
  font-weight: 600;
}

.history-query-text {
  font-size: 12.5px;
  color: var(--text);
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
}
.history-query-text.masked { color: var(--warning); }
.history-query-text.same   { color: var(--text-tertiary); font-style: italic; }


/* ── Masking breakdown table ──────────────────────────────────── */

.map-details {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.map-summary {
  font-size: 11.5px;
  color: var(--text-tertiary);
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
  list-style: none;
  font-weight: 500;
  transition: color 0.15s;
}
.map-summary::-webkit-details-marker { display: none; }
.map-summary::before { content: "▶ "; font-size: 8px; opacity: 0.5; }
.map-details[open] .map-summary::before { content: "▼ "; }
.map-summary:hover { color: var(--text-secondary); }

.map-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 11.5px;
}
.map-table thead th {
  text-align: left;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 8px 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
}
.map-table tbody td {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.map-table tbody tr:last-child td { border-bottom: none; }

.map-type-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(37,99,235,0.07);
  border: 1px solid rgba(37,99,235,0.15);
  color: var(--accent-blue);
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  font-family: var(--font-mono);
}

.map-original { color: var(--text); max-width: 200px; word-break: break-all; }
.map-arrow    { color: var(--text-tertiary); opacity: 0.4; padding: 6px 4px; }
.map-masked   { color: var(--warning); font-weight: 600; font-family: var(--font-mono); white-space: nowrap; }
.map-layer    { color: var(--text-tertiary); white-space: nowrap; }
.map-conf     { color: var(--success); text-align: right; white-space: nowrap; font-family: var(--font-mono); }


/* ══════════════════════════════════════════════════════════════════
   CONSOLE LAYOUT — sidebar + chat
   ══════════════════════════════════════════════════════════════════ */

#console-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}


/* ── Sidebar ──────────────────────────────────────────────────── */

#sidebar {
  width: 228px;
  min-width: 228px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--bg-subtle);
}

#sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}

.sidebar-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-tertiary);
  font-weight: 600;
}

#new-conv-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 18px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.15s;
}
#new-conv-btn:hover {
  background: var(--accent);
  color: #FFF;
  border-color: var(--accent);
}

#conv-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.conv-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  border-left: 2px solid transparent;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.conv-item:hover  { background: var(--surface-hover); }
.conv-item.active { background: var(--surface); border-left-color: var(--text); }

.conv-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.conv-item.active .conv-title { color: var(--text); }

.conv-meta {
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-left: 6px;
  flex-shrink: 0;
}

.conv-delete {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  margin-left: 4px;
  opacity: 0;
  flex-shrink: 0;
  transition: color 0.12s, opacity 0.12s;
}
.conv-item:hover .conv-delete { opacity: 1; }
.conv-delete:hover { color: var(--error); }

.empty-state {
  color: var(--text-tertiary);
  text-align: center;
  padding: 48px 20px;
  font-size: 13px;
  line-height: 1.6;
}

.response-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 6px;
}


/* ══════════════════════════════════════════════════════════════════
   CHAT AREA
   ══════════════════════════════════════════════════════════════════ */

#chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--bg);
}

#console {
  flex: 1;
  overflow-y: auto;
  padding: 28px 36px;
  scroll-behavior: smooth;
}


/* ── Messages ─────────────────────────────────────────────────── */

.entry { margin-bottom: 32px; }

.entry-query {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  align-items: flex-start;
}

.entry-query .prompt {
  color: var(--text-tertiary);
  flex-shrink: 0;
  user-select: none;
  font-family: var(--font-mono);
  font-size: 13px;
  margin-top: 1px;
}

.entry-query .text {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
}

.msg-time {
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-end;
}

.entry-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  padding-left: 22px;
}

.file-tag {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.entry-response {
  padding-left: 22px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.65;
}

.entry-response .label {
  display: block;
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  margin-bottom: 4px;
}

.entry-response .masked-query {
  color: var(--warning);
  font-family: var(--font-mono);
  font-size: 13px;
}

.entry-response .pii-item { color: var(--error); }

.entry-response .meta {
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.entry-response.error { color: var(--error); }

.llm-response {
  color: var(--text);
  font-size: 14px;
  line-height: 1.72;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 6px;
}

.llm-response.llm-unavailable {
  color: var(--text-tertiary);
  font-style: italic;
}

/* Masking details disclosure */
.masking-details {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 12.5px;
}

.masking-details summary {
  cursor: pointer;
  padding: 8px 12px;
  color: var(--text-tertiary);
  user-select: none;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-subtle);
  transition: background 0.15s, color 0.15s;
}
.masking-details summary:hover {
  background: var(--surface);
  color: var(--text-secondary);
}
.masking-details[open] summary { border-bottom: 1px solid var(--border); }

.masking-details > :not(summary) { padding: 10px 12px; }

.masking-details .label,
.masking-details .masked-query,
.masking-details .meta,
.masking-details .file-tag { font-size: 12px; }


/* ── Spinner ──────────────────────────────────────────────────── */

.spinner {
  padding-left: 22px;
  color: var(--text-tertiary);
  font-size: 13px;
}
.spinner::after { content: ''; animation: dots 1.5s steps(4, end) infinite; }

@keyframes dots {
  0%   { content: '';    }
  25%  { content: '.';   }
  50%  { content: '..';  }
  75%  { content: '...'; }
  100% { content: '';    }
}

/* LLM provider tag */
.llm-provider-tag {
  display: inline-block;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  margin-left: 8px;
  vertical-align: middle;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}


/* ══════════════════════════════════════════════════════════════════
   INPUT AREA
   ══════════════════════════════════════════════════════════════════ */

#input-area {
  border-top: 1px solid var(--border);
  padding: 14px 24px 18px;
  background: var(--bg);
  flex-shrink: 0;
}

#input-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}


#llm-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

#llm-label {
  font-size: 10.5px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  white-space: nowrap;
}

#llm-provider {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 28px 5px 10px;
  color: var(--text);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23A1A1AA'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color 0.15s;
}
#llm-provider:hover, #llm-provider:focus { border-color: var(--border-strong); }
#llm-provider option { background: var(--bg); color: var(--text); }

#file-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#file-chips:not(:empty) { margin-bottom: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.chip button {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: color 0.12s;
}
.chip button:hover { color: var(--error); }

#input-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#input-row:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}

#input-row .prompt {
  color: var(--text-tertiary);
  line-height: 22px;
  flex-shrink: 0;
  user-select: none;
  font-family: var(--font-mono);
  font-size: 13px;
}

#query-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 22px;
  resize: none;
  max-height: 200px;
  overflow-y: auto;
}
#query-input::placeholder { color: var(--text-tertiary); }

#upload-btn, #send-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s;
}
#upload-btn:hover, #send-btn:hover { color: var(--text); }
#send-btn:disabled { opacity: 0.3; cursor: not-allowed; }


/* ══════════════════════════════════════════════════════════════════
   SCROLLBARS — thin, neutral
   ══════════════════════════════════════════════════════════════════ */

#console::-webkit-scrollbar,
.datatypes-list::-webkit-scrollbar,
#conv-list::-webkit-scrollbar,
#history-list::-webkit-scrollbar { width: 5px; }

#console::-webkit-scrollbar-track,
.datatypes-list::-webkit-scrollbar-track,
#conv-list::-webkit-scrollbar-track,
#history-list::-webkit-scrollbar-track { background: transparent; }

#console::-webkit-scrollbar-thumb,
.datatypes-list::-webkit-scrollbar-thumb,
#conv-list::-webkit-scrollbar-thumb,
#history-list::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

#query-input::-webkit-scrollbar { width: 4px; }
#query-input::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 2px;
}


/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile first
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  header          { padding: 0 16px; }
  #console-tabs   { padding: 0 16px; }
  #console        { padding: 16px 18px; }
  #input-area     { padding: 10px 16px 14px; }
  #admin-view     { padding: 14px 16px; }

  #sidebar {
    width: 180px;
    min-width: 180px;
  }

  .history-queries { grid-template-columns: 1fr; }

  .auth-card {
    max-width: 100%;
    margin: 16px;
    border-radius: var(--radius-md);
    padding: 24px;
  }

  .datatypes-card {
    margin: 16px;
    padding: 20px;
  }

  .field-card { padding: 16px; }
}