/* ============================================================================
   theme-linear-pages-b.css
   Fatia PÁGINAS B do redesign Linear: CONVERSAS + AUTOMAÇÕES + AGENDAMENTO.

   Último CSS da cascata (app.css -> theme-crm-clean -> saas-operability ->
   subaccount-operability -> este). Overrides diretos vencem por ordem e
   especificidade; !important aparece apenas onde a base ou style inline já
   trava a propriedade (app.css usa !important extensivamente nas camadas
   REFINAMENTO/WAVE2, e vários nós reais carregam style inline).

   Referência visual: design-reference/crm-avalanche-proto.html
   (TELA 3 conversas, TELA 4 automações; tokens linhas 7-45).

   Regras cumpridas: escopo [data-theme], cor sólida sempre (dot-grid é
   SVG de círculos sólidos), zero emoji adicionado, nenhum seletor inventado
   (tudo existe no DOM real de agent-manager.py / app.css / JS de render).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0 · TOKENS LOCAIS
   Lê os --color-* do protótipo quando definidos globalmente; segunda opção
   são os --lx-* da fatia CORE; por último os literais do protótipo (linhas
   7-45 de crm-avalanche-proto.html). Declarados só nas raízes desta fatia.
   --------------------------------------------------------------------------- */
[data-theme] :is(#page-conversas, #page-automacoes, #page-agendamento),
[data-theme] #acv,
[data-theme] #flow-ov {
  --ln-void:    var(--color-void, var(--lx-void, #08090a));
  --ln-carbon:  var(--color-carbon, var(--lx-carbon, #0f1011));
  --ln-obsidian:var(--color-obsidian, var(--lx-obsidian, #161718));
  --ln-graphite:var(--color-graphite, var(--lx-graphite, #23252a));
  --ln-smoke:   var(--color-smoke, var(--lx-smoke, #383b3f));
  --ln-ash:     var(--color-ash, var(--lx-ash, #62666d));
  --ln-fog:     var(--color-fog, var(--lx-fog, #8a8f98));
  --ln-mist:    var(--color-mist, var(--lx-mist, #d0d6e0));
  --ln-bone:    var(--color-bone, var(--lx-bone, #e5e5e6));
  --ln-paper:   var(--color-paper, #ffffff);
  --ln-lime:    var(--color-acid-lime, var(--lx-acid-lime, #e4f222));
  --ln-green:   var(--color-pulse-green, var(--lx-pulse-green, #27a644));
  --ln-coral:   var(--color-coral-red, var(--lx-coral-red, #eb5757));
  --ln-teal:    var(--color-signal-teal, var(--lx-signal-teal, #02b8cc));
  --ln-iris:    var(--color-iris-violet, var(--lx-iris-violet, #6366f1));
  --ln-lav:     var(--color-lavender, var(--lx-lavender, #8b5cf6));
  --ln-amber:   var(--color-amber, var(--lx-amber, #e0a33e));
  --ln-mono: var(--font-mono, var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace));
  --ln-ring: var(--lx-sh-subtle);
  --ln-ring-smoke: var(--lx-smoke) 0 0 0 1px inset;
  --ln-ring-lime: rgba(228, 242, 34, 0.8) 0 0 0 1px inset;
  --ln-sh-sm: rgba(0, 0, 0, 0.4) 0 2px 4px 0;
  --ln-sh-xl: var(--lx-sh-xl);
  /* dot-grid do canvas: círculo sólido 1.2px a cada 26px (padrão do protótipo) */
  --ln-dotgrid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='1.2' cy='1.2' r='1.2' fill='%2323252a'/%3E%3C/svg%3E");
}

/* ===========================================================================
   1 · CONVERSAS (#page-conversas) — TELA 3 do protótipo, three-pane Missive
   RODADA 3: paridade estrutural com crm-avalanche-proto.html (linhas 311-361,
   775-852, 1682-1878).
     topbar 52px: título 24px/510 + badge lime de não lidas + busca 280px +
                  filtro em popover + botão Nova conversa acid-lime;
     pane 1 (208px) caixas/espaços/tags, item ativo var(--lx-wash-hover-2);
     pane 2 (336px) lista: item 11px 14px, avatar 32, snippet 2 linhas,
                    selecionado rgba(var(--lx-violet-rgb),.15), não lida com dot lime;
     pane 3 (1fr)   thread: header 56px, bolhas obsidian/graphite sem borda,
                    nota interna violeta, composer .comp-box com textarea e
                    barra de ações ("Ctrl Enter envia").
   Área de trabalho inteira em carbon (#0f1011), como o .work do protótipo.
   =========================================================================== */

/* ---- casca da página ---- */
[data-theme] #page-conversas {
  background: var(--ln-carbon);
}
/* Grid de 3 panes: 208 / 336 / 1fr (protótipo). !important vence o style
   inline (grid-template-columns:340px 1fr) que o app.css usa como seletor. */
[data-theme] #page-conversas > .conv-layout {
  display: grid !important;
  grid-template-columns: 208px 336px minmax(0, 1fr) !important;
  height: calc(100dvh - var(--lx-h-topbar)) !important;
  min-height: 0;
  background: var(--ln-carbon) !important;
}

/* ---- topbar 52px (protótipo .topbar) ---- */
[data-theme] #page-conversas > .conv-topbar {
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  background: var(--ln-carbon);
  border-bottom: 1px solid var(--ln-graphite);
}
[data-theme] #page-conversas .conv-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.33;
  letter-spacing: -0.288px;
  font-weight: 510;
  color: var(--ln-paper);
}
[data-theme] #page-conversas .conv-topbar-spacer {
  flex: 1;
}
/* badge de não lidas: badge b-lime do protótipo (retângulo radius 4) */
[data-theme] #page-conversas .conv-unread-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(var(--lx-lime-rgb),0.14);
  color: var(--lx-acid-lime-deep);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

/* busca global: field do protótipo, 280px */
[data-theme] #page-conversas .conv-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 280px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  background-color: var(--lx-wash-hover);
  border: 1px solid var(--lx-wash-active);
  color: var(--ln-fog);
  transition: border-color 0.12s ease;
}
[data-theme] #page-conversas .conv-search:focus-within {
  border-color: var(--ln-mist);
}
[data-theme] #page-conversas .conv-search svg {
  flex: 0 0 auto;
}
[data-theme] #page-conversas .conv-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--ln-mist);
  font-size: 13px;
}
[data-theme] #page-conversas .conv-search input::placeholder {
  color: var(--ln-ash);
}

/* filtro: botão ibtn + popover leve ancorado (padrão .pop, decisão 9) */
[data-theme] #page-conversas .conv-filter-wrap {
  position: relative;
}
[data-theme] #page-conversas .conv-filter-pop {
  position: absolute;
  top: 36px;
  right: 0;
  z-index: 40;
  width: 264px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--ln-obsidian);
  border: 1px solid var(--ln-graphite);
  border-radius: 12px;
  box-shadow: var(--ln-sh-xl), var(--ln-ring);
}
[data-theme] #page-conversas .conv-filter-pop[hidden] {
  display: none;
}
[data-theme] #page-conversas .conv-filter-lbl {
  font-size: 10px;
  font-weight: 510;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ln-ash);
}
[data-theme] #page-conversas .conv-filter-select {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  background-color: var(--lx-wash-hover) !important;
  border: 1px solid var(--lx-wash-active) !important;
  color: var(--ln-mist) !important;
  font-size: 13px;
}
[data-theme] #page-conversas .conv-filter-select:focus {
  border-color: var(--ln-mist) !important;
}
[data-theme] #page-conversas .conv-filter-tagrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-theme] #page-conversas .conv-filter-tagrow .conv-filter-select {
  flex: 1;
  min-width: 0;
}
[data-theme] #page-conversas #cvtag-clear {
  flex: 0 0 auto;
  border-radius: 6px;
  border: 1px solid var(--ln-graphite);
  background: transparent;
  color: var(--ln-fog);
}
[data-theme] #page-conversas #cvtag-clear:hover {
  background: var(--lx-wash-hover);
  border-color: var(--ln-smoke);
  color: var(--ln-bone);
}

/* ---- pane 1 · caixas, espaços do time e tags ---- */
[data-theme] #page-conversas #conv-boxes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  padding: 12px 8px;
  overflow-y: auto;
  border-right: 1px solid var(--ln-graphite);
}
[data-theme] #page-conversas .conv-boxes-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-theme] #page-conversas .conv-boxes-title {
  display: block;
  padding: 0 8px;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 510;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ln-ash);
}
[data-theme] #page-conversas #conv-box-tags {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-theme] #page-conversas .conv-box-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ln-fog);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-theme] #page-conversas .conv-box-item:hover {
  background: var(--lx-wash-hover);
  color: var(--ln-mist);
}
/* item ativo: var(--lx-wash-hover-2) + texto paper (nav-item.active do protótipo) */
[data-theme] #page-conversas .conv-box-item.active {
  background: var(--lx-wash-hover-2);
  color: var(--ln-paper);
  font-weight: 510;
}
[data-theme] #page-conversas .conv-box-item.active:hover {
  background: var(--lx-wash-hover-2);
  color: var(--ln-paper);
}
[data-theme] #page-conversas .conv-box-item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
[data-theme] #page-conversas .conv-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  flex: 0 0 auto;
  /* cor por espaço/tag vem do background inline no markup */
}
[data-theme] #page-conversas .conv-dot-tag {
  background: var(--lx-lavender-text);
}
[data-theme] #page-conversas .conv-box-count {
  margin-left: auto;
  font-family: var(--ln-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ln-ash);
}
[data-theme] #page-conversas .conv-box-empty-tags {
  padding: 0 8px;
  font-size: 12px;
  color: var(--ln-ash);
}

/* ---- pane 2 · lista de conversas ---- */
[data-theme] #page-conversas .conv-listpane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--ln-graphite);
}
[data-theme] #page-conversas .conv-listpane-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ln-graphite);
}
[data-theme] #page-conversas .conv-listpane-title {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.165px;
  font-weight: 510;
  color: var(--ln-bone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme] #page-conversas .conv-listpane-status {
  font-family: var(--ln-mono) !important;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ln-ash) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
