/* ════════════════════════════════════════════════════════════
   Appaltum Analytics — Firulas Visuais
   Camada additive de microinterações: relógio, status, saudação,
   skeleton, footer de sessão, stagger animation, brand pulse.
   Carregada DEPOIS de app.css para sobrescrever quando preciso.
   ════════════════════════════════════════════════════════════ */

/* ── Relógio + saudação na topbar ─────────────────────────── */
.topbar-center {
  margin-left: auto;        /* empurra pro lado direito, antes do .topbar-user */
  margin-right: 18px;       /* respiro do user-area */
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  color: var(--t3);
  pointer-events: none;
  white-space: nowrap;
  flex-shrink: 0;           /* não encolhe quando brand é largo */
}

.topbar-clock {
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.topbar-clock .clock-seconds {
  font-size: 11px;
  color: var(--t4);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.topbar-clock .clock-blink {
  display: inline-block;
  width: .55ch;
  text-align: center;
  animation: clockBlink 1.2s steps(2, jump-none) infinite;
}

.topbar-date {
  font-size: 12px;
  color: var(--t4);
  padding-left: 12px;
  border-left: 1px solid var(--brd);
  letter-spacing: .04em;
  text-transform: capitalize;
}

@keyframes clockBlink {
  50% { opacity: .25 }
}

/* Topbar é position:sticky (já), o que serve como containing block
   pro .topbar-center absolute. Sem mudanças extra necessárias. */

/* ── Status indicator ─────────────────────────────────────── */
.status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
  transition: background .3s var(--ease);
}

.status-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--ok);
  opacity: 0;
  animation: statusPulse 2.2s var(--ease) infinite;
}

.status-dot[data-state="offline"] {
  background: var(--err);
}

.status-dot[data-state="offline"]::after {
  border-color: var(--err);
  animation-duration: 1.2s;
}

.status-dot[data-state="warning"] {
  background: var(--warn);
}

.status-dot[data-state="warning"]::after {
  border-color: var(--warn);
}

@keyframes statusPulse {
  0%   { opacity: .6; transform: scale(.9) }
  70%  { opacity: 0;  transform: scale(1.8) }
  100% { opacity: 0;  transform: scale(1.8) }
}

.topbar-user {
  position: relative;
}

.topbar-user .status-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: default;
}

.topbar-user .status-wrap[title] {
  cursor: help;
}

/* ── Brand-dot pulse suave ────────────────────────────────── */
.brand-dot {
  position: relative;
  box-shadow: 0 0 0 0 var(--accent);
  animation: brandPulse 3s var(--ease) infinite;
}

@keyframes brandPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91,130,224,.45) }
  50%      { box-shadow: 0 0 0 5px rgba(91,130,224,0) }
}

/* ── Skeleton loading nos mod-cards ───────────────────────── */
.mod-skeleton {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r3);
  overflow: hidden;
  position: relative;
}

.mod-skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0,
    rgba(255,255,255,.04) 50%,
    transparent 100%
  );
  animation: shimmer 1.6s var(--ease) infinite;
}

.mod-skeleton .sk-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r2);
  background: var(--bg3);
  flex-shrink: 0;
}

.mod-skeleton .sk-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mod-skeleton .sk-line {
  height: 10px;
  background: var(--bg3);
  border-radius: 4px;
}

.mod-skeleton .sk-line.sk-short { width: 50% }
.mod-skeleton .sk-line.sk-mid   { width: 80% }

/* @keyframes shimmer definido em app.css (reaproveitado aqui) */

/* ── Stagger entrance dos mod-cards ───────────────────────── */
.mod-card {
  opacity: 0;
  transform: translateY(8px);
  animation: cardIn .45s var(--ease-apple) forwards;
}

.mod-card:nth-child(1) { animation-delay:  40ms }
.mod-card:nth-child(2) { animation-delay:  90ms }
.mod-card:nth-child(3) { animation-delay: 140ms }
.mod-card:nth-child(4) { animation-delay: 190ms }
.mod-card:nth-child(5) { animation-delay: 240ms }
.mod-card:nth-child(6) { animation-delay: 290ms }
.mod-card:nth-child(n+7) { animation-delay: 340ms }

@keyframes cardIn {
  to { opacity: 1; transform: translateY(0) }
}

/* Lift mais expressivo no hover (mantém compat com app.css) */
.mod-card {
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    transform 220ms var(--ease-apple),
    box-shadow 220ms var(--ease-apple);
}

