/* =====================================================
   LEX AI OS -- تصميم جديد بالكامل، مطابق للمرجع البصري
   لوحة الألوان: كحلي غامق (خلفية) + ذهبي (هوية LEX) + أزرق (تفاعل/حالة)
   ===================================================== */

:root, [data-theme="dark"] {
  --bg-deep: #070b14;
  --bg-panel: #0d1424;
  --bg-panel-2: #101a2e;
  --border-soft: rgba(120, 160, 220, 0.14);
  --text-main: #e7edf7;
  --text-dim: #8c9bb5;
  --green: #33c37f;
  --amber: #e0a840;
  /* Appearance-panel fix (2026-08-29): #sidebar used to hardcode this exact
     gradient in hex, bypassing every theme variable -- Light mode changed
     every other surface but the sidebar stayed permanently dark navy.
     Values here are byte-identical to the old hardcoded dark gradient, so
     dark mode's look is unchanged; see the light block below for the new,
     actually-themed light variant. */
  --sidebar-g1: #0a0f1c;
  --sidebar-g2: #070b14;
  /* Same fix, same reasoning, for #holocore-column (the LEX orb/hub panel --
     the single most visually prominent surface on Home): it also hardcoded
     its base color in hex, so it stayed dark under Light mode too. */
  --holocore-bg: #060b16;
}

[data-theme="light"] {
  --bg-deep: #f4f6fb;
  --bg-panel: #ffffff;
  --bg-panel-2: #eef1f8;
  --border-soft: rgba(30, 50, 90, 0.14);
  --text-main: #16202e;
  --text-dim: #5a6b85;
  --green: #1e9e5e;
  --amber: #b4780f;
  --sidebar-g1: #ffffff;
  --sidebar-g2: #eef1f8;
  --holocore-bg: #eef1f8;
}

/* ألوان اللهجة (Accent) -- منفصلة عن الثيم الأساسي عمداً، عشان
   تقدر تبدّل اللون بدون ما تأثر على فاتح/غامق. --gold و--blue
   الأصليين ضلّوا كاسم متغيرات (توافقية مع كل الـ CSS الموجود)،
   بس قيمتهم هلق تتبدّل حسب data-accent. */
:root, [data-accent="gold-blue"] {
  --gold: #d9a94e;
  --gold-soft: rgba(217, 169, 78, 0.16);
  --blue: #2596ff;
  --blue-soft: rgba(37, 150, 255, 0.14);
}

[data-accent="purple-pink"] {
  --gold: #b98cf2;
  --gold-soft: rgba(185, 140, 242, 0.16);
  --blue: #ec4899;
  --blue-soft: rgba(236, 72, 153, 0.14);
}

[data-accent="green-teal"] {
  --gold: #34d399;
  --gold-soft: rgba(52, 211, 153, 0.16);
  --blue: #06b6d4;
  --blue-soft: rgba(6, 182, 212, 0.14);
}

[data-accent="red-orange"] {
  --gold: #fb923c;
  --gold-soft: rgba(251, 146, 60, 0.16);
  --blue: #ef4444;
  --blue-soft: rgba(239, 68, 68, 0.14);
}

* { box-sizing: border-box; }

/* Global anti-overflow guard: nothing in the canonical LEX AI OS may make the
   document wider than the actual viewport. min-width:0 defaults let flex/grid
   children shrink below their content size instead of forcing a horizontal
   scrollbar. Media/embeds never exceed their column. */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  background: var(--bg-deep);
  color: var(--text-main);
  font-family: var(--font-family, "Segoe UI", "Tahoma", sans-serif);
  overflow: hidden;
  overflow-x: hidden;
  overscroll-behavior: none;
  transition: background 0.25s ease, color 0.25s ease;
}

img, svg, video, canvas, iframe { max-width: 100%; }

/* Fluid app shell. Height uses dynamic viewport units so mobile browser-chrome
   collapse / keyboard show-hide never clip the layout; 100vh is the fallback for
   engines without dvh. Width is 100% (never 100vw, which includes the scrollbar
   and itself causes horizontal overflow). --sidebar-w is a fluid clamp so the
   rail scales with the viewport instead of being a hard desktop 250px. */
:root {
  --sidebar-w: clamp(208px, 19vw, 258px);
  --gap: clamp(10px, 1.4vw, 16px);
  --pad-x: clamp(12px, 2.2vw, 22px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

#app {
  display: flex;
  height: 100vh;      /* fallback */
  height: 100dvh;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* ===================== الشريط الجانبي ===================== */

#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--sidebar-g1), var(--sidebar-g2));
  border-left: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  padding: 18px 0;
  flex-shrink: 0;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 18px 18px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 10px;
}

/* P9 B2 -- LEX Core identity fix: the source asset (assets/lex_logo_source.png,
   pixel-identical to lex_icon.ico/lex-192/lex-512, see tests/test_brand_assets.py)
   is a golden eagle centred in a ring on a square canvas. Every in-DOM use of it
   was missing the circular clip that makes it read as "the Core" (a circle),
   so it rendered as a square badge -- CSS-only regression, not a wrong asset:
   the eagle/ring content sits well clear of the square's edge midpoints
   (measured: closest bright pixel ~627px from centre in a 1254px canvas, so an
   inscribed-circle crop only trims corner background, never the eagle/ring/wings).
   object-fit: cover keeps the crop centred at any size. */
.logo-icon { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }

.logo-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--gold);
  letter-spacing: 0.5px;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0 10px;
  flex: 1;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 0.15s, color 0.15s;
}

.nav-item:hover {
  background: var(--blue-soft);
  color: var(--text-main);
}

.nav-item.active {
  background: linear-gradient(135deg, #e8c377, var(--gold) 60%, #b8860b);
  color: #1a1206;
  font-weight: 700;
  border-right: none;
  border-radius: 10px 0 0 10px;
  box-shadow: 0 2px 10px rgba(217, 169, 78, 0.35);
  position: relative;
}

.nav-item.active::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 8px;
  background: var(--bg-deep);
  border-radius: 0 8px 8px 0;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-soft);
  margin-top: 10px;
}

.avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.user-info { flex: 1; }

.user-name { font-size: 12.5px; font-weight: 600; }

.user-plan { font-size: 10.5px; color: var(--gold); }

.user-status {
  font-size: 10px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
}

.dot-online {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); display: inline-block;
}

.user-menu { color: var(--text-dim); cursor: pointer; }

/* ===================== المنطقة الرئيسية ===================== */

#main {
  flex: 1 1 0;
  min-width: 0;       /* allow the main column to shrink below content width */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 100%;
}

#topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 20px);
  padding: 12px var(--pad-x);
  padding-inline-end: max(var(--pad-x), var(--safe-r));
  padding-top: max(12px, var(--safe-t));
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
  flex-shrink: 0;
}
#topbar > * { min-width: 0; }
.topbar-brand { flex-shrink: 0; }
.topbar-greeting { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-title { font-weight: 700; color: var(--gold); font-size: 15px; }
.brand-version { font-size: 10px; color: var(--text-dim); }
.brand-ready {
  font-size: 9px;
  background: var(--green);
  color: #04170d;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
}

.topbar-greeting {
  flex: 1;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-main);
}

.topbar-icons { display: flex; gap: 14px; align-items: center; }

.icon-btn {
  position: relative;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-dim);
}

.icon-btn .badge {
  position: absolute;
  top: -6px; left: -8px;
  background: var(--blue);
  color: white;
  font-size: 8px;
  border-radius: 8px;
  padding: 1px 4px;
}

