/*
 * AI Workspace Studio — full web app UX layer.
 * Visual/layout only: the feature engine remains app.js.
 */
:root{
  --ux-bg:#f6f7fb;
  --ux-surface:#fff;
  --ux-surface-2:#f9fafc;
  --ux-text:#111827;
  --ux-text-2:#475569;
  --ux-muted:#64748b;
  --ux-primary:#2563eb;
  --ux-primary-hover:#1d4ed8;
  --ux-success:#10b981;
  --ux-warning:#f59e0b;
  --ux-danger:#ef4444;
  --ux-info:#0ea5e9;
  --ux-line:#e5e7eb;
  --ux-line-strong:#dde3ee;
  --ux-shadow:0 8px 24px rgba(15,23,42,.08);
  --ux-radius-card:18px;
  --ux-radius-control:14px;
  --ux-radius-modal:22px;
  --ux-space-1:4px;
  --ux-space-2:8px;
  --ux-space-3:12px;
  --ux-space-4:16px;
  --ux-space-5:20px;
  --ux-space-6:24px;
  --ux-space-7:32px;
}

html,body{max-width:100vw;overflow-x:hidden;background:var(--ux-bg);color:var(--ux-text)}
body{font-family:"Noto Sans Arabic",system-ui,sans-serif;line-height:1.65}
body{font-size:calc(16px * var(--ux-text-scale,1))}
*,*::before,*::after{box-sizing:border-box;min-width:0}

/* Prevent horizontal overflow */
html, body, .app, .main, .content, .page, .panel, .panel > .body, .chat-shell, .chatlog {
  max-width: 100vw; overflow-x: hidden;
}

img,video,canvas,svg,table,pre{max-width:100%}
.app,.main,.content,.page,.panel,.panel>.body{max-width:100%;min-width:0}
.content{background:var(--ux-bg)}
.panel,.workspace-deck,.settings-overview-card,.modal .panel{
  border:1px solid var(--ux-line)!important;
  border-radius:var(--ux-radius-card)!important;
  background:var(--ux-surface)!important;
  box-shadow:none!important;
}
.btn,button,input,select,textarea{font:inherit}
.btn,button{border-radius:var(--ux-radius-control)}
.btn.dark,.btn.primary,.auth-submit-primary{
  background:var(--ux-primary)!important;
  border-color:var(--ux-primary)!important;
  color:#fff!important;
  box-shadow:0 5px 14px rgba(37,99,235,.18)!important;
}
.btn.dark:hover,.btn.primary:hover,.auth-submit-primary:hover{background:var(--ux-primary-hover)!important}
.btn.ghost{background:var(--ux-surface)!important;border-color:var(--ux-line)!important;color:var(--ux-text-2)!important}
input,select,textarea{
  border:1px solid var(--ux-line-strong)!important;
  border-radius:var(--ux-radius-control)!important;
  background:var(--ux-surface)!important;
  color:var(--ux-text)!important;
}
input:focus,select:focus,textarea:focus{
  outline:3px solid rgba(37,99,235,.12)!important;
  border-color:var(--ux-primary)!important;
}
.hint,.meta{color:var(--ux-muted)!important}
.status{border-radius:var(--ux-radius-control)}

/* Login card centered, premium Light Theme styled */
.auth-gate {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 16px !important;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  overflow-y: auto !important;
}

.auth-gate.show {
  display: flex !important;
}

.auth-gate.show ~ .app,
.auth-gate.show ~ .ux-bottom-nav {
  visibility: hidden !important;
  pointer-events: none !important;
}

.auth-gate .auth-shell {
  width: min(92vw, 560px) !important;
  max-width: 560px !important;
  margin: auto !important;
}

.auth-gate .auth-login-card {
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.1) !important;
  padding: 44px 38px !important;
  color: #1e293b !important;
}

.auth-gate .brand-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.auth-gate .brand-mark {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--ux-primary) 0%, #0ea5e9 100%);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #ffffff;
}

.auth-gate .brand-copy .name {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}

.auth-gate .brand-copy .sub {
  font-size: 11px;
  color: #64748b;
}

.auth-gate .auth-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 6px 0 !important;
}

.auth-gate .auth-copy {
  font-size: 13px !important;
  color: #64748b !important;
  margin-bottom: 24px !important;
}

.auth-gate .auth-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  background: #f1f5f9 !important;
  margin-bottom: 20px !important;
}

.auth-gate .auth-tab {
  width: auto !important;
  min-height: 36px !important;
  padding: 6px 4px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.auth-gate .auth-tab.active {
  background: #ffffff !important;
  color: var(--ux-primary) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

.auth-gate .auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-gate .auth-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auth-gate .auth-field label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.auth-gate .auth-field input {
  min-height: 42px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  padding-inline: 12px !important;
  border-radius: 12px !important;
}

.auth-gate .auth-field input:focus {
  border-color: var(--ux-primary) !important;
  outline: 3px solid rgba(37, 99, 235, 0.15) !important;
}

.auth-gate .auth-password-wrap {
  position: relative;
}

.auth-gate .auth-password-toggle {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: #64748b;
  font-size: 11px;
  cursor: pointer;
}

.auth-gate .auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}

.auth-gate .auth-inline-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}

.auth-gate .auth-inline-check input {
  width: 14px;
  height: 14px;
}

.auth-gate #authForgotPwBtn,
.auth-gate #authResendVerifyBtn {
  font-size: 11px !important;
  color: #64748b !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  text-decoration: underline;
}

.auth-gate .auth-submit-primary {
  width: 100% !important;
  min-height: 44px !important;
  font-weight: 700 !important;
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.auth-gate #authGateStatus {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  background: #fef2f2;
  border: 1px solid #fee2e2;
  color: #ef4444;
  margin-bottom: 12px;
}

.auth-gate #authGateStatus:empty {
  display: none !important;
}

.auth-gate .auth-provider-section {
  margin-bottom: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
}

.auth-gate .auth-provider-section[data-provider-unavailable="true"] {
  display: block !important;
  opacity: 0.6;
  pointer-events: none;
}

.auth-gate .auth-provider-section[data-provider-unavailable="true"] .auth-google-slot::after {
  content: "تسجيل Google غير مفعّل حاليًا من الخادم.";
  display: block;
  font-size: 11px;
  color: var(--ux-muted);
  text-align: center;
  margin-top: 8px;
  padding: 6px;
  border-radius: 8px;
  background: var(--ux-surface-2);
}

.auth-gate .auth-provider-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.auth-gate .auth-method-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.auth-gate .auth-fast-pill {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
}

.auth-gate #googleSignInSlot iframe {
  max-width: 100% !important;
  margin: 0 auto !important;
}

.auth-gate #authGoogleBrowserBtn {
  width: 100% !important;
  min-height: 40px !important;
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.auth-gate #authGoogleBrowserBtn:hover {
  background: #f8fafc !important;
}

.auth-gate .auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #94a3b8;
  font-size: 12px;
  margin: 14px 0;
}

.auth-gate .auth-divider::before,
.auth-gate .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.auth-gate .auth-plan-footnote {
  text-align: center;
  font-size: 11px;
  color: #64748b;
  margin-top: 14px;
}

.auth-gate .auth-card-footer-actions {
  display: none !important;
}

/* Home Accordion Option style */
.home-more-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  background: var(--ux-surface-2);
  border: 1px solid var(--ux-line-strong);
  border-radius: 14px;
  color: var(--ux-text-2);
  font-weight: 700;
  cursor: pointer;
  margin-top: 16px;
  transition: all 0.2s ease;
}
.home-more-btn:hover {
  background: var(--ux-line);
  color: var(--ux-text);
}
.home-more-btn .arrow {
  font-size: 11px;
  opacity: 0.6;
}
.home-more-options-panel {
  margin-top: 10px;
  animation: slideDownFade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideDownFade {
  0% { transform: translateY(-8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Home */
#page-home{padding:clamp(12px,3vw,24px)!important}
#page-home .home-shell{width:min(100%,1000px);margin:0 auto;display:grid;gap:16px}
#page-home .workspace-deck{
  padding:clamp(20px,5vw,32px)!important;
  background:linear-gradient(145deg, var(--ux-surface) 0%, var(--ux-surface-2) 100%)!important;
  box-shadow:var(--ux-shadow)!important;
}
#page-home .workspace-title{font-size:clamp(24px,5vw,28px)!important;color:var(--ux-text)!important}
#page-home .workspace-quick-actions{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
#page-home .workspace-quick-actions button,#page-home .workspace-shortcuts-row button{
  min-height:48px!important;border-radius:14px!important;white-space:normal!important
}
#page-home .home-context-strip{
  border:1px solid var(--ux-line)!important;border-radius:var(--ux-radius-card)!important;
  background:var(--ux-surface)!important;padding:14px 16px!important;box-shadow:none!important
}
#page-home .home-details-more{border:0!important;background:transparent!important}

/* Chat: quiet header, familiar conversation surface */
#page-chat{background:var(--ux-bg)!important;width:100%!important;max-width:100%!important}
#page-chat .chat-shell{width:100%!important;max-width:100%!important;margin:0!important;flex:1!important}
#page-chat .chat-header-stack{
  border:0!important;border-bottom:1px solid var(--ux-line)!important;
  background:rgba(255,255,255,.98)!important;box-shadow:0 1px 3px rgba(0,0,0,.04)!important;
  width:100%!important;max-width:100%!important;position:relative!important;z-index:30!important
}
#page-chat .chat-header-meta-bar{
  padding:8px 16px!important;gap:10px!important;width:100%!important;max-width:100%!important;
  box-sizing:border-box!important;display:flex!important;align-items:center!important;
  justify-content:space-between!important;min-height:52px!important;flex-wrap:nowrap!important;overflow:visible!important
}
#page-chat .chat-meta-page-title{font-size:16px!important;font-weight:800!important;white-space:nowrap!important}
#page-chat #chatTopProjectChip,
#page-chat #chatMetaUsageTag,
#page-chat #chatMetaSaveBtn,
#page-chat #chatTopHealthBtn,
#page-chat #chatHeaderToolsBar,
#page-chat .ux-history-trigger,
#page-chat #chatPhase9MoreWrap{display:none!important}
#page-chat .chat-topbar-model-slot{
  display:flex!important;align-items:center!important;gap:8px!important;
  margin-inline:auto!important;flex-wrap:nowrap!important
}
#page-chat .chat-topbar-model-slot select,
#page-chat .chat-topbar-model-slot button,
#page-chat #chatTopNewThreadBtn,
#topbarNewChatBtn{
  height:36px!important;padding:4px 12px!important;border-radius:10px!important;
  font-size:13px!important;font-weight:700!important;border:1px solid rgba(148,163,184,.35)!important;
  background:#ffffff!important;color:var(--ux-text,#1e293b)!important;
  box-shadow:0 1px 2px rgba(0,0,0,.04)!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:6px!important;box-sizing:border-box!important;white-space:nowrap!important;cursor:pointer!important;
  transition:all .15s ease!important
}
#page-chat .chat-topbar-model-slot select:hover,
#page-chat .chat-topbar-model-slot button:hover,
#page-chat #chatTopNewThreadBtn:hover,
#topbarNewChatBtn:hover{
  background:#f8fafc!important;border-color:rgba(37,99,235,.4)!important;color:#1d4ed8!important
}
#openSideBtn,
#chatPhase10NavMenuBtn,
#uxSideMenuTrigger{
  min-width:42px!important;height:36px!important;padding:0 10px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:10px!important;border:1px solid rgba(148,163,184,.35)!important;
  background:#ffffff!important;color:var(--ux-text,#1e293b)!important;
  font-size:18px!important;font-weight:800!important;cursor:pointer!important;
  box-shadow:0 1px 2px rgba(0,0,0,.04)!important
}
#openSideBtn:hover,
#chatPhase10NavMenuBtn:hover,
#uxSideMenuTrigger:hover{
  background:#f8fafc!important;border-color:rgba(37,99,235,.4)!important;color:#1d4ed8!important
}

