/* ==========================================================================
   Replyeye design system — tokens + components
   Source of truth: brand/BRAND-DNA.md. Served at /assets/brand/replyeye.css
   and loaded by every surface (landing, /app/, /admin/) together with
   tailwind-theme.js. Components are prefixed `ry-`.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Sand (neutrals) */
  --ry-sand-25:#FDFCFA; --ry-sand-50:#F9F7F3; --ry-sand-100:#F2EFE9; --ry-sand-200:#E6E1D8;
  --ry-sand-300:#D2CBBF; --ry-sand-400:#A9A195; --ry-sand-500:#756E64; --ry-sand-600:#5A544C;
  --ry-sand-700:#423D37; --ry-sand-800:#2B2824; --ry-sand-900:#1B1916; --ry-ink:#100F0D;
  /* Lagoon (signal) */
  --ry-lagoon-50:#ECFBFA; --ry-lagoon-100:#CFF4F2; --ry-lagoon-200:#A3E8E6; --ry-lagoon-300:#67D5D4;
  --ry-lagoon-400:#2CBBBD; --ry-lagoon-500:#109FA3; --ry-lagoon-600:#0B8086; --ry-lagoon-700:#0E666C;
  --ry-lagoon-800:#115257; --ry-lagoon-900:#12444A;
  /* Semantic */
  --ry-success:#15703D; --ry-success-bg:#EDFAF1; --ry-success-border:#B7E4C7;
  --ry-warning:#A15C07; --ry-warning-bg:#FFF6E5; --ry-warning-border:#F5D9A8;
  --ry-danger:#B42318;  --ry-danger-bg:#FEF1F0;  --ry-danger-border:#F7C5C0;

  /* Roles (what components use) */
  --ry-bg: var(--ry-sand-50);
  --ry-surface: #FFFFFF;
  --ry-surface-muted: var(--ry-sand-100);
  --ry-surface-inverse: var(--ry-ink);
  --ry-text: var(--ry-sand-900);
  --ry-text-strong: var(--ry-ink);
  --ry-text-muted: var(--ry-sand-600);
  --ry-text-subtle: var(--ry-sand-500);
  --ry-text-inverse: var(--ry-sand-50);
  --ry-border: var(--ry-sand-200);
  --ry-border-strong: var(--ry-sand-300);
  --ry-accent: var(--ry-lagoon-600);
  --ry-accent-text: var(--ry-lagoon-700);
  --ry-signal: var(--ry-lagoon-400);
  --ry-focus: 0 0 0 3px var(--ry-lagoon-200);

  /* Type */
  --ry-font: "Geist", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --ry-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radius */
  --ry-r-xs:6px; --ry-r-sm:8px; --ry-r-md:10px; --ry-r-lg:14px; --ry-r-xl:20px; --ry-r-2xl:28px; --ry-r-full:999px;

  /* Elevation (warm-tinted) */
  --ry-shadow-1: 0 1px 2px rgba(27,25,22,.06);
  --ry-shadow-2: 0 1px 2px rgba(27,25,22,.04), 0 6px 16px -4px rgba(27,25,22,.08);
  --ry-shadow-3: 0 2px 4px rgba(27,25,22,.04), 0 16px 40px -12px rgba(27,25,22,.16);
  --ry-shadow-4: 0 4px 8px rgba(27,25,22,.04), 0 28px 64px -20px rgba(27,25,22,.22);

  /* Motion */
  --ry-ease: cubic-bezier(.2,.7,.2,1);
  --ry-fast: 120ms; --ry-base: 200ms; --ry-slow: 500ms;

  /* Layout */
  --ry-container: 1200px;
  --ry-gutter: 16px;
}
@media (min-width: 768px)  { :root { --ry-gutter: 20px; } }
@media (min-width: 1024px) { :root { --ry-gutter: 24px; } }

/* Dark token set — defined for the dashboard's future dark mode. Opt in with
   <html data-theme="dark">. Marketing stays light and uses .ry-inverse bands. */