.mod-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.5),
              0 0 0 1px var(--brd2);
}

.mod-card .mod-icon {
  transition: transform 250ms var(--ease-apple), background var(--t-fast);
}

.mod-card:hover .mod-icon {
  transform: scale(1.06);
  background: var(--a-med);
}

/* ── Footer de sessão ─────────────────────────────────────── */
.session-footer {
  max-width: 960px;
  margin: 48px auto 24px;
  padding: 0 20px;
  font-size: 11px;
  color: var(--t4);
  letter-spacing: .04em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeIn .6s var(--ease) .4s forwards;
}

.session-footer .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--t4);
  opacity: .5;
}

.session-footer .session-time,
.session-footer .session-duration {
  font-variant-numeric: tabular-nums;
}

/* ── Saudação: leve animação na entrada ───────────────────── */
.main-heading {
  animation: greetingIn .55s var(--ease-apple) both;
}

.main-sub {
  animation: greetingIn .55s var(--ease-apple) 120ms both;
}

@keyframes greetingIn {
  from { opacity: 0; transform: translateY(-4px) }
  to   { opacity: 1; transform: translateY(0) }
}

/* ── Responsive: esconde relógio em telas estreitas ───────── */
@media (max-width: 820px) {
  .topbar-date { display: none }
  .topbar-center { gap: 8px; margin-right: 10px }
}

@media (max-width: 720px) {
  .topbar-center { display: none }
}

@media (max-width: 600px) {
  .session-footer { font-size: 10px; gap: 6px }
}

/* ── Botão "Sugestões" no topbar ──────────────────────────── */
.btn-sugestoes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  color: #fff;
  background: #f97316;
  border: 1px solid #ea6b0a;
  border-radius: var(--r2, 6px);
  cursor: pointer;
  transition: background .15s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
  margin-right: 10px;
  flex-shrink: 0;
  /* Garante visibilidade contra texto escuro */
  box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 0 0 0 rgba(249,115,22,.0);
}

.btn-sugestoes svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  flex-shrink: 0;
}

.btn-sugestoes:hover {
  background: #fb8a3c;
  box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 0 0 3px rgba(249,115,22,.18);
}

.btn-sugestoes:active {
  transform: translateY(1px);
}

.btn-sugestoes:focus-visible {
  outline: 2px solid #fb8a3c;
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .btn-sugestoes-label { display: none }
  .btn-sugestoes { padding: 5px 7px }
}

/* ── Modal de sugestões (overlay + popup) ─────────────────── */
/* Importante: [hidden] precisa ganhar de display:flex (gotcha #17) */
.sugestao-overlay[hidden] { display: none !important }

.sugestao-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,10,14,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 20px;
  animation: sugFadeIn .18s var(--ease, ease-out);
}

@keyframes sugFadeIn {
  from { opacity: 0 }
  to   { opacity: 1 }
}

.sugestao-modal {
  background: var(--bg2, #14181f);
  border: 1px solid var(--brd, #2a2f3a);
  border-radius: 12px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,.7),
              0 0 0 1px rgba(249,115,22,.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sugSlideIn .22s var(--ease-apple, cubic-bezier(.4,0,.2,1));
}

@keyframes sugSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(.98) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}

.sugestao-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--brd, #2a2f3a);
}

.sugestao-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--t1, #e8eaee);
  letter-spacing: .01em;
}