/* Hide new chat button on non-chat subpages */
body:not(.chat-page-active) #topbarNewChatBtn,
#page-transcription.active ~ * #topbarNewChatBtn,
.page:not(#page-chat):not(#page-home).active ~ * #topbarNewChatBtn{
  display:none!important
}
#page-chat .ux-modes-trigger,
.ux-modes-trigger{
  height:36px!important;padding:4px 12px!important;border-radius:10px!important;
  font-size:13px!important;font-weight:700!important;border:1px solid rgba(37,99,235,.25)!important;
  background:#f0f7ff!important;color:#1d4ed8!important;
  display:inline-flex!important;align-items:center!important;gap:6px!important;
  cursor:pointer!important;white-space:nowrap!important
}
#page-chat .ux-modes-trigger:hover,
.ux-modes-trigger:hover{
  background:#dbeafe!important;border-color:#2563eb!important
}

/* Modes Sheet (Bottom Sheet UI) */
.ux-modes-sheet{position:fixed;inset:0;z-index:4200;display:none;align-items:flex-end;justify-content:center}
.ux-modes-sheet.show{display:flex}
.ux-sheet-backdrop{position:absolute;inset:0;border:0;border-radius:0;background:rgba(15,23,42,.46);backdrop-filter:blur(2px)}
.ux-sheet-panel{
  position:relative;width:min(100%,620px);max-height:min(82dvh,760px);overflow:auto;
  padding:20px 16px max(18px,env(safe-area-inset-bottom));border:1px solid var(--ux-line);
  border-radius:24px 24px 0 0;background:var(--ux-surface);box-shadow:0 -12px 36px rgba(15,23,42,.18)
}
.ux-sheet-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.ux-sheet-panel h2{margin:0;color:var(--ux-text);font-size:22px}
.ux-sheet-panel p{margin:3px 0 0;color:var(--ux-muted);font-size:13px}
.ux-sheet-close{width:38px;height:38px;border:1px solid var(--ux-line);background:var(--ux-surface-2);color:var(--ux-text)}
.ux-mode-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ux-mode-item{
  display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;text-align:start;
  padding:13px;border:1px solid var(--ux-line);background:var(--ux-surface-2);color:var(--ux-text);
  border-radius:16px;cursor:pointer;transition:all 0.2s ease;
}
.ux-mode-item.active{border-color:var(--ux-primary);background:rgba(37,99,235,.07);box-shadow:0 0 0 2px rgba(37,99,235,.08)}
.ux-mode-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--ux-surface);font-size:21px}
.ux-mode-copy{display:flex;flex-direction:column;gap:2px}
.ux-mode-copy strong{font-size:14px}.ux-mode-copy small{color:var(--ux-muted);font-size:11px;line-height:1.55}
.ux-mode-status{align-self:start;padding:3px 7px;border-radius:999px;background:#dcfce7;color:#047857;font-size:10px;font-weight:800}
.ux-mode-status.experimental{background:#fef3c7;color:#a16207}
.ux-mode-status.disabled{background:#f1f5f9;color:#64748b}

/* Floating Arabic Toasts */
.ux-notice-host{
  position:fixed;
  z-index:6000;
  inset-inline:16px;
  top:max(24px, env(safe-area-inset-top));
  display:grid;
  justify-items:center;
  gap:10px;
  pointer-events:none;
}
.ux-notice{
  width:100%;
  max-width:420px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
  border:1px solid var(--ux-line);
  border-radius:16px;
  background:var(--ux-surface);
  color:var(--ux-text);
  box-shadow:0 12px 32px rgba(15,23,42,0.12);
  pointer-events:auto;
  font-size:14px;
  font-weight:600;
  transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ux-notice.success{border-inline-start:5px solid var(--ux-success)}
.ux-notice.warning{border-inline-start:5px solid var(--ux-warning)}
.ux-notice.error{border-inline-start:5px solid var(--ux-danger)}
.ux-notice.info{border-inline-start:5px solid var(--ux-info)}
.ux-notice .ux-toast-close{
  border:0;
  background:transparent;
  color:var(--ux-muted);
  font-size:16px;
  cursor:pointer;
  padding:4px;
}
.ux-notice.fade-in {
  animation: toastFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ux-notice.fade-out {
  animation: toastFadeOut 0.3s ease forwards;
}

@keyframes toastFadeIn {
  0% { transform: translateY(-16px) scale(0.95); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes toastFadeOut {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-16px) scale(0.95); opacity: 0; }
}

/* Files, plans and secondary screens */
#page-files,#page-downloads,#page-projects,#page-knowledge{padding:clamp(12px,3vw,24px)!important}
#page-files>.toolbar,#page-downloads>.toolbar{border:1px solid var(--ux-line)!important;border-radius:var(--ux-radius-card)!important;background:var(--ux-surface)!important;padding:14px!important;margin-bottom:14px!important}
#page-files .file-row{border:1px solid var(--ux-line)!important;border-radius:14px!important;background:var(--ux-surface-2)!important;padding:12px!important;margin-bottom:10px!important}
#adminUsersPlansPanel{border:1px solid var(--ux-line)!important;border-radius:var(--ux-radius-card)!important;background:var(--ux-surface)!important;padding:14px!important}
#adminUsersPlansPanel table{width:100%;border-collapse:separate;border-spacing:0 8px}
#adminUsersPlansPanel th{color:var(--ux-muted);font-size:12px}
#adminUsersPlansPanel td{background:var(--ux-surface-2);padding:10px;border-block:1px solid var(--ux-line)}

/* Chat Input bar */
#page-chat .chatbar textarea,#page-chat .chatbar input[type=text]{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;flex:1!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}

/* Chat buttons */
#page-chat #chatAttachBtn,
#page-chat #voiceInputBtn,
#page-chat #composerLiveVoiceBtn,
#page-chat #sendBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  border: 1px solid var(--ux-line-strong) !important;
  background: var(--ux-surface-2) !important;
  color: var(--ux-text-2) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  padding: 0 !important;
}

#page-chat #sendBtn {
  background: var(--ux-primary) !important;
  border-color: var(--ux-primary) !important;
  color: #fff !important;
}

#page-chat #sendBtn:hover {
  background: var(--ux-primary-hover) !important;
  box-shadow: 0 4px 12px rgba(37,99,235,0.2) !important;
}

#page-chat #chatAttachBtn:hover,
#page-chat #voiceInputBtn:hover,
#page-chat #composerLiveVoiceBtn:hover {
  background: var(--ux-line) !important;
  color: var(--ux-text) !important;
}

#page-chat #regenBtn{display:none!important}
#page-chat .bubble table{display:block;max-width:100%;overflow-x:auto;scrollbar-width:thin}
#page-chat .bubble pre{max-width:100%;overflow:auto;white-space:pre-wrap;word-break:break-word}
#page-chat .bubble code,#page-chat .bubble td,#page-chat .bubble th{overflow-wrap:anywhere;word-break:break-word}
#page-chat .chat-attach-chips{width:min(100%,1280px)!important;margin:0 auto 8px!important;overflow-x:hidden!important;flex-wrap:wrap!important}

/* Settings and account */
#page-settings{padding:clamp(12px,3vw,24px)!important}
#page-settings .settings-page-shell{width:min(100%,980px)!important;margin:0 auto!important;padding-bottom:100px!important}
#page-settings .settings-page-header{padding:8px 2px 20px!important;align-items:center!important}
#page-settings .settings-page-title{font-size:clamp(24px,5vw,28px)!important;color:var(--ux-text)!important}
#page-settings .settings-page-lede{max-width:650px!important}
#page-settings .settings-main-panel planetary-head{padding:18px 20px!important}
#page-settings .settings-main-panel>.body{padding:20px!important}
#page-settings .settings-section-label{
  margin:22px 0 10px!important;padding:0!important;background:transparent!important;
  color:var(--ux-text)!important;font-size:16px!important;font-weight:800!important
}
#page-settings .row{gap:14px!important}
#page-settings .col{min-width:min(100%,220px)!important}
#page-settings .settings-advanced{border:1px solid var(--ux-line)!important;border-radius:14px!important;padding:12px!important}
.ux-settings-group{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px;
  margin-bottom:16px;border:1px solid var(--ux-line);border-radius:16px;background:var(--ux-surface-2)
}
.ux-settings-group-copy{display:flex;flex-direction:column;gap:2px}.ux-settings-group-copy span{font-size:12px;color:var(--ux-muted)}
.ux-text-scale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:0 1 140px;width:140px;max-width:100%;gap:4px;padding:4px;border:1px solid var(--ux-line);border-radius:13px;background:var(--ux-surface);overflow:hidden}
.ux-text-scale button{height:36px;border:0;background:transparent;color:var(--ux-text-2);font-weight:800}
.ux-text-scale button.active{background:var(--ux-primary);color:#fff}

/* Premium Launch Splash style */
.ux-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: radial-gradient(circle at 50% 50%, #1e293b 0%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.ux-splash.fade-out {
  opacity: 0;
  visibility: hidden;
}
.ux-splash-card {
  text-align: center;
  animation: splashScaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ux-splash-logo {
  font-size: 64px;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.5));
  animation: splashPulse 2s infinite ease-in-out;
}
.ux-splash-title {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}
.ux-splash-subtitle {
  font-size: 14px;
  color: #94a3b8;
  margin: 0 0 24px 0;
}
.ux-splash-loader-bar {
  width: 180px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.ux-splash-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--ux-primary), #0ea5e9);
  width: 0%;
  border-radius: 2px;
  animation: splashProgress 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#ux-splash-screen.fade-out,
#ux-splash-screen.ux-splash-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@keyframes uxSplashAutoRelease {
  0%, 65% {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

#ux-splash-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: radial-gradient(circle at 50% 50%, #1e293b 0%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  animation: uxSplashAutoRelease 2.4s ease forwards !important;
}
#ux-splash-screen .ux-splash-content {
  text-align: center;
  animation: splashScaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
#ux-splash-screen img {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.5));
  animation: splashPulse 2s infinite ease-in-out;
}
#ux-splash-screen h1 {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.5px;
}

@keyframes splashProgress {
  0% { width: 0%; }
  100% { width: 100%; }
}
@keyframes splashScaleIn {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes splashPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 25px rgba(59, 130, 246, 0.4)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 40px rgba(59, 130, 246, 0.7)); }
}

/* Five-item mobile navigation */
.ux-bottom-nav{display:none}
@media(max-width:820px){
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))!important}
  .main{min-height:100dvh!important}
  .topbar{min-height:58px!important;padding:8px 12px!important;border-bottom:1px solid var(--ux-line)!important;background:rgba(255,255,255,.96)!important}
  .topbar-shell-center,.top-runtime-row,.topbar-shell-end .shell-tools-wrap{display:none!important}
  .topbar .title{font-size:18px!important}
  .ux-bottom-nav{
    position:fixed;z-index:1350;inset-inline:0;bottom:0;display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    min-height:calc(64px + env(safe-area-inset-bottom));
    padding:6px 6px env(safe-area-inset-bottom);
    border-top:1px solid var(--ux-line);background:rgba(255,255,255,.98);
    box-shadow:0 -8px 24px rgba(15,23,42,.06)
  }
  .ux-bottom-nav button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    border:0;background:transparent;color:var(--ux-muted);font-size:11px;padding:4px 2px
  }
  .ux-bottom-nav button .ux-nav-icon{font-size:20px;line-height:1}
  .ux-bottom-nav button.active{color:var(--ux-primary);font-weight:800}
  .ux-bottom-nav button.active::after{content:"";position:absolute;top:3px;width:24px;height:3px;border-radius:3px;background:var(--ux-primary)}
  .ux-bottom-nav button{position:relative}
  #page-home .workspace-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #page-home .home-context-strip{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
  #page-home .home-context-sep{display:none!important}
  #page-chat .chat-shell{
    width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;box-sizing:border-box!important;min-width:0!important;
  }
  #page-chat .chatlog{
    width:100%!important;max-width:100%!important;padding-left:12px!important;padding-right:12px!important;padding-bottom:170px!important;box-sizing:border-box!important;min-width:0!important;
  }
  #page-chat .composer-dock{
    position:fixed!important;z-index:1000!important;
    bottom:calc(64px + env(safe-area-inset-bottom) + 8px)!important;
    left:12px!important;right:12px!important;
    width:auto!important;max-width:calc(100% - 24px)!important;
    padding:0!important;margin:0!important;box-sizing:border-box!important;
  }
  #page-chat .composer-dock .chatbar{
    width:100%!important;max-width:100%!important;box-sizing:border-box!important;margin:0!important;
  }
  #page-chat .chat-header-meta-bar{
    min-height:50px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px!important;padding:6px 12px!important;box-sizing:border-box!important;
  }
  #page-chat .chat-meta-page-title{
    font-size:15px!important;flex-shrink:0!important;
  }
  #page-chat .chat-topbar-model-slot{
    flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:calc(100% - 100px)!important;display:flex!important;gap:4px!important;justify-content:flex-end!important;margin-inline-start:auto!important;
  }
  #page-chat .chat-topbar-model-slot #provider{
    flex:0 1 75px!important;min-width:0!important;max-width:85px!important;font-size:11px!important;height:28px!important;padding:2px!important;
  }
  #page-chat .chat-topbar-model-slot #model{
    flex:1 1 95px!important;min-width:0!important;max-width:125px!important;font-size:11px!important;height:28px!important;padding:2px!important;
  }
  #page-chat .chat-topbar-model-slot #pickModelBtn{
    display:none!important;
  }
  #page-chat #chatPhase10ToolsStrip{
    display:flex!important;flex-wrap:nowrap!important;gap:8px!important;width:100%!important;padding:0!important;box-sizing:border-box!important;overflow:visible!important;
  }
  #page-chat #chatPhase10ToolsStrip > *{
    display:none!important;
  }
  #page-chat #chatPhase10ToolsStrip > #chatTopNewThreadBtn,
  #page-chat #chatPhase10ToolsStrip > .ux-modes-trigger,
  #page-chat #chatPhase10ToolsStrip > .ux-history-trigger{
    display:inline-flex!important;flex:1 1 calc((100% - 16px) / 3)!important;max-width:calc((100% - 16px) / 3)!important;justify-content:center!important;align-items:center!important;height:38px!important;
  }
  #page-chat .chat-meta-account{display:none!important}
  #page-settings .settings-page-header{display:block!important}
  #page-settings .settings-page-save-toolbar{margin-top:12px!important}
  #page-settings .settings-main-panel planetary-head{padding:16px!important}
  .modal .panel{width:calc(100% - 20px)!important;max-height:calc(100dvh - 28px)!important}
  .ux-mode-list{grid-template-columns:1fr}
  .ux-sheet-panel{max-height:78dvh}
}

