/* PanelAiBot v2.8.9 — theme parity, settings repair, mobile header hardening */

/* Desktop: the brand already lives in the sidebar, so do not duplicate it in the top bar. */
@media (min-width:821px){
  body.v280-shell .v286-topbar-brand{display:none!important}
  body.v280-shell .v24-topbar-title{min-width:0!important}
}

/* Settings regression fix: span-99 placed the real sections many implicit grid rows below the nav. */
body.v280-shell .settings-workbench>.settings-control-nav{grid-row:auto!important}
body.v280-shell .settings-workbench>[data-settings-section]:not([hidden]),
body.v280-shell .settings-workbench>.section-pair:not([hidden]){display:block!important;visibility:visible!important;opacity:1!important;transform:none!important}
body.v280-shell .settings-form .reveal{opacity:1!important;transform:none!important}
body.v280-shell .settings-workbench>[data-settings-section][hidden]{display:none!important}

/* Light mode top bar must actually be light. Sidebar intentionally stays navy. */
html[data-resolved-theme="light"] body.v280-shell .v24-topbar{
  background:#ffffff!important;border-bottom:1px solid #dfe7f2!important;color:#14213a!important;
}
html[data-resolved-theme="light"] body.v280-shell .v24-icon-button,
html[data-resolved-theme="light"] body.v280-shell .v282-theme-button,
html[data-resolved-theme="light"] body.v280-shell .v24-select-form select{
  background:#f8faff!important;border-color:#dce5f1!important;color:#1c2a45!important;
}
html[data-resolved-theme="light"] body.v280-shell .v24-icon-button:hover,
html[data-resolved-theme="light"] body.v280-shell .v282-theme-button:hover{background:#eef3ff!important;border-color:#bfcdf0!important;color:#3157f6!important}

/* Command palette has complete light + dark skins instead of being permanently dark. */
html[data-resolved-theme="light"] .v285-command-backdrop{background:rgba(28,39,67,.25)!important}
html[data-resolved-theme="light"] .v285-command-dialog{background:#fff!important;border-color:#dbe4f2!important;color:#17233c!important;box-shadow:0 28px 70px rgba(33,48,80,.18)!important}
html[data-resolved-theme="light"] .v285-command-input-wrap{background:#f8faff!important;border-color:#6c7df3!important;box-shadow:0 0 0 3px rgba(82,92,255,.08)!important}
html[data-resolved-theme="light"] .v285-command-input-wrap input{color:#17233c!important;background:transparent!important}
html[data-resolved-theme="light"] .v285-command-input-wrap input::placeholder{color:#8390a8!important}
html[data-resolved-theme="light"] .v285-command-dialog kbd{background:#f2f5fb!important;border-color:#dbe3ef!important;color:#66758e!important}
html[data-resolved-theme="light"] .v285-command-results>a{color:#24314b!important}
html[data-resolved-theme="light"] .v285-command-results>a small{color:#7b889e!important}
html[data-resolved-theme="light"] .v285-command-results>a:hover,
html[data-resolved-theme="light"] .v285-command-results>a.active{background:#f1f5ff!important;border-color:#d7e0fb!important}
html[data-resolved-theme="light"] .v285-command-result-icon{background:#eef3ff!important;color:#5066e9!important}
html[data-resolved-theme="light"] .v285-command-dialog footer{border-color:#e6ebf3!important;color:#7b879c!important}

/* Settings light mode: explicit colors for every custom v286 component. */
html[data-resolved-theme="light"] body.v280-shell .settings-control-hero,
html[data-resolved-theme="light"] body.v280-shell .settings-control-nav,
html[data-resolved-theme="light"] body.v280-shell .settings-form .card,
html[data-resolved-theme="light"] body.v280-shell .settings-otp-panel,
html[data-resolved-theme="light"] body.v280-shell .verification-method-card{
  background:#fff!important;border-color:#e0e7f2!important;color:#14213a!important;
}
html[data-resolved-theme="light"] body.v280-shell .settings-control-hero{background:linear-gradient(115deg,#f5f7ff,#edf7ff)!important}
html[data-resolved-theme="light"] body.v280-shell .settings-control-nav button{color:#65758f!important}
html[data-resolved-theme="light"] body.v280-shell .settings-control-nav button:not(.active):hover{background:#f2f5fb!important;color:#24314b!important}
html[data-resolved-theme="light"] body.v280-shell .settings-form :where(h1,h2,h3,strong,b,label){color:#14213a!important}
html[data-resolved-theme="light"] body.v280-shell .settings-form :where(p,small,.hint){color:#71809a!important}
html[data-resolved-theme="light"] body.v280-shell .settings-form input:not([type=checkbox]):not([type=radio]),
html[data-resolved-theme="light"] body.v280-shell .settings-form select,
html[data-resolved-theme="light"] body.v280-shell .settings-form textarea{background:#fbfcff!important;border-color:#dce5f1!important;color:#15223b!important}
html[data-resolved-theme="light"] body.v280-shell .verification-method-card.selected{background:linear-gradient(135deg,#f1f4ff,#f9fbff)!important;border-color:#6274ff!important}

/* WhatsApp page follows the selected theme rather than forcing dark cards in light mode. */
html[data-resolved-theme="light"] body.v280-shell .wa288-status-card,
html[data-resolved-theme="light"] body.v280-shell .wa288-mini-stat,
html[data-resolved-theme="light"] body.v280-shell .wa288-module-grid>a,
html[data-resolved-theme="light"] body.v280-shell .wa288-runtime-card,
html[data-resolved-theme="light"] body.v280-shell .wa288-runtime-grid>div{
  background:#fff!important;border-color:#dfe7f2!important;color:#14213a!important;
}
html[data-resolved-theme="light"] body.v280-shell .wa288-hero{background:linear-gradient(120deg,#f1edff 0%,#f5f8ff 42%,#eef7ff 100%)!important;border-color:#d8e0f2!important;color:#15223b!important}
html[data-resolved-theme="light"] body.v280-shell .wa288-hero-copy h2{color:#14213a!important}
html[data-resolved-theme="light"] body.v280-shell .wa288-hero-copy p,
html[data-resolved-theme="light"] body.v280-shell .wa288-hero-copy>small,
html[data-resolved-theme="light"] body.v280-shell .wa288-status-card small,
html[data-resolved-theme="light"] body.v280-shell .wa288-mini-stat small,
html[data-resolved-theme="light"] body.v280-shell .wa288-module-grid small,
html[data-resolved-theme="light"] body.v280-shell .wa288-runtime-grid small{color:#71809a!important}
html[data-resolved-theme="light"] body.v280-shell .wa288-module-grid>a>span{background:#f0edff!important;color:#674ce9!important}
html[data-resolved-theme="light"] body.v280-shell .wa288-runtime-grid>div{background:#f9fbff!important}

/* Docs page theme parity. */
html[data-resolved-theme="light"] body.v280-shell .docs288-hero{background:linear-gradient(110deg,#eafbf5,#eef7ff 56%,#f8fbff)!important;border-color:#cfe8df!important;color:#14213a!important}
html[data-resolved-theme="light"] body.v280-shell .docs288-hero p{color:#70809a!important}
html[data-resolved-theme="light"] body.v280-shell .docs288-steps,
html[data-resolved-theme="light"] body.v280-shell .docs288-step,
html[data-resolved-theme="light"] body.v280-shell .docs288-complete,
html[data-resolved-theme="light"] body.v280-shell .docs288-help,
html[data-resolved-theme="light"] body.v280-shell .docs288-help nav a{
  background:#fff!important;border-color:#dfe7f2!important;color:#17233c!important;
}
html[data-resolved-theme="light"] body.v280-shell .docs288-step-icon,
html[data-resolved-theme="light"] body.v280-shell .docs288-help nav a>span{background:#eef2ff!important;color:#604de1!important}
html[data-resolved-theme="light"] body.v280-shell .docs288-step-body,
html[data-resolved-theme="light"] body.v280-shell .docs288-help nav small{color:#74839b!important}
html[data-resolved-theme="light"] body.v280-shell .docs288-health{background:#effbf5!important;border-color:#cbeada!important}

/* Hero/tutorial strip should follow the mode too. */
html[data-resolved-theme="light"] body.v280-shell .v285-page-tutorial{background:linear-gradient(115deg,#f8faff,#eef5ff)!important;border-color:#dfe7f3!important;color:#15223a!important}
html[data-resolved-theme="dark"] body.v280-shell .v285-page-tutorial{background:linear-gradient(115deg,#0b1b36,#08162d)!important;border-color:#1a3a61!important;color:#eef5ff!important}

/* Mobile: the menu button and top controls inherit the active theme. Brand stays visible only here. */
@media(max-width:820px){
  body.v280-shell .v286-topbar-brand{display:flex!important}
  body.v280-shell .v24-top-user{display:none!important}
  html[data-resolved-theme="light"] body.v280-shell .v24-topbar{background:#fff!important;border-color:#dfe7f2!important}
  html[data-resolved-theme="light"] body.v280-shell .v24-menu-button,
  html[data-resolved-theme="light"] body.v280-shell .v24-topbar-actions .v24-icon-button,
  html[data-resolved-theme="light"] body.v280-shell .v24-topbar-actions .v282-theme-button{background:#f8faff!important;border-color:#dce5f1!important;color:#1e2b45!important}
  html[data-resolved-theme="light"] body.v280-shell .v24-menu-button span{background:#23314d!important}
  html[data-resolved-theme="dark"] body.v280-shell .v24-menu-button,
  html[data-resolved-theme="dark"] body.v280-shell .v24-topbar-actions .v24-icon-button,
  html[data-resolved-theme="dark"] body.v280-shell .v24-topbar-actions .v282-theme-button{background:#0a1b35!important;border-color:#264669!important;color:#d8e6fb!important}
  body.v280-shell.sidebar-open #main-sidebar,html.sidebar-open body.v280-shell #main-sidebar{visibility:visible!important;opacity:1!important;transform:translate3d(0,0,0)!important}
  body.v280-shell .settings-workbench>.settings-control-nav{grid-row:auto!important}
}


/* v2.8.10 — Bybit + wallet theme parity */
@media(max-width:820px){
  html[data-resolved-theme="light"] body.v280-shell .v286-topbar-brand b{color:#111827!important}
  html[data-resolved-theme="dark"] body.v280-shell .v286-topbar-brand b{color:#f8fbff!important}
  body.v280-shell .v286-topbar-brand{max-width:152px;min-width:0}
  body.v280-shell .v286-topbar-brand b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
html[data-resolved-theme="dark"] body.v280-shell .v285-payment-instructions,
html[data-resolved-theme="dark"] body.v280-shell .v285-payment-instructions .embedded-code-frame,
html[data-resolved-theme="dark"] body.v280-shell .v285-payment-instructions .payment-description-frame{background:#07152b!important;border-color:#233a5d!important;color:#eaf2ff!important}
html[data-resolved-theme="light"] body.v280-shell .v285-payment-instructions .embedded-code-frame,
html[data-resolved-theme="light"] body.v280-shell .v285-payment-instructions .payment-description-frame{background:#fff!important;border-color:#dce5f1!important;color:#17233c!important}
.gateway-legacy-auth{padding:10px 12px;border:1px solid var(--n286-border,#dce5f1);border-radius:12px}
.gateway-legacy-auth summary{cursor:pointer;font-weight:800}
.gateway-legacy-auth label{margin-top:10px}