/* ============================================================
   IDEnza · Live Language Bridge
   Linguagem visual herdada de IDentity ODOnto
   ============================================================ */

:root{
  --navy:#0a3147;
  --gold:#D4AF37;
  --gold-dark:#B8860B;
  --gold-light:#E5C76B;
  --cream:#faf8f4;
  --cream-2:#f5f0e6;
  --white:#fff;
  --text-light:#7a8490;
  --text-muted:#4a4a4a;
  --border:rgba(212,175,55,.28);
  --border-soft:rgba(10,49,71,.10);
  --ok:#2d7a4f;
  --gap:#2c5f89;
  --danger:#b23a1e;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--cream);
  color:var(--navy);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:300;
  font-size:13px;
  line-height:1.5;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button,input{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:rgba(10,49,71,.18);border-radius:3px}

/* ---------- HEADER ---------- */
.head{
  height:56px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 18px;
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(10,49,71,.04);
  flex-shrink:0;
  z-index:10;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  display:grid;place-items:center;
  width:34px;height:34px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff;
  font-family:'Cinzel',serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:.06em;
}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt b{
  font-family:'Cinzel',serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.22em;
  color:var(--navy);
  text-transform:uppercase;
}
.brand-txt b em{font-style:normal;color:var(--gold-dark)}
.brand-txt i{
  font-family:'JetBrains Mono',monospace;
  font-size:8.5px;
  font-style:normal;
  letter-spacing:.22em;
  color:var(--gold-dark);
  text-transform:uppercase;
  margin-top:2px;
}
.brand-txt i em{color:var(--navy);font-style:normal;font-weight:500}
.sp{flex:1}

.chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-light);
  background:#fff;
  border:1px solid var(--border-soft);
  padding:6px 11px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:all .25s;
}
.chip b{color:var(--navy);font-weight:600;letter-spacing:.14em}
.chip.gold{color:var(--gold-dark);border-color:var(--border)}
.chip.gold b{color:var(--gold-dark)}
.chip.listening{border-color:var(--gold);background:rgba(212,175,55,.08);color:var(--gold-dark)}
.chip.listening b{color:var(--gold-dark)}
.sym-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--ok);
  display:inline-block;
  box-shadow:0 0 0 2px rgba(45,122,79,.18);
}
.sym-dot.off{background:var(--text-light);box-shadow:0 0 0 2px rgba(122,132,144,.15)}
.sym-dot.listening{
  background:var(--gold);
  box-shadow:0 0 0 2px rgba(212,175,55,.22);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 2px rgba(212,175,55,.25)}
  50%    {box-shadow:0 0 0 6px rgba(212,175,55,0)}
}

.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 11px;
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid var(--border-soft);
  color:var(--navy);
  background:#fff;
  transition:all .2s;
  white-space:nowrap;
}
.btn:hover{border-color:var(--gold);color:var(--gold-dark);box-shadow:0 2px 8px rgba(212,175,55,.12)}
.btn.pri{
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff;border-color:transparent;font-weight:600;
}

/* ---------- MAIN / COLUNAS ---------- */
main{
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--border-soft);
  min-height:0;
}
.col{background:var(--cream);display:flex;flex-direction:column;min-height:0}

.col-head{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;
  background:#fff;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.col-pt .col-head{border-left:3px solid var(--gold)}
.col-en .col-head{border-left:3px solid var(--navy)}
.col-head .flag{font-size:16px;line-height:1}
.col-head .label{
  font-family:'Cinzel',serif;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--navy);
  font-weight:500;
}
.col-head .col-tag{
  margin-left:auto;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-light);
}
.col-head .col-tag b{color:var(--gold-dark);font-weight:600}

.stream{
  flex:1;
  overflow-y:auto;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
}

/* ---------- ENTRIES ---------- */
.entry{
  background:#fff;
  border:1px solid var(--border-soft);
  padding:11px 13px;
  position:relative;
  animation:fadeIn .32s cubic-bezier(.4,0,.2,1);
}
.entry.speaker-pt{border-left:2px solid var(--gold)}
.entry.speaker-en{border-left:2px solid var(--navy)}
.entry.pending{opacity:.55}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

.entry .meta{
  display:flex;align-items:center;gap:8px;
  margin-bottom:7px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-light);
}
.entry .meta .time{color:var(--gold-dark);font-weight:500}
.entry .meta .who{color:var(--navy);font-weight:600}
.entry .meta .play{
  margin-left:auto;
  background:transparent;
  border:1px solid var(--border-soft);
  color:var(--text-light);
  padding:3px 8px;
  font-size:11px;
  line-height:1.1;
  cursor:pointer;
  transition:all .2s;
}
.entry .meta .play:hover:not(:disabled){
  color:var(--gold-dark);
  border-color:var(--gold);
  background:rgba(212,175,55,.06);
}
.entry .meta .play:disabled{opacity:.28;cursor:default}

