/* Human Bot IA V97: modo de apariencia por cuenta con ajustes accesibles y adaptación móvil */
:root{--hb97-accent:#C02362;--hb97-accent-ink:#fff}
/* Reutilizar color escogido sin cambiar los colores de chats personalizados. */
.chat-filters button.selected,.fab,.mic,.badge,
#hb61Panel .hb61-action:not(.hb61-outline),
#hb96QuickOverlay .hb96-quick-manage,
#hb95-style-dialog .hb95-actions .hb95-save,
#hb72Tools .hb72-primary,
#hb52-settings-overlay .primary{background:var(--hb97-accent)!important;color:var(--hb97-accent-ink)!important}
:where(.app,.hb97-dialog,.hb61-card) a:focus-visible,:where(.app,.hb97-dialog,.hb61-card) button:focus-visible{outline:2px solid var(--hb97-accent)!important;outline-offset:3px}
#hb97Overlay{position:fixed;inset:0;display:none;justify-content:center;align-items:center;padding:env(safe-area-inset-top) 13px env(safe-area-inset-bottom);background:rgba(0,0,0,.73);z-index:2147482400;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#hb97Overlay.open{display:flex}
.hb97-dialog{color:#f4f6f8;background:#131d23;border:1px solid #40515b;width:min(100%,540px);max-height:min(94dvh,820px);overflow-y:auto;overscroll-behavior:contain;border-radius:22px;box-shadow:0 22px 68px #0009;display:flex;flex-direction:column}
.hb97-head{padding:19px 20px 17px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #33434b;flex:none}
.hb97-head h2{font-size:21px;line-height:1.3;color:inherit;margin:0 0 4px;font-weight:750}
.hb97-head p{margin:0;font-size:13px;line-height:1.45;color:#bdc8ce}
.hb97-dismiss{width:40px;height:40px;flex:none;background:#2a3741;border-radius:12px;color:#fff;font-size:26px;display:grid;place-items:center}
.hb97-body{padding:19px 20px 8px;min-height:0;overflow-y:auto}
.hb97-body h3{margin:0 0 12px;font-size:16px;color:inherit}
.hb97-body h3:not(:first-child){margin-top:23px}
.hb97-body>p{margin:0 0 11px;color:#c3cdd3;font-size:13px}
.hb97-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hb97-modes button{border-radius:12px;background:#26343d;min-width:0;min-height:57px;padding:10px 6px;font-size:13px;color:#f0f4f6;font-weight:600;line-height:1.35;border:2px solid transparent}
.hb97-modes button[aria-pressed="true"]{border-color:var(--hb97-accent);background:color-mix(in srgb,var(--hb97-accent) 22%,#26343d)}
.hb97-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 6px;justify-items:center;margin:8px 0 25px}
.hb97-swatch{position:relative;width:clamp(38px,10vw,56px);height:clamp(38px,10vw,56px);border-radius:50%;background:var(--chip);border:3px solid transparent;box-shadow:inset 0 0 0 1px #0005;display:grid;place-items:center}
.hb97-swatch[aria-pressed="true"]{outline:2px solid #fafafa;outline-offset:3px}
.hb97-swatch[aria-pressed="true"]:after{content:'✓';border-radius:50%;background:#fff;color:#15212a;width:22px;height:22px;font-size:16px;font-weight:800;display:grid;place-items:center}
.hb97-preview{padding:14px;border-radius:16px;background:#202c34;color:#fff;border:1px solid #475963;min-height:123px;display:flex;flex-direction:column;gap:12px}
.hb97-preview.light{background:#edf2f6;color:#17262d;border-color:#d1dce3}
.hb97-preview-brand{display:flex;align-items:center;gap:10px;min-width:0}
.hb97-preview-logo{display:grid;place-items:center;background:var(--preview-accent);color:var(--preview-ink);width:43px;height:43px;font-size:20px;font-weight:800;border-radius:13px;flex:none}
.hb97-preview-brand strong,.hb97-preview-brand small{display:block}.hb97-preview-brand strong{font-size:14px}.hb97-preview-brand small{font-size:11px;opacity:.78;margin-top:3px}
.hb97-preview-chat{align-self:flex-end;padding:10px 12px;border-radius:12px 12px 4px 12px;background:var(--preview-accent);color:var(--preview-ink);max-width:93%;font-size:13px;line-height:1.5}
.hb97-preview-chat span{opacity:.8;font-size:11px;margin-left:5px}
#hb97Error:empty{display:none}#hb97Error{color:#ffb4cb!important;font-size:13px;margin:10px 0 0;line-height:1.5}
.hb97-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px 16px;border-top:1px solid #34414a;flex:none;background:#131d23}
.hb97-foot span{color:#bdc8d0;font-size:12px}.hb97-foot button{border-radius:12px;min-height:43px;padding:10px 25px;background:var(--hb97-accent);color:var(--hb97-accent-ink);font-weight:750;font-size:14px}
#hb61Panel .hb97-profile-settings{display:block;padding-top:14px;margin-top:12px}
#hb61Panel .hb97-profile-settings button{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;background:#26353e!important;color:white!important}
#hb61Panel .hb97-profile-settings button span{font-size:12px;color:#bbc7ce;font-weight:400}
/* Acento del perfil y popups auxiliares */
#hb96QuickOverlay .hb96-quick-option strong{color:var(--hb97-accent)}
#hb96QuickOverlay .hb96-quick-sub{font-size:12px;line-height:1.5;color:#b9c7ce;margin:4px 0 0}
#hb96QuickOverlay .hb96-results{padding:11px 18px 1px;color:#bac7cd;font-size:12px;font-weight:650}
#hb96QuickOverlay .hb96-quick-option{border-radius:15px;transition:background-color .15s,border-color .15s;min-height:77px}
#hb96QuickOverlay .hb96-quick-option:hover,#hb96QuickOverlay .hb96-quick-option:focus-visible{background:#273640;border-color:var(--hb97-accent)}
#hb96QuickOverlay .hb96-reply-badge{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
#hb96QuickOverlay .hb96-reply-badge strong{margin:0;max-width:100%;overflow-wrap:anywhere}
#hb96QuickOverlay .hb96-reply-arrow{font-size:15px;flex:none;color:#b6c4cc}
/* Estados de activación: solo etiquetas comprensibles, nunca términos del navegador */
#hb61PushStatus{font-size:14px!important;font-weight:650;color:#cdd9df!important}
#hb61PushStatus[data-enabled="1"]{color:#84dab8!important}
/* Modo claro — superficies principales, ventanas, mensajes y herramientas. */
html.hb97-light body,html.hb97-light .app,html.hb97-light #home,
html.hb97-light #profile,html.hb97-light #secondary{background:#f5f7fa!important;color:#14232b!important}
html.hb97-light .topbar,html.hb97-light .bottomnav,html.hb97-light .chat-head,
html.hb97-light .composer{background:#fff!important;color:#14232b!important;border-color:#dce4ea!important}
html.hb97-light .brandtitle,html.hb97-light .top-icon,
html.hb97-light .navitem,html.hb97-light .back,html.hb97-light .head-actions button,
html.hb97-light .chatname,html.hb97-light .profile-name{color:#14232b!important}
html.hb97-light .searchbar,html.hb97-light .chat-filters button:not(.selected),
html.hb97-light .archive .folder,html.hb97-light .navitem.active .navico,
html.hb97-light .composebox,html.hb97-light .action-circle,
html.hb97-light .product{background:#e8eef3!important;color:#16262f!important}
html.hb97-light .searchbar input,html.hb97-light .composebox textarea{color:#16262f!important}
html.hb97-light .navitem.active .navico{color:var(--hb97-accent)!important}
html.hb97-light .chatrow{border-bottom:1px solid #e8edf1}
html.hb97-light .chatinfo{border-color:#e1e7eb}
html.hb97-light .preview,html.hb97-light .chatdate,
html.hb97-light .profile-phone,html.hb97-light .headsub,
html.hb97-light .simple-content{color:#576772!important}
html.hb97-light .menu,html.hb97-light .simple-card,
html.hb97-light .profile-row{background:#fff!important;color:#16262f!important;border-color:#e0e6eb!important}
html.hb97-light .menu button{color:#16262f!important}
html.hb97-light #conversation:not(.hb95-chat-style) .chatwall{background-color:#f5f7fa!important;background-image:radial-gradient(#dce5eb .8px,transparent .8px)!important;color:#15252d!important}
html.hb97-light #conversation:not(.hb95-chat-style) .msg:not(.out){background:#e3eaf0!important;color:#15252d!important}
html.hb97-light #conversation:not(.hb95-chat-style) .msg.out{background:var(--hb97-accent)!important;color:var(--hb97-accent-ink)!important}
html.hb97-light #conversation:not(.hb95-chat-style) .encryption,
html.hb97-light #conversation:not(.hb95-chat-style) .datepill{background:#e8eef2!important;color:#42545e!important}
html.hb97-light .hb61-status,html.hb97-light #hb61Panel .hb61-status{color:#b91c52!important}
html.hb97-light #hb61Panel .hb61-card{background:#fff!important;color:#172630!important;border-color:#d7e2e9!important}
html.hb97-light #hb61Panel .hb61-card :is(h2,h3,label){color:#1a2b34!important}
html.hb97-light #hb61Panel .hb61-card :is(input,select,textarea){background:#f3f6f9!important;color:#16242c!important;border-color:#b9c9d3!important}
html.hb97-light #hb61Panel .hb61-card p{color:#485a64!important}
html.hb97-light #hb61Panel .hb61-group{border-color:#e2e8ed!important}
html.hb97-light .hb97-dialog{background:#fff;color:#13232b;border-color:#d5e1e9}
html.hb97-light .hb97-head,html.hb97-light .hb97-foot{background:#fff;border-color:#e0e7ec}
html.hb97-light .hb97-head p,html.hb97-light .hb97-body>p,html.hb97-light .hb97-foot span{color:#50616a}
html.hb97-light .hb97-modes button{color:#152730;background:#edf2f5}
html.hb97-light .hb97-modes button[aria-pressed="true"]{background:color-mix(in srgb,var(--hb97-accent) 16%,#edf2f5)}
html.hb97-light .hb97-dismiss{background:#e8eef2;color:#172731}
html.hb97-light #hb96QuickPanel,html.hb97-light #hb95-style-dialog{background:#fff!important;color:#162730!important;border-color:#d9e2e8!important}
html.hb97-light #hb96QuickPanel h2,html.hb97-light #hb95-style-dialog h2{color:#162730!important}
html.hb97-light #hb96QuickPanel .hb96-quick-option,
html.hb97-light #hb95-style-dialog .hb95-mode button{background:#f0f4f7!important;color:#192931!important;border-color:#dbe3e9!important}
html.hb97-light #hb96QuickPanel .hb96-quick-option span,
html.hb97-light #hb96QuickPanel .hb96-quick-sub,
html.hb97-light #hb96QuickPanel .hb96-results,
html.hb97-light #hb95-style-dialog .hb95-caption{color:#50616a!important}
html.hb97-light #hb96QuickSearch{background:#f2f5f7!important;color:#14232b!important;border-color:#bfcdd5!important}
html.hb97-light #hb96QuickPanel .hb96-quick-head,html.hb97-light #hb96QuickPanel .hb96-quick-foot{border-color:#e0e8ed!important}
html.hb97-light #hb96QuickPanel :is(.hb96-quick-close,.hb96-quick-dismiss){color:#26343d!important;background:#e7edf1!important}
html.hb97-light #hb95-style-dialog .hb95-actions{background:#fff!important}
html.hb97-light #hb72Tools,html.hb97-light #hb52-settings-overlay .hb52-settings-card{color:#15262e}
/* Keep the PWA and dropdowns usable in very small portrait screens. */
#hb59Country,.hb-auth-card .hb94-country-select,#hb-login-country,#hb-reg-country{width:100%!important;min-width:0!important;max-width:100%!important;text-overflow:clip!important;white-space:nowrap!important;font-variant-numeric:tabular-nums}
@media(max-width:480px){
 #hb97Overlay{align-items:flex-end;padding:0}
 .hb97-dialog{width:100%;border-radius:23px 23px 0 0;max-height:calc(100dvh - 12px);padding-bottom:env(safe-area-inset-bottom)}
 .hb97-swatches{grid-template-columns:repeat(5,minmax(0,1fr))}
 .hb97-head,.hb97-foot{padding-left:16px;padding-right:16px}.hb97-body{padding:16px}
 .hb97-modes button{font-size:12px;min-height:62px}
 #hb96QuickOverlay{align-items:flex-end!important;padding:0!important}
 #hb96QuickPanel{width:100%!important;max-height:91dvh!important;border-radius:22px 22px 0 0!important;padding-bottom:env(safe-area-inset-bottom)}
}
@media(max-width:345px){.hb97-swatches{gap:10px 1px}.hb97-modes button{font-size:11px;padding:8px 3px}.hb97-head h2{font-size:20px}}
html.hb97-light #hb61Panel #hb61PushStatus[data-enabled="1"]{color:#11734D!important}
html.hb97-light #hb61Panel #hb61PushStatus[data-enabled="0"]{color:#566871!important}
