:root {
  --sidebar-bg: #f7f7f8;
  --composer-border: #dedede;
  --soft-hover: #ececee;
}

body { background: #fff !important; }
#sidebar { background: var(--sidebar-bg) !important; border-right-color: transparent !important; transition: width 260ms var(--z-ease), transform 260ms var(--z-ease) !important; }
#sidebar .sidebar-header { min-height: 52px !important; padding: 0 12px !important; }
#sidebar .sidebar-full-brand { font-size: 16px !important; font-weight: 620 !important; }
#sidebar .sidebar-brand-btn, #sidebar .menu-toggle { border-radius: 7px !important; }
#sidebar .nav-content { padding-left: 8px !important; padding-right: 8px !important; }
#sidebar .nav-link { min-height: 38px !important; border-radius: 7px !important; font-size: 14px !important; font-weight: 430 !important; }
#sidebar .nav-link:hover { background: #ececee !important; }
#sidebar .nav-link .material-symbols-rounded { font-size: 19px !important; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20 !important; }
#sidebar .history-label { min-height: 38px !important; padding: 0 16px !important; color: #888 !important; font-size: 12px !important; font-weight: 510 !important; }
#sidebar .sidebar-history-scroll { padding-bottom: 4px !important; }
#sidebar .chat-history-item, #sidebar .history-item { min-height: 34px !important; border-radius: 7px !important; font-size: 13px !important; font-weight: 420 !important; }

.viewport { background: #fff !important; }
.header-bar { min-height: 52px !important; height: 52px !important; padding: 0 18px !important; border-bottom: 0 !important; }
.model-picker-btn { min-height: 34px !important; padding: 0 8px !important; border-radius: 7px !important; font-size: 15px !important; font-weight: 430 !important; }
.model-picker-btn:hover { background: #f2f2f2 !important; }
.model-picker-arrow { font-size: 17px !important; }
.top-utility-icon-btn { width: 34px !important; height: 34px !important; border-radius: 7px !important; }
#auth-section { gap: 7px !important; }
#auth-section .btn { min-height: 34px !important; padding: 0 13px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 530 !important; }
#auth-section .btn-primary { background: #171717 !important; }

.idle-composer-brand { margin-bottom: 27px !important; }
.idle-brand-mark { display: none !important; }
.idle-brand-text { color: #242424 !important; font-size: 25px !important; font-weight: 470 !important; letter-spacing: 0 !important; }
.input-region { width: min(780px, calc(100% - 32px)) !important; }
.composer { border: 1px solid var(--composer-border) !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,.025), 0 8px 24px rgba(0,0,0,.055) !important; }
.composer:hover { border-color: #d7d7d7 !important; }
.composer:focus-within { border-color: #d4d4d4 !important; outline: none !important; box-shadow: 0 1px 2px rgba(0,0,0,.025), 0 8px 24px rgba(0,0,0,.055) !important; }
.composer textarea { color: #202020 !important; font-size: 15px !important; font-weight: 410 !important; }
.composer textarea::placeholder { color: #939393 !important; }
.btn-action-plus, .mic-btn { color: #555 !important; }
.btn-action-plus:hover, .mic-btn:hover { background: #f1f1f1 !important; }
#sendBtn { min-width: 38px !important; height: 38px !important; border-radius: 11px !important; }
#sendBtn.record-idle { padding: 0 13px !important; }
.legal-foot { color: #989898 !important; font-size: 11px !important; }
.user-bubble { background: #f3f3f3 !important; border-radius: 15px !important; }
.ai-bubble { color: #242424 !important; }
.ai-bubble hr { height: 1px; margin: 20px 0; border: 0; background: #e7e7e7; }

.guest-auth-slot, .sidebar-bottom-guest { background: #fafafa !important; }
.sidebar-auth-slot.guest-auth-slot .sidebar-login-box { width: 100% !important; margin: 0 !important; padding: 14px 14px 12px !important; border: 0 !important; border-top: 1px solid #e5e5e5 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.sidebar-login-copy .emphasis { font-size: 13px !important; font-weight: 550 !important; }
.sidebar-login-copy .supporting { color: #777 !important; font-size: 12px !important; line-height: 1.4 !important; }
.sidebar-login-box .sidebar-auth-actions button { min-height: 35px !important; border-radius: 8px !important; font-size: 13px !important; }
.sidebar-bottom.sidebar-bottom-guest, .sidebar-auth-slot.guest-auth-slot { min-height: 134px !important; flex-basis: 134px !important; }
body.guest-auth-shell #chatOptionsBtn, body.guest-auth-shell #temporaryChatBtn { display: none !important; }

#sidebar:not(.collapsed) .sidebar-bottom:not(.sidebar-bottom-guest) { position: relative !important; top: -1px !important; height: 60px !important; min-height: 60px !important; flex: 0 0 60px !important; gap: 0 !important; padding: 0 !important; border-top: 1px solid #e5e5e5 !important; }
#sidebar:not(.collapsed) .sidebar-auth-slot.member-auth-slot, #sidebar:not(.collapsed) .sidebar-bottom-profile, #sidebar:not(.collapsed) .sidebar-user-menu-wrap { width: 100% !important; min-height: 60px !important; margin: 0 !important; padding: 0 !important; }
#sidebar:not(.collapsed) .sidebar-profile-shell { display: contents !important; }
#sidebar:not(.collapsed) .sidebar-profile-btn { width: 100% !important; height: 60px !important; min-height: 60px !important; padding: 0 13px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
#sidebar:not(.collapsed) .sidebar-profile-btn:hover, #sidebar:not(.collapsed) .sidebar-profile-btn[aria-expanded="true"] { background: #eeeeef !important; }

.composer-add-menu, .model-picker-menu, .sidebar-profile-menu, .response-more-menu { border: 1px solid #e3e3e3 !important; border-radius: 10px !important; background: #fff !important; box-shadow: var(--z-shadow-menu) !important; }
.composer-add-menu { width: 216px !important; min-width: 216px !important; max-width: 216px !important; padding: 5px !important; }
.composer-add-menu .composer-add-menu-item { min-height: 37px !important; padding: 0 9px !important; border-radius: 7px !important; gap: 10px !important; font-size: 13px !important; font-weight: 440 !important; }
.composer-add-menu .composer-add-menu-item:hover { background: #f1f1f1 !important; }
.composer-add-menu .composer-add-menu-item .material-symbols-rounded { font-size: 19px !important; font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 20 !important; }
.model-picker-menu { width: min(350px, calc(100vw - 20px)) !important; min-width: min(350px, calc(100vw - 20px)) !important; max-width: min(350px, calc(100vw - 20px)) !important; max-height: min(470px, var(--model-menu-max-h, calc(100dvh - 24px))) !important; padding: 6px !important; }
.model-picker-menu.show { display: flex !important; flex-direction: column; overflow: hidden !important; }
.model-picker-list { min-height: 0; max-height: 310px; overflow-y: auto; }
.model-picker-section-label { padding: 6px 8px; color: #858585; font-size: 11px; font-weight: 540; }
.intelligence-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 7px 0 0; border-top: 1px solid #ececec; }
.intelligence-level-btn { min-height: 31px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: #666; font-size: 11px; font-weight: 450; }
.intelligence-level-btn:hover { background: #f1f1f1; }
.intelligence-level-btn.active { background: #ededed; color: #151515; }

.modal-overlay, .workspace-sheet-overlay, .library-modal-overlay, .personality-modal-overlay, .search-modal-overlay { background: rgba(0,0,0,.22) !important; backdrop-filter: blur(2px) !important; }
.modal-card, .library-modal, .personality-modal, .search-modal { border: 1px solid rgba(0,0,0,.08) !important; border-radius: 12px !important; background: #fff !important; box-shadow: var(--z-shadow-float) !important; }
.workspace-sheet-panel { width: min(410px, calc(100vw - 24px)) !important; border: 1px solid rgba(0,0,0,.08) !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 22px 60px rgba(0,0,0,.16) !important; overflow: hidden !important; }
.workspace-sheet-close { top: 14px !important; right: 14px !important; width: 32px !important; height: 32px !important; border-radius: 7px !important; }
.workspace-sheet-panel .workspace-login-sheet, .workspace-sheet-panel .workspace-signup-sheet { width: 100% !important; min-height: 0 !important; padding: 26px 36px 24px !important; }
.workspace-sheet-panel .workspace-login-sheet header, .workspace-sheet-panel .workspace-signup-sheet header { min-height: 0 !important; margin: 0 0 26px !important; padding: 0 !important; text-align: left !important; }
.workspace-sheet-panel .workspace-login-sheet .logo-mark, .workspace-sheet-panel .workspace-signup-sheet .logo-mark { margin: 0 0 4px !important; font-size: 13px !important; font-weight: 600 !important; }
.workspace-sheet-panel .workspace-login-sheet h2, .workspace-sheet-panel .workspace-signup-sheet h2 { margin: 0 !important; font-size: 23px !important; font-weight: 530 !important; }
.workspace-sheet-panel .google-signin-slot:empty { display: none !important; min-height: 0 !important; margin: 0 !important; }
.workspace-login-sheet:has(.google-signin-slot:empty) .auth-divider, .workspace-signup-sheet:has(.google-signin-slot:empty) .auth-divider { display: none !important; }
.workspace-sheet-panel .auth-divider { margin: 15px 0 !important; color: #888 !important; font-size: 11px !important; }
.workspace-sheet-panel .form-stack { gap: 13px !important; }
.workspace-sheet-panel .form-group label { margin-bottom: 6px !important; color: #555 !important; font-size: 11px !important; font-weight: 500 !important; }
.workspace-sheet-panel .input-wrapper { border: 1px solid #dedede !important; border-radius: 8px !important; background: #fff !important; }
.workspace-sheet-panel .input-wrapper:focus-within { border-color: #a9a9a9 !important; box-shadow: none !important; }
.workspace-sheet-panel input { height: 43px !important; font-size: 13px !important; }
.workspace-sheet-panel .input-wrapper > .material-symbols-rounded { color: #777 !important; font-size: 17px !important; }
.workspace-sheet-panel .btn-submit { min-height: 43px !important; margin-top: 3px !important; border-radius: 8px !important; background: #171717 !important; font-size: 13px !important; font-weight: 550 !important; }
.workspace-sheet-panel .footer-link { margin: 17px 0 0 !important; color: #666 !important; font-size: 12px !important; }
.workspace-sheet-panel .policy-agreement { font-size: 10px !important; }

.workspace-sheet-panel.workspace-settings-sheet { width: min(900px, calc(100vw - 32px)) !important; height: min(680px, calc(100dvh - 32px)) !important; border-radius: 12px !important; display: grid !important; grid-template-columns: 225px minmax(0, 1fr) !important; }
.workspace-settings-nav { padding: 72px 12px 14px !important; border-right: 1px solid #e8e8e8 !important; background: #fafafa !important; }
.settings-nav-item { min-height: 37px !important; padding: 0 10px !important; border-radius: 7px !important; color: #444 !important; gap: 9px !important; font-size: 13px !important; font-weight: 440 !important; }
.settings-nav-item:hover, .settings-nav-item.active { background: #ededed !important; }
.settings-nav-item .material-symbols-rounded { font-size: 18px !important; }
.workspace-settings-main { padding: 28px 32px 34px !important; }
.workspace-settings-main h1 { margin: 0 0 20px !important; padding-bottom: 18px !important; border-bottom: 1px solid #e6e6e6 !important; font-size: 24px !important; font-weight: 520 !important; }
.settings-security-card { min-height: 116px !important; margin-bottom: 12px !important; padding: 20px !important; border-radius: 9px !important; background: #f5f5f5 !important; }
.settings-security-copy strong { font-size: 14px !important; font-weight: 560 !important; }
.settings-security-copy p { font-size: 12px !important; }
.workspace-settings-sheet .settings-row { min-height: 58px !important; padding: 10px 0 !important; }
.workspace-settings-sheet .row-title { font-size: 13px !important; font-weight: 500 !important; }
.workspace-settings-sheet .row-copy { font-size: 11px !important; }
.settings-value-btn, .workspace-settings-sheet .action, .workspace-settings-sheet .settings-select, .settings-card-action { min-height: 32px !important; border-radius: 7px !important; font-size: 12px !important; }

.response-action-btn[data-action="more"] .material-symbols-rounded { font-size: 0 !important; }
.response-action-btn[data-action="more"] .material-symbols-rounded::after { display: block; width: 16px; height: 4px; background: radial-gradient(circle, currentColor 1.25px, transparent 1.4px) 0 50% / 6px 4px repeat-x; content: ""; }

body.temporary-chat-mode .input-region .composer { background: #242424 !important; border-color: #303030 !important; box-shadow: 0 8px 24px rgba(0,0,0,.11) !important; }
body.temporary-chat-mode .composer textarea { color: #fff !important; }
body.temporary-chat-mode .composer textarea::placeholder { color: #9d9d9d !important; }

@media (max-width: 700px) {
  .header-bar { padding: 0 10px !important; }
  .input-region { width: calc(100% - 18px) !important; }
  .idle-brand-text { font-size: 22px !important; }
  .composer { border-radius: 15px !important; }
  .workspace-sheet-panel { width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; }
  .workspace-sheet-panel .workspace-login-sheet, .workspace-sheet-panel .workspace-signup-sheet { padding: 24px 22px 22px !important; }
  .workspace-sheet-panel.workspace-settings-sheet { width: calc(100vw - 12px) !important; height: calc(100dvh - 12px) !important; grid-template-columns: 1fr !important; }
  .workspace-settings-nav { padding: 54px 8px 8px !important; border-right: 0 !important; border-bottom: 1px solid #e8e8e8 !important; display: flex !important; overflow-x: auto !important; }
  .settings-nav-item { flex: 0 0 auto !important; }
  .workspace-settings-main { padding: 20px 18px 28px !important; }
}

/* ZexirAI's colored accent is reserved for primary decisions. */
#sendBtn.ready,
#sendBtn.streaming,
body.temporary-chat-mode #sendBtn.ready,
body.temporary-chat-mode #sendBtn.streaming,
#auth-section .btn-primary,
.btn-submit,
.modal-btn-primary {
  border-color: transparent !important;
  background: var(--z-action-gradient) !important;
  color: #fff !important;
  box-shadow: var(--z-action-shadow) !important;
}

#sendBtn.ready:hover,
#auth-section .btn-primary:hover,
.btn-submit:hover,
.modal-btn-primary:hover {
  background: var(--z-action-gradient-hover) !important;
  box-shadow: 0 7px 18px rgba(91, 84, 159, 0.24), 0 1px 3px rgba(168, 95, 109, 0.14) !important;
}

body.incognito-mode #sendBtn.ready,
body.incognito-mode #sendBtn.record-idle,
#sendBtn.voice-chat-active:not(.ready):not(.streaming) {
  box-shadow: none !important;
}

#composerAddMenu .composer-add-menu-item .composer-menu-check[hidden] {
  display: none !important;
}