*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;background:#0d1117;color:#e6edf3;line-height:1.6}.wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}.topbar{position:sticky;top:0;z-index:20;background:rgba(13,17,23,.94);backdrop-filter:blur(14px);border-bottom:1px solid #30363d}.nav{display:flex;align-items:center;justify-content:space-between;min-height:68px}.brand{font-weight:800;letter-spacing:.18em;color:#f7931a;text-decoration:none}.nav nav{display:flex;gap:22px;flex-wrap:wrap}.nav nav a,.footer-inner a{color:#8b949e;text-decoration:none}.nav nav a:hover,.footer-inner a:hover{color:#e6edf3}.hero{padding:110px 0 70px}.eyebrow,.section-heading span{font-size:.78rem;letter-spacing:.16em;color:#f7931a;font-weight:700}.hero h1{font-size:clamp(4rem,11vw,8rem);line-height:.9;margin:14px 0 24px;letter-spacing:-.05em;color:#f7931a}.lead{max-width:820px;font-size:clamp(1.15rem,2.5vw,1.55rem);color:#e6edf3}.lead.secondary{color:#8b949e}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.button{display:inline-flex;padding:12px 18px;border:1px solid #30363d;border-radius:12px;color:#e6edf3;text-decoration:none;background:#21262d}.button:hover{background:#30363d}.button.primary{background:#238636;color:#fff;border-color:#238636}.button.primary:hover{background:#2ea043}.status-card{margin-top:34px;display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid #30363d;border-radius:16px;background:#161b22;max-width:760px}.status-card strong,.status-card span{display:block}.status-card span{color:#8b949e}.dot{width:10px;height:10px;border-radius:50%;background:#3fb950;margin-top:8px;box-shadow:0 0 18px rgba(63,185,80,.55)}.dot.offline{background:#d29922;box-shadow:0 0 18px rgba(210,153,34,.35)}.section{padding:70px 0}.section-heading h2{font-size:clamp(2rem,5vw,3.4rem);line-height:1.08;margin:10px 0 28px;max-width:900px;color:#e6edf3}.grid.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card,.architecture-flow pre{border:1px solid #30363d;background:#161b22;border-radius:18px}.card{padding:24px}.card h3{margin-top:0;font-size:1.2rem;color:#f7931a}.card p,.note{color:#8b949e}.capabilities{display:flex;flex-wrap:wrap;gap:10px}.capabilities span{padding:10px 14px;border-radius:999px;border:1px solid #30363d;background:#21262d;color:#e6edf3}.chat-section{padding:70px 20px}.chat-section #chat-principal{max-width:900px;margin:24px auto;padding:20px}.chat-section #chat-principal>h1{font-size:55px;line-height:1;margin:0 0 10px;color:#f7931a}.chat-section #chat-principal>p{margin:0 0 22px;color:#8b949e}.chat-section #chat-mensagens{min-height:260px;max-height:520px;overflow-y:auto;padding:4px 0 8px}.chat-mensagem{padding:14px;margin:10px 0;background:#161b22;border:1px solid #30363d;border-radius:10px;overflow-wrap:anywhere;white-space:pre-wrap;color:#e6edf3}.chat-mensagem.usuario{margin-left:auto;max-width:82%;background:#21262d;color:#fff;border-color:#30363d}.chat-mensagem.ohana{max-width:92%}.chat-autor{display:block;font-weight:700;margin-bottom:5px;color:#f7931a}.chat-mensagem.usuario .chat-autor{color:#e6edf3}.chat-section #chat-form{margin-top:14px}.chat-section #chat-form label{display:block;font-size:.92rem;font-weight:600;margin-bottom:7px}.chat-section #chat-pedido{display:block;width:100%;box-sizing:border-box;min-height:80px;resize:vertical;margin-top:8px;padding:15px;border:1px solid #30363d;border-radius:10px;background:#0d1117;color:#fff;font:inherit;outline:none}.chat-section #chat-pedido:focus{border-color:#f7931a;box-shadow:0 0 0 3px rgba(247,147,26,.12)}.chat-section #chat-enviar{margin-top:15px;padding:14px 25px;border:0;border-radius:8px;background:#238636;color:#fff;font:inherit;font-weight:bold;cursor:pointer}.chat-section #chat-enviar:hover{background:#2ea043}.chat-section #chat-enviar:disabled{opacity:.6;cursor:wait}.public-info{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;color:#8b949e;font-size:.86rem}.public-badge{padding:3px 8px;border:1px solid #30363d;border-radius:999px;color:#8b949e;background:#161b22}.architecture-flow pre{white-space:pre-wrap;padding:24px;color:#e6edf3;overflow:auto}footer{border-top:1px solid #30363d;margin-top:40px}.footer-inner{min-height:86px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#8b949e}@media(max-width:760px){.nav{align-items:flex-start;padding:18px 0;gap:14px;flex-direction:column}.nav nav{gap:14px}.hero{padding-top:70px}.grid.three{grid-template-columns:1fr}.chat-section{padding-left:8px;padding-right:8px}.chat-section #chat-principal{padding:14px}.chat-mensagem.usuario,.chat-mensagem.ohana{max-width:100%}.footer-inner{flex-direction:column;justify-content:center;align-items:flex-start;padding:20px 0}}

