/* =========================================================================
   OMNI - Central de Atendimento (PROTÓTIPO) - styles.css
   Tema profissional, moderno e discreto. Complementa o Bootstrap 5.
   ========================================================================= */
:root {
  --omni-primary: #2f5bea;
  --omni-primary-dark: #2445b8;
  --omni-primary-soft: #eaf0ff;
  --omni-ink: #1f2733;
  --omni-muted: #6b7583;
  --omni-bg: #f5f7fb;
  --omni-sidebar: #10192e;
  --omni-sidebar-2: #172341;
  --omni-border: #e6e9f0;
  --omni-ok: #198754;
  --omni-warn: #f0ad4e;
  --omni-danger: #dc3545;
}

html, body { height: 100%; }
body {
  background: var(--omni-bg);
  color: var(--omni-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.text-muted-2 { color: var(--omni-muted) !important; }
.btn-primary { --bs-btn-bg: var(--omni-primary); --bs-btn-border-color: var(--omni-primary); --bs-btn-hover-bg: var(--omni-primary-dark); --bs-btn-hover-border-color: var(--omni-primary-dark); --bs-btn-active-bg: var(--omni-primary-dark); }
.btn-outline-primary { --bs-btn-color: var(--omni-primary); --bs-btn-border-color: var(--omni-primary); --bs-btn-hover-bg: var(--omni-primary); --bs-btn-hover-border-color: var(--omni-primary); --bs-btn-active-bg: var(--omni-primary); }
.text-primary { color: var(--omni-primary) !important; }
.bg-primary-soft { background: var(--omni-primary-soft); }
a { color: var(--omni-primary); }
.link-plain { text-decoration: none; }

/* ---------- Público / Landing ---------- */
.navbar-brand-omni { font-weight: 700; letter-spacing: .2px; }
.brand-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--omni-primary); margin-right: 8px; vertical-align: middle; }
.hero {
  background: radial-gradient(1100px 480px at 80% -10%, #dbe6ff 0%, rgba(219,230,255,0) 60%), linear-gradient(180deg, #ffffff, var(--omni-bg));
  border-bottom: 1px solid var(--omni-border);
}
.hero h1 { font-weight: 800; line-height: 1.1; letter-spacing: -.5px; }
.feature-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--omni-primary-soft); color: var(--omni-primary); font-size: 1.35rem; }
.plan-card.destaque { border: 2px solid var(--omni-primary); box-shadow: 0 12px 30px rgba(47,91,234,.14); }
.section { padding: 72px 0; }
footer.omni-foot { background: #0d1526; color: #c7d0e0; }
footer.omni-foot a { color: #e7ecf6; text-decoration: none; }

/* ---------- Portal do cliente ---------- */
.portal { min-height: 100vh; background: var(--omni-bg); }
.portal-top { background: #fff; border-bottom: 1px solid var(--omni-border); position: sticky; top: 0; z-index: 20; }

/* ---------- Auth cards ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background:
  radial-gradient(900px 420px at 15% -10%, #dbe6ff 0%, rgba(219,230,255,0) 55%), var(--omni-bg); }
.auth-card { width: 100%; max-width: 430px; }
.demo-creds { background: var(--omni-primary-soft); border: 1px dashed #b9c8ff; border-radius: 10px; }

/* ---------- Layout autenticado ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 256px; background: linear-gradient(180deg, var(--omni-sidebar), var(--omni-sidebar-2));
  color: #cdd6ea; flex-shrink: 0; min-height: 100vh; overflow: visible;
  transition: width .18s ease;
}
.sidebar .brand { color: #fff; font-weight: 700; padding: 18px 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.sidebar .nav-section { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #7d89a6; padding: 16px 18px 6px; }
.sidebar .nav-link { color: #cdd6ea; border-radius: 8px; margin: 2px 10px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; font-size: .93rem; }
.sidebar .nav-link .bi { font-size: 1.05rem; width: 20px; text-align: center; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-link.active { background: var(--omni-primary); color: #fff; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 62px; background: #fff; border-bottom: 1px solid var(--omni-border); display: flex; align-items: center; gap: 12px; padding: 0 18px; position: sticky; top: 0; z-index: 20; }
.content { padding: 22px; flex: 1; }
.page-title { font-weight: 700; margin: 0; }
.breadcrumb { --bs-breadcrumb-divider: '/'; margin: 0; font-size: .85rem; }

.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--omni-primary); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .85rem; }
.avatar.lg { width: 44px; height: 44px; font-size: 1rem; }

.card { border: 1px solid var(--omni-border); border-radius: 12px; }
.stat-card .stat-icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 1.25rem; }
.stat-card .stat-icon.sm { width: 34px; height: 34px; font-size: 1rem; border-radius: 9px; }
.stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1; }

/* Dashboard: relógios */
.clock-card { background: linear-gradient(120deg, #0f2b6b, #2f5bea); color: #fff; border: none; }
.clock-card .btn-light { --bs-btn-bg: rgba(255,255,255,.16); --bs-btn-color: #fff; --bs-btn-border-color: transparent; --bs-btn-hover-bg: rgba(255,255,255,.28); --bs-btn-hover-color:#fff; }
.clock-main .clock-time { font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.clock-main .clock-date { font-size: .86rem; opacity: .85; margin-top: 2px; }
.clock-mini { background: rgba(255,255,255,.14); border-radius: 10px; padding: .4rem .7rem; min-width: 104px; }
.clock-mini-label { font-size: .68rem; opacity: .85; white-space: nowrap; }
.clock-mini-time { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Dashboard: tabela por fila */
.dash-fila-tbl th, .dash-fila-tbl td { white-space: nowrap; }
.dash-fila-tbl thead th { font-size: .8rem; color: var(--omni-muted); border-bottom: 1px solid var(--omni-border); }

/* Dashboard: ranking */
.top-at { display: flex; align-items: center; gap: .6rem; background: #fff8e6; border: 1px solid #ffe4a3; border-radius: 10px; padding: .5rem .7rem; }
.rank-row { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.rank-pos { width: 26px; font-weight: 700; color: var(--omni-muted); font-size: .82rem; flex: 0 0 auto; text-align: center; }
.rank-bar { background: #eef1f7; border-radius: 6px; height: 7px; overflow: hidden; margin-top: 3px; }
.rank-fill { background: linear-gradient(90deg, var(--omni-primary), #7ea0ff); height: 100%; border-radius: 6px; }

/* Dashboard: canais */
.canal-chip { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--omni-border); border-radius: 10px; padding: .5rem .7rem; }
.canal-chip > i { font-size: 1.35rem; }

/* barras simples (sem libs de gráfico) */
.bar-track { background: #eef1f7; border-radius: 6px; height: 10px; overflow: hidden; }
.bar-fill { background: var(--omni-primary); height: 100%; border-radius: 6px; }
.spark { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.spark > div { flex: 1; background: linear-gradient(180deg, var(--omni-primary), #7ea0ff); border-radius: 5px 5px 0 0; min-height: 6px; }

.badge-soft { border-radius: 999px; padding: .32em .7em; font-weight: 600; font-size: .74rem; }
.badge-ativa { background: #e6f7ee; color: #157347; }
.badge-fechada { background: #eceff3; color: #55606e; }
.badge-ativo { background: #e6f7ee; color: #157347; }
.badge-inativo { background: #fdeaea; color: #b02a37; }
.badge-pub { background: #e6f2ff; color: #1b62c4; }
.badge-rascunho { background: #fff4e2; color: #a5701a; }

table thead th { color: var(--omni-muted); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.table-hover tbody tr { cursor: default; }
.sortable { cursor: pointer; white-space: nowrap; }
.sortable .bi { opacity: .5; font-size: .8rem; }

/* ---------- Atendimento (inbox + chat) ---------- */
.inbox { display: grid; grid-template-columns: 340px 1fr; gap: 16px; }
.conv-list { max-height: calc(100vh - 210px); overflow-y: auto; }
.conv-item { border: 1px solid var(--omni-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; background: #fff; }
.conv-item:hover { border-color: #c7d3f7; }
.conv-item.active { border-color: var(--omni-primary); background: var(--omni-primary-soft); }
.conv-item .nome { font-weight: 600; font-size: .92rem; }
.conv-item .prev { color: var(--omni-muted); font-size: .82rem; margin-top: 1px; }
.conv-time { font-size: .68rem; color: var(--omni-muted); white-space: nowrap; flex: 0 0 auto; }
.conv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; margin-top: 6px; font-size: .72rem; color: var(--omni-muted); }
.conv-meta > i { font-size: .9rem; line-height: 1; }
.conv-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.conv-tag-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.conv-fila { font-weight: 600; color: var(--omni-ink); }
.conv-prio { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.conv-prio.alta { color: #dc3545; }
.conv-prio.baixa { color: var(--omni-muted); }
.conv-anexo { color: var(--omni-muted); }
.conv-status { color: var(--omni-muted); font-weight: 600; }
.conv-sla { margin-left: auto; padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: .66rem; white-space: nowrap; }
.conv-sla.sla-late { background: #fdecee; color: #b02a37; }
.conv-sla.sla-warn { background: #fff4e2; color: #a5701a; }
.chat-panel { display: flex; flex-direction: column; height: calc(100vh - 210px); }
.chat-body { flex: 1; overflow-y: auto; background: #f7f9fd; border-radius: 10px; padding: 16px; }
.msg { max-width: 74%; padding: 9px 12px; border-radius: 12px; margin-bottom: 10px; font-size: .92rem; box-shadow: 0 1px 1px rgba(16,25,46,.05); }
.msg .meta { display:block; font-size: .68rem; opacity: .7; margin-top: 4px; }
.msg.in { background: #fff; border: 1px solid var(--omni-border); }
.msg.out { background: #dfeaff; margin-left: auto; }
.msg.ia { background: #efe9ff; border: 1px solid #dcd2ff; margin-left: auto; }
.msg.note { background: #fff6da; border: 1px dashed #e9cf7d; }

/* ---------- Utilidades ---------- */
.empty-state { text-align: center; color: var(--omni-muted); padding: 40px 16px; }
.empty-state .bi { font-size: 2.2rem; opacity: .5; }
.cursor-pointer { cursor: pointer; }
.is-invalid-msg { font-size: .8rem; color: var(--omni-danger); }
.divider-v { width: 1px; background: var(--omni-border); align-self: stretch; }
.notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: var(--omni-danger); border-radius: 50%; }

/* ---------- Status de atendimento (pílulas com ícone + texto) ---------- */
.st-aguard   { background: #fff2d8; color: #99690a; }
.st-em       { background: #e3ecff; color: #274bb0; }
.st-cliente  { background: #d9f4fb; color: #0b6a86; }
.st-interno  { background: #efe6ff; color: #5a34a8; }
.st-transf   { background: #eef1f5; color: #4a5560; }
.st-final    { background: #e6f7ee; color: #157347; }
.st-cancel   { background: #fdeaea; color: #b02a37; }
.st-reaberto { background: #e3ecff; color: #274bb0; }
.prio { border-radius: 999px; font-size: .7rem; font-weight: 600; padding: .18em .55em; }
.prio-alta   { background: #fdeaea; color: #b02a37; }
.prio-normal { background: #eef1f5; color: #55606e; }
.prio-baixa  { background: #eaf4ea; color: #3a7a43; }
.sla-pill { border-radius: 999px; font-size: .7rem; font-weight: 600; padding: .18em .55em; }
.sla-ok   { background: #e6f7ee; color: #157347; }
.sla-warn { background: #fff2d8; color: #99690a; }
.sla-late { background: #fdeaea; color: #b02a37; }

/* ---------- Contadores ---------- */
.counters { display: flex; flex-wrap: wrap; gap: 10px; }
.counter-chip { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--omni-border); border-radius: 10px; padding: 8px 12px; }
.counter-chip .bi { font-size: 1.05rem; }
.counter-chip b { font-size: 1.05rem; }
.counter-chip span { color: var(--omni-muted); font-size: .8rem; }
.counter-chip.c-aguard .bi { color: #cc8a12; } .counter-chip.c-em .bi { color: var(--omni-primary); }
.counter-chip.c-cliente .bi { color: #0b98b8; } .counter-chip.c-interno .bi { color: #6f42c1; } .counter-chip.c-final .bi { color: #198754; }

/* ---------- Layout de 3 áreas ---------- */
.atend-grid { display: grid; grid-template-columns: 320px minmax(0,1fr) 320px; gap: 14px; align-items: stretch; }
.atend-grid.no-sel { grid-template-columns: 320px minmax(0,1fr); }
.btn-fechar-top { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--omni-border); background: #fff; color: var(--omni-muted); font-size: .8rem; font-weight: 600; line-height: 1.1; cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease; }
.btn-fechar-top:hover { background: #fdecee; border-color: #f1c2c8; color: #dc3545; }
.btn-fechar-top .bi { font-size: .82rem; }
.atend-left { overflow-y: auto; overflow-x: hidden; }
.atend-center { display: flex; flex-direction: column; overflow: hidden; }
/* Bootstrap 5 não possui .min-w-0; definimos aqui para o text-truncate funcionar em flex */
.min-w-0 { min-width: 0 !important; }
.conv-item { overflow: hidden; }
.conv-item .nome, .conv-item .prev { max-width: 100%; }
.atend-right { overflow-y: auto; overflow-x: hidden; padding: 0; }
/* Preenche a altura disponível (contadores/filtros no topo, grade ocupa o resto) sem estourar a tela */
.atend-page { display: flex; flex-direction: column; }
@media (min-width: 993px) {
  .atend-page { height: calc(100vh - 108px); }
  .atend-page .atend-grid { flex: 1 1 auto; min-height: 0; }
  .atend-page .atend-left, .atend-page .atend-center, .atend-page .atend-right { height: 100%; max-height: 100%; }
  /* Rolagem vertical ATIVADA: libera a altura fixa, as áreas crescem com o conteúdo e a página rola */
  .atend-page.scroll-vert { height: auto; }
  .atend-page.scroll-vert .atend-left, .atend-page.scroll-vert .atend-center, .atend-page.scroll-vert .atend-right { height: auto; max-height: none; }
  .atend-page.scroll-vert .atend-center { overflow: visible; }
  .atend-page.scroll-vert .chat-body { overflow: visible; }
  /* com a página rolando, mantém o cabeçalho da conversa (cliente + ações) fixo abaixo da barra superior */
  /* topo fixo: régua de tempos + filtros + status chips */
  .atend-page.scroll-vert .atend-topbars { position: sticky; top: 62px; z-index: 7; background: var(--omni-bg); padding-top: 2px; }
  .atend-page.scroll-vert .atend-topbars > :last-child { margin-bottom: 8px; }
  /* cabeçalho da conversa fixo logo abaixo do topo (altura medida via --atfix) */
  .atend-page.scroll-vert .atend-center { position: relative; }
  .atend-page.scroll-vert .atend-topo { position: sticky; top: var(--atfix, 210px); z-index: 6; background: #fff; border-radius: 12px 12px 0 0; }
  /* abas do painel de informações (Cliente/Tickets/E-mails...) fixas também */
  .atend-page.scroll-vert .atend-right { overflow: visible; }
  .atend-page.scroll-vert .atend-right .atend-tabs { position: sticky; top: var(--atfix, 210px); z-index: 6; background: #fff; border-radius: 12px 12px 0 0; }
}
.atend-topbars { display: block; }
.list-group-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--omni-muted); font-weight: 700; margin: 10px 4px 6px; }

/* Barra de status: chips compactos (ícone + contador; nome no tooltip / ao selecionar) */
.status-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.status-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; border-radius: 9px; padding: 5px 9px; font-size: .78rem; font-weight: 600; cursor: pointer; line-height: 1.1; }
.status-chip .bi { font-size: 1rem; }
.status-chip .cnt { font-variant-numeric: tabular-nums; opacity: .8; }
.status-chip .lbl { margin-left: 1px; }
.status-chip.st-todos { background: var(--omni-primary-soft); color: var(--omni-primary); }
.status-chip:hover { filter: brightness(.97); }
.status-chip.active { outline: 2px solid var(--omni-primary); outline-offset: 1px; }
.status-chip.active .cnt { opacity: 1; }

/* Barra de fases/tempos (faixa no topo do atendimento) */
.phasebar-card { overflow: hidden; flex: 0 0 auto; }
.phasebar { display: flex; align-items: center; gap: 3px; margin: 0; overflow-x: auto; overflow-y: hidden; padding: 9px 12px; }
.phase-step { display: flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: 10px; background: #f4f6fb; border: 1px solid var(--omni-border); white-space: nowrap; }
.phase-step .ps-ico { font-size: .95rem; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: #fff; border: 1px solid var(--omni-border); color: var(--omni-muted); flex: 0 0 auto; }
.ps-txt { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; }
.ps-line { display: flex; align-items: baseline; gap: 5px; }
.phase-step .ps-lbl { font-size: .7rem; color: var(--omni-muted); font-weight: 600; }
.phase-step .ps-time { font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.phase-step .ps-sub { font-size: .66rem; color: var(--omni-muted); font-variant-numeric: tabular-nums; }
.phase-step.current { background: var(--omni-primary); border-color: var(--omni-primary); box-shadow: 0 3px 12px rgba(47,91,234,.26); }
.phase-step.current .ps-ico { background: rgba(255,255,255,.22); border-color: transparent; color: #fff; }
.phase-step.current .ps-lbl { color: #dfe8ff; }
.phase-step.current .ps-time { color: #fff; }
.phase-step.current .ps-sub { color: #cfdcff; }
.ps-sep { color: #c8d0dc; display: flex; align-items: center; font-size: .8rem; flex: 0 0 auto; }
/* ações rápidas horizontais (abaixo dos tempos) */
/* Barra de ações rápidas (abaixo dos tempos) */
.quick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.qa-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qa-group.qa-right { margin-left: auto; padding-left: 10px; border-left: 1px solid var(--omni-border); }
.qa-btn {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  font-size: .8rem; font-weight: 600; line-height: 1; padding: .5rem .72rem; border-radius: 9px;
  border: 1px solid var(--omni-border); background: #fff; color: var(--omni-ink); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.qa-btn i { font-size: .98rem; }
.qa-btn:hover { background: #f5f7fb; box-shadow: 0 1px 4px rgba(16,25,46,.08); }
.qa-btn:active { transform: translateY(1px); }
.qa-btn.qa-primary { background: var(--omni-primary); border-color: var(--omni-primary); color: #fff; }
.qa-btn.qa-primary:hover { background: var(--omni-primary-dark); }
.qa-btn.qa-primary i { color: #fff; }
.qa-btn.qa-hold i { color: #0d9bb5; }
.qa-btn.qa-move i { color: var(--omni-primary); }
.qa-btn.qa-prio i { color: #d9822b; }
.qa-btn.qa-note i { color: #6f42c1; }
.qa-btn.qa-done { border-color: #bfe6cd; color: #157347; }
.qa-btn.qa-done i { color: #1f9d55; }
.qa-btn.qa-done:hover { background: #e9f8ef; border-color: #9edcb6; }
.qa-btn.qa-cancel { border-color: #f3c6cb; color: #b02a37; }
.qa-btn.qa-cancel i { color: #dc3545; }
.qa-btn.qa-cancel:hover { background: #fdecee; border-color: #eaa9b0; }
.qa-btn.qa-edit { background: #fff7ec; border-color: #f0c98a; color: #a5620a; font-weight: 700; box-shadow: 0 1px 4px rgba(224,134,0,.14); }
.qa-btn.qa-edit i { color: #e08600; }
.qa-btn.qa-edit:hover { background: #ffeccd; border-color: #e6b264; box-shadow: 0 2px 8px rgba(224,134,0,.22); }
@media (max-width: 560px) { .qa-group.qa-right { margin-left: 0; border-left: 0; padding-left: 0; } }
.phase-total { text-align: right; padding: 4px 8px 4px 16px; align-self: center; margin-left: auto; }
.phase-total .ps-lbl { font-size: .7rem; color: var(--omni-muted); display: block; font-weight: 600; }
.phase-total .ps-time { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Composer (campo de resposta) */
.composer { padding: 14px 16px 12px; border-top: 1px solid var(--omni-border); background: #fff; }
.composer-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.composer-canal { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--omni-muted); }
.composer-canal b { color: var(--omni-ink); font-weight: 600; }
.composer-canal i { font-size: 1.05rem; }
.composer-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ctool { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; line-height: 1; padding: .44rem .62rem; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--omni-muted); cursor: pointer; transition: background .14s ease, color .14s ease; }
.ctool i { font-size: .95rem; }
.ctool:hover { background: #eef1f7; color: var(--omni-ink); }
.ctool-ai { color: var(--omni-primary); background: var(--omni-primary-soft); }
.ctool-ai:hover { background: #dde7ff; color: var(--omni-primary-dark); }
.ctool-demo { color: #8a94a6; }
.ctool-demo:hover { background: #f2eefb; color: #6f42c1; }
.composer-field { display: flex; align-items: flex-end; gap: 8px; border: 1.5px solid var(--omni-border); border-radius: 14px; padding: 5px 5px 5px 14px; background: #fbfcfe; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.composer-field:focus-within { border-color: var(--omni-primary); background: #fff; box-shadow: 0 0 0 4px rgba(47,91,234,.12); }
.composer-field textarea { flex: 1; min-width: 0; border: 0; background: transparent; resize: none; outline: none; padding: 9px 0; font-size: .92rem; line-height: 1.45; max-height: 160px; color: var(--omni-ink); font-family: inherit; }
.composer-field textarea::placeholder { color: #9aa3b2; }
.composer-send { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 11px; background: var(--omni-primary); color: #fff; display: grid; place-items: center; font-size: 1.02rem; cursor: pointer; transition: background .15s ease, transform .05s ease; }
.composer-send:hover { background: var(--omni-primary-dark); }
.composer-send:active { transform: scale(.93); }
.composer-hint { margin-top: 7px; font-size: .7rem; color: #9aa3b2; text-align: right; }
.composer-hint kbd { background: #eef1f7; border: 1px solid #dfe4ee; border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font-size: .68rem; color: #55606e; font-family: inherit; }

/* modo espião (monitoramento silencioso do gestor) */
.atend-topo.spy-on { border-top: 3px solid #7a3ff2; }
.spy-banner { background: #f2ecff; color: #4a2aa8; border-bottom: 1px solid #e0d4ff; padding: 8px 14px; font-size: .82rem; }
.spy-banner .bi { color: #7a3ff2; }
.join-banner { background: #e6f2ff; color: #1b4b8f; border-bottom: 1px solid #cfe2fb; padding: 8px 14px; font-size: .82rem; }
.join-banner .bi { color: var(--omni-primary); }

/* conversa */
.day-sep { text-align: center; margin: 10px 0; position: relative; }
.day-sep span { background: #eef1f7; color: var(--omni-muted); font-size: .72rem; padding: 2px 10px; border-radius: 999px; }
.sys-chip { text-align: center; margin: 8px auto; font-size: .74rem; color: var(--omni-muted); background: #f4f6fa; border: 1px solid var(--omni-border); border-radius: 999px; padding: 3px 12px; display: inline-block; }
.anexo-msg { display: flex; flex-direction: column; gap: 6px; }
.anexo-img { max-width: 220px; border-radius: 8px; display: block; }
.anexo-ico { font-size: 1.6rem; color: var(--omni-primary); }
.anexo-meta a { text-decoration: none; }

/* abas do painel direito */
.atend-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px; border-bottom: 1px solid var(--omni-border); position: sticky; top: 0; background: #fff; z-index: 2; }
.atab { border: 0; background: transparent; border-radius: 8px; padding: 6px 8px; font-size: .74rem; color: var(--omni-muted); display: flex; align-items: center; gap: 4px; }
.atab .bi { font-size: .95rem; }
.atab span { display: none; }
.atab.active { background: var(--omni-primary-soft); color: var(--omni-primary); }
.atab-body { padding: 4px; }

/* linha do tempo */
.tl { position: relative; padding-left: 18px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--omni-border); }
.tl-item { position: relative; padding: 6px 0 6px 6px; }
.tl-dot { position: absolute; left: -16px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--omni-primary); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--omni-border); }

/* barra de filtros horizontal */
.filtros-bar select.w-auto { min-width: 118px; }

/* seletor de pessoas com busca */
.picker-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--omni-border); border-radius: 10px; padding: 4px; }
.picker-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.picker-item:hover { background: var(--omni-primary-soft); }
.picker-item .avatar { width: 30px; height: 30px; font-size: .72rem; flex: 0 0 auto; }
/* chips de seleção (equipes no cadastro do usuário) */
.chk-chip { border: 1px solid var(--omni-border); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: .82rem; display: inline-flex; align-items: center; }
.chk-chip:hover { border-color: #c7d3f7; }

/* e-mails recebidos (aba Cliente/E-mails) */
.email-item { border: 1px solid var(--omni-border); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px; cursor: pointer; background: #fff; }
.email-item:hover { border-color: #c7d3f7; background: var(--omni-primary-soft); }
.email-item .email-assunto { font-size: .84rem; }
.email-item.unread { border-left: 3px solid var(--omni-primary); background: #f7faff; }
.email-item.unread .email-assunto { font-weight: 700; }
.email-item.unread .bi { color: var(--omni-primary); }

/* botão ampliar painel direito */
.atab-exp { margin-left: auto; }
.atab-exp .bi { color: var(--omni-primary); }
.atend-right { overflow-x: hidden; }
.atab-body { overflow-x: hidden; }
/* ampliado: oculta a lista (fila); 60% para a conversa (atendimento) e 40% para as informações */
@media (min-width: 993px) {
  .atend-grid.right-expanded { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .atend-grid.right-expanded .atend-left { display: none; }
}

@media (max-width: 1200px) { .atend-grid { grid-template-columns: 300px minmax(0,1fr); } .atend-right { grid-column: 1 / -1; max-height: none; } }
@media (max-width: 992px) {
  .sidebar { position: fixed; z-index: 1045; left: 0; top: 0; height: 100vh; overflow-y: auto; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(6,10,20,.45); z-index: 1044; display: none; }
  .sidebar-backdrop.show { display: block; }
  .inbox { grid-template-columns: 1fr; }
  .chat-panel { height: auto; }
  .conv-list { max-height: none; }
  .atend-grid { grid-template-columns: 1fr; }
  .atend-left, .atend-center, .atend-right { max-height: none; height: auto; }
}
@media (min-width: 993px) {
  .atab span { display: inline; }
  /* barra lateral recolhível no desktop: vira uma "trilha" só de ícones (acesso rápido) */
  .app-shell.sidebar-collapsed .sidebar { width: 64px; position: relative; z-index: 30; }
  .app-shell.sidebar-collapsed .sidebar .brand { display: flex; align-items: center; padding: 18px 0; justify-content: center; overflow: hidden; }
  .app-shell.sidebar-collapsed .sidebar .brand .brand-text { display: none; }
  .app-shell.sidebar-collapsed .sidebar .brand-dot { margin-right: 0; }
  .app-shell.sidebar-collapsed .sidebar .nav-section { height: 0; padding: 8px 0 0; margin: 0; overflow: hidden; color: transparent; border-top: 1px solid rgba(255,255,255,.06); }
  .app-shell.sidebar-collapsed .sidebar .nav-link { position: relative; justify-content: center; gap: 0; padding: 11px 0; margin: 3px 10px; }
  .app-shell.sidebar-collapsed .sidebar .nav-link span:not(.brand-dot) { display: none; }
  .app-shell.sidebar-collapsed .sidebar .nav-link .bi { width: auto; font-size: 1.2rem; }
  /* tooltip agradável ao passar o mouse na trilha recolhida */
  .app-shell.sidebar-collapsed .sidebar .nav-link::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%;
    transform: translateY(-50%) translateX(-6px); background: #10192e; color: #fff;
    font-size: .82rem; font-weight: 600; white-space: nowrap; padding: .46rem .68rem; border-radius: 9px;
    box-shadow: 0 8px 24px rgba(6,10,20,.35); opacity: 0; pointer-events: none;
    transition: opacity .15s ease, transform .15s ease; z-index: 61;
  }
  .app-shell.sidebar-collapsed .sidebar .nav-link::before {
    content: ""; position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%);
    border: 6px solid transparent; border-right-color: #10192e; opacity: 0; transition: opacity .15s ease; z-index: 61;
  }
  .app-shell.sidebar-collapsed .sidebar .nav-link:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
  .app-shell.sidebar-collapsed .sidebar .nav-link:hover::before { opacity: 1; }
}

/* ============================ TICKETS ============================= */
.tk-kpi-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: .95rem; flex: 0 0 auto; }
.badge-soft.tk-novo { background: #e8eeff; color: #234; } .badge-soft.tk-novo { color: #1b3d8f; }
.badge-soft.tk-em { background: #e0f6fb; color: #0b6b7d; }
.badge-soft.tk-fim { background: #e7f7ee; color: #147a45; }
.badge-soft.tk-cancel { background: #fdeaea; color: #b02a37; }
.tk-prio { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .72rem; }
.tk-prio i { font-size: .7rem; }
.tk-etapa { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; color: var(--etc, #2f5bea); background: #eef1f7; background: color-mix(in srgb, var(--etc, #2f5bea) 14%, #fff); border: 1px solid; border-color: color-mix(in srgb, var(--etc, #2f5bea) 30%, #fff); white-space: nowrap; }
.tk-etapa i { font-size: .78rem; }
.qa-btn.qa-ticket i { color: #0d9bb5; }

/* Kanban */
.kb-nav { display: none; justify-content: flex-end; gap: 6px; margin-bottom: 8px; }
.kb-arrow { width: 36px; height: 30px; border-radius: 8px; border: 1px solid var(--omni-border); background: #fff; color: var(--omni-ink); display: grid; place-items: center; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.kb-arrow:hover:not(:disabled) { background: #f0f3f9; border-color: #c7d3f7; }
.kb-arrow:disabled { opacity: .4; cursor: default; }
.kb-board { display: flex; gap: 12px; overflow-x: hidden; overflow-y: auto; max-height: calc(100vh - 250px); min-height: 260px; padding: 0 2px 8px; align-items: stretch; scroll-behavior: smooth; }
/* Kanban desktop: página sem rolagem vertical; só o quadro rola (cabeçalhos sticky nunca somem) */
@media (min-width: 993px) {
  body.tk-lock { overflow: hidden; }
  body.tk-lock .app-shell { height: 100vh; overflow: hidden; }
  body.tk-lock .sidebar { height: 100vh; overflow-y: auto; }
  body.tk-lock .app-main { height: 100vh; overflow: hidden; }
  body.tk-lock .content { overflow: hidden; }
  #tkRoot.tk-kanban-page { height: calc(100vh - 108px); display: flex; flex-direction: column; overflow: hidden; }
  #tkRoot.tk-kanban-page > *:not(.kb-board) { flex: 0 0 auto; }
  #tkRoot.tk-kanban-page .kb-board { flex: 1 1 auto; min-height: 0; max-height: none; }
  /* Lista: mesma lógica - página travada, tabela rola internamente, paginação fixa embaixo */
  #tkRoot.tk-list-page { height: calc(100vh - 108px); display: flex; flex-direction: column; overflow: hidden; }
  #tkRoot.tk-list-page > *:not(.card) { flex: 0 0 auto; }
  #tkRoot.tk-list-page > .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  #tkRoot.tk-list-page > .card > [data-table-wrap] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #tkRoot.tk-list-page > .card > [data-table-wrap] > *:not(.table-responsive) { flex: 0 0 auto; }
  #tkRoot.tk-list-page > .card > [data-table-wrap] > .table-responsive { flex: 1 1 auto; min-height: 0; overflow: auto; }
  #tkRoot.tk-list-page > .card > [data-table-wrap] > .table-responsive thead th { position: sticky; top: 0; background: #fff; z-index: 2; }
}
.kb-col { flex: 0 0 300px; max-width: 300px; background: #f2f4f8; border: 1px solid var(--omni-border); border-radius: 12px; display: flex; flex-direction: column; }
.kb-board.by-etapa .kb-col { flex-basis: 270px; max-width: 270px; }
.kb-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-weight: 700; font-size: .82rem; border-bottom: 2px solid var(--kbc, #2f5bea); border-radius: 12px 12px 0 0; position: sticky; top: 0; background: #f2f4f8; z-index: 3; }
.kb-head .kb-count { background: #fff; border: 1px solid var(--omni-border); border-radius: 999px; padding: 0 8px; font-size: .72rem; }
.kb-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }

/* Seletor de status/etapa no ticket */
.tk-status-row { margin-top: 10px; }
.tk-status-ctl { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.tk-status-lbl { font-size: .8rem; font-weight: 600; color: var(--omni-muted); margin: 0; }
.tk-status-sel { max-width: 340px; font-weight: 600; }
.tk-sit { display: inline-flex; align-items: center; gap: 6px; }
.tk-sep { color: #c7ccd6; font-weight: 700; }
.tk-status-hint { flex-basis: 100%; width: 100%; font-size: .76rem; color: var(--omni-muted); margin-top: 1px; line-height: 1.35; }
/* Faixa horizontal de "Dados do ticket" (antes da descrição) */
.tk-datbar { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px 20px; }
.tk-datbar .tk-dh { min-width: 0; padding: 2px 0; border-top: 1px dashed var(--omni-border, #eceff4); }
.tk-dh-l { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--omni-muted); font-weight: 700; margin-bottom: 1px; }
.tk-dh-v { font-size: .86rem; font-weight: 600; color: #2b3242; overflow-wrap: anywhere; }
@media (max-width: 575px) { .tk-datbar { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
/* Segmented control (Lista/Kanban e agrupamento do Kanban) */
.tk-seg { display: inline-flex; align-items: center; gap: 2px; background: #eef1f6; border: 1px solid var(--omni-border, #e2e6ee); border-radius: 10px; padding: 3px; }
.tk-seg-btn { border: none; background: transparent; color: #5a6472; font-size: .8rem; font-weight: 600; line-height: 1; padding: 6px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background .12s, color .12s, box-shadow .12s; }
.tk-seg-btn > i { font-size: .9rem; opacity: .85; }
.tk-seg-btn:hover { color: #2b3242; }
.tk-seg-btn.active { background: #fff; color: var(--omni-primary, #2f6bff); box-shadow: 0 1px 3px rgba(16,25,46,.14); }
.tk-seg-btn.active > i { opacity: 1; }
.tk-seg-btn:focus-visible { outline: 2px solid var(--omni-primary, #2f6bff); outline-offset: 2px; }
/* Painel de fases + status (cadastro) */
.tkadm-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.tkadm-card { background: #fff; border: 1px solid var(--omni-border, #e6e8ee); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.tkadm-card.fase-off { opacity: .68; }
.tkadm-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px 11px 14px; border-bottom: 1px solid var(--omni-border, #eef0f4); border-top: 3px solid var(--fc, #6b7583); }
.tkadm-card-t { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #2b3242; min-width: 0; }
.tkadm-card-t > i { color: var(--fc, #6b7583); }
.tkadm-fname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkadm-fnum { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--fc, #6b7583); color: #fff; font-size: .76rem; font-weight: 700; }
.tkadm-card-tools { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.tkadm-card-tools .btn { padding: 2px 7px; }
.tkadm-count { font-size: .74rem; color: var(--omni-muted); background: #f1f3f7; border-radius: 20px; padding: 1px 9px; margin-right: 2px; }
.tkadm-card-b { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 44px; }
.tkadm-chip { display: flex; align-items: center; gap: 8px; }
.tkadm-chip-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; text-align: left; background: var(--etc, #2f5bea); background: color-mix(in srgb, var(--etc, #2f5bea) 12%, #fff); color: #333a48; border: 1px solid #e6e8ee; border-color: color-mix(in srgb, var(--etc, #2f5bea) 26%, #fff); border-radius: 8px; padding: 6px 10px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.tkadm-chip-main > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkadm-chip-main > i:first-child { color: var(--etc, #2f5bea); flex: 0 0 auto; }
.tkadm-chip.off .tkadm-chip-main { opacity: .55; text-decoration: line-through; }
.tkadm-badge { font-size: .68rem; opacity: .75; flex: 0 0 auto; }
.tkadm-sw { flex: 0 0 auto; width: 38px; height: 20px; border-radius: 20px; border: none; background: #c7ccd6; position: relative; cursor: pointer; padding: 0; transition: background .15s ease; }
.tkadm-sw.on { background: #2f6bff; }
.tkadm-sw-dot { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s ease; }
.tkadm-sw.on .tkadm-sw-dot { left: 20px; }
.tkadm-del { flex: 0 0 auto; border: none; background: transparent; color: #c0c5cf; cursor: pointer; border-radius: 6px; width: 24px; height: 24px; line-height: 1; }
.tkadm-del:hover { color: #dc3545; background: #fbe9ea; }
.tkadm-empty { font-size: .82rem; color: var(--omni-muted); }
/* Subtarefas (subtickets) */
.tk-sub-banner { border-left: 3px solid var(--omni-primary, #2f6bff); background: #f4f8ff; }
.tk-subs-body { min-height: 60px; }
.tk-subchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tk-subchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--omni-border, #e2e6ee); background: #fff; color: #3a4252; border-radius: 999px; padding: 5px 12px 5px 10px; font-size: .8rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background .12s, border-color .12s, color .12s, box-shadow .12s; }
.tk-subchip > i { font-size: .85rem; opacity: .8; }
.tk-subchip:hover { border-color: #c3ccdc; background: #f6f8fc; }
.tk-subchip:focus-visible { outline: 2px solid var(--omni-primary, #2f6bff); outline-offset: 2px; }
.tk-subchip-n { font-size: .7rem; font-weight: 700; min-width: 20px; height: 18px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #eef1f6; color: #5a6472; }
.tk-subchip.active { background: var(--omni-primary, #2f6bff); border-color: var(--omni-primary, #2f6bff); color: #fff; box-shadow: 0 1px 5px rgba(47,107,255,.25); }
.tk-subchip.active > i { opacity: 1; }
.tk-subchip.active .tk-subchip-n { background: rgba(255,255,255,.25); color: #fff; }
.tk-subchip.danger { border-color: #f1c2c7; color: #b02a37; }
.tk-subchip.danger .tk-subchip-n { background: #fbe3e6; color: #b02a37; }
.tk-subchip.danger:hover { background: #fdf2f3; border-color: #eaa9b0; }
.tk-subchip.danger.active { background: #dc3545; border-color: #dc3545; color: #fff; box-shadow: 0 1px 5px rgba(220,53,69,.25); }
.tk-subchip.danger.active .tk-subchip-n { background: rgba(255,255,255,.25); color: #fff; }
.tk-subkpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.tk-subkpi { border: 1px solid var(--omni-border, #e6e8ee); border-radius: 10px; padding: 10px 12px; text-align: center; background: #fff; }
.tk-subkpi .v { font-size: 1.3rem; font-weight: 800; line-height: 1; color: #2b3242; }
.tk-subkpi .l { font-size: .72rem; color: var(--omni-muted); margin-top: 4px; }
.tk-subkpi.ok .v { color: #1f9d55; }
.tk-subkpi.bad .v { color: #dc3545; }
.tk-subkpi.warn .v { color: #b26a00; }
.tk-subprog { height: 20px; border-radius: 20px; }
.tk-subprog .progress-bar { background: var(--omni-primary, #2f6bff); font-weight: 700; font-size: .72rem; }
.tk-subkb .kb-col { min-width: 220px; }
/* Linhas de subtarefa expandidas na lista geral */
.tk-subrow > td { background: #f7f9fc; }
.tk-subrow-wrap { padding: 4px 2px; }
.tk-subrow-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 8px; border: 1px solid var(--omni-border, #e9ecf3); border-radius: 8px; margin-bottom: 5px; background: #fff; color: inherit; text-decoration: none; }
.tk-subrow-item:hover { border-color: #cdd6e6; box-shadow: 0 1px 3px rgba(16,25,46,.06); }
.tk-subrow-t { flex: 1 1 auto; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-exp { text-decoration: none; font-size: .78rem; }
/* Mapa de subtarefas */
.tk-map { display: flex; flex-direction: column; align-items: center; }
.tk-map-top { display: flex; justify-content: center; }
.tk-map-conn { width: 2px; height: 22px; background: #cdd6e6; }
.tk-map-children { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; position: relative; padding-top: 14px; }
.tk-map-children::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: #cdd6e6; }
.tk-mapnode { position: relative; width: 210px; border: 1px solid var(--omni-border, #e6e8ee); border-radius: 12px; padding: 10px 12px; background: #fff; cursor: pointer; transition: box-shadow .12s, border-color .12s, transform .05s; }
.tk-map-children .tk-mapnode::before { content: ""; position: absolute; top: -14px; left: 50%; width: 2px; height: 14px; background: #cdd6e6; }
.tk-mapnode:hover { border-color: #bcc7dc; box-shadow: 0 2px 10px rgba(16,25,46,.10); }
.tk-mapnode:focus-visible { outline: 2px solid var(--omni-primary, #2f6bff); outline-offset: 2px; }
.tk-mapnode.principal { width: 260px; border-color: var(--omni-primary, #2f6bff); background: #f4f8ff; cursor: default; }
.tk-mapnode-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tk-mapnode-t { font-weight: 600; font-size: .86rem; margin: 4px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tk-mapnode-m { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .74rem; }
@media (max-width: 640px) {
  .tk-map-children { flex-direction: column; align-items: stretch; padding-top: 0; }
  .tk-map-children::before { display: none; }
  .tk-map-children .tk-mapnode { width: 100%; }
  .tk-map-children .tk-mapnode::before { top: -12px; height: 12px; }
  .tk-map-children .tk-mapnode + .tk-mapnode { margin-top: 12px; }
  .tk-mapnode.principal { width: 100%; }
}
.kb-col.over { outline: 2px dashed var(--omni-primary); outline-offset: -2px; }
.kb-empty { color: var(--omni-muted); font-size: .78rem; text-align: center; padding: 12px 0; }
.tk-card { background: #fff; border: 1px solid var(--omni-border); border-radius: 10px; padding: 10px; cursor: pointer; transition: box-shadow .12s ease, border-color .12s ease; }
.tk-card:hover { border-color: #c7d3f7; box-shadow: 0 3px 10px rgba(16,25,46,.08); }
.tk-card.dragging { opacity: .5; }
.tk-card .tk-num { font-size: .72rem; font-weight: 700; color: var(--omni-muted); }
.tk-card .tk-title { font-weight: 600; font-size: .86rem; margin-top: 2px; line-height: 1.25; }
.tk-card .tk-sub { font-size: .74rem; color: var(--omni-muted); margin-top: 2px; }
.tk-card .tk-mini { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; color: var(--omni-muted); }
.tk-card .tk-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 6px; }
.tk-card .tk-foot .avatar { width: 22px; height: 22px; font-size: .62rem; }
.tk-card .tk-foot-r { display: inline-flex; align-items: center; gap: 6px; }
.tk-card .tk-since { font-size: .68rem; margin-top: 6px; }

/* Detalhe do ticket */
.tk-inds { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tk-ind { background: #f4f6fb; border: 1px solid var(--omni-border); border-radius: 10px; padding: 6px 12px; min-width: 130px; }
.tk-ind-l { font-size: .68rem; color: var(--omni-muted); font-weight: 600; }
.tk-ind-v { font-weight: 800; font-variant-numeric: tabular-nums; }
.tk-dado { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--omni-border); font-size: .84rem; }
.tk-dado:last-child { border-bottom: 0; }
.tk-dado-l { color: var(--omni-muted); }
.tk-dado-v { font-weight: 600; text-align: right; }
.tk-solucao { background: #eefaf2; border: 1px solid #bfe6cd; border-radius: 8px; padding: 8px 10px; }
.tk-mini-card { border: 1px solid var(--omni-border); border-radius: 9px; padding: 8px; margin-bottom: 6px; cursor: pointer; }
.tk-mini-card:hover { border-color: #c7d3f7; background: #f7f9fd; }

/* Linha do tempo do ticket */
.tl { list-style: none; margin: 0; padding: 4px 0 0; }
.tl-item { display: flex; gap: 10px; padding: 0 0 14px; position: relative; }
.tl-item::before { content: ""; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: var(--omni-border); }
.tl-item:last-child::before { display: none; }
.tl-ic { width: 28px; height: 28px; border-radius: 50%; background: #eef1f7; color: var(--omni-muted); display: grid; place-items: center; flex: 0 0 auto; font-size: .8rem; z-index: 1; }
.tl-item.pub .tl-ic { background: #e7f7ee; color: #157347; }
.tl-item.intern .tl-ic { background: #eceff3; color: #55606e; }
.tl-body { flex: 1; min-width: 0; }
.tl-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tl-meta { color: var(--omni-muted); font-size: .72rem; margin-left: auto; }
.tl-obs { font-size: .84rem; margin-top: 2px; white-space: pre-wrap; }

/* ======================= TREINAMENTO GUIADO ======================= */
.train-banner { background: linear-gradient(120deg, #10245c, #2f5bea); color: #fff; border: none; }
.train-banner .small { color: #dbe6ff; }
.train-banner .train-ic, .tour-wel-head .train-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; background: rgba(255,255,255,.18); color: #fff; flex: 0 0 auto; }
.tour-wel-head .train-ic { background: var(--omni-primary-soft); color: var(--omni-primary); }

#tourLayer { position: fixed; inset: 0; z-index: 20000; }
#tourLayer .tour-backdrop { position: absolute; inset: 0; background: transparent; }
#tourLayer .tour-spot { position: fixed; border-radius: 10px; box-shadow: 0 0 0 3px rgba(47,91,234,.9), 0 0 0 9999px rgba(8,14,30,.55); transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; pointer-events: none; }
#tourLayer .tour-tip { position: fixed; width: 350px; max-width: calc(100vw - 24px); background: #fff; border-radius: 14px; box-shadow: 0 16px 48px rgba(6,10,20,.4); padding: 14px 16px 12px; }
#tourLayer .tour-progress { height: 4px; background: #eef1f7; border-radius: 999px; overflow: hidden; margin: -4px -4px 10px; }
#tourLayer .tour-progress-bar { height: 100%; background: var(--omni-primary); width: 0; transition: width .3s ease; }
#tourLayer .tour-tip-head { display: flex; align-items: center; gap: 8px; }
#tourLayer .tour-badge { font-size: .68rem; font-weight: 700; color: var(--omni-primary); text-transform: uppercase; letter-spacing: .04em; }
#tourLayer .tour-x, #tourDialog .tour-x { margin-left: auto; border: 0; background: transparent; color: var(--omni-muted); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }
#tourLayer .tour-x:hover { background: #f0f3f9; color: var(--omni-ink); }
#tourLayer .tour-title { font-size: 1.02rem; font-weight: 700; margin: 6px 0 4px; }
#tourLayer .tour-desc { font-size: .88rem; color: var(--omni-ink); margin: 0; line-height: 1.4; }
#tourLayer .tour-extra { font-size: .78rem; color: var(--omni-muted); margin: 8px 0 0; max-height: 40vh; overflow-y: auto; }
#tourLayer .tour-extra .tour-line { display: block; margin-top: 6px; line-height: 1.38; }
#tourLayer .tour-extra .tour-line b { color: var(--omni-ink); font-weight: 600; }
#tourLayer .tour-extra .tour-dep { background: #f6f3fd; border-left: 3px solid #6f42c1; border-radius: 0 6px 6px 0; padding: 5px 8px; color: #4a3a7a; }
#tourLayer .tour-extra .tour-dep b { color: #6f42c1; }
#tourLayer .tour-extra .tour-tip-line b { color: #a5701a; }
#tourLayer .tour-controls { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
#tourLayer .tour-tip.bottom-sheet { top: auto !important; left: 0 !important; bottom: 0; width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; }

#tourDialog { position: fixed; inset: 0; z-index: 20050; display: grid; place-items: center; padding: 16px; }
#tourDialog .tour-dim { position: absolute; inset: 0; background: rgba(8,14,30,.5); }
#tourDialog .tour-dialog { position: relative; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; padding: 18px; }
.tour-wel-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.tour-sec { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--omni-muted); font-weight: 700; margin: 14px 2px 6px; }
.tour-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tour-choice { display: inline-flex; align-items: center; gap: 6px; text-align: left; border: 1px solid var(--omni-border); background: #fff; border-radius: 9px; padding: 7px 10px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.tour-choice:hover { border-color: #c7d3f7; background: #f7f9fd; }
.tour-choice i { color: var(--omni-primary); font-size: .8rem; }
.tour-dlg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tour-wel-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.tour-done-badge { display: inline-flex; align-items: center; gap: 6px; background: #e7f7ee; color: #157347; font-weight: 700; padding: 4px 10px; border-radius: 999px; font-size: .78rem; margin-bottom: 8px; }
@media (max-width: 576px) { .tour-choices { grid-template-columns: 1fr; } }