/* ════════════════════════════════════════════════════
   MENSAGRAM v6.3
   Desenvolvido por André Duarte Serra · 2021
   ════════════════════════════════════════════════════ */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #060606; --bg2: #0c0c0c; --bg3: #141414; --bg4: #1c1c1c; --surface: #0a0a0a;
  --border: rgba(255,255,255,.04); --border2: rgba(255,255,255,.08); --border3: rgba(255,255,255,.13);
  --text: #f0f0f0; --text2: #9a9a9a; --text3: #606060;
  --accent: #e8610a; --accent2: #ff8534; --accent-rgb: 232,97,10;
  --accent-dim: rgba(232,97,10,.06); --accent-light: rgba(232,97,10,.12); --accent-border: rgba(232,97,10,.18);
  --grad: linear-gradient(145deg, #ff9a3c 0%, #e8610a 50%, #c04800 100%);
  --grad-subtle: linear-gradient(145deg, rgba(232,97,10,.09), rgba(184,68,7,.03));
  --msg-out-bg: rgba(232,97,10,.08); --msg-out-border: rgba(232,97,10,.14);
  --msg-in-bg: rgba(255,255,255,.03); --msg-in-border: rgba(255,255,255,.05);
  --danger: #dc3545; --danger-bg: rgba(220,53,69,.07); --danger-border: rgba(220,53,69,.14);
  --success: #22c55e; --success-glow: rgba(34,197,94,.3);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.8); --shadow-md: 0 8px 28px rgba(0,0,0,.55); --shadow-sm: 0 2px 10px rgba(0,0,0,.4);
  --r: 18px; --r-sm: 12px; --r-xs: 8px;
  --transition: all .18s cubic-bezier(.4,0,.2,1);
}

:root[data-theme="light"] {
  --bg: #f4f2ef; --bg2: #ffffff; --bg3: #faf8f5; --bg4: #eeebe6; --surface: #fbfaf8;
  --border: rgba(0,0,0,.04); --border2: rgba(0,0,0,.07); --border3: rgba(0,0,0,.12);
  --text: #141414; --text2: #636363; --text3: #a0a0a0;
  --accent-dim: rgba(232,97,10,.04); --accent-light: rgba(232,97,10,.08); --accent-border: rgba(232,97,10,.12);
  --grad-subtle: linear-gradient(145deg, rgba(232,97,10,.05), rgba(184,68,7,.02));
  --msg-out-bg: rgba(232,97,10,.06); --msg-out-border: rgba(232,97,10,.1);
  --msg-in-bg: rgba(0,0,0,.02); --msg-in-border: rgba(0,0,0,.04);
  --danger-bg: rgba(220,53,69,.05); --danger-border: rgba(220,53,69,.1);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.06); --shadow-md: 0 8px 28px rgba(0,0,0,.04); --shadow-sm: 0 2px 10px rgba(0,0,0,.03);
}

body {
  background: var(--bg); color: var(--text);
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}
::selection { background: rgba(var(--accent-rgb), .18); }

/* Background */
.bg-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-orb { position: absolute; border-radius: 50%; filter: blur(140px); opacity: .12; }
.bg-orb:nth-child(1) { width: 500px; height: 500px; background: rgba(232,97,10,.2); top: -220px; left: -160px; animation: orbDrift 20s ease-in-out infinite alternate; }
.bg-orb:nth-child(2) { width: 360px; height: 360px; background: rgba(184,68,7,.14); bottom: -140px; right: -140px; animation: orbDrift 26s ease-in-out infinite alternate-reverse; }
@keyframes orbDrift { 0% { transform: translate(0,0); } 100% { transform: translate(30px,20px); } }
:root[data-theme="light"] .bg-orb { opacity: .06; }

