:root{
  --fx-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
  --fx-radius: 16px;
  --fx-radius-lg: 20px;
  --fx-radius-xl: 26px;

  --fx-primary: #1877f2;
  --fx-primary2: #00b4ff;

  --fx-danger: #ef4444;
  --fx-success: #16a34a;
  --fx-warning: #f59e0b;

  --fx-shadow: 0 18px 55px rgba(2,6,23,.45);
  --fx-shadow2: 0 10px 28px rgba(2,6,23,.28);
  --fx-ring: 0 0 0 3px rgba(24,119,242,.22);
}

html[data-theme="dark"]{
  --fx-bg: #050509;
  --fx-bg-grad: radial-gradient(circle at top, #181b2b 0%, #050509 45%, #020204 100%);
  --fx-surface: rgba(15, 17, 34, .72);
  --fx-surface2: rgba(255,255,255,.06);
  --fx-surface3: rgba(2,6,23,.55);
  --fx-border: rgba(148,163,184,.16);
  --fx-border2: rgba(148,163,184,.24);
  --fx-text: #e5e7eb;
  --fx-muted: rgba(226,232,240,.74);
  --fx-muted2: rgba(148,163,184,.85);
  --fx-shadow: 0 18px 55px rgba(2,6,23,.62);
  --fx-shadow2: 0 10px 28px rgba(2,6,23,.40);
  color-scheme: dark;
}

html[data-theme="light"]{
  --fx-bg: #f8fafc;
  --fx-bg-grad: radial-gradient(circle at top, #ffffff 0%, #f8fafc 45%, #eef2ff 100%);
  --fx-surface: rgba(255,255,255,.92);
  --fx-surface2: rgba(15,23,42,.04);
  --fx-surface3: rgba(255,255,255,.72);
  --fx-border: rgba(15,23,42,.10);
  --fx-border2: rgba(15,23,42,.14);
  --fx-text: #0f172a;
  --fx-muted: rgba(71,85,105,.92);
  --fx-muted2: rgba(71,85,105,.72);
  --fx-shadow: 0 18px 55px rgba(15,23,42,.12);
  --fx-shadow2: 0 10px 28px rgba(15,23,42,.10);
  --fx-ring: 0 0 0 3px rgba(24,119,242,.18);
  color-scheme: light;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--fx-font);
  background: var(--fx-bg-grad);
  color: var(--fx-text);
  direction: rtl;
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; height: auto; display: block; }
button, input, select, textarea{ font-family: inherit; }

::selection{
  background: rgba(24,119,242,.28);
}

.wrapper{
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 16px 24px;
  min-height: calc(100vh - 140px);
}

@media (max-width: 900px){
  .wrapper{
    padding: 14px 12px 110px;
  }
}

.fx-topbar{
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--fx-surface3);
  border-bottom: 1px solid var(--fx-border);
  backdrop-filter: blur(14px);
}

.fx-topbar-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fx-topbar-right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.fx-icon-btn{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface2);
  color: var(--fx-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.fx-icon-btn svg{ width: 20px; height: 20px; opacity: .92; }
.fx-icon-btn:hover{
  background: rgba(24,119,242,.10);
  border-color: rgba(24,119,242,.22);
  box-shadow: 0 10px 22px rgba(24,119,242,.12);
}
.fx-icon-btn:active{ transform: scale(.98); }

#fxNavToggle{ display: none; }
@media (max-width: 900px){
  #fxNavToggle{ display: inline-flex; }
}

.fx-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 18px;
  min-width: 0;
  transition: background .12s ease, border-color .12s ease;
}
.fx-brand:hover{ background: var(--fx-surface2); }