/* ==========================================================
   OHANA ONLINE - FROSTED GLASS FINAL
   identidade visual próxima ao Core R5
   ========================================================== */

html{
    background:#02060b !important;
}

body{
    background:
        radial-gradient(
            ellipse at 50% 25%,
            rgba(20,86,145,.12) 0%,
            rgba(7,23,39,.055) 36%,
            transparent 62%
        ),
        radial-gradient(
            ellipse at 50% 100%,
            rgba(20,104,165,.10) 0%,
            transparent 48%
        ),
        linear-gradient(
            145deg,
            #02060b 0%,
            #06111c 46%,
            #02060a 100%
        ) !important;
}

/* camada de profundidade */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(100,190,255,.055),
            transparent 34%
        );

    filter:blur(18px);
}

/* TOPBAR */

.topbar{
    background:
        rgba(3,9,15,.25) !important;

    border-bottom:
        1px solid rgba(130,200,255,.12) !important;

    backdrop-filter:
        blur(18px)
        saturate(115%) !important;

    -webkit-backdrop-filter:
        blur(18px)
        saturate(115%) !important;
}

/* PAINÉIS GERAIS */

.card,
.status-card,
.capabilities span,
.architecture-flow pre,
.button{
    background:
        rgba(7,15,24,.15) !important;

    border-color:
        rgba(135,205,255,.12) !important;

    backdrop-filter:
        blur(12px)
        saturate(110%) !important;

    -webkit-backdrop-filter:
        blur(12px)
        saturate(110%) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 10px 30px rgba(0,0,0,.08) !important;
}

/* CHAT */

.chat-section{
    background:
        radial-gradient(
            ellipse at 50% 100%,
            rgba(20,100,165,.08),
            transparent 55%
        ) !important;
}

.chat-section #chat-principal{
    background:
        rgba(2,8,14,.075) !important;

    border:
        1px solid
        rgba(140,210,255,.18) !important;

    box-shadow:
        0 25px 80px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 0 36px rgba(90,170,230,.018) !important;

    backdrop-filter:
        blur(18px)
        saturate(120%) !important;

    -webkit-backdrop-filter:
        blur(18px)
        saturate(120%) !important;
}

/* mensagens praticamente flutuando */

.chat-mensagem{
    background:
        rgba(5,12,19,.055) !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}

.chat-mensagem.usuario{
    background:
        rgba(30,52,72,.20) !important;

    border:
        1px solid
        rgba(140,205,250,.10) !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

.chat-mensagem.ohana{
    background:
        transparent !important;
}

/* INPUT */

.chat-section #chat-pedido{
    background:
        rgba(4,12,20,.31) !important;

    border:
        1px solid
        rgba(145,210,255,.38) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 8px 28px rgba(0,0,0,.10) !important;

    backdrop-filter:
        blur(14px)
        saturate(115%) !important;

    -webkit-backdrop-filter:
        blur(14px)
        saturate(115%) !important;
}

.chat-section #chat-pedido:focus{
    background:
        rgba(5,14,23,.38) !important;

    border-color:
        rgba(155,220,255,.66) !important;

    box-shadow:
        0 0 0 2px rgba(90,175,235,.07),
        0 7px 26px rgba(0,0,0,.10) !important;
}

/* SEND ORB */

.chat-section #chat-enviar{
    background:
        rgba(16,46,70,.48) !important;

    border:
        1px solid
        rgba(155,220,255,.42) !important;

    backdrop-filter:
        blur(12px)
        saturate(120%) !important;

    -webkit-backdrop-filter:
        blur(12px)
        saturate(120%) !important;
}

.chat-section #chat-enviar:hover{
    background:
        rgba(27,73,105,.66) !important;

    border-color:
        rgba(175,225,255,.72) !important;
}

