/* ============================================================
   INOVA · Componentes
   --------------------------------------------------------------
   Requer inova-ds.css carregado antes (tokens semânticos).
   ============================================================ */

/* ===== BUTTON ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0 18px; height: 40px;
  font-size: 14px; font-weight: 600; line-height: 1;
  border-radius: var(--r-md); border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast),
              box-shadow var(--t-fast), transform 120ms ease;
  user-select: none; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { box-shadow: var(--ring); outline: none; }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; transform: none; }

/* sizes */
.btn-sm  { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn-lg  { height: 46px; padding: 0 22px; font-size: 15px; border-radius: var(--r-lg); }
.btn-xl  { height: 54px; padding: 0 var(--s-6); font-size: 16px; border-radius: var(--r-lg); }
.btn-icon { padding: 0; width: 40px; }
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-lg { width: 46px; }

/* variants */
.btn-primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--brand) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover {
  background: var(--brand-hover);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:active { background: var(--brand-active); }

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

.btn-ghost {
  background: transparent; color: var(--text-muted);
}
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }

.btn-danger {
  background: var(--danger); color: #fff;
}
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }

.btn-soft {
  background: var(--brand-soft); color: var(--brand);
}
.btn-soft:hover { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); }

/* loading spinner */
.btn[data-loading="true"] { color: transparent; pointer-events: none; position: relative; }
.btn[data-loading="true"]::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite; color: var(--text);
}
.btn-primary[data-loading="true"]::after, .btn-danger[data-loading="true"]::after { color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== INPUT / TEXTAREA / SELECT ===== */
.input, .textarea, .select {
  width: 100%;
  padding: 0 14px; height: 42px;
  font-size: 14.5px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.textarea { padding: 10px 14px; height: auto; min-height: 84px; resize: vertical; line-height: 1.55; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--border-strong); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--border-focus); box-shadow: var(--ring); outline: none;
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:disabled, .textarea:disabled, .select:disabled { background: var(--bg-sunken); cursor: not-allowed; }

.input-group { position: relative; }
.input-group .input { padding-left: 36px; }
.input-group .input-icon {
  position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%);
  color: var(--text-subtle); pointer-events: none; display: inline-flex;
}
.input-kbd {
  position: absolute; right: var(--s-2); top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-subtle); background: var(--bg-sunken);
}

.label {
  display: inline-block; font-size: var(--fs-xs); font-weight: 500;
  color: var(--text-muted); margin-bottom: var(--s-1);
  text-transform: uppercase; letter-spacing: .04em;
}

/* ===== CARD ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.card-pad { padding: var(--s-6); }
.card-elev { box-shadow: var(--shadow-sm); }
.card-elev:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); border-color: color-mix(in srgb, var(--border) 50%, var(--brand)); }
[data-theme="dark"] .card-elev:hover { box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.card-header { padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--border); }
.card-title  { font-size: 16px; font-weight: 600; color: var(--text); }
.card-desc   { font-size: 13.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
.card-body   { padding: var(--s-6); }
.card-footer { padding: var(--s-4) var(--s-6); border-top: 1px solid var(--border); background: var(--bg-sunken); }

/* ===== BADGE & TAG ===== */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  height: 20px; padding: 0 var(--s-2);
  font-size: 11px; font-weight: 500; line-height: 1;
  border-radius: var(--r-full);
  background: var(--bg-sunken); color: var(--text-muted);
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-brand   { background: var(--brand-soft); color: var(--brand); }
.badge-success { background: var(--success-bg); color: var(--success-fg); }
.badge-warning { background: var(--warning-bg); color: var(--warning-fg); }
.badge-danger  { background: var(--danger-bg); color: var(--danger-fg); }
.badge-info    { background: var(--info-bg); color: var(--info-fg); }

.tag {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 2px var(--s-2); font-size: var(--fs-xs);
  border-radius: var(--r-sm); background: var(--bg-sunken);
  color: var(--text-muted);
}