.fx-brand img{
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.fx-brand-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fx-brand-title{
  font-weight: 1000;
  font-size: 14px;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fx-brand-sub{
  font-weight: 900;
  font-size: 11px;
  color: var(--fx-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px){
  .fx-brand-sub{ display: none; }
}

.fx-topnav{
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-nav-scroll{
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 0 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fx-nav-scroll::-webkit-scrollbar{ display: none; }

@media (min-width: 901px){
  /* منع قص القوائم المنسدلة في نسخة الكمبيوتر */
  .fx-nav-scroll{ overflow: visible; }
}

.fx-nav-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fx-muted);
  font-weight: 950;
  font-size: 12px;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, transform .12s ease, color .12s ease, box-shadow .12s ease;
}
.fx-nav-item .ic{ font-size: 14px; line-height: 1; }
.fx-nav-item:hover{
  background: var(--fx-surface2);
  border-color: var(--fx-border);
  color: var(--fx-text);
}
.fx-nav-item:active{ transform: scale(.99); }

.fx-nav-item.active{
  background: linear-gradient(135deg, var(--fx-primary), var(--fx-primary2));
  border-color: rgba(255,255,255,.10);
  color: #fff;
  box-shadow: 0 12px 26px rgba(24,119,242,.22);
}

@media (max-width: 900px){
  .fx-topnav{ display: none; }
}

.fx-more{ position: relative; display: inline-flex; }
.fx-more-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface2);
  color: var(--fx-text);
  font-weight: 950;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.fx-more-toggle:hover{
  background: rgba(24,119,242,.10);
  border-color: rgba(24,119,242,.22);
  box-shadow: 0 10px 22px rgba(24,119,242,.12);
}
.fx-more-toggle:active{ transform: scale(.99); }

.fx-more-panel{
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  width: min(520px, calc(100vw - 24px));
  border-radius: 20px;
  background: var(--fx-surface);
  border: 1px solid var(--fx-border2);
  box-shadow: var(--fx-shadow);
  padding: 12px;
  max-height: calc(100vh - 90px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 120;
  display: none;
}
.fx-more.open .fx-more-panel{ display: block; }

.fx-more-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.fx-more-group{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 4px;
  color: var(--fx-muted);
  font-weight: 1000;
  font-size: 11px;
}

.fx-more-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid transparent;
  background: var(--fx-surface2);
  color: var(--fx-text);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.fx-more-item:hover{
  background: rgba(24,119,242,.10);
  border-color: rgba(24,119,242,.22);
  transform: translateY(-1px);
}
.fx-more-item.active{
  background: rgba(24,119,242,.14);
  border-color: rgba(24,119,242,.28);
}

.fx-user{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface2);
  cursor: pointer;
  max-width: 44vw;
  min-width: 0;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.fx-user:hover{
  background: rgba(24,119,242,.10);
  border-color: rgba(24,119,242,.22);
  box-shadow: 0 10px 22px rgba(24,119,242,.12);
}
.fx-avatar{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.16);
}
html[data-theme="light"] .fx-avatar{
  border-color: rgba(15,23,42,.10);
}
.fx-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fx-user-name{
  font-weight: 950;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fx-user-caret{
  opacity: .7;
  font-weight: 900;
}

.fx-dropdown{
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  min-width: 220px;
  border-radius: 18px;
  background: var(--fx-surface);
  border: 1px solid var(--fx-border2);
  box-shadow: var(--fx-shadow);
  padding: 8px;
  z-index: 120;
  display: none;
}
.fx-user.open .fx-dropdown{ display: block; }

.fx-dropdown a,
.fx-dropdown button{
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fx-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 950;
  font-size: 12px;
  transition: background .12s ease, border-color .12s ease;
}
.fx-dropdown a:hover,
.fx-dropdown button:hover{
  background: var(--fx-surface2);
  border-color: var(--fx-border);
}
.fx-dd-sep{
  height: 1px;
  background: var(--fx-border);
  margin: 6px 2px;
}

.fx-drawer{
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  padding: 14px;
  display: none;
}
.fx-drawer.open{ display: block; }

.fx-drawer-panel{
  width: min(520px, 100%);
  height: 100%;
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface);
  box-shadow: var(--fx-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fx-drawer-header{
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--fx-border);
}
.fx-drawer-title{
  font-weight: 1000;
}

.fx-drawer-search{
  padding: 12px 14px;
  border-bottom: 1px solid var(--fx-border);
}
.fx-drawer-search input{
  width: 100%;
  border-radius: 18px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface2);
  color: var(--fx-text);
  padding: 12px 14px;
  outline: none;
  font-weight: 950;
  font-size: 13px;
}
.fx-drawer-search input:focus{ box-shadow: var(--fx-ring); border-color: rgba(24,119,242,.28); }

.fx-drawer-body{
  padding: 12px 14px 16px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fx-drawer-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid transparent;
  background: var(--fx-surface2);
  color: var(--fx-text);
  font-weight: 950;
  font-size: 13px;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.fx-drawer-link:hover{
  background: rgba(24,119,242,.10);
  border-color: rgba(24,119,242,.22);
  transform: translateY(-1px);
}
.fx-drawer-link.active{
  background: rgba(24,119,242,.14);
  border-color: rgba(24,119,242,.28);
}

.fx-drawer-section-title{
  margin: 12px 4px 6px;
  color: var(--fx-muted);
  font-weight: 1000;
  font-size: 11px;
}

.fx-cmd{
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(6px);
  padding: 18px;
  display: none;
}
.fx-cmd.open{
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.fx-cmd-panel{
  width: min(720px, 100%);
  border-radius: 22px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface);
  box-shadow: var(--fx-shadow);
  overflow: hidden;
}

.fx-cmd-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--fx-border);
}
.fx-cmd-head input{
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--fx-text);
  font-weight: 950;
  font-size: 13px;
}
.fx-cmd-list{
  padding: 10px;
  max-height: 54vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fx-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface2);
  color: var(--fx-text);
  font-weight: 1000;
  font-size: 11px;
}

.fx-cmd-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid transparent;
  background: var(--fx-surface2);
  color: var(--fx-text);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.fx-cmd-item:hover,
.fx-cmd-item.active{
  background: rgba(24,119,242,.10);
  border-color: rgba(24,119,242,.22);
  transform: translateY(-1px);
}
.fx-cmd-item .hint{
  color: var(--fx-muted);
  font-weight: 850;
  font-size: 11px;
}

.fx-bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: var(--fx-surface3);
  border-top: 1px solid var(--fx-border);
  backdrop-filter: blur(14px);
  padding-bottom: env(safe-area-inset-bottom);
  display: none;
}