/* ===================== شبكة المحتوى ===================== */

#content-grid {
  flex: 1 1 0;
  min-height: 0;      /* let the grid scroll internally instead of overflowing */
  display: grid;
  /* Fluid proportional columns. Every track starts at minmax(0,...) so a column
     can shrink to nothing rather than force the document wider than the frame;
     the centre (chat) stays ~2.2x the side rails on wide screens. The compact
     breakpoint below collapses this to a single stacked column. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr);
  justify-content: center;
  gap: var(--gap);
  padding: var(--gap) var(--pad-x);
  padding-inline-end: max(var(--pad-x), var(--safe-r));
  padding-inline-start: max(var(--pad-x), var(--safe-l));
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px;
}

.panel-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 10px;
}

.quick-list { list-style: none; margin: 0; padding: 0; }
.quick-list li {
  font-size: 12px;
  padding: 8px 6px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.quick-list li:last-child { border-bottom: none; }
.quick-list li:hover { color: var(--text-main); }

.status-list .status-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 6px 0;
  color: var(--text-dim);
}
.status-list .status-value { color: var(--green); font-weight: 600; }

/* ===== العمود الأوسط ===== */

.col-center { align-items: center; text-align: center; }

.center-status-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.status-chip {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 11.5px;
  color: var(--text-dim);
}

.status-chip-ok { color: var(--green); border-color: rgba(51,195,127,0.3); }

.hub-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px 0 24px 0;
  position: relative;
}

.hub-wave {
  width: 130px;
  height: 60px;
  flex-shrink: 0;
}

.hub-label, .hub-sub {
  width: 100%;
  text-align: center;
}

.hub-ring {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1.5px solid var(--blue);
  box-shadow:
    0 0 30px rgba(37,150,255,0.4),
    0 0 60px rgba(37,150,255,0.15),
    inset 0 0 30px rgba(37,150,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(217,169,78,0.06), transparent 65%);
  animation: hub-pulse 3.5s ease-in-out infinite;
  position: relative;
}

.hub-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(37,150,255,0.25);
}

@keyframes hub-pulse {
  0%, 100% { box-shadow: 0 0 40px rgba(37,150,255,0.3), inset 0 0 40px rgba(37,150,255,0.08); }
  50% { box-shadow: 0 0 60px rgba(37,150,255,0.5), inset 0 0 50px rgba(37,150,255,0.15); }
}

.hub-logo {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 0 18px rgba(217,169,78,0.55));
}

.hub-label {
  margin-top: 14px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--gold);
}

.hub-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

/* FINAL PRODUCT UI CORRECTION -- the ONE canonical microphone control now
   lives directly under LEX Core (.hub-wrapper), not buried inside the
   Smart Conversation composer. #mic-button's own styling (shape, mute/
   listening states) is unchanged below -- this wrapper only centers it
   and gives it breathing room in its new, more prominent position. */
.hub-mic-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.hub-mic-wrap #mic-button {
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* VOICE UX CORRECTION (2026-09-04) -- real, always-visible (not hover-only)
   text state, so a sighted user understands muted/unmuted immediately
   without hovering for a tooltip and without relying on color alone. Text
   content + color are both set live in bridge.js's setMicMuted(). */
#mic-state-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  min-height: 14px;
}
#mic-state-label.mic-state-muted { color: #e05252; }
#mic-state-label.mic-state-active { color: var(--gold); }

.quick-actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-dim);
  font-size: 10.5px;
  cursor: pointer;
  min-width: 78px;
}

.quick-action-btn:hover { border-color: var(--blue); color: var(--text-main); }

.advanced-tools { width: 100%; text-align: right; }

.tool-title { font-size: 13px; font-weight: 700; color: var(--gold); margin-bottom: 10px; }

.tool-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.tool-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
}

.tool-card:hover { border-color: var(--gold); }

.tool-card-title { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.tool-card-desc { font-size: 10px; color: var(--text-dim); }

/* ===== العمود الأيمن ===== */

.panel-link-btn {
  width: 100%;
  margin-top: 10px;
  background: var(--blue-soft);
  color: var(--blue);
  border: 1px solid rgba(37,150,255,0.3);
  border-radius: 8px;
  padding: 8px;
  font-size: 11.5px;
  cursor: pointer;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.shortcut-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px;
  font-size: 10px;
  color: var(--text-dim);
  cursor: pointer;
}

.shortcut-btn:hover { border-color: var(--gold); color: var(--text-main); }

/* ===================== لوحات التفاصيل (نصية) ===================== */

.panel-body {
  display: none;
  flex: 1;
  padding: 16px 24px;
  overflow-y: auto;
}

.panel-body.active { display: flex; flex-direction: column; }

#conversation-log {
  flex: 1;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
}

/* =====================================================
   P14 -- HOLOCORE spatial split view. Pure presentation: this
   file has zero knowledge of the Visual Task Model's actual
   content (that lives entirely in brain/visual_task/*, rendered
   client-side by holocore.js from the same /visual-task/state
   contract every other client already uses).
   ===================================================== */

#chat-holocore-split {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 14px;
}

#chat-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

#holocore-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 260px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: radial-gradient(circle at 50% 35%, rgba(37,150,255,0.06), transparent 70%), var(--holocore-bg);
  overflow: hidden;
}

#holocore-column[hidden] { display: none; }

#holocore-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.holocore-cam-controls { display: flex; gap: 6px; }
.holocore-cam-controls button {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  color: var(--text-main);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.holocore-cam-controls button:hover { border-color: var(--blue); color: var(--blue); }

#holocore-stage {
  position: relative;
  flex: 1;
  min-height: 0;
}

#holocore-3d, #holocore-2d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* P15 -- above the AR camera feed layer below */
}

#holocore-3d canvas, #holocore-2d { display: block; }

/* =====================================================
   P15 -- Section 5 camera + HoloCore composition. The camera feed is a
   plain <video> BEHIND the exact same Three.js canvas HOLOCORE already
   renders (renderer alpha:true, unchanged since P14) -- one renderer, one
   scene, never a second instance. Hidden unless AR is actually engaged.
   ===================================================== */
#ar-camera-feed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: #000;
}
#ar-camera-feed[hidden] { display: none; }

#holocore-ar-badge, #holocore-gesture-badge {
  position: absolute;
  top: 8px;
  font-size: 11.5px;
  color: var(--text-main);
  background: rgba(6,11,22,0.8);
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  z-index: 2;
}
#holocore-ar-badge { right: 8px; }
#holocore-gesture-badge { left: 8px; }
#holocore-ar-badge[hidden], #holocore-gesture-badge[hidden] { display: none; }

#holocore-ar-permission-notice {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--text-main);
  background: rgba(6,11,22,0.9);
  font-size: 13px;
}
#holocore-ar-permission-notice[hidden] { display: none; }
#holocore-ar-permission-notice button {
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--blue);
  background: transparent;
  color: var(--blue);
  cursor: pointer;
}

#holocore-empty-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--text-dim);
  font-size: 13px;
  pointer-events: none;
}

/* Node/edge labels drawn as small HTML overlays positioned by holocore.js
   from the 3D projection each frame -- crisp text at any zoom, no texture
   re-generation cost per frame. */
.holocore-node-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 11.5px;
  color: var(--text-main);
  background: rgba(6, 11, 22, 0.72);
  padding: 2px 7px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.08);
}
.holocore-node-label.focused { color: var(--gold); border-color: var(--gold); }

