:root {
  --ink: #102a2a;
  --muted: #718783;
  --line: #dce7e3;
  --paper: #fffdf8;
  --canvas: #f3f0e9;
  --green-900: #075e54;
  --green-700: #008069;
  --green-500: #25d366;
  --bubble: #d9fdd3;
  --danger: #c83e4d;
  --shadow: 0 16px 40px rgba(7, 94, 84, .12);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 15% 0, #d8eee6 0, transparent 33%), var(--canvas); font-family: "Trebuchet MS", "Avenir Next", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.splash, .login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 390px); padding: 30px 24px; border: 1px solid rgba(255,255,255,.9); border-radius: 28px; background: rgba(255,253,248,.94); box-shadow: var(--shadow); }
.brand-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; color: white; background: var(--green-900); font-size: 22px; font-weight: 900; }
.eyebrow { margin: 18px 0 4px; color: var(--green-700); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
.login-card h1 { margin-bottom: 8px; font-size: 28px; }
.muted { color: var(--muted); }
.field { display: grid; gap: 7px; margin-top: 16px; font-size: 12px; font-weight: 800; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: white; outline: none; }
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(37,211,102,.12); }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 52px; }
.password-field button { position: absolute; top: 50%; right: 7px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 11px; color: var(--muted); background: transparent; transform: translateY(-50%); }
.password-field button:hover, .password-field button:focus-visible { color: var(--green-700); background: #edf7f3; outline: none; }
.password-field button[aria-pressed="true"] { color: var(--green-700); }
.password-field svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.primary, .secondary, .ghost, .danger { min-height: 44px; border: 0; border-radius: 14px; padding: 0 16px; font-weight: 800; }
.primary { color: white; background: var(--green-700); }
.primary:disabled { opacity: .45; cursor: not-allowed; }
.secondary { color: var(--green-900); background: #e5f5ef; }
.ghost { color: var(--green-900); background: transparent; }
.danger { color: var(--danger); background: #fff0f1; }
.wide { width: 100%; margin-top: 20px; }

.mobile-shell { width: min(100%, 720px); height: 100dvh; margin: auto; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.topbar { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; color: white; background: var(--green-900); }
.topbar h1 { margin: 0; font-size: 20px; }
.topbar small { color: #bde3d8; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--green-500); }
.icon-button { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border: 0; border-radius: 50%; color: inherit; background: rgba(255,255,255,.12); font-size: 22px; }
.content { min-height: 0; overflow: hidden; position: relative; }
.screen { height: 100%; overflow-y: auto; background: var(--paper); }
.screen-pad { padding: 16px; }
.search { position: sticky; top: 0; z-index: 3; padding: 12px 14px; background: rgba(255,253,248,.96); backdrop-filter: blur(12px); }
.search input { width: 100%; height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 22px; background: #f1f6f4; outline: none; }
.segmented { display: flex; gap: 8px; padding: 0 14px 10px; }
.chip { min-height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 18px; color: var(--muted); background: white; font-size: 12px; font-weight: 800; }
.chip.active { color: var(--green-900); border-color: #9fdac6; background: #e8f8f1; }
.list { border-top: 1px solid var(--line); }
.conversation { width: 100%; min-height: 76px; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border: 0; border-bottom: 1px solid #edf2f0; text-align: left; background: transparent; }
.conversation:active { background: #eef6f3; }
.avatar { width: 50px; height: 50px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: white; background: var(--green-700); font-size: 14px; font-weight: 900; background-size: cover; background-position: center; }
.conversation h3 { margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.preview { margin: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.conversation time { align-self: start; padding-top: 5px; color: var(--muted); font-size: 10px; }
.badge { min-width: 20px; height: 20px; display: grid; place-items: center; margin: 8px 0 0 auto; padding: 0 6px; border-radius: 10px; color: white; background: var(--green-500); font-size: 10px; font-weight: 900; }

/* Enquadramento de aplicativo: a página não rola; somente a lista ou conversa. */
:root { --app-height: 100dvh; --app-top: 0px; }
html, body, #app { width: 100%; height: 100%; min-height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
body #app { position: fixed; top: var(--app-top); right: 0; bottom: auto; left: 0; height: var(--app-height); min-height: 0; transform: none; overflow: hidden; }
body #app .mobile-shell { position: relative; inset: auto; width: min(100%, 720px); height: 100%; max-height: none; margin: auto; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
body #app .topbar { flex: 0 0 auto; min-height: 64px; padding-top: max(12px, env(safe-area-inset-top)); }
body #app .content { min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
body #app .screen { min-height: 0; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
body #app .screen::-webkit-scrollbar, body #app .messages::-webkit-scrollbar { display: none; }
body #app .bottom-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
body #app .segmented { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
body #app .segmented::-webkit-scrollbar { display: none; }
body #app .chip { flex: 0 0 auto; white-space: nowrap; }

/* Lista compacta e previsível, seguindo a hierarquia visual do WhatsApp. */
body #app .conversation { min-height: 72px; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 11px; padding: 9px 13px; }
body #app .conversation > div { min-width: 0; }
body #app .conversation > div:last-child { align-self: stretch; min-width: 44px; text-align: right; }
body #app .conversation h3, body #app .preview { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body #app .conversation h3 { font-size: 15px; line-height: 1.25; }
body #app .preview { line-height: 1.35; }
body #app .screen, body #app .list { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }
body #app .conversation { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; box-sizing: border-box; }
body #app .conversation > div:nth-child(2) { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
body #app .conversation h3, body #app .conversation .preview { display: block; width: 100%; min-width: 0; max-width: 100%; }
body #app .conversation time { display: block; max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Conversa estática: cabeçalho e compositor fixos, histórico como única rolagem. */
body #app .thread { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
body #app .thread-head { min-width: 0; flex: 0 0 auto; padding-top: max(9px, env(safe-area-inset-top)); }
body #app .thread-head > div:last-child { min-width: 0; overflow: hidden; }
body #app .thread-head h2, body #app .thread-head p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body #app .messages { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; padding: 14px 10px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
body #app .messages-content { min-width: 0; min-height: 100%; }
body #app .history-loader { width: fit-content; min-height: 30px; display: block; margin: 0 auto 12px; padding: 0 12px; border-radius: 16px; font-size: 10px; }
body #app .jump-latest { position: absolute; right: 13px; bottom: 76px; z-index: 8; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--green-900); background: rgba(255,255,255,.96); box-shadow: 0 4px 14px rgba(16,42,42,.18); font-size: 20px; }
body #app .jump-latest[hidden] { display: none; }
body #app .bubble-row { display: flex; width: 100%; margin: 2px 0; }
body #app .bubble-row.mine { justify-content: flex-end; }
body #app .bubble { width: fit-content; max-width: min(84%, 560px); overflow: hidden; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; line-height: 1.42; }
body #app .bubble img, body #app .bubble video, body #app .bubble audio { display: block; max-width: 100%; }
body #app .bubble-meta { white-space: nowrap; }
body #app .composer { min-width: 0; flex: 0 0 auto; padding-bottom: max(9px, env(safe-area-inset-bottom)); }
body #app .composer-line { min-width: 0; align-items: flex-end; }
body #app .composer textarea { min-width: 0; max-height: 112px; overflow-y: auto; resize: none; line-height: 1.35; }
body #app .bubble-wrap { position: relative; max-width: min(84%, 560px); }
body #app .bubble-wrap .bubble { max-width: 100%; }
body #app .bubble-meta { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
body #app .bubble-meta button { width: 22px; height: 22px; padding: 0; border: 0; color: inherit; background: transparent; font-size: 16px; }
body #app .message-reactions { position: absolute; right: 5px; bottom: -11px; z-index: 2; border: 1px solid var(--line); border-radius: 12px; padding: 1px 6px; background: white; box-shadow: 0 2px 6px rgba(0,0,0,.12); font-size: 13px; }
body #app .bubble-row:not(.mine) .message-reactions { right: auto; left: 5px; }
body #app .message-flags { margin-bottom: 3px; color: rgba(255,255,255,.8); font-size: 10px; }
body #app .bubble-row:not(.mine) .message-flags { color: var(--muted); }
body #app .quoted-message { display: grid; gap: 2px; min-width: 0; margin-bottom: 7px; padding: 7px 9px; border-left: 3px solid var(--green-500); border-radius: 7px; background: rgba(0,0,0,.08); }
body #app .quoted-message strong { font-size: 10px; }
body #app .quoted-message span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
body #app .bubble video { width: 100%; max-height: 340px; border-radius: 9px; }
body #app .bubble audio { width: min(260px, 100%); height: 38px; }
body #app .media-download, body #app .recover-media { display: inline-block; margin-top: 6px; color: inherit; font-size: 11px; font-weight: 800; }
body #app .recover-media { border: 0; border-radius: 8px; padding: 7px 9px; background: rgba(255,255,255,.25); }
body #app .composer-preview { display: flex; align-items: center; gap: 10px; margin: 0 4px 7px; padding: 8px 10px; border-left: 4px solid var(--green-500); border-radius: 9px; background: #edf5f2; }
body #app .composer-preview > div { display: grid; min-width: 0; flex: 1; }
body #app .composer-preview strong { color: var(--green-700); font-size: 10px; }
body #app .composer-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
body #app .composer-preview button { border: 0; background: transparent; font-size: 20px; }
body #app .tool-anchor { position: relative; flex: 0 0 auto; }
body #app .tool-button { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: #edf3f1; font-weight: 900; }
body #app .composer-popover { position: absolute; bottom: 48px; left: 0; z-index: 20; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 10px 30px rgba(0,0,0,.16); }
body #app .attachment-popover { width: 220px; padding: 7px; }
body #app .attachment-popover button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 10px; text-align: left; background: transparent; }
body #app .emoji-popover { width: 246px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 8px; }
body #app .emoji-popover button, body #app .reaction-row button { border: 0; border-radius: 9px; padding: 6px; background: transparent; font-size: 21px; }
body #app .recording-line { display: flex; align-items: center; gap: 9px; min-height: 50px; }
body #app .recording-line audio { min-width: 0; flex: 1; height: 38px; }
body #app .record-spacer { flex: 1; }
body #app .record-dot { width: 10px; height: 10px; border-radius: 50%; background: #e11d48; animation: record-pulse 1s infinite; }
body #app .danger-tool { color: #dc2626; }
@keyframes record-pulse { 50% { opacity: .35; } }
body #app .sheet-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; background: rgba(6, 24, 20, .38); }
body #app .message-sheet, body #app .contact-sheet { width: min(100%, 720px); max-height: 78dvh; overflow-y: auto; border-radius: 22px 22px 0 0; padding: 14px max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)); background: white; box-shadow: 0 -10px 35px rgba(0,0,0,.2); }
body #app .attendance-close-sheet { width: min(100%, 720px); max-height: min(88dvh, 720px); overflow-y: auto; border-radius: 24px 24px 0 0; padding: 10px 16px max(18px, env(safe-area-inset-bottom)); background: white; box-shadow: 0 -10px 35px rgba(0,0,0,.2); }
body #app .attendance-close-sheet .sheet-handle { width: 38px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: #cbd5d1; }
body #app .attendance-close-sheet h3 { margin: 0; font-size: 20px; }
body #app .attendance-close-sheet .sheet-contact { margin: 3px 0 16px; color: var(--muted); }
body #app .attendance-close-sheet label { display: grid; gap: 6px; margin-top: 13px; color: var(--ink); font-size: 12px; font-weight: 800; }
body #app .attendance-close-sheet textarea, body #app .attendance-close-sheet input[type="date"] { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 13px; padding: 11px 12px; outline: 0; background: white; box-sizing: border-box; font: inherit; font-size: 16px; font-weight: 500; }
body #app .attendance-close-sheet textarea { min-height: 92px; resize: vertical; line-height: 1.4; }
body #app .attendance-close-sheet textarea:focus, body #app .attendance-close-sheet input:focus { border-color: #65b89c; box-shadow: 0 0 0 2px rgba(0,168,132,.08); }
body #app .attendance-close-sheet small { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.35; }
body #app .attendance-close-sheet .return-message-toggle { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #f4f8f6; }
body #app .attendance-close-sheet .return-message-toggle span { display: grid; gap: 3px; }
body #app .attendance-close-sheet .return-message-toggle input { width: 22px; height: 22px; accent-color: var(--green-700); }
body #app .attendance-close-sheet .close-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
body #app .attendance-close-sheet .close-sheet-actions button { min-height: 46px; border-radius: 13px; font-weight: 800; }
body #app .reaction-row { display: flex; justify-content: space-around; border-bottom: 1px solid var(--line); padding-bottom: 9px; }
body #app .sheet-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; padding-top: 9px; }
body #app .sheet-actions button { min-height: 42px; border: 0; border-radius: 11px; text-align: left; padding: 9px 11px; color: var(--ink); background: #f2f6f4; font-weight: 750; }
body #app .sheet-actions .danger-action { color: #dc2626; background: #fff1f2; }
body #app .contact-sheet h3 { margin-bottom: 13px; }
body #app .contact-sheet select { width: 100%; height: 48px; border: 1px solid var(--line); border-radius: 13px; padding: 0 12px; background: white; }
body #app .contact-sheet > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* Conversa aberta: somente contato, histórico e compositor permanecem visíveis. */
body #app .mobile-shell.thread-active { grid-template-rows: minmax(0, 1fr); }
body #app .mobile-shell.thread-active > .topbar,
body #app .mobile-shell.thread-active > .bottom-nav { display: none; }
body #app .mobile-shell.thread-active .content { grid-row: 1; }
body #app .thread-active .thread-head { display: grid; grid-template-columns: 38px 42px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 62px; height: auto; padding: max(8px, env(safe-area-inset-top)) 10px 8px; border-bottom: 1px solid var(--line); background: white; }
body #app .thread-active .thread-head .icon-button { width: 36px; height: 36px; margin: 0; padding: 0; font-size: 25px; }
body #app .thread-active .thread-head .avatar { width: 42px; height: 42px; font-size: 12px; }
body #app .thread-active .thread-head h2 { margin: 0 0 2px; font-size: 15px; line-height: 1.2; }
body #app .thread-active .thread-head p { margin: 0; font-size: 10px; line-height: 1.25; }
body #app .thread-active .thread-head .status { display: inline-block; max-width: 110px; margin: 3px 3px 0 0; padding: 2px 6px; overflow: hidden; border-radius: 8px; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
body #app .thread-active .thread-head.has-actions { grid-template-columns: 38px 42px minmax(0, 1fr) 34px; }
body #app .thread-active .close-attendance-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #b8ded1; border-radius: 50%; color: var(--green-700); background: #eaf8f3; font-size: 17px; font-weight: 900; }
body #app .thread-active .messages { padding: 10px 8px 16px; overscroll-behavior: none; }
body #app .thread-active .thread { background-color: #efeae2; background-image: radial-gradient(circle at 18% 22%, rgba(84, 110, 101, .055) 0 1px, transparent 1.5px), radial-gradient(circle at 74% 68%, rgba(84, 110, 101, .045) 0 1.5px, transparent 2px); background-size: 22px 22px, 31px 31px; }
body #app .thread-active .bubble-row { position: relative; margin: 3px 0; }
body #app .thread-active .bubble-wrap { max-width: 82%; }
body #app .thread-active .bubble { min-width: 0; padding: 7px 9px 5px; border-radius: 12px; font-size: 13px; line-height: 1.35; }
body #app .thread-active .bubble p { margin: 4px 0 0; }
body #app .thread-active .bubble-meta { min-height: 15px; margin-top: 3px; font-size: 9px; line-height: 1; }
body #app .thread-active .bubble-meta button { width: 18px; height: 18px; font-size: 14px; }
body #app .thread-active .composer { position: relative; width: 100%; min-width: 0; margin: 0; padding: 7px 7px max(7px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #f7f9f8; box-sizing: border-box; }
body #app .thread-active .composer-line { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: end; gap: 6px; margin: 0; padding: 0; }
body #app .thread-active .attendance-composer-line { grid-template-columns: minmax(0, 1fr); }
body #app .thread-active .composer-field { position: relative; min-width: 0; min-height: 42px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: end; overflow: visible; border: 1px solid var(--line); border-radius: 21px; background: white; }
body #app .thread-active .composer-field:focus-within { border-color: #91cdb9; box-shadow: 0 0 0 2px rgba(0, 168, 132, .08); }
body #app .thread-active .tool-anchor { position: relative; width: 38px; min-width: 0; }
body #app .thread-active .tool-button { width: 38px; height: 40px; min-width: 38px; margin: 0; padding: 0; border-radius: 50%; background: transparent; }
body #app .thread-active .tool-button svg,
body #app .thread-active .send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body #app .thread-active .composer textarea { width: 100%; min-width: 0; height: 40px; min-height: 40px; max-height: 104px; margin: 0; padding: 10px 2px 9px; overflow-y: auto; border: 0; border-radius: 0; outline: 0; background: transparent; box-sizing: border-box; font-size: 16px; line-height: 20px; }
body #app .thread-active .composer-primary { position: relative; width: 42px; height: 42px; min-width: 42px; }
body #app .thread-active .composer-action,
body #app .thread-active .send { width: 42px; min-width: 42px; height: 42px; min-height: 42px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 50%; color: white; background: var(--green-700); }
body #app .thread-active .composer-action { position: absolute; inset: 0; }
body #app .thread-active .is-hidden { display: none !important; }
body #app .thread-active .composer-preview { margin: 0 0 6px; }
body #app .thread-active .composer-popover { bottom: 46px; max-width: calc(100vw - 18px); }
body #app .thread-active .attachment-anchor .composer-popover { right: 0; left: auto; }
body #app .thread-active .attachment-popover { width: 220px; padding: 6px; }
body #app .thread-active .attachment-popover button { min-height: 40px; padding: 8px 9px; font-size: 13px; line-height: 1.2; }
body #app .thread-active .emoji-popover { width: 230px; grid-template-columns: repeat(6, 1fr); }
body #app .thread-active .recording-composer .recording-line { width: 100%; min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
body #app .thread-active .recording-content { min-width: 0; min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 10px; overflow: hidden; border-radius: 21px; background: white; }
body #app .thread-active .recording-content audio { width: 100%; min-width: 0; height: 38px; }
body #app .thread-active .recording-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
body #app .thread-active .recording-actions { display: flex; align-items: center; gap: 5px; }
body #app .thread-active .recording-line .send { flex: 0 0 42px; }
html.keyboard-open body #app .thread-active .composer { padding-bottom: 7px; }
html.keyboard-open body #app .thread-active .composer-popover { display: none !important; }
html.keyboard-open body #app .thread-active .messages { padding-bottom: 8px; }
html.keyboard-open, html.keyboard-open body { width: 100%; height: 100%; overflow: hidden !important; }
html.keyboard-open body { position: fixed !important; inset: 0 !important; }
html.keyboard-open body #app { top: 0 !important; height: var(--app-height) !important; transform: none !important; }
html.keyboard-open body #app .thread-active { height: 100% !important; max-height: 100% !important; overflow: hidden !important; }
html.keyboard-open body #app .thread-active .composer { position: relative; inset: auto; flex: 0 0 auto; }
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#app::-webkit-scrollbar { display: none; }

/* Conteúdos ricos seguem a hierarquia visual do WhatsApp sem ampliar o balão. */
body #app .thread-active .bubble.has-media { width: fit-content; max-width: min(82%, 360px); padding: 4px; overflow: visible; }
body #app .thread-active .bubble.has-media .message-flags { padding: 4px 6px 0; }
body #app .thread-active .bubble.has-media .bubble-meta { min-height: 19px; margin: 2px 4px 0; padding: 0 2px 2px; }
body #app .thread-active .media-card { width: min(310px, 72vw); min-width: 0; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.46); }
body #app .thread-active .bubble-row:not(.mine) .media-card { background: #f5f7f6; }
body #app .thread-active .image-card img { width: 100%; max-height: 420px; display: block; object-fit: cover; border-radius: 9px 9px 4px 4px; background: #dce5e1; }
body #app .thread-active .video-card video { width: 100%; max-height: 420px; display: block; border-radius: 9px 9px 4px 4px; background: #0b1714; object-fit: contain; }
body #app .thread-active .audio-card { position: relative; width: min(292px, 76vw); display: grid; gap: 3px; padding: 6px 7px 3px; box-sizing: border-box; background: transparent; }
body #app .thread-active .bubble-row:not(.mine) .audio-card { background: transparent; }
body #app .thread-active .audio-player-row { min-width: 0; display: grid; grid-template-columns: 34px 30px minmax(0, 1fr) 30px; align-items: center; gap: 5px; }
body #app .thread-active .audio-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: rgba(255,255,255,.85); background: var(--green-700); font-size: 12px; }
body #app .thread-active .audio-play { width: 30px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; color: #536a62; background: transparent; font-size: 21px; }
body #app .thread-active .audio-play:disabled { color: #b4232f; }
body #app .thread-active .audio-rate { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(83,106,98,.28); border-radius: 50%; color: #536a62; background: rgba(255,255,255,.6); font-size: 9px; font-weight: 850; line-height: 1; }
body #app .thread-active .audio-rate:active { color: var(--green-900); background: rgba(255,255,255,.92); transform: scale(.96); }
body #app .thread-active .audio-timeline { min-width: 0; display: grid; gap: 2px; }
body #app .thread-active .audio-wave-shell { position: relative; min-width: 0; height: 29px; display: flex; align-items: center; }
body #app .thread-active .audio-waveform { width: 100%; height: 29px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
body #app .thread-active .audio-wave-bar { width: 2px; min-width: 2px; border-radius: 2px; background: #8a9d96; transition: background-color .12s ease; }
body #app .thread-active .audio-wave-bar.is-played { background: var(--green-700); }
body #app .thread-active .audio-wave-shell input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body #app .thread-active .audio-time { display: flex; justify-content: space-between; color: #71817c; font-size: 9px; line-height: 1; }
body #app .thread-active .audio-engine { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: .01; pointer-events: none; }
body #app .thread-active .audio-error { padding: 2px 2px 0 70px; color: #b4232f; font-size: 9px; line-height: 1.25; }
body #app .thread-active .audio-card.is-loading .audio-play { opacity: .45; animation: status-pulse 1s ease-in-out infinite; }
body #app .thread-active .media-heading { min-width: 0; display: flex; align-items: center; gap: 9px; }
body #app .thread-active .media-heading > div { min-width: 0; display: grid; gap: 1px; }
body #app .thread-active .media-heading strong,
body #app .thread-active .document-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
body #app .thread-active .media-heading span,
body #app .thread-active .document-summary span { color: var(--muted); font-size: 9px; }
body #app .thread-active .media-kind-icon,
body #app .thread-active .special-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; border-radius: 50%; color: white; background: var(--green-700); font-size: 15px; }
body #app .thread-active .document-card { padding: 8px; box-sizing: border-box; }
body #app .thread-active .document-summary { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 9px; }
body #app .thread-active .document-summary > div { min-width: 0; display: grid; gap: 2px; }
body #app .thread-active .file-kind { width: 42px; height: 46px; display: grid; place-items: center; border-radius: 8px; color: white !important; background: #607d75; font-size: 9px !important; font-weight: 900; }
body #app .thread-active .media-caption { margin: 0; padding: 8px 9px 4px; white-space: pre-wrap; font-size: 12px; line-height: 1.35; }
body #app .thread-active .audio-card .media-caption,
body #app .thread-active .document-card .media-caption { padding-inline: 0; }
body #app .thread-active .media-actions { display: flex; justify-content: flex-end; padding: 5px 7px 6px; }
body #app .thread-active .audio-card .media-actions,
body #app .thread-active .document-card .media-actions { padding: 2px 0 0; }
body #app .thread-active .audio-card .media-actions { min-height: 19px; padding: 0; }
body #app .thread-active .audio-card .media-download { min-height: 19px; padding: 1px 5px; background: transparent; font-size: 9px; font-weight: 750; }
body #app .thread-active .media-download { min-height: 29px; display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 4px 8px; border-radius: 9px; color: var(--green-900); background: rgba(255,255,255,.64); text-decoration: none; font-size: 10px; font-weight: 850; }
body #app .thread-active .special-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 9px; padding: 10px; box-sizing: border-box; }
body #app .thread-active .special-card > div { min-width: 0; display: grid; gap: 3px; }
body #app .thread-active .special-card strong { font-size: 12px; }
body #app .thread-active .special-card span:not(.special-icon) { color: var(--muted); font-size: 10px; line-height: 1.35; }
body #app .thread-active .unavailable-card { display: grid; gap: 7px; padding: 10px; box-sizing: border-box; }
body #app .thread-active .unavailable-card > span { color: var(--muted); font-size: 10px; }
body #app .thread-active .unavailable-card .recover-media { width: fit-content; margin: 0; color: var(--green-900); background: #dcefe8; }
body #app .thread-active .delivery-status { min-width: 14px; display: inline-block; font-weight: 900; letter-spacing: -2px; text-align: center; }
body #app .thread-active .status-pending { color: #768781; letter-spacing: 0; animation: status-pulse 1.4s ease-in-out infinite; }
body #app .thread-active .status-sent,
body #app .thread-active .status-delivered { color: #667a74; }
body #app .thread-active .status-read { color: #168cd4; }
body #app .thread-active .status-error { color: #d92d3a; letter-spacing: 0; }
body #app .thread-active .status-unknown { color: #b7791f; letter-spacing: 0; }
@keyframes status-pulse { 50% { opacity: .42; } }

@media (max-width: 360px) {
  body #app .thread-active .composer { padding-inline: 5px; }
  body #app .thread-active .composer-line { gap: 4px; }
  body #app .thread-active .composer-field { grid-template-columns: 36px minmax(0, 1fr) 36px; }
  body #app .thread-active .tool-anchor,
  body #app .thread-active .tool-button { width: 36px; min-width: 36px; }
  body #app .thread-active .media-card { width: min(288px, 76vw); }
}

@media (min-width: 721px) {
  body #app { background: #dfe7e3; }
  body #app .mobile-shell { border-inline: 1px solid rgba(15, 65, 52, .12); }
}
.empty { padding: 56px 28px; text-align: center; color: var(--muted); }

.thread { height: 100%; display: grid; grid-template-rows: auto 1fr auto; background-color: #efeae2; background-image: radial-gradient(rgba(7,94,84,.06) 1px, transparent 1px); background-size: 18px 18px; }
.thread-head { min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #f8fbfa; }
.thread-head .avatar { width: 42px; height: 42px; }
.thread-head h2 { margin: 0; font-size: 15px; }
.thread-head p { margin: 2px 0 0; font-size: 10px; color: var(--muted); }
.messages { min-height: 0; overflow-y: auto; padding: 16px 12px 24px; }
.bubble-row { display: flex; margin: 5px 0; }
.bubble-row.mine { justify-content: flex-end; }
.bubble { max-width: 84%; padding: 8px 10px 6px; border-radius: 9px; background: white; box-shadow: 0 1px 1px rgba(0,0,0,.08); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; }
.mine .bubble { background: var(--bubble); }
.bubble.deleted { color: var(--muted); font-style: italic; background: #f3f3ef; }
.bubble-meta { margin: 4px 0 0 8px; color: #71817c; font-size: 9px; text-align: right; }
.bubble img { max-width: 100%; border-radius: 7px; }
.bubble audio { width: min(260px, 68vw); }
.file-link { display: block; color: var(--green-900); font-weight: 800; }
.composer { padding: 8px 10px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(0,0,0,.08); background: #f0f2f1; }
.composer-line { display: grid; grid-template-columns: 1fr 46px; gap: 8px; }
.composer textarea { height: 46px; max-height: 120px; padding: 12px 15px; border: 0; border-radius: 22px; outline: none; resize: none; }
.send { border: 0; border-radius: 50%; color: white; background: var(--green-700); font-size: 19px; }
.attention { margin: 0 0 8px; padding: 9px 11px; border-radius: 10px; color: #735b00; background: #fff4c7; font-size: 11px; }

.bottom-nav { display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px 8px max(6px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fbfdfc; }
.nav-item { min-height: 52px; display: grid; place-items: center; gap: 2px; border: 0; border-radius: 14px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 800; }
.nav-item span { font-size: 20px; }
.nav-item.active { color: var(--green-900); background: #e8f8f1; }

.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-title h2 { margin: 0; font-size: 20px; }
.quote-card { margin-bottom: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 5px 16px rgba(16,42,42,.05); }
.quote-head { display: flex; justify-content: space-between; gap: 12px; }
.quote-card h3 { margin: 0; font-size: 14px; }
.quote-card p { margin: 5px 0; color: var(--muted); font-size: 12px; }
.quote-value { color: var(--green-900); font-size: 18px; font-weight: 900; }
.status { width: fit-content; padding: 5px 8px; border-radius: 9px; color: var(--green-900); background: #e7f6ef; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.actions { display: flex; gap: 8px; margin-top: 12px; }
.actions button { flex: 1; }
.form-grid { display: grid; gap: 2px; }
.form-actions { position: sticky; bottom: 0; display: flex; gap: 8px; margin: 20px -16px -16px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,253,248,.97); }
.form-actions button { flex: 1; }
.account-card { padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.account-card dl { margin: 18px 0; }
.account-card dt { margin-top: 12px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.account-card dd { margin: 3px 0 0; font-size: 14px; font-weight: 800; }
.toast { position: fixed; left: 50%; bottom: 84px; z-index: 100; max-width: calc(100% - 36px); transform: translate(-50%, 20px); padding: 11px 15px; border-radius: 12px; color: white; background: #173c37; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .2s ease; font-size: 12px; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (min-width: 721px) {
  body { padding: 18px; }
  .mobile-shell { height: calc(100dvh - 36px); border: 1px solid rgba(255,255,255,.8); border-radius: 28px; }
}