:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172b42; background: #f3f6fa; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; padding: 38px 20px; background: radial-gradient(ellipse at top left, #e5f2f3, transparent 50%), #f3f6fa; }
button, textarea { font: inherit; }
a { color: #236c77; }
.support-shell { width: min(100%, 720px); margin: 0 auto; background: #fff; border: 1px solid #e0e7ef; border-radius: 28px; box-shadow: 0 18px 70px #172b4210; overflow: hidden; }
.support-header { display: flex; gap: 18px; padding: 30px 30px 24px; border-bottom: 1px solid #eef1f5; align-items: flex-start; }
.support-back { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid #e2e9ef; border-radius: 13px; text-decoration: none; }
svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.support-logo { display: block; width: 132px; padding: 8px 10px; background: #0d3442; border-radius: 10px; margin-bottom: 17px; }
h1 { font-size: 23px; letter-spacing: -.6px; margin: 0 0 6px; }
.support-header p { margin: 0; color: #697b8d; font-size: 14px; }
.support-conversation { display: flex; flex-direction: column; gap: 18px; padding: 28px 30px 18px; max-height: 48dvh; min-height: 230px; overflow-y: auto; scrollbar-width: thin; }
.support-bubble { width: fit-content; max-width: 92%; border-radius: 18px; padding: 16px 18px; animation: appear .2s ease-out; overflow-wrap: anywhere; }
.support-bubble p { margin: 8px 0 0; font-size: 15px; line-height: 1.65; white-space: pre-wrap; }
.support-bubble.assistant { background: #f2f7f8; border: 1px solid #e5eef0; border-bottom-left-radius: 6px; }
.support-bubble.user { background: #173654; color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; }
.support-speaker { font-size: 11px; font-weight: 700; letter-spacing: .25px; opacity: .78; }
.support-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 30px 18px; }
.support-actions a { text-decoration: none; border: 1px solid #dce8eb; padding: 9px 12px; border-radius: 11px; font-size: 12px; font-weight: 600; background: #fff; }
.support-actions a:hover, .support-back:hover { background: #eef6f7; }
/* Encaminhamento humano em destaque: mesma linguagem do cartão de fonte da tutoria. */
.support-actions a.support-whatsapp { display: grid; grid-template-columns: 34px minmax(0, 1fr) 15px; align-items: center; gap: 11px; flex: 1 1 100%; max-width: 344px; min-height: 52px; padding: 8px 11px; border: 1px solid #c6e9d3; border-radius: 14px; background: linear-gradient(145deg, #fbfffc, #f0fbf4); color: #0f3d25; box-shadow: 0 2px 10px #124f2f0d; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.support-actions a.support-whatsapp:hover { transform: translateY(-1px); border-color: #8fd7ad; background: #f5fdf8; box-shadow: 0 6px 18px #124f2f1a; }
.support-actions a.support-whatsapp:focus-visible { outline: 2px solid #0b5e37; outline-offset: 3px; }
.support-whatsapp-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #25d366; color: #fff; }
.support-whatsapp-icon svg { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.support-whatsapp-copy { min-width: 0; display: grid; gap: 1px; }
.support-whatsapp-copy strong { font-size: 13px; font-weight: 700; line-height: 1.3; color: #0f3d25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-whatsapp-copy small { font-size: 11px; font-weight: 500; line-height: 1.3; color: #46705a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-whatsapp-arrow { width: 14px; height: 14px; color: #5c8570; }
.support-footer { padding: 18px 30px 24px; border-top: 1px solid #eef1f5; }
.support-privacy { color: #748295; font-size: 11px; line-height: 1.6; margin: 0 0 12px; }
.support-composer { display: flex; gap: 8px; align-items: flex-end; background: #f7f9fb; border: 1px solid #dfe6ee; border-radius: 16px; padding: 8px; }
.support-composer:focus-within { border-color: #4a9299; box-shadow: 0 0 0 3px #4a929910; }
textarea { border: 0; padding: 8px; min-height: 62px; max-height: 130px; resize: vertical; width: 100%; color: #172b42; background: transparent; outline: none; font-size: 14px; }
.support-composer button { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; background: #236b78; color: #fff; border: 0; border-radius: 12px; cursor: pointer; }
.support-composer button:disabled { opacity: .55; cursor: wait; }
.support-status { color: #687c8e; font-size: 12px; margin: 8px 0; min-height: 18px; }
.support-contact { font-size: 12px; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 520px) { body { padding: 0; background: #fff; } .support-shell { border: 0; border-radius: 0; box-shadow: none; min-height: 100dvh; } .support-header { padding: 24px 20px; } .support-conversation { padding: 24px 20px; max-height: 46dvh; } .support-footer { padding: 18px 20px 24px; } .support-actions { padding: 0 20px 16px; } .support-bubble { max-width: 97%; } }
@media (prefers-reduced-motion: reduce) { .support-bubble { animation: none; } .support-actions a.support-whatsapp { transition: none; } .support-actions a.support-whatsapp:hover { transform: none; } }