/* canal badge (WhatsApp/Insta/etc) — bolinha colorida */
.channel-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.channel-dot.whatsapp { background: var(--whatsapp); }
.channel-dot.instagram { background: var(--instagram); }
.channel-dot.facebook { background: var(--facebook); }
.channel-dot.webchat { background: var(--webchat); }
.channel-dot.telegram { background: var(--telegram); }

/* ===== AVATAR ===== */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: var(--fs-sm); font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--p-400), var(--p-600));
  flex-shrink: 0; overflow: hidden; text-transform: uppercase;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: var(--fs-xs); }
.avatar-lg { width: 48px; height: 48px; font-size: var(--fs-md); }
.avatar-xl { width: 64px; height: 64px; font-size: var(--fs-lg); }

.avatar-status { position: relative; }
.avatar-status::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--n-400);
}
.avatar-status.online::after { background: var(--success); }
.avatar-status.busy::after { background: var(--warning); }

/* ===== SIDEBAR ===== */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh; overflow: hidden;
}
.shell.collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

.sidebar {
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  overflow: hidden;
}
.sidebar-header {
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--topbar-h); padding: 0 var(--s-4);
  border-bottom: 1px solid var(--border);
}
.sidebar-logo { width: 32px; height: 32px; flex-shrink: 0; }
.sidebar-brand { font-size: var(--fs-md); font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.shell.collapsed .sidebar-brand { display: none; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--s-3) var(--s-2); }
.sidebar-section {
  padding: var(--s-2) var(--s-3) var(--s-1);
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  color: var(--text-subtle); text-transform: uppercase;
}
.shell.collapsed .sidebar-section { visibility: hidden; height: 8px; padding: 0; }

.nav-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); margin: 2px 0;
  border-radius: var(--r-md); color: var(--text-muted);
  font-size: var(--fs-sm); font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
  text-decoration: none;
}
.nav-item:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav-item-icon { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item-badge { margin-left: auto; }
.shell.collapsed .nav-item { justify-content: center; padding: var(--s-2); }
.shell.collapsed .nav-item-label,
.shell.collapsed .nav-item-badge { display: none; }

.sidebar-footer {
  padding: var(--s-3) var(--s-2); border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--s-1);
}

/* ===== TOPBAR ===== */
.topbar {
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--topbar-h); padding: 0 var(--s-5);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar-search { flex: 1; max-width: 480px; }

/* ===== MAIN CONTENT AREA ===== */
.main {
  display: flex; flex-direction: column;
  background: var(--bg); min-width: 0;
}
.content { flex: 1; overflow: auto; padding: var(--s-6); }

/* ===== CHAT LAYOUT (3 colunas: lista + thread + cliente) ===== */
.chat-layout {
  display: grid;
  grid-template-columns: 340px 1fr var(--rightpanel-w);
  height: calc(100vh - var(--topbar-h));
  overflow: hidden;
}
.chat-list { border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; overflow: hidden; }
.chat-list-header { padding: var(--s-4); border-bottom: 1px solid var(--border); display: flex; gap: var(--s-2); align-items: center; }
.chat-list-items { flex: 1; overflow-y: auto; }