/* Splash */
#splash {
  position: fixed; inset: 0; z-index: 1000; background: #060606;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .75rem;
  transition: opacity .7s ease, visibility .7s ease;
}
#splash.done { opacity: 0; visibility: hidden; pointer-events: none; }
:root[data-theme="light"] #splash { background: #f4f2ef; }
.splash-logo {
  width: 82px; height: 82px; background: var(--grad); border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 56px rgba(232,97,10,.4);
  animation: splashP 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes splashP {
  0%,100% { transform: scale(1); box-shadow: 0 16px 56px rgba(232,97,10,.35); }
  50% { transform: scale(1.04); box-shadow: 0 20px 68px rgba(232,97,10,.5); }
}
.splash-logo svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.splash-name { font-size: .78rem; font-weight: 900; letter-spacing: .35em; color: var(--text2); margin-top: .25rem; }
.splash-text { font-size: .6rem; color: var(--text3); letter-spacing: .12em; font-weight: 400; }

/* Screens */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity .3s ease, transform .3s ease; z-index: 1; overflow: hidden; }
.screen.hidden { opacity: 0; pointer-events: none; transform: translateY(10px); }

/* LOBBY */
#lobby { align-items: center; justify-content: center; padding: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.lobby-inner {
  display: flex; flex-direction: column; align-items: center;
  padding: 2rem 1.25rem 1.5rem; gap: .9rem;
  width: 100%; max-width: 640px; min-height: 100%; justify-content: center;
}

/* Logo */
.logo-section { display: flex; flex-direction: column; align-items: center; margin-bottom: .15rem; }
.logo-icon {
  width: 72px; height: 72px; background: var(--grad); border-radius: 20px;
  display: flex; align-items: center; justify-content: center; margin-bottom: .65rem;
  box-shadow: 0 10px 40px rgba(232,97,10,.32);
  position: relative; overflow: hidden; transition: var(--transition);
}
.logo-icon:hover { transform: translateY(-2px); box-shadow: 0 14px 48px rgba(232,97,10,.42); }
.logo-icon::after { content:''; position:absolute; inset:0; background:linear-gradient(145deg,rgba(255,255,255,.24) 0%,transparent 50%); border-radius:inherit; }
.logo-icon svg { width:34px; height:34px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; position:relative; z-index:1; }
.logo-text { font-size: 1.85rem; font-weight: 900; letter-spacing: -.05em; color: var(--text); line-height: 1; }
.logo-sub { font-size: .56rem; color: var(--text3); letter-spacing: .22em; margin-top: .35rem; text-transform: uppercase; font-weight: 600; }

/* Card */
.card { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r); width: 100%; box-shadow: var(--shadow-lg); overflow: hidden; }
.card-inner { display: flex; align-items: stretch; }
.card-section { padding: 1.35rem 1.3rem 1.2rem; flex: 1; min-width: 0; }
.section-label {
  font-size: .58rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text3); margin-bottom: .8rem; display: flex; align-items: center; gap: .45rem;
}
.section-label::before { content:''; width:2px; height:11px; background:var(--accent); border-radius:2px; opacity:.7; }

/* Divider vertical */
.divider-v {
  width: 1px; background: var(--border2); flex-shrink: 0; margin: 1rem 0;
  position: relative;
}
.divider-v::after {
  content: 'ou'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface); color: var(--text3);
  font-size: .55rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem 0; line-height: 1;
}

/* Divider horizontal (fallback mobile) */
.divider {
  display: none;
  align-items: center; gap: .75rem;
  padding: .7rem 1.25rem; color: var(--text3);
  font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border2); }

/* Mobile: empilhar */
@media (max-width: 500px) {
  .lobby-inner { max-width: 380px; }
  .card-inner { flex-direction: column; }
  .divider-v { display: none; }
  .divider { display: flex; }
  .card-section + .card-section { border-top: 1px solid var(--border2); }
}
.ipt-group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .85rem; }
.ipt-wrap { position: relative; }
.ipt-icon { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); font-size:.8rem; opacity:.35; pointer-events:none; }
.ipt {
  width: 100%; background: var(--bg3); border: 1.5px solid var(--border2);
  border-radius: var(--r-sm); padding: .82rem 1rem .82rem 2.4rem;
  font-family: 'Satoshi', sans-serif; font-size: 16px; color: var(--text);
  transition: var(--transition); -webkit-appearance: none;
}
.ipt-simple { padding-left: 1rem; }
.ipt::placeholder { color: var(--text3); font-weight: 400; }
.ipt:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.09); background: var(--bg4); }
.ipt-code { text-transform:uppercase; letter-spacing:.35em; font-weight:900; text-align:center; font-size:1.05rem; padding-left:1rem; }
.ipt-code::placeholder { letter-spacing:.1em; font-weight:400; font-size:.85rem; }