[data-theme] #page-conversas .conv-listpane-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-theme] #page-conversas .conv-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ln-fog);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-theme] #page-conversas .conv-iconbtn:hover {
  background: var(--lx-wash-hover-2);
  color: var(--ln-bone);
}
[data-theme] #page-conversas .conv-iconbtn[aria-expanded="true"] {
  background: var(--lx-wash-active);
  color: var(--ln-paper);
}
[data-theme] #page-conversas .conv-iconbtn svg {
  width: 16px;
  height: 16px;
}
/* vazio de caixa/busca (fica fora do #conv-list para o app.js não limpar) */
[data-theme] #page-conversas .conv-box-empty {
  margin: 48px auto;
  text-align: center;
}
[data-theme] #page-conversas .conv-box-empty-title {
  font-size: 13px;
  font-weight: 510;
  color: var(--ln-mist);
  margin-bottom: 4px;
}
[data-theme] #page-conversas .conv-box-empty-sub {
  font-size: 12px;
  color: var(--ln-ash);
}

[data-theme] #page-conversas #conv-list {
  flex: 1;
  min-height: 0;
  background: transparent !important;
  border-right: 0 !important; /* a régua agora vive na .conv-listpane */
}
/* filtro de caixa/busca ativa: item escondido sem tocar no render do app.js */
[data-theme] #page-conversas #conv-list .conv-box-hidden {
  display: none !important;
}
/* separador de data sticky (date-sep do protótipo; inserido pelo patch 4.4
   do appjs-notes, inofensivo enquanto o patch não é aplicado) */