@media(max-width:380px){
  .auth-gate{padding-inline:10px!important}
  .auth-gate .auth-login-card{padding:16px!important}
  .auth-gate .auth-title{font-size:21px!important}
  .auth-gate .auth-copy{font-size:12px!important}
  .auth-gate .auth-tab{font-size:11px!important}
  #page-chat #chatAttachBtn,#page-chat #voiceInputBtn,#page-chat #composerLiveVoiceBtn,#page-chat #sendBtn{flex-basis:38px!important;width:38px!important;height:38px!important;min-width:38px!important}
}

@media(max-height:700px) and (orientation:landscape){
  .auth-gate{align-items:flex-start!important;padding-block:8px!important}
  .auth-gate .auth-login-card{padding:14px 18px!important}
  .auth-gate .auth-hero-inline,.auth-gate .auth-copy{margin-bottom:6px!important}
  .ux-sheet-panel{max-height:92dvh}
  #page-chat .chat-header-tools-bar{display:none!important}
}

@media(max-width:420px){
  #page-home{padding:10px!important}
  #page-home .workspace-deck{padding:18px!important}
  #page-home .home-context-strip{grid-template-columns:1fr!important}
  #page-chat .chat-header-tools-bar{padding:6px 8px!important}
  #page-chat #chatPhase10ToolsStrip>#chatPhase9WebBtn{display:none!important}
  #page-chat .bubble{max-width:92%!important}
}

body.dark{
  --ux-bg:#0f172a;--ux-surface:#111c31;--ux-surface-2:#162238;
  --ux-text:#f8fafc;--ux-text-2:#cbd5e1;--ux-muted:#94a3b8;
  --ux-line:#26344b;--ux-line-strong:#334155;
}
body.dark .ux-bottom-nav,body.dark .topbar{background:rgba(17,28,49,.98)!important}

/* Ensure Modes/History Buttons and Sheets are interactive and clickable */
#uxModesBtn, #uxHistoryBtn {
  pointer-events: auto;
  position: relative;
  z-index: 5;
}

/* High z-index for Model Hub Modal & all popups to ensure they show in front of topbars, bottom nav, and side drawers */
#modelModal.modal.show,
.modal.show,
#uxModesSheet.show,
#uxChatHistorySheet.show {
  z-index: 5000 !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

#modelModal .backdrop,
.modal .backdrop,
#uxModesSheet .ux-sheet-backdrop,
#uxChatHistorySheet .ux-sheet-backdrop {
  z-index: 1 !important;
  pointer-events: auto !important;
}

#modelModal .panel,
.modal .panel {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  margin: auto !important;
  width: min(96vw, 960px) !important;
  max-width: 960px !important;
  height: min(88dvh, 860px) !important;
  max-height: 860px !important;
  border-radius: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5) !important;
}

#modelModal .body.model-center,
#modelModal .body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px 20px !important;
  max-height: none !important;
  height: auto !important;
}

#modelModal .model-center-sticky-filters {
  position: relative !important;
  z-index: 5 !important;
  margin-bottom: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#modelModal .model-filter-row,
#modelFilterRow {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;      /* Single horizontal row - NO wrapping */
  overflow-x: auto !important;       /* Scroll horizontally if needed */
  overflow-y: hidden !important;
  gap: 8px !important;
  align-items: center !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#modelModal .model-filter-row::-webkit-scrollbar,
#modelFilterRow::-webkit-scrollbar {
  display: none !important;
}

/* No .col wrappers anymore — target input/select directly */
#modelModal .model-filter-row input,
#modelModal .model-filter-row select,
#modelFilterRow input,
#modelFilterRow select {
  flex: 1 1 120px !important;
  min-width: 110px !important;
  max-width: 200px !important;
  width: auto !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

#modelSearch {
  flex: 2 1 150px !important;
  min-width: 130px !important;
}

/* Legacy .col inside filter row — flatten it */
#modelModal .model-filter-row .col {
  display: contents !important;
}

/* ── Auto Provider Mode Toggle Row ──────────────────────────── */
.auto-provider-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  margin: 6px 0 4px !important;
  background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(168,85,247,0.06) 100%) !important;
  border: 1px solid rgba(99,102,241,0.2) !important;
  border-radius: 14px !important;
  transition: background 0.2s, border-color 0.2s !important;
}

.auto-provider-toggle-row:has(#autoProviderModeToggle:checked) {
  background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(168,85,247,0.12) 100%) !important;
  border-color: rgba(99,102,241,0.4) !important;
}

body.dark .auto-provider-toggle-row {
  background: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(168,85,247,0.08) 100%) !important;
  border-color: rgba(99,102,241,0.25) !important;
}

body.dark .auto-provider-toggle-row:has(#autoProviderModeToggle:checked) {
  background: linear-gradient(135deg, rgba(99,102,241,0.22) 0%, rgba(168,85,247,0.18) 100%) !important;
  border-color: rgba(99,102,241,0.5) !important;
}

.auto-provider-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.auto-provider-icon {
  font-size: 20px !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 0 6px rgba(168,85,247,0.5)) !important;
}

.auto-provider-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ux-text, #1e293b) !important;
  line-height: 1.3 !important;
}

body.dark .auto-provider-title {
  color: #e2e8f0 !important;
}

.auto-provider-desc {
  font-size: 11px !important;
  color: var(--ux-text-muted, #64748b) !important;
  line-height: 1.4 !important;
  margin-top: 2px !important;
}

body.dark .auto-provider-desc {
  color: #94a3b8 !important;
}

/* ── Toggle Switch Component ─────────────────────────────────── */
.toggle-switch {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  width: 46px !important;
  height: 26px !important;
}

.toggle-switch input[type="checkbox"] {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}

.toggle-slider {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(148,163,184,0.4) !important;
  border-radius: 999px !important;
  transition: background 0.25s !important;
  border: 1px solid rgba(148,163,184,0.3) !important;
}

.toggle-slider::before {
  content: '' !important;
  position: absolute !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #fff !important;
  top: 2px !important;
  left: 2px !important;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
  border-color: rgba(99,102,241,0.5) !important;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px) !important;
}

.toggle-switch input:focus-visible + .toggle-slider {
  outline: 2px solid #6366f1 !important;
  outline-offset: 2px !important;
}

#modelList {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-height: 250px !important;
}

#modelModal .model-section-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 8px !important;
}

#modelModal .model-card {
  padding: 16px !important;
  border-radius: 16px !important;
  background: var(--ux-surface-2, #f8fafc) !important;
  border: 1px solid var(--ux-line, #e2e8f0) !important;
  transition: all 0.2s ease !important;
  pointer-events: auto !important;
}

body.dark #modelModal .model-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

#modelModal .model-card:hover {
  border-color: var(--ux-primary, #2563eb) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}

#modelModal .model-card *,
#modelModal .btn,
#modelModal select,
#modelModal input {
  pointer-events: auto !important;
  cursor: pointer;
}

/* Centered, spacious Chat History Drawer on web to prevent squashing/column layout */
.thread-drawer,
#threadDrawer {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  width: min(94vw, 760px) !important;
  height: min(86dvh, 800px) !important;
  background: var(--ux-surface, #ffffff) !important;
  border: 1px solid var(--ux-line, rgba(10,20,60,.12)) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45) !important;
  z-index: 5000 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transform: none !important;
}

body.dark .thread-drawer,
body.dark #threadDrawer {
  background: #111b2f !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.thread-drawer-overlay,
#threadDrawerOverlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(6, 11, 24, 0.68) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 4999 !important;
}

.thread-drawer-head {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--ux-line, rgba(10,20,60,.08)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.thread-drawer-title {
  font-size: 20px !important;
  font-weight: 800 !important;
}

.thread-drawer-toolbar {
  padding: 14px 24px !important;
  border-bottom: 1px solid var(--ux-line, rgba(10,20,60,.08)) !important;
  display: flex !important;
  gap: 12px !important;
}

/* Model Category Chips Forced Single Horizontal Scroll Bar */
.model-category-summary,
.model-category-chips,
#modelCategorySummary {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  gap: 8px !important;
  padding: 4px 2px 8px 2px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 44px !important;
  max-height: 52px !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.model-category-summary::-webkit-scrollbar,
.model-category-chips::-webkit-scrollbar,
#modelCategorySummary::-webkit-scrollbar {
  height: 4px;
}

.model-category-summary::-webkit-scrollbar-thumb,
.model-category-chips::-webkit-scrollbar-thumb,
#modelCategorySummary::-webkit-scrollbar-thumb {
  background: rgba(122, 162, 255, 0.3);
  border-radius: 4px;
}

.model-category-chip,
.model-category-chips button,
#modelCategorySummary button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  height: 34px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  border: 1px solid var(--ux-line, rgba(10,20,60,0.12)) !important;
  background: var(--ux-surface-2, #f1f5f9) !important;
  color: var(--ux-text, #0f172a) !important;
  cursor: pointer !important;
}

body.dark .model-category-chip,
body.dark .model-category-chips button,
body.dark #modelCategorySummary button {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}

.model-category-chip.active,
.model-category-chips button.active,
#modelCategorySummary button.active {
  background: var(--ux-primary, #2563eb) !important;
  color: #ffffff !important;
  border-color: var(--ux-primary, #2563eb) !important;
}

/* Full Text & Un-truncated Title display for Chat History Drawer Cards */
.thread-card,
#threadDrawer .thread-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px 20px !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: 16px !important;
  background: var(--ux-surface-2, #ffffff) !important;
  border: 1px solid var(--ux-line, rgba(10,20,60,.12)) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
}

body.dark .thread-card,
body.dark #threadDrawer .thread-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.thread-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

.thread-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ux-text, #0f172a) !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  line-height: 1.4 !important;
  flex: 1 !important;
  min-width: 0 !important;
}

body.dark .thread-card-title {
  color: #f8fafc !important;
}

.thread-card-meta {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ux-primary, #2563eb) !important;
  background: rgba(37, 99, 235, 0.1) !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  flex-shrink: 0 !important;
}

.thread-card-preview {
  font-size: 13px !important;
  color: var(--ux-text-subtle, #64748b) !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  word-break: break-word !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.thread-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 4px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  width: 100% !important;
  font-size: 11.5px !important;
  color: var(--ux-muted, #94a3b8) !important;
}

.thread-card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
}

.thread-card-actions .btn {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  line-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  position: static !important;
  margin: 0 !important;
}

.thread-card-actions .btn.danger,
.thread-card-actions .btn.ghost.danger,
.thread-card-actions .btn-delete {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

#uxModesSheet .ux-sheet-panel,
#uxModesSheet .ux-mode-item,
#uxModesSheet .ux-sheet-close,
#uxModesSheet .ux-sheet-backdrop,
#uxChatHistorySheet .ux-sheet-panel,
#uxChatHistorySheet .ux-history-item,
#uxChatHistorySheet .ux-sheet-close,
#uxChatHistorySheet .ux-sheet-backdrop {
  pointer-events: auto;
}

/* Chat History Custom Sheet and List Layouts */
.ux-history-sheet .ux-sheet-panel {
  display: flex !important;
  flex-direction: column !important;
  width: min(94vw, 740px) !important;
  max-height: min(86dvh, 800px) !important;
  border-radius: 24px !important;
  padding: 20px 20px max(20px, env(safe-area-inset-bottom)) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
}

.ux-history-list-container {
  max-height: calc(86dvh - 180px) !important;
  overflow-y: auto !important;
  padding-inline: 4px !important;
  padding-bottom: 8px !important;
}

.ux-history-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  direction: rtl !important;
}

.ux-history-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 16px 18px !important;
  background: var(--ux-surface-2) !important;
  border: 1px solid var(--ux-line) !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-align: right !important;
  position: relative !important;
}