/* STATUS E INFO */

.public-info{
    opacity:.58;
}

.public-badge{
    background:
        rgba(5,13,21,.16) !important;

    border-color:
        rgba(135,205,255,.11) !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

/* scrollbar discreta */

.chat-section #chat-mensagens::-webkit-scrollbar{
    width:6px;
}

.chat-section #chat-mensagens::-webkit-scrollbar-track{
    background:transparent;
}

.chat-section #chat-mensagens::-webkit-scrollbar-thumb{
    background:
        rgba(150,210,250,.18);

    border-radius:10px;
}

/* MOBILE */

@media(max-width:760px){

    .chat-section #chat-principal{
        background:
            rgba(2,8,14,.11) !important;

        backdrop-filter:
            blur(14px)
            saturate(115%) !important;

        -webkit-backdrop-filter:
            blur(14px)
            saturate(115%) !important;
    }

    .chat-section #chat-pedido{
        background:
            rgba(4,12,20,.38) !important;
    }
}

/* ==========================================================
   FIM FROSTED GLASS
   ========================================================== */

/* OHANA_SEND_ORB_R1_START */

/* linha da caixa de envio */
#chat-form,
#form-chat,
.chat-form,
.chat-input-row,
.chat-input-wrap,
.chat-compose,
.chat-compose-row {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0 !important;
}

/* caixa de texto */
#chat-pedido,
#pedido,
#chat-input,
.chat-input,
.chat-compose input,
.chat-compose textarea,
.chat-input-row input,
.chat-input-row textarea,
.chat-input-wrap input,
.chat-input-wrap textarea,
#chat-form input[type="text"],
#chat-form textarea,
#form-chat input[type="text"],
#form-chat textarea {
    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    border-radius: 28px !important;
    padding: 14px 66px 14px 18px !important;
    box-sizing: border-box !important;
}

/* botao orb dentro da caixa */
#chat-enviar,
#enviar,
#send,
.chat-send,
#chat-form button[type="submit"],
#form-chat button[type="submit"],
.chat-input-row button[type="submit"],
.chat-input-wrap button[type="submit"],
.chat-compose button[type="submit"] {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;

    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 20 !important;
    overflow: hidden !important;

    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;

    background: rgba(125, 195, 255, 0.22) !important;
    border: 1px solid rgba(165, 225, 255, 0.48) !important;
    box-shadow:
        0 6px 18px rgba(0,0,0,.18),
        inset 0 0 0 1px rgba(255,255,255,.06) !important;

    backdrop-filter: blur(10px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(135%) !important;

    cursor: pointer !important;
}

/* seta da bolinha */
#chat-enviar::before,
#enviar::before,
#send::before,
.chat-send::before,
#chat-form button[type="submit"]::before,
#form-chat button[type="submit"]::before,
.chat-input-row button[type="submit"]::before,
.chat-input-wrap button[type="submit"]::before,
.chat-compose button[type="submit"]::before {
    content: "➜" !important;
    font-size: 17px !important;
    line-height: 1 !important;
    color: #f5fbff !important;
    transform: translateX(1px) !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.28) !important;
}

/* hover */
#chat-enviar:hover,
#enviar:hover,
#send:hover,
.chat-send:hover,
#chat-form button[type="submit"]:hover,
#form-chat button[type="submit"]:hover,
.chat-input-row button[type="submit"]:hover,
.chat-input-wrap button[type="submit"]:hover,
.chat-compose button[type="submit"]:hover {
    background: rgba(135, 205, 255, 0.30) !important;
    box-shadow:
        0 8px 20px rgba(0,0,0,.22),
        0 0 12px rgba(120,190,255,.22),
        inset 0 0 0 1px rgba(255,255,255,.09) !important;
}

/* focus da caixa */
#chat-pedido:focus,
#pedido:focus,
#chat-input:focus,
.chat-input:focus,
.chat-compose input:focus,
.chat-compose textarea:focus,
.chat-input-row input:focus,
.chat-input-row textarea:focus,
.chat-input-wrap input:focus,
.chat-input-wrap textarea:focus,
#chat-form input[type="text"]:focus,
#chat-form textarea:focus,
#form-chat input[type="text"]:focus,
#form-chat textarea:focus {
    outline: none !important;
    border-color: rgba(165,225,255,.48) !important;
    box-shadow:
        0 0 0 1px rgba(165,225,255,.22),
        0 10px 24px rgba(0,0,0,.10) !important;
}

