/* WPP ATOMIC — Redesign com Atomic Design System (Eclipse) */

/* ── TOKENS ── */
:root {
  --font-display: 'Jost', 'Kumbh Sans', sans-serif;
  --font-text: 'Kumbh Sans', sans-serif;

  --r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px;
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: .14s var(--ease); --t: .22s var(--ease);

  /* Eclipse palette */
  --bg: #0c0c0d;
  --s1: #141415;
  --s2: #1a1a1c;
  --s3: #212124;
  --s-hover: #26262a;
  --line: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.12);
  --tx: #f4f4f2;
  --tx-mut: #94949c;
  --tx-faint: #5c5c63;

  --primary: #ffc002;
  --primary-ink: #131312;
  --primary-soft: rgba(255,192,2,.12);
  --primary-line: rgba(255,192,2,.35);
  --accent: #ffc002;
  --accent-soft: rgba(255,192,2,.12);

  --blue: #6f8cff;    --blue-soft: rgba(111,140,255,.13);
  --green: #34d399;   --green-soft: rgba(52,211,153,.13);
  --red: #f87171;     --red-soft: rgba(248,113,113,.13);
  --orange: #fbbf24;  --orange-soft: rgba(251,191,36,.13);
  --purple: #c084fc;  --purple-soft: rgba(192,132,252,.13);

  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px rgba(0,0,0,.9);
  --shadow-pop: 0 24px 60px -20px rgba(0,0,0,.85);

  /* mensagens */
  --sent-bg: rgba(255,192,2,.08);
  --sent-border: rgba(255,192,2,.22);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; color-scheme: dark; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--tx-faint); }

/* ── LAYOUT ── */
#app { display: flex; height: 100vh; overflow: hidden; }

/* ════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════ */
.sidebar {
  width: 340px; min-width: 340px;
  background: var(--s1);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
}

.sidebar-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.sidebar-brand {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx);
}
.sidebar-brand span { color: var(--primary); }

.sidebar-actions { display: flex; align-items: center; gap: 6px; }

.icon-btn {
  background: none; border: none; color: var(--tx-mut); cursor: pointer;
  padding: 7px; border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  display: flex; align-items: center;
}
.icon-btn:hover { color: var(--tx); background: var(--s3); }

.user-avatar {
  width: 30px; height: 30px; border-radius: var(--r-full);
  object-fit: cover; border: 1px solid var(--line-2); margin-left: 2px;
}

/* Search */
.search-wrap {
  position: relative; padding: 10px 12px;
  flex-shrink: 0; border-bottom: 1px solid var(--line);
}
.search-icon {
  position: absolute; left: 22px; top: 50%;
  transform: translateY(-50%); color: var(--tx-faint); pointer-events: none;
}
.search-wrap input {
  width: 100%;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--tx); padding: 8px 12px 8px 34px;
  font-family: var(--font-text); font-size: 13px;
  border-radius: var(--r-sm); outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-wrap input::placeholder { color: var(--tx-faint); }
