/* ============================================================
   PS Alberto Nogueira – Assistente de Protocolos
   style.css
   ============================================================ */

/* ===== RESET & VARIABLES ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #0d1117;
  --surface:  #161b22;
  --surface2: #21262d;
  --border:   #30363d;
  --text:     #e6edf3;
  --muted:    #8b949e;
  --blue:     #58a6ff;
  --blue-dim: #1f6feb;
  --green:    #3fb950;
  --red:      #f85149;
  --yellow:   #d29922;
  --orange:   #f0883e;
  --r:        12px;
  --shadow:   0 8px 32px rgba(0, 0, 0, .5);
}

html, body { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

#app { max-width: 480px; margin: 0 auto; min-height: 100vh; }
.screen { padding: 20px 16px 40px; }
.hidden { display: none !important; }

/* ===== BRAND ===== */
.brand { display: flex; align-items: center; gap: 12px; padding: 24px 0 20px; }
.brand-icon { font-size: 2.2rem; line-height: 1; }
.brand-name { font-size: 1.15rem; font-weight: 700; }
.brand-sub  { font-size: .78rem; color: var(--muted); }

/* ===== SECTION / LABEL ===== */
.section { margin-bottom: 22px; }
.lbl {
  display: block; font-size: .75rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 8px;
}

/* ===== INPUTS ===== */
input[type="password"],
input[type="text"],
select {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text); font-size: 1rem;
  padding: 12px 14px; outline: none; transition: border-color .2s;
  -webkit-appearance: none; appearance: none;
}
input:focus, select:focus { border-color: var(--blue-dim); }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
select option { background: #161b22; }

.hint   { font-size: .75rem; color: var(--muted); margin-top: 6px; }
.hint a { color: var(--blue); text-decoration: none; }

/* ===== BUTTONS ===== */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; border: none; border-radius: var(--r);
  font-size: 1rem; font-weight: 600; cursor: pointer; transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary         { background: var(--blue-dim); color: #fff; }
.btn-primary:active  { opacity: .8; transform: scale(.98); }
.btn-outline         { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-sm              { width: auto; padding: 7px 14px; font-size: .8rem; border-radius: 8px; }

/* ===== DROP ZONE (legacy) ===== */
.drop-zone {
  border: 2px dashed var(--border); border-radius: var(--r);
  padding: 28px 16px; text-align: center; cursor: pointer;
  transition: all .2s; background: var(--surface);
}
.drop-zone:active,
.drop-zone.dragover { border-color: var(--blue-dim); background: rgba(31, 111, 235, .1); }
.dz-icon { font-size: 1.8rem; margin-bottom: 8px; }
.dz-text { font-size: .88rem; color: var(--muted); }

/* ===== UPLOAD WRAP (overlay technique – Android-safe) ===== */
.upload-wrap {
  position: relative;
  width: 100%;
  border: 2px dashed var(--border);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.upload-wrap:active {
  border-color: var(--blue-dim);
  background: rgba(31, 111, 235, .08);
}
.upload-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  text-align: center;
  font-size: .88rem;
  color: var(--muted);
  pointer-events: none; /* deixa o input capturar o toque */
}
.upload-wrap input[type="file"] {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

/* ===== DOC LIST ===== */
.doc-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 10px 14px; margin-top: 8px;
}
.doc-icon   { font-size: 1.2rem; flex-shrink: 0; }
.doc-info   { flex: 1; min-width: 0; }
.doc-name   { font-size: .84rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-size   { font-size: .7rem; color: var(--muted); }
.doc-remove {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 1.1rem; padding: 4px; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.doc-remove:active { color: var(--red); }

/* ===== TOP BAR ===== */
.top-bar       { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; }
.top-bar-title { font-size: .9rem; font-weight: 700; }
.settings-btn  {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); cursor: pointer;
  font-size: 1.1rem; padding: 7px 11px;
  -webkit-tap-highlight-color: transparent;
}

/* ===== STATUS BAR ===== */
.status-bar {
  display: flex; align-items: center; gap: 8px; padding: 9px 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); margin-bottom: 18px; font-size: .78rem;
}
.status-dot         { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.status-dot.green   { background: var(--green); }
.status-dot.blue    { background: var(--blue);   animation: blink 1s infinite; }
.status-dot.orange  { background: var(--orange); animation: blink .6s infinite; }
.status-dot.red     { background: var(--red); }
.status-msg         { flex: 1; color: var(--muted); }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ===== PULSE BUTTON ===== */
.pulse-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 36px 0 20px; position: relative;
}

.ring {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  border: 2px solid var(--blue-dim); opacity: 0; pointer-events: none;
}
.ring.active          { animation: ringPulse 1.8s ease-out infinite; }
.ring.r2.active       { animation-delay: .6s; }
.ring.r3.active       { animation-delay: 1.2s; }

@keyframes ringPulse {
  0%   { transform: scale(.75); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}

.ring.cap             { border-color: var(--green); }
.ring.cap.active      { animation: ringPulseG 1.2s ease-out infinite; }
.ring.cap.r2.active   { animation-delay: .4s; }
.ring.cap.r3.active   { animation-delay: .8s; }

@keyframes ringPulseG {
  0%   { transform: scale(.75); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}

.pulse-btn {
  width: 130px; height: 130px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface2);
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  font-size: 2.5rem; transition: all .25s;
  box-shadow: var(--shadow); position: relative; z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.pulse-btn .pb-lbl {
  font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.pulse-btn:active { transform: scale(.94); }

.pulse-btn.listening  { background: rgba(31,111,235,.18); border-color: var(--blue-dim); box-shadow: 0 0 40px rgba(31,111,235,.35); }
.pulse-btn.capturing  { background: rgba(63,185,80,.18);  border-color: var(--green);    box-shadow: 0 0 40px rgba(63,185,80,.35); }
.pulse-btn.processing { background: rgba(210,153,34,.18); border-color: var(--yellow);   animation: softPulse 1.2s ease-in-out infinite; }
.pulse-btn.speaking   { background: rgba(240,136,62,.18); border-color: var(--orange);   box-shadow: 0 0 40px rgba(240,136,62,.35); }

@keyframes softPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* ===== STATE INFO ===== */
.state-info  { text-align: center; padding: 0 0 22px; }
.state-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 4px; }
.state-hint  { font-size: .8rem; color: var(--muted); padding: 0 24px; }

/* ===== CARDS ===== */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px;
}
.card-lbl     { font-size: .7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.card-text    { font-size: .9rem; line-height: 1.65; color: var(--text); white-space: pre-wrap; }
.card-text p  { margin-bottom: .5em; }
.card-text p:last-child { margin-bottom: 0; }
.card-text strong { color: #fff; }
.card-text .interim { color: var(--muted); font-style: italic; }
.card-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ===== TOAST ===== */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #2d1b1b; border: 1px solid var(--red); color: var(--red);
  padding: 12px 20px; border-radius: var(--r); font-size: .84rem;
  max-width: 90vw; text-align: center; transition: transform .28s;
  z-index: 9999; box-shadow: var(--shadow);
}
.toast.up { transform: translateX(-50%) translateY(0); }

/* ===== MISC ===== */
hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
#setup-error { font-size: .8rem; color: var(--red); margin-top: 10px; text-align: center; min-height: 1.2em; }