.fx-bottom-nav-inner{
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 8px;
  padding: 10px 12px;
}

.fx-bottom-nav a,
.fx-bottom-nav button{
  border: 1px solid transparent;
  background: transparent;
  color: var(--fx-muted);
  border-radius: 18px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-weight: 950;
  font-size: 11px;
  transition: background .12s ease, border-color .12s ease, transform .12s ease, color .12s ease;
}
.fx-bottom-nav a .ic,
.fx-bottom-nav button .ic{ font-size: 16px; line-height: 1; }

.fx-bottom-nav a.active{
  background: rgba(24,119,242,.14);
  border-color: rgba(24,119,242,.28);
  color: var(--fx-text);
}
.fx-bottom-nav a:active,
.fx-bottom-nav button:active{ transform: scale(.99); }

@media (max-width: 900px){
  .fx-bottom-nav{ display: block; }
}

.fx-footer{
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 16px 24px;
  text-align: center;
  color: var(--fx-muted);
  font-weight: 800;
  font-size: 12px;
}
.fx-footer a{ color: inherit; text-decoration: underline; opacity: .9; }
.fx-footer a:hover{ opacity: 1; }

.panel{
  background: var(--fx-surface);
  border: 1px solid var(--fx-border2);
  border-radius: var(--fx-radius-xl);
  box-shadow: var(--fx-shadow2);
  padding: 16px;
}

.card{
  background: var(--fx-surface);
  border: 1px solid var(--fx-border2);
  border-radius: var(--fx-radius-xl);
  box-shadow: var(--fx-shadow2);
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface2);
  color: var(--fx-text);
  font-weight: 950;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.btn:hover{
  background: rgba(24,119,242,.10);
  border-color: rgba(24,119,242,.22);
  box-shadow: 0 10px 22px rgba(24,119,242,.10);
}
.btn:active{ transform: scale(.99); }

.btn-primary{
  background: linear-gradient(135deg, var(--fx-primary), var(--fx-primary2));
  border-color: rgba(255,255,255,.10);
  color: #fff;
}
.btn-primary:hover{
  box-shadow: 0 12px 26px rgba(24,119,242,.22);
  border-color: rgba(255,255,255,.18);
}

.btn-secondary{
  background: rgba(255,255,255,.08);
}



/* Aliases للمارك-أب القديم (btn primary / btn secondary) */
.btn.primary{
  background: linear-gradient(135deg, var(--fx-primary), var(--fx-primary2));
  border-color: rgba(255,255,255,.10);
  color: #fff;
}
.btn.primary:hover{
  box-shadow: 0 12px 26px rgba(24,119,242,.22);
  border-color: rgba(255,255,255,.18);
}
.btn.secondary{
  background: rgba(255,255,255,.08);
}

/* Form utility classes (كتير من صفحات البوت بتستخدمها) */
.label{
  display: block;
  margin: 12px 0 6px;
  color: var(--fx-muted);
  font-weight: 950;
  font-size: 12px;
}

.input,
.select,
.textarea{
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface2);
  color: var(--fx-text);
  padding: 11px 12px;
  outline: none;
  font-weight: 900;
  font-size: 13px;
}
.textarea{ min-height: 110px; resize: vertical; }
.select{ cursor: pointer; }

.input:focus, .select:focus, .textarea:focus{
  box-shadow: var(--fx-ring);
  border-color: rgba(24,119,242,.30);
}

/* Fix: صفحات فيها ستايل قديم بيخلي النص أبيض في اللايت مود */
html[data-theme="light"] .input,
html[data-theme="light"] .select,
html[data-theme="light"] .textarea{
  background: var(--fx-surface2) !important;
  color: var(--fx-text) !important;
  border-color: var(--fx-border2) !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea{
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface2);
  color: var(--fx-text);
  padding: 11px 12px;
  outline: none;
  font-weight: 900;
  font-size: 13px;
}
textarea{ min-height: 110px; resize: vertical; }
select{ cursor: pointer; }

input:focus, select:focus, textarea:focus{
  box-shadow: var(--fx-ring);
  border-color: rgba(24,119,242,.30);
}

.form-control, .form-select{
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface2);
  color: var(--fx-text);
  padding: 11px 12px;
  outline: none;
  font-weight: 900;
  font-size: 13px;
}
.form-control:focus, .form-select:focus{
  box-shadow: var(--fx-ring);
  border-color: rgba(24,119,242,.30);
}

.notice{
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface2);
  box-shadow: var(--fx-shadow2);
  font-weight: 950;
  margin: 12px 0;
}
.notice.success{ border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.10); }
.notice.error{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); }
.notice.warning{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); }