.chat-item {
  display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background var(--t-fast);
}
.chat-item:hover { background: var(--surface-hover); }
.chat-item.active { background: var(--brand-soft); border-left: 3px solid var(--brand); padding-left: calc(var(--s-4) - 3px); }
.chat-item-body { flex: 1; min-width: 0; }
.chat-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.chat-item-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.chat-item-time { font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; font-family: var(--font-num); }
.chat-item-preview { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.chat-item-meta { display: flex; gap: var(--s-2); margin-top: var(--s-1); align-items: center; }

/* Chat thread (mensagens) */
.chat-thread { display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
.chat-thread-header { padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); background: var(--surface); display: flex; gap: var(--s-3); align-items: center; }
.chat-thread-msgs { flex: 1; overflow-y: auto; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.chat-thread-composer { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); background: var(--surface); display: flex; gap: var(--s-2); align-items: flex-end; }

/* Message bubble */
.msg { max-width: 70%; display: flex; flex-direction: column; gap: 2px; animation: slide-up var(--t-base) var(--ease-out); }
.msg.from-them { align-self: flex-start; }
.msg.from-me   { align-self: flex-end; align-items: flex-end; }
.msg-bubble {
  padding: var(--s-2) var(--s-3); border-radius: var(--r-lg);
  font-size: var(--fs-sm); line-height: 1.45; word-wrap: break-word;
}
.msg.from-them .msg-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: var(--r-xs); }
.msg.from-me   .msg-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: var(--r-xs); }
.msg.from-leia .msg-bubble { background: color-mix(in srgb, var(--info) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--info) 25%, var(--border)); border-bottom-left-radius: var(--r-xs); }
.msg-meta { font-size: 10px; color: var(--text-subtle); display: flex; gap: var(--s-2); padding: 0 var(--s-2); }

/* Right panel — cliente */
.right-panel { background: var(--surface); border-left: 1px solid var(--border); overflow-y: auto; padding: var(--s-5); }

/* ===== SKELETON ===== */
.skel {
  background: linear-gradient(90deg, var(--bg-sunken) 0, var(--surface-hover) 50%, var(--bg-sunken) 100%);
  background-size: 200px 100%; background-repeat: no-repeat;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--r-sm);
}

/* ===== MODAL / DRAWER ===== */
.modal-backdrop {
  position: fixed; inset: 0; background: var(--bg-overlay);
  z-index: var(--z-modal); display: grid; place-items: center; padding: var(--s-4);
  animation: fade-in var(--t-base);
}
.modal {
  background: var(--surface); border-radius: var(--r-xl);
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-xl);
  animation: slide-up var(--t-slow) var(--ease-spring);
}

/* ===== TOAST ===== */
.toast-container { position: fixed; bottom: var(--s-5); right: var(--s-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-2); }
.toast {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  box-shadow: var(--shadow-md); min-width: 260px;
  animation: slide-up var(--t-base) var(--ease-out);
}
.toast.success { border-left: 3px solid var(--success); }
.toast.danger  { border-left: 3px solid var(--danger); }