[data-theme] #page-conversas .conv-date-sep {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 14px 6px;
  background: var(--ln-carbon);
  border-bottom: 1px solid var(--ln-graphite);
  font-size: 10px;
  font-weight: 510;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ln-ash);
}
/* separador de dia dentro da thread (th-day do protótipo, patch 4.5) */
[data-theme] #page-conversas .conv-day-sep {
  align-self: center;
  padding: 2px 0;
  font-family: var(--ln-mono);
  font-size: 11px;
  color: var(--ln-ash);
}
/* avatar 28px ao lado da bolha (patch 4.5) */
[data-theme] #page-conversas .conv-msg-av {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: var(--ln-graphite);
  color: var(--ln-mist);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 590;
  flex: 0 0 auto;
  overflow: hidden;
}
[data-theme] #page-conversas .conv-msg-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-theme] #page-conversas .conv-item {
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--ln-graphite) !important;
  border-left: 2px solid transparent;
  transition: background 0.1s ease;
}
[data-theme] #page-conversas .conv-item:hover {
  background: var(--lx-wash-hover) !important;
}
/* selecionado: iris translúcido do protótipo (.conv.sel), sem barra lateral */
[data-theme] #page-conversas .conv-item.active {
  background: rgba(var(--lx-violet-rgb),0.15) !important;
  border-bottom-color: var(--ln-graphite) !important;
  border-left: 2px solid transparent !important;
  box-shadow: none;
}
[data-theme] #page-conversas .conv-item.active::before {
  display: none;
}
[data-theme] #page-conversas .conv-avatar {
  width: 32px;
  height: 32px;
  background: var(--ln-graphite) !important;
  background-image: none !important;
  border: none;
  color: var(--ln-mist) !important;
  font-size: 12px;
  font-weight: 590;
  letter-spacing: 0.02em;
  overflow: hidden;
}
/* iniciais coloridas (fallback de avatar, item 8): span sólido preenche o círculo */
[data-theme] #page-conversas .conv-avatar .conv-av-ini,
[data-theme] #page-conversas .conv-head-av .conv-av-ini {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-weight: 590;
  border-radius: inherit;
}
[data-theme] #page-conversas .conv-meta {
  gap: 3px;
}
[data-theme] #page-conversas .conv-name {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ln-bone) !important;
  font-size: 13px;
  font-weight: 510;
  letter-spacing: -0.005em;
}
/* não lida: dot lime antes do nome + nome paper + snippet mist (protótipo) */
[data-theme] #page-conversas .conv-item.conv-unread .conv-name::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--ln-lime);
  flex: 0 0 auto;
}
[data-theme] #page-conversas .conv-item.conv-unread .conv-name {
  color: var(--ln-paper) !important;
}
[data-theme] #page-conversas .conv-item.conv-unread .conv-last {
  color: var(--ln-mist) !important;
}
[data-theme] #page-conversas .conv-last {
  color: var(--ln-fog) !important;
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
[data-theme] #page-conversas .conv-time {
  color: var(--ln-ash) !important;
  font-family: var(--ln-mono) !important;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
  padding-top: 1px;
}
/* badge de canal: badge neutro do protótipo */
[data-theme] #page-conversas .conv-channel-badge {
  background: var(--lx-wash-hover) !important;
  border: none;
  color: var(--ln-fog) !important;
  border-radius: 4px;
  font-size: 11px;
}
/* chips de tag na lista: badge b-violet compacto */
[data-theme] #page-conversas .cvtag-chips {
  gap: 4px;
  margin-top: 3px;
}
[data-theme] #page-conversas .cvtag-chip {
  background: var(--lx-wash-lavender) !important;
  border: none;
  color: var(--lx-lavender-text) !important;
  border-radius: 4px;
  font-size: 11px;
  padding: 0 5px;
  height: 17px;
  line-height: 17px;
}
[data-theme] #page-conversas .conv-empty {
  color: var(--ln-fog) !important;
}
[data-theme] #page-conversas .conv-empty small {
  color: var(--ln-ash);
}
[data-theme] #page-conversas #conv-list > .surface-state {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--ln-fog);
}