.ux-history-item:hover {
  background: var(--ux-line) !important;
  border-color: var(--ux-line-strong) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}

.ux-history-item.active {
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: var(--ux-primary) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

.ux-history-item-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.ux-history-item-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
}

.ux-history-item-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ux-text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.ux-history-item-meta {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ux-primary) !important;
  flex-shrink: 0 !important;
  background: rgba(37, 99, 235, 0.1) !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
}

.ux-history-item-preview {
  font-size: 13px !important;
  color: var(--ux-text-2) !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.ux-history-item-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 4px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  width: 100% !important;
}

.ux-history-item-date {
  font-size: 11.5px !important;
  color: var(--ux-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.ux-history-item-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.ux-history-action-btn {
  background: var(--ux-surface) !important;
  border: 1px solid var(--ux-line) !important;
  font-size: 13px !important;
  cursor: pointer !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.ux-history-action-btn:hover {
  background: var(--ux-line-strong) !important;
  border-color: var(--ux-line-strong) !important;
  transform: scale(1.08) !important;
}

.ux-history-action-btn.delete:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: var(--ux-danger) !important;
}

.ux-history-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--ux-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.ux-history-empty p {
  font-size: 15px;
  color: var(--ux-text-2);
  margin: 0;
}

/* Active Mode Inside Button Stylings */
#uxModesBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  max-width: 185px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

#uxModesBtn .ux-modes-btn-label {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

#uxModesBtn .ux-modes-btn-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: rgba(37, 99, 235, 0.12) !important;
  color: #1d4ed8 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  flex: 1 1 auto !important;
}

#uxModesBtn .ux-modes-badge-icon {
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

body.dark #uxModesBtn .ux-modes-btn-badge {
  background: rgba(96, 165, 250, 0.20) !important;
  color: #bfdbfe !important;
}

/* On extremely narrow screens, ensure button strip fits */
@media (max-width: 380px) {
  #uxModesBtn {
    max-width: 160px !important;
  }

  #uxModesBtn .ux-modes-btn-badge {
    max-width: 100% !important;
    font-size: 10.5px !important;
    padding-inline: 8px !important;
  }
}

/* History Controls, Search Input, and Export dropdown styles */
.ux-history-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-inline: 4px;
  direction: rtl;
}

.ux-history-search-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
}

.ux-history-search-wrapper input {
  width: 100% !important;
  height: 40px !important;
  padding: 8px 36px 8px 12px !important;
  font-size: 14px !important;
  border-radius: var(--ux-radius-control) !important;
  border: 1px solid var(--ux-line-strong) !important;
  background: var(--ux-surface-2) !important;
  color: var(--ux-text) !important;
  box-sizing: border-box !important;
  direction: rtl;
  text-align: right;
  transition: all 0.2s ease;
}

.ux-history-search-wrapper .ux-search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ux-muted);
  pointer-events: none;
}

.ux-history-export-wrapper {
  position: relative;
}

.ux-history-export-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 40px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: var(--ux-radius-control) !important;
  border: 1px solid var(--ux-line-strong) !important;
  background: var(--ux-surface-2) !important;
  color: var(--ux-text-2) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.ux-history-export-btn:hover {
  background: var(--ux-line) !important;
  color: var(--ux-text) !important;
}

.ux-history-sync-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 40px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: var(--ux-radius-control) !important;
  border: 1px solid var(--ux-line-strong) !important;
  background: var(--ux-surface-2) !important;
  color: var(--ux-text-2) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.ux-history-sync-btn:hover {
  background: var(--ux-line) !important;
  color: var(--ux-text) !important;
}

.ux-history-sync-btn .ux-sync-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

.ux-history-sync-btn.syncing .ux-sync-icon {
  animation: ux-spin 1s linear infinite;
}

@keyframes ux-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

.ux-history-export-dropdown {
  position: absolute;
  bottom: calc(100% + 8px); /* Open upwards so it's fully visible and doesn't get cut off on bottom sheets */
  left: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  width: 230px;
  background: var(--ux-surface);
  border: 1px solid var(--ux-line-strong);
  border-radius: var(--ux-radius-control);
  box-shadow: var(--ux-shadow);
  overflow: hidden;
  padding: 6px;
  animation: slideUpFade 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ux-history-export-dropdown.show {
  display: flex;
}

.ux-history-export-dropdown button {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ux-text-2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-align: right !important;
  direction: rtl;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.ux-history-export-dropdown button:hover {
  background: var(--ux-surface-2) !important;
  color: var(--ux-text) !important;
}

.ux-history-no-results {
  text-align: center;
  padding: 40px 16px;
  color: var(--ux-muted);
}

.ux-history-no-results p {
  font-size: 15px;
  color: var(--ux-text-2);
  margin: 0;
}

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

/* ==========================================================================
   PREMIUM COLLAPSIBLE ACCORDION SETTINGS
   ========================================================================== */

/* Main Accordion Container */
.ux-settings-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 0 24px;
  direction: rtl;
}

/* Individual Accordion Section Card */
.ux-settings-section {
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.ux-settings-section:hover {
  border-color: var(--ux-line-strong);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}

/* Open State style modifications */
.ux-settings-section.open {
  border-color: var(--ux-line-strong);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* Accordion Section Header */
.ux-settings-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  gap: 12px;
}

.ux-settings-section-header:focus-visible {
  outline: 2px solid var(--ux-primary);
  outline-offset: -2px;
}

.ux-settings-section-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

/* Icon Container with micro-styling */
.ux-settings-section-icon {
  font-size: 22px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.07);
  border-radius: 12px;
  flex-shrink: 0;
  color: var(--ux-primary);
  transition: all 0.2s ease;
}

.ux-settings-section:hover .ux-settings-section-icon {
  transform: scale(1.05);
  background: rgba(37, 99, 235, 0.12);
}

.ux-settings-section.open .ux-settings-section-icon {
  background: var(--ux-primary);
  color: #ffffff;
}

/* Title and Description wrapper */
.ux-settings-section-title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: right;
}

.ux-settings-section-title-wrapper strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ux-text);
  line-height: 1.3;
}

.ux-settings-section-title-wrapper small {
  font-size: 11.5px;
  color: var(--ux-muted);
  font-weight: normal;
  line-height: 1.4;
}

/* Smooth rotating chevron */
.ux-settings-chevron {
  font-size: 12px;
  color: var(--ux-muted);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-inline-start: auto;
  user-select: none;
  pointer-events: none;
}

.ux-settings-section.open .ux-settings-chevron {
  transform: rotate(-180deg);
  color: var(--ux-text);
}

/* Accordion Body with Premium Micro-Animation */
.ux-settings-section-body {
  display: none;
  padding: 0 20px 20px;
  border-top: 1px solid var(--ux-line);
  background: transparent;
}

@keyframes uxSettingsFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.ux-settings-section.open .ux-settings-section-body {
  display: block;
  animation: uxSettingsFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Hide native settings elements once accordion is active */
.settings-main-panel[data-ux-settings-accordion="1"] .settings-fields-lede,
.settings-main-panel[data-ux-settings-accordion="1"] .settings-form-region > .settings-section-label,
.settings-main-panel[data-ux-settings-accordion="1"] .settings-form-region > p.hint,
.settings-main-panel[data-ux-settings-accordion="1"] .settings-form-region > details.settings-advanced {
  display: none !important;
}

/* De-style settingsAccountCard frame since children are distributed */
.settings-main-panel[data-ux-settings-accordion="1"] #settingsAccountCard {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Adjustments for nested details/admin styles inside accordions */
.ux-settings-section-body details.tool-group {
  margin-top: 10px !important;
  background: var(--ux-surface-2) !important;
}

/* Mobile responsive padding fine-tunes */
@media (max-width: 600px) {
  .ux-settings-section-header {
    padding: 14px 16px;
  }
  .ux-settings-section-body {
    padding: 0 16px 16px;
  }
  .ux-settings-section-icon {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
}

/* ==========================================================================
   SIMPLIFIED HOME SCREEN GRID & CARDS
   ========================================================================== */

/* Safely hide redundant home elements */
#page-home.ux-home-simplified .workspace-quick-actions,
#page-home.ux-home-simplified .workspace-shortcuts-row,
#page-home.ux-home-simplified .chat-quick-tools,
#page-home.ux-home-simplified .workspace-status-strip,
#page-home.ux-home-simplified .home-context-strip,
#page-home.ux-home-simplified .home-meta-muted,
#page-home.ux-home-simplified .home-details-more {
  display: none !important;
}

/* Base adjustment for page padding/structure */
#page-home.ux-home-simplified {
  background: var(--ux-bg) !important;
  padding: clamp(12px, 3vw, 24px) !important;
}

#page-home.ux-home-simplified .workspace-deck {
  border: 1px solid var(--ux-line) !important;
  border-radius: 24px !important;
  padding: clamp(24px, 5vw, 40px) !important;
  background: linear-gradient(135deg, var(--ux-surface) 0%, var(--ux-surface-2) 100%) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
}

/* Center and style the title/subtitle */
#page-home.ux-home-simplified .workspace-title {
  text-align: center;
  font-size: clamp(22px, 6vw, 32px) !important;
  font-weight: 800 !important;
  color: var(--ux-text) !important;
  margin: 0 0 10px 0 !important;
}

#page-home.ux-home-simplified .workspace-summary {
  text-align: center;
  font-size: clamp(14px, 3.5vw, 16px) !important;
  color: var(--ux-text-2) !important;
  margin: 0 auto 30px auto !important;
  max-width: 560px !important;
}

/* Action Grid: 2x2 grid on larger, responsive 1-column on small */
.ux-home-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  direction: rtl;
  margin-top: 10px;
}

/* Action Card */
.ux-home-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 20px;
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
  min-height: 160px;
  width: 100%;
}

.ux-home-action-card:hover {
  transform: translateY(-4px);
  border-color: var(--ux-primary);
  background: rgba(37, 99, 235, 0.02);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.06);
}

.ux-home-action-card:active {
  transform: translateY(-1px);
  background: rgba(37, 99, 235, 0.05);
}

/* Action Icon */
.ux-home-action-icon {
  font-size: 32px;
  margin-bottom: 12px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: rgba(37, 99, 235, 0.06);
  border-radius: 16px;
  color: var(--ux-primary);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ux-home-action-card:hover .ux-home-action-icon {
  background: var(--ux-primary);
  color: #ffffff;
  transform: scale(1.08) rotate(2deg);
}

/* Card Text Wrapper */
.ux-home-card-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
}

/* Card Title */
.ux-home-action-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ux-text);
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Card Description */
.ux-home-action-desc {
  font-size: 12px;
  color: var(--ux-muted);
  line-height: 1.5;
  max-width: 180px;
  margin: 0 auto;
}

