:root {
  --bg: #0b0e14;
  --panel: #111520;
  --muted: #8b93a7;
  --text: #e7ecf3;
  --primary: #6ea8fe;
  --primary-600: #3a7bfd;
  --danger: #ff6b6b;
  --success: #2ecc71;
  --chip-bg: #1a2030;
  --chip-border: #2a344b;
  --card-bg: #0f1420;
  --border: #1f2636;
  --shadow: 0 6px 24px rgba(0,0,0,0.25);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 20% -10%, rgba(110,168,254,0.15), transparent 50%), var(--bg);
  color: var(--text);
}
.app { max-width: 1200px; margin: 0 auto; padding: 24px 24px 10px; }
.app__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.app__title { font-size: 18px; margin: 0 0 8px; }
.app__header-left { display: flex; flex-direction: column; gap: 8px; }
.app__header-right { display: flex; gap: 8px; }
.app__footer { margin-top: 8px; color: var(--muted); font-size: 12px; text-align: center; }

.layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .layout { grid-template-columns: 1fr; } }

.conversation { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); min-height: 380px; display: flex; flex-direction: column; }
.conversation__list { padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow: auto; max-height: 52vh; }
.message { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; }
.message__author { font-weight: 600; color: var(--primary); }
.message__time { color: var(--muted); font-size: 12px; justify-self: end; }
.message__body { grid-column: 1 / -1; white-space: pre-wrap; }