/* ---- pane 3 · thread ---- */
[data-theme] #page-conversas #conv-thread {
  background: var(--ln-carbon) !important;
  min-width: 0;
  min-height: 0;
  position: relative; /* âncora do botão flutuante "descer pro fim" (patch CONVERSAS) */
}
[data-theme] #page-conversas #conv-thread-header {
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  padding: 0 18px !important;
  background: var(--ln-carbon) !important;
  border-bottom: 1px solid var(--ln-graphite) !important;
}
[data-theme] #page-conversas #conv-thread-header b {
  color: var(--ln-bone) !important;
  font-size: 15px;
  font-weight: 510;
  letter-spacing: -0.165px;
}
[data-theme] #page-conversas #conv-thread-header span {
  color: var(--ln-ash) !important;
}
/* chips de tag do header voltam ao neutro (lá são meta, não lista) */
[data-theme] #page-conversas #conv-thread-header .cvtag-chip {
  background: var(--lx-wash-hover) !important;
  color: var(--ln-fog) !important;
  /* item 13: mais espaço pra tag não truncar feio ("Imersão Agost…") */
  max-width: 240px;
  height: auto;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme] #page-conversas #conv-thread-header .cvtag-chips {
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
/* botões do cabeçalho da thread: ibtn do protótipo (sem borda, hover bg) */
[data-theme] #page-conversas #conv-tag-btn,
[data-theme] #page-conversas #conv-del-btn,
[data-theme] #page-conversas #conv-iphone-btn,
[data-theme] #page-conversas #conv-mobile-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--ln-fog);
  font-size: 12px;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-theme] #page-conversas #conv-tag-btn svg,
