:root{--bg:#0d0e10;--card:#15171b;--card-2:#0f1f17;--stroke:#24262b;--stroke-2:#173f2e;--text:#eef0f3;--muted:#9aa2ad;--radius:16px;--gap:12px;--vh:100vh;--primary:#00d862;--primary-dim:rgba(0,216,98,.12);--page-pad:clamp(24px,4vh,56px);--composer-space:150px;--composer-h:var(--composer-space)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;padding:0;overflow:hidden}
body{background:transparent;font:500 16px Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ====== LAYOUT ====== */
.wrap{display:flex;flex-direction:column;height:var(--vh);max-width:600px;margin:0 auto;position:relative}
.header{background:linear-gradient(180deg,#161a1f 0,rgba(26,28,32,.9) 100%);border-bottom:1px solid var(--stroke);padding:10px clamp(12px,3vw,18px);display:grid;gap:8px;justify-items:center;text-align:center;backdrop-filter:blur(10px)}
.peer{display:flex;align-items:center;gap:10px;justify-content:center}
.peer-avatar{width:38px;height:38px;border-radius:999px;background:#1b1d22;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.peer-meta{display:grid;gap:2px;text-align:center}
.peer-name{font-weight:800;font-size:16px;letter-spacing:.2px}
.peer-sub{font-size:12px;color:var(--muted)}
.ttl-banner{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:linear-gradient(180deg,rgba(255,209,102,.12),rgba(255,209,102,.08));border:1px dashed rgba(255,209,102,.45);color:#ffe7a6;font:800 12px/1.2 Inter,system-ui,sans-serif;justify-content:center;margin:0 auto}
.ttl-banner svg{filter:drop-shadow(0 0 6px rgba(255,209,102,.45));animation:1.2s ease-in-out infinite ping}
@keyframes ping{0%,100%{transform:scale(1);opacity:1}80%{transform:scale(1.1);opacity:.9}}

/* lista de mensagens – deixa espaço pro composer fixo */
.msgs{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px;display:flex;flex-direction:column;gap:var(--gap);-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scroll-behavior:smooth;padding-bottom:calc(16px + env(safe-area-inset-bottom) + var(--composer-h));scroll-padding-bottom:calc(16px + env(safe-area-inset-bottom) + var(--composer-h))}

.msgs::-webkit-scrollbar{width:6px}
.msgs::-webkit-scrollbar-track{background:transparent}
.msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:10px}

/* ====== BOLHAS ====== */
.item{display:flex;align-items:flex-end;gap:8px;width:100%;animation:fadeIn .3s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.item.eu{flex-direction:row-reverse}
.msg-avatar{width:36px;height:36px;border-radius:999px;background:#1b1d22;flex:0 0 36px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.msg-box{max-width:96%;background:var(--card);border:1px solid var(--stroke);border-radius:18px;padding:10px 48px 12px 12px;line-height:1.45;word-break:break-word;box-shadow:0 1px 0 rgba(0,0,0,.35);position:relative;overflow:hidden}
.msg-box:has(.audio-bubble){padding-right:12px}
.item.eu .msg-box{background:var(--card-2);border-color:var(--stroke-2)}
.msg-title{font:800 12px/1 Inter,system-ui,sans-serif;color:var(--muted);margin-bottom:6px;margin-right:34px;display:flex;align-items:baseline;gap:8px;min-width:0}
.msg-title::after{content:"";flex:1 1 auto}
.msg-text{white-space:pre-wrap}
.msg-time{margin-left:auto;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:#cbd5e1;font-size:.78rem;font-weight:700;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.2px;opacity:.95}
.msg-time::before{content:"•";margin-right:8px;opacity:.55}
.item.eu .msg-time{background:rgba(255,255,255,.14);color:#e8f5e9}

.botao-excluir-mensagem-chat-super-especifico{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(0,0,0,.45);display:grid;place-items:center;color:#e5e7eb;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25);opacity:.95;transition:transform .15s,background .2s,opacity .2s;line-height:0;padding:0}
.botao-excluir-mensagem-chat-super-especifico svg{width:18px;height:18px;display:block}
.msg-box:hover .botao-excluir-mensagem-chat-super-especifico{opacity:1}
.botao-excluir-mensagem-chat-super-especifico:hover{background:rgba(239,68,68,.28)}
.botao-excluir-mensagem-chat-super-especifico:active{transform:scale(.95)}

/* >>> alterado: grid e botão à direita <<< */
.msg-midia{
  margin:12px 0 8px 0;
  display:grid;             /* era block */
  width:100%;
  margin-bottom:0;
}
.msg-imagem,.msg-video{display:block;width:100%;max-width:100%;height:auto;border-radius:14px;background:#000}
.msg-video{background:#000}

/* ====== ÁUDIO ====== */
.audio-bubble{--h:28px;--track-h:8px;--handle:12px;display:grid;grid-template-columns:var(--h) minmax(0,1fr) max-content;grid-template-areas:"play track time";align-items:center;gap:10px;padding:4px 10px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.08);inline-size:100%;overflow:visible}
.audio-play{grid-area:play;width:var(--h);height:var(--h);border-radius:999px;display:grid;place-items:center;background:var(--primary);border:0;cursor:pointer;box-shadow:0 6px 16px rgba(0,216,98,.35);touch-action:manipulation}
.audio-play:active{transform:scale(.98)}
.audio-play .icon{width:0;height:0;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #082a16;margin-left:3px}
.audio-play.is-pause .icon{width:14px;height:14px;border:0;background:linear-gradient(#082a16,#082a16) left/5px 100% no-repeat,linear-gradient(#082a16,#082a16) right/5px 100% no-repeat;margin-left:0}
.audio-track{grid-area:track;height:var(--track-h);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.10));border:1px solid rgba(255,255,255,.20);position:relative;overflow:hidden;cursor:pointer;min-inline-size:0;width:100%}
.audio-progress{position:absolute;left:0;top:0;height:100%;inline-size:var(--p,0%);max-inline-size:100%;background:linear-gradient(90deg,var(--primary),#22e36f);border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.audio-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--handle);height:var(--handle);border-radius:999px;background:#fff;border:2px solid #0b1420;box-shadow:0 0 0 3px rgba(0,0,0,.30),0 0 12px rgba(0,216,98,.45);left:var(--p,0%);touch-action:none}
.audio-time{grid-area:time;font-weight:800;font-size:12px;color:#e5e7eb;background:rgba(255,255,255,.10);padding:4px 8px;border-radius:999px;letter-spacing:.2px;white-space:nowrap;justify-self:end;min-width:max(44px,6ch)}

/* ====== ARQUIVOS ====== */
.msg-arquivo{display:flex;align-items:center;gap:12px;padding:12px 14px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);border-radius:14px;text-decoration:none;color:var(--text);box-shadow:0 6px 16px rgba(0,0,0,.25);max-width:min(420px,80vw);transition:transform .15s,box-shadow .2s}
.msg-arquivo:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.32)}
.msg-arquivo span:first-child{font-size:22px;line-height:1}
.msg-arquivo span:last-child{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 30px)}

/* ====== PREVIEW ====== */
.preview-container{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);border-radius:18px;margin-bottom:12px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.35);transition:all .3s ease;max-width:min(560px,92vw);margin-left:auto;margin-right:auto}
.preview-container.hidden{display:none}
.preview-content{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:14px 16px}
.preview-info{min-width:0}
.preview-content img,.preview-content video{width:96px;height:72px;aspect-ratio:4/3;object-fit:cover;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.35);display:block}
.cancel-btn,#cancel-preview{position:absolute;top:8px;right:8px;width:36px;height:36px;border:1px solid rgba(0,0,0,.8);border-radius:999px;background:#111;color:#fff;display:grid;place-items:center;line-height:0;font-size:22px;font-weight:900;box-shadow:0 8px 16px rgba(0,0,0,.35);z-index:1001;transition:transform .15s ease,filter .2s ease;cursor:pointer;user-select:none}
.cancel-btn:hover,#cancel-preview:hover{filter:brightness(1.15)}
.cancel-btn:active,#cancel-preview:active{transform:scale(.96)}

/* ====== COMPOSER (fora do chat) ====== */
#composer{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:transparent;padding:12px clamp(12px,3vw,18px) max(12px,env(safe-area-inset-bottom));pointer-events:none}
#composer .preview-container{position:relative;pointer-events:auto;background:rgba(22,24,28,.96);border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 32px rgba(0,0,0,.55)}
#composer:has(.preview-container:not(.hidden))::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);z-index:-1;pointer-events:none}
#composer .input{pointer-events:auto;display:grid;grid-template-columns:40px 40px 1fr 40px 46px;align-items:center;gap:8px;background:rgba(20,22,26,.92);border:1px solid rgba(255,255,255,.10);border-radius:28px;padding:8px 12px;margin:0 auto;max-width:min(600px,92vw);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.media-btn-input{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:transform .2s,background .2s,color .2s;flex-shrink:0;line-height:0;touch-action:manipulation}
.media-btn-input svg{width:22px;height:22px;display:block}
.media-btn-input:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateY(-1px)}
#audio-btn:hover{color:#22c55e}
#audio-btn.recording{color:#ef4444;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.35)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}

/* textarea estável (sem pular) */
#txt{min-width:0;width:100%;border:0;background:transparent;color:var(--text);font:500 16px Inter,system-ui,sans-serif;padding:12px 8px;min-height:20px;max-height:120px;line-height:1.35;resize:none;outline:0;overflow-y:auto;scrollbar-width:thin;border-radius:28px;clip-path:inset(0 round 28px);background-clip:padding-box;scrollbar-gutter:stable both-edges}
#txt::placeholder{opacity:.7}
#txt:placeholder-shown{text-align:left}
#txt:not(:placeholder-shown){text-align:left}
/* Firefox */
#txt{scrollbar-color:transparent transparent}
#txt:hover,#txt:focus,#txt.scrolling{scrollbar-color:rgba(255,255,255,.34) transparent}
/* WebKit */
#txt::-webkit-scrollbar{width:4px;height:4px}
#txt::-webkit-scrollbar-track{background:transparent;margin-block:10px}
#txt::-webkit-scrollbar-thumb{background:transparent;border-radius:999px}
#txt:hover::-webkit-scrollbar-thumb,#txt:focus::-webkit-scrollbar-thumb,#txt.scrolling::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4)}

#send{position:relative;width:46px;height:46px;display:grid;place-items:center;margin:0;border:0;border-radius:50%;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25);cursor:pointer;transition:transform .2s,box-shadow .2s;justify-self:end;touch-action:manipulation}
#send:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.3)}
#send:active{transform:scale(.98)}
#send svg{width:20px;height:20px;display:block;stroke:#0b1420}
#send.is-loading svg{opacity:0}
#send.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid #0b1420;border-right-color:transparent;animation:spin .8s linear infinite}
#send:disabled{cursor:not-allowed;opacity:.95}
@keyframes spin{to{transform:rotate(360deg)}}

/* Centraliza o indicador vermelho quando gravando */
.input:has(#audio-btn.recording) #send{position:relative;display:grid;place-items:center}
.input:has(#audio-btn.recording) #send svg{display:none}
.input:has(#audio-btn.recording) #send::after{content:"";width:16px;height:16px;border-radius:4px;background:#ef4444;box-shadow:0 0 0 2px rgba(0,0,0,.06)}

@media (prefers-contrast: more){.audio-track{background:rgba(255,255,255,.28)}.audio-time{background:rgba(255,255,255,.18)}}
.audio-play:focus-visible,.audio-track:focus-visible{outline:2px solid color-mix(in oklab,var(--primary) 70%,white);outline-offset:2px;border-radius:14px}

/* ====== BREAKPOINTS ====== */
@media (min-width:768px) and (max-width:1023px){
  .wrap{max-width:720px;margin:20px auto;border-radius:20px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.3)}
  .msgs{padding:20px;gap:16px}
  .msg-avatar{width:40px;height:40px;flex:0 0 40px}
  .peer-avatar{width:42px;height:42px}
  .preview-content img,.preview-content video{width:110px;height:82px}
}

@media (min-width:1024px){
  body{background:transparent;position:relative;display:flex;align-items:center;justify-content:center;min-height:100vh;padding-block:var(--page-pad)}
  .wrap{width:50%;max-width:none;height:calc(var(--vh) - (var(--page-pad)*2));min-height:0;margin:0;border:1px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 20px 25px -5px rgba(0,0,0,.3),0 10px 10px -5px rgba(0,0,0,.2),0 0 100px rgba(0,216,98,.05);background:linear-gradient(135deg,rgba(28,30,34,.96) 0,rgba(24,26,30,.96) 100%);overflow:hidden;position:relative}
  .wrap::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1px;background:linear-gradient(135deg,rgba(0,216,98,.2),transparent 40%,transparent 60%,rgba(147,51,234,.2));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.5}
  .header{background:linear-gradient(180deg,rgba(26,28,32,.96) 0,rgba(26,28,32,.88) 100%);border-top-left-radius:24px;border-top-right-radius:24px;border-bottom:1px solid rgba(255,255,255,.06);padding:16px 24px}
  .msgs{padding:24px;gap:20px;scroll-padding-bottom:24px;background:radial-gradient(ellipse at center top,rgba(0,216,98,.02) 0,transparent 50%)}
  .msgs::-webkit-scrollbar{width:10px}
  .msgs::-webkit-scrollbar-track{background:rgba(255,255,255,.02);border-radius:10px}
  .msgs::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,255,255,.15) 0,rgba(255,255,255,.08) 100%);border-radius:10px;border:1px solid rgba(255,255,255,.05)}
  .msgs::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.1) 100%)}
  .msg-avatar{width:44px;height:44px;flex:0 0 44px;border:1px solid rgba(255,255,255,.08);box-shadow:0 2px 8px rgba(0,0,0,.2)}
  .msg-box{max-width:100%;border-radius:20px;padding:14px 56px 16px 16px;font-size:15px;line-height:1.5;box-shadow:0 1px 3px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.06);transition:transform .2s,box-shadow .2s;overflow:visible}
  .msg-box:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.2)}
  .item.eu .msg-box{background:linear-gradient(135deg,rgba(0,216,98,.08) 0,rgba(0,216,98,.04) 100%);border-color:rgba(0,216,98,.2)}
  #composer{padding:20px 24px max(20px,env(safe-area-inset-bottom))}
  #composer .input{max-width:50vw}
}