.composer { border-top: 1px solid var(--border); padding: 12px; }
.composer__controls { display: grid; gap: 8px; }
.input--multiline { width: 100%; resize: vertical; background: #0e1422; color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 12px; font: inherit; }
.composer__actions { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }

.suggestions { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; position: sticky; top: 16px; }
.suggestions.is-hidden { display: none; }
.suggestions__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; align-items: start; }
.column { background: #0e1422; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: grid; grid-auto-rows: min-content; }
.column__title { padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 600; background: #0f1628; }
.column__list { padding: 10px; display: grid; gap: 8px; }

.btn { appearance: none; border: 1px solid var(--border); background: #11182a; color: var(--text); border-radius: 10px; padding: 8px 12px; cursor: pointer; font-weight: 600; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--primary { background: linear-gradient(180deg, var(--primary), var(--primary-600)); border-color: transparent; color: #0b0e14; }
.btn--secondary { background: #0d162a; }
.btn--ghost { background: transparent; }
.btn--small { padding: 6px 10px; font-size: 12px; }

.subtle { color: var(--muted); }

.cards { display: grid; grid-template-columns: 1fr; gap: 8px; }
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; gap: 6px; }
.card__title { font-weight: 600; }
.card__meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.card__actions { display: flex; align-items: center; gap: 8px; }

.links { margin-top: 10px; display: grid; gap: 6px; }
.linked { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #0e1422; border: 1px solid var(--border); border-radius: 8px; }
.linked__left { display: flex; align-items: center; gap: 8px; }
.linked__id { color: var(--primary); font-weight: 600; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: #0d1423; color: var(--muted); font-size: 11px; }
.pill__bar { display: inline-block; width: 52px; height: 6px; border-radius: 999px; background: #0c1220; overflow: hidden; }
.pill__bar-inner { display: block; height: 100%; background: linear-gradient(90deg, var(--success), var(--primary)); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; border: 1px solid var(--border); }
.badge--warn { background: #2a1a1a; color: #ff9f43; border-color: #3b2620; }


/* Suggestions panel typography tweaks */
.suggestions { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; }
.suggestions .column__title { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.suggestions .card__title { font-size: 12.5px; }
.suggestions .card__meta { font-size: 11px; }
.suggestions .btn--small { font-size: 11.5px; }

/* Ark AI branding */
.ai-brand { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--muted); font-size: 11px; letter-spacing: .02em; }
.ai-logo { display: inline-block; width: 16px; height: 16px; }
.badge--ok { background: #13251a; color: #2ecc71; border-color: #1e3a28; }


.version-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-right: 8px; }
.version-switch .btn { border: 0; border-radius: 0; background: #0e1525; }
.version-switch .btn[aria-pressed="true"] { background: #152036; color: var(--primary); }

/* Column manual link area */
.column__manual { border-top: 1px dashed var(--border); padding: 8px 10px 10px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.column__manual .input { width: 100%; background: #0b1220; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12px; }

/* v2 special tiles */
.card--sentiment { border-color: #2a3b1f; box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.15); }
.card--customer { border-color: #2a364b; box-shadow: inset 0 0 0 1px rgba(110, 168, 254, 0.15); }
.card--intelligence { border-color: #3a2a4b; box-shadow: inset 0 0 0 1px rgba(206, 110, 254, 0.15); }
.card--sentiment .card__title, .card--customer .card__title, .card--intelligence .card__title { font-weight: 700; }
/* v2 special tiles typography and colors */
.card--sentiment, .card--customer, .card--intelligence { font-family: Georgia, 'Times New Roman', Times, serif; }
.card--sentiment .card__title { color: #2ecc71; font-weight: 800; }
.card--customer .card__title { color: #6ea8fe; font-weight: 800; }
.card--intelligence .card__title { color: #ce6efe; font-weight: 800; }
.card--sentiment .card__meta, .card--customer .card__meta, .card--intelligence .card__meta { font-weight: 600; }
/* Enhanced tile backgrounds and realistic shadows for v2 categories */
.card--sentiment { 
  background: #0f1a14; /* deep green-tinted */
  border-color: #214d35; 
  box-shadow: 0 10px 30px rgba(46, 204, 113, 0.18), 0 3px 10px rgba(0,0,0,0.45);
}
.card--customer { 
  background: #0e1626; /* deep blue-tinted */
  border-color: #27406a; 
  box-shadow: 0 10px 30px rgba(110, 168, 254, 0.18), 0 3px 10px rgba(0,0,0,0.45);
}
.card--intelligence { 
  background: #1a1222; /* deep purple-tinted */
  border-color: #4a2e6a; 
  box-shadow: 0 10px 30px rgba(206, 110, 254, 0.18), 0 3px 10px rgba(0,0,0,0.45);
}

/* Optional slight hover lift for depth */
.card--sentiment:hover, .card--customer:hover, .card--intelligence:hover {
  transform: translateY(-1px);
  transition: transform 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 14px 38px rgba(0,0,0,0.5), 0 12px 32px rgba(110,168,254,0.12);
}
.card--sentiment--pos {
  background: #0f1a14; /* green positive */
  border-color: #214d35;
  box-shadow: 0 10px 30px rgba(46, 204, 113, 0.18), 0 3px 10px rgba(0,0,0,0.45);
}
.card--sentiment--neg {
  background: #1a0f0f; /* red negative */
  border-color: #5a2a2a;
  box-shadow: 0 10px 30px rgba(255, 107, 107, 0.18), 0 3px 10px rgba(0,0,0,0.5);
}
.card--sentiment--neu {
  background: #1a160f; /* amber neutral */
  border-color: #5a452a;
  box-shadow: 0 10px 30px rgba(255, 159, 67, 0.18), 0 3px 10px rgba(0,0,0,0.48);
}
/* Sentiment variant title color overrides */
.card--sentiment--pos .card__title { color: #2ecc71; }
.card--sentiment--neg .card__title { color: #ff6b6b; }
.card--sentiment--neu .card__title { color: #ff9f43; }
/* Password gate overlay */
.auth { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(800px 500px at 20% -10%, rgba(110,168,254,0.15), transparent 50%), rgba(11,14,20,0.96); backdrop-filter: blur(2px); }
.auth[hidden] { display: none; }
.auth__panel { width: 360px; max-width: 92vw; background: #0e1422; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,0.45); padding: 18px; display: grid; gap: 10px; text-align: center; }
.auth__logo { font-weight: 800; letter-spacing: .08em; color: var(--primary); }
.auth__title { font-weight: 700; }
.auth__controls { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.auth__controls .input { background: #0b1220; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; }
.auth__error { color: #ff6b6b; font-size: 12px; }