/* Dark Mode Adjustments */
body.dark .ux-home-action-card {
  background: var(--ux-surface-2);
  border-color: var(--ux-line);
}

body.dark .ux-home-action-card:hover {
  border-color: var(--ux-primary);
  background: rgba(37, 99, 235, 0.06);
}

body.dark .ux-home-action-icon {
  background: rgba(37, 99, 235, 0.12);
}

/* Responsive constraints */
@media (max-width: 640px) {
  .ux-home-actions-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ux-home-action-card {
    padding: 18px 16px;
    min-height: 100px;
    flex-direction: row;
    align-items: center;
    text-align: right;
    gap: 16px;
    justify-content: flex-start;
  }
  .ux-home-action-icon {
    margin-bottom: 0;
    width: 46px;
    height: 46px;
    font-size: 24px;
    border-radius: 12px;
    flex-shrink: 0;
  }
  .ux-home-action-title {
    margin-bottom: 3px;
    font-size: 15px;
  }
  .ux-home-action-desc {
    max-width: 100%;
    margin: 0;
  }
}

/* Compact Light Login Screen Styles */
#authGate.ux-login-compact {
  background: #f4f6fa !important;
  padding: 12px 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto !important;
}

#authGate.ux-login-compact[hidden],
#authGate.ux-login-compact.hidden,
#authGate.ux-login-compact.is-hidden,
#authGate.ux-login-compact[aria-hidden="true"] {
  display: none !important;
}

#authGate.ux-login-compact .auth-shell {
  max-width: 390px !important;
  margin: auto !important;
}

#authGate.ux-login-compact .auth-login-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04) !important;
  padding: 20px 16px !important;
  color: #1e293b !important;
}

#authGate.ux-login-compact .brand-identity {
  margin-bottom: 8px !important;
  gap: 8px !important;
}

#authGate.ux-login-compact .brand-mark {
  width: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
}

#authGate.ux-login-compact .brand-copy .name {
  font-size: 14px !important;
  font-weight: 700 !important;
}

#authGate.ux-login-compact .brand-copy .sub {
  display: none !important;
}

#authGate.ux-login-compact #authCurrentPlanPill {
  display: none !important;
}

#authGate.ux-login-compact .auth-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  margin-top: 0 !important;
  margin-bottom: 2px !important;
  color: #0f172a !important;
}

#authGate.ux-login-compact .auth-copy {
  font-size: 12px !important;
  color: #64748b !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
}

#authGate.ux-login-compact #authGateStatus {
  margin-bottom: 10px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

#authGate.ux-login-compact .auth-provider-section {
  padding: 6px !important;
  margin-bottom: 8px !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

#authGate.ux-login-compact .auth-provider-head {
  display: none !important;
}

#authGate.ux-login-compact #authGoogleBrowserBtn,
#authGate.ux-login-compact #nativeGoogleSignInBtn,
#authGate.ux-login-compact .native-google-btn {
  min-height: 40px !important;
  height: 40px !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #1e293b !important;
}

#authGate.ux-login-compact .native-google-mark {
  width: 22px !important;
  height: 22px !important;
  font-size: 11px !important;
}

#authGate.ux-login-compact #authBrowserHint,
#authGate.ux-login-compact #authNativeGoogleHint,
#authGate.ux-login-compact .auth-provider-hint,
#authGate.ux-login-compact .auth-google-hint,
#authGate.ux-login-compact .auth-provider-note,
#authGate.ux-login-compact .google-native-note,
#authGate.ux-login-compact #googleSignInSlot > .hint:not(.native-google-warning),
#authGate.ux-login-compact .auth-google-slot > .hint:not(.native-google-warning),
#authGate.ux-login-compact .native-google-auth > .hint:not(.native-google-warning) {
  display: none !important;
}

#authGate.ux-login-compact .auth-divider {
  margin: 8px 0 !important;
  font-size: 11px !important;
}

#authGate.ux-login-compact .auth-email-section .auth-method-title {
  display: none !important;
}

#authGate.ux-login-compact #authEmailMethodHint {
  display: none !important;
}

#authGate.ux-login-compact .auth-tabs {
  margin-bottom: 10px !important;
  border-radius: 10px !important;
  padding: 3px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  gap: 3px !important;
}

#authGate.ux-login-compact .auth-tab {
  min-height: 32px !important;
  font-size: 11px !important;
  border-radius: 7px !important;
  padding: 4px 2px !important;
}

#authGate.ux-login-compact .auth-form {
  gap: 8px !important;
}

#authGate.ux-login-compact .auth-field {
  gap: 2px !important;
}

#authGate.ux-login-compact .auth-field label {
  font-size: 11px !important;
  color: #475569 !important;
  font-weight: 600 !important;
}

#authGate.ux-login-compact .auth-field input {
  min-height: 36px !important;
  border-radius: 8px !important;
  padding-inline: 10px !important;
  font-size: 13px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

#authGate.ux-login-compact .auth-password-toggle {
  font-size: 10px !important;
  left: 8px !important;
}

#authGate.ux-login-compact .auth-actions {
  margin-top: 0 !important;
}

#authGate.ux-login-compact .auth-inline-check {
  font-size: 11px !important;
  gap: 4px !important;
}

#authGate.ux-login-compact .auth-inline-check input {
  width: 12px !important;
  height: 12px !important;
}

#authGate.ux-login-compact #authForgotPwBtn,
#authGate.ux-login-compact #authResendVerifyBtn {
  font-size: 10px !important;
  padding: 0 !important;
}

#authGate.ux-login-compact .auth-submit-primary {
  min-height: 38px !important;
  font-size: 13px !important;
  margin-top: 2px !important;
  border-radius: 8px !important;
}

#authGate.ux-login-compact #authEntryModeHint {
  display: none !important;
}

#authGate.ux-login-compact #authSupportRow {
  display: none !important;
}

#authGate.ux-login-compact .auth-plan-footnote {
  display: none !important;
}

/* ==========================================================================
   PREMIUM NAVIGATION DRAWER / SIDE MENU (RTL-FRIENDLY & MOBILE-OPTIMIZED)
   ========================================================================== */

/* Unified Uniform Menu Buttons: #openSideBtn and #chatPhase10NavMenuBtn */
#openSideBtn,
#chatPhase10NavMenuBtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #2d3748 !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

body.dark #openSideBtn,
body.dark #chatPhase10NavMenuBtn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f7fafc !important;
}

#openSideBtn:hover,
#chatPhase10NavMenuBtn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  transform: scale(1.05) !important;
}

body.dark #openSideBtn:hover,
body.dark #chatPhase10NavMenuBtn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

#openSideBtn:active,
#chatPhase10NavMenuBtn:active {
  transform: scale(0.95) !important;
}

/* Hide menu buttons when authGate is visible */
#authGate:not([hidden]):not(.hidden):not(.is-hidden) ~ .app #openSideBtn,
#authGate:not([hidden]):not(.hidden):not(.is-hidden) ~ .app #chatPhase10NavMenuBtn,
#authGate:not([hidden]):not(.hidden):not(.is-hidden) ~ #openSideBtn {
  display: none !important;
}

#uxSideMenuTrigger {
  position: static !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0f172a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10) !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  z-index: 5 !important;
}

#uxSideMenuTrigger::after {
  content: none !important;
  display: none !important;
}

body.dark #uxSideMenuTrigger {
  background: rgba(17, 24, 39, 0.92) !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.ux-chat-title-menu-holder {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-direction: row-reverse !important;
  max-width: 100% !important;
}

#page-chat .ux-chat-title-menu-holder h1,
#page-chat .ux-chat-title-menu-holder h2,
#page-chat .ux-chat-title-menu-holder .page-title,
#page-chat .ux-chat-title-menu-holder .chat-title,
#page-chat .ux-chat-title-menu-holder .chat-meta-page-title {
  margin: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Premium Drawer Container */
.ux-side-menu {
  position: fixed;
  inset: 0;
  z-index: 99999;
  visibility: hidden;
  pointer-events: none;
}

.ux-side-menu.show {
  visibility: visible;
  pointer-events: auto;
}

/* Ensure children are immediately hidden when the menu is closed to prevent clipped button assertions */
.ux-side-menu:not(.show) * {
  display: none !important;
}

/* Drawer Blur Overlay Backdrop */
.ux-side-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.ux-side-menu.show .ux-side-menu-backdrop {
  opacity: 1;
}

/* sliding drawer panel - Right Aligned (Arabic RTL layout) */
.ux-side-menu-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(290px, 85vw);
  background: #ffffff;
  box-shadow: -4px 0 25px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  direction: rtl;
}

.ux-side-menu.show .ux-side-menu-panel {
  transform: translateX(0);
}

body.dark .ux-side-menu-panel {
  background: #1a202c;
  box-shadow: -4px 0 25px rgba(0, 0, 0, 0.35);
  color: #f7fafc;
}

/* Header inside panel */
.ux-side-menu-header {
  padding: 18px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.dark .ux-side-menu-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ux-side-menu-brand-title {
  font-size: 16px;
  font-weight: 800;
  color: #1a202c;
  margin: 0;
  letter-spacing: -0.01em;
}

body.dark .ux-side-menu-brand-title {
  color: #ffffff;
}

.ux-side-menu-brand-sub {
  font-size: 11px;
  color: #718096;
  margin: 3px 0 0 0;
}

body.dark .ux-side-menu-brand-sub {
  color: #a0aec0;
}

/* Close button inside header */
.ux-side-menu-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.04);
  color: #4a5568;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.dark .ux-side-menu-close {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e0;
}

.ux-side-menu-close:hover {
  background: rgba(0, 0, 0, 0.08);
  transform: scale(1.06);
}

body.dark .ux-side-menu-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Nav items list */
.ux-side-menu-nav {
  padding: 14px 10px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ux-side-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: #4a5568;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  cursor: pointer;
  transition: all 0.18s ease;
  width: 100%;
}

body.dark .ux-side-menu-item {
  color: #cbd5e0;
}

.ux-side-menu-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: #1a202c;
  padding-right: 18px; /* micro animation */
}

body.dark .ux-side-menu-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}

.ux-side-menu-item.active {
  background: rgba(66, 153, 225, 0.08) !important;
  color: #3182ce !important;
  font-weight: 700 !important;
}

body.dark .ux-side-menu-item.active {
  background: rgba(66, 153, 225, 0.15) !important;
  color: #63b3ed !important;
}

.ux-side-menu-item-icon {
  font-size: 16px;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ux-side-menu-item-label {
  flex: 1;
}

/* Footer & User Strip */
.ux-side-menu-footer {
  padding: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(0, 0, 0, 0.01);
}

body.dark .ux-side-menu-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.01);
}

.ux-side-menu-user-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
}

body.dark .ux-side-menu-user-strip {
  background: rgba(255, 255, 255, 0.05);
}

.ux-side-menu-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #3182ce;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ux-side-menu-user-info {
  flex: 1;
  min-width: 0;
}

.ux-side-menu-user-name {
  font-size: 12px;
  font-weight: 700;
  color: #2d3748;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark .ux-side-menu-user-name {
  color: #e2e8f0;
}

.ux-side-menu-user-plan {
  font-size: 10px;
  color: #718096;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark .ux-side-menu-user-plan {
  color: #a0aec0;
}

.ux-side-menu-version {
  text-align: center;
  font-size: 9px;
  color: #a0aec0;
  margin-top: 8px;
  letter-spacing: 0.02em;
  user-select: none;
}

/* VISUAL DEACTIVATION OF THE OLD MOBILE SIDEBAR (Mobile-viewport only) */
@media (max-width: 980px) {
  /* Hide old sidebar and backdrop ONLY on mobile screen widths so they do not overlap with our drawer */
  #side.side,
  .backdrop2 {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Workflows Dashboard Styling */
.ux-workflows-container {
  padding: var(--ux-space-5) var(--ux-space-4);
  max-width: 1200px;
  margin: 0 auto;
  direction: rtl;
  text-align: right;
  animation: ux-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ux-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ux-workflows-hero {
  text-align: center;
  margin-bottom: var(--ux-space-6);
  padding: var(--ux-space-6) var(--ux-space-4);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, rgba(14, 165, 233, 0.04) 100%);
  border-radius: var(--ux-radius-card);
  border: 1px dashed rgba(37, 99, 235, 0.1);
}

body.dark .ux-workflows-hero {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(14, 165, 233, 0.1) 100%);
  border: 1px dashed rgba(37, 99, 235, 0.2);
}

.ux-workflows-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--ux-text);
  margin: 0 0 var(--ux-space-2) 0;
  letter-spacing: -0.02em;
}