#holocore-processing-badge {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  font-size: 11.5px;
  color: var(--text-dim);
  background: rgba(6,11,22,0.8);
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
}
#holocore-processing-badge[hidden] { display: none; }

/* Mobile/narrow: HOLOCORE is desktop-first (Section 15) -- collapse to a
   clear status line instead of squeezing a 3D canvas into a phone chat
   column. Chat itself is never removed. */
@media (max-width: 860px) {
  #chat-holocore-split { flex-direction: column; }
  #holocore-column {
    flex: none;
    min-height: 0;
  }
  #holocore-column.mobile-collapsed:not(.ar-active) #holocore-stage { display: none; }
  #holocore-column.mobile-collapsed:not(.ar-active) #holocore-status-bar::after {
    content: "العرض المجسّم الكامل متاح على الحاسوب -- هالجهاز بيعرض النموذج البصري كبطاقات نصية. جرّب وضع AR للكاميرا بدل هيك.";
    display: block;
    font-size: 11px;
    margin-top: 4px;
  }
  /* P15 Section 4/17 -- MOBILE AR foundation: when the user explicitly
     engages AR (never automatic -- Section 3), the desktop-first 3D
     column that's normally collapsed on mobile becomes a full-screen
     camera-overlay instead of the "use a computer" notice. This is the
     ONE mobile-specific behavior change in this phase -- ordinary
     (non-AR) HOLOCORE on mobile is completely unchanged from P14. */
  #holocore-column.ar-active {
    position: fixed;
    inset: 0;
    z-index: 500;
    border-radius: 0;
    min-height: 100vh;
  }
}

.memory-item, .timeline-item, .plugin-item, .project-item {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  font-size: 12px;
}

/* ===================== شريط الإدخال السفلي ===================== */

/* PHASE 1 STABILIZATION -- "chat toolbar location": the composer/options
   row belongs ONLY to the Smart Conversation screen, so it is hidden by
   default (correct from first paint, no FOUC) and shown only while
   bridge.js's goToPanel() adds .chat-composer-visible (target === "chat"). */
#bottom-input-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-top: 1px solid var(--border-soft);
}
#bottom-input-bar.chat-composer-visible { display: flex; }

#mic-button {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--blue);
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 16px;
  cursor: pointer;
  position: relative;
}
/* VOICE UX CORRECTION (2026-09-04) -- REAL, live-reproduced defect: the mic
   button had THREE class-based visual states (.mic-input-muted here,
   .mic-listening and .listening further down this file) all targeting the
   same #mic-button, all present at once during a real muted-while-listening
   session. .listening's background/color used !important -- which ALWAYS
   wins over this rule and over .mic-listening regardless of source order --
   so the muted (red) look could never actually render: a user had zero
   real visual way to tell muted from unmuted, exactly the reported defect.
   Fixed with :not(.mic-input-muted) guards on the two "active" rules below
   (so they structurally never apply while muted, instead of relying on a
   cascade/!important fight) and made this rule the single source of truth
   for the muted look -- explicit !important here too so no FUTURE rule can
   quietly reintroduce the same bug. Icon swap (mic vs mic-with-slash,
   toggled in bridge.js via .mic-icon-unmuted/.mic-icon-muted) means the
   state is never conveyed by color alone, per the explicit requirement. */
#mic-button.mic-input-muted {
  background: rgba(224, 82, 82, 0.16) !important;
  border-color: #e05252 !important;
  color: #e05252 !important;
  box-shadow: 0 0 0 3px rgba(224, 82, 82, 0.25) !important;
  animation: none !important;
}
#mic-button .mic-icon-muted { display: none; }
#mic-button.mic-input-muted .mic-icon-unmuted { display: none; }
#mic-button.mic-input-muted .mic-icon-muted { display: block; }

/* P5 (LEX Maps) -- matches #mic-button's shape/sizing exactly, same row.
   Acceptance-audit finding: this button had no base style at all (rendered
   as a tiny unstyled default <button>) and was missing from the P3 mobile
   touch-target pass below -- fixed here, same pattern as its sibling. */
#share-location-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  color: var(--text-main);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
#share-location-btn:disabled { opacity: 0.5; cursor: default; }

/* UNIVERSAL BUTTON/DEVICE/FUNCTIONALITY CLOSURE (2026-08-30) -- the
   composer "+" trigger and its popover. Same 40x40 circular shape as its
   siblings (#mic-button/#share-location-btn/#vision-toggle-btn above), and
   the exact same absolute-popover positioning/open-class pattern as
   .lang-menu (see "قائمة اللغة المنسدلة" above) -- deliberately a
   SEPARATE class (not literally .lang-menu) because its children are the
   existing 40x40 icon buttons laid out in a row, not a vertical list of
   .lang-menu-item text rows; the interaction pattern (open/close via one
   authoritative "open" class, outside-click-closes, Escape-closes) is
   identical, not reinvented. */
.plus-menu-wrap { position: relative; }

#composer-plus-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  color: var(--text-main);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
#composer-plus-btn[aria-expanded="true"] { background: var(--gold-soft); color: var(--gold); border-color: var(--gold); }

.plus-menu-popover {
  display: none;
  position: absolute;
  bottom: 130%;
  inset-inline-start: 0;
  flex-direction: row;
  gap: 8px;
  padding: 8px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  z-index: 50;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.plus-menu-popover.open { display: flex; }

/* P16.6-1 -- vision (camera) toggle: same 40x40 circular shape/sizing as
   its siblings above, same active-state treatment #mic-button.listening
   already uses (gold highlight), so a NEW icon doesn't need a NEW visual
   language. */
#vision-toggle-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  color: var(--text-main);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
#vision-toggle-btn.active { background: var(--gold-soft) !important; color: var(--gold) !important; box-shadow: 0 0 0 3px var(--gold-soft); border-color: var(--gold); }

/* P16.7 Section 14 -- attachment control reachable from the fixed mobile
   bottom bar. Same 40x40 circular shape/sizing as its siblings above. */
#attach-image-btn-mobile {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  color: var(--text-main);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Compact camera preview + capture control -- Section 11 (P16.5-4 ticket
   precedent, same spirit): never a huge panel, mobile-safe by construction
   (percentage width, capped height, no fixed pixel width that could
   overflow a narrow viewport). */
#vision-camera-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 20px;
  border-top: 1px solid var(--border-soft);
}
#vision-camera-panel[hidden] { display: none; }
#vision-camera-preview {
  width: 120px;
  max-width: 35vw;
  height: 90px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: #000;
  object-fit: cover;
  flex-shrink: 0;
}
#vision-capture-btn {
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid var(--gold);
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#vision-capture-btn:hover { background: var(--gold); color: #1a1408; }

/* P16.6-4 -- periodic visual-awareness toggle. Same compact-pill language
   as #vision-capture-btn but a distinct (blue) accent so ON/OFF is
   distinguishable from the capture action at a glance, and flex-wrap on
   the parent panel above keeps this from ever forcing horizontal overflow
   on narrow (320px) viewports -- it simply wraps to its own line. */
#vision-awareness-btn {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#vision-awareness-btn.active {
  background: var(--blue-soft, var(--gold-soft));
  color: var(--blue, var(--gold));
  border-color: var(--blue, var(--gold));
}
#vision-awareness-status {
  font-size: 12px;
  color: var(--text-dim);
}
#vision-awareness-status[hidden] { display: none; }

