/* ============================================================
 * GoChat Marketplace — Custom Styles
 * Extends the Gochat style block + Limitless BS5
 * ============================================================ */

/* ====== Gochat Brand Palette (re-declared for clarity) ====== */
:root {
  --gc-primary:        #4E6AF0;
  --gc-primary-dark:   #3B54D4;
  --gc-secondary:      #6C757D;
  --gc-success:        #28C76F;
  --gc-danger:         #EA5455;
  --gc-warning:        #FF9F43;
  --gc-info:           #00CFE8;
  --gc-dark:           #283046;
  --gc-light:          #F8F8F8;
  --gc-chat-bg:        #F3F2F7;
  --gc-chat-bubble-self:  #4E6AF0;
  --gc-chat-bubble-other: #FFFFFF;

  /* Marketplace channel colors */
  --gc-shopee:  #EE4D2D;
  --gc-lazada:  #0F146D;
  --gc-tiktok:  #000000;

  /* App layout vars */
  --gc-rail-w-collapsed: 64px;
  --gc-rail-w-expanded:  240px;
}

/* ====== Helper classes — repeated here for safety ====== */
.bg-gc-primary { background-color: var(--gc-primary) !important; }
.bg-gc-dark    { background-color: var(--gc-dark)    !important; }
.text-gc-primary { color: var(--gc-primary) !important; }
.btn-gc-primary {
  background: var(--gc-primary); border-color: var(--gc-primary); color: #fff;
}
.btn-gc-primary:hover {
  background: var(--gc-primary-dark); border-color: var(--gc-primary-dark); color: #fff;
}
.btn-outline-gc-primary {
  background: transparent; border: 1px solid var(--gc-primary); color: var(--gc-primary);
}
.btn-outline-gc-primary:hover {
  background: var(--gc-primary); color: #fff;
}

/* Status dot */
.status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; border: 2px solid #fff;
}
.status-online  { background: var(--gc-success); }
.status-away    { background: var(--gc-warning); }
.status-busy    { background: var(--gc-danger); }
.status-offline { background: var(--gc-secondary); }

/* Unread badge */
.unread-badge {
  min-width: 20px; height: 20px; border-radius: 10px;
  background: var(--gc-primary); color: #fff;
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px;
}

/* ====== APP LAYOUT — pages with nav rail ====== */
body.gc-app {
  margin: 0; height: 100vh; overflow: hidden;
  background: #f1f4f9;
  display: flex !important;
  flex-direction: row !important; /* override Limitless body { flex-direction: column } */
}

.gc-content {
  flex: 1; min-width: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
}

/* When nav rail is expanded, push content over via flexbox automatically */

/* ====== NAV RAIL ====== */
.chat-nav-rail {
  width: var(--gc-rail-w-collapsed);
  min-width: var(--gc-rail-w-collapsed);
  background: var(--gc-dark);
  display: flex; flex-direction: column;
  padding: 12px 0;
  height: 100vh;
  z-index: 10;
  transition: width .3s ease, min-width .3s ease;
  overflow: hidden;
  align-items: center;
}
.chat-nav-rail.expanded {
  width: var(--gc-rail-w-expanded);
  min-width: var(--gc-rail-w-expanded);
  align-items: stretch;
}

/* Scrollable middle */
.chat-nav-rail .nav-rail-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.chat-nav-rail .nav-rail-scroll::-webkit-scrollbar { width: 4px; }
.chat-nav-rail .nav-rail-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15); border-radius: 2px;
}

/* Section + header */
.chat-nav-rail .nav-rail-section { margin-bottom: 8px; }
.chat-nav-rail .nav-rail-header {
  display: none;
  padding: 10px 16px 4px;
  font-size: .65rem; text-transform: uppercase; letter-spacing: .5px;
  color: rgba(255,255,255,.35); font-weight: 600;
  white-space: nowrap;
}
.chat-nav-rail.expanded .nav-rail-header { display: block; }

/* Logo */
.chat-nav-rail .nav-rail-logo {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  text-decoration: none; flex-shrink: 0;
  transition: all .3s;
}
.chat-nav-rail.expanded .nav-rail-logo {
  margin: 0 0 12px 12px;
  justify-content: flex-start;
}
.chat-nav-rail .nav-rail-logo-icon  { display: inline-flex; }
.chat-nav-rail .nav-rail-logo-full  { display: none; }
.chat-nav-rail.expanded .nav-rail-logo-icon { display: none; }
.chat-nav-rail.expanded .nav-rail-logo-full { display: flex; }

/* Nav items */
.chat-nav-rail .nav-rail-item {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55);
  font-size: 1.25rem;
  cursor: pointer; transition: all .2s;
  margin: 0 auto 2px;
  position: relative;
  text-decoration: none;
  border: none; background: none;
  flex-shrink: 0; padding: 0;
}
.chat-nav-rail .nav-rail-item:hover {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.9);
}
.chat-nav-rail .nav-rail-item.active {
  background: rgba(78,106,240,.35);
  color: #fff;
}
.chat-nav-rail .nav-rail-item i {
  flex-shrink: 0; width: 20px; text-align: center;
}
.chat-nav-rail .nav-rail-item .nav-rail-label {
  display: none;
  margin-left: 12px;
  font-size: .8125rem; font-weight: 500;
  white-space: nowrap; color: inherit;
}
.chat-nav-rail.expanded .nav-rail-item {
  width: auto; height: 40px;
  border-radius: 8px;
  margin: 0 10px 2px;
  padding: 0 12px;
  justify-content: flex-start;
}
.chat-nav-rail.expanded .nav-rail-item .nav-rail-label { display: inline; }

/* Badge */
.chat-nav-rail .nav-rail-item .nav-rail-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--gc-danger); color: #fff;
  font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1;
}
.chat-nav-rail.expanded .nav-rail-item .nav-rail-badge {
  position: static; margin-left: auto;
}

/* Status dot for planned / in-progress items in nav rail */
.chat-nav-rail .nav-rail-status-dot {
  position: absolute; bottom: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #c5cad5;
  border: 1px solid rgba(40,48,70,0.6);
}
.chat-nav-rail .nav-rail-status-dot.in_progress {
  background: var(--gc-warning);
}
.chat-nav-rail.expanded .nav-rail-status-dot {
  position: static; margin-left: auto; align-self: center;
  border: none;
}

/* Planned items are dimmed */
.chat-nav-rail .nav-rail-item.planned {
  opacity: 0.45;
  cursor: not-allowed;
}
.chat-nav-rail .nav-rail-item.planned:hover {
  background: rgba(255,255,255,0.05);
  opacity: 0.65;
}

/* Hub link (special, opens prototype hub) */
.chat-nav-rail .nav-rail-item.nav-rail-hub {
  background: linear-gradient(135deg, rgba(255,214,72,0.18), rgba(78,106,240,0.18));
  color: #FFD648;
}
.chat-nav-rail .nav-rail-item.nav-rail-hub:hover {
  background: linear-gradient(135deg, rgba(255,214,72,0.30), rgba(78,106,240,0.30));
  color: #fff;
}
.chat-nav-rail .nav-rail-user-row.planned {
  opacity: 0.55;
}

/* Toggle button */
.chat-nav-rail .nav-rail-toggle {
  width: 44px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4); cursor: pointer;
  transition: all .2s;
  border: none; background: none;
  margin: 0 auto 8px;
  flex-shrink: 0;
}
.chat-nav-rail .nav-rail-toggle:hover {
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.06);
}
.chat-nav-rail.expanded .nav-rail-toggle {
  width: auto; margin: 0 10px 8px;
  justify-content: flex-end; padding: 0 12px;
}

/* Bottom */
.chat-nav-rail .nav-rail-bottom {
  margin-top: 8px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}
.chat-nav-rail.expanded .nav-rail-bottom { align-items: stretch; }

/* Divider */
.chat-nav-rail .nav-rail-divider {
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 6px 12px;
}

/* Avatar at bottom (user) */
.chat-nav-rail .nav-rail-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gc-primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: .75rem;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,.2);
  flex-shrink: 0;
}
.chat-nav-rail .nav-rail-user-row {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  padding: 8px 0;
}
.chat-nav-rail.expanded .nav-rail-user-row {
  padding: 8px 16px;
  justify-content: flex-start;
}
.chat-nav-rail .nav-rail-user-info {
  display: none;
  margin-left: 10px; overflow: hidden;
}
.chat-nav-rail.expanded .nav-rail-user-info { display: block; }
.chat-nav-rail .nav-rail-user-name {
  color: #fff; font-weight: 600; font-size: .8125rem;
  white-space: nowrap;
}
.chat-nav-rail .nav-rail-user-status {
  color: var(--gc-success); font-size: .7rem; white-space: nowrap;
}

/* ====== PAGE HEADER (per content page) ====== */
.gc-page-header {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: 16px;
  flex-shrink: 0;
}
.gc-page-header h1, .gc-page-header h2, .gc-page-header h3 {
  margin: 0; font-weight: 600; line-height: 1.2;
}
.gc-page-header .gc-page-title { font-size: 1.25rem; font-weight: 600; }
.gc-page-header .gc-page-subtitle { font-size: .8125rem; color: #6b7280; }

.gc-page-body { padding: 1.25rem; flex: 1; overflow-y: auto; }

/* ====== Marketplace badges ====== */
.mp-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: .65rem; font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase;
  color: #fff;
}
.mp-badge.shopee { background: var(--gc-shopee); }
.mp-badge.lazada { background: var(--gc-lazada); }
.mp-badge.tiktok { background: var(--gc-tiktok); }