.fx-emoji-field{ position: relative; }
.fx-emoji-btn{
  position: absolute;
  inset-inline-end: 10px;
  bottom: 10px;
  width: 36px;
  height: 36px;
  border-radius: 16px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface3);
  color: var(--fx-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fx-emoji-panel{
  position: absolute;
  inset-inline-end: 10px;
  bottom: 54px;
  width: 260px;
  border-radius: 18px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface);
  box-shadow: var(--fx-shadow);
  padding: 10px;
  display: none;
  z-index: 30;
}
.fx-emoji-panel.open{ display: block; }
.fx-emoji-grid{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.fx-emoji{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid transparent;
  background: var(--fx-surface2);
  cursor: pointer;
  font-size: 16px;
}
.fx-emoji:hover{
  border-color: rgba(24,119,242,.22);
  background: rgba(24,119,242,.10);
}



/* ===== Light Mode overrides for legacy pages ===== */

/* Dashboard status pills (Pending/Failed) */
html[data-theme="light"] .status-pill.bot-ok{
  background: rgba(22,163,74,0.10);
  border-color: rgba(22,163,74,0.35);
  color: #166534;
}
html[data-theme="light"] .status-pill.bot-warn{
  background: rgba(234,88,12,0.10);
  border-color: rgba(234,88,12,0.35);
  color: #9a3412;
}
html[data-theme="light"] .status-pill.bot-off{
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.35);
  color: #991b1b;
}