[data-theme] #page-conversas #conv-del-btn svg,
[data-theme] #page-conversas #conv-iphone-btn svg {
  width: 16px;
  height: 16px;
}
[data-theme] #page-conversas #conv-tag-btn:hover,
[data-theme] #page-conversas #conv-iphone-btn:hover,
[data-theme] #page-conversas #conv-mobile-back:hover {
  background: var(--lx-wash-hover-2);
  color: var(--ln-bone);
}
[data-theme] #page-conversas #conv-del-btn {
  color: var(--lx-coral-text);
}
[data-theme] #page-conversas #conv-del-btn:hover {
  background: rgba(var(--lx-coral-rgb),0.1);
  color: var(--lx-coral-text);
}

/* área de mensagens: carbon sólido, sem doodle tileado */
[data-theme] #page-conversas #conv-msgs {
  background-color: var(--ln-carbon) !important;
  background-image: none !important;
  padding: 20px 18px 8px !important;
  gap: 2px !important; /* espaçamento intra-grupo; margem separa os grupos (patch CONVERSAS) */
}

/* bolhas: obsidian (delas) / graphite (nossas), radius 12, sem borda */
[data-theme] #page-conversas .conv-bubble-row {
  max-width: 66%;
}
/* agrupamento estilo WhatsApp: bolhas consecutivas do mesmo remetente colam;
   a margem de topo (só no início do grupo) separa grupos e blocos vizinhos */
[data-theme] #page-conversas .conv-bubble-row:not(.conv-grouped) {
  margin-top: 10px;
}
[data-theme] #page-conversas .conv-bubble {
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  box-shadow: none;
}
[data-theme] #page-conversas .conv-bubble.inbound {
  background: var(--ln-obsidian) !important;
  border: none !important;
  color: var(--ln-mist) !important;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 12px;
}
[data-theme] #page-conversas .conv-bubble.outbound {
  background: var(--ln-graphite) !important;
  border: none !important;
  color: var(--ln-bone) !important;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 12px;
}
[data-theme] #page-conversas .conv-bubble-time {
  color: var(--ln-ash) !important;
  font-family: var(--ln-mono) !important;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  margin-top: 5px;
}
[data-theme] #page-conversas .conv-bubble-row.outbound .conv-bubble-time {
  color: var(--ln-ash) !important;
  text-align: right;
}
/* carimbo dd/mm · HH:MM discreto no rodapé da bolha (patch CONVERSAS item 1b) */
[data-theme] #page-conversas .conv-bubble-stamp {
  color: var(--ln-ash);
  font-variant-numeric: tabular-nums;
}

/* ---- agrupamento de bolhas + cauda (patch CONVERSAS item 4) ----
   Cauda (canto reto 4px + triângulo sólido) só na PRIMEIRA bolha de cada grupo.
   Bolha agrupada (mesma direção da anterior) fica totalmente arredondada. */
[data-theme] #page-conversas .conv-bubble-row.conv-grouped .conv-bubble.inbound {
  border-top-left-radius: 12px;
}
[data-theme] #page-conversas .conv-bubble-row.conv-grouped .conv-bubble.outbound {
  border-top-right-radius: 12px;
}
[data-theme] #page-conversas .conv-bubble-row:not(.conv-grouped) .conv-bubble {
  position: relative;
}
[data-theme] #page-conversas .conv-bubble-row:not(.conv-grouped) .conv-bubble.inbound::before {
  content: "";
  position: absolute;
  top: 0;
  left: -6px;
  width: 7px;
  height: 13px;
  background: var(--ln-obsidian);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