/* P16.6-5 -- same subtle small-text treatment, no animation (Section 9). */
#vision-gesture-badge {
  font-size: 12px;
  color: var(--text-dim);
}
#vision-gesture-badge[hidden] { display: none; }

/* MASTER REMEDIATION Phase 1 -- conversation-delete button. Neutral by
   default; a distinct red/warning treatment ONLY while armed (mid
   two-click-confirm), so the destructive intent is visually obvious
   right when it matters and never before. */
#delete-conversation-btn {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#delete-conversation-btn.confirm-armed {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
}

#main-text-input {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 10px 16px;
  color: var(--text-main);
  font-size: 13px;
  outline: none;
}

#main-text-input:focus { border-color: var(--blue); }

#main-send-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--blue);
  color: white;
  font-size: 16px;
  cursor: pointer;
}

#bottom-options-row {
  display: none;
  gap: 10px;
  padding: 0 20px 14px 20px;
  flex-wrap: wrap;
}
#bottom-options-row.chat-composer-visible { display: flex; }

.option-chip {
  font-size: 10.5px;
  color: var(--text-dim);
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 5px 12px;
}

/* ===================== عناصر عامة مستوردة من التصميم القديم ===================== */

#text-input, #files-path-input {
  background: rgba(37, 150, 255, 0.08);
  border: 1px solid #2596ff55;
  color: #cfeeff;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  border-radius: 4px;
  outline: none;
  margin-top: 6px;
}

#chat-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

#chat-input-row #text-input { flex: 1; margin-top: 0; }

#attach-image-btn, .plugin-toggle-btn {
  background: rgba(37, 150, 255, 0.1);
  border: 1px solid #2596ff55;
  color: #cfeeff;
  border-radius: 4px;
  cursor: pointer;
}

#attach-image-btn { width: 34px; height: 34px; min-width: 34px; font-size: 15px; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 4px; }

/* ===================== المخطط الدائري (الإحصائيات) ===================== */

.stats-donut-wrapper {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 4px auto 14px auto;
}

.stats-donut { width: 100%; height: 100%; }

#donut-progress { transition: stroke-dashoffset 0.8s ease; }

.stats-donut-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 74px;
}

.stats-donut-label span:first-child {
  font-size: 20px;
  font-weight: 800;
  color: var(--blue);
}

.donut-sub {
  font-size: 8.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ===================== أيقونات الأدوات المتقدمة (SVG) ===================== */

.tool-card-icon {
  width: 100%;
  height: 60px;
  margin-bottom: 8px;
}

/* ===================== زر الرجوع ===================== */

.panel-back-btn {
  align-self: flex-start;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 12px;
}

.panel-back-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ===================== قائمة اللغة المنسدلة ===================== */

.lang-switcher { position: relative; cursor: pointer; }

.lang-menu {
  display: none;
  position: absolute;
  bottom: 130%;
  right: 0;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  min-width: 120px;
  z-index: 50;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  /* P16.5-5 Section 11 -- the translate menu grew a device section (can be
     long: input list + output list); cap it so it never runs off-screen on
     a short/narrow viewport instead of being cut off or overflowing. */
  max-width: min(260px, calc(100vw - 24px));
  max-height: min(60vh, 380px);
  overflow-y: auto;
  overflow-x: hidden;
}

.lang-menu.open { display: block; }

.lang-menu-item {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-dim);
  overflow-wrap: break-word;
  word-break: break-word;
}

.lang-menu-item:hover { background: var(--blue-soft); color: var(--text-main); }
.lang-menu-item.selected { color: var(--gold); font-weight: 700; }

/* P16.5-5 -- device rows specifically: a real touch target (Section 11),
   without changing the shared .lang-menu-item style every other chip
   (language/speed) already relies on. */
.device-item { min-height: 40px; display: flex; align-items: center; }
.translate-menu-note {
  padding: 8px 14px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* ===================== شريط أدوات المحادثة ===================== */

.chat-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.chat-tool-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11.5px;
  cursor: pointer;
}

.chat-tool-btn:hover { border-color: var(--blue); color: var(--text-main); }

.chat-history-panel {
  display: none;
  flex: 1;
  overflow-y: auto;
}

.chat-history-panel.open { display: block; }

/* ===================== معاينة البث الحي ===================== */

.screen-share-preview {
  display: none;
  position: relative;
  margin-bottom: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  overflow: hidden;
  max-height: 220px;
}

.screen-share-preview.active { display: block; }

.screen-share-preview img {
  width: 100%;
  display: block;
}

.live-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(0,0,0,0.6);
  color: #ff4d4d;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
}

/* ===================== المهام والمشاريع (تبويبات) ===================== */

.sub-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.sub-tab {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  cursor: pointer;
}

.sub-tab.active { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }

.sub-tab-content { display: none; }
.sub-tab-content.active { display: block; }

.inline-form {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.inline-form input, .inline-form select {
  flex: 1;
  min-width: 160px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
}

.inline-form button {
  background: var(--blue);
  border: none;
  color: white;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.goal-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-panel-2);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
}

.goal-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--gold));
}

.item-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.item-actions button {
  font-size: 10.5px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
}

.item-actions button:hover { border-color: var(--blue); color: var(--text-main); }

.mission-status-badge {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
}

.status-done { background: rgba(51,195,127,0.2); color: var(--green); }
.status-failed { background: rgba(255,77,77,0.2); color: #ff4d4d; }
.status-pending { background: rgba(224,168,64,0.2); color: var(--amber); }

.knowledge-hint {
  font-size: 12px;
  opacity: 0.75;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* ===================== المظهر والشكل ===================== */

.theme-mode-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.theme-mode-btn, .theme-preset-btn, .theme-font-btn {
  background: var(--bg-panel-2);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 12px;
  cursor: pointer;
}

.theme-mode-btn.active, .theme-preset-btn.active, .theme-font-btn.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

.theme-accent-btn {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 11px;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  cursor: pointer;
}

.theme-accent-btn.active {
  box-shadow: 0 0 0 2px white;
}

.brand-busy {
  background: var(--blue) !important;
  color: white !important;
}

/* ===================== البحث الحي، الإشعارات، الحساب ===================== */

.search-wrapper { position: relative; }

.global-search-input {
  display: none;
  position: absolute;
  top: 130%;
  left: 0;
  width: 260px;
  /* GOLD real-Chrome live audit (2026-09-01) -- REAL, live-reproduced defect:
     the generic responsive-safety rule below ("input, select, textarea,
     button { max-width: 100%; }", meant for in-flow chat-row controls) also
     applies here -- but this input is position:absolute with .search-wrapper
     (an icon-sized wrapper, ~26px) as its containing block, so `max-width:
     100%` resolved against THAT, crushing the real 260px popover down to an
     unusable ~26px box every time it opened. Live-reproduced exactly via
     getBoundingClientRect() on the real production page. */
  max-width: none;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-main);
  font-size: 12px;
  z-index: 60;
}

.global-search-input.open { display: block; }

.notif-panel {
  display: none;
  position: absolute;
  top: 54px;
  left: 200px;
  width: 300px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 10px;
  z-index: 70;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

.notif-panel.open { display: block; }

.account-wrapper { position: relative; }

/* ===================== ACCOUNT CENTER (2026-09-05 redesign) =====================
   Replaces the old cramped .account-menu dropdown (removed above) with a real,
   dedicated page (#panel-account, ui_web/index.html) styled as a premium,
   minimal, card-based dashboard -- built entirely from this file's OWN
   existing theme tokens (--bg-panel/--bg-panel-2/--border-soft/--text-main/
   --text-dim/--gold/--gold-soft), so it inherits every existing theme/accent
   preset and dark/light mode automatically, with zero new design language. */

.account-center-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}

.account-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  cursor: pointer;
  flex: 0 0 auto;
}
.account-back-btn:hover { border-color: var(--gold); color: var(--gold); }