[data-theme="dark"] {
  --ry-bg:#100F0D; --ry-surface:#1B1916; --ry-surface-muted:#2B2824; --ry-surface-inverse:#F9F7F3;
  --ry-text:#E6E1D8; --ry-text-strong:#F9F7F3; --ry-text-muted:#A9A195; --ry-text-subtle:#8C857A;
  --ry-text-inverse:#100F0D; --ry-border:#2E2A26; --ry-border-strong:#423D37;
  --ry-accent:#2CBBBD; --ry-accent-text:#67D5D4; --ry-focus: 0 0 0 3px rgba(44,187,189,.45);
}

/* ---------- 2. Base ---------- */
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  font-family: var(--ry-font);
  color: var(--ry-text);
  background: var(--ry-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" on, "cv11" on;
}
:lang(ar) body, body:lang(ar) { line-height: 1.7; }
::selection { background: var(--ry-lagoon-100); color: var(--ry-lagoon-900); }
:focus-visible { outline: none; box-shadow: var(--ry-focus); border-radius: var(--ry-r-sm); }
.tabular, .ry-num { font-variant-numeric: tabular-nums; }
.font-mono, code, kbd { font-family: var(--ry-font-mono); }

/* Bilingual visibility — driven by <html lang>, so dynamically rendered
   markup is correct without re-running a toggle. */
html[lang="ar"] .lang-en, html[lang="en"] .lang-ar { display: none !important; }
/* Arabic never gets tracking or uppercase: both break letter joining. */
:lang(ar) .ry-display, :lang(ar) .ry-h1, :lang(ar) .ry-h2, :lang(ar) .ry-h3,
:lang(ar) .ry-overline, :lang(ar) .tracking-tight, :lang(ar) .tracking-tighter,
:lang(ar) .tracking-wide, :lang(ar) .tracking-wider, :lang(ar) .tracking-widest { letter-spacing: 0 !important; text-transform: none !important; }

/* ---------- 3. Typography ---------- */
.ry-display { font-size: clamp(38px, 6vw, 64px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; color: var(--ry-text-strong); }
.ry-h1 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; color: var(--ry-text-strong); }
.ry-h2 { font-size: clamp(28px, 3.4vw, 36px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; color: var(--ry-text-strong); }
.ry-h3 { font-size: clamp(19px, 2vw, 22px); line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; color: var(--ry-text-strong); }
.ry-lead { font-size: clamp(17px, 1.6vw, 18px); line-height: 1.6; color: var(--ry-text-muted); }
.ry-body { font-size: 16px; line-height: 1.6; color: var(--ry-text-muted); }
.ry-small { font-size: 14px; line-height: 1.5; }
.ry-caption { font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--ry-text-subtle); }
.ry-overline { font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ry-text-subtle); }
:lang(ar) .ry-display { line-height: 1.25; }
:lang(ar) .ry-h1 { line-height: 1.3; }
:lang(ar) .ry-h2 { line-height: 1.35; }
:lang(ar) .ry-h3 { line-height: 1.5; }
:lang(ar) .ry-lead, :lang(ar) .ry-body { line-height: 1.8; }
:lang(ar) .ry-overline { font-size: 13px; }
.ry-measure { max-width: 68ch; }
:lang(ar) .ry-measure { max-width: 60ch; }

/* The "lid" — the logo's upper-eyelid curve used as a highlight underline. */
.ry-lid { position: relative; white-space: nowrap; }
.ry-lid svg { position: absolute; inset-inline: -2%; bottom: -0.16em; width: 104%; height: .32em; overflow: visible; pointer-events: none; }
.ry-lid path { fill: none; stroke: var(--ry-lagoon-400); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: ry-draw 900ms var(--ry-ease) 400ms forwards; }
@keyframes ry-draw { to { stroke-dashoffset: 0; } }