[data-theme] #page-conversas .conv-bubble-row:not(.conv-grouped) .conv-bubble.outbound::after {
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  width: 7px;
  height: 13px;
  background: var(--ln-graphite);
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

/* wrapper por dia: o pill sticky fica preso ao bloco do dia (nunca 2 grudados) */
[data-theme] #page-conversas .conv-day-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* ---- separador de dia dentro da thread: pill central sticky (item 1a) ---- */
[data-theme] #page-conversas .conv-daysep {
  align-self: center;
  position: sticky;
  top: 4px;
  z-index: 3;
  margin: 12px auto 8px;
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--ln-obsidian);
  box-shadow: var(--ln-ring);
  color: var(--ln-fog);
  font-size: 11px;
  font-weight: 510;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- avatar 28px ao lado da bolha / no header (fallback iniciais, item 8) ---- */
[data-theme] #page-conversas .conv-head-av {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  font-size: 12px;
  font-weight: 590;
  color: #fff;
  flex: 0 0 auto;
  overflow: hidden;
}
[data-theme] #page-conversas .conv-head-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- paginação de histórico (item 3): spinner no topo + botão descer ---- */
[data-theme] #page-conversas .conv-oldspin {
  align-self: center;
  margin: 4px auto 8px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--ln-ash);
  font-family: var(--ln-mono);
}
[data-theme] #page-conversas .conv-scrolldown {
  position: absolute;
  right: 22px;
  bottom: 104px;
  z-index: 6;
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--ln-obsidian);
  border: 1px solid var(--ln-graphite);
  color: var(--ln-mist);
  cursor: pointer;
  box-shadow: var(--ln-sh-sm);
  transition: background 0.12s ease, color 0.12s ease;
}
[data-theme] #page-conversas .conv-scrolldown.show {
  display: inline-flex;
}
[data-theme] #page-conversas .conv-scrolldown:hover {
  background: var(--ln-graphite);
  color: var(--ln-paper);
}
[data-theme] #page-conversas .conv-scrolldown svg {
  width: 18px;
  height: 18px;
}
/* chip "resposta de botão" na bolha (item 7d) */
[data-theme] #page-conversas .conv-btnreply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(var(--lx-violet-rgb), 0.16);
  color: var(--lx-lavender-text);
  font-size: 11px;
  font-weight: 510;
}
[data-theme] #page-conversas .conv-btnreply svg {
  width: 13px;
  height: 13px;
}
/* template genérico (IG) e fallback digno (item 7c) */
[data-theme] #page-conversas .conv-tpl-generic {
  min-width: 190px;
}
[data-theme] #page-conversas .conv-tpl-fallback {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ln-mist);
  font-size: 13px;
}
[data-theme] #page-conversas .conv-tpl-fallback svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--ln-fog);
}

/* nota interna: card violeta translúcido ("só o time vê"), .note do protótipo */
[data-theme] #page-conversas .conv-note {
  max-width: 78%;
  margin: 2px auto 2px 34px;
  background: rgba(var(--lx-lavender-rgb),0.07);
  border: 1px solid rgba(var(--lx-lavender-rgb),0.32);
  border-radius: 12px;
  padding: 9px 12px;
}
[data-theme] #page-conversas .conv-note-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 510;
  color: var(--lx-lavender-text);
}
[data-theme] #page-conversas .conv-note-b {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ln-mist);
  white-space: pre-wrap;
  word-break: break-word;
}
[data-theme] #page-conversas .conv-note-meta {
  margin-top: 5px;
  font-family: var(--ln-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--ln-ash);
}

/* ---- composer: tabs + comp-box (textarea + barra de ações no mesmo card) ---- */
[data-theme] #page-conversas #conv-input-wrap {
  flex: 0 0 auto;
  background: transparent !important;
  border-top: 1px solid var(--ln-graphite) !important;
  padding: 10px 18px 12px !important;
}
[data-theme] #page-conversas .comp-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
[data-theme] #page-conversas .comp-tab {
  height: 26px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  color: var(--ln-fog);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-theme] #page-conversas .comp-tab:hover {
  background: var(--lx-wash-hover);
  color: var(--ln-mist);
}
[data-theme] #page-conversas .comp-tab.active {
  background: var(--lx-wash-active);
  color: var(--ln-paper);
  font-weight: 510;
}
[data-theme] #page-conversas .comp-box {
  border: 1px solid var(--ln-graphite);
  border-radius: 12px;
  background: var(--lx-wash-hover);
  padding: 10px 12px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