/* mobile */
@media (max-width: 700px) {
    #chat-pedido,
    #pedido,
    #chat-input,
    .chat-input,
    .chat-compose input,
    .chat-compose textarea,
    .chat-input-row input,
    .chat-input-row textarea,
    .chat-input-wrap input,
    .chat-input-wrap textarea,
    #chat-form input[type="text"],
    #chat-form textarea,
    #form-chat input[type="text"],
    #form-chat textarea {
        min-height: 54px !important;
        height: 54px !important;
        padding-right: 62px !important;
    }

    #chat-enviar,
    #enviar,
    #send,
    .chat-send,
    #chat-form button[type="submit"],
    #form-chat button[type="submit"],
    .chat-input-row button[type="submit"],
    .chat-input-wrap button[type="submit"],
    .chat-compose button[type="submit"] {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        right: 7px !important;
    }
}

/* OHANA_SEND_ORB_R1_END */

/* ==========================================================
   OHANA ONLINE - SEND FINAL
   alinhamento visual com Core R5
   ========================================================== */

/* remove "Seu pedido" sem alterar acessibilidade */

.chat-section #chat-form > label{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

/* elimina sobra e transforma form em container limpo */

.chat-section #chat-form{
    position:relative !important;
    display:block !important;

    width:100% !important;

    padding:0 !important;
    margin:12px 0 0 !important;

    border:0 !important;
    background:transparent !important;
}

/* caixa única */

.chat-section #chat-pedido{
    display:block !important;

    width:100% !important;
    height:64px !important;

    min-height:64px !important;
    max-height:120px !important;

    margin:0 !important;

    padding:
        15px 72px
        15px 20px !important;

    resize:none !important;

    box-sizing:border-box !important;

    border-radius:32px !important;

    background:
        rgba(3,12,20,.27) !important;

    border:
        1px solid
        rgba(135,205,255,.42) !important;

    color:
        #f3f8fd !important;

    outline:none !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025),
        0 7px 24px
        rgba(0,0,0,.10) !important;

    backdrop-filter:
        blur(14px)
        saturate(118%) !important;

    -webkit-backdrop-filter:
        blur(14px)
        saturate(118%) !important;
}

.chat-section #chat-pedido::placeholder{
    color:
        rgba(205,220,234,.48) !important;
}

.chat-section #chat-pedido:focus{
    border-color:
        rgba(150,215,255,.68) !important;

    background:
        rgba(4,14,23,.34) !important;

    box-shadow:
        0 0 0 2px
        rgba(90,175,240,.07),
        inset 0 1px 0
        rgba(255,255,255,.035) !important;
}

/* botão original transformado em orb */

.chat-section #chat-enviar{
    position:absolute !important;

    top:50% !important;
    right:9px !important;
    bottom:auto !important;

    transform:
        translateY(-50%) !important;

    width:46px !important;
    height:46px !important;

    min-width:46px !important;
    min-height:46px !important;

    padding:0 !important;
    margin:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:50% !important;

    border:
        1px solid
        rgba(155,220,255,.48) !important;

    background:
        rgba(22,58,84,.58) !important;

    color:transparent !important;

    font-size:0 !important;
    line-height:0 !important;

    cursor:pointer !important;

    z-index:5 !important;

    overflow:hidden !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.09),
        0 5px 16px
        rgba(0,0,0,.17),
        0 0 9px
        rgba(100,190,245,.08) !important;

    backdrop-filter:
        blur(12px)
        saturate(125%) !important;

    -webkit-backdrop-filter:
        blur(12px)
        saturate(125%) !important;
}

/* seta */

.chat-section #chat-enviar::before{
    content:"➜" !important;

    display:block !important;

    color:#f5fbff !important;

    font-size:20px !important;
    line-height:1 !important;

    transform:
        translateX(1px) !important;

    text-shadow:
        0 1px 5px
        rgba(0,0,0,.25);
}

.chat-section #chat-enviar:hover{
    transform:
        translateY(-50%)
        scale(1.04) !important;

    background:
        rgba(32,79,112,.72) !important;

    border-color:
        rgba(175,225,255,.76) !important;

    box-shadow:
        0 6px 18px
        rgba(0,0,0,.20),
        0 0 13px
        rgba(100,190,245,.15) !important;
}

.chat-section #chat-enviar:active{
    transform:
        translateY(-50%)
        scale(.97) !important;
}

/* texto inferior alinhado */

.chat-section .public-info{
    margin-top:11px !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;

    gap:10px !important;
}

/* remove qualquer sobra produzida pelo layout anterior */