.ux-workflows-desc {
  font-size: 14px;
  color: var(--ux-text-2);
  margin: 0;
}

.ux-workflows-search-wrapper {
  margin-bottom: var(--ux-space-6);
  display: flex;
  justify-content: center;
}

.ux-workflows-search-box {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.ux-workflows-search {
  width: 100%;
  height: 50px !important;
  padding: 0 var(--ux-space-6) 0 var(--ux-space-5) !important; /* RTL search input padding */
  border-radius: 25px !important;
  font-size: 15px !important;
  border: 1px solid var(--ux-line-strong) !important;
  background: var(--ux-surface) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
  transition: all 0.25s ease !important;
}

.ux-workflows-search:focus {
  border-color: var(--ux-primary) !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.1) !important;
  outline: none !important;
}

.ux-workflows-search-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--ux-muted);
  pointer-events: none;
}

.ux-workflows-search-clear {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.05);
  border: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--ux-text-2);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.ux-workflows-search-clear:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--ux-text);
}

body.dark .ux-workflows-search-clear {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

body.dark .ux-workflows-search-clear:hover {
  background: rgba(255, 255, 255, 0.2);
}

.ux-workflows-grid-container {
  display: flex;
  flex-direction: column;
  gap: var(--ux-space-6);
}

.ux-workflows-section {
  display: flex;
  flex-direction: column;
  gap: var(--ux-space-4);
}

.ux-workflows-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ux-text);
  margin: 0;
  padding-right: var(--ux-space-2);
  border-right: 4px solid var(--ux-primary);
  line-height: 1.2;
}

.ux-workflows-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ux-space-4);
}

@media (max-width: 600px) {
  .ux-workflows-grid {
    grid-template-columns: 1fr;
    gap: var(--ux-space-3);
  }
}

.ux-workflow-card {
  display: flex;
  align-items: flex-start;
  gap: var(--ux-space-4);
  padding: var(--ux-space-4);
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: var(--ux-radius-card);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.02);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  position: relative;
  overflow: hidden;
}

.ux-workflow-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.03) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.ux-workflow-card:hover {
  transform: translateY(-4px);
  border-color: var(--ux-line-strong);
  box-shadow: var(--ux-shadow);
}

.ux-workflow-card:hover::after {
  opacity: 1;
}

.ux-workflow-card:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

.ux-workflow-card-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

body.dark .ux-workflow-card-icon-wrapper {
  background: rgba(37, 99, 235, 0.15);
}

.ux-workflow-card:hover .ux-workflow-card-icon-wrapper {
  background: var(--ux-primary);
  transform: scale(1.05) rotate(-3deg);
}

.ux-workflow-card-icon {
  font-size: 20px;
  line-height: 1;
  transition: all 0.25s ease;
}

.ux-workflow-card:hover .ux-workflow-card-icon {
  filter: brightness(0) invert(1);
}

.ux-workflow-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ux-workflow-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ux-text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.ux-workflow-card:hover .ux-workflow-card-title {
  color: var(--ux-primary);
}

.ux-workflow-card-desc {
  font-size: 12px;
  color: var(--ux-text-2);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ux-workflows-empty {
  text-align: center;
  padding: var(--ux-space-7) var(--ux-space-4);
  color: var(--ux-muted);
  font-size: 15px;
  font-weight: 600;
  background: var(--ux-surface-2);
  border-radius: var(--ux-radius-card);
  border: 1px dashed var(--ux-line);
}

/* Premium RTL-aligned Exit Dialog */
.ux-exit-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.ux-exit-dialog.show {
  opacity: 1;
  pointer-events: auto;
}

.ux-exit-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ux-exit-panel {
  background: var(--ux-surface);
  border-radius: var(--ux-radius-modal);
  border: 1px solid var(--ux-line);
  padding: var(--ux-space-6);
  width: 90%;
  max-width: 380px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.15);
  transform: scale(0.9) translateY(15px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
  direction: rtl;
  text-align: right;
}

.ux-exit-dialog.show .ux-exit-panel {
  transform: scale(1) translateY(0);
}

.ux-exit-header {
  display: flex;
  align-items: center;
  gap: var(--ux-space-3);
  margin-bottom: var(--ux-space-3);
}

.ux-exit-icon {
  font-size: 24px;
  line-height: 1;
}

.ux-exit-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ux-text);
  margin: 0;
}

.ux-exit-desc {
  font-size: 14px;
  color: var(--ux-text-2);
  margin: 0 0 var(--ux-space-5) 0;
  line-height: 1.6;
}

.ux-exit-actions {
  display: flex;
  gap: var(--ux-space-3);
  justify-content: flex-end;
}

.ux-exit-btn-stay {
  flex: 1;
  padding: 11px var(--ux-space-4);
  border-radius: var(--ux-radius-control);
  border: 1px solid var(--ux-line);
  background: var(--ux-surface-2);
  color: var(--ux-text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ux-exit-btn-stay:hover {
  background: var(--ux-line);
}

.ux-exit-btn-confirm:hover {
  background: var(--ux-primary-hover);
}

.ux-exit-btn-confirm {
  flex: 1;
  padding: 11px var(--ux-space-4);
  border-radius: var(--ux-radius-control);
  border: none;
  background: var(--ux-danger, #ef4444);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ux-exit-btn-retry {
  flex: 1;
  padding: 11px var(--ux-space-4);
  border-radius: var(--ux-radius-control);
  border: none;
  background: var(--ux-primary, #3b82f6);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ux-exit-btn-retry:hover {
  filter: brightness(1.1);
}

.ux-exit-loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--ux-space-4) 0;
}

.ux-exit-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ux-line-strong);
  border-top-color: var(--ux-primary);
  border-radius: 50%;
  animation: ux-spin 0.8s linear infinite;
}

/* ==========================================================================
   Premium Scoped Styles for the 6 Side Pages (Visual Polish System)
   ========================================================================== */

/* General Polished Page Rules */
.ux-polished-page {
  padding: var(--ux-space-5, 20px) var(--ux-space-4, 16px) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  direction: rtl !important;
  text-align: right !important;
  animation: ux-page-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes ux-page-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ux-polished-page-hero {
  display: flex !important;
  align-items: center !important;
  gap: var(--ux-space-4, 16px) !important;
  margin-bottom: var(--ux-space-5, 20px) !important;
  padding: var(--ux-space-5, 20px) !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, rgba(14, 165, 233, 0.04) 100%) !important;
  border-radius: var(--ux-radius-card, 18px) !important;
  border: 1px dashed rgba(37, 99, 235, 0.15) !important;
}

body.dark .ux-polished-page-hero {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(14, 165, 233, 0.12) 100%) !important;
  border: 1px dashed rgba(37, 99, 235, 0.25) !important;
}

.ux-polished-page-icon {
  font-size: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  height: 58px !important;
  background: var(--ux-surface, #fff) !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  box-shadow: var(--ux-shadow, 0 8px 24px rgba(15,23,42,.08)) !important;
  flex-shrink: 0 !important;
}

body.dark .ux-polished-page-icon {
  background: var(--ux-surface-2, #162238) !important;
}

.ux-polished-page-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ux-space-1, 4px) !important;
}

.ux-polished-page-title {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: var(--ux-text, #111827) !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}

.ux-polished-page-subtitle {
  font-size: 13px !important;
  color: var(--ux-text-2, #475569) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

@media (max-width: 768px) {
  .ux-polished-page {
    padding: var(--ux-space-4, 16px) var(--ux-space-3, 12px) !important;
  }
  .ux-polished-page-hero {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    padding: var(--ux-space-4, 16px) !important;
    gap: var(--ux-space-3, 12px) !important;
  }
  .ux-polished-page-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
  }
  .ux-polished-page-title {
    font-size: 18px !important;
  }
}

/* --------------------------------------------------------------------------
   1. Files Page Styling (#page-files)
   -------------------------------------------------------------------------- */
#page-files.ux-polished-page .toolbar {
  display: flex !important;
  align-items: center !important;
  gap: var(--ux-space-3, 12px) !important;
  background: var(--ux-surface, #fff) !important;
  border: 1px solid var(--ux-line, #e5e7eb) !important;
  border-radius: var(--ux-radius-card, 18px) !important;
  padding: var(--ux-space-4, 16px) !important;
  margin-bottom: var(--ux-space-5, 20px) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
  flex-wrap: wrap !important;
}

#page-files.ux-polished-page .toolbar .btn {
  height: 44px !important;
  padding: 0 var(--ux-space-4, 16px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ux-space-2, 8px) !important;
  font-weight: 700 !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  transition: all 0.2s ease !important;
}

/* Enlarge upload button as a prominent call-to-action */
#page-files.ux-polished-page #addFilesBtn {
  background: var(--ux-primary, #2563eb) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18) !important;
  min-width: 140px !important;
}
#page-files.ux-polished-page #addFilesBtn::after {
  content: "إضافة ملفات" !important;
  font-size: 13.5px !important;
  margin-right: 4px !important;
}

#page-files.ux-polished-page #clearFilesBtn {
  min-width: 44px !important;
}

.ux-polished-toolbar-hint {
  font-size: 12.5px !important;
  color: var(--ux-muted, #64748b) !important;
  margin-right: auto !important; /* Push to the left in RTL */
  line-height: 1.5 !important;
}

@media (max-width: 768px) {
  .ux-polished-toolbar-hint {
    width: 100% !important;
    margin-top: var(--ux-space-2, 8px) !important;
    text-align: right !important;
  }
}

#page-files.ux-polished-page .split {
  gap: var(--ux-space-4, 16px) !important;
}

#page-files.ux-polished-page .panel {
  border: 1px solid var(--ux-line, #e5e7eb) !important;
  border-radius: var(--ux-radius-card, 18px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
  background: var(--ux-surface, #fff) !important;
  overflow: hidden !important;
}

#page-files.ux-polished-page .panel .head {
  padding: var(--ux-space-4, 16px) var(--ux-space-5, 20px) !important;
  background: var(--ux-surface-2, #f9fafc) !important;
  border-bottom: 1px solid var(--ux-line, #e5e7eb) !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  color: var(--ux-text, #111827) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

#page-files.ux-polished-page .panel .body {
  padding: var(--ux-space-4, 16px) !important;
}

/* Beautiful empty state */
#page-files.ux-polished-page .file-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--ux-space-6, 24px) var(--ux-space-4, 16px) !important;
  text-align: center !important;
  background: linear-gradient(to bottom, rgba(37, 99, 235, 0.01), transparent) !important;
  border-radius: var(--ux-radius-card, 18px) !important;
  gap: var(--ux-space-2, 8px) !important;
  border: 1px dashed var(--ux-line-strong, #dde3ee) !important;
}

#page-files.ux-polished-page .file-empty-state .ico {
  font-size: 38px !important;
  margin-bottom: var(--ux-space-1, 4px) !important;
  opacity: 0.8 !important;
}

#page-files.ux-polished-page .file-empty-state strong {
  font-size: 15px !important;
  color: var(--ux-text, #111827) !important;
  font-weight: 700 !important;
}

/* File list card design */
#page-files.ux-polished-page .file-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--ux-surface-2, #f9fafc) !important;
  border: 1px solid var(--ux-line, #e5e7eb) !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  padding: var(--ux-space-3, 12px) var(--ux-space-4, 16px) !important;
  margin-bottom: var(--ux-space-2, 8px) !important;
  transition: all 0.2s ease !important;
}

#page-files.ux-polished-page .file-row:hover {
  transform: translateY(-2px) !important;
  border-color: var(--ux-line-strong, #dde3ee) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02) !important;
}

#page-files.ux-polished-page textarea#filesText {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ux-surface-2, #f9fafc) !important;
  padding: var(--ux-space-4, 16px) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  color: var(--ux-text, #111827) !important;
  line-height: 1.7 !important;
}

/* --------------------------------------------------------------------------
   2. Projects Page Styling (#page-projects)
   -------------------------------------------------------------------------- */
#page-projects.ux-polished-page .projects-page-shell {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

#page-projects.ux-polished-page .projects-layout {
  display: grid !important;
  grid-template-columns: 310px 1fr !important;
  gap: var(--ux-space-5, 20px) !important;
  align-items: start !important;
}

@media (max-width: 1024px) {
  #page-projects.ux-polished-page .projects-layout {
    grid-template-columns: 1fr !important;
  }
}

#page-projects.ux-polished-page .projects-list-panel {
  background: var(--ux-surface, #fff) !important;
  border: 1px solid var(--ux-line, #e5e7eb) !important;
  border-radius: var(--ux-radius-card, 18px) !important;
  padding: var(--ux-space-4, 16px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

#page-projects.ux-polished-page .projects-list-head {
  padding-bottom: var(--ux-space-4, 16px) !important;
  border-bottom: 1px solid var(--ux-line, #e5e7eb) !important;
  margin-bottom: var(--ux-space-4, 16px) !important;
}

#page-projects.ux-polished-page .projects-list-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--ux-text, #111827) !important;
  margin: 0 !important;
}

#page-projects.ux-polished-page .projects-list-actions {
  display: flex !important;
  gap: var(--ux-space-2, 8px) !important;
  margin-top: var(--ux-space-3, 12px) !important;
  flex-wrap: wrap !important;
}

#page-projects.ux-polished-page .projects-list-actions .btn {
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

#page-projects.ux-polished-page #newProjectBtn {
  background: var(--ux-primary, #2563eb) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15) !important;
  flex-grow: 1 !important;
}

#page-projects.ux-polished-page #projectsList {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ux-space-2, 8px) !important;
}

/* Individual project items styling */
#page-projects.ux-polished-page .project-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: var(--ux-space-3, 12px) var(--ux-space-4, 16px) !important;
  background: var(--ux-surface-2, #f9fafc) !important;
  border: 1px solid var(--ux-line, #e5e7eb) !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  color: var(--ux-text-2, #475569) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#page-projects.ux-polished-page .project-item:hover,
#page-projects.ux-polished-page .project-item.active {
  background: rgba(37, 99, 235, 0.05) !important;
  border-color: var(--ux-primary, #2563eb) !important;
  color: var(--ux-primary, #2563eb) !important;
}

/* Project Memory panel styling */
#page-projects.ux-polished-page .project-memory-panel {
  border: 1px solid var(--ux-line, #e5e7eb) !important;
  border-radius: var(--ux-radius-card, 18px) !important;
  background: var(--ux-surface, #fff) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

#page-projects.ux-polished-page .project-memory-panel .head {
  padding: var(--ux-space-4, 16px) var(--ux-space-5, 20px) !important;
  background: var(--ux-surface-2, #f9fafc) !important;
  border-bottom: 1px solid var(--ux-line, #e5e7eb) !important;
  font-weight: 800 !important;
  font-size: 15.5px !important;
  color: var(--ux-text, #111827) !important;
}

#page-projects.ux-polished-page .project-memory-panel .body {
  padding: var(--ux-space-5, 20px) !important;
}

#page-projects.ux-polished-page #projectMemoryProjectHint {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--ux-primary, #2563eb) !important;
  margin: 0 0 var(--ux-space-4, 16px) 0 !important;
  padding: var(--ux-space-3, 12px) var(--ux-space-4, 16px) !important;
  background: rgba(37, 99, 235, 0.03) !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  border-right: 4px solid var(--ux-primary, #2563eb) !important;
}

body.dark #page-projects.ux-polished-page #projectMemoryProjectHint {
  background: rgba(37, 99, 235, 0.12) !important;
}

#page-projects.ux-polished-page .project-memory-desc {
  font-size: 12.5px !important;
  color: var(--ux-text-2, #475569) !important;
  margin-bottom: var(--ux-space-4, 16px) !important;
  line-height: 1.6 !important;
}

#page-projects.ux-polished-page .project-memory-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--ux-space-4, 16px) !important;
}

@media (max-width: 640px) {
  #page-projects.ux-polished-page .project-memory-grid {
    grid-template-columns: 1fr !important;
  }
}

#page-projects.ux-polished-page .project-memory-field--full {
  grid-column: 1 / -1 !important;
}

#page-projects.ux-polished-page .project-memory-field label {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--ux-text, #111827) !important;
  margin-bottom: var(--ux-space-2, 8px) !important;
}

#page-projects.ux-polished-page .project-memory-field input,
#page-projects.ux-polished-page .project-memory-field select,
#page-projects.ux-polished-page .project-memory-field textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  border: 1px solid var(--ux-line-strong, #dde3ee) !important;
}

#page-projects.ux-polished-page .project-memory-output-fieldset {
  border: 1px solid var(--ux-line-strong, #dde3ee) !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  padding: var(--ux-space-4, 16px) !important;
  margin: 0 !important;
}

#page-projects.ux-polished-page .project-memory-output-fieldset legend {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--ux-text, #111827) !important;
  padding: 0 var(--ux-space-2, 8px) !important;
}