[data-theme] #page-conversas .comp-box:focus-within {
  border-color: var(--ln-smoke);
}
[data-theme] #page-conversas #conv-input-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}
[data-theme] #page-conversas #conv-input-text {
  width: 100%;
  min-height: 56px;
  height: auto !important;
  padding: 0 !important;
  resize: none;
  border: none !important;
  outline: none;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ln-mist) !important;
  font-size: 13px;
  line-height: 1.55;
  font-family: inherit;
}
[data-theme] #page-conversas #conv-input-text::placeholder {
  color: var(--ln-ash);
}
[data-theme] #page-conversas .comp-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
[data-theme] #page-conversas .comp-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ln-fog);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-theme] #page-conversas .comp-action-btn:hover {
  background: var(--lx-wash-hover-2);
  color: var(--ln-bone);
}
[data-theme] #page-conversas .comp-action-btn :is(span,svg) {
  display: inline-flex;
  width: 15px;
  height: 15px;
}
[data-theme] #page-conversas .comp-action-danger {
  color: var(--lx-coral-text);
}
[data-theme] #page-conversas .comp-action-danger:hover {
  background: rgba(var(--lx-coral-rgb),0.1);
  color: var(--lx-coral-text);
}
[data-theme] #page-conversas .comp-actions-spacer {
  flex: 1;
}
[data-theme] #page-conversas .comp-hint {
  font-size: 12px;
  color: var(--ln-ash);
  white-space: nowrap;
}
/* modo nota: comp-box violeta (translúcido sólido) */
[data-theme] #page-conversas #conv-input-wrap.comp-mode-note .comp-box {
  background: rgba(var(--lx-lavender-rgb),0.06);
  border-color: rgba(var(--lx-lavender-rgb),0.32);
}
[data-theme] #page-conversas #conv-input-wrap.comp-mode-note .comp-box:focus-within {
  border-color: rgba(var(--lx-lavender-rgb),0.5);
}
[data-theme] #page-conversas .comp-mode-note .comp-tab.active {
  background: rgba(var(--lx-lavender-rgb),0.14);
  color: var(--lx-lavender-text);
}
[data-theme] #page-conversas .comp-note-hint {
  margin: 6px 2px 0;
  font-size: 11px;
  color: var(--lx-lavender-text);
}
[data-theme] #page-conversas .conv-ig-hint {
  display: block;
  margin-top: 6px;
  color: var(--ln-ash) !important;
  font-size: 11px;
}
/* item 5: a dica fixa de Instagram só aparece em conversa de IG (conversas.js
   alterna o atributo hidden; sem esta regra o display:block acima o ignoraria) */
[data-theme] #page-conversas .conv-ig-hint[hidden] {
  display: none !important;
}

/* banner de janela 24h: card neutro, sem borda-esquerda colorida */
[data-theme] #page-conversas #conv-tpl-banner {
  background: var(--lx-wash-hover) !important;
  border: 1px solid var(--ln-graphite) !important;
  border-radius: 12px !important;
  color: var(--ln-mist) !important;
}
[data-theme] #page-conversas #conv-tpl-banner svg {
  stroke: var(--ln-fog);
}
[data-theme] #page-conversas #conv-tpl-banner b {
  color: var(--ln-bone);
}
[data-theme] #page-conversas #conv-tpl-select {
  border-radius: 6px !important;
  background-color: var(--lx-wash-hover) !important;
  border: 1px solid var(--ln-graphite) !important;
  color: var(--ln-mist) !important;
}
[data-theme] #page-conversas #conv-mic-timer {
  color: var(--ln-coral) !important;
  font-family: var(--ln-mono);
}