.sugestao-close {
  background: transparent;
  border: 0;
  color: var(--t3, #8a9099);
  font-size: 22px;
  line-height: 1;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s, color .15s;
}

.sugestao-close:hover {
  background: var(--bg3, #1d2230);
  color: var(--t1, #e8eaee);
}

.sugestao-body {
  padding: 16px 18px;
}

.sugestao-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--t3, #8a9099);
  line-height: 1.45;
}

.sugestao-body textarea {
  width: 100%;
  min-height: 110px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--t1, #e8eaee);
  background: var(--bg1, #0d1117);
  border: 1px solid var(--brd, #2a2f3a);
  border-radius: 8px;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}

.sugestao-body textarea:focus {
  outline: 0;
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,.18);
}

.sugestao-counter {
  margin-top: 6px;
  font-size: 10px;
  color: var(--t4, #5a6068);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.sugestao-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--brd, #2a2f3a);
  background: rgba(0,0,0,.15);
}

.sugestao-btn {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}

.sugestao-btn:active { transform: translateY(1px) }

.sugestao-btn-secondary {
  background: transparent;
  border-color: var(--brd, #2a2f3a);
  color: var(--t2, #c4c8cf);
}

.sugestao-btn-secondary:hover {
  background: var(--bg3, #1d2230);
  border-color: var(--brd2, #3a4050);
  color: var(--t1, #e8eaee);
}

.sugestao-btn-primary {
  background: #f97316;
  border-color: #ea6b0a;
  color: #fff;
}

.sugestao-btn-primary:hover:not(:disabled) {
  background: #fb8a3c;
}

.sugestao-btn-primary:disabled {
  opacity: .55;
  cursor: progress;
}

/* ── Toast de feedback (canto inferior direito) ───────────── */
.sugestao-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9100;
  max-width: 360px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.5);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}

.sugestao-toast.on {
  opacity: 1;
  transform: translateY(0);
}

.sugestao-toast-ok {
  background: #16a34a;
  border: 1px solid #128a3c;
}

.sugestao-toast-erro {
  background: #dc2626;
  border: 1px solid #b91c1c;
}

@media (max-width: 600px) {
  .sugestao-modal { max-width: none }
  .sugestao-toast {
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

/* ── Reduced motion: desliga tudo que é decorativo ────────── */
@media (prefers-reduced-motion: reduce) {
  .brand-dot { animation: none }
  .status-dot::after { animation: none; display: none }
  .topbar-clock .clock-blink { animation: none }
  .mod-skeleton::before { animation: none }
  .mod-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .session-footer { animation: none; opacity: 1 }
  .main-heading, .main-sub { animation: none }
  .sugestao-overlay { animation: none }
  .sugestao-modal   { animation: none }
  .sugestao-toast   { transition: opacity .15s }
}

/* ── Chat unificado (overlay lateral — mesma conversa do WhatsApp) ── */
.chat-overlay[hidden] { display:none !important }
.chat-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.35); display:flex; justify-content:flex-end }
.chat-panel { width:min(420px,100%); height:100%; background:var(--bg,#0b0f14); border-left:1px solid var(--brd,#1e2733); display:flex; flex-direction:column; box-shadow:-8px 0 30px rgba(0,0,0,.4); animation:chatIn .18s ease }
@keyframes chatIn { from{transform:translateX(30px);opacity:.6} to{transform:none;opacity:1} }
.chat-head { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--brd,#1e2733) }
.chat-head-t { display:flex; align-items:center; gap:6px; color:var(--t1) }
.chat-head-t svg { color:var(--accent); width:16px; height:16px }
.chat-sub { color:var(--t3); font-size:12px }
.chat-conv-sel { margin-left:auto; max-width:160px; background:var(--bg2,#141b24); border:1px solid var(--brd,#1e2733); color:var(--t1); border-radius:6px; padding:4px 6px; font-size:12px }
.chat-close { margin-left:auto; background:none; border:0; color:var(--t3); font-size:22px; cursor:pointer; line-height:1; padding:0 4px }
.chat-conv-sel + .chat-close { margin-left:8px }
.chat-msgs { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px }
.chat-empty { color:var(--t3); text-align:center; margin:auto; font-size:13px; padding:20px }
.chat-msg { max-width:82%; display:flex; flex-direction:column; gap:2px }
.chat-msg.me { align-self:flex-end; align-items:flex-end }
.chat-msg.bot { align-self:flex-start }
.chat-who { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:.04em; padding:0 4px }
.chat-bubble { padding:8px 12px; border-radius:12px; font-size:14px; line-height:1.4; white-space:pre-wrap; word-break:break-word }
.chat-msg.me .chat-bubble { background:var(--accent); color:#fff; border-bottom-right-radius:3px }
.chat-msg.bot .chat-bubble { background:var(--bg2,#141b24); color:var(--t1); border:1px solid var(--brd,#1e2733); border-bottom-left-radius:3px }
.chat-input { display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--brd,#1e2733); align-items:flex-end }
.chat-input textarea { flex:1; resize:none; background:var(--bg2,#141b24); border:1px solid var(--brd,#1e2733); color:var(--t1); border-radius:10px; padding:9px 12px; font-size:14px; font-family:inherit; max-height:120px; line-height:1.35 }
.chat-send { width:38px; height:38px; flex:none; border:0; border-radius:50%; background:var(--accent); color:#fff; cursor:pointer; font-size:15px }
.chat-send:hover { filter:brightness(1.1) }
@media (max-width:520px){ .chat-panel{ width:100% } }