@media (min-width:1440px){
  .wrap{width:50%}
  .msgs{padding-bottom:92px;gap:24px}
  .msg-box{font-size:16px;padding:16px 60px 18px 18px}
  #composer .input{max-width:50vw}
}

@media (max-width:480px){
  .msgs{padding-bottom:110px}
  .item{gap:6px}
  .msg-avatar{width:32px;height:32px;flex:0 0 32px}
  .msg-box{max-width:96%;padding:10px 12px}
  #composer .input{grid-template-columns:32px 32px 1fr 32px 40px;gap:6px;padding:4px 6px}
  .media-btn-input{width:32px;height:32px}
  #send{width:40px;height:40px}
  .preview-container{max-width:95vw}
  .preview-content{grid-template-columns:1fr;gap:12px;text-align:center}
  .preview-content img,.preview-content video{width:88px;height:66px}
  .botao-excluir-mensagem-chat-super-especifico{top:12px;right:6px;width:26px;height:26px;aspect-ratio:1/1;padding:0}
  .botao-excluir-mensagem-chat-super-especifico svg{width:14px;height:14px}
  .msg-title{margin-right:38px}
  .audio-bubble{--h:24px;--track-h:8px;--handle:10px;gap:6px;grid-template-columns:var(--h) 1fr max-content;grid-template-areas:"play track time";align-items:center;inline-size:100%}
  .audio-track{min-inline-size:0;width:100%;height:var(--track-h)}
  .audio-time{justify-self:end;margin-top:0;font-size:11px;padding:2px 6px}
  .audio-play .icon{border-width:7px 0 7px 12px;margin-left:2px}
  .audio-play.is-pause .icon{width:12px;height:12px;background:linear-gradient(#082a16,#082a16) left/4px 100% no-repeat,linear-gradient(#082a16,#082a16) right/4px 100% no-repeat}
}

@media (max-width:360px){
  .audio-bubble{--h:22px;--track-h:8px;--handle:10px;gap:6px}
  .audio-time{font-size:10px;padding:2px 6px}
  .botao-excluir-mensagem-chat-super-especifico{top:10px;right:6px;width:24px;height:24px}
  .botao-excluir-mensagem-chat-super-especifico svg{width:13px;height:13px}
  .msg-title{margin-right:36px}
}

/* ====== Largura das bolhas de áudio ====== */
@media (min-width:1024px){
  .msg-box:has(.audio-bubble){inline-size:70%;max-width:none;flex:0 0 70%;overflow:visible}
}
@media (max-width:1023px){
  .msg-box:has(.audio-bubble){inline-size:80%;max-width:80%;flex:0 0 80%;overflow:visible}
  .audio-bubble{inline-size:100%}
}

/* Garantir clique no preview e no X mesmo com #composer fixo */
#composer .preview-container,#composer .preview-container *{pointer-events:auto}

/* ====== Download ====== */
.msg-download{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; margin-top:26px!important ; font-size:13px;
  color:#cfe6ff; text-decoration:none;
  border:1px solid #2a2f3a; border-radius:8px;
  transition:background .15s ease, border-color .15s ease, opacity .15s ease;
  justify-self:end;                 /* <<< encosta na direita */
}
.msg-download:hover{ background:#1a2230; border-color:#354054; }
.msg-download svg{ display:block; }

/* ====== LINKS CLICÁVEIS NO CHAT ====== */
.chat-link {
  color: #00d862;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 216, 98, 0.15);
  border: 1px solid rgba(0, 216, 98, 0.3);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  word-break: break-all;
}

.chat-link::before {
  content: "🔗";
  font-size: 12px;
  opacity: 0.8;
}

.chat-link:hover {
  background: rgba(0, 216, 98, 0.25);
  border-color: rgba(0, 216, 98, 0.6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 216, 98, 0.3);
}

.chat-link:active {
  transform: translateY(0);
}