.search-wrap input:focus {
  border-color: var(--primary-line);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Filters */
.filters-row {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.filter-chip {
  background: none; border: 1px solid var(--line);
  color: var(--tx-mut); padding: 5px 12px;
  font-family: var(--font-text); font-size: 12px; font-weight: 600;
  border-radius: var(--r-full); cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: all var(--t-fast); white-space: nowrap;
}
.filter-chip:hover { border-color: var(--line-2); color: var(--tx); }
.filter-chip.active {
  background: var(--primary-soft);
  border-color: var(--primary-line);
  color: var(--primary);
}
.filter-badge {
  background: var(--primary); color: var(--primary-ink);
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: var(--r-full);
}
.filter-badge.hidden { display: none; }
#instance-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.inst-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Conv list */
.conv-list { flex: 1; overflow-y: auto; }
.loading-state, .empty-state {
  padding: 32px 16px; text-align: center;
  color: var(--tx-mut); font-size: 13px;
}

.conv-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  cursor: pointer; border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.conv-item:hover { background: var(--s2); }
.conv-item.active { background: var(--primary-soft); }

.conv-avatar-wrap { position: relative; flex-shrink: 0; }
.conv-avatar {
  width: 44px; height: 44px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: #fff; flex-shrink: 0;
}
.conv-inst-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid var(--s1);
}

.conv-body { flex: 1; min-width: 0; }
.conv-row1 {
  display: flex; justify-content: space-between;
  align-items: baseline; gap: 8px; margin-bottom: 3px;
}
.conv-name {
  font-family: var(--font-display); font-weight: 700;
  color: var(--tx); font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-time { font-size: 11px; color: var(--tx-faint); flex-shrink: 0; }
.conv-time.has-unread { color: var(--primary); }
.conv-row2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.conv-last {
  font-size: 12.5px; color: var(--tx-mut);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.unread-badge {
  background: var(--primary); color: var(--primary-ink);
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--r-full); flex-shrink: 0;
}

/* ════════════════════════════════════════════
   MAIN PANEL
════════════════════════════════════════════ */
.main-panel {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; position: relative;
}

/* Empty state */
.chat-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%; color: var(--tx-mut); gap: 12px;
}
.empty-icon { color: var(--tx-faint); }
.empty-title {
  font-family: var(--font-display); font-size: 20px;
  font-weight: 700; color: var(--tx);
}
.empty-sub { font-size: 13px; }

/* Chat view */
.chat-view { display: flex; flex-direction: column; height: 100%; }
.hidden { display: none !important; }

/* Chat header */
.chat-header {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px);
  flex-shrink: 0;
}
.chat-avatar {
  width: 40px; height: 40px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; color: #fff; flex-shrink: 0;
}
.chat-header-info { flex: 1; min-width: 0; }
.chat-name {
  font-family: var(--font-display); font-weight: 700;
  color: var(--tx); font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-sub { font-size: 12px; color: var(--tx-mut); }
.inst-badge {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  padding: 4px 11px; border-radius: var(--r-full);
  white-space: nowrap; flex-shrink: 0;
}

/* Messages */
.messages-area {
  flex: 1; overflow-y: auto;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 2px;
}

.date-sep { text-align: center; margin: 12px 0; }
.date-sep span {
  font-size: 11px; font-weight: 600; color: var(--tx-mut);
  background: var(--s2); border: 1px solid var(--line);
  padding: 3px 12px; border-radius: var(--r-full);
}

.msg-row { display: flex; margin-bottom: 3px; }
.msg-row.in  { justify-content: flex-start; }
.msg-row.out { justify-content: flex-end; }

.msg-bubble {
  max-width: 68%; padding: 9px 13px 6px;
  border-radius: var(--r-md);
  font-size: 14px; line-height: 1.5; word-break: break-word;
}
.msg-bubble.in {
  background: var(--s2); border: 1px solid var(--line);
  border-bottom-left-radius: 4px; color: var(--tx);
}
.msg-bubble.out {
  background: var(--sent-bg); border: 1px solid var(--sent-border);
  border-bottom-right-radius: 4px; color: var(--tx);
}
.msg-body { white-space: pre-wrap; }
.msg-time { font-size: 10px; color: var(--tx-faint); text-align: right; margin-top: 4px; }
.msg-empty { text-align: center; color: var(--tx-mut); font-size: 13px; margin: auto; }

/* Input */
.input-area {
  display: flex; align-items: flex-end; gap: 8px; padding: 10px 16px;
  border-top: 1px solid var(--line); background: var(--s1); flex-shrink: 0;
}
.input-area textarea {
  flex: 1; background: var(--bg); border: 1px solid var(--line);
  color: var(--tx); padding: 10px 14px;
  font-family: var(--font-text); font-size: 14px;
  resize: none; outline: none; border-radius: var(--r-sm);
  line-height: 1.5; max-height: 120px; overflow-y: auto;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input-area textarea::placeholder { color: var(--tx-faint); }
.input-area textarea:focus {
  border-color: var(--primary-line);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.send-btn {
  background: var(--primary); color: var(--primary-ink);
  border: none; padding: 10px 14px; cursor: pointer;
  display: flex; align-items: center; border-radius: var(--r-sm);
  flex-shrink: 0; transition: filter var(--t-fast);
}
.send-btn:hover { filter: brightness(1.08); }

/* ════════════════════════════════════════════
   MODALS
════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  z-index: 100; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.modal-overlay.hidden { display: none; }

.modal-box {
  background: var(--s1); border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  width: 480px; max-width: 95vw; max-height: 85vh; overflow-y: auto;
  box-shadow: var(--shadow-pop);
}
.modal-box::-webkit-scrollbar { width: 4px; }
.modal-box::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--s1); z-index: 1;
}
.modal-head h2 {
  font-family: var(--font-display); font-size: 16px;
  font-weight: 700; color: var(--tx);
}
.icon-btn.close-btn:hover { background: var(--red-soft); color: var(--red); }

.modal-divider { height: 1px; background: var(--line); margin: 16px 0; }
.modal-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx-mut);
  padding: 0 22px; margin-bottom: 12px;
}

/* Instance cards */
.inst-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; border-bottom: 1px solid var(--line);
}
.inst-card-left { display: flex; align-items: center; gap: 10px; }
.inst-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.inst-card-name {
  font-family: var(--font-display); font-weight: 700;
  color: var(--tx); font-size: 14px;
}
.inst-card-num { font-size: 12px; color: var(--tx-mut); margin-top: 2px; }
.inst-card-actions { display: flex; gap: 8px; }

.btn-qr {
  background: none; border: 1px solid var(--primary-line);
  color: var(--primary); padding: 5px 12px;
  font-family: var(--font-text); font-size: 12px; font-weight: 600;
  cursor: pointer; border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.btn-qr:hover { background: var(--primary-soft); }

.btn-del {
  background: none; border: 1px solid var(--line);
  color: var(--tx-mut); padding: 5px 10px;
  font-size: 12px; cursor: pointer; border-radius: var(--r-sm);
  transition: all var(--t-fast);
}
.btn-del:hover {
  border-color: rgba(248,113,113,.4);
  color: var(--red); background: var(--red-soft);
}
.no-instances { padding: 16px 22px; color: var(--tx-mut); font-size: 13px; }

/* Add instance form */
#add-inst-form {
  padding: 0 22px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
#add-inst-form input {
  background: var(--bg); border: 1px solid var(--line);
  color: var(--tx); padding: 10px 13px;
  font-family: var(--font-text); font-size: 13px;
  outline: none; width: 100%; border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
#add-inst-form input:focus {
  border-color: var(--primary-line);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
#add-inst-form input::placeholder { color: var(--tx-faint); }
.color-pick-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tx-mut); }
.color-pick-row input[type=color] {
  width: 40px; height: 34px; border: 1px solid var(--line);
  background: none; cursor: pointer; padding: 2px; border-radius: var(--r-sm);
}
.btn-primary {
  background: var(--primary); color: var(--primary-ink);
  border: none; padding: 11px;
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  cursor: pointer; border-radius: var(--r-sm); margin-top: 4px;
  transition: filter var(--t-fast);
}
.btn-primary:hover { filter: brightness(1.07); }

/* QR modal */
.qr-box { width: 340px; }
.qr-body { padding: 28px; text-align: center; }
.qr-body img {
  width: 220px; height: 220px; object-fit: contain;
  border: 1px solid var(--line-2); background: #fff;
  padding: 8px; border-radius: var(--r-md);
}
.qr-body p { margin-top: 14px; font-size: 12px; color: var(--tx-mut); line-height: 1.6; }