/* Inbox / Legacy dark components (بيخلي اللايت مود يبقى مقروء في كل الصفحات) */
html[data-theme="light"] .inbox-label{ color: var(--fx-muted2); }
html[data-theme="light"] .input-primary{
  background: var(--fx-surface) !important;
  color: var(--fx-text) !important;
  border-color: var(--fx-border2) !important;
}
html[data-theme="light"] .btn-secondary{
  background: var(--fx-surface2) !important;
  color: var(--fx-text) !important;
  border-color: var(--fx-border2) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .inbox-view-toggle{
  background: var(--fx-surface) !important;
  border-color: var(--fx-border2) !important;
  box-shadow: var(--fx-shadow2) !important;
}
html[data-theme="light"] .inbox-view-btn{ color: var(--fx-muted) !important; }

html[data-theme="light"] .bubble{
  border-color: var(--fx-border) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .bubble-user{
  background: rgba(24,119,242,0.10) !important;
  color: var(--fx-text) !important;
  border-color: rgba(24,119,242,0.22) !important;
}
html[data-theme="light"] .bubble-bot{
  background: rgba(22,163,74,0.10) !important;
  color: var(--fx-text) !important;
  border-color: rgba(22,163,74,0.22) !important;
}
html[data-theme="light"] .msgr-btn{
  background: var(--fx-surface2) !important;
  color: var(--fx-text) !important;
  border-color: var(--fx-border2) !important;
}
html[data-theme="light"] .msgr-subnote{ color: var(--fx-muted2) !important; }

/* Gallery page (مكتبة الصور) */
html[data-theme="light"] .upload-form{
  background: var(--fx-surface) !important;
  border-color: var(--fx-border2) !important;
  box-shadow: var(--fx-shadow2) !important;
}
html[data-theme="light"] .upload-input{
  background: var(--fx-surface2) !important;
  color: var(--fx-text) !important;
  border-color: var(--fx-border2) !important;
}
html[data-theme="light"] .upload-help{ color: var(--fx-muted2) !important; }
html[data-theme="light"] .file-chip{
  background: var(--fx-surface2) !important;
  border-color: var(--fx-border2) !important;
  color: var(--fx-text) !important;
}
html[data-theme="light"] .progress-wrap{
  background: var(--fx-surface2) !important;
  border-color: var(--fx-border2) !important;
}
html[data-theme="light"] .progress-top{ color: var(--fx-text) !important; }

html[data-theme="light"] .alert-success{
  border-color: rgba(22,163,74,0.35) !important;
  background: rgba(22,163,74,0.10) !important;
  color: #166534 !important;
}
html[data-theme="light"] .alert-error{
  border-color: rgba(239,68,68,0.35) !important;
  background: rgba(239,68,68,0.10) !important;
  color: #991b1b !important;
}

html[data-theme="light"] .generated-code-card{
  background: var(--fx-surface) !important;
  border-color: rgba(24,119,242,.22) !important;
  color: var(--fx-text) !important;
  box-shadow: var(--fx-shadow2) !important;
}
html[data-theme="light"] .generated-code-sub{ color: var(--fx-muted2) !important; }
html[data-theme="light"] .code-chip{
  background: var(--fx-surface2) !important;
  border-color: var(--fx-border2) !important;
  color: rgba(15,23,42,.85) !important;
}

html[data-theme="light"] .tool-callout{
  background: var(--fx-surface) !important;
  border-color: var(--fx-border2) !important;
  box-shadow: var(--fx-shadow2) !important;
}
html[data-theme="light"] .tool-callout .desc{ color: var(--fx-muted) !important; }

html[data-theme="light"] .gallery-item{
  background: var(--fx-surface) !important;
  border-color: var(--fx-border2) !important;
  box-shadow: var(--fx-shadow2) !important;
}
html[data-theme="light"] .gallery-thumb{ background: var(--fx-surface2) !important; }
html[data-theme="light"] .gallery-info{ color: var(--fx-muted2) !important; }

html[data-theme="light"] .delete-btn{
  border-color: rgba(239,68,68,0.35) !important;
  background: rgba(239,68,68,0.10) !important;
  color: #991b1b !important;
}
html[data-theme="light"] .load-more-btn{
  background: var(--fx-surface2) !important;
  border-color: var(--fx-border2) !important;
  color: var(--fx-text) !important;
}


/* ===== Extra Light Mode coverage for SaaS pages + bot_builder ===== */

/*
  بعض الصفحات القديمة فيها CSS داخل الصفحة (inline <style>) معمول للدارك بس.
  هنا بنضيف Safety Net للـ Light Mode عشان الكروت/الأزرار/الجدوال تبقى مقروءة.
*/

html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .profile-hero,
html[data-theme="light"] .details-grid,
html[data-theme="light"] .kpi,
html[data-theme="light"] .tile,
html[data-theme="light"] .total-box,
html[data-theme="light"] .chat-wrap,
html[data-theme="light"] .tab,
html[data-theme="light"] .imgcard{
  background: var(--fx-surface) !important;
  border-color: var(--fx-border2) !important;
  color: var(--fx-text) !important;
  box-shadow: var(--fx-shadow2) !important;
}

html[data-theme="light"] .kpi,
html[data-theme="light"] .tile,
html[data-theme="light"] .tab{
  background: var(--fx-surface2) !important;
}

html[data-theme="light"] .btn{
  background: var(--fx-surface2) !important;
  border-color: var(--fx-border2) !important;
  color: var(--fx-text) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .btn:hover{
  background: rgba(24,119,242,.10) !important;
  border-color: rgba(24,119,242,.22) !important;
}
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn-primary{
  background: linear-gradient(135deg, var(--fx-primary), var(--fx-primary2)) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(24,119,242,.18) !important;
}
html[data-theme="light"] .btn.secondary,
html[data-theme="light"] .btn-secondary{
  background: var(--fx-surface2) !important;
  color: var(--fx-text) !important;
  border-color: var(--fx-border2) !important;
}
html[data-theme="light"] .btn.gray{
  background: var(--fx-surface2) !important;
  color: var(--fx-text) !important;
  border-color: var(--fx-border2) !important;
}
html[data-theme="light"] .btn.danger,
html[data-theme="light"] .btn-danger{
  background: rgba(239,68,68,0.10) !important;
  border-color: rgba(239,68,68,0.35) !important;
  color: #991b1b !important;
}
html[data-theme="light"] .btn.warning,
html[data-theme="light"] .btn-warning{
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.35) !important;
  color: #854d0e !important;
}

html[data-theme="light"] .badge,
html[data-theme="light"] .pill{
  background: var(--fx-surface2) !important;
  border-color: var(--fx-border2) !important;
  color: var(--fx-text) !important;
}
html[data-theme="light"] .badge.owner{
  background: rgba(245,158,11,0.14) !important;
  border-color: rgba(245,158,11,0.35) !important;
  color: #854d0e !important;
}
html[data-theme="light"] .badge.admin{
  background: rgba(24,119,242,0.12) !important;
  border-color: rgba(24,119,242,0.28) !important;
  color: #0b2c66 !important;
}
html[data-theme="light"] .badge.agent{
  background: rgba(22,163,74,0.10) !important;
  border-color: rgba(22,163,74,0.28) !important;
  color: #166534 !important;
}
html[data-theme="light"] .badge.invited{
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.28) !important;
  color: #854d0e !important;
}
html[data-theme="light"] .badge-fb{
  background: rgba(24,119,242,0.10) !important;
  border-color: rgba(24,119,242,0.22) !important;
  color: #0b2c66 !important;
}
html[data-theme="light"] .badge-ig{
  background: rgba(225,48,108,0.10) !important;
  border-color: rgba(225,48,108,0.22) !important;
  color: #7a1138 !important;
}
html[data-theme="light"] .badge-default{
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.30) !important;
  color: #854d0e !important;
}
html[data-theme="light"] .badge-muted{
  background: var(--fx-surface2) !important;
  border-color: var(--fx-border2) !important;
  color: var(--fx-muted) !important;
}

html[data-theme="light"] .notice,
html[data-theme="light"] .msg,
html[data-theme="light"] .alert{
  background: var(--fx-surface) !important;
  border-color: var(--fx-border2) !important;
  color: var(--fx-text) !important;
  box-shadow: var(--fx-shadow2) !important;
}
html[data-theme="light"] .notice.success,
html[data-theme="light"] .msg.ok,
html[data-theme="light"] .alert.success,
html[data-theme="light"] .alert-success{
  background: rgba(22,163,74,0.10) !important;
  border-color: rgba(22,163,74,0.35) !important;
  color: #166534 !important;
}
html[data-theme="light"] .notice.error,
html[data-theme="light"] .msg.err,
html[data-theme="light"] .alert.error,
html[data-theme="light"] .alert-error{
  background: rgba(239,68,68,0.10) !important;
  border-color: rgba(239,68,68,0.35) !important;
  color: #991b1b !important;
}
html[data-theme="light"] .notice.warning,
html[data-theme="light"] .alert.warning,
html[data-theme="light"] .alert-warning{
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.35) !important;
  color: #854d0e !important;
}