.entry .body{
  font-family:'Marcellus',Georgia,serif;
  font-size:14.5px;
  line-height:1.55;
  color:var(--navy);
  word-wrap:break-word;
}

/* ---------- FOOTER ---------- */
footer{
  display:flex;
  gap:10px;
  padding:12px 18px;
  background:#fff;
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.mic{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  gap:12px;
  padding:12px 20px;
  background:#fff;
  border:1px solid var(--border-soft);
  color:var(--navy);
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  transition:all .25s;
  position:relative;
}
.mic:hover{border-color:var(--gold);color:var(--gold-dark);box-shadow:0 2px 8px rgba(212,175,55,.12)}
.mic .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--text-light);
  transition:all .25s;
  flex-shrink:0;
}
.mic .mic-lbl{font-weight:600}
.mic .mic-key{
  font-size:9px;
  opacity:.55;
  padding-left:8px;
  border-left:1px solid var(--border-soft);
  letter-spacing:.14em;
}
.mic.active{
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 14px rgba(212,175,55,.30);
}
.mic.active .dot{
  background:#fff;
  animation:pulse 1.4s infinite;
}
.mic.active .mic-key{border-left-color:rgba(255,255,255,.35)}

/* ---------- POPUP ---------- */
.popup{
  position:fixed;
  top:70px;
  left:50%;
  transform:translateX(-50%) translateY(-14px);
  width:min(620px,90vw);
  background:var(--cream);
  border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(10,49,71,.18), 0 0 0 1px rgba(212,175,55,.12);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);
  z-index:9999;
}
.popup::before,
.popup::after{
  content:"";
  position:absolute;
  width:16px;height:16px;
  border:1.5px solid var(--gold-dark);
}
.popup::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.popup::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.popup.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.popup.speaker-en{border-color:var(--navy)}
.popup.speaker-en::before,.popup.speaker-en::after{border-color:var(--navy)}

.popup-inner{padding:18px 22px 20px}

.popup-head{
  display:flex;align-items:center;gap:10px;
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid var(--border-soft);
}
.popup-flag{font-size:20px;line-height:1}
.popup-label{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-dark);
  font-weight:600;
}
.popup.speaker-en .popup-label{color:var(--navy)}
.popup-time{
  margin-left:auto;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.14em;
  color:var(--text-light);
}
.popup-close{
  background:transparent;
  border:none;
  color:var(--text-light);
  font-size:12px;
  cursor:pointer;
  padding:2px 6px;
  transition:color .2s;
  font-family:'JetBrains Mono',monospace;
}
.popup-close:hover{color:var(--gold-dark)}

.popup-body{
  font-family:'Marcellus',Georgia,serif;
  font-size:17px;
  line-height:1.5;
  color:var(--navy);
  word-wrap:break-word;
}

/* ---------- RESPONSIVO ---------- */
@media (max-width:780px){
  main{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  footer{flex-direction:column}
  .chips .chip:first-child{display:none}
  .brand-txt b{font-size:11px;letter-spacing:.16em}
}
/* ---------- BARRA DE DIGITAÇÃO ---------- */
.type-bar{
  display:flex;
  gap:6px;
  padding:10px 14px;
  background:#fff;
  border-top:1px solid var(--border-soft);
  flex-shrink:0;
}
.type-bar input{
  flex:1;
  min-width:0;
  border:1px solid var(--border-soft);
  background:var(--cream);
  padding:9px 12px;
  font-family:'Marcellus',Georgia,serif;
  font-size:13.5px;
  color:var(--navy);
  outline:none;
  transition:all .2s;
}
.type-bar input:focus{
  border-color:var(--gold);
  background:#fff;
  box-shadow:0 0 0 3px rgba(212,175,55,.10);
}
.type-bar input::placeholder{
  color:var(--text-light);
  font-style:italic;
  font-size:12.5px;
}
.type-send{
  padding:0 16px;
  background:#fff;
  border:1px solid var(--border-soft);
  color:var(--text-light);
  font-family:'JetBrains Mono',monospace;
  font-size:15px;
  cursor:pointer;
  transition:all .2s;
  line-height:1;
}
.type-send:hover{
  color:var(--gold-dark);
  border-color:var(--gold);
  background:rgba(212,175,55,.06);
}
.type-send:active{
  transform:translateY(1px);
}