/* ---------- 4. Layout ---------- */
.ry-container { width: 100%; max-width: calc(var(--ry-container) + 2 * var(--ry-gutter)); margin-inline: auto; padding-inline: var(--ry-gutter); }
.ry-section { padding-block: 72px; }
@media (min-width: 1024px) { .ry-section { padding-block: 112px; } }
.ry-band { background: var(--ry-surface-muted); }
.ry-inverse { background: var(--ry-surface-inverse); color: var(--ry-text-inverse); }
.ry-inverse .ry-h1, .ry-inverse .ry-h2, .ry-inverse .ry-h3, .ry-inverse .ry-display { color: #fff; }
.ry-inverse .ry-lead, .ry-inverse .ry-body { color: var(--ry-sand-400); }

/* ---------- 5. Buttons ---------- */
.ry-btn {
  --_h: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--_h); padding-inline: 16px; border-radius: var(--ry-r-md);
  font: 500 14px/1 var(--ry-font); white-space: nowrap; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; user-select: none;
  transition: background-color var(--ry-fast) var(--ry-ease), border-color var(--ry-fast) var(--ry-ease),
              box-shadow var(--ry-base) var(--ry-ease), transform var(--ry-fast) var(--ry-ease), color var(--ry-fast);
}
.ry-btn:active { transform: translateY(1px); }
.ry-btn[disabled], .ry-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.ry-btn-sm { --_h: 32px; padding-inline: 12px; font-size: 13px; border-radius: var(--ry-r-sm); }
.ry-btn-lg { --_h: 48px; padding-inline: 22px; font-size: 15px; border-radius: 12px; }
.ry-btn-block { width: 100%; }
.ry-btn svg { width: 16px; height: 16px; flex: none; }
[dir="rtl"] .ry-btn .ry-flip { transform: scaleX(-1); }

