:root {
        --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
        --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
        --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
        --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
        --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;
        --bg: #071526;
        --sidebar: #06111f;
        --surface: #0d2138;
        --surface-raised: #12304f;
        --surface-soft: rgba(255, 255, 255, 0.055);
        --surface-dynamic: #18395d;
        --border: rgba(255, 255, 255, 0.10);
        --border-strong: rgba(255, 255, 255, 0.18);
        --text: #f7fbff;
        --muted: #bfd0e2;
        --faint: #82a0bd;
        --gold: #ffffff;
        --gold-dark: #d9e8f7;
        --teal: #56b6d6;
        --teal-dark: #2d7da4;
        --error: #e07a7a;
        --success: #6fcf97;
        --radius-card: 18px;
        --radius-composer: 28px;
        --radius-pill: 999px;
        --shadow-raised: 0 18px 48px rgba(0, 0, 0, 0.22);
        --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.18);
        --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
        --font-body: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
        --sidebar-width: 318px;
        --topbar-height: 72px;
        --composer-height: 122px;
      }

      html[data-theme="light"] {
        --bg: #f7fbff;
        --surface: #ffffff;
        --sidebar: #edf5fc;
        --text: #0b1f35;
        --muted: #54708c;
        --faint: #7d94aa;
        --border: rgba(7, 21, 38, 0.11);
        --border-strong: rgba(7, 21, 38, 0.20);
        --surface-raised: #e3eef8;
        --surface-soft: rgba(7, 21, 38, 0.035);
        --surface-dynamic: #d7e7f5;
        --shadow-raised: 0 18px 48px rgba(0, 0, 0, 0.10);
        --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.07);
      }

      html[data-amoled]:not([data-theme="light"]) {
        --bg: #000000;
        --sidebar: #000000;
        --surface: #0a0a0a;
        --surface-raised: #161616;
        --surface-soft: rgba(255, 255, 255, 0.04);
        --surface-dynamic: #1f1f1f;
        --border: rgba(255, 255, 255, 0.09);
        --border-strong: rgba(255, 255, 255, 0.16);
        --shadow-raised: 0 18px 48px rgba(0, 0, 0, 0.6);
        --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.5);
      }

      html[data-amoled]:not([data-theme="light"]) body {
        background: var(--bg);
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
      }

      body {
        width: 100%;
        max-width: 100%;
        min-height: 100dvh;
        overflow: hidden;
        overflow-x: hidden;
        overscroll-behavior-x: none;
        background:
          radial-gradient(circle at 76% -8%, rgba(86, 182, 214, 0.20), transparent 34rem),
          radial-gradient(circle at 7% 89%, rgba(255, 255, 255, 0.08), transparent 32rem),
          var(--bg);
        color: var(--text);
        font-family: var(--font-body);
        font-size: var(--text-base);
        line-height: 1.65;
      }

      html[data-theme="light"] body {
        background:
          radial-gradient(circle at 76% -8%, rgba(86, 182, 214, 0.18), transparent 34rem),
          radial-gradient(circle at 7% 89%, rgba(7, 21, 38, 0.08), transparent 32rem),
          var(--bg);
      }

      img,
      svg {
        display: block;
        max-width: 100%;
      }

      button,
      input,
      textarea,
      select {
        max-width: 100%;
        min-width: 0;
        font: inherit;
        color: inherit;
      }

      button,
      input,
      textarea,
      [role="button"] {
        transition:
          background var(--transition),
          border-color var(--transition),
          color var(--transition),
          box-shadow var(--transition),
          opacity var(--transition),
          transform var(--transition);
      }

      button {
        min-height: 44px;
        border: 0;
        cursor: pointer;
      }

      button:disabled {
        cursor: not-allowed;
        opacity: 0.55;
      }

      :focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 3px;
        border-radius: 12px;
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      .app-shell {
        position: relative;
        min-height: 100dvh;
      }

      .screen {
        min-height: 100dvh;
      }

      .hidden {
        display: none !important;
      }

      .skip-link {
        position: fixed;
        top: var(--space-4);
        right: var(--space-4);
        z-index: 1000;
        transform: translateY(-160%);
        border-radius: var(--radius-pill);
        background: var(--gold);
        color: #171717;
        padding: var(--space-2) var(--space-4);
        font-weight: 800;
        text-decoration: none;
      }

      .skip-link:focus {
        transform: translateY(0);
      }