/* ─────────────────────────────────────────────────────────────────────────
   Plaud IA — Design system "Industrial Premium"
   Chassi grafite quente + acento cobre/oxidado + vermelho-sinal reservado
   para gravação/erro. Compartilhado entre index.html e login.html.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;
  --signal: #a5341a;
  --accent: #b5811f;
}
:root.dark {
  color-scheme: dark;
  --signal: #d1491f;
  --accent: #d19a2e;
}

* { font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.font-display { font-family: 'Chakra Petch', 'IBM Plex Sans', sans-serif; }
html { scroll-behavior: smooth; }

/* ── Animações ─────────────────────────────────────────────────────────── */
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.9); opacity: 0;  }
}
@keyframes bar { 0%, 100% { height: 4px; } 50% { height: 22px; } }
@keyframes toast-in  { from { opacity:0; transform: translateX(12px); } to { opacity:1; transform: translateX(0); } }
@keyframes toast-out { from { opacity:1; } to { opacity:0; } }
@keyframes shimmer   { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse-dot  { 0%, 80%, 100% { transform: scale(0); opacity: 0; } 40% { transform: scale(1); opacity: 1; } }
@keyframes spin       { to { transform: rotate(360deg); } }
@keyframes blink      { 50% { opacity: 0; } }
@keyframes led-blink  { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.pulse  { animation: pulse-ring 1.3s cubic-bezier(.3,.6,.4,1) infinite; }
.pulse2 { animation: pulse-ring 1.3s cubic-bezier(.3,.6,.4,1) .45s infinite; }
.bar    { animation: bar .9s ease-in-out infinite; }
.bar:nth-child(2) { animation-delay: .12s; }
.bar:nth-child(3) { animation-delay: .24s; }
.bar:nth-child(4) { animation-delay: .36s; }
.bar:nth-child(5) { animation-delay: .48s; }
.bar:nth-child(6) { animation-delay: .36s; }
.bar:nth-child(7) { animation-delay: .24s; }

.shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(181,88,31,.25) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.dark .shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(209,154,46,.16) 50%, transparent 100%);
  background-size: 200% 100%;
}

/* ── Botão de gravação — tratamento "hardware" ────────────────────────── */
#recBtn {
  box-shadow:
    0 0 0 3px #fbf8f1,
    0 0 0 4px #d9cdab,
    inset 0 2px 3px rgba(255,255,255,.25),
    inset 0 -4px 8px rgba(0,0,0,.35),
    0 10px 24px rgba(15,12,5,.35);
}
.dark #recBtn {
  box-shadow:
    0 0 0 3px #17130c,
    0 0 0 4px #46381f,
    inset 0 2px 3px rgba(255,255,255,.08),
    inset 0 -4px 8px rgba(0,0,0,.55),
    0 10px 28px rgba(0,0,0,.6);
}
#p1, #p2 {
  background: transparent !important;
  border: 1.5px solid var(--signal);
}