.account-breadcrumb {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.account-breadcrumb-sep { color: var(--text-dim); font-weight: 400; }
.account-breadcrumb-current { color: var(--gold); }

.account-view { display: none; }
.account-view.active { display: block; }

.account-icon { width: 18px; height: 18px; display: block; }
.account-icon-chevron { width: 16px; height: 16px; color: var(--text-dim); margin-inline-start: auto; flex: 0 0 auto; }
.account-icon-back { width: 16px; height: 16px; }
[dir="rtl"] .account-icon-chevron,
[dir="rtl"] .account-icon-back { transform: scaleX(-1); }

.account-identity-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 22px;
}
.account-avatar-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex: 0 0 auto;
}
.account-avatar-circle .account-icon { width: 24px; height: 24px; }
.account-identity-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.account-identity-email {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  overflow-wrap: break-word;
  word-break: break-word;
}
.account-plan-chip {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
}

.account-group { margin-bottom: 22px; }
.account-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
  padding-inline-start: 2px;
}
.account-group-title-danger { color: #e0554f; }

.account-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .account-card-grid { grid-template-columns: 1fr; }
}

.account-nav-card,
.account-danger-card,
.account-signout-btn {
  font-family: inherit;
  text-align: start;
  appearance: none;
  -webkit-appearance: none;
}

.account-nav-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.account-nav-card:hover,
.account-nav-card:focus-visible { border-color: var(--gold); background: var(--gold-soft); outline: none; }
.account-nav-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex: 0 0 auto;
}
.account-nav-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-nav-card-text b { font-size: 13px; color: var(--text-main); font-weight: 700; }
.account-nav-card-text small { font-size: 11.5px; color: var(--text-dim); }

.account-group-danger { padding-top: 6px; border-top: 1px solid var(--border-soft); }
.account-danger-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: rgba(224, 85, 79, 0.08);
  border: 1px solid rgba(224, 85, 79, 0.35);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.account-danger-card:hover,
.account-danger-card:focus-visible { border-color: #e0554f; background: rgba(224, 85, 79, 0.14); outline: none; }
.account-danger-card .account-nav-card-icon { background: rgba(224, 85, 79, 0.14); color: #e0554f; }
.account-danger-card .account-nav-card-text b { color: #e0554f; }
.account-danger-card .account-icon-chevron { color: #e0554f; opacity: 0.7; }

.account-session-row { padding-top: 16px; border-top: 1px solid var(--border-soft); }
.account-signout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.account-signout-btn:hover { border-color: var(--text-dim); color: var(--text-main); }

.account-danger-zone-panel {
  background: rgba(224, 85, 79, 0.06);
  border: 1px solid rgba(224, 85, 79, 0.3);
  border-radius: 12px;
  padding: 16px;
}
.account-danger-zone-panel .panel-title { color: #e0554f; }

/* ===================== ACCOUNT CENTER (2026-09-05 redesign) =====================
   Replaces the old cramped .account-menu dropdown (removed above) with a real,
   dedicated page (#panel-account, ui_web/index.html) styled as a premium,
   minimal, card-based dashboard -- built entirely from this file's OWN
   existing theme tokens (--bg-panel/--bg-panel-2/--border-soft/--text-main/
   --text-dim/--gold/--gold-soft), so it inherits every existing theme/accent
   preset and dark/light mode automatically, with zero new design language. */

.account-center-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}

.account-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  cursor: pointer;
  flex: 0 0 auto;
}
.account-back-btn:hover { border-color: var(--gold); color: var(--gold); }

.account-breadcrumb {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.account-breadcrumb-sep { color: var(--text-dim); font-weight: 400; }
.account-breadcrumb-current { color: var(--gold); }

.account-view { display: none; }
.account-view.active { display: block; }

.account-icon { width: 18px; height: 18px; display: block; }
.account-icon-chevron { width: 16px; height: 16px; color: var(--text-dim); margin-inline-start: auto; flex: 0 0 auto; }
.account-icon-back { width: 16px; height: 16px; }
[dir="rtl"] .account-icon-chevron,
[dir="rtl"] .account-icon-back { transform: scaleX(-1); }

.account-identity-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 22px;
}
.account-avatar-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex: 0 0 auto;
}
.account-avatar-circle .account-icon { width: 24px; height: 24px; }
.account-identity-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.account-identity-email {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  overflow-wrap: break-word;
  word-break: break-word;
}
.account-plan-chip {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
}

.account-group { margin-bottom: 22px; }
.account-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
  padding-inline-start: 2px;
}
.account-group-title-danger { color: #e0554f; }

.account-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .account-card-grid { grid-template-columns: 1fr; }
}

.account-nav-card,
.account-danger-card,
.account-signout-btn {
  font-family: inherit;
  text-align: start;
  appearance: none;
  -webkit-appearance: none;
}

.account-nav-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.account-nav-card:hover,
.account-nav-card:focus-visible { border-color: var(--gold); background: var(--gold-soft); outline: none; }
.account-nav-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex: 0 0 auto;
}
.account-nav-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-nav-card-text b { font-size: 13px; color: var(--text-main); font-weight: 700; }
.account-nav-card-text small { font-size: 11.5px; color: var(--text-dim); }

.account-group-danger { padding-top: 6px; border-top: 1px solid var(--border-soft); }
.account-danger-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: rgba(224, 85, 79, 0.08);
  border: 1px solid rgba(224, 85, 79, 0.35);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.account-danger-card:hover,
