/* Layan.ai — the Command Center shell for the plain tool pages (social, account, admin, evals).
   The look comes from css/app.css under body.cc-page (floating glass sidebar, glass panels, dawn backdrop). This file adds the one shell rule the
   Next.js Command Center (cc/) ships in its own bundle, and the surface tokens that admin.css, social.css and evals read, so every field, row and
   card follows js/theme.js in both themes instead of staying navy. */

/* the sidebar groups (Today, Company) are wrappers only, exactly as in cc/ */
.cc-page .side-group { display: contents; }

/* ---------- surfaces: dark is the base, light flips them ---------- */
:root {
  --tool-field: rgba(2, 9, 31, 0.55);          /* inputs and selects */
  --tool-row: rgba(255, 255, 255, 0.045);      /* rows and cards inside a panel, same as the Command Center rows */
  --tool-row-hover: rgba(170, 206, 253, 0.07);
  --tool-pick: rgba(37, 78, 193, 0.3);         /* a selected chip, day or post */
  --tool-phone: #05122F;
  --tool-phone-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --tool-writer: linear-gradient(135deg, rgba(37, 78, 193, 0.18), rgba(7, 20, 51, 0.5));
  --tool-video: linear-gradient(180deg, rgba(37, 78, 193, 0.3), rgba(2, 9, 31, 0.8));
  --tool-knob: #E4F1FF;
}
:root[data-theme="light"] {
  --tool-field: rgba(255, 255, 255, 0.86);
  --tool-row: rgba(255, 255, 255, 0.7);
  --tool-row-hover: rgba(255, 255, 255, 0.92);
  --tool-pick: rgba(47, 102, 218, 0.12);
  --tool-phone: rgba(255, 255, 255, 0.82);
  --tool-phone-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 30px 60px -36px rgba(32, 54, 128, 0.45);
  --tool-writer: linear-gradient(135deg, rgba(96, 157, 252, 0.14), rgba(255, 255, 255, 0.72));
  --tool-video: linear-gradient(180deg, rgba(96, 157, 252, 0.22), rgba(214, 227, 250, 0.7));
  --tool-knob: #FFFFFF;
}

/* ---------- rows and cards take the Command Center's rounder corners ---------- */
.cc-page .opt, .cc-page .hz-row, .cc-page .key-card, .cc-page .qp, .cc-page .writer { border-radius: 16px; }
.cc-page .adm-input, .cc-page .soc-input { border-radius: 12px; }

/* light: the switch knob stays white on both the pale and the cobalt track, and the selected option reads as a tint, not a navy block */
:root[data-theme="light"] .sw { background: rgba(11, 27, 63, 0.12); }
:root[data-theme="light"] .sw[aria-checked="true"] { background: var(--cobalt); }
:root[data-theme="light"] .sw::after { box-shadow: 0 1px 3px rgba(11, 27, 63, 0.35); }
:root[data-theme="light"] .opt.is-on { background: rgba(47, 102, 218, 0.1); box-shadow: 0 0 0 3px rgba(96, 157, 252, 0.14); }
:root[data-theme="light"] .plat.is-on { border-color: rgba(47, 102, 218, 0.55); }
:root[data-theme="light"] .tones button.is-on { color: #fff; }