.ry-btn-primary { background: var(--ry-ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(16,15,13,.2); }
.ry-btn-primary:hover { background: var(--ry-sand-800); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 18px -6px rgba(16,15,13,.45); }
.ry-btn-secondary { background: var(--ry-surface); color: var(--ry-text-strong); border-color: var(--ry-border-strong); box-shadow: var(--ry-shadow-1); }
.ry-btn-secondary:hover { background: var(--ry-sand-25); border-color: var(--ry-sand-400); }
.ry-btn-ghost { background: transparent; color: var(--ry-text-muted); }
.ry-btn-ghost:hover { background: var(--ry-surface-muted); color: var(--ry-text-strong); }
.ry-btn-accent { background: var(--ry-lagoon-600); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.ry-btn-accent:hover { background: var(--ry-lagoon-700); }
.ry-btn-danger { background: var(--ry-surface); color: var(--ry-danger); border-color: var(--ry-danger-border); }
.ry-btn-danger:hover { background: var(--ry-danger-bg); }
.ry-inverse .ry-btn-primary { background: #fff; color: var(--ry-ink); }
.ry-inverse .ry-btn-primary:hover { background: var(--ry-sand-100); }
.ry-inverse .ry-btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.22); box-shadow: none; }
.ry-inverse .ry-btn-secondary:hover { background: rgba(255,255,255,.06); }

/* ---------- 6. Forms ---------- */
.ry-label { display: block; font-size: 13px; font-weight: 500; color: var(--ry-text); margin-bottom: 6px; }
.ry-help { font-size: 12px; color: var(--ry-text-subtle); margin-top: 6px; }
.ry-input, .ry-select, .ry-textarea {
  width: 100%; height: 42px; padding-inline: 12px; border-radius: var(--ry-r-md);
  background: var(--ry-surface); color: var(--ry-text-strong); font: 400 14px/1.4 var(--ry-font);
  border: 1px solid var(--ry-border-strong); box-shadow: var(--ry-shadow-1);
  transition: border-color var(--ry-fast), box-shadow var(--ry-base);
}
.ry-textarea { height: auto; min-height: 96px; padding-block: 10px; resize: vertical; }
.ry-input::placeholder, .ry-textarea::placeholder { color: var(--ry-sand-400); }
.ry-input:hover, .ry-select:hover, .ry-textarea:hover { border-color: var(--ry-sand-400); }
.ry-input:focus, .ry-select:focus, .ry-textarea:focus { outline: none; border-color: var(--ry-lagoon-500); box-shadow: var(--ry-focus); }
.ry-input[aria-invalid="true"] { border-color: var(--ry-danger); box-shadow: 0 0 0 3px var(--ry-danger-bg); }
/* Restyle un-classed legacy inputs rendered by Tailwind pages, so every form
   in /app and /admin gets the brand focus state without rewriting markup. */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"],
input[type="search"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea {
  font-family: var(--ry-font);
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { outline: none; border-color: var(--ry-lagoon-500) !important; box-shadow: var(--ry-focus); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ry-ink); }

/* ---------- 7. Surfaces ---------- */
.ry-card { background: var(--ry-surface); border: 1px solid var(--ry-border); border-radius: var(--ry-r-lg); box-shadow: var(--ry-shadow-1); }
.ry-card-pad { padding: 24px; }
.ry-card-hover { transition: box-shadow var(--ry-base) var(--ry-ease), transform var(--ry-base) var(--ry-ease), border-color var(--ry-base); }
.ry-card-hover:hover { box-shadow: var(--ry-shadow-3); transform: translateY(-2px); border-color: var(--ry-border-strong); }
.ry-panel { background: var(--ry-surface-muted); border-radius: var(--ry-r-xl); }
/* The "frame": a soft outer tray holding a product composition. */
.ry-frame { background: linear-gradient(180deg, var(--ry-sand-100), var(--ry-sand-50)); border: 1px solid var(--ry-border); border-radius: var(--ry-r-2xl); padding: 10px; box-shadow: var(--ry-shadow-4); }
.ry-frame > .ry-frame-inner { background: var(--ry-surface); border: 1px solid var(--ry-border); border-radius: 20px; overflow: hidden; }
.ry-divider { height: 1px; background: var(--ry-border); border: 0; }
.ry-icon-tile { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--ry-surface); border: 1px solid var(--ry-border); color: var(--ry-text-strong); box-shadow: var(--ry-shadow-1); flex: none; }
.ry-icon-tile svg { width: 20px; height: 20px; }
.ry-icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- 8. Badges, chips, status ---------- */
.ry-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding-inline: 8px; border-radius: var(--ry-r-full); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; border: 1px solid var(--ry-border); background: var(--ry-surface); color: var(--ry-text-muted); }
.ry-badge-success { background: var(--ry-success-bg); color: var(--ry-success); border-color: var(--ry-success-border); }
.ry-badge-warning { background: var(--ry-warning-bg); color: var(--ry-warning); border-color: var(--ry-warning-border); }
.ry-badge-danger  { background: var(--ry-danger-bg);  color: var(--ry-danger);  border-color: var(--ry-danger-border); }
.ry-badge-info    { background: var(--ry-lagoon-50);  color: var(--ry-lagoon-800); border-color: var(--ry-lagoon-200); }
.ry-badge-ink     { background: var(--ry-ink); color: #fff; border-color: var(--ry-ink); }
.ry-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ry-live .ry-dot { background: var(--ry-lagoon-400); box-shadow: 0 0 0 3px rgba(44,187,189,.18); }
.ry-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding-inline: 12px; border-radius: var(--ry-r-full); background: var(--ry-surface); border: 1px solid var(--ry-border); font-size: 13px; font-weight: 500; color: var(--ry-text); box-shadow: var(--ry-shadow-1); }
.ry-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: var(--ry-r-full); background: var(--ry-surface); border: 1px solid var(--ry-border); font-size: 13px; color: var(--ry-text-muted); box-shadow: var(--ry-shadow-1); }
[dir="rtl"] .ry-eyebrow { padding: 4px 4px 4px 12px; }
.ry-eyebrow > .ry-badge { height: 22px; }
/* Legacy dashboard status pills */
.status-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; }