.account-danger-card:focus-visible { border-color: #e0554f; background: rgba(224, 85, 79, 0.14); outline: none; }
.account-danger-card .account-nav-card-icon { background: rgba(224, 85, 79, 0.14); color: #e0554f; }
.account-danger-card .account-nav-card-text b { color: #e0554f; }
.account-danger-card .account-icon-chevron { color: #e0554f; opacity: 0.7; }

.account-session-row { padding-top: 16px; border-top: 1px solid var(--border-soft); }
.account-signout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.account-signout-btn:hover { border-color: var(--text-dim); color: var(--text-main); }

.account-danger-zone-panel {
  background: rgba(224, 85, 79, 0.06);
  border: 1px solid rgba(224, 85, 79, 0.3);
  border-radius: 12px;
  padding: 16px;
}
.account-danger-zone-panel .panel-title { color: #e0554f; }

.status-chip-error { color: #ff4d4d; border-color: rgba(255,77,77,0.3); }

/* =====================================================
   قلب النظام (LEX Core) -- تحوّل بصري حقيقي حسب الحالة.
   كل حالة لون وتوهج ونبض مختلف فعلياً، مو مجرد نص.
   ===================================================== */

.hub-ring {
  transition: border-color 0.5s ease, box-shadow 0.6s ease, background 0.6s ease;
}

/* الاستماع -- أخضر، نبض أسرع وأخف (متيقّظ) */
.hub-ring.hub-listening {
  border-color: #33c37f;
  box-shadow:
    0 0 34px rgba(51,195,127,0.5),
    0 0 65px rgba(51,195,127,0.2),
    inset 0 0 30px rgba(51,195,127,0.1);
  background: radial-gradient(circle, rgba(51,195,127,0.08), transparent 65%);
  animation: hub-pulse-fast 1.6s ease-in-out infinite;
}

/* التفكير -- بنفسجي، نبض بطيء وعميق (معالجة) */
.hub-ring.hub-thinking {
  border-color: #a78bfa;
  box-shadow:
    0 0 34px rgba(167,139,250,0.5),
    0 0 65px rgba(167,139,250,0.2),
    inset 0 0 30px rgba(167,139,250,0.12);
  background: radial-gradient(circle, rgba(167,139,250,0.09), transparent 65%);
  animation: hub-pulse-slow 3s ease-in-out infinite;
}

/* الكلام -- ذهبي (هوية صوت LEX)، نبض متوسط متناغم */
.hub-ring.hub-speaking {
  border-color: #d9a94e;
  box-shadow:
    0 0 38px rgba(217,169,78,0.55),
    0 0 70px rgba(217,169,78,0.22),
    inset 0 0 32px rgba(217,169,78,0.14);
  background: radial-gradient(circle, rgba(217,169,78,0.1), transparent 65%);
  animation: hub-pulse-fast 1.2s ease-in-out infinite;
}

/* التنفيذ/البحث -- برتقالي، نبض حيوي (عمل نشط) */
.hub-ring.hub-executing {
  border-color: #fb923c;
  box-shadow:
    0 0 36px rgba(251,146,60,0.5),
    0 0 68px rgba(251,146,60,0.2),
    inset 0 0 30px rgba(251,146,60,0.12);
  background: radial-gradient(circle, rgba(251,146,60,0.09), transparent 65%);
  animation: hub-pulse-fast 1.4s ease-in-out infinite;
}

/* النوم -- خافت جداً، صفر نبض تقريباً (ساكن) */
.hub-ring.hub-sleeping {
  border-color: #4a5875;
  box-shadow: 0 0 15px rgba(74,88,117,0.3), inset 0 0 15px rgba(74,88,117,0.08);
  background: radial-gradient(circle, rgba(74,88,117,0.05), transparent 65%);
  animation: none;
  opacity: 0.55;
}

/* خطأ -- أحمر، نبض حاد وسريع (تنبيه) */
.hub-ring.hub-error {
  border-color: #ef4444;
  box-shadow:
    0 0 40px rgba(239,68,68,0.6),
    0 0 75px rgba(239,68,68,0.25),
    inset 0 0 32px rgba(239,68,68,0.15);
  background: radial-gradient(circle, rgba(239,68,68,0.1), transparent 65%);
  animation: hub-pulse-fast 0.7s ease-in-out infinite;
}

/* Master Continuation Protocol Phase 6 (2026-08-23) -- canonical session
   engine states this hub previously had no visual for at all (falling
   through to the plain default ring, indistinguishable from IDLE/BOOTING
   even though something genuinely different was happening). */

/* إعادة الاتصال -- كهرماني، نبض متردّد (محاولة، مو خطأ نهائي بعد) */
.hub-ring.hub-reconnecting {
  border-color: #f59e0b;
  box-shadow:
    0 0 30px rgba(245,158,11,0.45),
    0 0 55px rgba(245,158,11,0.18),
    inset 0 0 26px rgba(245,158,11,0.1);
  background: radial-gradient(circle, rgba(245,158,11,0.08), transparent 65%);
  animation: hub-pulse-slow 1.8s ease-in-out infinite;
}

/* استعادة الحالة بعد إعادة الاتصال -- أزرق، نبض هادئ (يلحق بالسياق) */
.hub-ring.hub-recovering {
  border-color: #60a5fa;
  box-shadow:
    0 0 30px rgba(96,165,250,0.4),
    0 0 55px rgba(96,165,250,0.16),
    inset 0 0 26px rgba(96,165,250,0.1);
  background: radial-gradient(circle, rgba(96,165,250,0.07), transparent 65%);
  animation: hub-pulse-slow 2.2s ease-in-out infinite;
}

/* الجلسة مقفولة (تسجيل خروج) -- خافت وساكن، شبيه بالنوم بس بدون توقّع رجوع */
.hub-ring.hub-closed {
  border-color: #4a5875;
  box-shadow: 0 0 12px rgba(74,88,117,0.22), inset 0 0 12px rgba(74,88,117,0.06);
  background: radial-gradient(circle, rgba(74,88,117,0.04), transparent 65%);
  animation: none;
  opacity: 0.4;
}

@keyframes hub-pulse-fast {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

@keyframes hub-pulse-slow {
  0%, 100% { filter: brightness(0.95); }
  50% { filter: brightness(1.25); }
}

/* P16.4-3-FE Section 12 -- reduced motion: every hub-ring state keeps its
   own color/border/glow (state is never communicated by animation or color
   ALONE -- the text label in #system-state carries it too) but the pulsing
   animation itself is removed, leaving a stable, non-distracting static
   ring. Scoped to .hub-ring only -- does not touch unrelated animations
   elsewhere in the app. */
@media (prefers-reduced-motion: reduce) {
  .hub-ring.hub-listening,
  .hub-ring.hub-thinking,
  .hub-ring.hub-speaking,
  .hub-ring.hub-executing,
  .hub-ring.hub-error,
  .hub-ring.hub-reconnecting,
  .hub-ring.hub-recovering {
    animation: none;
  }
}

.task-row { margin-bottom: 10px; }
.task-row:last-child { margin-bottom: 0; }

.status-value-error { color: #ff4d4d !important; font-weight: 600; }

#mic-button.mic-listening:not(.mic-input-muted) {
  background: var(--green);
  border-color: var(--green);
  color: white;
  box-shadow: 0 0 20px rgba(51,195,127,0.6);
  animation: hub-pulse-fast 1.2s ease-in-out infinite;
}

.focus-active { background: var(--gold-soft) !important; border-color: var(--gold) !important; color: var(--gold) !important; }

/* =====================================================
   أزرار تحكم النافذة المخصصة (نافذة frameless -- صفر شريط
   عنوان نظام تشغيل أصلي، لازم نبني كل شي يدوياً)
   ===================================================== */

.topbar-drag-region {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 54px;
  -webkit-app-region: drag;
  z-index: 1;
}

/* العناصر التفاعلية لازم تُستثنى من السحب صراحة، وإلا ما
   تقدر تدوس عليها -- كل عناصر topbar-icons وwindow-controls
   والعلامة التجارية فوق منطقة السحب بترتيب طبقات (z-index). */
.topbar-brand, .topbar-icons, .window-controls, .topbar-greeting {
  position: relative;
  z-index: 2;
  -webkit-app-region: no-drag;
}

.window-controls {
  display: flex;
  gap: 4px;
  margin-right: 8px;
}

.win-btn {
  width: 32px;
  height: 28px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.win-btn:hover { background: var(--bg-panel-2); color: var(--text-main); }

.win-btn-close:hover { background: #e81123; color: white; }

/* =====================================================
   كرة LEX السلكية ثلاثية الأبعاد -- عمق بصري حقيقي حول
   الشعار، مو دائرة مسطّحة. CSS خالص (صفر مكتبة رسوميات).
   ===================================================== */

.hub-sphere-3d {
  position: absolute;
  top: 50%; left: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  perspective: 600px;
  pointer-events: none;
}

.sphere-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(37, 150, 255, 0.35);
  transform-style: preserve-3d;
}

.sr-1 { animation: spin-y 9s linear infinite; }
.sr-2 { animation: spin-y 9s linear infinite reverse; transform: rotateX(60deg); }
.sr-3 { animation: spin-x 12s linear infinite; transform: rotateY(60deg); }
.sr-4 { animation: spin-x 12s linear infinite reverse; transform: rotateY(120deg); }

@keyframes spin-y {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

@keyframes spin-x {
  from { transform: rotateY(60deg) rotateX(0deg); }
  to { transform: rotateY(60deg) rotateX(360deg); }
}

/* لون الكرة السلكية بيتغيّر مع حالة قلب النظام -- نفس منطق
   hub-ring بالضبط، عشان العمق يحس بنفس "روح" الحالة. */
.hub-ring.hub-listening .sphere-ring { border-color: rgba(51,195,127,0.4); }
.hub-ring.hub-thinking .sphere-ring { border-color: rgba(167,139,250,0.4); }
.hub-ring.hub-speaking .sphere-ring { border-color: rgba(217,169,78,0.4); }
.hub-ring.hub-executing .sphere-ring { border-color: rgba(251,146,60,0.4); }
.hub-ring.hub-error .sphere-ring { border-color: rgba(239,68,68,0.45); }
.hub-ring.hub-sleeping .sphere-ring { border-color: rgba(74,88,117,0.2); animation-play-state: paused; }

/* ===================== أيقونات SVG الموحّدة (بدل الإيموجي) ===================== */

.nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  vertical-align: -3px;
  color: inherit;
}

.nav-item.active .nav-icon { color: var(--gold); }

.action-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: inherit;
}

.icon-btn .action-icon { width: 18px; height: 18px; }

.quick-action-btn .action-icon,
.shortcut-btn .action-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
}

.win-icon { width: 10px; height: 10px; }

.option-chip .action-icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

/* ============================================================
   LEX AI OS → Settings : integrated account/admin sections
   (Account · Subscription · Devices · Installation · Privacy).
   Uses the existing theme tokens so light/dark + accents all apply.
   ============================================================ */
.settings-web-body { display: flex; flex-direction: column; gap: 6px; }
.settings-kv {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 10px; border: 1px solid var(--border-soft);
  border-radius: 10px; background: var(--bg-panel-2);
}
.settings-kv > span { color: var(--text-dim); font-size: 13px; }
.settings-kv > b { color: var(--text-main); font-weight: 600; text-align: left; }
.settings-device {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px; margin-top: 6px;
  border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-panel-2);
}
.settings-device .knowledge-hint { margin: 2px 0 0; font-size: 12px; }
.chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px;
  color: var(--text-dim); background: var(--blue-soft);
  border: 1px solid var(--border-soft); vertical-align: middle;
}
.chip--ok { color: var(--green); background: rgba(51, 195, 127, 0.14); }
/* PAYMENT RECONCILIATION AUDIT (2026-08-22) -- flags an "unverified" subscription
   (active, not a comp grant, but with no real payment-provider evidence) in the
   Owner Control Center so it reads as distinct from a genuinely paid one. */
.chip--warn { color: var(--amber); background: rgba(224, 168, 64, 0.14); }

/* Focus Mode (وضع التركيز): a per-device presentation preference. Persisted in
   bridge.js; here it visibly de-emphasises secondary chrome so the active content
   stands out. Non-breaking — nothing is disabled, only softened. */
body.lex-focus #topbar-greeting { opacity: 0.45; transition: opacity .2s ease; }
body.lex-focus #bottom-options-row { opacity: 0.7; transition: opacity .2s ease; }
body.lex-focus #topbar .topbar-icons #notif-btn { opacity: 0.55; }
body.lex-focus #main { box-shadow: inset 0 0 0 1px var(--gold-soft); }

/* Browser voice input active state (Web Speech API) */
/* VOICE UX CORRECTION (2026-09-04) -- :not(.mic-input-muted) added so this
   never masks the muted look (see #mic-button.mic-input-muted's own
   comment for the full root cause). */
#mic-button.listening:not(.mic-input-muted) { background: var(--gold-soft) !important; color: var(--gold) !important; box-shadow: 0 0 0 3px var(--gold-soft); }

/* Settings self-diagnostic badge (build id + server-confirmed role) */
.settings-web-build { margin-top: 14px; padding: 8px 10px; border: 1px dashed var(--border-soft);
  border-radius: 8px; color: var(--text-dim); font-size: 12px; text-align: center; direction: rtl; }

/* Optional personal-provider toggle switch */
.lex-switch { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.lex-switch input { opacity: 0; width: 0; height: 0; }
.lex-switch-track { position: absolute; inset: 0; background: var(--bg-panel-2); border: 1px solid var(--border-soft); border-radius: 999px; transition: .2s; }
.lex-switch-track::before { content: ""; position: absolute; height: 16px; width: 16px; right: 2px; top: 2px; background: var(--text-dim); border-radius: 50%; transition: .2s; }
.lex-switch input:checked + .lex-switch-track { background: var(--gold-soft); border-color: var(--gold); }
.lex-switch input:checked + .lex-switch-track::before { right: auto; left: 2px; background: var(--gold); }

/* LEX ONE / provider generation-source caption under an assistant reply */
.entry-source { font-size: 11px; color: var(--text-dim); opacity: 0.75; margin: 2px 0 8px 0; }

/* P16.7 Section 4 -- real per-message timestamp, shown inline after every
   chat bubble (live conversation AND the history panel below). Small,
   dim, never competes visually with the message text; RTL-safe (inline
   span, no fixed left/right offset). */
.entry-time {
  font-size: 10.5px;
  color: var(--text-dim);
  opacity: 0.65;
  margin-inline-start: 8px;
  white-space: nowrap;
}
.entry-text { display: inline; white-space: pre-wrap; }

/* Day separator in the conversation-history panel ("اليوم" / "أمس" / a
   full date) -- centered, dim, distinct from any message row. */
.history-day-separator {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.7;
  margin: 12px 0 6px 0;
  text-transform: none;
}

/* P12.6 -- a system/session notice (e.g. "session expired, sign in again").
   Deliberately distinct from .entry-lex: this is never LEX "speaking". */
.entry-system { font-size: 12.5px; color: var(--text-dim); font-style: italic; opacity: 0.85; margin: 4px 0; }

/* P16.4-4 Section 7 -- the ONE live "stable partial region" while the
   continuous mic loop is listening: visually distinct (dimmer, italic) from
   a finalized entry-user line, updated in place (never a new element per
   partial), and removed the instant speech_final freezes it into a real
   entry -- never lingers as a stale "still listening" ghost. */
.entry-partial { font-size: 13px; color: var(--text-dim); font-style: italic; opacity: 0.7; margin: 4px 0; }

/* P16.5-4 -- live translation block: THREE distinct, clearly-labeled areas
   (said / translation / suggested reply), never merged into one bubble.
   Deliberately a compact bordered strip, not a heavy panel (Section 6 --
   no redesign, no huge translation panels) -- same minimal text-log
   aesthetic as .entry-lex/.entry-user, just with a thin accent border to
   set it apart as a distinct kind of entry. border-inline-start (a logical
   property) puts the accent on the correct side automatically in RTL,
   with zero separate [dir="rtl"] override needed. */
.entry-translation {
  margin: 6px 0 10px 0;
  padding: 8px 10px;
  border-inline-start: 3px solid var(--blue);
  border-radius: 4px;
  background: var(--bg-panel);
}
.translation-row { margin: 3px 0; }
.translation-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-inline-end: 6px;
}
.translation-said-text, .translation-text-body { color: var(--text-main); }
.translation-processing { color: var(--text-dim); font-style: italic; }
.translation-error-text { color: #ef4444; font-style: italic; }
.translation-reply-row {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--border-soft);
}
.translation-reply-row[hidden] { display: none; }
.translation-reply-text { color: var(--gold); }
/* Phase 9 -- the reply row is now a real, speakable control (tap to hear
   LEX say it aloud in the other person's language), not passive text. */
.translation-reply-row--speakable {
  cursor: pointer;
  border-radius: 6px;
  transition: background-color .15s ease;
}
.translation-reply-row--speakable:hover,
.translation-reply-row--speakable:focus-visible {
  background-color: var(--surface-hover, rgba(255, 255, 255, 0.06));
  outline: none;
}
.translation-reply-row--speakable::after {
  content: "🔊";
  margin-inline-start: 6px;
  opacity: .75;
}

/* Translate chip (bottom-options-row) + its dropdown -- reuses the EXACT
   same .lang-switcher/.lang-menu/.lang-menu-item pattern the language and
   speed chips already use, so no second dropdown widget style exists. */
#translate-chip.translate-active { border-color: var(--gold); color: var(--gold); }
.translate-menu-section {
  padding: 6px 14px 2px 14px;
  font-size: 9.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.8;
}
.translate-direction-btn {
  display: block;
  width: 100%;
  text-align: inherit;
  background: none;
  border: none;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  overflow-wrap: break-word;
  word-break: break-word;
  min-height: 36px;
}
.translate-direction-btn.active { color: var(--gold); font-weight: 700; }
.translate-direction-btn:hover { background: var(--blue-soft); color: var(--text-main); }

/* =====================================================================
   RESPONSIVE / VIEWPORT-ADAPTIVE ENGINE  (fluid, not device-tiered)
   ---------------------------------------------------------------------
   One canonical LEX AI OS that fits ANY viewport. The heavy lifting is
   fluid (clamp()/min()/max()/minmax()/fr/min-width:0/dvh above); the rules
   here handle the two things pure fluidity cannot express on their own:
   (1) a global break-anything-that-would-overflow safety net, and
   (2) a single structural "compact mode" threshold at which the fixed
   sidebar can no longer coexist with a usable main column, so it becomes
   an overlay drawer and the content grid stacks. Between breakpoints the
   layout resizes continuously; the breakpoint value is derived from layout
   math (rail + a usable main), not from any specific device.
   ===================================================================== */

/* --- Global wrap/no-overflow safety net (every module, every width) --- */
.panel, .col, .panel-body, .settings-web-body, .notif-panel,
.account-menu, .search-results-panel { min-width: 0; max-width: 100%; }
.panel { overflow-wrap: break-word; word-break: break-word; }
.entry, .chat-entry, .message, .msg, .bubble, .knowledge-hint,
.settings-kv, .settings-kv > b, .status-row, .quick-list li,
.entry-lex, .entry-user, .entry-partial, .entry-translation {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
pre, code, table { max-width: 100%; }
pre { overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
input, select, textarea, button { max-width: 100%; }

/* Chat input row: never let its controls push past the frame. */
#chat-input-row, .chat-input-row { flex-wrap: nowrap; min-width: 0; }
#chat-input-row > *, .chat-input-row > * { min-width: 0; }
#main-text-input, #text-input { min-width: 0; }

/* --- Mobile menu toggle (hamburger). Hidden until compact mode. --- */
#menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: var(--text-main);
  cursor: pointer;
  padding: 0;
}
#menu-toggle:active { background: var(--blue-soft); }
#menu-toggle svg { width: 20px; height: 20px; }

/* --- Drawer backdrop. Only participates in compact mode when open. --- */
#drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 16, 0.55);
  z-index: 150;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* =====================================================================
   COMPACT MODE — sidebar becomes an overlay drawer, content stacks.
   Threshold = the point where var(--sidebar-w) + a usable main column no
   longer fit. Everything inside stays fluid.
   ===================================================================== */
@media (max-width: 900px) {

  /* Touch targets -- mobile-only (desktop keeps its exact existing sizing;
     mouse pointers don't need this). Below Apple/Google's ~44px minimum
     recommendation: attach 34px, mic 40px, topbar icons unsized (icon-glyph
     only). Grows the invisible hit area via min-width/height + centering, so
     the visible icon/label stays exactly where it was -- no layout shift. */
  #attach-image-btn, #attach-image-btn-mobile { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #mic-button { min-width: 44px; min-height: 44px; }
  #share-location-btn { min-width: 44px; min-height: 44px; }
  /* COMMERCIAL HARDENING (Phase 22) -- these two sit in the exact same
     bottom bar as the three rules above and were missed in that pass;
     still fixed at 40x40, below the same 44px minimum their neighbors
     were bumped to. */
  #vision-toggle-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #main-send-btn { min-width: 44px; min-height: 44px; }
  .topbar-icons .icon-btn {
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  #menu-toggle { display: inline-flex; }

  /* Sidebar -> off-canvas overlay drawer, anchored to the inline-start edge
     (right in RTL, left in LTR) and translated off-screen until opened. */
  #sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(84vw, 320px);
    min-width: 0;
    z-index: 200;
    border: none;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.55);
    padding-top: max(18px, var(--safe-t));
    padding-bottom: max(18px, var(--safe-b));
    padding-inline-start: var(--safe-l);
    transition: transform 0.28s ease;
    will-change: transform;
  }
  [dir="rtl"] #sidebar { transform: translateX(100%); }
  [dir="ltr"] #sidebar,
  html:not([dir="rtl"]) #sidebar { transform: translateX(-100%); }
  #app.nav-open #sidebar { transform: translateX(0); }

  #app.nav-open #drawer-backdrop { display: block; opacity: 1; }

  /* Main reclaims the full viewport width whenever the drawer is closed. */
  #main { max-width: 100%; }

  /* Content grid stacks to a single fluid column; chat (centre) comes first. */
  #content-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
    padding-inline: max(12px, var(--safe-l)) max(12px, var(--safe-r));
  }
  .col-center { order: -1; align-items: stretch; text-align: start; }
  .col-center .center-status-row { justify-content: flex-start; }

  /* Topbar: drop desktop-shell chrome, let secondary controls reflow. */
  .window-controls, .topbar-drag-region { display: none !important; }
  .topbar-icons { gap: 10px; margin-inline-start: auto; }

  /* Popovers/menus must never exceed the frame. */
  .notif-panel, .search-results-panel {
    left: auto;
    inset-inline-end: max(10px, var(--safe-r));
    width: min(340px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
  .global-search-input { width: min(280px, calc(100vw - 32px)); }
  .account-menu { width: max-content; max-width: calc(100vw - 24px); }
}

/* Narrow phones: hide the centred greeting so brand + controls never collide,
   and tighten rhythm. Still fluid, just a secondary structural tuck. */
@media (max-width: 560px) {
  .topbar-greeting { display: none; }
  .brand-version { display: none; }
  #content-grid { gap: 10px; }
  /* Decorative AI orb: keep it circular but never wider than the frame. */
  .hub-ring { width: min(240px, 62vw); height: min(240px, 62vw); }
  .hub-sphere-3d { width: min(180px, 46vw); height: min(180px, 46vw); }
}

/* Short/landscape viewports: keep chrome compact so content keeps its height. */
@media (max-height: 480px) {
  #topbar { padding-top: max(6px, var(--safe-t)); padding-bottom: 6px; }
  .logo-area { padding-bottom: 10px; margin-bottom: 6px; }
}