html[data-theme="light"] .small,
html[data-theme="light"] .note,
html[data-theme="light"] .hint,
html[data-theme="light"] .subtitle,
html[data-theme="light"] .panel-tag{
  color: var(--fx-muted) !important;
}

html[data-theme="light"] .table th,
html[data-theme="light"] .table td,
html[data-theme="light"] table th,
html[data-theme="light"] table td{
  border-bottom-color: var(--fx-border) !important;
}
html[data-theme="light"] .table th,
html[data-theme="light"] table th{
  color: var(--fx-muted) !important;
}
html[data-theme="light"] .table thead,
html[data-theme="light"] table thead{
  background: var(--fx-surface2) !important;
}
html[data-theme="light"] table{
  color: var(--fx-text) !important;
}

/* عناصر جوه كروت قديمة معمولة بـ inline style بخلفية غامقة */
html[data-theme="light"] .card [style*="background:rgba(0,0,0"],
html[data-theme="light"] .card [style*="background: rgba(0,0,0"],
html[data-theme="light"] .card [style*="background:rgba(15,23,42"],
html[data-theme="light"] .card [style*="background: rgba(15,23,42"]{
  background: var(--fx-surface2) !important;
  color: var(--fx-text) !important;
  border-color: var(--fx-border2) !important;
}

/* ===== bot_builder (bb-*) light mode ===== */
html[data-theme="light"] .bb-meta,
html[data-theme="light"] .bb-card{
  background: var(--fx-surface) !important;
  border-color: var(--fx-border2) !important;
  color: var(--fx-text) !important;
  box-shadow: var(--fx-shadow2) !important;
}
html[data-theme="light"] .bb-sub,
html[data-theme="light"] .bb-text-muted,
html[data-theme="light"] .bb-breadcrumb span{
  color: var(--fx-muted) !important;
}
html[data-theme="light"] .bb-breadcrumb a{
  color: rgba(24,119,242,.92) !important;
}
html[data-theme="light"] .bb-input,
html[data-theme="light"] .bb-select{
  background: var(--fx-surface2) !important;
  border-color: var(--fx-border2) !important;
  color: var(--fx-text) !important;
}
html[data-theme="light"] .bb-btn{
  background: var(--fx-surface2) !important;
  border-color: var(--fx-border2) !important;
  color: var(--fx-text) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .bb-btn-ghost{
  background: transparent !important;
}
html[data-theme="light"] .bb-table thead{
  background: var(--fx-surface2) !important;
}
html[data-theme="light"] .bb-table th{
  color: var(--fx-muted) !important;
  border-bottom-color: var(--fx-border) !important;
}
html[data-theme="light"] .bb-table td{
  color: var(--fx-text) !important;
  border-bottom-color: var(--fx-border) !important;
}
html[data-theme="light"] .bb-table tbody tr:nth-child(even){
  background: rgba(15,23,42,.02) !important;
}
html[data-theme="light"] .bb-table tbody tr:nth-child(odd){
  background: rgba(15,23,42,.00) !important;
}
html[data-theme="light"] .bb-table tbody tr:hover{
  background: rgba(24,119,242,.08) !important;
}
html[data-theme="light"] .bb-badge{
  background: var(--fx-surface2) !important;
  border-color: var(--fx-border2) !important;
  color: var(--fx-text) !important;
}

/* ===== bot_builder comments page light mode ===== */
html[data-theme="light"] .comments-page{
  --ca-bg: rgba(255,255,255,.82) !important;
  --ca-bg2: rgba(255,255,255,.92) !important;
  --ca-border: rgba(15,23,42,.12) !important;
  --ca-border-strong: rgba(15,23,42,.18) !important;
  --ca-text: #0f172a !important;
  --ca-muted: rgba(71,85,105,.92) !important;
}
html[data-theme="light"] .comments-page::before,
html[data-theme="light"] .comments-page::after{
  opacity: .16 !important;
}
html[data-theme="light"] .comments-page .ca-header{
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.18), transparent 55%),
    radial-gradient(circle at bottom right, rgba(52,211,153,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86)) !important;
  border-color: var(--fx-border2) !important;
  box-shadow: 0 18px 50px rgba(15,23,42,.12) !important;
}
html[data-theme="light"] .comments-page .ca-card{
  background:
    radial-gradient(circle at top, rgba(255,255,255,.98), rgba(255,255,255,.86)) !important;
  border-color: var(--fx-border2) !important;
  box-shadow: var(--fx-shadow2) !important;
}
html[data-theme="light"] .comments-page .border.rounded.p-3{
  background: var(--fx-surface2) !important;
  border-color: var(--fx-border2) !important;
}
html[data-theme="light"] .comments-page .form-control,
html[data-theme="light"] .comments-page .form-select,
html[data-theme="light"] .comments-page textarea{
  background-color: var(--fx-surface2) !important;
  border-color: var(--fx-border2) !important;
  color: var(--fx-text) !important;
}
html[data-theme="light"] .comments-page .form-control:focus,
html[data-theme="light"] .comments-page .form-select:focus,
html[data-theme="light"] .comments-page textarea:focus{
  background-color: var(--fx-surface) !important;
  box-shadow: var(--fx-ring) !important;
  border-color: rgba(24,119,242,.30) !important;
}
html[data-theme="light"] .comments-page #box_imgs label{
  background: var(--fx-surface) !important;
  border-color: var(--fx-border2) !important;
  box-shadow: var(--fx-shadow2) !important;
}
html[data-theme="light"] .comments-page #box_imgs label:hover{
  box-shadow: 0 14px 30px rgba(15,23,42,.14) !important;
}
html[data-theme="light"] .comments-page .btn-outline-secondary{
  border-color: var(--fx-border2) !important;
  color: var(--fx-text) !important;
}
html[data-theme="light"] .comments-page .alert-info{
  background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(45,212,191,.06)) !important;
  border-color: rgba(59,130,246,.28) !important;
  color: var(--fx-text) !important;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition: none !important; animation: none !important; }
}