.chat-section #chat-principal{
    overflow:hidden !important;
}

.chat-section #chat-form::before,
.chat-section #chat-form::after{
    content:none !important;
}

/* mobile */

@media(max-width:760px){

    .chat-section #chat-pedido{
        height:58px !important;
        min-height:58px !important;

        padding:
            13px 64px
            13px 16px !important;

        border-radius:29px !important;
    }

    .chat-section #chat-enviar{
        width:42px !important;
        height:42px !important;

        min-width:42px !important;
        min-height:42px !important;

        right:8px !important;
    }

    .chat-section #chat-enviar::before{
        font-size:18px !important;
    }

    .chat-section .public-info{
        font-size:.78rem !important;
    }
}

/* ==========================================================
   FIM OHANA ONLINE SEND FINAL
   ========================================================== */


/* ==========================================================
   OHANA ONLINE - CHAT LOCK FINAL
   ========================================================== */

.chat-section{
    min-height:100vh !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;
}

.chat-section #chat-principal{
    width:min(940px,100%) !important;

    height:min(760px,calc(100vh - 90px)) !important;
    max-height:calc(100vh - 90px) !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;

    box-sizing:border-box !important;
}

/* título e descrição não crescem */

.chat-section #chat-principal > h1,
.chat-section #chat-principal > p{
    flex:0 0 auto !important;
}

/* SOMENTE O HISTÓRICO ROLA */

.chat-section #chat-mensagens{
    flex:1 1 auto !important;

    min-height:0 !important;
    max-height:none !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    overscroll-behavior:contain !important;
    scroll-behavior:smooth !important;

    padding-right:8px !important;
}

/* scrollbar invisível */

.chat-section #chat-mensagens{
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
}

.chat-section #chat-mensagens::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
}

/* INPUT NÃO SOBE */

.chat-section #chat-form{
    flex:0 0 auto !important;

    position:relative !important;

    width:100% !important;

    margin-top:12px !important;

    background:transparent !important;

    z-index:20 !important;
}

/* informação pública também fica fixa */

.chat-section .public-info{
    flex:0 0 auto !important;
}

/* MOBILE */



/* ==========================================================
   FIM CHAT LOCK
   ========================================================== */


/* OHANA UX R1 — refinamento conservador: layout/teclado/acessibilidade */
.chat-section #chat-principal { min-width:0 !important; }
.chat-section #chat-mensagens {
  scroll-behavior:auto !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(153,185,220,.5) transparent !important;
  overflow-wrap:anywhere;
  -webkit-overflow-scrolling:touch;
}
.chat-section #chat-mensagens::-webkit-scrollbar { display:block !important; width:5px !important; }
.chat-section #chat-mensagens::-webkit-scrollbar-thumb { background:rgba(153,185,220,.45); border-radius:999px; }
.chat-section #chat-mensagens .chat-mensagem { max-width:100%; overflow-wrap:anywhere; }
.chat-section #chat-pedido { min-width:0 !important; font-size:max(16px,1rem) !important; }
.chat-section #chat-enviar { min-height:44px !important; touch-action:manipulation; }
.chat-section :is(a,button,textarea):focus-visible { outline:2px solid #80baff !important; outline-offset:3px; }

@media(prefers-reduced-motion:reduce) {
  .chat-section *, .chat-section *::before, .chat-section *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* OHANA MOBILE CONSOLIDADO — uma unica regra de layout.
   Sem position:fixed, visualViewport ou scroll forcado no foco. */
@media (max-width:760px) {
  html { scroll-padding-top: 12px; }
  body { overflow-x: hidden; }
  #demo.chat-section {
    box-sizing: border-box !important;
    width: min(100%, 760px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 8px !important;
    overflow: visible !important;
    scroll-margin-top: 12px;
  }
  #demo.chat-section #chat-principal {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    height: min(690px, 78svh) !important;
    min-height: 300px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
  }
  #demo.chat-section #chat-mensagens {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #demo.chat-section #chat-form {
    flex: 0 0 auto !important;
    position: static !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
  }
  #demo.chat-section #chat-pedido {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 84px !important;
    resize: none !important;
    font-size: 16px !important;
  }
  #demo.chat-section #chat-enviar { min-height: 44px !important; }
  /* Com o teclado, encurtar o painel dentro do fluxo normal.
     O navegador cuida do deslocamento nativo para o campo. */
  #demo.chat-section:focus-within #chat-principal {
    height: max(230px, min(540px, 64dvh)) !important;
    min-height: 0 !important;
  }
}