#page-projects.ux-polished-page .project-memory-output-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: var(--ux-space-2, 8px) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--ux-text-2, #475569) !important;
}

#page-projects.ux-polished-page .project-memory-output-grid label {
  display: flex !important;
  align-items: center !important;
  gap: var(--ux-space-2, 8px) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

#page-projects.ux-polished-page .project-memory-actions {
  display: flex !important;
  gap: var(--ux-space-3, 12px) !important;
  margin-top: var(--ux-space-5, 20px) !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

#page-projects.ux-polished-page .project-memory-actions .btn {
  height: 44px !important;
  padding: 0 var(--ux-space-4, 16px) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#page-projects.ux-polished-page #projectPageMemorySave {
  background: var(--ux-primary, #2563eb) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

#page-projects.ux-polished-page .project-memory-status {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ux-success, #10b981) !important;
  margin-right: auto !important;
}

/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   3. Canvas Page Styling (#page-canvas)
   -------------------------------------------------------------------------- */
#page-canvas {
  height: calc(100vh - 60px) !important;
  max-height: calc(100vh - 60px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  padding: 4px 8px !important;
  background: var(--bg-app, #0f172a) !important;
}

#page-canvas.ux-polished-page .board-page-shell {
  background: transparent !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
#page-canvas .board-editor-zone,
#page-canvas .ux-polished-page-hero,
#page-canvas .page-hero {
  display: none !important;
}

/* --------------------------------------------------------------------------
   4. Universal Clean Screen Integration (#page-transcription & all subpages)
   -------------------------------------------------------------------------- */
.ux-polished-page-hero,
.ux-page-hero,
.page-hero,
#page-transcription .ux-page-hero,
#page-transcription.ux-polished-page .ux-page-hero {
  display: none !important;
}

#page-transcription,
#page-files,
#page-knowledge,
#page-projects,
#page-settings,
#page-workflows,
#page-canvas,
#page-downloads {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#page-transcription .document-lab-shell,
#page-transcription.ux-polished-page .document-lab-shell {
  background: transparent !important;
  padding: 12px 18px 24px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#page-transcription .toolbar,
#page-transcription .document-lab-toolbar,
#page-transcription .document-lab-toolbar-main,
#page-transcription.ux-polished-page .document-lab-toolbar-main,
#page-files .toolbar,
#page-knowledge .toolbar,
#page-projects .toolbar,
#page-settings .toolbar,
#page-canvas .toolbar {
  position: static !important;
  overflow: visible !important;
  overflow-x: visible !important;
  white-space: normal !important;
  flex-wrap: wrap !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  background: var(--ux-surface, #fff) !important;
  border: 1px solid var(--ux-line, #e2e8f0) !important;
  border-radius: var(--ux-radius-card, 16px) !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#page-transcription.ux-polished-page .document-lab-toolbar-main .btn {
  height: 40px !important;
  padding: 0 var(--ux-space-4, 16px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ux-space-2, 8px) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
}

#page-transcription.ux-polished-page #transcribePickBtn {
  background: var(--ux-primary, #2563eb) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15) !important;
}

#page-transcription.ux-polished-page .document-lab-file-hint {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--ux-primary, #2563eb) !important;
  margin-right: auto !important;
  background: rgba(37, 99, 235, 0.03) !important;
  padding: var(--ux-space-2, 8px) var(--ux-space-3, 12px) !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  border-right: 3px solid var(--ux-primary, #2563eb) !important;
}

body.dark #page-transcription.ux-polished-page .document-lab-file-hint {
  background: rgba(37, 99, 235, 0.12) !important;
}

/* Lab Metrics Card */
#page-transcription.ux-polished-page .document-lab-lab-card {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.02) 0%, rgba(16, 185, 129, 0.02) 100%) !important;
  border: 1px solid var(--ux-line, #e5e7eb) !important;
  border-radius: var(--ux-radius-card, 18px) !important;
  padding: var(--ux-space-4, 16px) !important;
  margin-bottom: var(--ux-space-4, 16px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01) !important;
}

body.dark #page-transcription.ux-polished-page .document-lab-lab-card {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
}

#page-transcription.ux-polished-page .document-lab-metrics-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
  gap: var(--ux-space-3, 12px) !important;
  margin-bottom: var(--ux-space-3, 12px) !important;
}

#page-transcription.ux-polished-page .transcribe-lab-metric {
  background: var(--ux-surface, #fff) !important;
  border: 1px solid var(--ux-line-strong, #dde3ee) !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  padding: var(--ux-space-2, 8px) var(--ux-space-3, 12px) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

#page-transcription.ux-polished-page .transcribe-lab-metric span {
  font-size: 11px !important;
  color: var(--ux-muted, #64748b) !important;
  font-weight: 600 !important;
}

#page-transcription.ux-polished-page .transcribe-lab-metric strong {
  font-size: 12px !important;
  color: var(--ux-text, #111827) !important;
  font-weight: 700 !important;
}

#page-transcription.ux-polished-page .document-lab-status-note {
  font-size: 12px !important;
  color: var(--ux-text-2, #475569) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Body split */
#page-transcription.ux-polished-page .document-lab-body {
  display: grid !important;
  grid-template-columns: 270px 1fr !important;
  gap: var(--ux-space-4, 16px) !important;
  align-items: start !important;
}

@media (max-width: 1024px) {
  #page-transcription.ux-polished-page .document-lab-body {
    grid-template-columns: 1fr !important;
  }
}

#page-transcription.ux-polished-page .document-lab-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ux-space-4, 16px) !important;
}

