/* =============================================================================
   NS_Chat — Admin Console styles
   Follows the OfficePro UI Kit conventions: 200px dark purple sidebar, 52px
   white topbar with #e4e4ee borders, white cards with brand purple headers,
   13px Segoe UI body, Montserrat 700 for display, status pills following the
   kit's tinted-bg + saturated-fg pattern.
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--ns-font-body);
  font-size: var(--ns-text-base);
  color: var(--ns-color-text);
  background: var(--ns-color-bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
input, textarea, select {
  font-family: inherit;
  color: inherit;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: var(--ns-text-sm);
  font-weight: var(--ns-fw-semibold);
  border-radius: var(--ns-radius-sm);
  border: var(--ns-border-medium);
  background: var(--ns-color-bg);
  color: var(--ns-color-text);
  cursor: pointer;
  transition: background var(--ns-motion-fast), border-color var(--ns-motion-fast),
              color var(--ns-motion-fast);
  white-space: nowrap;
}
.btn i { font-size: 13px; }
.btn:hover { border-color: var(--ns-color-brand-tint); background: #fff; }
.btn--primary {
  background: var(--ns-color-brand);
  color: #fff;
  border-color: var(--ns-color-brand);
}
.btn--primary:hover { background: var(--ns-color-brand-darker); border-color: var(--ns-color-brand-darker); }
.btn--ghost {
  background: var(--ns-color-bg);
  border-color: var(--ns-color-border);
  color: var(--ns-color-text-2);
}
.btn--ghost:hover { color: var(--ns-color-brand); border-color: var(--ns-color-brand-light); background: #fff; }
.btn--danger { color: var(--ns-status-alert-fg); border-color: var(--ns-color-border); }
.btn--danger:hover { background: var(--ns-status-alert-bg); border-color: var(--ns-status-alert-fg); color: var(--ns-status-alert-fg); }

/* ── Form field ─────────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: var(--ns-space-4); }
.field__label {
  display: block;
  font-size: var(--ns-text-xs);
  font-weight: var(--ns-fw-semibold);
  font-family: var(--ns-font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ns-color-text-muted);
  margin-bottom: 4px;
}
.field input, .field textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: var(--ns-text-base);
  background: var(--ns-color-bg);
  border: var(--ns-border-medium);
  border-radius: var(--ns-radius-sm);
  outline: none;
  transition: border-color var(--ns-motion-fast), background var(--ns-motion-fast);
}
.field input:focus, .field textarea:focus {
  background: #fff;
  border-color: var(--ns-color-brand-light);
}

/* ── Status pill (mirrors the kit's status badge pattern) ───────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--ns-text-xs);
  font-weight: var(--ns-fw-semibold);
  font-family: var(--ns-font-body);
  border-radius: var(--ns-radius-pill);
  background: var(--ns-status-closed-bg);
  color: var(--ns-status-closed-fg);
  text-transform: capitalize;
}
.status-pill.is-waiting  { background: var(--ns-status-waiting-bg);  color: var(--ns-status-waiting-fg); }
.status-pill.is-open     { background: var(--ns-status-open-bg);     color: var(--ns-status-open-fg); }
.status-pill.is-assigned { background: var(--ns-status-assigned-bg); color: var(--ns-status-assigned-fg); }
.status-pill.is-closed   { background: var(--ns-status-closed-bg);   color: var(--ns-status-closed-fg); }

/* ── Login ──────────────────────────────────────────────────────────────── */
.login {
  position: fixed; inset: 0;
  background: var(--ns-color-brand);
  background-image:
    radial-gradient(at 12% 12%, var(--ns-color-brand-darker) 0%, transparent 55%),
    radial-gradient(at 85% 85%, var(--ns-color-brand-deepest) 0%, transparent 55%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login__card {
  width: 100%; max-width: 380px;
  background: var(--ns-color-surface);
  border-radius: var(--ns-radius-lg);
  padding: 28px 28px 24px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.login__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.login__logo-wrap {
  width: 44px; height: 44px;
  border-radius: var(--ns-radius-md);
  background: var(--ns-color-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.login__eyebrow {
  font-size: var(--ns-text-xs);
  font-family: var(--ns-font-display);
  font-weight: var(--ns-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ns-color-brand);
  margin-bottom: 2px;
}
.login__title {
  font-family: var(--ns-font-display);
  font-weight: var(--ns-fw-bold);
  font-size: 20px;
  color: var(--ns-color-text);
}
.login__form .btn { width: 100%; justify-content: center; padding: 10px; }
.login__error {
  background: var(--ns-status-alert-bg);
  color: var(--ns-status-alert-fg);
  padding: 8px 12px;
  border-radius: var(--ns-radius-sm);
  font-size: var(--ns-text-sm);
  margin-top: 12px;
}
.login__footnote {
  margin-top: 14px;
  text-align: center;
  font-size: var(--ns-text-xs);
  color: var(--ns-color-text-quiet);
}

/* ── Console layout ─────────────────────────────────────────────────────── */
.console { display: flex; height: 100vh; overflow: hidden; }
.workspace { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ── Sidebar (200px dark purple, OfficePro pattern) ────────────────────── */
.sidebar {
  width: 200px;
  background: var(--ns-color-brand-deepest);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  color: #fff;
}
.sidebar__logo {
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; gap: 10px;
}
.sidebar__logo-mark {
  width: 32px; height: 32px;
  border-radius: var(--ns-radius-md);
  background: var(--ns-color-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff;
  flex-shrink: 0;
}
.sidebar__logo-name {
  font-family: var(--ns-font-display);
  font-weight: var(--ns-fw-bold);
  font-size: var(--ns-text-md);
  line-height: 1.2;
  color: #fff;
}
.sidebar__logo-sub {
  font-size: 10px;
  color: var(--ns-color-brand-tint);
  font-weight: var(--ns-fw-regular);
  margin-top: 1px;
}
.sidebar__nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.sidebar__nav-item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  color: var(--ns-color-brand-tint-2);
  font-size: var(--ns-text-base);
  font-family: var(--ns-font-body);
  cursor: pointer;
  text-align: left;
  transition: background var(--ns-motion-fast);
}
.sidebar__nav-item i { font-size: 16px; color: var(--ns-color-brand-tint); width: 18px; text-align: center; }
.sidebar__nav-item:hover { background: rgba(255, 255, 255, 0.04); color: #fff; }
.sidebar__nav-item:hover i { color: #fff; }
.sidebar__nav-item.is-active {
  background: rgba(255, 255, 255, 0.10);
  border-left-color: var(--ns-color-brand);
  color: #fff;
}
.sidebar__nav-item.is-active i { color: var(--ns-color-brand-light); }
.sidebar__nav-item > span:first-of-type { flex: 1; }
.sidebar__nav-count {
  background: rgba(255, 255, 255, 0.10);
  color: var(--ns-color-brand-tint-3);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: var(--ns-radius-pill);
  font-weight: var(--ns-fw-semibold);
  font-family: var(--ns-font-display);
}
.sidebar__nav-item.is-active .sidebar__nav-count {
  background: var(--ns-color-brand);
  color: #fff;
}

.sidebar__footer {
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; gap: 8px;
}
.sidebar__agent { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.sidebar__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ns-color-brand-light-2);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--ns-text-base);
  font-weight: var(--ns-fw-bold);
  font-family: var(--ns-font-display);
  flex-shrink: 0;
  text-transform: uppercase;
}
.sidebar__agent-info { min-width: 0; }
.sidebar__agent-name {
  font-size: var(--ns-text-sm);
  font-weight: var(--ns-fw-semibold);
  color: var(--ns-color-brand-tint-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__agent-role {
  font-size: 10px;
  color: var(--ns-color-brand-tint);
}
.sidebar__logout {
  background: transparent;
  border: none;
  color: var(--ns-color-brand-tint);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--ns-radius-sm);
  font-size: 14px;
}
.sidebar__logout:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }

/* ── Topbar (52px white, OfficePro pattern) ─────────────────────────────── */
.topbar {
  height: 52px;
  background: var(--ns-color-surface);
  border-bottom: var(--ns-border-thin);
  display: flex; align-items: center;
  padding: 0 20px;
  gap: 12px;
  flex-shrink: 0;
}
.topbar__title { flex: 1; min-width: 0; }
.topbar__heading {
  font-family: var(--ns-font-display);
  font-weight: var(--ns-fw-bold);
  font-size: var(--ns-text-lg);
  color: var(--ns-color-text);
  line-height: 1.1;
}
.topbar__subtitle {
  font-size: var(--ns-text-sm);
  color: var(--ns-color-text-quiet);
  margin-top: 1px;
}
.topbar__search { position: relative; display: flex; align-items: center; }
.topbar__search input {
  width: 220px;
  background: var(--ns-color-bg);
  border: var(--ns-border-medium);
  border-radius: var(--ns-radius-sm);
  padding: 6px 10px 6px 32px;
  font-size: var(--ns-text-base);
  outline: none;
}
.topbar__search input:focus { background: #fff; border-color: var(--ns-color-brand-light); }
.topbar__search-icon {
  position: absolute; left: 10px;
  color: var(--ns-color-text-quiet);
  font-size: 13px;
  pointer-events: none;
}
.topbar__icon-btn {
  position: relative;
  width: 34px; height: 34px;
  border-radius: var(--ns-radius-sm);
  background: var(--ns-color-bg);
  border: var(--ns-border-medium);
  display: flex; align-items: center; justify-content: center;
  color: var(--ns-color-text-muted);
  font-size: 15px;
  cursor: pointer;
}
.topbar__icon-btn:hover { color: var(--ns-color-brand); border-color: var(--ns-color-brand-tint); background: #fff; }
.topbar__icon-btn.is-muted { opacity: 0.55; }
.topbar__badge {
  position: absolute; top: 3px; right: 3px;
  width: 8px; height: 8px;
  background: var(--ns-color-alert);
  border-radius: 50%;
  border: 1.5px solid #fff;
}
.topbar__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ns-color-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--ns-text-base);
  font-weight: var(--ns-fw-bold);
  font-family: var(--ns-font-display);
  cursor: pointer;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ── Split: list + thread ──────────────────────────────────────────────── */
.split {
  flex: 1;
  display: grid;
  grid-template-columns: 340px 1fr;
  overflow: hidden;
}

/* ── Conversation list ──────────────────────────────────────────────────── */
.list {
  background: var(--ns-color-surface);
  border-right: var(--ns-border-thin);
  overflow-y: auto;
}
.list__items { display: flex; flex-direction: column; }
.list__item {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ns-color-border-soft);
  cursor: pointer;
  transition: background var(--ns-motion-fast);
  position: relative;
}
.list__item:hover { background: var(--ns-color-bg); }
.list__item.is-active {
  background: var(--ns-color-brand-pale);
  border-left: 3px solid var(--ns-color-brand);
  padding-left: 13px;
}
.list__item-row { display: flex; align-items: center; gap: 8px; }
.list__item-name {
  flex: 1;
  font-weight: var(--ns-fw-semibold);
  color: var(--ns-color-text);
  font-size: var(--ns-text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list__item-time {
  font-size: var(--ns-text-xs);
  color: var(--ns-color-text-quiet);
  flex-shrink: 0;
}
.list__item-practice {
  font-size: var(--ns-text-xs);
  font-family: var(--ns-font-display);
  font-weight: var(--ns-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ns-color-brand);
  background: var(--ns-color-brand-pale);
  padding: 1px 7px;
  border-radius: var(--ns-radius-xs);
  display: inline-block;
  margin-right: 6px;
}
.list__item-preview {
  font-size: var(--ns-text-sm);
  color: var(--ns-color-text-quiet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list__item-row.row--meta { gap: 6px; }
.list__item-unread {
  background: var(--ns-color-alert);
  color: #fff;
  font-size: 10px;
  font-weight: var(--ns-fw-bold);
  font-family: var(--ns-font-display);
  min-width: 18px;
  height: 18px;
  border-radius: var(--ns-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.list__empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--ns-color-text-faint);
}
.list__empty i { font-size: 32px; display: block; margin-bottom: 8px; color: var(--ns-color-brand-tint-2); }

/* ── Thread (right pane) ────────────────────────────────────────────────── */
.thread {
  background: var(--ns-color-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.thread__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ns-color-text-faint);
  padding: 24px;
}
.thread__empty i { font-size: 48px; color: var(--ns-color-brand-tint-2); margin-bottom: 12px; }
.thread__empty h2 {
  font-family: var(--ns-font-display);
  font-size: var(--ns-text-lg);
  color: var(--ns-color-text);
  margin-bottom: 6px;
  font-weight: var(--ns-fw-semibold);
}
.thread__empty p { font-size: var(--ns-text-base); max-width: 360px; }

.thread__active {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

/* Thread header (white card-style strip) */
.thread__header {
  background: var(--ns-color-surface);
  border-bottom: var(--ns-border-thin);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.thread__header-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.thread__visitor-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ns-color-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ns-font-display);
  font-weight: var(--ns-fw-bold);
  font-size: var(--ns-text-md);
  text-transform: uppercase;
  flex-shrink: 0;
}
.thread__visitor-name {
  font-family: var(--ns-font-display);
  font-weight: var(--ns-fw-bold);
  font-size: var(--ns-text-lg);
  color: var(--ns-color-text);
  line-height: 1.1;
}
.thread__visitor-sub {
  font-size: var(--ns-text-sm);
  color: var(--ns-color-text-quiet);
  margin-top: 2px;
}
.thread__header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ticket-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: var(--ns-text-xs);
  font-weight: var(--ns-fw-semibold);
  background: var(--ns-color-brand-pale);
  color: var(--ns-color-brand);
  border-radius: var(--ns-radius-xs);
}

/* Thread main = messages + (optional) suggestion sidebar */
.thread__main {
  display: flex;
  overflow: hidden;
}
.thread__main .messages { flex: 1; }
@media (max-width: 1100px) {
  .suggestions { display: none !important; }
}

/* Messages */
.messages {
  padding: 18px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg { display: flex; max-width: 78%; }
.msg__bubble {
  padding: 9px 13px;
  border-radius: var(--ns-chat-bubble-radius);
  font-size: var(--ns-text-base);
  line-height: 1.45;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.msg__meta {
  font-size: 10px;
  color: var(--ns-color-text-faint);
  margin-top: 3px;
  display: flex;
  gap: 6px;
}
.msg--visitor { align-self: flex-start; }
.msg--visitor .msg__bubble {
  background: var(--ns-color-surface);
  color: var(--ns-color-text);
  border: var(--ns-border-thin);
  border-top-left-radius: var(--ns-chat-bubble-radius-tail);
  box-shadow: var(--ns-shadow-card);
}
.msg--agent { align-self: flex-end; flex-direction: column; align-items: flex-end; }
.msg--agent .msg__bubble {
  background: var(--ns-color-brand);
  color: #fff;
  border-top-right-radius: var(--ns-chat-bubble-radius-tail);
}
.msg--system {
  align-self: center;
  max-width: 90%;
  text-align: center;
}
.msg--system .msg__bubble {
  background: transparent;
  color: var(--ns-color-text-quiet);
  font-style: italic;
  font-size: var(--ns-text-sm);
  padding: 4px 12px;
}
.typing-indicator {
  align-self: flex-start;
  padding: 6px 12px;
  background: var(--ns-color-surface);
  border: var(--ns-border-thin);
  border-radius: var(--ns-chat-bubble-radius);
  font-size: var(--ns-text-xs);
  color: var(--ns-color-text-quiet);
  font-style: italic;
}

/* Suggestions sidebar */
.suggestions {
  width: 260px;
  flex-shrink: 0;
  background: var(--ns-color-surface);
  border-left: var(--ns-border-thin);
  overflow-y: auto;
  padding: 14px;
}
.suggestions__title {
  font-family: var(--ns-font-display);
  font-weight: var(--ns-fw-semibold);
  font-size: var(--ns-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ns-color-brand);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.suggestions__list { display: flex; flex-direction: column; gap: 8px; }
.sugg-card {
  background: rgba(79, 63, 110, 0.06);
  border: 1.5px solid rgba(79, 63, 110, 0.18);
  border-radius: var(--ns-radius-md);
  padding: 10px 12px;
  cursor: pointer;
  transition: background var(--ns-motion-fast);
}
.sugg-card:hover { background: var(--ns-color-brand-pale); }
.sugg-card__src {
  font-size: 9px;
  font-family: var(--ns-font-display);
  font-weight: var(--ns-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ns-color-brand);
}
.sugg-card__title {
  font-size: var(--ns-text-sm);
  font-weight: var(--ns-fw-semibold);
  color: var(--ns-color-text);
  margin: 3px 0 4px;
  line-height: 1.3;
}
.sugg-card__snip {
  font-size: var(--ns-text-xs);
  color: var(--ns-color-text-quiet);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sugg-card__send {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ns-text-xs);
  font-weight: var(--ns-fw-semibold);
  color: var(--ns-color-brand);
}

/* Composer */
.composer {
  border-top: var(--ns-border-thin);
  background: var(--ns-color-surface);
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.composer textarea {
  flex: 1;
  resize: none;
  min-height: 36px;
  max-height: 140px;
  padding: 8px 12px;
  background: var(--ns-color-bg);
  border: var(--ns-border-medium);
  border-radius: var(--ns-radius-sm);
  font-size: var(--ns-text-base);
  outline: none;
  line-height: 1.45;
}
.composer textarea:focus { background: #fff; border-color: var(--ns-color-brand-light); }
.composer__send {
  width: 36px; height: 36px;
  border-radius: var(--ns-radius-sm);
  border: none;
  background: var(--ns-color-brand);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.composer__send:hover { background: var(--ns-color-brand-darker); }
.composer__send:disabled { background: var(--ns-color-text-faint); cursor: not-allowed; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(46, 37, 64, 0.55);
  align-items: center; justify-content: center;
  z-index: 10;
  padding: 24px;
}
.modal-overlay { display: flex; }
.modal {
  background: var(--ns-color-surface);
  border-radius: var(--ns-radius-lg);
  width: 100%; max-width: 420px;
  box-shadow: var(--ns-shadow-pop);
  overflow: hidden;
}
.modal__header {
  background: var(--ns-color-brand);
  color: #fff;
  padding: 11px 16px;
  font-family: var(--ns-font-display);
  font-weight: var(--ns-fw-semibold);
  font-size: var(--ns-text-base);
  display: flex; align-items: center; justify-content: space-between;
}
.modal__close {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
}
.modal__body { padding: 18px 18px 10px; }
.modal__hint {
  font-size: var(--ns-text-xs);
  color: var(--ns-color-text-quiet);
  margin-top: -8px;
}
.modal__footer {
  padding: 12px 18px 16px;
  display: flex; gap: 8px; justify-content: flex-end;
  border-top: 1px solid var(--ns-color-border-soft);
}

/* ── Title flash for off-tab alerts ─────────────────────────────────────── */
@keyframes ns-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
.is-pulsing { animation: ns-pulse 600ms var(--ns-ease-standard) 2; }