/* Messenger view shares the portal palette and control rhythm. */
:root{--bg:#f4f6f9;--text:#19283b;--muted:#596a80;--line:#dfe5ed;--primary:#255ed6;--red:#b83932;--green:#08764f;--orange:#a55d12}
html,body{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.5}
.header{position:relative;padding:12px 16px;background:#fff;color:var(--text);box-shadow:none}
.header .subtitle,.header .hint,.header .meta{color:var(--muted)}
.header .action-btn{background:#e2ebfc!important;color:#194ca7!important;border:1px solid #c8d7ef}
.mobile-brand{margin-bottom:8px}
.mobile-brand-mark{background:#356fe2!important;border-radius:10px!important}
.title{font-size:22px;letter-spacing:-.025em}
.subtitle,.hint,.meta{color:#596a80;line-height:1.5}
.tabs{padding:10px 12px;gap:8px;border-bottom:1px solid var(--line)}
.tab-btn{border-radius:8px;min-height:42px;font-weight:600}
.tab-btn.active{background:#e2ebfc;color:#194ca7;border-color:#e2ebfc}
.wrap{padding:12px}.card{border-radius:12px}.action-btn,.input,textarea{border-radius:8px!important;font:inherit}.action-btn{min-height:42px}
.browser-fallback-card{border:1px solid var(--line);border-radius:16px!important;box-shadow:0 8px 30px #19283b08!important}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #3776e5;outline-offset:3px}
.composer.closed .composer-row,.composer.closed #filePickBtn{display:none}
.composer.closed #closedActions{padding:0}
.composer.closed #closedActions button{width:100%;min-height:44px}
.composer.closed .composer-sub:has(.state:empty + .state:empty){margin-top:0}
#msg{min-width:0;font-size:16px}
#chatLiveState:empty{display:none}
#chatLiveState{display:block;padding-bottom:6px;color:var(--muted)}
#miniappNewMessages{width:100%;margin-bottom:6px;background:#e2ebfc;color:#194ca7;border:1px solid #c8d7ef;min-height:44px}
.miniapp-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.miniapp-heading .mobile-brand{margin:0;min-width:0;gap:8px}
.miniapp-heading .mobile-brand-mark{flex:none}
.miniapp-heading .mobile-brand-name{font-size:12px;color:var(--text);overflow-wrap:anywhere}
.miniapp-heading .mobile-brand-product{color:var(--muted)}
.miniapp-heading .action-btn{flex:none;padding:8px 12px;min-height:44px}
.header #ticketMeta .status-badge{border-radius:8px;max-width:100%;overflow-wrap:anywhere;margin-top:8px;text-align:left}
.miniapp-context{margin-top:4px;font-size:13px;line-height:1.5}
.miniapp-context summary{min-height:44px;padding:12px 0;cursor:pointer;color:var(--muted)}
.miniapp-context summary:focus-visible{outline:2px solid #3776e5;outline-offset:2px}
.miniapp-context[open]{padding-bottom:8px}
.miniapp-context #ticketServiceLevels h3{font-size:14px;margin:12px 0 6px}
.miniapp-context #ticketServiceLevels p{margin:6px 0}
.header #error{padding:8px 10px;border:1px solid #f0c5c1;border-radius:8px;background:#fff1f0;font-size:13px}
.tabs .tab-btn{min-height:44px}
.modal-card .input{font-size:16px}
@media(min-width:760px){.header{max-width:760px;margin:0 auto}.tabs{max-width:760px;margin:0 auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}