/* ======================================================
   PREMIUM UI ENHANCEMENTS — Flexify SaaS v2
   Presentation layer only. No logic changes.
   ====================================================== */

/* ── Page Heading ─────────────────────────────────────── */
.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 20px 22px;
  background: var(--fx-surface);
  border: 1px solid var(--fx-border2);
  border-radius: var(--fx-radius-xl);
  box-shadow: var(--fx-shadow2);
  position: relative;
  overflow: hidden;
}
.page-heading::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--fx-primary), var(--fx-primary2));
  border-radius: 0 4px 4px 0;
}
.page-title-block { min-width: 0; }
.page-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.page-subtitle {
  color: var(--fx-muted);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 900px) {
  .page-heading { padding: 16px 16px; }
  .page-title { font-size: 18px; }
}

/* ── Grid layouts ─────────────────────────────────────── */
.fx-grid {
  display: grid;
  gap: 14px;
}
.fx-grid.cols-1 { grid-template-columns: 1fr; }
.fx-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.fx-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.fx-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .fx-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .fx-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .fx-grid.cols-4,
  .fx-grid.cols-3,
  .fx-grid.cols-2 { grid-template-columns: 1fr; }
}

/* ── Panel ────────────────────────────────────────────── */
.panel {
  background: var(--fx-surface);
  border: 1px solid var(--fx-border2);
  border-radius: var(--fx-radius-xl);
  box-shadow: var(--fx-shadow2);
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.panel:hover {
  box-shadow: var(--fx-shadow);
  border-color: rgba(24,119,242,.18);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--fx-border);
  background: var(--fx-surface2);
}
.panel-title {
  font-weight: 1000;
  font-size: 14px;
  letter-spacing: -.01em;
  margin: 0;
}
.panel-subtitle {
  color: var(--fx-muted);
  font-weight: 800;
  font-size: 12px;
  margin: 3px 0 0;
}
.panel-tag {
  color: var(--fx-muted2);
  font-weight: 800;
  font-size: 11px;
  margin: 3px 0 0;
}
.panel-body {
  padding: 16px 18px;
}

/* ── Form Grid ────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
@media (max-width: 520px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ── Label & Help ─────────────────────────────────────── */
.label {
  display: block;
  margin: 0 0 6px;
  color: var(--fx-muted);
  font-weight: 950;
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.help {
  margin: 6px 0 0;
  color: var(--fx-muted2);
  font-weight: 800;
  font-size: 11px;
  line-height: 1.5;
}

/* ── KPI Stat Tiles ───────────────────────────────────── */
.fx-kpi {
  background: var(--fx-surface);
  border: 1px solid var(--fx-border2);
  border-radius: var(--fx-radius-xl);
  box-shadow: var(--fx-shadow2);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}
.fx-kpi::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--fx-primary), var(--fx-primary2));
  opacity: .65;
}
.fx-kpi:hover {
  box-shadow: var(--fx-shadow);
  transform: translateY(-2px);
  border-color: rgba(24,119,242,.2);
}
.fx-kpi .v,
.fx-kpi .n {
  font-weight: 1000;
  font-size: 26px;
  letter-spacing: -.03em;
  line-height: 1;
  background: linear-gradient(135deg, var(--fx-text), var(--fx-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fx-kpi .l {
  color: var(--fx-muted);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.4;
}

/* ── Toggle Switches ──────────────────────────────────── */
.fx-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--fx-border);
  background: var(--fx-surface2);
  transition: background .14s, border-color .14s;
}
.fx-toggle:has(.fx-switch:checked) {
  background: rgba(24,119,242,.06);
  border-color: rgba(24,119,242,.22);
}
.fx-toggle .t {
  font-weight: 950;
  font-size: 13px;
}
.fx-toggle .d {
  color: var(--fx-muted);
  font-weight: 800;
  font-size: 11px;
  margin-top: 2px;
}

.fx-switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid var(--fx-border2);
  background: var(--fx-surface2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .18s ease, border-color .18s ease;
}
.fx-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fx-muted);
  transition: inset-inline-end .2s ease, background .18s ease;
}
.fx-switch:checked {
  background: linear-gradient(135deg, var(--fx-primary), var(--fx-primary2));
  border-color: var(--fx-primary);
}
.fx-switch:checked::after {
  inset-inline-end: calc(100% - 18px);
  background: #fff;
}
.fx-switch:focus-visible {
  outline: 2px solid var(--fx-primary);
  outline-offset: 2px;
}