/* botões desta página: componentes .btn do protótipo */
[data-theme] #page-conversas .btn {
  border-radius: 6px;
}
[data-theme] #page-conversas .btn-primary {
  background: var(--ln-lime);
  border: 1px solid var(--ln-lime);
  color: var(--lx-on-lime) !important;
  font-weight: 590;
}
[data-theme] #page-conversas .btn-primary:hover {
  background: var(--lx-acid-lime-hi);
  border-color: var(--lx-acid-lime-hi);
  transform: none;
  box-shadow: none;
}
[data-theme] #page-conversas .btn-secondary {
  background: transparent;
  border: 1px solid var(--ln-graphite);
  color: var(--ln-mist);
}
[data-theme] #page-conversas .btn-secondary:hover {
  background: var(--lx-wash-hover);
  border-color: var(--ln-smoke);
  color: var(--ln-bone);
}

/* popover de tag + modal de exclusão */
[data-theme] #conv-tag-pop {
  background: var(--ln-obsidian);
  border: 1px solid var(--ln-graphite);
  border-radius: 12px;
  box-shadow: var(--ln-sh-xl), var(--ln-ring);
}
[data-theme] #conv-tag-pop #conv-tag-search {
  background-color: var(--lx-wash-hover);
  border: 1px solid var(--ln-graphite);
  border-radius: 6px;
  color: var(--ln-mist);
}
[data-theme] .conv-tag-item {
  color: var(--ln-mist);
  border-radius: 6px;
}
[data-theme] .conv-tag-item:hover {
  background: var(--lx-wash-hover);
}
[data-theme] .conv-tag-item span {
  color: var(--ln-ash);
}
[data-theme] .conv-tag-item.new {
  color: var(--lx-acid-lime-deep);
}
[data-theme] .conv-tag-empty {
  color: var(--ln-ash);
}
[data-theme] #conv-del-modal .modal {
  background: var(--ln-obsidian);
  border: 1px solid var(--ln-graphite);
  border-radius: 12px;
  box-shadow: var(--ln-sh-xl), var(--ln-ring);
}
[data-theme] #conv-del-modal .modal::before {
  display: none;
}
[data-theme] #conv-del-modal .modal-header {
  border-bottom: 1px solid var(--ln-graphite);
}
[data-theme] #conv-del-modal .modal-header h2 {
  color: var(--ln-bone);
}
[data-theme] #conv-del-modal .modal-close {
  color: var(--ln-fog);
}
[data-theme] #conv-del-modal .modal-close:hover {
  color: var(--ln-paper);
  background: var(--lx-wash-hover-2);
}
[data-theme] #conv-del-modal #conv-del-body {
  color: var(--ln-mist) !important;
}
[data-theme] #conv-del-modal #conv-del-confirm {
  background: var(--lx-wash-coral) !important;
  border: 1px solid rgba(var(--lx-coral-rgb),0.45) !important;
  color: var(--lx-coral-text) !important;
}
[data-theme] #conv-del-modal #conv-del-confirm:hover {
  background: rgba(var(--lx-coral-rgb),0.22) !important;
}

/* ---- responsivo do three-pane ----
   O bundle (app.css) ja trata <768px como master/detail entre #conv-list e
   #conv-thread; aqui estendemos isso aos novos panes: esconde o pane 1 e
   ajusta a altura do wrapper da lista. */
@media (min-width: 768px) and (max-width: 1023px) {
  [data-theme] #page-conversas .conv-layout {
    grid-template-columns: 336px minmax(0, 1fr) !important;
  }
  [data-theme] #page-conversas #conv-boxes {
    display: none !important;
  }
}
@media (max-width: 767px) {
  [data-theme] #page-conversas .conv-layout {
    display: block !important;
  }
  [data-theme] #page-conversas #conv-boxes {
    display: none !important;
  }
  [data-theme] #page-conversas .conv-listpane {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-right: 0;
  }
  [data-theme] #page-conversas .conv-listpane #conv-list {
    flex: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    border-right: 0 !important;
  }
  [data-theme] #page-conversas.conv-thread-open .conv-listpane {
    display: none !important;
  }
  [data-theme] #page-conversas.conv-thread-open #conv-thread {
    display: flex !important;
  }
  [data-theme] #page-conversas .conv-title {
    font-size: 20px;
  }
  [data-theme] #page-conversas .conv-search {
    width: auto;
    flex: 1;
    min-width: 0;
  }
}