/* ── Skeleton ──────────────────────────────────────────────────────────── */
.sk { border-radius: 3px; background: #e6ddc4; }
.dark .sk { background: #241f16; }
.sk-line  { height: 14px; width: 100%; margin-bottom: 8px; border-radius: 2px; }
.sk-line:last-child { width: 65%; }
.sk-title { height: 18px; width: 50%; margin-bottom: 12px; border-radius: 2px; }
.sk-btn   { height: 36px; width: 100%; border-radius: 3px; }
.sk-badge { height: 20px; width: 70px; border-radius: 9999px; }
.sk-wave  { height: 60px; width: 100%; border-radius: 3px; }

/* ── Card transitions ──────────────────────────────────────────────────── */
.card-fade    { animation: fade-in-up .3s cubic-bezier(.2,.7,.3,1) forwards; }
.card-fade-in { animation: fade-in .3s ease forwards; }

/* ── Seções do resultado (leitura tipo "ficha técnica") ───────────────── */
#resBody { counter-reset: sec; }
.section {
  counter-increment: sec;
  border-left: 3px solid var(--section-border, #d9cdab);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}
.section h3 {
  font-size: .8125rem; font-weight: 700; color: var(--text-primary, #171208);
  margin-bottom: .5rem; display: flex; align-items: center; gap: .4rem;
  cursor: pointer; user-select: none;
  text-transform: uppercase; letter-spacing: .05em;
  font-family: 'IBM Plex Mono', monospace;
}
.section h3::before {
  content: counter(sec, decimal-leading-zero) " ";
  color: var(--accent);
  font-weight: 600;
}
.section h3:hover { opacity: .85; }
.section h3 .sec-actions { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.section h3 .sec-copy { font-size: .75rem; color: #c3b48a; font-weight: 400; transition: color .15s; flex-shrink: 0; background:none;border:none;cursor:pointer;padding:2px 4px; }
.section h3 .sec-copy:hover { color: #6f6550; }
.section h3 .sec-copy:focus-visible { outline:2px solid var(--signal);outline-offset:2px;border-radius:2px; }
.section h3 .sec-chevron { font-size: .65rem; color: #93876a; transition: transform .2s; flex-shrink: 0; }
.section.collapsed h3 .sec-chevron { transform: rotate(-90deg); }
.section.collapsed .section-body { display: none; }
.section p  { font-size: .875rem; color: var(--text-body, #3a3427); line-height: 1.7; margin-bottom: .4rem; font-family: 'IBM Plex Sans', sans-serif; text-transform: none; letter-spacing: normal; }
.section ul { list-style: none; padding: 0; margin: 0; }
.section li { font-size: .875rem; color: var(--text-body, #3a3427); line-height: 1.6; padding: .1rem 0;
              display: flex; gap: .5rem; font-family: 'IBM Plex Sans', sans-serif; }
.section li::before { content: "—"; color: var(--accent); flex-shrink: 0; }
.section strong { color: var(--text-primary, #171208); }
.section em { color: var(--text-body, #3a3427); font-style: italic; }
.section code { font-size: .8rem; background: #e9e1cd; padding: .1rem .3rem; border-radius: 2px; font-family: 'IBM Plex Mono', monospace; }

/* ── Drop zone ─────────────────────────────────────────────────────────── */
.drop-zone { transition: all .25s ease; }
.drop-zone.drag-over {
  border-color: var(--signal) !important;
  background: #fbebe4;
  transform: scale(1.01);
}
.dark .drop-zone.drag-over { background: #211208 !important; }
.drop-zone.drag-over .drop-icon { transform: scale(1.15); }
.drop-icon { transition: transform .25s ease; }

/* ── Toast — painel com barra de sinal lateral ────────────────────────── */
.toast {
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .75rem 1rem; border-radius: 3px; box-shadow: 0 4px 20px rgba(15,12,5,.18);
  font-size: .8125rem; font-weight: 500; max-width: 320px; width: 100%;
  animation: toast-in .2s ease;
  pointer-events: auto;
  border-left-width: 3px; border-left-style: solid;
}
.toast.removing { animation: toast-out .3s ease forwards; }
.toast-success { background: #f3f6e9; border-color: #698738; color: #3f5420; }
.toast-error   { background: #fbebe4; border-color: #a5341a; color: #6b1e0e; }
.toast-info    { background: #f1ede0; border-color: #b8ab84; color: #5c5644; }
.toast-warn    { background: #fdf3df; border-color: #b5811f; color: #6b4d15; }
.toast-icon    { font-size: 1rem; flex-shrink: 0; line-height: 1.3; }
.toast-msg     { line-height: 1.4; }
.dark .toast-success { background:#182a12; border-color:#4f6a29; color:#a8d97e; }
.dark .toast-error   { background:#301209; border-color:#a5341a; color:#e8a688; }
.dark .toast-info    { background:#211b12; border-color:#5c5644; color:#c3b48a; }
.dark .toast-warn    { background:#332108; border-color:#b5811f; color:#e8bd6e; }

/* ── Histórico vazio ───────────────────────────────────────────────────── */
.hist-empty { text-align: center; padding: 2.5rem 1rem; }
.hist-empty .hist-empty-icon { font-size: 2.5rem; margin-bottom: .75rem; opacity: .4; }
.hist-empty p { font-size: .875rem; color: #93876a; }
.dark .hist-empty p { color: #4a4230; }

/* ── Player de áudio customizado ───────────────────────────────────────── */
.plaud-player {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem; border-radius: 3px;
  background: #f2ede0; border: 1px solid #d9cdab;
}
.plaud-player .pp-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  background: #171208; color: #fbf8f1;
  transition: all .2s;
}
.plaud-player .pp-btn:hover { background: #3a3427; transform: scale(1.05); }
.plaud-player .pp-btn:active { transform: scale(.95); }
.plaud-player .pp-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.plaud-player .pp-wave-wrap {
  flex: 1; height: 40px; position: relative; overflow: hidden; cursor: pointer;
  border-radius: 2px; background: #e9e1cd;
}
.plaud-player .pp-wave-wrap canvas { width: 100%; height: 100%; display: block; }
.plaud-player .pp-time {
  font-size: .75rem; font-variant-numeric: tabular-nums;
  color: #6f6550; flex-shrink: 0; min-width: 44px; text-align: center;
  font-family: 'IBM Plex Mono', monospace;
}
.dark .plaud-player { background: #0b0906; border-color: #34291a; }
.dark .plaud-player .pp-btn { background: #34291a; color: #e4dcc7; }
.dark .plaud-player .pp-btn:hover { background: #46381f; }
.dark .plaud-player .pp-wave-wrap { background: #17130c; }
.dark .plaud-player .pp-time { color: #6b604a; }

/* ── FAB ───────────────────────────────────────────────────────────────── */
.fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #171208; color: #fbf8f1; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; cursor: pointer;
  box-shadow: 0 4px 16px rgba(15,12,5,.35);
  transition: all .25s ease;
}
.fab:hover { background: #3a3427; transform: scale(1.08); }
.fab:active { transform: scale(.95); }
.fab:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
@media (min-width: 640px) { .fab { display: none; } }

/* ── Confirm Modal ─────────────────────────────────────────────────────── */
.confirm-overlay {
  position: fixed; inset: 0; background: rgba(12,9,4,.6); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  animation: fade-in .15s ease;
}
.confirm-box {
  background: #fbf8f1; border-radius: 4px; box-shadow: 0 8px 32px rgba(15,12,5,.25);
  max-width: 360px; width: 100%; padding: 1.5rem; animation: fade-in-up .2s ease;
}
.confirm-box h3 { font-size: 1rem; font-weight: 700; color: #171208; margin-bottom: .5rem; font-family: 'Chakra Petch', sans-serif; }
.confirm-box p  { font-size: .875rem; color: #6f6550; margin-bottom: 1.25rem; line-height: 1.5; }
.confirm-box .actions { display: flex; gap: .5rem; justify-content: flex-end; }
.confirm-box .actions button {
  padding: .5rem 1.125rem; font-size: .8125rem; font-weight: 600;
  border-radius: 3px; border: none; cursor: pointer; transition: all .15s;
}
.confirm-box .actions button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.confirm-box .btn-cancel { background: #e9e1cd; color: #3a3427; }
.confirm-box .btn-cancel:hover { background: #d9cdab; }
.confirm-box .btn-confirm { background: #a5341a; color: #fbf8f1; }
.confirm-box .btn-confirm:hover { background: #8a2814; }
.dark .confirm-box { background: #17130c; }
.dark .confirm-box h3 { color: #f2ecdd; }
.dark .confirm-box p  { color: #a89a7c; }
.dark .confirm-box .btn-cancel { background: #34291a; color: #e4dcc7; }
.dark .confirm-box .btn-cancel:hover { background: #46381f; }

/* ── Search spinner ────────────────────────────────────────────────────── */
.search-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid #d9cdab; border-top-color: #171208;
  border-radius: 50%; animation: spin .6s linear infinite;
  flex-shrink: 0;
}
.dark .search-spinner { border-color: #46381f; border-top-color: #f2ecdd; }

/* ── Cursor piscante (streaming) ──────────────────────────────────────── */
.cursor-blink { display: inline-block; width: 2px; height: 1em; background: #93876a; margin-left: 2px; vertical-align: middle; animation: blink 1s step-end infinite; }

/* ── Badge de status ───────────────────────────────────────────────────── */
#statusBadge { transition: all .3s ease; font-family: 'IBM Plex Mono', monospace; letter-spacing: .02em; }

/* ── Dark mode — overrides de utilitárias Tailwind estáticas ─────────────
   (mantém a mesma arquitetura já usada no app: classes fixas + overrides
   forçados via .dark, em vez do variant dark: do Tailwind.) ───────────── */
.dark body, .dark .bg-gray-50 { background-color: #0b0906 !important; }
.dark .bg-white   { background-color: #17130c !important; }
.dark .bg-gray-950 { background-color: #050402 !important; }
.dark .border-gray-100 { border-color: #34291a !important; }
.dark .border-gray-200 { border-color: #34291a !important; }
.dark .text-gray-900 { color: #f2ecdd !important; }
.dark .text-gray-800 { color: #e4dcc7 !important; }
.dark .text-gray-700 { color: #cabfa2 !important; }
.dark .text-gray-600 { color: #a89a7c !important; }
.dark .text-gray-500 { color: #a89a7c !important; }
.dark .text-gray-400 { color: #6b604a !important; }
.dark .text-gray-300 { color: #4a4230 !important; }
.dark .text-amber-600 { color: #e0b355 !important; }
.dark input, .dark textarea, .dark select {
  background-color: #17130c !important;
  color: #e4dcc7 !important;
  border-color: #34291a !important;
}
.dark input::placeholder, .dark textarea::placeholder { color: #6b604a !important; }
.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; }
.dark .section code { background: #34291a; color: #e4dcc7; }
.dark #histSearchInput { background-color: #17130c; }
.dark .section { --section-border: #34291a; --text-primary: #f2ecdd; --text-body: #cabfa2; }