/* ---------- 9. Tabs / segmented ---------- */
.ry-tabs { display: inline-flex; gap: 2px; padding: 4px; background: var(--ry-surface-muted); border: 1px solid var(--ry-border); border-radius: 12px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ry-tabs::-webkit-scrollbar { display: none; }
.ry-tab { height: 34px; padding-inline: 14px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--ry-text-muted); background: transparent; border: 0; cursor: pointer; white-space: nowrap; transition: background var(--ry-fast), color var(--ry-fast), box-shadow var(--ry-base); }
.ry-tab:hover { color: var(--ry-text-strong); }
.ry-tab[aria-selected="true"], .ry-tab[aria-checked="true"] { background: var(--ry-surface); color: var(--ry-text-strong); box-shadow: var(--ry-shadow-2); }

/* ---------- 10. Table ---------- */
.ry-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.ry-table th { text-align: start; font-weight: 500; font-size: 12px; color: var(--ry-text-subtle); padding: 10px 16px; background: var(--ry-sand-25); border-bottom: 1px solid var(--ry-border); }
.ry-table td { padding: 12px 16px; border-bottom: 1px solid var(--ry-border); color: var(--ry-text); font-variant-numeric: tabular-nums; }
.ry-table tr:last-child td { border-bottom: 0; }
.ry-table tbody tr:hover td { background: var(--ry-sand-25); }

/* ---------- 11. Overlays: modal, dropdown, tooltip, toast ---------- */
.ry-backdrop { position: fixed; inset: 0; background: rgba(16,15,13,.42); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 16px; z-index: 80; animation: ry-fade var(--ry-base) var(--ry-ease); }
.ry-modal { width: 100%; max-width: 480px; background: var(--ry-surface); border-radius: var(--ry-r-xl); box-shadow: var(--ry-shadow-4); border: 1px solid var(--ry-border); padding: 24px; animation: ry-pop var(--ry-base) var(--ry-ease); }
.ry-menu { min-width: 200px; background: var(--ry-surface); border: 1px solid var(--ry-border); border-radius: 12px; box-shadow: var(--ry-shadow-3); padding: 6px; }
.ry-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--ry-text); text-align: start; }
.ry-menu-item:hover { background: var(--ry-surface-muted); }
.ry-tooltip { position: relative; }
.ry-tooltip[data-tip]:hover::after, .ry-tooltip[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--ry-ink); color: #fff; font-size: 12px; padding: 6px 8px; border-radius: 6px; box-shadow: var(--ry-shadow-2); z-index: 60; }
[dir="rtl"] .ry-tooltip[data-tip]:hover::after { transform: translateX(50%); }
.ry-toast { display: flex; align-items: flex-start; gap: 10px; background: var(--ry-ink); color: #fff; border-radius: 12px; padding: 12px 14px; font-size: 13px; box-shadow: var(--ry-shadow-4); animation: ry-rise var(--ry-base) var(--ry-ease); }
@keyframes ry-fade { from { opacity: 0; } }
@keyframes ry-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes ry-rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 12. Empty / loading ---------- */
.ry-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 24px; color: var(--ry-text-subtle); font-size: 14px; }
.ry-empty .ry-icon-tile { margin-bottom: 4px; color: var(--ry-sand-500); }
.ry-skeleton { background: linear-gradient(90deg, var(--ry-sand-100) 0%, var(--ry-sand-50) 50%, var(--ry-sand-100) 100%); background-size: 200% 100%; border-radius: 6px; animation: ry-shimmer 1.4s linear infinite; }
@keyframes ry-shimmer { to { background-position: -200% 0; } }