/* ====== Prominent marketplace pill (icon + name) ====== */
.mp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  font-size: .75rem; font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.mp-pill .mp-pill-logo {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .7rem;
}
.mp-pill.shopee { background: linear-gradient(135deg, #EE4D2D, #F76A35); }
.mp-pill.lazada { background: linear-gradient(135deg, #0F146D, #2436A8); }
.mp-pill.tiktok { background: #111; }
.mp-pill.tiktok .mp-pill-logo { background: linear-gradient(135deg, #25F4EE, #FE2C55); }

.mp-pill-sm {
  padding: 2px 8px 2px 2px; font-size: .65rem;
}
.mp-pill-sm .mp-pill-logo {
  width: 16px; height: 16px; font-size: .55rem;
}

/* Square icon variants */
.mp-icon {
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .65rem;
}
.mp-icon.shopee { background: var(--gc-shopee); }
.mp-icon.lazada { background: var(--gc-lazada); }
.mp-icon.tiktok { background: var(--gc-tiktok); }

/* ====== Marketplace filter button (tickets toolbar) ======
   White-fill outline button with brand-tinted border + brand text + small
   round logo badge (S/L/T). Ported 1:1 from prototype/pages/tickets.html
   L231-243. Used by the tickets marketplace filter row (GOC-86) — distinct
   from `.mp-pill` (brand-fill chip used in customers/inbox/connect). */
.mp-filter-btn {
  display: inline-flex; align-items: center;
  border: 1px solid #d6d8de;
  background: #fff;
  font-weight: 600;
}
/* "All" / unselected neutral look = grey border on white (prototype default). */
.mp-filter-btn.shopee { border-color: #f5cabc; color: var(--gc-shopee); }
.mp-filter-btn.lazada { border-color: #b2b5d6; color: var(--gc-lazada); }
.mp-filter-btn.tiktok { border-color: #bbb;     color: #111; }
/* Active state = brand-fill per channel, ported 1:1 from
   prototype/pages/tickets.html L85-91 (GOC-86 fix). "All" (no brand class) fills
   navy #283046; each channel fills its brand colour. Brand selectors carry 2
   classes (.shopee.active) so they out-specify the 1-class "All" rule below —
   no !important needed. */
.mp-filter-btn.active {
  background: #283046; /* prototype L85 — no dedicated token for navy */
  color: #fff;
  border-color: #283046;
}
.mp-filter-btn.shopee.active {
  background: var(--gc-shopee); /* prototype L86 */
  color: #fff;
  border-color: var(--gc-shopee);
}
.mp-filter-btn.lazada.active {
  background: var(--gc-lazada); /* prototype L87 */
  color: #fff;
  border-color: var(--gc-lazada);
}
.mp-filter-btn.tiktok.active {
  background: #111; /* prototype L88 — TikTok uses #111 here, not --gc-tiktok */
  color: #fff;
  border-color: #111;
}
/* Badge inverts to translucent white on the filled active button (prototype L89-91). */
.mp-filter-btn.active .mp-filter-btn__badge {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}
/* Round logo badge inside the filter button (S/L/T). */
.mp-filter-btn__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  margin-right: 5px;
  font-weight: 900; font-size: .65rem;
  color: #fff;
}
.mp-filter-btn__badge.shopee { background: var(--gc-shopee); }
.mp-filter-btn__badge.lazada { background: var(--gc-lazada); }
.mp-filter-btn__badge.tiktok { background: #111; color: #25F4EE; }

/* Avatar tint — gives each chat-list/conversation avatar a distinct yet stable
   fill so the inbox reads like the prototype (which hardcodes a per-customer
   `cust.color`). The React DTO has no colour field, so a deterministic helper
   (presentation.ts `avatarTint`) maps a stable id -> one of these variants.
   Every fill references an EXISTING brand token (--gc-*); no new hex is invented
   and the channel is still conveyed by the corner glyph, so the avatar palette
   is purely presentational. White text (set on the element) reads on all six. */
.gc-avatar-tint-1 { background: var(--gc-primary) !important; }
.gc-avatar-tint-2 { background: var(--gc-success) !important; }
.gc-avatar-tint-3 { background: var(--gc-info)    !important; }
.gc-avatar-tint-4 { background: var(--gc-warning) !important; }
.gc-avatar-tint-5 { background: var(--gc-danger)  !important; }
.gc-avatar-tint-6 { background: var(--gc-dark)    !important; }

/* Channel corner glyph — small circle overlay anchored at the avatar's
   bottom-right corner with a white ring (inbox chat-list-item).
   Mirrors prototype/pages/inbox.html renderChatList (~L918-923). */
.mp-icon-corner {
  width: 14px; height: 14px; border-radius: 50%;
  font-size: 7px; border: 2px solid #fff;
  position: absolute; bottom: -2px; right: -2px;
}

/* ====== Stat card ====== */
.gc-stat-card {
  background: #fff; border: 1px solid rgba(0,0,0,.05);
  border-radius: .5rem; padding: 1.25rem;
  transition: transform .15s, box-shadow .15s;
}
.gc-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.gc-stat-card .gc-stat-icon {
  width: 44px; height: 44px; border-radius: .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.gc-stat-card .gc-stat-value {
  font-size: 1.75rem; font-weight: 700;
  margin: .25rem 0; line-height: 1.1;
}
.gc-stat-card .gc-stat-label {
  font-size: .8125rem; color: #6b7280;
}

/* ====== Status badges ====== */
.gc-badge-status {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 500;
}
.gc-badge-status.open       { background: rgba(78,106,240,.12);  color: #4E6AF0; }
.gc-badge-status.inprogress { background: rgba(255,159,67,.12);  color: #FF9F43; }
.gc-badge-status.resolved   { background: rgba(40,199,111,.12);  color: #28C76F; }
.gc-badge-status.closed     { background: rgba(108,117,125,.12); color: #6C757D; }
.gc-badge-status.escalated  { background: rgba(234,84,85,.12);   color: #EA5455; }
.gc-badge-status.ai_handling{ background: rgba(0,207,232,.12);   color: #00CFE8; }
.gc-badge-status.urgent     { background: rgba(234,84,85,.15);   color: #EA5455; }
.gc-badge-status.high       { background: rgba(255,159,67,.15);  color: #FF9F43; }
.gc-badge-status.medium     { background: rgba(0,207,232,.15);   color: #00CFE8; }
.gc-badge-status.low        { background: rgba(108,117,125,.15); color: #6C757D; }

/* ====== Chat (re-used) ====== */
.chat-bubble {
  max-width: 70%; padding: 10px 16px; border-radius: 16px;
  margin-bottom: 8px; word-wrap: break-word;
}
.chat-bubble-self {
  background: var(--gc-chat-bubble-self); color: #fff;
  border-bottom-right-radius: 4px; margin-left: auto;
}
.chat-bubble-other {
  background: var(--gc-chat-bubble-other); color: var(--gc-dark);
  border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.chat-list-item {
  padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.05);
  cursor: pointer; transition: background .15s;
  position: relative;
}
.chat-list-item:hover, .chat-list-item.active {
  background: rgba(78,106,240,.08);
}
.chat-input-area {
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 12px 16px; background: #fff;
}
.typing-indicator { display: flex; gap: 4px; padding: 4px 0; }
.typing-indicator span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gc-secondary); animation: gc-typing 1.4s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }
@keyframes gc-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ====== AI suggestion card ====== */
.gc-ai-suggest {
  background: linear-gradient(135deg, rgba(78,106,240,.06), rgba(0,207,232,.06));
  border: 1px solid rgba(78,106,240,.2);
  border-radius: .5rem; padding: 12px;
  margin-bottom: 8px;
}
.gc-ai-suggest .gc-ai-conf {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .7rem; font-weight: 600;
}
.gc-ai-suggest .gc-ai-conf.high   { color: #28C76F; }
.gc-ai-suggest .gc-ai-conf.medium { color: #FF9F43; }
.gc-ai-suggest .gc-ai-conf.low    { color: #EA5455; }
.gc-ai-suggest .gc-ai-sources {
  font-size: .7rem; color: #6b7280; margin-top: 4px;
}

/* ====== Inbox 3-pane (ported verbatim from prototype/pages/inbox.html <style>) ======
   Source of truth for markup/layout = prototype inbox.html. Hardcoded hex from the
   prototype is preserved as-is EXCEPT where a --gc-* token already exists (then the
   token wins). These structural rules let the React InboxPage render the SAME class
   markup the prototype uses (design-system-ui §0). */
.inbox-shell {
  display: grid;
  grid-template-columns: 340px 1fr 340px;
  height: 100%;
  background: #fff;
}
.inbox-list {
  border-right: 1px solid #e9ecf1;
  display: flex; flex-direction: column;
  min-height: 0;
  background: #fff;
}
.inbox-list-header {
  padding: 16px;
  border-bottom: 1px solid #f1f4f9;
}

/* Store picker button — sits at very top */
.store-picker-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: #fff; border: 0;
  border-bottom: 1px solid #e9ecf1;
  font-size: .85rem; font-weight: 600; color: var(--gc-dark);
  cursor: pointer; transition: background .15s;
  text-align: left;
}
.store-picker-btn:hover { background: #f8f8fa; }
.store-picker-btn.has-filter { background: rgba(78,106,240,.06); }

/* Store picker dropdown panel (multi-select channel filter) — ported from
   prototype/pages/inbox.html so the React StorePicker renders identically. */
.store-picker-pop {
  position: absolute;
  top: 48px; left: 8px; right: 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  border: 1px solid #e9ecf1;
  max-height: calc(100vh - 80px);
  display: none; flex-direction: column;
  z-index: 200;
  overflow: hidden;
}
.store-picker-pop.show { display: flex; }
.store-picker-pop .sp-head {
  padding: 12px 14px; border-bottom: 1px solid #f1f4f9;
  background: linear-gradient(135deg, rgba(78,106,240,.05), rgba(0,207,232,.05));
}
.store-picker-pop .sp-head .small { font-size: .7rem; }
.store-picker-pop .sp-body { flex: 1; overflow-y: auto; padding: 6px 0; }
.store-picker-pop .sp-foot {
  padding: 10px 14px; border-top: 1px solid #f1f4f9;
  display: flex; gap: 6px; align-items: center;
  background: #fafbfc;
}
.sp-brand-group { padding: 6px 14px 0; }
.sp-brand-group .sp-brand-name {
  font-size: .65rem; text-transform: uppercase;
  color: #939ca9; font-weight: 700;
  letter-spacing: .5px; margin-bottom: 4px;
}
.sp-store-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  cursor: pointer; transition: background .12s;
  font-size: .8rem;
}
.sp-store-row:hover { background: rgba(0,0,0,.03); }
.sp-store-row.selected { background: rgba(78,106,240,.07); }
.sp-store-row input { margin: 0; }
.sp-store-row .sp-mp-dot {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: .55rem;
  flex-shrink: 0;
}
.sp-store-row .sp-mp-dot.shopee { background: var(--gc-shopee); }
.sp-store-row .sp-mp-dot.lazada { background: var(--gc-lazada); }
.sp-store-row .sp-mp-dot.tiktok { background: var(--gc-tiktok); }
.sp-store-row .sp-mp-name { color: var(--gc-dark); font-weight: 500; flex: 1; }
.sp-store-row .sp-count {
  background: #f1f4f9; color: #6b7280;
  padding: 1px 8px; border-radius: 999px;
  font-size: .7rem; font-weight: 600;
}
.sp-select-all {
  padding: 8px 14px; border-bottom: 1px solid #f1f4f9;
  display: flex; align-items: center; gap: 10px;
  font-size: .8rem; font-weight: 600;
  cursor: pointer;
}
.sp-select-all:hover { background: rgba(0,0,0,.02); }

.inbox-filters {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f4f9;
  display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: thin;
}
.inbox-filters::-webkit-scrollbar { height: 4px; }
.filter-chip {
  flex-shrink: 0;
  padding: 4px 10px; border-radius: 999px;
  background: #f8f8fa; border: 1px solid transparent;
  font-size: .7rem; font-weight: 500;
  color: #515965; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.filter-chip:hover { background: #f1f4f9; }
.filter-chip.active { background: var(--gc-primary); color: #fff; border-color: var(--gc-primary); }
.filter-chip .chip-count {
  display: inline-block; margin-left: 4px;
  padding: 0 6px; background: rgba(0,0,0,.1); border-radius: 8px;
  font-size: .65rem;
}
.filter-chip.active .chip-count { background: rgba(255,255,255,.2); }

.chat-list-scroll { flex: 1; overflow-y: auto; }
.chat-list-item.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gc-primary);
}
.chat-mp-strip {
  display: inline-block;
  width: 3px; height: 14px; border-radius: 2px;
  margin-right: 6px; vertical-align: middle;
}
.chat-mp-strip.shopee { background: var(--gc-shopee); }
.chat-mp-strip.lazada { background: var(--gc-lazada); }
.chat-mp-strip.tiktok { background: var(--gc-tiktok); }

/* Conversation pane */
.conv-pane {
  display: flex; flex-direction: column;
  background: var(--gc-chat-bg);
  min-height: 0;
}
.conv-header {
  background: #fff; padding: 12px 20px;
  border-bottom: 1px solid #e9ecf1;
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.conv-messages {
  flex: 1; overflow-y: auto; padding: 20px;
}
.conv-date-sep {
  text-align: center; margin: 16px 0;
}
.conv-date-sep span {
  background: rgba(0,0,0,.06); color: #515965;
  padding: 3px 12px; border-radius: 999px;
  font-size: .7rem; font-weight: 500;
}
.msg-row { display: flex; margin-bottom: 12px; gap: 8px; }
.msg-row.self { justify-content: flex-end; }
.msg-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: .7rem;
  flex-shrink: 0; align-self: flex-end;
}
.msg-meta {
  font-size: .65rem; color: #939ca9; margin-top: 2px;
}
.msg-row.self .msg-meta { text-align: right; }
/* System note row (prototype inbox.html CSS L211-216) — centered pill, not a chat bubble. */
.msg-row.system { justify-content: center; }
.msg-row.system .msg-bubble {
  background: rgba(255,159,67,.12); color: var(--gc-warning);
  font-size: .75rem; padding: 6px 12px; border-radius: 8px;
  font-weight: 500; max-width: 80%;
}

/* Composer */
.composer-wrap {
  background: #fff;
  border-top: 1px solid #e9ecf1;
  padding: 12px 16px;
  flex-shrink: 0;
}
.composer-input {
  display: flex; gap: 8px; align-items: flex-end;
}
.composer-input textarea {
  flex: 1; border: 1px solid #e9ecf1; border-radius: 20px;
  padding: 10px 16px; resize: none; font-size: .875rem;
  line-height: 1.4; max-height: 120px;
  font-family: inherit;
}
.composer-input textarea:focus { outline: none; border-color: var(--gc-primary); }

/* Context panel (right) */
.ctx-pane {
  border-left: 1px solid #e9ecf1;
  background: #fff;
  display: flex; flex-direction: column;
  min-height: 0;
}
.ctx-tabs {
  display: flex; border-bottom: 1px solid #f1f4f9;
  flex-shrink: 0;
}
.ctx-tab {
  flex: 1; padding: 12px;
  background: none; border: none;
  font-size: .8125rem; font-weight: 500;
  color: #6b7280; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .15s;
}
.ctx-tab:hover { color: var(--gc-primary); }
.ctx-tab.active { color: var(--gc-primary); border-color: var(--gc-primary); }
.ctx-body { flex: 1; overflow-y: auto; padding: 16px; }

.ctx-section { margin-bottom: 20px; }
.ctx-section-title {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  color: #6b7280; letter-spacing: .5px;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.ctx-section-title .source-badge {
  margin-left: auto; padding: 2px 8px; border-radius: 999px;
  font-size: .6rem; font-weight: 600;
  background: rgba(0,0,0,.06); color: #515965;
  text-transform: none; letter-spacing: 0;
}
.ctx-section-title .source-badge.gosell { background: rgba(78,106,240,.1); color: var(--gc-primary); }
.ctx-section-title .source-badge.marketplace { background: rgba(255,159,67,.1); color: var(--gc-warning); }

.ctx-row {
  display: flex; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid #f8f8fa;
  font-size: .8125rem;
}
.ctx-row:last-child { border-bottom: none; }
.ctx-row .label { color: #6b7280; }
.ctx-row .value { font-weight: 500; color: var(--gc-dark); }

.ctx-tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 500;
  color: #fff; margin: 2px 4px 2px 0;
}

/* Grey inner card holding the latest order in the context panel
   (prototype inbox.html L1529 `.p-2 .rounded` on background #f8f8fa). */
.ctx-order-card {
  background: #f8f8fa;
  border-radius: var(--border-radius, .375rem);
}

/* Per-line-item stock pill in the latest-order context card (prototype
   inbox.html .stock-pill). high = in stock / low = running low / zero = out. */
.stock-pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: .65rem; font-weight: 600;
}
.stock-pill.high { background: rgba(40,199,111,.15); color: #28C76F; }
.stock-pill.low  { background: rgba(255,159,67,.15); color: #FF9F43; }
.stock-pill.zero { background: rgba(234,84,85,.15);  color: #EA5455; }

/* Inbox 3-pane responsive collapse (prototype @media) */
@media (max-width: 1100px) {
  .inbox-shell { grid-template-columns: 320px 1fr; }
  .inbox-shell > .ctx-pane { display: none; }
}
@media (max-width: 768px) {
  .inbox-shell { grid-template-columns: 1fr; }
  .inbox-shell > .inbox-list { display: none; }
}

/* ====== Utility ====== */
.min-width-0 { min-width: 0; }
.w-32px { width: 32px; }   .h-32px { height: 32px; }
.w-40px { width: 40px; }   .h-40px { height: 40px; }
.w-44px { width: 44px; }   .h-44px { height: 44px; }
.w-48px { width: 48px; }   .h-48px { height: 48px; }
.w-64px { width: 64px; }   .h-64px { height: 64px; }

.gc-cursor-pointer { cursor: pointer; }
.gc-no-decoration { text-decoration: none; color: inherit; }
.gc-no-decoration:hover { color: var(--gc-primary); }

/* ====== Onboarding stepper ====== */
.gc-stepper {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.gc-stepper .step {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid #e9ecf1;
  font-size: .8125rem; color: #6b7280;
}
.gc-stepper .step.active {
  background: var(--gc-primary); border-color: var(--gc-primary); color: #fff;
}
.gc-stepper .step.done {
  background: rgba(40,199,111,.12); border-color: rgba(40,199,111,.3); color: #28C76F;
}
.gc-stepper .step-number {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.05); color: #6b7280;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .7rem;
}
.gc-stepper .step.active .step-number {
  background: rgba(255,255,255,.25); color: #fff;
}
.gc-stepper .step.done .step-number {
  background: #28C76F; color: #fff;
}

/* ====== Accessibility ====== */
/* Strong focus indicator */
*:focus-visible {
  outline: 3px solid #4E6AF0 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  box-shadow: 0 0 0 3px rgba(78, 106, 240, .35) !important;
}
/* Skip link — invisible until focused */
.gc-skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--gc-primary); color: #fff;
  padding: 8px 14px; border-radius: 6px;
  z-index: 99999; font-weight: 600;
}
.gc-skip-link:focus { left: 8px; }
/* Visually-hidden helper */
.gc-visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ====== Skeleton loading ====== */
.gc-skel {
  display: inline-block;
  background: linear-gradient(90deg, #f1f4f9 0%, #e5e9ef 50%, #f1f4f9 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: gcSkel 1.4s ease-in-out infinite;
}
.gc-skel-line   { display: block; height: 14px; margin-bottom: 8px; }
.gc-skel-line.w-25 { width: 25%; }
.gc-skel-line.w-50 { width: 50%; }
.gc-skel-line.w-75 { width: 75%; }
.gc-skel-line.w-100 { width: 100%; }
.gc-skel-circle { width: 40px; height: 40px; border-radius: 50%; }
.gc-skel-box    { display: block; height: 120px; border-radius: 10px; }
@keyframes gcSkel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ====== Drag-and-drop ====== */
.gc-draggable { cursor: grab; user-select: none; }
.gc-draggable:active { cursor: grabbing; }
.gc-drag-handle { cursor: grab; color: #939ca9; }
.gc-drag-handle:hover { color: #4E6AF0; }
.gc-dragging { opacity: .4; }
.gc-drop-target {
  outline: 2px dashed #4E6AF0;
  outline-offset: -2px;
  background: rgba(78,106,240,.04);
}

/* ====== Mobile responsive ====== */

/* Mobile hamburger toggle — hidden on desktop */
.gc-mobile-toggle {
  display: none;
  position: fixed; top: 12px; left: 12px;
  z-index: 1001;
  width: 40px; height: 40px;
  border: none; border-radius: 10px;
  background: var(--gc-primary); color: #fff;
  align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.gc-mobile-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 999;
}
.gc-mobile-backdrop.show { display: block; }

@media (max-width: 991px) {
  .gc-mobile-toggle { display: inline-flex; }
  .chat-nav-rail {
    position: fixed !important; top: 0 !important; bottom: 0 !important; left: -280px !important;
    width: 240px !important;
    transition: left .25s ease !important;
    z-index: 1000 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
  }
  .chat-nav-rail.mobile-open { left: 0 !important; }
  .chat-nav-rail .nav-rail-label { display: inline-block !important; }
  .chat-nav-rail .nav-rail-item { justify-content: flex-start !important; padding: 10px 14px !important; }
  .chat-nav-rail .nav-rail-logo-icon { display: none !important; }
  .chat-nav-rail .nav-rail-logo-full { display: flex !important; }

  /* Push main content to fill screen */
  /* NOTE: descendant (not direct-child) so it matches through React's
     <div id="root"> wrapper — body.gc-app #root main.gc-content */
  body.gc-app .gc-content,
  body.gc-app main.gc-content {
    width: 100% !important;
    padding-top: 56px;  /* room for hamburger */
  }

  /* Page header adjustments */
  .gc-page-header {
    flex-wrap: wrap !important;
    gap: 8px;
  }
  .gc-page-header > div:first-child { width: 100%; }
  .gc-page-header .ms-auto { margin-left: 0 !important; width: 100%; flex-wrap: wrap; }
  .gc-page-title { font-size: 1.15rem !important; }
  .gc-page-subtitle { font-size: .75rem !important; }

  /* Tables — allow horizontal scroll, stack actions */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table th, .table td { white-space: nowrap; }

  /* KPI cards stack 2x2 */
  .kpi-card .fs-3 { font-size: 1.2rem !important; }
  .kpi-icon-wrap { width: 36px !important; height: 36px !important; font-size: 1rem !important; }

  /* Touch-friendly buttons */
  .btn-sm { padding: 6px 12px; min-height: 36px; }
  .btn-icon { min-width: 36px; min-height: 36px; }

  /* Inbox 3-pane → stack vertically */
  .inbox-3pane { flex-direction: column !important; }
  .inbox-3pane > * { width: 100% !important; max-width: none !important; }
  .conv-pane { min-height: 60vh; }
  .ctx-pane { display: none; } /* hide context panel on mobile */

  /* Settings nav becomes horizontal tabs */
  .settings-nav { display: flex !important; flex-direction: row !important; overflow-x: auto; padding: 8px !important; }
  .settings-nav-item { white-space: nowrap; flex-shrink: 0; }

  /* Status tabs horizontal scroll */
  .status-tab { padding: 12px 14px !important; font-size: .8rem !important; }

  /* Modals fill more screen */
  .gc-modal { width: calc(100vw - 24px) !important; max-width: 100% !important; }

  /* Bulk toolbar wraps */
  #bulkToolbar { flex-wrap: wrap; }

  /* Hide non-essential text on small */
  .d-mobile-none { display: none !important; }
}

@media (max-width: 576px) {
  .row.g-3 > .col-md-6 { padding: 6px; }
  .gc-page-body { padding: 12px !important; }
  .card-body { padding: 12px !important; }
  .card-header { padding: 10px 12px !important; }
  .btn-group-sm > .btn { padding: 4px 8px; font-size: .7rem; }
  .gc-page-title { font-size: 1rem !important; }
}

/* ====== Print stylesheet ====== */
@media print {
  body.gc-app {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }
  /* Hide chrome */
  .chat-nav-rail,
  .gc-mobile-toggle,
  .gc-mobile-backdrop,
  .gc-page-header .ms-auto,
  .gc-page-header a[href*="back"],
  .dropdown,
  .btn,
  .composer-wrap,
  .ai-suggest-bar,
  .filter-chip,
  .gc-toast-container,
  .gc-modal-backdrop,
  #savedViewsRow,
  #bulkToolbar,
  .pagination,
  .card-footer .pagination,
  [data-bs-toggle],
  .inbox-list,
  .ctx-pane,
  #gc-shell,
  .gc-tour-overlay {
    display: none !important;
  }
  main.gc-content,
  body.gc-app .gc-content {
    width: 100% !important;
    overflow: visible !important;
    display: block !important;
  }
  /* Page break helpers */
  .card { page-break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd !important; }
  .card-header { background: #f8f8fa !important; }
  /* Show URLs after links */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: .7em; color: #6b7280;
  }
  a[href^="#"]:after, a[href^="javascript:"]:after, a[onclick]:after { content: ""; }

  /* Typography */
  body { font-size: 11pt; line-height: 1.4; color: #000; }
  h1, h2, h3, h4, h5, h6 { color: #000; page-break-after: avoid; }

  /* Make charts shrink */
  .chart-host, .chart-host.tall { max-height: 200px; overflow: hidden; }

  /* Header bar — keep title only */
  .gc-page-header {
    border-bottom: 2px solid #283046 !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
  }
  .gc-page-title { font-size: 18pt !important; color: #000 !important; }
  .gc-page-subtitle { font-size: 10pt !important; }

  /* Print-only header (add via JS or just show URL) */
  body::before {
    content: "GoChat Marketplace · Printed " attr(data-print-date);
    display: block; text-align: right;
    font-size: 9pt; color: #6b7280;
    padding: 4px 0; border-bottom: 1px solid #ddd;
    margin-bottom: 8px;
  }
}

/* ====================================================
   PRINT STYLESHEET — make ticket/customer/report pages printable
   ==================================================== */
@media print {
  /* Page setup */
  @page {
    size: A4;
    margin: 14mm 14mm 18mm 14mm;
  }

  /* Reset body — kill flex layout that fights print pagination */
  body.gc-app {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }
  body.gc-app .gc-content,
  body.gc-app main.gc-content {
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* Hide chrome */
  .chat-nav-rail,
  .gc-mobile-toggle,
  .gc-mobile-backdrop,
  .gc-toast-container,
  .gc-modal-backdrop,
  .gc-lightbox,
  .gc-tour-overlay,
  #gc-shell,
  /* page-level actions */
  .gc-page-header .ms-auto,
  /* drop-downs / icon-only buttons */
  .dropdown,
  .btn-icon,
  /* search/filter bars */
  .inbox-filters,
  #savedViewsRow,
  #bulkToolbar,
  #pagerHost,
  /* nav tabs / chips */
  .filter-chip,
  .status-tab .count,
  .mp-filter-btn,
  /* status changer buttons in ticket-detail */
  .btn-group,
  /* anything explicitly marked no-print */
  .d-print-none,
  .no-print {
    display: none !important;
  }

  /* Reveal print-only elements */
  .d-print-block { display: block !important; }
  .d-print-inline { display: inline !important; }

  /* Header: keep title + subtitle */
  .gc-page-header {
    border-bottom: 2px solid #283046 !important;
    padding-bottom: 8mm !important;
    margin-bottom: 6mm !important;
  }
  .gc-page-title {
    font-size: 18pt !important;
    color: #283046 !important;
  }
  .gc-page-subtitle {
    font-size: 10pt !important;
    color: #6b7280 !important;
  }

  /* Cards become plain */
  .card {
    border: 1px solid #d6d8de !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    margin-bottom: 4mm !important;
    border-radius: 4px !important;
    background: #fff !important;
  }
  .card-header {
    background: #f8f8fa !important;
    border-bottom: 1px solid #e9ecf1 !important;
    padding: 6pt 10pt !important;
    font-size: 10pt !important;
  }
  .card-body { padding: 8pt 10pt !important; }

  /* Tables */
  table {
    page-break-inside: auto;
    font-size: 9pt;
    border-collapse: collapse !important;
    width: 100% !important;
  }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; page-break-after: auto; }
  th, td {
    border: 1px solid #d6d8de !important;
    padding: 4pt 6pt !important;
    color: #283046 !important;
  }
  th { background: #f1f4f9 !important; font-weight: 700 !important; }

  /* Charts — don't lose them, but kill animations */
  .chart-host { page-break-inside: avoid; }

  /* Marketplace pill keeps color in print */
  .mp-pill {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
  }

  /* Links — show URL after */
  a[href]:not(.no-url-print)::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #6b7280;
    word-break: break-all;
  }
  /* But not for internal anchor refs */
  a[href^="#"]::after,
  a[href^="javascript:"]::after,
  a[href^="mailto:"]::after { content: ""; }

  /* Print header / footer on every page */
  body.gc-app::before {
    content: "GoChat Marketplace — Bangkok Beauty Studio";
    display: block;
    font-size: 8pt;
    color: #939ca9;
    text-align: right;
    margin-bottom: 4mm;
    border-bottom: 1px solid #e9ecf1;
    padding-bottom: 2mm;
  }
  body.gc-app::after {
    content: "Printed: " attr(data-print-date);
    display: block;
    font-size: 7.5pt;
    color: #939ca9;
    text-align: center;
    margin-top: 8mm;
    border-top: 1px solid #e9ecf1;
    padding-top: 3mm;
  }

  /* Inbox — print only conversation, not list/context */
  .inbox-list, .ctx-pane { display: none !important; }
  .conv-pane {
    width: 100% !important;
    min-height: auto !important;
  }
  .composer-wrap { display: none !important; }
  .conv-messages { overflow: visible !important; height: auto !important; }
  .msg-row { page-break-inside: avoid; }

  /* Ticket detail — keep hero banner colorful */
  .card[style*="border-left:6px solid"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Force backgrounds */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ====================================================
   ACCESSIBILITY — focus indicators, screen reader text
   ==================================================== */
/* Visible focus outline for keyboard nav (skip mouse) */
*:focus-visible {
  outline: 3px solid #4E6AF0 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
/* Buttons / links keep brand focus */
.btn:focus-visible,
.nav-rail-item:focus-visible,
.chat-list-item:focus-visible {
  outline: 3px solid #FFD648 !important;
  outline-offset: 2px !important;
}
/* Inputs use primary glow */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 0 !important;
  border-color: #4E6AF0 !important;
  box-shadow: 0 0 0 3px rgba(78,106,240,.2) !important;
}

/* Screen-reader-only text — visually hidden but readable by AT */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip link (visible on focus) */
.gc-skip-link {
  position: absolute;
  top: -40px; left: 8px;
  background: #283046; color: #fff;
  padding: 8px 14px; border-radius: 6px;
  z-index: 99999; text-decoration: none;
  font-weight: 600;
  transition: top .2s;
}
.gc-skip-link:focus {
  top: 8px;
  color: #fff;
}

/* Color contrast — bump muted text slightly */
.text-muted { color: #6b7280 !important; }     /* was lighter — now AA on white */
.small.text-muted, small.text-muted { color: #515965 !important; }

/* Status indicators get sr-only text added via JS, but make them >= 12px */
.status-indicator,
.status-dot,
.status-dot-mini {
  min-width: 8px; min-height: 8px;
}

/* Reduce motion when user prefers */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .gc-skel { animation: none !important; }
}

/* ============================================================
   Dashboard page (FR / DASHBOARD) — base rules ported 1:1 from
   prototype/pages/dashboard.html inline <style> so the React
   Dashboard pairs with the responsive overrides already above
   (.kpi-card .fs-3, .kpi-icon-wrap, .chart-host @media blocks).
   Colours/spacing come from --gc-* tokens / Limitless radii — no
   page-level hardcoding in React (design-system-ui rules 2 & 3).
   ============================================================ */
.kpi-card { transition: transform .15s, box-shadow .15s; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.kpi-icon-wrap {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
/* GOC-88: `.chart-host` height is page-scoped — Dashboard 260px vs
   ai-performance 280px previously collided (last-wins gave Dashboard 280px).
   Base rule keeps width + a safe default height; per-page height is set under
   the page-root class (.dash-page / .aip-page on .gc-page-body). */
.chart-host { width: 100%; height: 260px; }
.gc-page-body.dash-page .chart-host { height: 260px; }
.gc-page-body.dash-page .chart-host.tall { height: 320px; }
.risk-item {
  padding: 12px; border-radius: 8px; background: #f8f8fa;
  border-left: 3px solid var(--gc-warning);
  margin-bottom: 8px;
}
.risk-item.critical { border-color: var(--gc-danger); background: rgba(234,84,85,.04); }
.risk-item.warning { border-color: var(--gc-warning); }
.risk-item.info { border-color: var(--gc-info); }
.agent-row { padding: 10px 0; border-bottom: 1px solid #f1f4f9; }
.agent-row:last-child { border-bottom: none; }
.progress-thin { height: 4px; }

/* ============================================================
   UI Rework Task #5 — page-local classes ported from the
   prototypes' inline <style> (ai-suggested / routing / tags).
   Brand colours use the --gc-* tokens; only the prototype's
   neutral lines/surfaces keep their hex (no token exists for
   them yet, matching the dashboard rework above).
   ============================================================ */

/* --- AI Suggested Reply Queue (prototype/pages/ai-suggested.html) --- */
.ai-card {
  background: #fff; border: 1px solid #e9ecf1;
  border-radius: 12px; padding: 18px; margin-bottom: 14px;
  transition: box-shadow .15s;
}
.ai-card.high   { border-left: 4px solid var(--gc-success); }
.ai-card.medium { border-left: 4px solid var(--gc-warning); }
.ai-card.low    { border-left: 4px solid var(--gc-danger); }
.ai-card:hover  { box-shadow: 0 6px 18px rgba(0,0,0,.06); }

.conf-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 600;
  background: rgba(78,106,240,.15); color: var(--gc-primary);
}
.ai-card.high   .conf-pill { background: rgba(40,199,111,.15); color: var(--gc-success); }
.ai-card.medium .conf-pill { background: rgba(255,159,67,.15); color: var(--gc-warning); }
.ai-card.low    .conf-pill { background: rgba(234,84,85,.15);  color: var(--gc-danger); }

.src-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 6px;
  font-size: .65rem; font-weight: 600;
  background: rgba(78,106,240,.08); color: var(--gc-primary);
  margin: 2px 4px 2px 0;
}
.customer-msg {
  background: #f8f8fa; padding: 10px 14px; border-radius: 10px;
  border-bottom-left-radius: 2px;
  font-size: .875rem; margin-bottom: 10px; max-width: 80%;
}
.ai-suggested-text {
  background: linear-gradient(135deg, rgba(78,106,240,.06), rgba(0,207,232,.06));
  border: 1px solid rgba(78,106,240,.2);
  padding: 12px 16px; border-radius: 10px;
  font-size: .9rem; line-height: 1.5; color: var(--gc-dark);
  margin-top: 8px;
}
.editable {
  width: 100%; min-height: 80px;
  border: 1px solid rgba(78,106,240,.25);
  background: #fff; padding: 10px 14px; border-radius: 8px;
  font-family: inherit; font-size: .9rem; resize: vertical;
}
.editable:focus { outline: none; border-color: var(--gc-primary); box-shadow: 0 0 0 3px rgba(78,106,240,.1); }

/* --- Routing Rules (prototype/pages/routing.html) --- */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; cursor: pointer; inset: 0; background: #c5cad5; transition: .25s; border-radius: 34px; }
.switch-slider::before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; transition: .25s; border-radius: 50%; }
.switch input:checked + .switch-slider { background: var(--gc-success); }
.switch input:checked + .switch-slider::before { transform: translateX(18px); }

.rule-flow { display: flex; align-items: center; gap: 10px; padding: 12px; background: #f8f8fa; border-radius: 10px; flex-wrap: wrap; }
.flow-node {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: #fff; border: 1px solid #e9ecf1;
  font-size: .8rem; font-weight: 500;
}
.flow-node.trigger   { background: rgba(0,207,232,.1);  color: var(--gc-info);    border-color: rgba(0,207,232,.3); }
.flow-node.condition { background: rgba(255,159,67,.1); color: var(--gc-warning); border-color: rgba(255,159,67,.3); }
.flow-node.action    { background: rgba(40,199,111,.1); color: var(--gc-success); border-color: rgba(40,199,111,.3); }
.flow-arrow { color: #c5cad5; font-size: 1.2rem; }

.strategy-card {
  padding: 18px; border-radius: 12px;
  background: #fff; border: 2px solid #e9ecf1;
  cursor: pointer; transition: all .15s; height: 100%;
}
.strategy-card:hover { border-color: var(--gc-primary); }
.strategy-card.active { border-color: var(--gc-primary); background: rgba(78,106,240,.05); }
.strategy-card .check {
  width: 20px; height: 20px; border-radius: 50%;
  background: #e9ecf1; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: .7rem;
}
.strategy-card.active .check { background: var(--gc-primary); }

/* --- Tags (prototype/pages/tags.html) --- */
.tag-card {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; border-radius: 10px;
  background: #fff; border: 1px solid #e9ecf1;
  transition: all .15s;
}
.tag-card:hover { border-color: var(--gc-primary); box-shadow: 0 6px 18px rgba(78,106,240,.08); }
.tag-color-block {
  width: 48px; height: 48px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.1rem;
}
.color-swatch {
  width: 28px; height: 28px; border-radius: 6px;
  cursor: pointer; border: 2px solid transparent; transition: all .12s;
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.selected { border-color: var(--gc-dark); transform: scale(1.1); box-shadow: 0 0 0 2px #fff inset; }

/* ============================================================
   UI Rework Task #6 — page-local classes ported from the
   prototypes' inline <style> (customers / customer-detail /
   sla / settings / connections / team). Brand colours use the
   --gc-* tokens; only the prototypes' neutral lines/surfaces
   keep their hex (no token exists for them yet, matching the
   Task #5 block above). `.switch`/`.switch-slider` already ship
   in the Task #5 block and are reused as-is.
   ============================================================ */

/* --- Customers list (prototype/pages/customers.html) --- */
.customer-row { transition: background .15s; }
.customer-row:hover { background: rgba(78,106,240,.04); }
.customer-row td { vertical-align: middle; padding: 12px; }

/* --- Customer profile (prototype/pages/customer-detail.html) --- */
.profile-hero {
  background: linear-gradient(135deg, var(--customer-color, var(--gc-primary)) 0%, var(--gc-dark) 100%);
  color: #fff; border-radius: 12px;
  padding: 24px; position: relative; overflow: hidden;
}
.profile-hero::before {
  content: ''; position: absolute; top: -40%; right: -10%;
  width: 50%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%);
  border-radius: 50%;
}
.profile-hero > * { position: relative; z-index: 1; }
.profile-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,.2); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700;
  border: 3px solid rgba(255,255,255,.3);
}
.stat-mini { background: rgba(255,255,255,.12); border-radius: 8px; padding: 12px; text-align: center; }
.timeline-item { position: relative; padding: 0 0 16px 28px; border-left: 2px solid #e9ecf1; }
.timeline-item:last-child { border-color: transparent; }
.timeline-dot {
  position: absolute; left: -8px; top: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--gc-primary);
}
.timeline-dot.success { border-color: var(--gc-success); }
.timeline-dot.warning { border-color: var(--gc-warning); }
.timeline-dot.danger  { border-color: var(--gc-danger); }
.timeline-dot.info    { border-color: var(--gc-info); }

/* --- Activity feed (prototype/pages/ticket-detail.html L22-31) ---
   Icon-box timeline used by the ticket-detail "กิจกรรม" card. Each item's icon
   box is tinted per event via the `--activity-color` custom property (set inline
   from a --gc-* token), so no hex is hardcoded here — the box uses that token at
   ~13% alpha (`color-mix`) for the fill and full strength for the glyph, matching
   the prototype `background:${color}22;color:${color}`. */
.activity-item {
  padding: 12px 0; border-bottom: 1px solid #f1f4f9;
  display: flex; gap: 12px;
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--activity-color, var(--gc-primary));
  background: color-mix(in srgb, var(--activity-color, var(--gc-primary)) 13%, transparent);
}

/* --- SLA configuration (prototype/pages/sla.html) --- */
.sla-row {
  display: grid; grid-template-columns: 280px 140px 120px 1fr 100px;
  gap: 12px; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid #f1f4f9;
}
.sla-row:last-child { border-bottom: none; }
.sla-row.head { background: #f8f8fa; font-weight: 600; font-size: .75rem; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; padding: 10px 16px; }
.sla-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; flex-shrink: 0; }
.esc-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; background: #f8f8fa; border-radius: 8px; }
.esc-node { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: #fff; border: 1px solid #e9ecf1; font-size: .75rem; }

/* --- Settings (prototype/pages/settings.html) --- */
.settings-nav { background: #fff; border: 1px solid #e9ecf1; border-radius: 12px; padding: 8px; position: sticky; top: 0; }
.settings-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 8px;
  color: #515965; cursor: pointer;
  text-decoration: none; font-size: .875rem;
  transition: all .15s; margin-bottom: 2px;
}
.settings-nav-item:hover { background: #f8f8fa; color: var(--gc-dark); }
.settings-nav-item.active { background: rgba(78,106,240,.1); color: var(--gc-primary); font-weight: 600; }
.pkg-card {
  padding: 18px; border-radius: 14px;
  background: #fff; border: 2px solid #e9ecf1;
  cursor: pointer; transition: all .15s;
  height: 100%; display: flex; flex-direction: column;
}
.pkg-card.current { border-color: var(--gc-primary); }
.pkg-card.recommended { border-color: #FFD648; position: relative; }
.pkg-card.recommended::before {
  content: 'แนะนำ'; position: absolute; top: -12px; right: 18px;
  background: #FFD648; color: var(--gc-dark); padding: 3px 10px;
  border-radius: 999px; font-size: .7rem; font-weight: 700;
}

/* --- Connections (prototype/pages/connections.html) --- */
.conn-card { background: #fff; border: 1px solid #e9ecf1; border-radius: 12px; padding: 18px; height: 100%; display: flex; flex-direction: column; }
.conn-card.connected { border-color: rgba(40,199,111,.4); }
.conn-card .mp-logo { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.5rem; }
.conn-detail-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f8f8fa; font-size: .8rem; }
.conn-detail-row:last-child { border-bottom: none; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: 600; }
.status-pill.healthy { background: rgba(40,199,111,.15); color: var(--gc-success); }
.status-pill.degraded { background: rgba(255,159,67,.15); color: var(--gc-warning); }
.status-pill.failed { background: rgba(234,84,85,.15); color: var(--gc-danger); }
.status-pill .pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: gc-conn-pulse 2s infinite; }
@keyframes gc-conn-pulse { 0% { box-shadow: 0 0 0 0 rgba(40,199,111,.4); } 70% { box-shadow: 0 0 0 10px rgba(40,199,111,0); } 100% { box-shadow: 0 0 0 0 rgba(40,199,111,0); } }
.perm-line { padding: 6px 10px; background: #f8f8fa; border-radius: 6px; font-size: .75rem; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.perm-line.granted i { color: var(--gc-success); }
.perm-line.denied i { color: var(--gc-danger); }
.gosell-banner { background: linear-gradient(135deg, var(--gc-primary) 0%, #3B54D4 100%); color: #fff; padding: 18px; border-radius: 14px; display: flex; align-items: center; gap: 18px; }

/* --- Team (prototype/pages/team.html) --- */
.agent-card { background: #fff; border: 1px solid #e9ecf1; border-radius: 12px; padding: 18px; transition: all .15s; cursor: pointer; height: 100%; display: flex; flex-direction: column; gap: 8px; }
.agent-card:hover { border-color: var(--gc-primary); box-shadow: 0 6px 18px rgba(78,106,240,.1); }
.agent-avatar-lg { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.4rem; position: relative; }
.status-indicator { position: absolute; bottom: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; }
.status-indicator.status-online  { background: var(--gc-success); }
.status-indicator.status-away    { background: var(--gc-warning); }
.status-indicator.status-busy    { background: var(--gc-danger); }
.status-indicator.status-offline { background: #939ca9; }
.role-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .65rem; font-weight: 600; color: #fff; }
.role-pill.owner       { background: var(--gc-dark); }
.role-pill.cs_manager  { background: var(--gc-primary); }
.role-pill.senior      { background: var(--gc-warning); }
.role-pill.agent       { background: var(--gc-success); }
.role-pill.marketing   { background: #F35C86; }
.role-pill.sys_admin   { background: #8E70C1; }
.perf-stat { display: flex; gap: 12px; padding-top: 10px; margin-top: 8px; border-top: 1px solid #f1f4f9; font-size: .75rem; }
.perf-stat > div { flex: 1; text-align: center; }
.perf-stat .v { font-weight: 700; font-size: 1rem; line-height: 1; color: var(--gc-dark); }
.perf-stat .l { color: #6b7280; font-size: .65rem; }
.view-btn { border: 1px solid #d6d8de !important; padding: 6px 10px; }
.view-btn.active { background: var(--gc-primary) !important; color: #fff !important; border-color: var(--gc-primary) !important; }
.team-table th { font-weight: 600; color: #6b7280; font-size: .75rem; text-transform: uppercase; letter-spacing: .3px; }
.team-table td { vertical-align: middle; padding: 14px 12px; }
.team-table tr { cursor: pointer; transition: background .12s; }
.team-table tbody tr:hover { background: rgba(78,106,240,.04); }
.team-avatar-sm { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .85rem; position: relative; }
.team-avatar-sm .status-indicator { width: 10px; height: 10px; bottom: -1px; right: -1px; border-width: 2px; }
.workload-bar { width: 80px; height: 6px; background: #f1f4f9; border-radius: 999px; overflow: hidden; display: inline-block; vertical-align: middle; }
.workload-bar > div { height: 100%; border-radius: 999px; }

/* --- Quick Replies (prototype/pages/quick-replies.html) --- */
.cat-sidebar { background: #fff; border-radius: 10px; padding: 12px 0; border: 1px solid #e9ecf1; }
.cat-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; border-left: 3px solid transparent; font-size: .875rem; color: #515965; transition: all .12s; }
.cat-item:hover { background: #f8f8fa; }
.cat-item.active { background: rgba(78,106,240,.06); border-left-color: var(--gc-primary); color: var(--gc-primary); font-weight: 600; }
.cat-item .count { margin-left: auto; background: #f1f4f9; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: #515965; }
.cat-item.active .count { background: rgba(78,106,240,.15); color: var(--gc-primary); }
.qr-card { background: #fff; border: 1px solid #e9ecf1; border-radius: 10px; padding: 16px; transition: all .15s; }
.qr-card:hover { border-color: var(--gc-primary); box-shadow: 0 6px 18px rgba(78,106,240,.08); }
.qr-shortcut { display: inline-block; padding: 3px 10px; border-radius: 6px; background: rgba(78,106,240,.1); color: var(--gc-primary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; font-weight: 600; }
.qr-body { background: #f8f8fa; padding: 10px 14px; border-radius: 8px; margin: 10px 0; font-size: .875rem; line-height: 1.5; color: #283046; border-left: 3px solid #e9ecf1; }

/* --- AI Auto-reply Rules (prototype/pages/ai-rules.html) --- */
.rule-card { background: #fff; border: 1px solid #e9ecf1; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; transition: all .15s; }
.rule-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.04); border-color: var(--gc-primary); }
.rule-card.disabled { opacity: .55; }
.rule-icon { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-size: 1.25rem; }
.handoff-trigger { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; background: rgba(234,84,85,.05); border-left: 3px solid var(--gc-danger); margin-bottom: 8px; }

/* --- AI Knowledge Base (prototype/pages/ai-knowledge.html) --- */
.kb-sidebar { background: #fff; border: 1px solid #e9ecf1; border-radius: 10px; padding: 12px 0; }
.kb-cat-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; border-left: 3px solid transparent; font-size: .875rem; color: #515965; transition: all .12s; }
.kb-cat-item:hover { background: #f8f8fa; }
.kb-cat-item.active { background: rgba(78,106,240,.06); border-left-color: var(--gc-primary); color: var(--gc-primary); font-weight: 600; }
.kb-cat-item .count { margin-left: auto; background: #f1f4f9; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: #515965; }
.kb-cat-item.active .count { background: rgba(78,106,240,.15); color: var(--gc-primary); }
.kb-card { background: #fff; border: 1px solid #e9ecf1; border-radius: 10px; padding: 16px; transition: all .15s; cursor: pointer; display: flex; align-items: flex-start; gap: 14px; }
.kb-card:hover { border-color: var(--gc-primary); box-shadow: 0 6px 18px rgba(78,106,240,.08); }
.kb-card .kb-cat-icon { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.25rem; color: #fff; }
.source-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: .65rem; font-weight: 600; }
.source-pill.GoSell { background: rgba(78,106,240,.1); color: #4E6AF0; }
.source-pill.Store { background: rgba(255,159,67,.1); color: #FF9F43; }
.source-pill.FAQ { background: rgba(0,207,232,.1); color: #00CFE8; }
.source-pill.Marketing { background: rgba(243,92,134,.1); color: #F35C86; }
.source-pill.Brand { background: rgba(142,112,193,.1); color: #8E70C1; }
.source-pill.Compliance { background: rgba(234,84,85,.1); color: #EA5455; }
.training-progress { background: linear-gradient(135deg, rgba(0,207,232,.06), rgba(78,106,240,.06)); border: 1px solid rgba(0,207,232,.25); border-radius: 12px; padding: 16px; }

/* --- Sync Health (prototype/pages/sync-health.html) --- */
.health-banner {
  background: linear-gradient(135deg, #28C76F 0%, #00CFE8 100%);
  color: #fff; border-radius: 14px; padding: 20px;
  display: flex; align-items: center; gap: 18px;
  position: relative; overflow: hidden;
}
.health-banner.degraded { background: linear-gradient(135deg, #FF9F43 0%, #EA5455 100%); }
.health-banner::before { content: ''; position: absolute; top: -40%; right: -10%; width: 50%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%); border-radius: 50%; }
.uptime-pill { display: inline-block; padding: 3px 10px; background: rgba(255,255,255,.2); border-radius: 999px; font-size: .7rem; font-weight: 600; }
.target-row {
  display: grid; grid-template-columns: 220px 100px 1fr 120px 100px;
  gap: 14px; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid #f1f4f9;
}
.target-row:last-child { border-bottom: none; }
.target-row.head { background: #f8f8fa; font-weight: 600; font-size: .7rem; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; padding: 10px 16px; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 0 currentColor; animation: gc-health-pulse 2s infinite; }
.health-dot.healthy  { background: #28C76F; color: rgba(40,199,111,.5); }
.health-dot.degraded { background: #FF9F43; color: rgba(255,159,67,.5); }
.health-dot.failed   { background: #EA5455; color: rgba(234,84,85,.5); }
@keyframes gc-health-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.latency-bar { width: 100%; height: 8px; background: #f1f4f9; border-radius: 4px; overflow: hidden; }
.latency-bar > div { height: 100%; border-radius: 4px; transition: all .3s; }
.event-row td { padding: 10px; vertical-align: middle; font-size: .85rem; }
.event-row { border-bottom: 1px solid #f1f4f9; }

/* --- Audit Log (prototype/pages/audit-log.html) --- */
.log-row {
  display: grid; grid-template-columns: 140px 200px 1fr 140px 80px;
  gap: 14px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid #f1f4f9;
  transition: background .15s;
}
.log-row:hover { background: #f8f8fa; }
.log-row.head { background: #f8f8fa; font-weight: 600; font-size: .7rem; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; padding: 10px 16px; }
.action-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 6px;
  font-size: .7rem; font-weight: 600;
}
.action-pill.send_message       { background: rgba(78,106,240,.1);  color: #4E6AF0; }
.action-pill.open_ticket        { background: rgba(255,159,67,.1);  color: #FF9F43; }
.action-pill.assign_chat        { background: rgba(0,207,232,.1);   color: #00CFE8; }
.action-pill.edit_kb            { background: rgba(142,112,193,.1); color: #8E70C1; }
.action-pill.send_broadcast     { background: rgba(243,92,134,.1);  color: #F35C86; }
.action-pill.permission_change  { background: rgba(234,84,85,.1);   color: #EA5455; }
.action-pill.connect_marketplace{ background: rgba(40,199,111,.1);  color: #28C76F; }
.action-pill.login              { background: rgba(108,117,125,.1); color: #6C757D; }
.action-pill.send_coupon        { background: rgba(255,214,72,.15); color: #9c7d00; }
.action-pill.update_rule        { background: rgba(40,48,70,.08);   color: #283046; }
.action-pill.ai_reply           { background: rgba(0,207,232,.1);   color: #00CFE8; }
.action-pill.edit_ai_reply      { background: rgba(255,159,67,.1);  color: #FF9F43; }

/* ===========================================================================
   UI Rework Batch C — page-local classes ported 1:1 from the prototype
   <style> blocks for the final 5 demo-shell pages (tickets / ai-performance /
   followup / broadcast / reports). Values mirror the prototype; brand colors go
   through var(--gc-*) where the prototype used the token, else the prototype's
   literal (same hex as the token) to stay byte-faithful to the source markup.
   =========================================================================== */

/* --- Tickets (prototype/pages/tickets.html) --- */
.status-tab {
  padding: 14px 18px; background: none; border: none;
  border-bottom: 3px solid transparent;
  font-size: .875rem; font-weight: 600;
  color: #6b7280; cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; gap: 8px;
  --tab-color: #4E6AF0; white-space: nowrap;
}
.status-tab:hover { color: var(--tab-color); background: rgba(0,0,0,.02); }
.status-tab.active { color: var(--tab-color); border-color: var(--tab-color); background: color-mix(in srgb, var(--tab-color) 6%, transparent); }
.status-tab .count { background: rgba(0,0,0,.06); padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.status-tab.active .count { background: color-mix(in srgb, var(--tab-color) 18%, transparent); color: var(--tab-color); }
.status-tab[data-status="all"]                 { --tab-color: #4E6AF0; }
.status-tab[data-status="open"]                { --tab-color: #00CFE8; }
.status-tab[data-status="in_progress"]         { --tab-color: #FF9F43; }
.status-tab[data-status="waiting_marketplace"] { --tab-color: #8E70C1; }
.status-tab[data-status="resolved"]            { --tab-color: #28C76F; }
.status-tab[data-status="closed"]              { --tab-color: #6C757D; }
.priority-bar { width: 4px; height: 30px; border-radius: 2px; display: inline-block; }
.priority-bar.urgent { background: var(--gc-danger); }
.priority-bar.high   { background: var(--gc-warning); }
.priority-bar.medium { background: var(--gc-info); }
.priority-bar.low    { background: #c5cad5; }
.ticket-row { position: relative; }
.ticket-row:hover { background: rgba(78,106,240,.03); cursor: pointer; }
.ticket-row td { padding: 14px 12px; vertical-align: middle; }
/* GOC-86: anchor the left marketplace stripe to the row's FIRST cell, not the
   <tr>. In a border-collapse table (Bootstrap/Limitless default) an absolutely
   positioned ::before on a <tr> has no reliable containing block in Chromium —
   it escaped to the table's outer-left edge (a thick smudge in the gutter) and
   shifted the checkbox column. A <td> is a robust positioning context, so the
   3px stripe now sits exactly on the row's left inner edge as the prototype
   intends. Width/colours unchanged (prototype tickets.html L80-82). */
.ticket-row > td:first-child { position: relative; }
.ticket-row.mp-shopee > td:first-child::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:#EE4D2D; }
.ticket-row.mp-lazada > td:first-child::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:#0F146D; }
.ticket-row.mp-tiktok > td:first-child::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:#111; }

/* --- AI Performance (prototype/pages/ai-performance.html) --- */
.kpi-card { transition: transform .15s, box-shadow .15s; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
/* GOC-88: page-scoped to ai-performance so 280px no longer leaks onto the
   Dashboard via cascade (see note at the Dashboard .chart-host block). */
.gc-page-body.aip-page .chart-host { height: 280px; }
.gc-page-body.aip-page .chart-host.lg { height: 320px; }
.target-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .65rem; font-weight: 600; }
.target-pill.met    { background: rgba(40,199,111,.15);  color: #28C76F; }
.target-pill.below  { background: rgba(255,159,67,.15);  color: #FF9F43; }
.target-pill.under  { background: rgba(234,84,85,.15);   color: #EA5455; }
.gap-row { padding: 10px 0; border-bottom: 1px solid #f1f4f9; display: flex; align-items: center; gap: 12px; }
.gap-row:last-child { border-bottom: none; }
.gap-count { background: rgba(234,84,85,.1); color: var(--gc-danger); padding: 2px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; }

/* --- Follow-up / Automation (prototype/pages/followup.html) --- */
.journey { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 16px; }
.journey-step { background: #fff; border: 1px solid #e9ecf1; border-radius: 10px; padding: 14px 12px; text-align: center; position: relative; transition: all .15s; }
.journey-step::after { content: ''; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 10px; height: 2px; background: #c5cad5; z-index: 1; }
.journey-step:last-child::after { display: none; }
.journey-step .step-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; margin-bottom: 6px; }
.journey-step .step-name { font-size: .75rem; font-weight: 700; color: var(--gc-dark); }
.journey-step .step-count { font-size: 1rem; font-weight: 700; color: var(--gc-primary); }
.journey-step .step-conv { font-size: .65rem; color: #6b7280; }
.journey-step.active { border-color: var(--gc-primary); box-shadow: 0 0 0 4px rgba(78,106,240,.08); }
.auto-card { background: #fff; border: 1px solid #e9ecf1; border-radius: 12px; padding: 18px; transition: all .15s; height: 100%; display: flex; flex-direction: column; }
.auto-card:hover { border-color: var(--gc-primary); box-shadow: 0 6px 20px rgba(78,106,240,.1); }
.auto-card .auto-icon { width: 56px; height: 56px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; margin-bottom: 14px; }
.auto-card .stat-row { display: flex; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f1f4f9; }
.auto-card .stat-row > div { flex: 1; min-width: 0; }
.auto-card .stat-value { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.auto-card .stat-label { font-size: .7rem; color: #6b7280; margin-top: 2px; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; cursor: pointer; inset: 0; background: #c5cad5; transition: .25s; border-radius: 34px; }
.switch-slider::before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; transition: .25s; border-radius: 50%; }
.switch input:checked + .switch-slider { background: #28C76F; }
.switch input:checked + .switch-slider::before { transform: translateX(18px); }
.conv-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .65rem; font-weight: 600; }
.conv-pill.high   { background: rgba(40,199,111,.15); color: #28C76F; }
.conv-pill.medium { background: rgba(255,159,67,.15); color: #FF9F43; }
.conv-pill.low    { background: rgba(108,117,125,.15); color: #6C757D; }
.run-row td { padding: 12px; vertical-align: middle; }
.run-row:hover { background: #f8f8fa; }
.channel-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .65rem; font-weight: 600; color: #fff; }
.channel-pill.shopee { background: var(--gc-shopee); }
.channel-pill.lazada { background: var(--gc-lazada); }
.channel-pill.tiktok { background: var(--gc-tiktok); }
.guardrail { background: linear-gradient(135deg, rgba(255,159,67,.08), rgba(234,84,85,.08)); border: 1px solid rgba(255,159,67,.3); border-radius: 12px; padding: 16px; }

/* --- Broadcast (prototype/pages/broadcast.html) --- */
.campaign-card { background:#fff; border:1px solid #e9ecf1; border-radius:12px; padding:18px; transition: all .15s; height:100%; display:flex; flex-direction:column; }
.campaign-card:hover { border-color: var(--gc-primary); box-shadow: 0 8px 24px rgba(78,106,240,.1); }
.campaign-thumb { height:120px; border-radius:8px; background-size:cover; background-position:center; position:relative; overflow:hidden; margin-bottom:12px; }
.status-badge { position:absolute; top:8px; right:8px; padding:3px 10px; border-radius:999px; font-size:.65rem; font-weight:700; color:#fff; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); }
.status-badge.scheduled { background:rgba(78,106,240,.95); }
.status-badge.sent      { background:rgba(40,199,111,.95); }
.status-badge.draft     { background:rgba(108,117,125,.85); }
.status-badge.sending   { background:rgba(255,159,67,.95); }
.audience-pill { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:.7rem; font-weight:600; background:#f1f4f9; color:#515965; }

/* --- Reports hub (prototype/pages/reports.html) --- */
.rpt-tile { background:#fff; border:1px solid #e9ecf1; border-radius:14px; padding:24px; text-decoration:none; color:inherit; transition: all .15s; height:100%; display:flex; flex-direction:column; }
.rpt-tile:hover { border-color: var(--gc-primary); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(78,106,240,.12); color:inherit; }
.rpt-icon { width:64px; height:64px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; font-size:1.8rem; color:#fff; margin-bottom:14px; }
.rpt-stat { display:flex; gap:18px; margin-top:14px; padding-top:14px; border-top:1px solid #f1f4f9; }
.rpt-stat > div { flex:1; }
.rpt-stat .val { font-size:1.25rem; font-weight:700; line-height:1; }
.rpt-stat .lbl { font-size:.7rem; color:#6b7280; margin-top:2px; }

/* --- Notifications (US-13 · prototype/pages/notifications.html notif-card) --- */
.notif-card {
  display: flex; gap: 14px; padding: 14px 16px;
  background: #fff; border: 1px solid #e9ecf1; border-radius: 10px;
  margin-bottom: 8px; transition: all .15s; cursor: pointer;
}
.notif-card.unread { background: rgba(78,106,240,.04); border-left: 3px solid var(--gc-primary); }
.notif-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.04); }
.notif-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0; font-size: 1.1rem;
}
.notif-meta { font-size: .7rem; color: #939ca9; }

/* Notification center — a fixed panel anchored bottom-left near the nav rail bell
   (US-13). Reuses the card surface tokens; no new colours hardcoded beyond the
   prototype's notif-card surface. */
.gc-noti-panel {
  position: fixed; bottom: 16px; left: calc(var(--gc-rail-w-collapsed, 64px) + 12px);
  width: 380px; max-width: calc(100vw - 88px); max-height: 70vh;
  background: #fff; border: 1px solid #e9ecf1; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18); z-index: 1080;
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-nav-rail.expanded ~ .gc-noti-panel,
body:has(.chat-nav-rail.expanded) .gc-noti-panel {
  left: calc(var(--gc-rail-w-expanded, 240px) + 12px);
}
.gc-noti-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; border-bottom: 1px solid #e9ecf1;
}
.gc-noti-panel-body { overflow-y: auto; padding: 12px; }
.gc-noti-backdrop {
  position: fixed; inset: 0; z-index: 1075; background: transparent;
}
@media (max-width: 575.98px) {
  .gc-noti-panel { left: 8px; right: 8px; width: auto; bottom: 8px; }
}

/* ===========================================================================
   GOC-33 / GOC-34 — page-local classes ported 1:1 from the prototype <style>
   blocks for the ticket-detail + tickets-create pages
   (prototype/pages/ticket-detail.html, prototype/pages/tickets-create.html).
   Brand colour goes through var(--gc-primary) where the prototype used the
   token; other literals are byte-faithful to the source markup. The React
   pages render these tiles as <button> (a11y), so a `.type-tile`/`.priority-tile`
   reset removes the default button chrome while keeping the prototype look.
   =========================================================================== */

/* --- Create ticket: type tiles (prototype/pages/tickets-create.html) --- */
.type-tile {
  border: 2px solid #e9ecf1; border-radius: 10px;
  padding: 14px; cursor: pointer; transition: all .15s;
  text-align: center; background: #fff; height: 100%;
  font: inherit; color: inherit;
}
.type-tile:hover:not(:disabled) { border-color: var(--gc-primary); background: rgba(78,106,240,.03); }
.type-tile.selected { border-color: var(--gc-primary); background: rgba(78,106,240,.06); }
/* Post-MVP types (GOC-86): shown but not selectable → muted + not-allowed, no
   hover highlight. Uses opacity/cursor only — no new colour token invented. */
.type-tile:disabled { opacity: .55; cursor: not-allowed; }
.type-tile-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 8px;
}

/* --- Create ticket: priority tiles --- */
.priority-tile {
  border: 2px solid #e9ecf1; border-radius: 10px;
  padding: 10px 14px; cursor: pointer; transition: all .15s;
  background: #fff; display: flex; align-items: center; gap: 10px;
  font: inherit; color: inherit; text-align: left;
}
.priority-tile:hover { border-color: var(--gc-primary); }
.priority-tile.selected { border-color: var(--gc-primary); background: rgba(78,106,240,.04); }
.priority-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

/* --- Create ticket: cascading typeahead Store → Customer → Order (GOC-86) ---
   Ported 1:1 from prototype/pages/tickets-create.html inline <style>. The step
   pill uses var(--gc-primary); neutral surfaces/lines keep their hex (no token
   exists) — same Task #6 convention as the tiles above. */
.step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gc-primary, #4E6AF0); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; flex-shrink: 0;
}
.gc-ta { position: relative; }
.gc-ta-input-wrap { position: relative; }
.gc-ta-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #9aa1b1; font-size: 1rem; pointer-events: none; z-index: 2;
}
.gc-ta-input { padding-left: 36px !important; padding-right: 36px !important; }
.gc-ta-input:disabled { background: #f8f9fb; cursor: not-allowed; color: #9aa1b1; }
.gc-ta-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: #f1f4f9; border: 0; border-radius: 50%;
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #6b7280; font-size: .8rem; z-index: 2;
}
.gc-ta-clear:hover { background: #e5eaf2; color: #283046; }
.gc-ta-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  margin-top: 4px;
  background: #fff; border: 1px solid #e9ecf1; border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0,0,0,.10);
  max-height: 280px; overflow-y: auto;
  animation: gcTaIn .12s ease-out;
}
@keyframes gcTaIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.gc-ta-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid #f5f6f9;
  transition: background .08s;
  width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0;
  font: inherit; color: inherit;
}
.gc-ta-item:last-child { border-bottom: 0; }
.gc-ta-item:hover,
.gc-ta-item.gc-ta-active { background: #f1f4f9; }
.gc-ta-ava {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .82rem; flex-shrink: 0;
}
.gc-ta-main { flex: 1; min-width: 0; }
.gc-ta-main strong { font-size: .88rem; color: #283046; display: block; line-height: 1.2; }
.gc-ta-main .text-muted { font-size: .75rem; }
.gc-ta-meta { text-align: right; font-size: .72rem; color: #6b7280; flex-shrink: 0; }
.gc-ta-meta strong { color: #283046; display: block; font-size: .82rem; }
.gc-ta-empty { padding: 14px 12px; color: #9aa1b1; text-align: center; font-size: .82rem; }
.gc-ta-hint { padding: 6px 12px; font-size: .7rem; color: #9aa1b1; border-bottom: 1px solid #f5f6f9; background: #fafbfc; }
.gc-ta-selected {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid #cfe1ff; background: #eef6ff;
  border-radius: 8px; margin-top: 4px;
}
.gc-ta-selected .gc-ta-ava { width: 28px; height: 28px; font-size: .75rem; }
.gc-ta-selected strong { font-size: .86rem; color: #1b3a8a; }
.gc-ta-selected .text-muted { font-size: .72rem; }
.gc-ta-selected .gc-ta-clear { position: static; transform: none; margin-left: auto; }
.gc-ta-mark { background: #fff3a4; color: inherit; padding: 0 1px; border-radius: 2px; font-weight: 700; }

/* ===========================================================================
   B3 (GOC-95) — Settings & Team polish: page-local classes ported from the
   prototypes' inline <style> (team-detail.html / profile.html). Same Task #6
   convention: brand colours use --gc-* tokens; neutral lines/surfaces keep
   their hex (no token exists). `.profile-hero`/`.profile-hero::before`,
   `.role-pill`, `.switch`, `.mp-badge` already ship above and are reused.
   =========================================================================== */

/* --- Agent profile (prototype/pages/team-detail.html) --- */
/* `.profile-avatar-xl` — larger hero avatar than customer-detail's `.profile-avatar`. */
.profile-avatar-xl {
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255,255,255,.2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; font-weight: 700;
  border: 3px solid rgba(255,255,255,.3);
}
/* The team-detail hero tints from the agent colour (set inline via --ag-color). */
.profile-hero.agent-hero { background: linear-gradient(135deg, var(--ag-color, var(--gc-primary)) 0%, var(--gc-dark) 100%); }
.perm-card {
  padding: 12px 14px; border-radius: 10px;
  background: #f8f8fa; border: 1px solid #e9ecf1;
  margin-bottom: 8px; display: flex; align-items: center; gap: 12px;
}
.perm-card .perm-check {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.perm-card .perm-check.on  { background: var(--gc-success); color: #fff; }
.perm-card .perm-check.off { background: #f1f4f9; color: #c5cad5; }
.day-cell {
  padding: 10px; border-radius: 8px;
  text-align: center; cursor: pointer;
  background: #f8f8fa; border: 1px solid #e9ecf1;
  font-size: .75rem;
}
.day-cell.work { background: rgba(40,199,111,.1); border-color: rgba(40,199,111,.3); color: var(--gc-success); font-weight: 600; }
.day-cell.off  { background: rgba(108,117,125,.06); color: #939ca9; }

/* --- My profile (prototype/pages/profile.html) --- */
/* The profile hero tints dark → primary (a fixed gradient, no agent colour). */
.profile-hero.my-hero { background: linear-gradient(135deg, var(--gc-dark) 0%, var(--gc-primary) 100%); }
.profile-hero.my-hero::before { background: radial-gradient(circle, rgba(255,214,72,.15) 0%, transparent 70%); }
.login-row { display: flex; gap: 12px; padding: 10px; background: #f8f8fa; border-radius: 8px; margin-bottom: 6px; align-items: center; }

/* --- Assign ("มอบหมายให้") picker row (prototype .gc-picker-row, gc-actions.js) --- */
/* Ports the prototype agent-picker row verbatim: soft gray card, 8px radius, primary
   tint on hover. .active adds the selected-assignee state (primary tint + border). */
.gc-assign-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: #f8f8fa; margin-bottom: 6px;
  width: 100%; border: 1px solid transparent; text-align: left;
  color: inherit; font: inherit; -webkit-appearance: none; appearance: none;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.gc-assign-row:hover { background: rgba(78,106,240,.08); }
.gc-assign-row.active {
  background: rgba(78,106,240,.08);
  border-color: var(--gc-primary);
}
.gc-assign-row .gc-assign-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: .7rem; flex-shrink: 0;
}