/* ===== KPI CARD ===== */
.kpi { padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.kpi-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.kpi-value { font-family: var(--font-num); font-size: var(--fs-3xl); font-weight: 600; color: var(--text); letter-spacing: -.02em; margin-top: var(--s-1); }
.kpi-delta { font-size: var(--fs-xs); margin-top: var(--s-1); display: inline-flex; align-items: center; gap: var(--s-1); }
.kpi-delta.up   { color: var(--success); }
.kpi-delta.down { color: var(--danger); }

/* ===== DIVIDER ===== */
.divider { height: 1px; background: var(--border); margin: var(--s-4) 0; border: 0; }
.divider-v { width: 1px; background: var(--border); align-self: stretch; }

/* ===== FULL-WIDTH OVERRIDE (Fase 10) ===== */
/* Containers principais das views V2 ocupam tela inteira */
.page, .hub, .dash, .hub-grid {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
/* Padding lateral menor pra aproveitar a tela */
body.scroll-pretty .page { padding-left: 32px; padding-right: 32px; }
@media (max-width: 700px) {
  body.scroll-pretty .page { padding-left: 16px; padding-right: 16px; }
}

/* ===== FULL-WIDTH FORÇADO V2 (sobrescreve inline styles) ===== */
.page, .hub, .dash, .hub-grid, .page-v2, body > div.page, body > div.hub {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body[class*="scroll"] > .page,
body[class*="scroll"] > div.hub {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
@media (max-width: 600px) {
  body[class*="scroll"] > .page,
  body[class*="scroll"] > div.hub { padding-left: 14px !important; padding-right: 14px !important; }
}
/* Hub grid: passa de 3 colunas pra auto-fill que aproveita mais espaço */
.hub-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}

/* ===== FUNDO WHATSAPP ORIGINAL — doodles autenticos (cores reais WA) ===== */
.chat-area-wa-bg, .painel-v2 .chat-area, .chat-msgs-wa {
  background-color: #ECE5DD; /* cor exata do WhatsApp light */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='540' viewBox='0 0 540 540'%3E%3Cg fill='none' stroke='%23B8B0A0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'%3E%3Cpath d='M30 30 q-8 0 -8 8 v18 q0 8 8 8 h12 l8 8 v-8 h22 q8 0 8 -8 v-18 q0 -8 -8 -8 z'/%3E%3Cpath d='M380 60 q-7 0 -7 7 v15 q0 7 7 7 h10 l7 7 v-7 h18 q7 0 7 -7 v-15 q0 -7 -7 -7 z'/%3E%3Cpath d='M200 380 q-7 0 -7 7 v15 q0 7 7 7 h10 l7 7 v-7 h18 q7 0 7 -7 v-15 q0 -7 -7 -7 z'/%3E%3Cpath d='M60 460 q-6 0 -6 6 v12 q0 6 6 6 h10 l6 6 v-6 h14 q6 0 6 -6 v-12 q0 -6 -6 -6 z'/%3E%3Cpath d='M460 150 c-5 -8 -16 -8 -20 0 c-4 -8 -16 -8 -20 0 c-4 6 0 14 6 20 l14 12 l14 -12 c6 -6 10 -14 6 -20 z' fill='%23B8B0A0' fill-opacity='0.25'/%3E%3Cpath d='M120 220 c-4 -6 -12 -6 -15 0 c-3 -6 -12 -6 -15 0 c-3 5 0 10 4 14 l11 10 l11 -10 c4 -4 7 -9 4 -14 z'/%3E%3Cpath d='M310 480 c-3 -5 -10 -5 -12 0 c-2 -5 -10 -5 -12 0 c-2 4 0 8 3 11 l9 8 l9 -8 c3 -3 5 -7 3 -11 z'/%3E%3Crect x='100' y='100' width='14' height='28' rx='7'/%3E%3Cpath d='M92 124 q0 16 15 16 t15 -16 m-15 16 v8 m-6 0 h12'/%3E%3Crect x='380' y='430' width='42' height='30' rx='3'/%3E%3Ccircle cx='401' cy='445' r='8'/%3E%3Cpath d='M388 425 h12 l4 5 h10'/%3E%3Crect x='50' y='320' width='30' height='28' rx='2'/%3E%3Cpath d='M50 332 h30 M65 320 v28 M55 320 q-2 -8 5 -8 t5 8 q0 -8 5 -8 t5 8'/%3E%3Ccircle cx='320' cy='250' r='14'/%3E%3Cpath d='M315 247 v1 m10 -1 v1 m-9 4 q5 4 9 0'/%3E%3Ccircle cx='465' cy='340' r='8'/%3E%3Cpath d='M473 340 l25 0 m-4 -4 v8 m-5 -8 v8'/%3E%3Crect x='180' y='460' width='22' height='18' rx='2'/%3E%3Cpath d='M183 460 v-6 q0 -8 8 -8 t8 8 v6'/%3E%3Ccircle cx='191' cy='469' r='2' fill='%23B8B0A0'/%3E%3Ccircle cx='160' cy='40' r='6' fill='%23B8B0A0' fill-opacity='0.3'/%3E%3Cpath d='M160 30 v-6 m0 32 v-6 m-13 -10 h-6 m32 0 h-6 m-22 -10 l-4 -4 m22 -4 l4 -4 m-22 22 l-4 4 m22 4 l4 4'/%3E%3Cpath d='M310 110 l8 8 l16 -16'/%3E%3Cpath d='M30 470 l40 -8 l-32 24 l-2 -10 l24 -8'/%3E%3Cpath d='M420 280 l24 -24 l8 8 l-24 24 z m-3 3 l5 -2 l-3 -3 z'/%3E%3Cpath d='M60 200 l24 0 l0 28 l-24 0 z M70 200 v28 M65 208 h6 m-6 6 h6 m-6 6 h6'/%3E%3Cpath d='M280 440 v-22 l14 -4 v22'/%3E%3Cellipse cx='276' cy='443' rx='5' ry='3'/%3E%3Cellipse cx='290' cy='437' rx='5' ry='3'/%3E%3Cpath d='M340 340 q-2 0 -2 2 v20 q0 6 6 6 h16 q6 0 6 -6 v-20 q0 -2 -2 -2 z m26 6 q6 0 6 8 t-6 8'/%3E%3Cpath d='M345 335 v-5 m6 5 v-5 m6 5 v-5'/%3E%3Cpath d='M450 470 q-15 0 -15 -15 t15 -15 t15 15 t-15 15 z' fill='%23B8B0A0' fill-opacity='0.3'/%3E%3Cpath d='M442 470 v10 q0 4 4 4 h8 q4 0 4 -4 v-10'/%3E%3Ccircle cx='446' cy='458' r='1.5' fill='%23B8B0A0'/%3E%3Ccircle cx='454' cy='453' r='1.5' fill='%23B8B0A0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 540px 540px;
  background-repeat: repeat;
}
[data-theme="dark"] .chat-area-wa-bg,
[data-theme="dark"] .painel-v2 .chat-area,
[data-theme="dark"] .chat-msgs-wa {
  background-color: #0B141A; /* cor exata do WhatsApp dark */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='540' viewBox='0 0 540 540'%3E%3Cg fill='none' stroke='%23182229' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='1'%3E%3Cpath d='M30 30 q-8 0 -8 8 v18 q0 8 8 8 h12 l8 8 v-8 h22 q8 0 8 -8 v-18 q0 -8 -8 -8 z'/%3E%3Cpath d='M380 60 q-7 0 -7 7 v15 q0 7 7 7 h10 l7 7 v-7 h18 q7 0 7 -7 v-15 q0 -7 -7 -7 z'/%3E%3Cpath d='M200 380 q-7 0 -7 7 v15 q0 7 7 7 h10 l7 7 v-7 h18 q7 0 7 -7 v-15 q0 -7 -7 -7 z'/%3E%3Cpath d='M60 460 q-6 0 -6 6 v12 q0 6 6 6 h10 l6 6 v-6 h14 q6 0 6 -6 v-12 q0 -6 -6 -6 z'/%3E%3Cpath d='M460 150 c-5 -8 -16 -8 -20 0 c-4 -8 -16 -8 -20 0 c-4 6 0 14 6 20 l14 12 l14 -12 c6 -6 10 -14 6 -20 z' fill='%23182229' fill-opacity='0.4'/%3E%3Cpath d='M120 220 c-4 -6 -12 -6 -15 0 c-3 -6 -12 -6 -15 0 c-3 5 0 10 4 14 l11 10 l11 -10 c4 -4 7 -9 4 -14 z'/%3E%3Cpath d='M310 480 c-3 -5 -10 -5 -12 0 c-2 -5 -10 -5 -12 0 c-2 4 0 8 3 11 l9 8 l9 -8 c3 -3 5 -7 3 -11 z'/%3E%3Crect x='100' y='100' width='14' height='28' rx='7'/%3E%3Cpath d='M92 124 q0 16 15 16 t15 -16 m-15 16 v8 m-6 0 h12'/%3E%3Crect x='380' y='430' width='42' height='30' rx='3'/%3E%3Ccircle cx='401' cy='445' r='8'/%3E%3Cpath d='M388 425 h12 l4 5 h10'/%3E%3Crect x='50' y='320' width='30' height='28' rx='2'/%3E%3Cpath d='M50 332 h30 M65 320 v28 M55 320 q-2 -8 5 -8 t5 8 q0 -8 5 -8 t5 8'/%3E%3Ccircle cx='320' cy='250' r='14'/%3E%3Cpath d='M315 247 v1 m10 -1 v1 m-9 4 q5 4 9 0'/%3E%3Ccircle cx='465' cy='340' r='8'/%3E%3Cpath d='M473 340 l25 0 m-4 -4 v8 m-5 -8 v8'/%3E%3Crect x='180' y='460' width='22' height='18' rx='2'/%3E%3Cpath d='M183 460 v-6 q0 -8 8 -8 t8 8 v6'/%3E%3Ccircle cx='191' cy='469' r='2' fill='%23182229'/%3E%3Ccircle cx='160' cy='40' r='6' fill='%23182229' fill-opacity='0.5'/%3E%3Cpath d='M160 30 v-6 m0 32 v-6 m-13 -10 h-6 m32 0 h-6 m-22 -10 l-4 -4 m22 -4 l4 -4 m-22 22 l-4 4 m22 4 l4 4'/%3E%3Cpath d='M310 110 l8 8 l16 -16'/%3E%3Cpath d='M30 470 l40 -8 l-32 24 l-2 -10 l24 -8'/%3E%3Cpath d='M420 280 l24 -24 l8 8 l-24 24 z m-3 3 l5 -2 l-3 -3 z'/%3E%3Cpath d='M60 200 l24 0 l0 28 l-24 0 z M70 200 v28 M65 208 h6 m-6 6 h6 m-6 6 h6'/%3E%3Cpath d='M280 440 v-22 l14 -4 v22'/%3E%3Cellipse cx='276' cy='443' rx='5' ry='3'/%3E%3Cellipse cx='290' cy='437' rx='5' ry='3'/%3E%3Cpath d='M340 340 q-2 0 -2 2 v20 q0 6 6 6 h16 q6 0 6 -6 v-20 q0 -2 -2 -2 z m26 6 q6 0 6 8 t-6 8'/%3E%3Cpath d='M345 335 v-5 m6 5 v-5 m6 5 v-5'/%3E%3Cpath d='M450 470 q-15 0 -15 -15 t15 -15 t15 15 t-15 15 z' fill='%23182229' fill-opacity='0.5'/%3E%3Cpath d='M442 470 v10 q0 4 4 4 h8 q4 0 4 -4 v-10'/%3E%3Ccircle cx='446' cy='458' r='1.5' fill='%23182229'/%3E%3Ccircle cx='454' cy='453' r='1.5' fill='%23182229'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 540px 540px;
  background-repeat: repeat;
}

/* ===== FASE 29 — Modo compacto da lista de conversas ===== */
body[data-modo-compacto="1"] .conv {
  padding: 4px 8px !important;
  min-height: 38px !important;
}
body[data-modo-compacto="1"] .conv .avatar { width: 28px !important; height: 28px !important; font-size: 11px !important; }
body[data-modo-compacto="1"] .conv-name { font-size: 12px !important; }
body[data-modo-compacto="1"] .conv-preview { font-size: 10px !important; max-height: 12px !important; overflow: hidden; }
body[data-modo-compacto="1"] .conv-meta { font-size: 9px !important; }
body[data-modo-compacto="1"] .conv-time { font-size: 9px !important; }

/* Toggle modo compacto botão — ghost subtle, não chamativo */
.toggle-compacto {
  background: transparent; border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 18px; font-size: 13px;
  font-weight: 600; cursor: pointer; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.toggle-compacto:hover {
  background: var(--surface-hover, var(--bg-sunken));
  border-color: var(--text-muted);
  color: var(--text);
}
/* Modo ativo: discreto, sem virar vermelho. Apenas indica estado com brand-soft */
body[data-modo-compacto="1"] .toggle-compacto {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand-soft);
}

/* Cor por categoria de medicamento (Fase 29 · #32) */
.cliente-controlado { border-left: 4px solid #dc2626 !important; }
.cliente-pbm { border-left: 4px solid #f59e0b !important; }
.cliente-vip { border-left: 4px solid #fbbf24 !important; }