:root {
  color-scheme: dark;
  --ink: #eef5f1;
  --muted: #91a39d;
  --muted-2: #6d8179;
  --bg: #0b1514;
  --panel: #101c1a;
  --panel-raised: #142320;
  --panel-soft: #182925;
  --line: rgba(221, 242, 232, .08);
  --line-strong: rgba(221, 242, 232, .14);
  --mint: #7ce2bf;
  --mint-strong: #39c99a;
  --mint-dark: #163c31;
  --incoming: #1a2925;
  --outgoing: #183e32;
  --danger: #ff8b8b;
  --shadow: 0 24px 80px rgba(0, 0, 0, .28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { min-height: 100vh; min-height: 100svh; background: var(--bg); color: var(--ink); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
[hidden] { display: none !important; }
::selection { background: rgba(124, 226, 191, .28); color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Entrada */
.auth-shell { display: grid; grid-template-columns: minmax(350px, 1.04fr) minmax(400px, .96fr); min-height: 100vh; min-height: 100svh; background: #0d1816; }
.auth-story { position: relative; display: flex; min-height: 100%; flex-direction: column; overflow: hidden; padding: clamp(34px, 5vw, 76px) clamp(32px, 6vw, 100px); isolation: isolate; background: radial-gradient(ellipse at 74% 81%, rgba(47, 170, 128, .2), transparent 34%), radial-gradient(ellipse at 12% 28%, rgba(101, 206, 169, .08), transparent 40%), #0b1514; }
.auth-story::before, .auth-story::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
.auth-story::before { inset: 0; opacity: .18; background-image: linear-gradient(rgba(219, 255, 239, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(219, 255, 239, .04) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 77%, transparent); }
.auth-story::after { width: 470px; height: 470px; right: -190px; bottom: -250px; border: 1px solid rgba(124, 226, 191, .12); border-radius: 50%; box-shadow: 0 0 0 38px rgba(124, 226, 191, .025), 0 0 0 80px rgba(124, 226, 191, .02); }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; color: #f0f9f4; font-size: 16px; font-weight: 730; letter-spacing: -.055em; white-space: nowrap; }
.brand-lockup--large { font-size: 19px; }
.brand-mark { display: inline-grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; color: var(--mint); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-lockup--large .brand-mark { width: 39px; height: 39px; }
.brand-word-accent { color: var(--mint); }
.story-copy { max-width: 600px; margin-top: clamp(55px, 9vh, 112px); }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--mint); font-size: 10px; font-weight: 760; letter-spacing: .17em; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 15px rgba(124, 226, 191, .65); }
.story-copy h1 { margin: 20px 0 17px; color: #f2f7f4; font-size: clamp(42px, 5.2vw, 70px); font-weight: 540; letter-spacing: -.067em; line-height: .99; }
.story-copy h1 em { color: var(--mint); font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.055em; }
.story-description { max-width: 430px; margin: 0; color: #a4b5ad; font-size: 15px; line-height: 1.8; }
.story-visual { position: relative; width: min(100%, 455px); min-height: 230px; margin: auto auto 0; }
.visual-glow { position: absolute; width: 290px; height: 190px; left: 18%; top: 12%; border-radius: 50%; background: rgba(38, 159, 117, .2); filter: blur(70px); }
.visual-card { position: absolute; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; width: min(84%, 340px); padding: 15px 16px; border: 1px solid rgba(213, 245, 229, .11); border-radius: 16px; background: linear-gradient(145deg, rgba(26, 48, 41, .94), rgba(17, 34, 29, .92)); box-shadow: 0 18px 50px rgba(0, 0, 0, .22); backdrop-filter: blur(18px); }
.visual-card--back { top: 24px; left: 11%; transform: rotate(-4deg); opacity: .58; }
.visual-card--front { z-index: 1; top: 84px; left: 20%; transform: rotate(2deg); }
.visual-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; color: #16342a; font-size: 13px; font-weight: 800; }
.visual-avatar--peach { background: #f1b8a1; }
.visual-avatar--mint { background: #92dfbb; }
.visual-lines { display: flex; flex-direction: column; gap: 6px; }
.visual-lines i { display: block; width: 85px; height: 6px; border-radius: 9px; background: rgba(229, 245, 236, .3); }
.visual-lines i + i { width: 52px; background: rgba(229, 245, 236, .13); }
.visual-time { color: #869a90; font-size: 9px; }
.visual-bubble { grid-column: 2 / 4; justify-self: start; margin-top: 1px; padding: 8px 12px; border-radius: 3px 12px 12px 12px; background: rgba(124, 226, 191, .13); color: #c5ead7; font-size: 11px; }
.visual-check { justify-self: end; color: var(--mint); font-size: 11px; }
.visual-note { position: absolute; z-index: 2; right: 0; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 11px 15px; border: 1px solid rgba(207, 244, 224, .13); border-radius: 12px; background: rgba(17, 35, 29, .78); color: #bfd1c7; font-size: 10px; line-height: 1.45; box-shadow: 0 10px 32px rgba(0, 0, 0, .22); }
.note-spark { color: var(--mint); font-size: 18px; }
.story-footnote { margin: 28px 0 0; color: #667c72; font-size: 11px; letter-spacing: .05em; }
.auth-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px clamp(28px, 7vw, 100px); background: linear-gradient(135deg, #101b19, #111d1b 58%, #0d1816); }
.auth-card { width: min(100%, 390px); }
.auth-mark { display: grid; width: 46px; height: 46px; margin-bottom: 27px; place-items: center; border: 1px solid rgba(124, 226, 191, .2); border-radius: 15px; background: rgba(124, 226, 191, .08); color: var(--mint); }
.auth-mark svg { width: 29px; height: 29px; }
.auth-eyebrow { margin-bottom: 12px; font-size: 9px; }
.auth-card h2 { margin: 0; font-size: clamp(25px, 2.7vw, 31px); font-weight: 590; letter-spacing: -.045em; line-height: 1.16; }
.auth-subtitle { margin: 11px 0 29px; color: var(--muted); font-size: 13px; line-height: 1.6; }
#auth-form { display: flex; flex-direction: column; }
#auth-form label, .modal-label { margin: 0 0 8px; color: #d2ded8; font-size: 11px; font-weight: 650; }
.field-wrap { position: relative; margin-bottom: 19px; }
.field-wrap input, .modal-input { width: 100%; min-height: 49px; border: 1px solid var(--line-strong); border-radius: 11px; background: rgba(5, 13, 12, .3); color: var(--ink); font-size: 13px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.field-wrap input { padding: 0 14px 0 43px; }
.field-wrap input::placeholder, .modal-input::placeholder, #msg-input::placeholder { color: #687b72; }
.field-wrap input:focus, .modal-input:focus, #msg-input:focus { border-color: rgba(124, 226, 191, .58); background: rgba(7, 17, 15, .64); box-shadow: 0 0 0 3px rgba(124, 226, 191, .08); outline: none; }
.field-icon { position: absolute; top: 50%; left: 14px; width: 17px; height: 17px; transform: translateY(-50%); stroke: #73877d; stroke-width: 1.6; pointer-events: none; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 11px; padding: 0 17px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 720; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.button:active { transform: translateY(1px); }
.button--primary { background: var(--mint); color: #0a2119; box-shadow: 0 8px 24px rgba(61, 190, 144, .13); }
.button--primary:hover { background: #97ebcb; box-shadow: 0 10px 28px rgba(61, 190, 144, .2); }
.button--secondary { border-color: var(--line-strong); background: rgba(255, 255, 255, .018); color: #d3dfd8; }
.button--secondary:hover { border-color: rgba(124, 226, 191, .32); background: rgba(124, 226, 191, .055); }
.button--wide { width: 100%; }
.button svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 17px 0; color: #6f8379; font-size: 10px; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.auth-helper { margin: 19px 0 0; color: #71847a; font-size: 10px; line-height: 1.65; text-align: center; }
.auth-message { margin: -4px 0 14px; color: var(--danger); font-size: 11px; line-height: 1.5; }
.auth-message--success { color: var(--mint); }
.auth-copyright { margin: auto 0 0; padding-top: 35px; color: #5f736a; font-size: 9px; font-weight: 680; letter-spacing: .15em; text-align: center; }
.auth-copyright span { padding: 0 5px; color: var(--mint-strong); }

/* Aplicativo */
.messenger { display: flex; width: 100%; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--bg); }
.sidebar { position: relative; z-index: 2; display: flex; width: 348px; min-width: 300px; flex: 0 0 348px; flex-direction: column; border-right: 1px solid var(--line); background: linear-gradient(180deg, #101b19 0%, #0e1917 100%); }
.sidebar-header { display: flex; height: 74px; flex: 0 0 74px; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--line); }
.sidebar-actions { display: flex; gap: 7px; }
.icon-button { display: inline-grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #91a49b; cursor: pointer; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.icon-button:hover { border-color: var(--line); background: rgba(220, 246, 232, .055); color: var(--mint); }
.icon-button svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.profile-strip { display: flex; min-height: 76px; align-items: center; gap: 11px; margin: 15px 15px 2px; padding: 12px; border: 1px solid rgba(224, 247, 233, .055); border-radius: 13px; background: rgba(255, 255, 255, .022); }
.avatar { position: relative; display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid rgba(237, 255, 245, .1); border-radius: 13px; background: linear-gradient(145deg, #87d9b7, #4a9f7c); color: #0c271e; font-size: 12px; font-weight: 800; letter-spacing: -.04em; }
.avatar--profile { width: 39px; height: 39px; border-radius: 12px; }
.profile-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.profile-copy strong { overflow: hidden; color: #e0ebe4; font-size: 12px; font-weight: 660; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy span { display: flex; align-items: center; gap: 6px; color: #7f9388; font-size: 10px; }
.presence-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #65d9a9; box-shadow: 0 0 9px rgba(101, 217, 169, .38); }
.profile-status { padding: 4px 7px; border: 1px solid rgba(105, 216, 166, .15); border-radius: 6px; color: #78cba5; font-size: 8px; font-weight: 760; letter-spacing: .09em; }
.profile-edit-button { padding: 5px 7px; border: 1px solid rgba(124, 226, 191, .16); border-radius: 7px; background: rgba(124, 226, 191, .06); color: var(--mint); cursor: pointer; font-size: 9px; }
.profile-edit-button:hover { background: rgba(124, 226, 191, .12); }
.status-strip { margin: 12px 15px 0; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.status-strip-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 9px; }
.status-strip-heading h2 { margin: 0; color: #9aaba3; font-size: 10px; font-weight: 710; letter-spacing: .1em; text-transform: uppercase; }
.status-add { padding: 4px 7px; border: 1px solid rgba(124, 226, 191, .16); border-radius: 6px; background: rgba(124, 226, 191, .06); color: var(--mint); cursor: pointer; font-size: 9px; }
.list-heading-actions { display: flex; align-items: center; gap: 7px; }
.direct-results { max-height: 230px; margin-top: 10px; }
.direct-result { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 7px 9px; border: 0; border-radius: 8px; background: transparent; color: #d7e2db; cursor: pointer; text-align: left; }
.direct-result:hover { background: rgba(222, 244, 231, .045); }
.status-list { display: flex; gap: 10px; overflow-x: auto; padding: 1px 3px 3px; scrollbar-width: none; }
.status-list::-webkit-scrollbar { display: none; }
.status-card { display: flex; width: 55px; flex: 0 0 55px; flex-direction: column; align-items: center; gap: 5px; border: 0; background: transparent; color: #9aaba3; cursor: pointer; font: inherit; font-size: 8px; }
.status-card > span:last-child { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-card small { width: 100%; overflow: hidden; color: #71867b; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.status-ring { display: grid; width: 47px; height: 47px; padding: 2px; place-items: center; border: 2px solid #566c61; border-radius: 50%; background: #1a2d26; }
.status-card.has-status .status-ring, .status-card:not(.status-card--mine) .status-ring { border-color: var(--mint); }
.status-ring .avatar { width: 100%; height: 100%; border: 0; border-radius: 50%; font-size: 11px; }
.avatar.has-image { background: #19372d; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.search-wrap { position: relative; display: flex; height: 42px; align-items: center; gap: 10px; margin: 15px 15px 18px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: #0c1715; transition: border-color .16s ease, box-shadow .16s ease; }
.search-wrap:focus-within { border-color: rgba(124, 226, 191, .3); box-shadow: 0 0 0 3px rgba(124, 226, 191, .045); }
.search-wrap > svg { width: 15px; height: 15px; flex: 0 0 auto; stroke: #82958b; stroke-width: 1.6; stroke-linecap: round; }
.search-wrap input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 11px; outline: 0; }
.search-wrap input::placeholder { color: #71847b; }
.search-wrap kbd { display: grid; width: 19px; height: 20px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(228, 248, 236, .1); border-radius: 5px; color: #82948b; font-family: inherit; font-size: 10px; }
.list-heading { display: flex; align-items: center; gap: 8px; padding: 0 21px 9px; }
.list-heading h2 { margin: 0; color: #9aaba3; font-size: 10px; font-weight: 710; letter-spacing: .1em; text-transform: uppercase; }
.count-pill { display: grid; min-width: 18px; height: 18px; padding: 0 5px; place-items: center; border-radius: 6px; background: rgba(124, 226, 191, .1); color: var(--mint); font-size: 9px; font-weight: 750; }
.chat-list { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow-y: auto; padding: 0 9px 10px; scrollbar-color: rgba(205, 234, 217, .16) transparent; scrollbar-width: thin; }
.contact-item { display: flex; width: 100%; min-height: 67px; align-items: center; gap: 11px; padding: 10px 11px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: inherit; cursor: pointer; text-align: left; transition: background .16s ease, border-color .16s ease; }
.contact-item:hover { background: rgba(224, 244, 233, .045); }
.contact-item.is-active { border-color: rgba(124, 226, 191, .12); background: linear-gradient(100deg, rgba(83, 187, 145, .105), rgba(83, 187, 145, .035)); }
.contact-avatar { width: 42px; height: 42px; border-radius: 13px; }
.contact-avatar.is-group { border-color: rgba(194, 170, 255, .14); background: linear-gradient(145deg, #7162a5, #473a6f); color: #f1eaff; font-size: 16px; }
.contact-avatar.is-online::after { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border: 2px solid #101b19; border-radius: 50%; background: #6de1aa; content: ""; }
.contact-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 5px; }
.contact-copy strong { overflow: hidden; color: #dce7e0; font-size: 12px; font-weight: 630; text-overflow: ellipsis; white-space: nowrap; }
.contact-copy span { overflow: hidden; color: #788c82; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.contact-preview { overflow: hidden; color: #8a9e94; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.contact-status { flex: 0 0 auto; color: #687c72; font-size: 9px; }
.unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #39c99a; color: #0a2119; font-size: 9px; font-weight: 750; line-height: 1; margin-left: 6px; flex-shrink: 0; }
.contact-status.is-online { color: #6fd8a6; }
.chat-list-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 20px; color: #75877e; text-align: center; }
.chat-list-empty strong { color: #b7c6bd; font-size: 11px; font-weight: 600; }
.chat-list-empty span:last-child { font-size: 10px; }
.empty-search-icon { display: grid; width: 33px; height: 33px; margin-bottom: 4px; place-items: center; border-radius: 10px; background: rgba(220, 242, 229, .05); }
.empty-search-icon svg { width: 16px; height: 16px; stroke: #91a89b; stroke-width: 1.6; stroke-linecap: round; }
.sidebar-footer { display: flex; min-height: 51px; align-items: center; gap: 9px; padding: 0 19px; border-top: 1px solid var(--line); color: #6f8379; font-size: 9px; }
.footer-orb { width: 7px; height: 7px; border-radius: 50%; background: #5caa84; box-shadow: 0 0 8px rgba(92, 170, 132, .28); }
.footer-version { margin-left: auto; color: #52675e; font-size: 9px; }

.chat-area { position: relative; display: flex; min-width: 0; flex: 1; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse at 50% 52%, rgba(29, 71, 57, .11), transparent 45%), #0c1715; }
.chat-area::before { position: absolute; z-index: 0; inset: 0; background-image: radial-gradient(rgba(165, 223, 190, .065) .8px, transparent .8px); background-size: 26px 26px; content: ""; opacity: .22; pointer-events: none; mask-image: radial-gradient(ellipse at center, #000 0%, transparent 76%); }
.welcome-state { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 32px; text-align: center; }
.welcome-art { position: relative; display: grid; width: 220px; height: 186px; margin-bottom: 24px; place-items: center; }
.welcome-orbit { position: absolute; border: 1px solid rgba(124, 226, 191, .12); border-radius: 50%; transform: rotate(-24deg); }
.welcome-orbit--one { width: 190px; height: 119px; }
.welcome-orbit--two { width: 145px; height: 185px; transform: rotate(35deg); }
.welcome-bubble { position: relative; z-index: 1; display: grid; width: 100px; height: 100px; place-items: center; border: 1px solid rgba(152, 234, 196, .2); border-radius: 32px; background: linear-gradient(145deg, rgba(60, 161, 116, .28), rgba(34, 95, 70, .13)); color: #87e1b3; box-shadow: 0 20px 55px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .08); transform: rotate(-8deg); }
.welcome-bubble svg { width: 70px; height: 70px; }
.welcome-spark { position: absolute; z-index: 2; color: var(--mint); }
.welcome-spark--a { top: 15px; right: 35px; font-size: 17px; }
.welcome-spark--b { bottom: 20px; left: 25px; color: #9c86d8; font-size: 15px; }
.welcome-mini { position: absolute; width: 24px; height: 24px; border: 1px solid rgba(124, 226, 191, .18); border-radius: 8px; background: rgba(124, 226, 191, .07); transform: rotate(18deg); }
.welcome-mini--a { top: 31px; left: 18px; }
.welcome-mini--b { right: 20px; bottom: 24px; width: 17px; height: 17px; border-radius: 6px; }
.welcome-state > .eyebrow { margin-bottom: 12px; font-size: 9px; }
.welcome-state h1 { margin: 0; color: #e5eee8; font-size: clamp(30px, 3.5vw, 43px); font-weight: 530; letter-spacing: -.06em; line-height: 1.05; }
.welcome-description { max-width: 330px; margin: 15px 0 22px; color: #81958b; font-size: 12px; line-height: 1.7; }
.welcome-hint { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(222, 244, 231, .07); border-radius: 8px; background: rgba(222, 244, 231, .025); color: #82948a; font-size: 10px; }
.hint-icon { color: var(--mint); font-size: 13px; }
.chat-header { position: relative; z-index: 1; display: flex; min-height: 75px; flex: 0 0 75px; align-items: center; gap: 12px; padding: 0 27px; border-bottom: 1px solid var(--line); background: rgba(16, 28, 25, .94); backdrop-filter: blur(16px); }
.avatar--chat { width: 41px; height: 41px; border-radius: 13px; }
.chat-header-info { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.chat-header-info h2 { margin: 0; color: #e5eee8; font-size: 13px; font-weight: 650; }
.chat-header-info p { display: flex; align-items: center; gap: 6px; margin: 0; color: #80938a; font-size: 10px; }
.chat-header-actions { display: flex; align-items: center; }
.secure-label { display: inline-flex; align-items: center; gap: 6px; color: #73897e; font-size: 8px; font-weight: 710; letter-spacing: .1em; }
.secure-label svg { width: 14px; height: 14px; stroke: #72bc98; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.back-button { display: none; }
.messages { position: relative; z-index: 1; display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 8px; overflow-y: auto; padding: 24px clamp(18px, 6vw, 82px) 28px; scrollbar-color: rgba(205, 234, 217, .16) transparent; scrollbar-width: thin; }
.msg { position: relative; max-width: min(72%, 510px); padding: 10px 12px 7px; border: 1px solid rgba(227, 245, 234, .045); border-radius: 4px 13px 13px 13px; color: #d9e5de; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; animation: message-enter .2s ease-out both; content-visibility: auto; contain-intrinsic-size: 0 80px; }
.msg:has(.message-image-lazy), .msg:has(.message-video-lazy) { width: min(72%, 390px); max-width: 390px; padding: 6px 7px 7px; }
@keyframes message-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.msg.in { align-self: flex-start; background: var(--incoming); }
.msg.out { align-self: flex-end; border-color: rgba(124, 226, 191, .08); border-radius: 13px 4px 13px 13px; background: linear-gradient(145deg, #1b4737, #173a2f); }
.msg-content { white-space: pre-wrap; }
.msg-content a, .media-caption a { color: var(--mint); text-decoration: underline; text-decoration-color: rgba(124, 226, 191, .55); text-underline-offset: 2px; overflow-wrap: anywhere; }
.msg-content a:hover, .media-caption a:hover { color: #b6f5da; text-decoration-color: currentColor; }
.message-link-card { display: flex; min-width: min(260px, 100%); max-width: 100%; align-items: center; gap: 10px; margin: 1px 0 3px; padding: 10px 11px; border: 1px solid rgba(124, 226, 191, .2); border-radius: 10px; background: rgba(5, 18, 14, .28); color: #dceee3 !important; text-decoration: none !important; }
.message-link-card:hover { border-color: rgba(124, 226, 191, .5); background: rgba(124, 226, 191, .09); }
.message-link-card-icon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 8px; background: rgba(124, 226, 191, .14); color: var(--mint); font-size: 17px; }
.message-link-card-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.message-link-card-copy strong { overflow: hidden; color: #e9f7ee; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.message-link-card-copy small { overflow: hidden; color: #94aa9f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.message-sticker { display: block !important; width: 150px; height: 150px; margin: 0 !important; border-radius: 0 !important; object-fit: contain !important; }
.message-video { display: block; width: min(320px, 100%); max-height: 360px; border-radius: 10px; background: #06100d; }
.msg .sender-name { margin-bottom: 4px; color: var(--mint); font-size: 10px; font-weight: 720; }
.msg img { display: block; max-width: min(100%, 320px); max-height: 280px; margin-top: 4px; border-radius: 9px; object-fit: contain; }
.msg:has(.message-image-lazy) .message-image-lazy, .msg:has(.message-video-lazy) .message-video-lazy { width: 100%; max-width: 100%; height: auto; max-height: 360px; margin: 0 auto; border-radius: 9px; object-fit: contain; background: #07100e; }
.msg audio { display: block; width: min(270px, 100%); max-width: 100%; margin-top: 5px; }
.voice-player { display: flex; min-width: 220px; align-items: center; gap: 9px; padding: 2px 0; }
.voice-play { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; background: var(--mint); color: #0b2119; cursor: pointer; }
.voice-play svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.voice-pause-icon { display: none; }
.voice-player.is-playing .voice-play-icon { display: none; }
.voice-player.is-playing .voice-pause-icon { display: block; }
.voice-track { min-width: 90px; flex: 1; }
.voice-track input { display: block; width: 100%; height: 5px; accent-color: var(--mint); cursor: pointer; }
.voice-time { min-width: 31px; color: rgba(218, 235, 224, .7); font-size: 9px; text-align: right; }
.voice-player audio { display: none; }
.msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 5px; color: rgba(218, 235, 224, .58); font-size: 9px; }
.msg-receipt { color: #8ca097; font-size: 11px; letter-spacing: -3px; }
.msg-receipt.is-read { color: #75d6b0; }
.delete-btn { position: absolute; top: 4px; right: 4px; display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(227, 245, 234, .09); border-radius: 8px; background: rgba(8, 19, 16, .86); color: #b7c7be; cursor: pointer; opacity: 0; transition: opacity .16s ease, color .16s ease; }
.msg:hover .delete-btn, .delete-btn:focus-visible { opacity: 1; }
.delete-btn:hover { color: var(--danger); }
.msg-deleted { color: #82948a; font-style: italic; }
.skeleton-msg { pointer-events: none; }
.skeleton-bubble { padding: 11px 13px 8px; border: 1px solid rgba(227, 245, 234, .045); border-radius: 4px 13px 13px 13px; background: var(--incoming); }
.skeleton-msg.out .skeleton-bubble { border-color: rgba(124, 226, 191, .08); border-radius: 13px 4px 13px 13px; background: linear-gradient(145deg, #1b4737, #173a2f); }
.skeleton-line { height: 12px; border-radius: 6px; background: rgba(221, 242, 232, .06); margin-bottom: 6px; animation: skeleton-pulse 1.4s ease-in-out infinite; }
.skeleton-line--short { width: 60%; }
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.composer { position: relative; z-index: 1; display: flex; min-height: 78px; flex: 0 0 auto; align-items: center; gap: 8px; padding: 12px clamp(14px, 4vw, 46px) max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(15, 26, 23, .96); }
.composer-tool { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #82968c; cursor: pointer; transition: color .16s ease, background .16s ease; }
.composer-tool:hover { background: rgba(124, 226, 191, .07); color: var(--mint); }
.composer-tool { font-size: 22px; line-height: 1; }
.composer-tool svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.stop-icon { display: none; }
.composer-tool.is-recording { color: var(--danger); }
.composer-tool.is-recording .mic-icon { display: none; }
.composer-tool.is-recording .stop-icon { display: block; }
#msg-input { width: 100%; min-width: 0; height: 43px; flex: 1; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: #0b1614; color: var(--ink); font-size: 12px; outline: none; transition: border-color .16s ease, box-shadow .16s ease; }
.send-button { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 12px; background: var(--mint); color: #0b2119; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.send-button:hover { transform: translateY(-1px); background: #9aebcc; box-shadow: 0 7px 20px rgba(54, 192, 143, .17); }
.send-button svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.recording-indicator { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; color: #ff9999; font-size: 10px; white-space: nowrap; }
.recording-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #ff7373; animation: pulse 1.2s ease-in-out infinite; }
.picker-panel { position: absolute; right: clamp(14px, 4vw, 46px); bottom: 73px; z-index: 5; width: min(360px, calc(100vw - 28px)); padding: 12px; border: 1px solid var(--line-strong); border-radius: 15px; background: #14231f; box-shadow: 0 18px 45px rgba(0, 0, 0, .38); }
.picker-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; color: #d9e8df; font-size: 12px; }
.picker-heading button { width: 25px; height: 25px; border: 0; border-radius: 7px; background: transparent; color: #90a69a; cursor: pointer; font-size: 18px; }
.picker-heading button:hover { background: rgba(124, 226, 191, .08); color: var(--mint); }
.emoji-grid { display: grid; max-height: 250px; grid-template-columns: repeat(9, 1fr); gap: 3px; overflow-y: auto; }
.emoji-choice { min-width: 0; padding: 5px 2px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: 24px; line-height: 1.2; }
.emoji-choice:hover { background: rgba(124, 226, 191, .13); transform: scale(1.08); }
.sticker-grid { display: grid; max-height: 290px; grid-template-columns: repeat(4, 1fr); gap: 8px; overflow-y: auto; }
.sticker-create { width: 100%; margin-bottom: 10px; padding: 9px 10px; border: 1px dashed rgba(124, 226, 191, .35); border-radius: 9px; background: rgba(124, 226, 191, .06); color: var(--mint); cursor: pointer; font-size: 11px; font-weight: 700; }
.sticker-create:hover { background: rgba(124, 226, 191, .12); }
.sticker-choice { padding: 4px; border: 1px solid transparent; border-radius: 11px; background: rgba(255, 255, 255, .03); cursor: pointer; }
.sticker-choice:hover { border-color: rgba(124, 226, 191, .4); background: rgba(124, 226, 191, .1); }
.sticker-choice img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
@keyframes pulse { 50% { opacity: .35; box-shadow: 0 0 0 5px rgba(255, 115, 115, .1); } }
.connection-status { position: absolute; z-index: 5; top: 12px; left: 50%; max-width: calc(100% - 24px); padding: 9px 13px; border: 1px solid rgba(255, 139, 139, .22); border-radius: 9px; background: rgba(51, 26, 25, .94); color: #ffb5ae; font-size: 10px; text-align: center; transform: translateX(-50%); box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }

/* Janela de grupo */
.modal-overlay { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 20px; background: rgba(3, 9, 8, .76); backdrop-filter: blur(7px); animation: overlay-in .18s ease-out both; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.modal { width: min(100%, 430px); max-height: min(680px, calc(100svh - 40px)); overflow-y: auto; padding: 25px; border: 1px solid rgba(218, 244, 227, .13); border-radius: 18px; background: linear-gradient(150deg, #172622, #111d1a 65%); box-shadow: var(--shadow); }
.modal-heading { position: relative; margin-bottom: 24px; }
.modal-icon { display: grid; width: 39px; height: 39px; margin-bottom: 18px; place-items: center; border: 1px solid rgba(124, 226, 191, .15); border-radius: 12px; background: rgba(124, 226, 191, .08); color: var(--mint); }
.modal-icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.modal-close { position: absolute; top: 0; right: 0; }
.modal-heading .eyebrow { margin-bottom: 8px; font-size: 8px; }
.modal-heading h2 { margin: 0; color: #e9f2ec; font-size: 23px; font-weight: 600; letter-spacing: -.045em; }
.modal-heading > p:last-child { margin: 8px 0 0; color: #879a90; font-size: 11px; line-height: 1.55; }
.modal-input { min-height: 44px; margin-bottom: 20px; padding: 0 12px; font-size: 12px; }
.modal-textarea { min-height: 72px; padding-top: 11px; padding-bottom: 11px; resize: vertical; line-height: 1.45; }
.modal-label span { color: #81958b; font-size: 9px; font-weight: 400; }
.member-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; color: #ccd9d1; font-size: 10px; font-weight: 650; }
.member-heading span:last-child { color: #81958b; font-size: 9px; font-weight: 500; }
.member-list { display: flex; max-height: 188px; flex-direction: column; gap: 4px; overflow-y: auto; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: rgba(5, 13, 12, .2); }
.member-search { margin: 8px 0; }
.member-option { display: flex; min-height: 43px; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 8px; color: #d7e2db; cursor: pointer; font-size: 11px; }
.member-option:hover { background: rgba(222, 244, 231, .045); }
.member-option input { width: 15px; height: 15px; accent-color: var(--mint-strong); }
.member-avatar { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; overflow: hidden; border-radius: 9px; background: rgba(124, 226, 191, .14); color: var(--mint); font-size: 9px; font-weight: 740; }
.member-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.member-option-copy { display: flex; min-width: 0; flex-direction: column; overflow: hidden; }
.member-option-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-option-copy small { margin-top: 2px; color: #82968b; font-size: 9px; }
.member-empty { padding: 14px 8px; color: #83958b; font-size: 10px; text-align: center; }
.modal--profile { max-width: 460px; }
.avatar--large { width: 82px; height: 82px; border-radius: 25px; font-size: 20px; }
.profile-preview { display: flex; align-items: center; gap: 16px; margin: 5px 0 20px; color: #e3eee7; font-size: 14px; }
.profile-hint { margin: -12px 0 0; color: #81958b; font-size: 9px; line-height: 1.5; }
.group-profile-row { display: flex; align-items: center; gap: 10px; margin: 5px 0 20px; }
.group-profile-row > div:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.group-profile-row strong { color: #e3eee7; font-size: 11px; }
.group-profile-row span { color: #81958b; font-size: 9px; line-height: 1.4; }
.group-profile-row .button { min-height: 34px; padding: 0 8px; font-size: 9px; }
.inline-edit { display: flex; align-items: center; gap: 8px; }
.inline-edit .modal-input { margin-bottom: 0; }
.inline-edit .button { min-height: 44px; flex: 0 0 auto; }
.group-add-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.group-add-row .modal-input { min-width: 0; flex: 1; margin: 0; padding: 0 10px; }
.group-add-row .button { flex: 0 0 auto; min-height: 44px; }
.member-list--info { max-height: 230px; }
.group-member-row { display: flex; min-height: 43px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.group-member-row:hover { background: rgba(222, 244, 231, .04); }
.group-member-copy { min-width: 0; flex: 1; overflow: hidden; color: #d7e2db; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.group-member-copy { padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.group-member-copy:hover { color: var(--mint); }
.admin-badge { width: 24px; height: 22px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(255, 196, 82, .18)); }
.member-role { color: var(--mint); font-size: 9px; }
.member-action { padding: 4px 6px; border: 1px solid rgba(124, 226, 191, .14); border-radius: 6px; background: transparent; color: var(--mint); cursor: pointer; font-size: 8px; }
.member-action--danger { border-color: rgba(255, 139, 139, .16); color: var(--danger); }
.modal-error { margin: 11px 0 0; color: var(--danger); font-size: 10px; line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.modal-actions .button { min-height: 40px; font-size: 10px; }
.modal--status { max-width: 440px; }
.status-textarea { min-height: 150px; margin-bottom: 12px; }
.status-color-row { display: flex; align-items: center; justify-content: space-between; color: #9aaba3; font-size: 10px; }
.status-color-row input { width: 42px; height: 27px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 7px; background: transparent; cursor: pointer; }
.status-viewer { position: relative; display: flex; width: min(100%, 430px); min-height: min(680px, calc(100svh - 40px)); flex-direction: column; padding: 18px; border: 1px solid rgba(218, 244, 227, .13); border-radius: 20px; background: #0e1917; box-shadow: var(--shadow); }
.status-viewer-close { position: absolute; z-index: 2; top: 15px; right: 15px; color: #dcebe2; font-size: 20px; }
.status-viewer-progress { display: flex; gap: 4px; margin: 4px 36px 20px 2px; }
.status-viewer-progress i { height: 3px; flex: 1; border-radius: 3px; background: rgba(255,255,255,.18); }
.status-viewer-progress i.is-active { background: var(--mint); }
.status-viewer-progress i.is-seen { background: rgba(124, 226, 191, .62); }
.status-viewer-meta { margin: 0 10px 18px; color: #d4e3d9; font-size: 11px; }
.status-viewer-card { display: flex; min-height: 460px; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 35px; border-radius: 16px; color: white; text-align: center; box-shadow: inset 0 1px rgba(255,255,255,.12); }
.status-video { display: block; width: 100%; max-height: 62vh; border-radius: 10px; background: #06100d; }
.status-image { display: block; width: 100%; max-height: 62vh; border-radius: 10px; object-fit: contain; }
.status-caption { width: min(100%, 620px); margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, .38); color: #fff; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.msg-content { display: flex; flex-direction: column; align-items: stretch; }
.media-caption { margin: 7px 1px 0; padding: 7px 6px 2px; color: #e8f3eb; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.modal--media-caption { max-width: 470px; }
.media-caption-preview { display: flex; min-height: 80px; max-height: 270px; align-items: center; justify-content: center; margin: -4px 0 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #07100e; }
.media-caption-preview img, .media-caption-preview video { display: block; width: 100%; max-height: 260px; object-fit: contain; }
.media-caption-input { min-height: 82px; margin-bottom: 0; }
.media-trim-controls { display: flex; flex-direction: column; gap: 7px; margin: -4px 0 14px; padding: 11px; border: 1px solid rgba(255, 196, 82, .24); border-radius: 11px; background: rgba(255, 196, 82, .07); color: #f4d99a; font-size: 10px; }
.media-trim-controls span { color: #bcae88; line-height: 1.4; }
.media-trim-controls > div { display: flex; gap: 8px; }
.media-trim-controls label { display: flex; flex: 1; flex-direction: column; gap: 4px; color: #cdbd91; font-size: 9px; }
.media-trim-controls input { min-height: 34px; padding: 0 8px; border: 1px solid rgba(255, 196, 82, .2); border-radius: 7px; background: #101b17; color: #f5f5e8; }
.media-trim-controls .button { align-self: flex-start; min-height: 34px; font-size: 9px; }
.status-viewer-card p { margin: 0; font-size: clamp(20px, 5vw, 30px); font-weight: 620; line-height: 1.35; overflow-wrap: anywhere; }
.file-name { max-width: 180px; overflow: hidden; color: #81968a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.status-delete { align-self: center; margin-top: 14px; border: 0; background: transparent; color: #ff9c9c; cursor: pointer; font-size: 10px; }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: minmax(300px, .85fr) minmax(360px, 1.15fr); }
  .auth-story { padding-right: 34px; padding-left: 36px; }
  .sidebar { width: 315px; min-width: 280px; flex-basis: 315px; }
  .secure-label { font-size: 0; }
  .secure-label svg { width: 17px; height: 17px; }
}
@media (max-width: 680px) {
  .auth-shell { display: flex; min-height: 100svh; flex-direction: column; }
  .auth-story { min-height: 250px; flex: 0 0 250px; padding: 22px 24px 18px; }
  .brand-lockup--large { font-size: 16px; }
  .brand-lockup--large .brand-mark { width: 33px; height: 33px; }
  .story-copy { margin-top: 31px; }
  .story-copy h1 { margin: 13px 0 9px; font-size: 35px; }
  .story-description { max-width: 350px; font-size: 11px; line-height: 1.55; }
  .story-visual, .story-footnote { display: none; }
  .auth-panel { flex: 1; align-items: stretch; justify-content: flex-start; padding: 30px 24px 16px; }
  .auth-card { width: min(100%, 420px); margin: 0 auto; }
  .auth-mark { width: 40px; height: 40px; margin-bottom: 19px; border-radius: 13px; }
  .auth-mark svg { width: 25px; height: 25px; }
  .auth-card h2 { font-size: 25px; }
  .auth-subtitle { margin: 8px 0 22px; }
  .field-wrap { margin-bottom: 15px; }
  .auth-copyright { padding-top: 26px; }
  .messenger { position: relative; min-height: 100svh; }
  .sidebar { width: 100%; min-width: 0; flex: 1 1 100%; border-right: 0; }
  .chat-area { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; visibility: hidden; transform: translateX(100%); transition: transform .23s ease, visibility .23s; }
  .messenger.chat-open .chat-area { visibility: visible; transform: translateX(0); }
  .sidebar-header { height: 67px; flex-basis: 67px; padding: 0 18px; }
  .profile-strip { margin: 12px 14px 0; }
  .search-wrap { margin: 13px 14px 16px; }
  .list-heading { padding-left: 19px; }
  .chat-list { padding-right: 9px; padding-left: 9px; }
  .chat-header { min-height: 67px; flex-basis: 67px; gap: 9px; padding: 0 12px; }
  .back-button { display: inline-grid; width: 32px; height: 32px; }
  .avatar--chat { width: 38px; height: 38px; }
  .messages { padding: 18px 13px 22px; }
  .msg { max-width: 84%; font-size: 12px; }
  .composer { min-height: 68px; gap: 4px; padding: 9px 9px max(9px, env(safe-area-inset-bottom)); }
  .composer-tool { width: 34px; height: 36px; }
  #msg-input { height: 40px; padding: 0 10px; font-size: 12px; }
  .send-button { width: 39px; height: 39px; border-radius: 11px; }
  .recording-indicator { font-size: 0; }
  .recording-indicator i { width: 9px; height: 9px; }
  .welcome-state { padding: 24px 20px; }
  .welcome-art { width: 188px; height: 162px; margin-bottom: 18px; }
  .welcome-bubble { width: 86px; height: 86px; border-radius: 27px; }
  .welcome-bubble svg { width: 62px; height: 62px; }
  .welcome-state h1 { font-size: 34px; }
  .welcome-description { font-size: 11px; }
  .modal { padding: 21px; }
}
@media (max-width: 360px) {
  .auth-story { min-height: 226px; flex-basis: 226px; }
  .story-copy h1 { font-size: 31px; }
  .auth-panel { padding-right: 18px; padding-left: 18px; }
  .secure-label { display: none; }
  .composer { gap: 2px; }
  .composer-tool { width: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Megafone v2.8.1 — layout isolado e responsivo */
.status-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.megaphone-add { border-color: rgba(255, 201, 107, .28); background: rgba(255, 201, 107, .08); color: #ffd27d; }
.megaphone-card .megaphone-ring { border-color: #e2a944; background: linear-gradient(145deg, #6c4d1b, #302610); color: #ffd27d; font-size: 20px; }
.megaphone-card > span:last-of-type { color: #ffd27d; }
.megaphone-card small { color: #a88a58; }
.modal--megaphone { width: min(100%, 470px); max-width: 470px; }
.megaphone-image-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.megaphone-image-preview { margin-top: 12px; overflow: hidden; max-height: 180px; border: 1px solid var(--line); border-radius: 12px; background: #08110f; }
.megaphone-image-preview img { display: block; width: 100%; max-height: 180px; object-fit: contain; }
.megaphone-viewer { position: relative; display: flex; width: min(100%, 560px); max-height: calc(100svh - 40px); flex-direction: column; gap: 8px; overflow-y: auto; padding: 26px; border: 1px solid rgba(255, 210, 125, .24); border-radius: 22px; background: linear-gradient(160deg, #15251e, #0d1715); box-shadow: var(--shadow); }
.megaphone-viewer h2 { margin: 0; color: #ffe0a1; font-size: 25px; line-height: 1.15; }
.megaphone-meta { margin: 0; color: #9aaba3; font-size: 11px; }
.megaphone-views { margin: -3px 0 2px; color: #ffd27d; font-size: 10px; font-weight: 650; }
.megaphone-viewer-image { display: block; width: 100%; max-height: min(48vh, 430px); margin: 10px 0; border-radius: 14px; background: #07100e; object-fit: contain; }
.megaphone-viewer-caption { margin: 0; padding: 13px 15px; border-radius: 12px; background: rgba(0, 0, 0, .24); color: #e6f1e9; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.megaphone-viewer .modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.megaphone-delete { color: #ff9c9c; }
.modal--permissions { width: min(100%, 520px); max-width: 520px; }
.megaphone-permissions-list { display: flex; width: 100%; max-height: min(52vh, 390px); flex-direction: column; gap: 7px; overflow-y: auto; margin: 14px 0; padding: 2px; }
.megaphone-permission-row { display: flex !important; width: 100%; min-height: 48px; box-sizing: border-box; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); cursor: pointer; }
.megaphone-permission-row input { display: block; width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--mint); }
.megaphone-permission-row > span { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 3px; overflow: hidden; }
.megaphone-permission-row strong, .megaphone-permission-row small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.megaphone-permission-row strong { color: #dcebe2; font-size: 12px; }
.megaphone-permission-row small { color: #83978d; font-size: 10px; }
@media (max-width: 560px) {
  .status-actions { gap: 3px; }
  .status-actions .status-add { padding-inline: 5px; font-size: 8px; }
  .megaphone-viewer { width: calc(100% - 20px); max-height: calc(100svh - 20px); padding: 20px; border-radius: 17px; }
  .megaphone-viewer-image { max-height: 42vh; }
  .modal--permissions { width: calc(100% - 20px); }
}

/* Status v2.8.2 — mídia e legenda sem sobreposição de tipografia */
.status-viewer-card { min-height: 0; justify-content: flex-start; overflow-y: auto; padding: 18px; }
.status-viewer-card:has(> #status-viewer-text) { align-items: center; justify-content: center; text-align: center; }
.status-viewer-card:has(> #status-viewer-text) > #status-viewer-text { width: min(100%, 520px); margin: 0; }
.status-viewer-card .status-image, .status-viewer-card .status-video { width: 100%; max-height: min(52vh, 430px); flex: 0 0 auto; object-fit: contain; }
.status-viewer-card .status-caption { width: 100%; box-sizing: border-box; flex: 0 0 auto; margin: 12px 0 0; padding: 11px 13px; font-size: 14px; font-weight: 400; line-height: 1.45; text-align: left; white-space: pre-wrap; }
.status-viewer-card > p:not(.status-caption) { font-size: clamp(20px, 5vw, 30px); font-weight: 620; line-height: 1.35; }
.status-viewer-nav { position: absolute; z-index: 3; top: 50%; right: 10px; left: 10px; display: flex; justify-content: space-between; pointer-events: none; transform: translateY(-50%); }
.status-nav-button { display: grid; width: 38px; height: 54px; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(4, 13, 11, .48); color: #f2fff7; cursor: pointer; font-size: 34px; line-height: 1; pointer-events: auto; backdrop-filter: blur(8px); }
.status-nav-button:hover:not(:disabled) { border-color: rgba(124, 226, 191, .55); background: rgba(20, 59, 47, .76); color: var(--mint); }
.status-nav-button:disabled { visibility: hidden; }
@media (max-width: 560px) {
  .status-viewer { width: calc(100% - 20px); max-height: calc(100svh - 20px); min-height: 0; }
  .status-viewer-card { padding: 12px; }
  .status-viewer-card .status-image, .status-viewer-card .status-video { max-height: 46vh; }
  .status-viewer-card .status-caption { font-size: 13px; }
  .status-nav-button { width: 33px; height: 48px; }
}


/* Respostas e encaminhamentos v2.9.0 */
.reply-preview { position: absolute; right: clamp(14px, 4vw, 46px); bottom: 78px; left: clamp(14px, 4vw, 46px); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid rgba(124, 226, 191, .2); border-left: 3px solid var(--mint); border-radius: 10px; background: #142720; color: #dbe9e0; box-shadow: 0 10px 28px rgba(0,0,0,.24); }
.reply-preview > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.reply-preview strong { color: var(--mint); font-size: 10px; }
.reply-preview span { overflow: hidden; color: #a9bbb0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.reply-preview button { width: 25px; height: 25px; flex: 0 0 auto; border: 0; border-radius: 7px; background: transparent; color: #a9bbb0; cursor: pointer; font-size: 18px; }
.reply-quote { display: flex; max-width: 100%; flex-direction: column; gap: 2px; margin-bottom: 7px; padding: 6px 8px; border: 0; border-left: 2px solid var(--mint); border-radius: 4px; background: rgba(0,0,0,.16); color: #b5c8bd; cursor: pointer; text-align: left; }
.reply-quote strong { color: var(--mint); font-size: 9px; }
.reply-quote span { overflow: hidden; max-width: 300px; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.sender-name { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; color: var(--mint); font-size: 10px; font-weight: 700; line-height: 14px; vertical-align: middle; }
.group-message-badge { display: block; width: 14px; height: 14px; flex: 0 0 14px; object-fit: contain; transform: translateY(-1px); filter: drop-shadow(0 1px 2px rgba(255, 72, 72, .3)); }
.forwarded-label { margin-bottom: 5px; color: var(--mint); font-size: 9px; font-style: italic; }
.message-actions { position: absolute; right: 6px; bottom: 4px; display: flex; gap: 3px; opacity: 0; transition: opacity .16s ease; }
.msg:hover .message-actions, .message-actions:focus-within { opacity: 1; }
.message-actions button { padding: 3px 5px; border: 1px solid rgba(124,226,191,.16); border-radius: 5px; background: rgba(8,19,16,.9); color: #b8c9c0; cursor: pointer; font-size: 8px; }
.message-actions button:hover { color: var(--mint); border-color: rgba(124,226,191,.45); }
.msg:has(.message-actions) { padding-bottom: 28px; }
.modal--forward { max-width: 440px; }
.forward-targets { display: flex; max-height: 360px; flex-direction: column; gap: 4px; overflow-y: auto; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: rgba(5,13,12,.2); }
.forward-target { display: flex; min-height: 48px; align-items: center; gap: 10px; padding: 7px 9px; border: 0; border-radius: 8px; background: transparent; color: #d7e2db; cursor: pointer; text-align: left; }
.forward-target:hover { background: rgba(222,244,231,.06); }
@media (max-width: 560px) { .message-actions { position: static; justify-content: flex-end; margin-top: 4px; opacity: 1; } .reply-preview { bottom: 78px; } }


/* Menu de ações discreto estilo WhatsApp */
.msg:has(.message-actions) { padding-bottom: 8px; }
.message-actions { position: absolute; top: 5px; right: 5px; display: block; margin: 0; opacity: 0; z-index: 3; }
.msg:has(.message-actions.is-open) { z-index: 12; }
.msg:hover .message-actions, .message-actions:focus-within, .message-actions.is-open { opacity: 1; }
.message-menu-toggle { display: grid; width: 25px; height: 25px; place-items: center; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: rgba(8,19,16,.78) !important; color: #b8c9c0 !important; cursor: pointer; font-size: 18px !important; line-height: 1; }
.message-menu-toggle:hover { color: var(--mint) !important; }
.message-menu-list { position: absolute; z-index: 20; top: 28px; right: 0; display: none; min-width: 142px; padding: 4px; border: 1px solid rgba(124,226,191,.18); border-radius: 9px; background: #14231f; box-shadow: 0 10px 24px rgba(0,0,0,.38); }
.message-actions.is-open .message-menu-list { display: flex; flex-direction: column; }
.message-menu-list button { width: 100%; padding: 7px 9px !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: #c3d2c9 !important; cursor: pointer; font-size: 10px !important; text-align: left; white-space: nowrap; }
.message-menu-list button:hover { background: rgba(124,226,191,.1) !important; color: var(--mint) !important; }
.message-menu-list .message-menu-danger { color: #ffaaa5 !important; }
@media (max-width: 560px) { .message-actions { opacity: .72; } .message-menu-toggle { width: 23px; height: 23px; } }

.pinned-message-bar { flex: 0 0 auto; padding: 7px 14px; border-bottom: 1px solid rgba(124,226,191,.14); background: #10241d; }
.pinned-message-jump { display: flex; width: 100%; min-width: 0; align-items: center; gap: 9px; padding: 6px 8px; border: 0; border-left: 3px solid var(--mint); border-radius: 7px; background: rgba(124,226,191,.06); color: #dbe9e0; cursor: pointer; text-align: left; }
.pinned-message-jump:hover { background: rgba(124,226,191,.12); }
.pinned-message-icon { font-size: 14px; line-height: 1; }
.pinned-message-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.pinned-message-copy strong { color: var(--mint); font-size: 10px; }
.pinned-message-copy span { overflow: hidden; color: #b7c9be; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.message-pinned-label { display: inline-flex; width: fit-content; align-items: center; margin-bottom: 5px; padding: 2px 5px; border-radius: 4px; background: rgba(124,226,191,.1); color: var(--mint); font-size: 9px; font-weight: 700; }

.unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #39c99a; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; margin-left: 6px; }