/* ── Empty State ──────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
  color: var(--fx-muted);
}
.empty-title {
  font-weight: 1000;
  font-size: 16px;
  color: var(--fx-text);
}
.empty-text {
  font-weight: 800;
  font-size: 13px;
  color: var(--fx-muted);
  max-width: 340px;
  line-height: 1.6;
  margin: 0;
}

/* ── Notice enhancements ──────────────────────────────── */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface2);
  box-shadow: var(--fx-shadow2);
  font-weight: 950;
  font-size: 13px;
  margin: 12px 0;
  animation: fx-notice-in .22s ease;
}
@keyframes fx-notice-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notice.success {
  border-color: rgba(22,163,74,.35);
  background: rgba(22,163,74,.08);
  color: #14532d;
}
html[data-theme="dark"] .notice.success { color: #86efac; }
.notice.error {
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.08);
  color: #7f1d1d;
}
html[data-theme="dark"] .notice.error { color: #fca5a5; }
.notice.warning {
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.08);
  color: #78350f;
}
html[data-theme="dark"] .notice.warning { color: #fde68a; }

/* ── Buttons: Danger variant ──────────────────────────── */
.btn.danger,
.btn-danger {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.28);
  color: #b91c1c;
}
.btn.danger:hover,
.btn-danger:hover {
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.45);
  box-shadow: 0 8px 20px rgba(239,68,68,.14);
}
html[data-theme="dark"] .btn.danger,
html[data-theme="dark"] .btn-danger {
  color: #fca5a5;
}

/* ── Input / Select / Textarea upgrades ───────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea,
.input,
.select,
.textarea,
.form-control,
.form-select {
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input[type="text"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover,
.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--fx-border2);
}

/* ── Sparkline chart in analytics ────────────────────── */
.fx-spark {
  border-radius: 12px;
  overflow: visible;
}

/* ── Analytics KPI cards with colored top borders ──────── */
.fx-kpi-conversations::after { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.fx-kpi-inbound::after       { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.fx-kpi-orders::after        { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.fx-kpi-revenue::after       { background: linear-gradient(90deg, #10b981, #34d399); }

/* ── List items in analytics ──────────────────────────── */
.fx-list { display: grid; gap: 8px; }
.fx-list .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--fx-border);
  border-radius: 14px;
  background: var(--fx-surface2);
  transition: background .12s, border-color .12s, transform .12s;
}
.fx-list .item:hover {
  background: rgba(24,119,242,.08);
  border-color: rgba(24,119,242,.18);
  transform: translateX(-2px);
}
html[data-theme="light"] .fx-list .item { background: rgba(255,255,255,.7); }
.fx-list .item .name { font-weight: 900; font-size: 13px; }
.fx-list .item .meta { color: var(--fx-muted); font-size: 12px; font-weight: 800; }

/* ── Panel hover animation ────────────────────────────── */
@keyframes fx-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Badge refinements ────────────────────────────────── */
.fx-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-width: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--fx-border2);
  background: var(--fx-surface2);
  color: var(--fx-text);
  font-weight: 1000;
  font-size: 11px;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}

/* ── Intent card header accent ────────────────────────── */
.intent-card-head {
  background: var(--fx-surface2) !important;
  border-bottom: 1px solid var(--fx-border2);
}
html[data-theme="dark"] .intent-card-head {
  background: rgba(15,20,40,.55) !important;
}

/* ── Snippet panel (FAQ rows) ─────────────────────────── */
#kbList .panel {
  border: 1px solid var(--fx-border);
  transition: border-color .16s, box-shadow .16s;
}
#kbList .panel:hover {
  border-color: rgba(24,119,242,.22);
  box-shadow: 0 8px 24px rgba(24,119,242,.08);
}

/* ── AI Mode selector box ─────────────────────────────── */
.ai-mode-box {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--fx-border2);
  border-radius: 16px;
  background: var(--fx-surface2);
}
html[data-theme="light"] .ai-mode-box {
  background: rgba(255,255,255,.6);
  border-color: var(--fx-border2);
}

/* ── Separator refinement ─────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--fx-border);
  margin: 20px 0;
}

/* ── Scrollbar refinements ────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--fx-border2);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(24,119,242,.35); }

/* ── Inline code ──────────────────────────────────────── */
code {
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--fx-surface2);
  border: 1px solid var(--fx-border);
  font-size: 11px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--fx-primary);
}
html[data-theme="light"] code { color: #1d4ed8; }

/* ── Reduced-motion safe ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fx-kpi { transition: none; }
  .fx-kpi:hover { transform: none; }
  .panel:hover { box-shadow: var(--fx-shadow2); }
  .fx-list .item:hover { transform: none; }
  @keyframes fx-notice-in { from { opacity: 1; transform: none; } }
}