/* ---------- 13. Conversation primitives (product + marketing visuals) ---------- */
.ry-msg { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; }
:lang(ar) .ry-msg { line-height: 1.75; }
.ry-msg-in { background: var(--ry-sand-100); color: var(--ry-text); border-start-start-radius: 4px; }
.ry-msg-ai { background: var(--ry-lagoon-50); color: var(--ry-lagoon-900); border: 1px solid var(--ry-lagoon-100); border-start-end-radius: 4px; margin-inline-start: auto; }
.ry-msg-staff { background: var(--ry-ink); color: #fff; border-start-end-radius: 4px; margin-inline-start: auto; }
.ry-msg-meta { font-size: 11px; color: var(--ry-text-subtle); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.ry-source { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding-inline: 8px; border-radius: 6px; background: #fff; border: 1px solid var(--ry-lagoon-100); color: var(--ry-lagoon-800); font-size: 11px; font-weight: 500; }
.ry-typing { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--ry-lagoon-50); border: 1px solid var(--ry-lagoon-100); }
.ry-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ry-lagoon-500); animation: ry-bounce 1.2s infinite var(--ry-ease); }
.ry-typing i:nth-child(2) { animation-delay: .15s; } .ry-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ry-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.ry-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: var(--ry-sand-200); color: var(--ry-sand-800); flex: none; }
.ry-channel { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ry-channel svg { width: 10px; height: 10px; fill: #fff; }
.ry-ch-telegram { background: #229ED9; }
.ry-ch-whatsapp { background: #25D366; }
.ry-ch-web { background: var(--ry-ink); }
.ry-ch-instagram { background: radial-gradient(circle at 30% 107%, #FDCB52 0%, #FD5949 45%, #D6249F 65%, #285AEB 100%); }

/* ---------- 14. Motion ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ry-ease), transform 600ms var(--ry-ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.ry-seq > * { opacity: 0; transform: translateY(8px); }
.ry-seq.is-playing > * { animation: ry-rise 420ms var(--ry-ease) forwards; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .reveal, .ry-seq > * { opacity: 1 !important; transform: none !important; }
  .ry-lid path { stroke-dashoffset: 0; }
}

/* ---------- 15. Site chrome (marketing) ---------- */
.ry-header { position: sticky; top: 0; z-index: 50; background: rgba(249,247,243,.78); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--ry-base), background var(--ry-base); }
.ry-header.is-scrolled { border-bottom-color: var(--ry-border); background: rgba(249,247,243,.92); }
.ry-nav-link { font-size: 14px; font-weight: 500; color: var(--ry-text-muted); padding: 8px 12px; border-radius: 8px; transition: color var(--ry-fast), background var(--ry-fast); }
.ry-nav-link:hover { color: var(--ry-text-strong); background: rgba(16,15,13,.04); }
.ry-nav-link[aria-current="page"] { color: var(--ry-text-strong); }
.ry-logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 19px; letter-spacing: -0.03em; color: var(--ry-text-strong); font-family: "Geist", var(--ry-font); }
.ry-logo img { width: 30px; height: 30px; }
.ry-sheet { position: fixed; inset: 64px 0 auto 0; background: var(--ry-bg); border-bottom: 1px solid var(--ry-border); box-shadow: var(--ry-shadow-3); padding: 12px var(--ry-gutter) 20px; z-index: 49; animation: ry-rise var(--ry-base) var(--ry-ease); }
.ry-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 500; font-size: 16px; color: var(--ry-text-strong); }
.ry-faq summary::-webkit-details-marker { display: none; }
.ry-faq summary .ry-plus { transition: transform var(--ry-base) var(--ry-ease); color: var(--ry-sand-500); }
.ry-faq[open] summary .ry-plus { transform: rotate(45deg); }
.ry-faq + .ry-faq { border-top: 1px solid var(--ry-border); }
:lang(ar) .ry-lid svg { bottom: -0.34em; }

/* ---------- 16. App shell (dashboard + admin sidebar) ---------- */
.ry-side { width: 248px; flex: none; flex-direction: column; background: var(--ry-surface); border-inline-end: 1px solid var(--ry-border); height: 100vh; position: sticky; top: 0; }
.ry-side-head { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid var(--ry-border); min-height: 68px; }
.ry-side-org { width: 34px; height: 34px; border-radius: 10px; background: var(--ry-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex: none; }
.ry-side-org img { width: 20px; height: 20px; }
.ry-side-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ry-text-muted); text-align: start; transition: background var(--ry-fast), color var(--ry-fast); }
.ry-side-link .ry-icon { width: 18px; height: 18px; color: var(--ry-sand-400); transition: color var(--ry-fast); }
.ry-side-link:hover { background: var(--ry-surface-muted); color: var(--ry-text-strong); }
.ry-side-link:hover .ry-icon { color: var(--ry-sand-600); }
.ry-side-link[aria-current="page"] { background: var(--ry-sand-100); color: var(--ry-text-strong); box-shadow: inset 0 0 0 1px var(--ry-border); }
.ry-side-link[aria-current="page"] .ry-icon { color: var(--ry-lagoon-600); }
.ry-side-fab { position: fixed; bottom: 16px; inset-inline-end: 16px; z-index: 70; width: 48px; height: 48px; border-radius: 14px; background: var(--ry-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--ry-shadow-4); }
.ry-drawer { position: fixed; inset: 0; z-index: 80; }
.ry-drawer[hidden] { display: none; }
.ry-drawer-backdrop { position: absolute; inset: 0; background: rgba(16,15,13,.42); animation: ry-fade var(--ry-base) var(--ry-ease); }
.ry-drawer-panel { display: flex; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; height: 100%; box-shadow: var(--ry-shadow-4); animation: ry-rise var(--ry-base) var(--ry-ease); }
.ry-mark-icon { width: 18px; height: 18px; flex: none; }

/* ---------- 17. Mobile app tab bar (dashboard + admin, < 768px) ---------- */
.ry-tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 70; height: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); display: flex; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-top: 1px solid var(--ry-border); }
.ry-tabbar a, .ry-tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 500 10.5px/1 var(--ry-font); color: var(--ry-text-subtle); background: none; border: 0; position: relative; }
.ry-tabbar .ry-icon, .ry-tabbar .ry-mark-icon { width: 22px; height: 22px; color: var(--ry-sand-400); }
.ry-tabbar [aria-current="page"] { color: var(--ry-text-strong); font-weight: 600; }
.ry-tabbar [aria-current="page"] .ry-icon { color: var(--ry-lagoon-600); }
.ry-tab-badge { position: absolute; top: 8px; inset-inline-end: calc(50% - 20px); min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--ry-warning); color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
@media (max-width: 767px) { body.ry-has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } }
.ry-chip-ch { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding-inline: 3px 7px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.ry-chip-ch .ry-channel { width: 14px; height: 14px; }
.ry-chip-ch .ry-channel svg { width: 9px; height: 9px; }
.ry-chip-telegram { background: #E8F4FB; color: #1D6FA0; }
.ry-chip-whatsapp { background: #E9F9EF; color: #177A3E; }
.ry-chip-other { background: var(--ry-sand-100); color: var(--ry-sand-700); }
.ry-side-link .ry-mark-icon { color: var(--ry-sand-400); }
@media (max-width: 767px) { body.ry-has-tabbar .h-screen { height: calc(100dvh - 64px - env(safe-area-inset-bottom, 0px)) !important; } }

/* ---------- 18. AI models strip (homepage) ---------- */
.ry-models { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 6px; border-radius: 16px; background: var(--ry-sand-100); border: 1px solid var(--ry-border); max-width: 100%; }
.ry-model { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 50px; padding: 0 18px; border-radius: 11px; text-align: left; }
.ry-model-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ry-sand-600); }
.ry-model-org { font-size: 11px; color: var(--ry-sand-400); }
.ry-model.is-default { background: var(--ry-surface); border: 1px solid var(--ry-border); box-shadow: var(--ry-shadow-2); }
.ry-model.is-default .ry-model-name { color: var(--ry-ink); }
.ry-model.is-default .ry-model-org { color: var(--ry-sand-500); }
.ry-model-more { font-size: 13px; font-weight: 500; color: var(--ry-text-subtle); }
.ry-model-more:hover { color: var(--ry-text-strong); }
.ry-chip-instagram { background: #FCEBF4; color: #A3195B; }