/* Botões */
.btn {
  width: 100%; padding: .9rem 1.5rem; border-radius: var(--r-sm);
  font-family: 'Satoshi', sans-serif; font-weight: 700; font-size: .88rem;
  cursor: pointer; border: none; transition: var(--transition);
  touch-action: manipulation; min-height: 50px; -webkit-appearance: none;
  display: flex; align-items: center; justify-content: center; gap: .5rem; letter-spacing: -.01em;
}
.btn-p { background: var(--grad); color: #fff; box-shadow: 0 4px 20px rgba(232,97,10,.3), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-p:hover { transform: translateY(-1px); box-shadow: 0 7px 28px rgba(232,97,10,.42); }
.btn-p:active { transform: translateY(0) scale(.98); }
.btn-p:disabled { opacity: .22; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-o { background: var(--bg3); color: var(--text2); border: 1.5px solid var(--border3); font-weight: 600; }
.btn-o:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.btn-o:active { transform: scale(.98); }

/* Enc label */
.enc-label {
  font-size: .64rem; color: var(--text3); text-align: center;
  font-weight: 600; display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.enc-label-dot { width:4px; height:4px; background:var(--success); border-radius:50%; box-shadow:0 0 5px var(--success-glow); }

/* Lobby bottom */
.lobby-bottom { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-top: auto; padding-top: .4rem; }
.author-credit { font-size: .68rem; color: var(--text3); text-align: center; font-weight: 500; }
#status-bar { font-size: .58rem; color: var(--text3); display: flex; align-items: center; justify-content: center; gap: 5px; font-weight: 500; }
.dot { width:5px; height:5px; border-radius:50%; background:var(--border3); flex-shrink:0; transition:all .3s; }
.dot.ok { background:var(--success); box-shadow:0 0 6px var(--success-glow); }
.dot.spin { background:var(--accent); animation:pulse 1.2s ease-in-out infinite; }
.dot.err { background:var(--danger); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.2} }

.theme-toggle {
  position:absolute; top:1rem; right:1rem;
  background:var(--bg3); border:1px solid var(--border2); border-radius:var(--r-xs);
  width:36px; height:36px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:.82rem; transition:var(--transition); z-index:10;
}
.theme-toggle:hover { border-color:var(--accent); background:var(--accent-dim); }

/* WAITING */
#waiting { align-items:center; justify-content:center; padding:2rem; overflow-y:auto; overflow-x:hidden; }
.waiting-inner { display:flex; flex-direction:column; align-items:center; gap:1.2rem; text-align:center; width:100%; max-width:360px; }
.code-box { background:var(--surface); border:1px solid var(--border2); border-radius:var(--r); padding:2rem 1.75rem; width:100%; box-shadow:var(--shadow-lg); }
.code-label { font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text3); margin-bottom:.6rem; }
.code-val { font-size:clamp(2rem,9vw,2.8rem); font-weight:900; letter-spacing:.4em; color:var(--accent); margin:.5rem 0 1.2rem; text-shadow:0 0 40px rgba(var(--accent-rgb),.28); }
.copy-btn { background:var(--accent-dim); border:1px solid var(--accent-border); border-radius:var(--r-xs); color:var(--accent); font-size:.7rem; font-weight:700; padding:.55rem 1.4rem; cursor:pointer; transition:var(--transition); font-family:'Satoshi',sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.copy-btn:hover { background:var(--accent-light); transform:translateY(-1px); }
.wait-dots { display:flex; gap:5px; justify-content:center; margin-top:1.2rem; }
.wait-dots span { width:4px; height:4px; border-radius:50%; background:var(--border3); animation:wdot 1.6s ease-in-out infinite; }
.wait-dots span:nth-child(2){animation-delay:.2s} .wait-dots span:nth-child(3){animation-delay:.4s}
@keyframes wdot { 0%,70%,100%{transform:translateY(0);opacity:.2} 35%{transform:translateY(-5px);opacity:1;background:var(--accent)} }
.hint { font-size:.67rem; color:var(--text3); margin-top:.65rem; font-weight:400; }

/* CHAT */
#chat { justify-content:space-between; }
.chat-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem .85rem; border-bottom:1px solid var(--border);
  background:var(--surface); flex-shrink:0;
}
.chat-hdr-left { display:flex; align-items:center; gap:.6rem; }
.chat-avatar { width:36px; height:36px; background:var(--grad); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 2px 12px rgba(var(--accent-rgb),.22); }
.chat-avatar svg { width:15px; height:15px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.chat-title { font-size:.87rem; font-weight:800; letter-spacing:-.025em; }
.chat-subtitle { font-size:.55rem; color:var(--text3); margin-top:1.5px; display:flex; align-items:center; gap:4px; font-weight:500; }

/* Botões do header */
.hdr-actions { display:flex; align-items:center; gap:.3rem; }
.hdr-btn {
  background:transparent; border:1px solid var(--border2); border-radius:var(--r-xs);
  height:32px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; transition:var(--transition); color:var(--text2);
  font-family:'Satoshi',sans-serif; font-weight:600; padding:0 .65rem; gap:.28rem; white-space:nowrap;
}
.hdr-btn:hover { border-color:var(--border3); color:var(--text); background:var(--bg3); }
.hdr-btn-icon { width:32px; padding:0; }
.hdr-btn-danger { border-color:var(--danger-border); color:var(--danger); }
.hdr-btn-danger:hover { background:var(--danger-bg); border-color:var(--danger); }
.hdr-btn-accent { border-color:var(--accent-border); color:var(--accent); }
.hdr-btn-accent:hover { background:var(--accent-dim); }

.end-btn,.fp-btn { display:none; }

.presence-dot { width:4px; height:4px; border-radius:50%; transition:all .3s; }
.presence-dot.online { background:var(--success); box-shadow:0 0 5px var(--success-glow); }
.presence-dot.away { background:#d4930a; box-shadow:0 0 5px rgba(212,147,10,.25); }
.presence-dot.offline { background:var(--danger); }

.inactivity-bar { height:2px; background:var(--border); flex-shrink:0; overflow:hidden; }
.inactivity-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .5s linear; width:100%; }

.msgs { flex:1; overflow-y:auto; padding:.85rem; display:flex; flex-direction:column; gap:.3rem; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
.msgs::-webkit-scrollbar { width:0; }
.msgs.blurred .msg { filter:blur(8px); transition:filter .1s; }
.msg { max-width:80%; padding:.58rem .85rem; border-radius:15px; font-size:.85rem; line-height:1.65; font-weight:400; animation:msgIn .15s ease; word-break:break-word; position:relative; -webkit-user-select:none; user-select:none; }
@keyframes msgIn { from{opacity:0;transform:translateY(4px) scale(.98)} to{opacity:1;transform:none} }
.msg.out { align-self:flex-end; background:var(--msg-out-bg); border:1px solid var(--msg-out-border); border-bottom-right-radius:3px; }
.msg.in { align-self:flex-start; background:var(--msg-in-bg); border:1px solid var(--msg-in-border); border-bottom-left-radius:3px; }

.msg-meta { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:2px; }
.msg-t { font-size:.5rem; color:var(--text3); font-weight:500; }
.msg-timer { font-size:.5rem; color:var(--accent); font-weight:700; }
.msg.expiring { animation:fadeOut .4s ease forwards; }
@keyframes fadeOut { to{opacity:0;transform:scale(.95)} }
.msg-img { max-width:100%; border-radius:10px; margin-bottom:2px; cursor:pointer; display:block; -webkit-user-drag:none; }
.msg-img:hover { opacity:.9; }
.img-fullscreen { position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.95); display:flex; align-items:center; justify-content:center; padding:1rem; cursor:pointer; animation:fadeIn .1s ease; }
.img-fullscreen img { max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.voice-msg { display:flex; align-items:center; gap:.45rem; min-width:160px; }
.voice-play { width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.65rem; flex-shrink:0; transition:var(--transition); }
.voice-play:hover { transform:scale(1.08); }
.voice-wave { flex:1; height:24px; display:flex; align-items:center; gap:1.5px; }
.voice-wave span { display:block; width:2px; border-radius:1px; background:var(--text3); transition:background .12s; }
.voice-wave.playing span { background:var(--accent); }
.voice-dur { font-size:.52rem; color:var(--text3); flex-shrink:0; min-width:24px; text-align:right; font-weight:600; }

.rec-overlay { position:absolute; inset:0; background:var(--surface); display:flex; align-items:center; gap:.6rem; padding:0 .9rem; z-index:20; border-top:1px solid var(--danger); animation:fadeIn .1s ease; }
.rec-dot { width:7px; height:7px; border-radius:50%; background:var(--danger); animation:pulse .8s ease-in-out infinite; }
.rec-time { font-size:.75rem; color:var(--danger); font-weight:700; min-width:34px; }
.rec-hint { font-size:.68rem; color:var(--text2); flex:1; }
.rec-cancel { background:none; border:1px solid var(--border3); color:var(--text2); font-size:.65rem; font-weight:700; padding:.28rem .6rem; border-radius:var(--r-xs); cursor:pointer; font-family:'Satoshi',sans-serif; transition:var(--transition); }
.rec-cancel:hover { border-color:var(--danger); color:var(--danger); }
.rec-send { background:var(--grad); color:#fff; border:none; font-size:.65rem; font-weight:700; padding:.28rem .7rem; border-radius:var(--r-xs); cursor:pointer; font-family:'Satoshi',sans-serif; }

.msg-reactions { display:flex; gap:2px; margin-top:3px; flex-wrap:wrap; }
.reaction-badge { font-size:.6rem; background:var(--bg3); border:1px solid var(--border); border-radius:20px; padding:1px 5px; cursor:default; }
.reaction-badge.mine { border-color:var(--accent-border); background:var(--accent-dim); }
.reaction-picker { position:absolute; bottom:calc(100% + 4px); background:var(--surface); border:1px solid var(--border2); border-radius:var(--r-sm); padding:4px 5px; display:flex; gap:1px; box-shadow:var(--shadow-md); z-index:50; animation:fadeIn .08s ease; }
.reaction-picker button { background:none; border:none; font-size:1rem; cursor:pointer; padding:2px 4px; border-radius:5px; transition:var(--transition); }
.reaction-picker button:hover { background:var(--bg3); transform:scale(1.12); }
.msg.out .reaction-picker { right:0; left:auto; }
.msg.in .reaction-picker { left:0; right:auto; }
.msg-read { font-size:.5rem; color:var(--text3); transition:color .3s; font-weight:700; }
.msg-read.seen { color:var(--accent); }

.typing-indicator { align-self:flex-start; display:flex; align-items:center; gap:3px; padding:.42rem .7rem; background:var(--bg3); border:1px solid var(--border); border-radius:15px; border-bottom-left-radius:3px; }
.typing-indicator span { width:3.5px; height:3.5px; border-radius:50%; background:var(--text3); animation:typingB 1.2s ease-in-out infinite; }
.typing-indicator span:nth-child(2){animation-delay:.15s} .typing-indicator span:nth-child(3){animation-delay:.3s}
@keyframes typingB { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-3px);background:var(--accent)} }
.sys-msg { align-self:center; font-size:.55rem; color:var(--text3); padding:.18rem .65rem; border:1px solid var(--border); border-radius:20px; background:var(--bg3); font-weight:600; }

/* Timer row */
.timer-row { display:flex; align-items:center; gap:.28rem; padding:.35rem .85rem; flex-shrink:0; border-top:1px solid var(--border); background:var(--surface); overflow-x:auto; scrollbar-width:none; }
.timer-row::-webkit-scrollbar { display:none; }
.timer-label { font-size:.58rem; font-weight:700; color:var(--text3); flex-shrink:0; margin-right:.1rem; }
.timer-btn { background:var(--bg3); border:1.5px solid var(--border2); border-radius:20px; color:var(--text3); font-size:.6rem; font-weight:700; padding:.22rem .6rem; cursor:pointer; transition:var(--transition); -webkit-appearance:none; flex-shrink:0; white-space:nowrap; }
.timer-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.timer-btn.active { background:var(--accent-dim); border-color:var(--accent-border); color:var(--accent); }
.panic-btn { background:transparent; border:1.5px solid var(--danger-border); color:var(--danger); font-size:.58rem; font-weight:700; padding:.22rem .55rem; border-radius:20px; cursor:pointer; transition:var(--transition); margin-left:auto; font-family:'Satoshi',sans-serif; flex-shrink:0; }
.panic-btn:hover { background:var(--danger-bg); border-color:var(--danger); }

/* Input row */
.input-row { display:flex; align-items:flex-end; gap:.3rem; padding:.55rem .75rem; padding-bottom:max(.55rem,env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:var(--surface); flex-shrink:0; position:relative; }
.attach-btn,.mic-btn { background:var(--bg3); border:1.5px solid var(--border2); border-radius:12px; width:40px; height:40px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.8rem; transition:var(--transition); flex-shrink:0; color:var(--text3); }
.attach-btn:hover,.mic-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.mic-btn.recording { background:var(--danger-bg); border-color:var(--danger); color:var(--danger); animation:recPulse 1s ease-in-out infinite; }
@keyframes recPulse { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 10px rgba(220,53,69,.3)} }
.chat-ipt { flex:1; background:var(--bg3); border:1.5px solid var(--border2); border-radius:14px; padding:.62rem 1rem; font-family:'Satoshi',sans-serif; font-size:16px; color:var(--text); transition:var(--transition); resize:none; height:40px; max-height:120px; -webkit-appearance:none; font-weight:400; line-height:1.5; }
.chat-ipt::placeholder { color:var(--text3); }
.chat-ipt:focus { outline:none; border-color:var(--accent); background:var(--bg4); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.07); }
.send-btn { background:var(--grad); color:#fff; border:none; border-radius:12px; width:40px; height:40px; cursor:pointer; font-size:.85rem; display:flex; align-items:center; justify-content:center; transition:var(--transition); flex-shrink:0; box-shadow:0 3px 14px rgba(var(--accent-rgb),.28); }
.send-btn:hover { transform:scale(1.06) translateY(-1px); box-shadow:0 5px 20px rgba(var(--accent-rgb),.4); }
.send-btn:active { transform:scale(.92); }
.send-btn.sending { animation:sendPop .3s ease; }
@keyframes sendPop { 0%{transform:scale(1)} 40%{transform:scale(.82) rotate(-6deg)} 100%{transform:scale(1) rotate(0)} }

/* ENDED */
#ended { align-items:center; justify-content:center; padding:2rem; overflow-y:auto; }
.ended-inner { display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; max-width:320px; }
.ended-icon { width:76px; height:76px; border-radius:50%; background:var(--danger-bg); border:1.5px solid var(--danger-border); display:flex; align-items:center; justify-content:center; }
.ended-icon svg { width:30px; height:30px; stroke:var(--danger); fill:none; stroke-width:2; stroke-linecap:round; }
.ended-title { font-size:1.45rem; font-weight:900; color:var(--danger); letter-spacing:-.04em; }
.ended-sub { font-size:.74rem; color:var(--text3); max-width:250px; line-height:2; font-weight:400; }

/* Toast */
.toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(12px); background:var(--surface); border:1px solid var(--border3); border-radius:var(--r-sm); padding:.55rem 1.1rem; font-size:.72rem; font-weight:600; color:var(--text); opacity:0; transition:all .22s ease; z-index:100; pointer-events:none; white-space:nowrap; box-shadow:var(--shadow-md); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.conn-strength { display:flex; align-items:flex-end; gap:1.5px; height:9px; }
.conn-bar { width:2px; background:var(--border3); border-radius:1px; transition:all .3s; }
.conn-bar:nth-child(1){height:3px} .conn-bar:nth-child(2){height:5px} .conn-bar:nth-child(3){height:8px}
.conn-bar.active { background:var(--success); }

.confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:200; display:flex; align-items:center; justify-content:center; padding:1.25rem; animation:fadeIn .12s ease; }
.confirm-box { background:var(--surface); border:1px solid var(--border2); border-radius:var(--r); padding:1.6rem; max-width:320px; width:100%; box-shadow:var(--shadow-lg); text-align:center; animation:msgIn .15s ease; }
.confirm-title { font-size:1rem; font-weight:900; margin-bottom:.5rem; }
.confirm-text { font-size:.78rem; color:var(--text2); margin-bottom:1.2rem; line-height:1.55; font-weight:400; }
.confirm-actions { display:flex; gap:.5rem; }
.confirm-actions .btn { padding:.6rem .9rem; font-size:.8rem; border-radius:var(--r-sm); min-height:44px; }
.confirm-actions .btn-cancel { background:var(--bg3); color:var(--text2); border:1.5px solid var(--border2); font-weight:600; }
.confirm-actions .btn-cancel:hover { border-color:var(--border3); color:var(--text); }
.confirm-actions .btn-danger { background:linear-gradient(145deg,#dc3545,#a81f2c); color:#fff; box-shadow:0 3px 14px rgba(220,53,69,.22); font-weight:700; border:none; }

.unread-float { position:absolute; bottom:120px; left:50%; transform:translateX(-50%) translateY(14px); background:var(--grad); color:#fff; font-size:.65rem; font-weight:700; padding:.28rem .8rem; border-radius:20px; cursor:pointer; opacity:0; pointer-events:none; transition:all .18s ease; box-shadow:0 3px 14px rgba(var(--accent-rgb),.32); z-index:10; }
.unread-float.show { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }

.fp-code { font-family:'Satoshi',monospace; font-size:1.15rem; font-weight:900; letter-spacing:.15em; text-align:center; padding:.85rem; background:var(--bg3); border-radius:var(--r-sm); border:1px solid var(--border2); margin-bottom:.7rem; color:var(--accent); word-spacing:.3em; }
.fp-hint { font-size:.65rem; color:var(--text3); line-height:1.65; margin-bottom:.4rem; }
.lbl { font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text3); margin-bottom:.5rem; }
#img-input { display:none; }
.haptic { animation:haptic .12s ease; }
@keyframes haptic { 50%{transform:scale(.97)} }

/* ── Animação de mensagem destruída ── */
@keyframes msgDestroy {
  0%   { opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
  20%  { opacity:1; transform:scale(1.04) translateY(-2px); filter:blur(0); }
  40%  { opacity:.8; transform:scale(.96) translateY(0) skewX(-3deg); filter:blur(1px); }
  60%  { opacity:.5; transform:scale(.9) translateY(2px) skewX(2deg); filter:blur(3px); }
  80%  { opacity:.2; transform:scale(.8) translateY(4px); filter:blur(6px); }
  100% { opacity:0; transform:scale(.7) translateY(8px); filter:blur(10px); }
}
.msg.destroying {
  animation: msgDestroy .5s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events: none;
}

/* Efeito panic — flash vermelho no ecrã */
@keyframes panicFlash {
  0%,100% { opacity:0; }
  15%,45% { opacity:.18; }
  30%,60% { opacity:.06; }
}
.panic-overlay {
  position: fixed; inset: 0; background: var(--danger);
  pointer-events: none; z-index: 500;
  animation: panicFlash .6s ease forwards;
}

/* ── Connecting typewriter ── */
.connecting-overlay {
  position: absolute; inset: 0; z-index: 50;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .75rem;
  animation: fadeOut .4s ease .1s forwards;
  animation-play-state: paused;
}
.connecting-overlay.done { animation-play-state: running; pointer-events: none; }
.connecting-lines { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.conn-line {
  font-size: .7rem; font-weight: 600; color: var(--text2);
  white-space: nowrap; overflow: hidden; width: 0;
  letter-spacing: .02em;
}
.conn-line.typed { animation: typeIn .35s steps(30, end) forwards; }
.conn-line.ok::after {
  content: ' ✓'; color: var(--success);
}
.conn-cursor {
  display: inline-block; width: 2px; height: .85em;
  background: var(--accent); vertical-align: middle; margin-left: 2px;
  animation: blink .7s step-end infinite;
}
@keyframes typeIn { from { width:0 } to { width:100% } }
@keyframes blink  { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes fadeOut { from{opacity:1} to{opacity:0; visibility:hidden} }