#page-transcription.ux-polished-page .document-lab-sidebar-card {
  background: var(--ux-surface, #fff) !important;
  border: 1px solid var(--ux-line, #e5e7eb) !important;
  border-radius: var(--ux-radius-card, 18px) !important;
  padding: var(--ux-space-4, 16px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

#page-transcription.ux-polished-page .document-lab-sidebar-title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--ux-text, #111827) !important;
  margin: 0 0 var(--ux-space-3, 12px) 0 !important;
  border-right: 3px solid var(--ux-primary, #2563eb) !important;
  padding-right: var(--ux-space-2, 8px) !important;
  line-height: 1.2 !important;
}

#page-transcription.ux-polished-page .document-lab-dropzone {
  border: 2px dashed var(--ux-line-strong, #dde3ee) !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  background: var(--ux-surface-2, #f9fafc) !important;
  padding: var(--ux-space-4, 16px) !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

#page-transcription.ux-polished-page .document-lab-dropzone:hover {
  border-color: var(--ux-primary, #2563eb) !important;
  background: rgba(37, 99, 235, 0.02) !important;
}

#page-transcription.ux-polished-page .document-lab-sidebar-card select {
  width: 100% !important;
  height: 48px !important;
  padding: 0 var(--ux-space-4, 16px) !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border: 1px solid var(--ux-line-strong, #dde3ee) !important;
  background: var(--ux-surface, #fff) !important;
  color: var(--ux-text, #111827) !important;
  direction: rtl !important;
  text-align: right !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 12px center !important;
  background-size: 16px !important;
  padding-left: 36px !important;
}

/* Output Card */
#page-transcription.ux-polished-page .document-lab-output-card {
  background: var(--ux-surface, #fff) !important;
  border: 1px solid var(--ux-line, #e5e7eb) !important;
  border-radius: var(--ux-radius-card, 18px) !important;
  padding: var(--ux-space-4, 16px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ux-space-4, 16px) !important;
}

#page-transcription.ux-polished-page .document-lab-output-head {
  border-bottom: 1px solid var(--ux-line, #e5e7eb) !important;
  padding-bottom: var(--ux-space-3, 12px) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--ux-space-2, 8px) !important;
}

#page-transcription.ux-polished-page .document-lab-output-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--ux-text, #111827) !important;
  margin: 0 !important;
}

#page-transcription.ux-polished-page .document-lab-output-lead {
  font-size: 12px !important;
  color: var(--ux-text-2, #475569) !important;
  margin: 4px 0 0 0 !important;
}

#page-transcription.ux-polished-page .document-lab-output-actions {
  display: flex !important;
  align-items: center !important;
  gap: var(--ux-space-2, 8px) !important;
  flex-wrap: wrap !important;
}

#page-transcription.ux-polished-page .document-lab-output-actions .btn {
  height: 36px !important;
  padding: 0 var(--ux-space-3, 12px) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

#page-transcription.ux-polished-page textarea#transcribeOutput {
  border: 1px solid var(--ux-line-strong, #dde3ee) !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  background: var(--ux-surface-2, #f9fafc) !important;
  padding: var(--ux-space-4, 16px) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  color: var(--ux-text, #111827) !important;
  line-height: 1.7 !important;
  width: 100% !important;
  min-height: 40vh !important;
}

#page-transcription.ux-polished-page .document-lab-output-footer {
  display: flex !important;
  gap: var(--ux-space-2, 8px) !important;
  flex-wrap: wrap !important;
}

#page-transcription.ux-polished-page .document-lab-output-footer .tag {
  background: var(--ux-surface-2, #f9fafc) !important;
  border: 1px solid var(--ux-line, #e5e7eb) !important;
  border-radius: 20px !important;
  padding: var(--ux-space-2, 8px) var(--ux-space-3, 12px) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--ux-text-2, #475569) !important;
}

/* --------------------------------------------------------------------------
   5. Knowledge Base Page Styling (#page-knowledge)
   -------------------------------------------------------------------------- */
#page-knowledge.ux-polished-page .toolbar {
  display: flex !important;
  align-items: center !important;
  gap: var(--ux-space-3, 12px) !important;
  background: var(--ux-surface, #fff) !important;
  border: 1px solid var(--ux-line, #e5e7eb) !important;
  border-radius: var(--ux-radius-card, 18px) !important;
  padding: var(--ux-space-4, 16px) !important;
  margin-bottom: var(--ux-space-5, 20px) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
}

#page-knowledge.ux-polished-page .toolbar .btn {
  height: 42px !important;
  padding: 0 var(--ux-space-4, 16px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ux-space-2, 8px) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

#page-knowledge.ux-polished-page #kbBuildBtn {
  background: var(--ux-primary, #2563eb) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15) !important;
  min-width: max-content !important;
  padding: 0 var(--ux-space-4, 16px) !important;
}
#page-knowledge.ux-polished-page #kbBuildBtn::after {
  content: "فهرسة قاعدة المعرفة" !important;
  font-size: 13px !important;
}

#page-knowledge.ux-polished-page #kbStats {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--ux-primary, #2563eb) !important;
  background: rgba(37, 99, 235, 0.03) !important;
  padding: var(--ux-space-2, 8px) var(--ux-space-3, 12px) !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  margin-right: auto !important;
}

body.dark #page-knowledge.ux-polished-page #kbStats {
  background: rgba(37, 99, 235, 0.12) !important;
}

#page-knowledge.ux-polished-page .split {
  gap: var(--ux-space-4, 16px) !important;
}

#page-knowledge.ux-polished-page .panel {
  border: 1px solid var(--ux-line, #e5e7eb) !important;
  border-radius: var(--ux-radius-card, 18px) !important;
  background: var(--ux-surface, #fff) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

#page-knowledge.ux-polished-page .panel .head {
  padding: var(--ux-space-4, 16px) var(--ux-space-5, 20px) !important;
  background: var(--ux-surface-2, #f9fafc) !important;
  border-bottom: 1px solid var(--ux-line, #e5e7eb) !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  color: var(--ux-text, #111827) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

#page-knowledge.ux-polished-page .panel .body {
  padding: var(--ux-space-4, 16px) !important;
}

/* Beautiful search input bar inside panel */
#page-knowledge.ux-polished-page .panel .body .row {
  display: flex !important;
  gap: var(--ux-space-2, 8px) !important;
  align-items: center !important;
}

#page-knowledge.ux-polished-page #kbQuery {
  height: 44px !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  padding: 0 var(--ux-space-4, 16px) !important;
  font-size: 13.5px !important;
  flex-grow: 1 !important;
  background: var(--ux-surface-2, #f9fafc) !important;
  border: 1px solid var(--ux-line-strong, #dde3ee) !important;
}

#page-knowledge.ux-polished-page #kbSearchBtn,
#page-knowledge.ux-polished-page #kbInsertBtn {
  height: 44px !important;
  width: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
}

#page-knowledge.ux-polished-page #kbResults {
  background: var(--ux-surface-2, #f9fafc) !important;
  border: 1px solid var(--ux-line-strong, #dde3ee) !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  padding: var(--ux-space-4, 16px) !important;
  min-height: 250px !important;
  font-size: 13.5px !important;
  color: var(--ux-text-2, #475569) !important;
  line-height: 1.7 !important;
}

#page-knowledge.ux-polished-page .panel .col {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ux-space-2, 8px) !important;
  flex: 1 !important;
}

#page-knowledge.ux-polished-page .panel label.hint {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--ux-text, #111827) !important;
}

#page-knowledge.ux-polished-page .panel select,
#page-knowledge.ux-polished-page .panel textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  border: 1px solid var(--ux-line-strong, #dde3ee) !important;
  background: var(--ux-surface-2, #f9fafc) !important;
  font-size: 13px !important;
}

/* --------------------------------------------------------------------------
   6. Downloads Page Styling (#page-downloads)
   -------------------------------------------------------------------------- */
#page-downloads.ux-polished-page .downloads-page-shell {
  background: transparent !important;
  padding: 0 !important;
}

/* Hide original title text because we have our beautiful hero */
#page-downloads.ux-polished-page .downloads-hero-head > div:first-child {
  display: none !important;
}

#page-downloads.ux-polished-page .downloads-hero {
  margin-bottom: var(--ux-space-4, 16px) !important;
}

#page-downloads.ux-polished-page .downloads-hero-head {
  display: flex !important;
  justify-content: flex-end !important; /* Align actions to the left (RTL) */
}

#page-downloads.ux-polished-page .downloads-actions {
  display: flex !important;
  gap: var(--ux-space-2, 8px) !important;
  flex-wrap: wrap !important;
}

#page-downloads.ux-polished-page .downloads-actions .btn {
  height: 38px !important;
  padding: 0 var(--ux-space-4, 16px) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ux-space-2, 8px) !important;
}

/* APK Download Card Styling */
#page-downloads.ux-polished-page .download-feature-card {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.03) 0%, rgba(14, 165, 233, 0.03) 100%) !important;
  border: 1px solid var(--ux-line, #e5e7eb) !important;
  border-radius: var(--ux-radius-card, 18px) !important;
  padding: var(--ux-space-5, 20px) !important;
  margin-bottom: var(--ux-space-4, 16px) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: var(--ux-space-5, 20px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

body.dark #page-downloads.ux-polished-page .download-feature-card {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%) !important;
}

@media (max-width: 820px) {
  #page-downloads.ux-polished-page .download-feature-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: var(--ux-space-4, 16px) !important;
  }
}

#page-downloads.ux-polished-page .download-feature-brand {
  display: flex !important;
  gap: var(--ux-space-4, 16px) !important;
  align-items: center !important;
}

#page-downloads.ux-polished-page .download-feature-logo {
  width: 52px !important;
  height: 52px !important;
  background: var(--ux-surface, #fff) !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  padding: var(--ux-space-2, 8px) !important;
  box-shadow: var(--ux-shadow, 0 8px 24px rgba(15,23,42,.08)) !important;
}

#page-downloads.ux-polished-page .download-feature-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ux-text, #111827) !important;
  margin: 0 0 var(--ux-space-1, 4px) 0 !important;
}

#page-downloads.ux-polished-page .download-feature-main {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ux-space-3, 12px) !important;
  max-width: 600px !important;
}

#page-downloads.ux-polished-page .download-feature-note {
  font-size: 12px !important;
  color: var(--ux-text-2, #475569) !important;
  line-height: 1.5 !important;
}

#page-downloads.ux-polished-page .download-feature-side {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: var(--ux-space-3, 12px) !important;
}

@media (max-width: 820px) {
  #page-downloads.ux-polished-page .download-feature-side {
    width: 100% !important;
    align-items: flex-start !important;
  }
}

#page-downloads.ux-polished-page .app-release-pill {
  background: var(--ux-success, #10b981) !important;
  color: #fff !important;
  padding: var(--ux-space-1, 4px) var(--ux-space-3, 12px) !important;
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

#page-downloads.ux-polished-page .download-actions {
  display: flex !important;
  gap: var(--ux-space-2, 8px) !important;
  flex-wrap: wrap !important;
}

#page-downloads.ux-polished-page #downloadsMainApkBtn {
  background: var(--ux-primary, #2563eb) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15) !important;
  font-weight: 700 !important;
}

#page-downloads.ux-polished-page .downloads-list-panel {
  background: var(--ux-surface, #fff) !important;
  border: 1px solid var(--ux-line, #e5e7eb) !important;
  border-radius: var(--ux-radius-card, 18px) !important;
  padding: var(--ux-space-4, 16px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

#page-downloads.ux-polished-page .downloads-search-row {
  margin-bottom: var(--ux-space-4, 16px) !important;
}

#page-downloads.ux-polished-page #dlSearch {
  width: 100% !important;
  height: 42px !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  padding: 0 var(--ux-space-4, 16px) !important;
  font-size: 13px !important;
  background: var(--ux-surface-2, #f9fafc) !important;
  border: 1px solid var(--ux-line-strong, #dde3ee) !important;
}

#page-downloads.ux-polished-page .download-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--ux-surface-2, #f9fafc) !important;
  border: 1px solid var(--ux-line, #e5e7eb) !important;
  border-radius: var(--ux-radius-control, 14px) !important;
  padding: var(--ux-space-3, 12px) var(--ux-space-4, 16px) !important;
  margin-bottom: var(--ux-space-2, 8px) !important;
  transition: all 0.2s ease !important;
}

#page-downloads.ux-polished-page .download-item:hover {
  transform: translateY(-2px) !important;
  border-color: var(--ux-line-strong, #dde3ee) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   CORRECTIVE PREMIUM LAYOUTS FOR FILES AND KNOWLEDGE BASE SCREENS
   ────────────────────────────────────────────────────────────────────────── */

/* Make files and knowledge base pages scroll on the body level naturally */
#page-files.ux-polished-page,
#page-knowledge.ux-polished-page {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
  padding-bottom: 60px !important;
}

/* Stacks panel blocks vertically, removing the 1fr 1fr split layout that caused internal scrollbars on mobile & desktop */
#page-files.ux-polished-page .split,
#page-knowledge.ux-polished-page .split {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  gap: 24px !important;
  padding: 0 !important;
}

/* Force panels to flow naturally inside the document */
#page-files.ux-polished-page .panel,
#page-knowledge.ux-polished-page .panel {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#page-files.ux-polished-page .panel .body,
#page-knowledge.ux-polished-page .panel .body {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: var(--ux-space-4, 16px) !important;
}

/* Prevent internal scrolling inside lists */
#page-files.ux-polished-page #filesList,
#page-knowledge.ux-polished-page #kbResults {
  height: auto !important;
  min-height: 140px !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Ensure files textarea is spacious and scales comfortably */
#page-files.ux-polished-page textarea#filesText {
  min-height: 350px !important;
  height: auto !important;
}

/* Ensure no overflow and correct padding for RTL lists */
#filesList, #kbResults {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Hide the 'سياق نصّي يُرسل للمحادثة' panel from the Files page as requested */
#page-files.ux-polished-page .split .panel:nth-child(2) {
  display: none !important;
}

/* Unconditional hide rules for legacy buttons and support dock on active chat page */
#androidChatHistoryBtn,
#androidChatSettingsBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.chat-page-active #appSupportDock,
body.chat-page-active .app-support-dock {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}