/* =====================================================================
   CMBOT — "Aurore" design system (full)
   Tokens · resets · layout · components · views · responsive
   Build target: vanilla HTML/CSS/JS, no build step.
   Rule: components use CSS variables only — never raw hex.
   ===================================================================== */

/* Bundled Poppins (OFL) — burned-in renders use Poppins-Bold; load it locally so
   the Studio preview matches the render and works offline. */
@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/static/fonts/Poppins-SemiBold.ttf") format("truetype");
}
@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/static/fonts/Poppins-Bold.ttf") format("truetype");
}
@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/static/fonts/Poppins-Regular.ttf") format("truetype");
}
@font-face{font-family:"Poppins";font-style:italic;font-weight:400;font-display:swap;src:url("/static/fonts/Poppins-Italic.ttf") format("truetype");}
@font-face{font-family:"Poppins";font-style:italic;font-weight:600 900;font-display:swap;src:url("/static/fonts/Poppins-SemiBoldItalic.ttf") format("truetype");}
@font-face{font-family:"Anton";font-style:normal;font-weight:400 900;font-display:swap;src:url("/static/fonts/Anton-Regular.ttf") format("truetype");}
@font-face{font-family:"ArchivoBlack";font-style:normal;font-weight:400 900;font-display:swap;src:url("/static/fonts/ArchivoBlack-Regular.ttf") format("truetype");}
@font-face{font-family:"BebasNeue";font-style:normal;font-weight:400 900;font-display:swap;src:url("/static/fonts/BebasNeue-Regular.ttf") format("truetype");}
@font-face{font-family:"DMSerif";font-style:normal;font-weight:400 900;font-display:swap;src:url("/static/fonts/DMSerifDisplay-Regular.ttf") format("truetype");}
@font-face{font-family:"Lobster";font-style:normal;font-weight:400 900;font-display:swap;src:url("/static/fonts/Lobster-Regular.ttf") format("truetype");}
@font-face{font-family:"Pacifico";font-style:normal;font-weight:400 900;font-display:swap;src:url("/static/fonts/Pacifico-Regular.ttf") format("truetype");}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;src:url("/static/fonts/Caveat.ttf") format("truetype");}
@font-face{font-family:"PatrickHand";font-style:normal;font-weight:400 900;font-display:swap;src:url("/static/fonts/PatrickHand-Regular.ttf") format("truetype");}

/* ----------------------------------------------------------------- 2. RESET */
*, *::before, *::after{ box-sizing:border-box; }
/* `el.hidden = true` must actually hide. The UA rule is [hidden]{display:none},
   which every component class that sets its own display quietly beats — so a
   hidden .row or .ctl-field stayed on screen, and the only sign was a control
   that would not go away. One rule instead of a per-class patch each time. */
[hidden]{ display:none !important; }
html, body{ margin:0; padding:0; height:100%; }
body{
  font-family:var(--font-ui);
  font-size:14px; line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; } /* native only: WA components size their own type */
a{ color:inherit; text-decoration:none; }
img,svg,video{ display:block; max-width:100%; }
input,textarea,select{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus{ outline:none; }
::selection{ background:var(--primary-soft); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:var(--r-pill); border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--faint); }

/* ----------------------------------------------------------------- 3. TYPE SCALE */
.t-display{ font-family:var(--font-display); font-size:30px; line-height:1.15; font-weight:600; letter-spacing:-0.02em; }
.t-h1{ font-family:var(--font-display); font-size:24px; line-height:1.2; font-weight:600; letter-spacing:-0.02em; }
.t-h2{ font-family:var(--font-display); font-size:18px; line-height:1.35; font-weight:600; letter-spacing:-0.01em; }
.t-h3{ font-family:var(--font-display); font-size:15px; line-height:1.4; font-weight:600; letter-spacing:-0.005em; }
.t-body{ font-family:var(--font-ui); font-size:14px; line-height:1.6; font-weight:400; }
.t-body-sm{ font-family:var(--font-ui); font-size:13px; line-height:1.55; font-weight:400; }
.t-caption{ font-family:var(--font-ui); font-size:12px; line-height:1.5; font-weight:400; }
.t-label{ font-family:var(--font-ui); font-size:11px; line-height:1.4; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; }
.t-mono{ font-family:var(--font-mono); font-size:13px; line-height:1.5; font-weight:500; font-feature-settings:"tnum"; }
.is-muted{ color:var(--muted); }
.is-faint{ color:var(--faint); }

/* ----------------------------------------------------------------- 4. APP SHELL */

/* --- sidebar --- */

/* sliding marker (positioned by main.js via transform on a single element) */

/* sidebar footer: meta card + collapse toggle pinned to the bottom */

/* ---- operations indicator (publish/schedule) ---- */

@keyframes opsPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
/* rail mode: icon-only button, badge floats on the corner */

.ops-panel{
  position:fixed; left:calc(var(--sidebar-w) + 8px); bottom:16px; z-index:90;
  width:min(380px, calc(100vw - var(--sidebar-w) - 24px)); max-height:72vh;
  display:flex; flex-direction:column; gap:var(--s-2);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:0 12px 40px rgba(0,0,0,.45); padding:var(--s-4); overflow:hidden;
}
.ops-panel.hidden{ display:none; }
.ops-panel__head{ flex:0 0 auto; }
.ops-panel__list{ overflow-y:auto; display:flex; flex-direction:column; gap:var(--s-3); padding-right:var(--wa-space-3xs); }

@media (max-width:720px){
  .ops-panel{ left:8px; right:8px; width:auto; bottom:80px; }
}

/* ===== COMMAND PALETTE + UNIFIED ACTIVITY CENTER ===================== */

/* The search command becomes a true icon button whenever the sidebar is a
   rail. Keeping the hidden label in the flex row used to make it spill outside
   the 76/80px navigation column. */

/* =====================================================================
   ACCUEIL — command centre
   A compact bento dashboard with clear next actions. It intentionally avoids
   the old wall of equally weighted statistic cards.
   ===================================================================== */
.dash-home{ gap:var(--s-6); }
.dash-hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,410px);
  gap:var(--s-6); padding:var(--s-7);
  border:1px solid var(--border); border-radius:var(--r-xl);
  background:var(--surface);
  box-shadow:0 18px 48px rgba(0,0,0,.16);
}
.dash-hero__copy{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.dash-hero__date,.dash-card__eyebrow{
  color:var(--primary); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.dash-hero__title{ margin:var(--s-2) 0 var(--s-2); font-size:clamp(28px,3vw,42px); line-height:1.1; letter-spacing:-.04em; }
.dash-hero__summary{ max-width:58ch; color:var(--muted); font-size:14px; line-height:1.55; }
.dash-hero__actions,.dash-focus__actions{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-5); }
.dash-status{
  display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-4);
  border:1px solid color-mix(in srgb,var(--border) 86%,transparent);
  border-radius:var(--r-lg); background:color-mix(in srgb,var(--surface) 84%,transparent);
}
.dash-status__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); margin-bottom:var(--s-1); }
.dash-status__live{ display:inline-flex; align-items:center; gap:var(--wa-space-2xs); color:var(--muted); font-size:10px; }
.dash-status__live i{ width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px var(--success-soft); }
.dash-status__row{
  width:100%; min-width:0; display:grid; grid-template-columns:28px minmax(0,1fr) auto 14px;
  align-items:center; gap:var(--s-2); padding:var(--s-3); border:1px solid transparent;
  border-radius:var(--r-md); color:var(--text); text-align:left; background:var(--surface-2);
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.dash-status__row:hover{ border-color:var(--border-strong); background:var(--surface-3); }
.dash-status__icon{ width:28px; height:28px; display:grid; place-items:center; border-radius:10px; color:var(--primary); background:var(--primary-soft); }
.dash-status__row.is-warn .dash-status__icon{ color:var(--warning-text); background:var(--warning-soft); }
.dash-status__label{ min-width:0; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:11px; }
.dash-status__row strong{ white-space:nowrap; font-size:11px; }
.dash-status__row > .icon{ color:var(--faint); }
.dash-main{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:var(--s-5); align-items:stretch; }
.dash-focus,.dash-actions,.dash-section{
  min-width:0; padding:var(--s-5); border:1px solid var(--border); border-radius:var(--r-xl);
  background:var(--surface); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 30%,transparent);
}
.dash-focus,.dash-actions{ min-height:264px; }
.dash-focus__body{ display:flex; flex-direction:column; align-items:flex-start; min-height:205px; }
.dash-focus__lead{ display:flex; align-items:flex-start; gap:var(--s-3); margin-top:var(--s-4); }
.dash-focus__lead.is-live .dash-focus__icon{ color:var(--primary); background:var(--primary-soft); }
.dash-focus__icon{ width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border-radius:15px; color:var(--muted); background:var(--surface-2); }
.dash-focus__copy{ min-width:0; }
.dash-focus__copy .section-label{ display:block; margin-bottom:var(--s-1); }
.dash-focus__copy h2{ overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; }
.dash-focus__copy p{ margin-top:var(--s-1); color:var(--muted); font-size:13px; line-height:1.45; }
.dash-focus__progress{ width:100%; height:5px; margin-top:auto; overflow:hidden; border-radius:var(--r-pill); background:var(--surface-3); }
.dash-focus__progress span{ display:block; height:100%; border-radius:inherit; background:var(--primary); transition:width .4s ease; }
.dash-platforms{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-4); color:var(--muted); font-size:11px; }
.dash-platforms span{ display:inline-flex; align-items:center; gap:var(--wa-space-2xs); padding:var(--wa-space-2xs) var(--wa-space-xs); border-radius:var(--r-pill); background:var(--surface-2); }
.dash-platforms .icon{ color:var(--primary); }
.dash-actions__head{ margin-bottom:var(--s-4); }
.dash-actions__head h2{ margin-top:var(--s-1); }
.dash-actions__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-2); }
.dash-quick{
  min-width:0; display:flex; align-items:center; gap:var(--s-2); padding:var(--s-3);
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2);
  text-align:left; transition:transform var(--dur-fast),background var(--dur-fast),border-color var(--dur-fast);
}
.dash-quick:hover{ transform:translateY(-1px); border-color:var(--border-strong); background:var(--surface-3); }
.dash-quick__icon{ width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:11px; color:var(--muted); background:var(--surface-3); }
.dash-quick--primary .dash-quick__icon{ color:var(--primary); background:var(--primary-soft); }
.dash-quick--secondary .dash-quick__icon{ color:var(--secondary); background:var(--secondary-soft); }
.dash-quick--tertiary .dash-quick__icon{ color:var(--tertiary); background:var(--tertiary-soft); }
.dash-quick__copy{ min-width:0; flex:1; display:flex; flex-direction:column; gap:var(--wa-space-3xs); }
.dash-quick__copy strong{ overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.dash-quick__copy small{ overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; color:var(--muted); font-size:10px; white-space:nowrap; }
.dash-quick > .icon{ flex:0 0 auto; color:var(--faint); }
.dash-section{ padding:var(--s-5); }
.dash-section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-4); }
.dash-section__head h2{ margin-top:var(--s-1); }
.dash-work-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-3); }
.dash-work{
  min-width:0; display:grid; grid-template-columns:52px minmax(0,1fr) 16px; align-items:center; gap:var(--s-3);
  padding:var(--s-2); border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface-2); text-align:left; transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);
}
.dash-work:hover{ transform:translateY(-1px); border-color:var(--border-strong); background:var(--surface-3); }
.dash-work__media{ width:52px; height:68px; display:grid; place-items:center; overflow:hidden; border-radius:10px; color:var(--primary); background:var(--surface-3); }
.dash-work__media img{ width:100%; height:100%; object-fit:cover; }
.dash-work__copy{ min-width:0; display:flex; flex-direction:column; gap:var(--wa-space-2xs); }
.dash-work__meta{ overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; color:var(--primary); font-size:10px; font-weight:700; }
.dash-work__copy strong{ overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.dash-work__copy small{ color:var(--muted); font-size:10px; }
.dash-work__arrow{ color:var(--faint); }
.dash-pipeline{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-2); }
.dash-stage{ position:relative; min-width:0; display:flex; align-items:flex-start; gap:var(--s-2); padding:var(--s-3); border:1px solid transparent; border-radius:var(--r-md); color:var(--text); text-align:left; background:var(--surface-2); }
.dash-stage:hover{ border-color:var(--border-strong); background:var(--surface-3); }
.dash-stage__icon{ width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border-radius:10px; color:var(--primary); background:var(--primary-soft); }
.dash-stage__copy{ min-width:0; display:flex; flex-direction:column; gap:var(--wa-space-3xs); }
.dash-stage__copy strong{ font-size:18px; line-height:1.1; }
.dash-stage__copy span{ overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.dash-stage__copy small{ color:var(--muted); font-size:10px; line-height:1.35; }
.dash-stage__connector{ position:absolute; right:0; top:50%; z-index:1; width:6px; height:1px; background:var(--border-strong); }
.dash-empty{ display:flex; align-items:center; gap:var(--s-3); padding:var(--s-4); border-radius:var(--r-md); color:var(--primary); background:var(--primary-soft); }
.dash-empty > div{ min-width:0; flex:1; display:flex; flex-direction:column; gap:var(--wa-space-3xs); }
.dash-empty strong{ color:var(--text); font-size:13px; }
.dash-empty span{ color:var(--muted); font-size:11px; }
.dash-upcoming{ display:flex; flex-direction:column; gap:var(--s-2); }
.dash-upcoming__item{ min-width:0; display:grid; grid-template-columns:28px 38px minmax(0,1fr) auto 14px; align-items:center; gap:var(--s-3); padding:var(--s-2); border:1px solid var(--border); border-radius:var(--r-md); color:var(--text); text-align:left; background:var(--surface-2); }
.dash-upcoming__item:hover{ border-color:var(--border-strong); background:var(--surface-3); }
.dash-upcoming__index{ color:var(--faint); font:600 11px var(--font-mono); }
.dash-upcoming__item > img,.dash-upcoming__placeholder{ width:38px; height:48px; display:grid; place-items:center; overflow:hidden; border-radius:8px; object-fit:cover; color:var(--primary); background:var(--surface-3); }
.dash-upcoming__copy{ min-width:0; display:flex; flex-direction:column; gap:var(--wa-space-3xs); }
.dash-upcoming__copy strong{ overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.dash-upcoming__copy small{ color:var(--muted); font-size:10px; }
.dash-upcoming__item .dash-platforms{ margin:0; }
.dash-upcoming__item .dash-platforms span{ padding:var(--wa-space-2xs) var(--wa-space-xs); font-size:0; }
.dash-upcoming__item .dash-platforms .icon{ width:13px; height:13px; }
.dash-upcoming__item > .icon{ color:var(--faint); }
.dash-error{ display:flex; align-items:center; gap:var(--s-4); padding:var(--s-6); border:1px solid var(--danger); border-radius:var(--r-xl); background:var(--danger-soft); }
.dash-error__icon{ color:var(--danger); }
.dash-error p{ margin-top:var(--s-1); color:var(--muted); font-size:13px; }
.dash-error .btn{ margin-left:auto; }
@media (max-width:1120px){
  .dash-hero{ grid-template-columns:1fr; }
  .dash-status{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
  .dash-status__head{ grid-column:1/-1; }
  .dash-main{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .dash-work-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dash-pipeline{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dash-stage__connector{ display:none; }
}
@media (max-width:620px){
  .dash-hero,.dash-section,.dash-focus,.dash-actions{ padding:var(--s-4); border-radius:var(--r-lg); }
  .dash-status{ display:flex; }
  .dash-hero__actions .btn{ flex:1 1 100%; }
  .dash-actions__grid,.dash-work-grid,.dash-pipeline{ grid-template-columns:1fr; }
  .dash-upcoming__item{ grid-template-columns:24px 38px minmax(0,1fr) 14px; }
  .dash-upcoming__item .dash-platforms{ display:none; }
  .dash-empty{ align-items:flex-start; flex-wrap:wrap; }
  .dash-empty .btn{ margin-left:var(--wa-space-xl); }
}

/* ===== STORAGE RECOMMENDATIONS ====================================== */
.stg-recommend{ margin-bottom:var(--s-4); border-radius:var(--r-xl); background:var(--surface); }
.stg-recommend__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-4); }
.stg-recommend__head h2{ margin:var(--wa-space-3xs) 0 0; }
.stg-recommend__items{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--s-3); }
.stg-recommend__item{ display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-3); border-radius:var(--r-lg); background:var(--surface-2); }
.stg-recommend__item strong{ font-size:13px; }
.stg-recommend__item p{ min-height:34px; margin:0; color:var(--muted); font-size:11px; line-height:1.45; }
.stg-recommend__impact{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); color:var(--primary); font:600 12px var(--font-mono); }

@media (max-width:720px){
  .stg-recommend__head{ flex-direction:column; }
  .stg-recommend__head .btn{ width:100%; }
}

/* ---- activity indicator (what's being GENERATED) ---- */

@keyframes actSlide{
  0%{ margin-left:-40%; } 100%{ margin-left:100%; }
}

/* ===== collapsed (rail) mode — manual toggle via .app.is-rail =====
   Scoped above the auto-rail breakpoint: ≤1024 is already a rail and ≤720 is a
   bottom bar, so the manual toggle only governs wide screens. */
 /* end @media (min-width:1025px) manual rail */

/* --- topbar --- */

/* full-screen "restarting…" overlay while the backend re-execs */

/* --- content --- */

.view{ display:flex; flex-direction:column; gap:var(--s-8); }
.view__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; }
.view__title{ /* compose with .t-h1 */ }

/* view-transition (applied by main.js on route change) */
.view-enter{ animation:viewEnter var(--dur) var(--ease-out) both; }
@keyframes viewEnter{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }

/* ----------------------------------------------------------------- 5. LAYOUT HELPERS */
.grid--2{ display:grid; grid-template-columns:2fr 1fr; gap:var(--s-6); align-items:start; }
.grid--auto{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--s-4); }
.stack{ display:flex; flex-direction:column; gap:var(--s-4); }
.row{ display:flex; align-items:center; gap:var(--s-3); }
.row--wrap{ flex-wrap:wrap; }
.row--end{ justify-content:flex-end; }
.row--between{ justify-content:space-between; }
.spacer{ flex:1 1 auto; }
.section-label{ /* compose with .t-label */ color:var(--muted); font-family:var(--font-ui); font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; }
.hidden{ display:none !important; }

/* collapsible section header (e.g. Récurrence in the story composer) */
.recur-block__toggle{ display:flex; align-items:center; gap:var(--s-2); width:100%; padding:0; background:none; border:0; cursor:pointer; text-align:left; }
.recur-block__toggle:hover .section-label{ color:var(--text); }
.recur-block__chev{ display:inline-flex; color:var(--muted); transition:transform var(--dur); }
.recur-block__chev.is-open{ transform:rotate(180deg); }

/* ----------------------------------------------------------------- 7. CARD */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--s-4);
  box-shadow:var(--shadow-sm);
}
.card--hover{ transition:box-shadow var(--dur), transform var(--dur); }
.card--hover:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card .card__del-btn{
  position:absolute; top:7px; right:7px; width:28px; height:28px; border-radius:999px;
  background:rgba(10,15,22,.75); color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.16);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:opacity .15s ease, transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  z-index:5; padding:0; box-shadow:0 2px 6px rgba(0,0,0,.35);
}
@media (hover: hover){
  .card .card__del-btn{ opacity:0; transform:scale(.92); }
  .card:hover .card__del-btn, .card:focus-within .card__del-btn{ opacity:1; transform:scale(1); }
}
@media (hover: none){
  .card .card__del-btn{ opacity:.85; }
}
.card .card__del-btn:hover{
  background:#dc2626; border-color:#ef4444; color:#fff; transform:scale(1.1);
  box-shadow:0 4px 12px rgba(220,38,38,.45);
}
.card .card__del-btn:active{ transform:scale(.95); }
.card--flush{ padding:0; overflow:hidden; }
.card__header{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-4); }
.card__header .t-h2{ margin:0; }
.card__body{ display:flex; flex-direction:column; gap:var(--s-3); }
.card__footer{ border-top:1px solid var(--border); padding-top:var(--s-3); margin-top:var(--s-4); display:flex; gap:var(--s-2); }

/* ----------------------------------------------------------------- 8. STAT CARD */
.stat-card{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--s-4);
  display:flex; flex-direction:column; gap:var(--s-2);
}
.stat-card__top{ display:flex; align-items:center; gap:var(--s-2); }
.stat-card__icon{ width:18px; height:18px; color:var(--primary); display:flex; }
.stat-card__label{ color:var(--muted); }
.stat-card__value{ font-family:var(--font-display); font-weight:600; font-size:30px; line-height:1.1; letter-spacing:-0.02em; font-feature-settings:"tnum"; }
.stat-card__delta{ font-size:12px; }
.stat-card__delta--up{ color:var(--success-text); }
.stat-card__delta--down{ color:var(--danger-text); }
.stat-card__delta--neutral{ color:var(--muted); }

/* ----------------------------------------------------------------- 9. BADGES & PILLS */
.badge__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* Platform pills are brand-role buttons re-coloured per network (variant "brand" = on, "neutral" = off). */
wa-button.pill--facebook{ --wa-color-brand-fill-loud:var(--facebook); --wa-color-brand-border-loud:var(--facebook); --wa-color-brand-on-loud:#fff; }
wa-button.pill--instagram{ --wa-color-brand-fill-loud:var(--instagram); --wa-color-brand-border-loud:var(--instagram); --wa-color-brand-on-loud:#fff; }
wa-button.pill--youtube{ --wa-color-brand-fill-loud:var(--youtube); --wa-color-brand-border-loud:var(--youtube); --wa-color-brand-on-loud:#fff; }
wa-button.pill--linkedin{ --wa-color-brand-fill-loud:var(--linkedin); --wa-color-brand-border-loud:var(--linkedin); --wa-color-brand-on-loud:#fff; }

/* ----------------------------------------------------------------- 10. FIELDS / INPUTS */
.field{ display:flex; flex-direction:column; }
.field__label{ /* .t-label */ color:var(--muted); font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:var(--wa-space-xs); }
.field__hint{ color:var(--muted); font-size:12px; margin-top:var(--wa-space-xs); }
.field__error{ color:var(--danger-text); font-size:12px; margin-top:var(--wa-space-xs); }

/* live *asterisk* markup field (single-line, behaves like .input) */
.mark-field{
  width:100%; min-height:var(--wa-form-control-height); padding:var(--wa-form-control-padding-block) var(--wa-form-control-padding-inline);
  background:var(--wa-form-control-background-color); color:var(--wa-form-control-value-color);
  border:var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
  border-radius:var(--wa-form-control-border-radius);
  font-family:inherit; font-size:var(--wa-font-size-s); line-height:1.5;
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; outline:none;
  transition:border-color var(--wa-transition-fast);
}
.mark-field:focus{ outline:var(--wa-focus-ring); outline-offset:var(--wa-focus-ring-offset); }
.mark-field:empty::before{ content:attr(data-placeholder); color:var(--wa-form-control-placeholder-color); }
/* a completed *word* pair: collapse the asterisks, emphasise the word */
.md-ast{ font-size:0; }
.md-hl{ font-weight:800; color:var(--primary); }
/* in the phone preview the marked word matches the actual render: bold, but in
   the title's own colour (not the UI accent) */
.phone-frame__title .md-hl{ color:inherit; }
/* ---- Studio Post / Story ------------------------------------------- */
.post-studio{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); gap:var(--s-5); align-items:start; }
.post-preview{ position:sticky; top:var(--s-4); }
@media (max-width: 860px){
  .post-studio{ grid-template-columns:1fr; }
  .post-preview{ position:relative; top:0; }   /* stacked: don't overlap the controls below (relative: stays the handles' containing block) */
  .post-preview__frame--story{ height:min(60vh, 520px); }
}
.post-preview__frame{
  position:relative; overflow:hidden; border-radius:var(--r-md); background:#000;
  border:1px solid var(--border); margin-inline:auto; width:100%; max-width:480px;
}
.post-preview__frame--story{ width:auto; aspect-ratio:9/16; height:min(68vh, 620px); }
.post-controls{ min-width:0; }

wa-number-input{ max-width:9rem; }

/* chip (filters, hashtags) */
.chip__count{ color:var(--muted); font-family:var(--font-mono); font-size:11px; }
.chip__remove{ display:inline-flex; opacity:.6; }
.chip__remove:hover{ opacity:1; }
.chip-scroll{ display:flex; gap:var(--s-2); overflow-x:auto; padding-bottom:var(--wa-space-3xs); scrollbar-width:none; }
.chip-scroll::-webkit-scrollbar{ display:none; }

/* simplified music picker: the pinned song + one-tap mood chips */
.music-song{ overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }

/* preset chips (datetime presets) */

/* ----------------------------------------------------------------- 11. DIALOG / DRAWER / TOAST
   Drawn by wa-dialog, wa-drawer and wa-toast-item (see components.css for their sizes). What remains here is the
   content the app puts inside them. */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal__footer, .drawer__footer{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:var(--wa-space-xs); }
.drawer__body{ display:flex; flex-direction:column; gap:var(--wa-space-m); }
.toast__content{ display:flex; align-items:baseline; gap:var(--wa-space-m); min-width:0; }
.toast__msg{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }



/* ----------------------------------------------------------------- 17. PROGRESS / PIPELINE */
.pipeline{ display:flex; align-items:flex-start; gap:var(--s-3); width:100%; }
.pipeline__step{ display:flex; flex-direction:column; align-items:center; gap:var(--s-2); flex:1 1 0; min-width:0; }
/* per-part progress bar under each step */
.pipeline__bar{ width:100%; margin-top:var(--s-1); }
.pipeline__step--todo .pipeline__bar{ opacity:.6; }
.pipeline__dot{
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--muted); position:relative;
}
.pipeline__dot wa-icon{ font-size:14px; }
.pipeline__label{ font-size:12px; color:var(--muted); white-space:nowrap; }
.pipeline__line{ flex:1 1 auto; height:2px; background:var(--border); margin:var(--wa-space-s) var(--s-1) 0; border-radius:var(--r-pill);
  position:relative; min-width:24px; }
.pipeline__line::after{ content:""; position:absolute; inset:0; width:0; background:var(--success); border-radius:var(--r-pill);
  transition:width var(--dur-slow) var(--ease-out); }
.pipeline__step--done .pipeline__dot{ background:var(--success); border-color:var(--success); color:var(--primary-text); }
.pipeline__step--done .pipeline__label{ color:var(--text); }
.pipeline__step--done .pipeline__dot wa-icon{ animation:popCheck var(--dur) var(--ease-spring) both; }
.pipeline__step--active .pipeline__dot{ border-color:var(--primary); color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.pipeline__step--active .pipeline__label{ color:var(--text); font-weight:600; }
.pipeline__step--todo .pipeline__dot{ background:var(--surface-2); border-color:var(--border); color:var(--muted); }
/* a line preceding a done step fills */
.pipeline__line.is-filled::after{ width:100%; }
.pipeline__eta{ font-size:12px; color:var(--muted); margin-top:var(--s-3); text-align:center; }
@keyframes popCheck{ from{transform:scale(0)} to{transform:scale(1)} }

/* progress: wa-progress-bar (linear) and wa-progress-ring; state colours via the library's --indicator-color */
wa-progress-bar{ --track-height:4px; width:100%; }
.pipeline__step--done wa-progress-bar{ --indicator-color:var(--success); }

/* --- library import dialog --- */
.import-files{ display:flex; flex-direction:column; gap:var(--s-3); max-height:280px; overflow-y:auto; }
.import-file{ display:flex; flex-direction:column; gap:var(--wa-space-xs); }
.import-file__top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); }
.import-file__name{ min-width:0; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.import-file__status{ flex:0 0 auto; white-space:nowrap; }
.import-file.is-done wa-progress-bar{ --indicator-color:var(--success); }
.import-file.is-done .import-file__status{ color:var(--success); }
.import-file.is-error wa-progress-bar{ --indicator-color:var(--danger); }
.import-file.is-error .import-file__status{ color:var(--danger); }
.import-dialog .modal__footer{ padding-top:var(--wa-space-xs); }

/* char ring — compact progress gauge beside the caption counter text */
wa-progress-ring.charring{ --size:22px; --track-width:2.5px; flex:0 0 22px; }
wa-progress-ring.charring.is-warning{ --indicator-color:var(--warning); }
wa-progress-ring.charring.is-danger{ --indicator-color:var(--danger); }

/* ----------------------------------------------------------------- 18. SPINNER */
.spinner--lg{ width:20px; height:20px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ----------------------------------------------------------------- 19. BANNERS */
.banner{ font-size:var(--wa-font-size-s); }
.banner__body{ min-width:0; }
.banner details{ margin-top:var(--s-2); }
.banner summary{ cursor:pointer; font-weight:600; }
.banner pre,.result-block{ font-family:var(--font-mono); font-size:12px; background:var(--surface-2); color:var(--text);
  padding:var(--s-3); border-radius:var(--r-sm); overflow:auto; white-space:pre-wrap; word-break:break-word; margin-top:var(--s-2); }

/* ----------------------------------------------------------------- 20. VIDEO CARD (library) */
.video-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s-3); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:var(--s-3); cursor:pointer;
}
.video-card__thumb{
  position:relative; aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden;
  background:var(--surface-2); display:flex; align-items:center; justify-content:center;
}
.video-card__placeholder{ display:flex; flex-direction:column; align-items:center; gap:var(--s-1); color:var(--faint); }
.video-card__placeholder-letter{ font-family:var(--font-display); font-size:28px; color:var(--border-strong); }
.video-card__duration{
  position:absolute; right:var(--s-2); bottom:var(--s-2);
  padding:var(--wa-space-3xs) var(--wa-space-xs); border-radius:var(--r-xs);
  background:rgba(28,26,23,.6); color:#fff;
  font-family:var(--font-mono); font-size:11px;
}
.video-card__format{
  position:absolute; left:var(--s-2); bottom:var(--s-2);
  padding:var(--wa-space-3xs) var(--wa-space-xs); border-radius:var(--r-xs);
  background:rgba(28,26,23,.6); color:#fff;
  font-family:var(--font-mono); font-size:11px;
}
.video-card__size{
  position:absolute; right:var(--s-2); top:var(--s-2);
  padding:var(--wa-space-3xs) var(--wa-space-xs); border-radius:var(--r-xs);
  background:rgba(28,26,23,.6); color:#fff;
  font-family:var(--font-mono); font-size:11px;
}
.video-card__format.is-pending,
.video-card__duration.is-pending,
.video-card__size.is-pending{ opacity:.5; }
.video-card__overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:var(--s-2);
  align-items:center; justify-content:center;
  background:rgba(28,26,23,.35); opacity:0; transition:opacity var(--dur);
}
/* the ghost "Publier en entier" button needs a readable fill over the dark overlay */
.video-card__whole{ background:rgba(255,255,255,.92); color:#1a1a1a; border-color:transparent; }
.video-card__whole:hover{ background:#fff; }
.video-card:hover .video-card__overlay{ opacity:1; }
.video-card__meta{ display:flex; flex-direction:column; gap:var(--s-2); }
.video-card__title{ /* .t-h3 */ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.video-card__status{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); }
/* the card's actions (kit icon actions) close its status line; a second one sits right next to the first */
.video-card__del{ margin-inline-start:auto; }
.video-card__del + .video-card__del{ margin-inline-start:0; }
.video-grid{ /* compose .grid--auto */ }

/* clips-focused grid on the overview — 5 across, fewer on narrower viewports */
.clips-grid--lg{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
@media (max-width:1200px){ .clips-grid--lg{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:960px){ .clips-grid--lg{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:640px){ .clips-grid--lg{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* bookmark star overlaid on a clip thumbnail (Accueil cards) */
/* the favourite toggle floats on the clip's picture (a kit icon action); a favourite is amber */
.clip-bookmark{ position:absolute; right:var(--wa-space-xs); top:var(--wa-space-xs); z-index:2; }
.clip-bookmark[aria-pressed=true]{ color:var(--accent-amber); }

/* bookmark toggle in the Studio clip-card header */
/* a favourite clip's bookmark is amber (the kit draws the icon action) */
.clip-card__bookmark[aria-pressed=true]{ color:var(--accent-amber); }

/* library pagination bar */
.pager{ display:flex; align-items:center; justify-content:center; gap:var(--s-4); margin-top:var(--s-6); flex-wrap:wrap; }
.pager__info{ text-align:center; font-feature-settings:"tnum"; }
.pager .btn[disabled]{ opacity:.4; }

/* ----------------------------------------------------------------- 21. PHONE FRAME (9:16) */
.phone-frame{
  position:relative; aspect-ratio:9/16; width:158px; flex:0 0 auto;
  background:#111; border-radius:var(--r-lg); overflow:hidden;
  container-type:inline-size;   /* cqw units => preview scales 1:1 with the 1080px render */
}
.phone-frame--lg{ width:240px; }
/* span the parent (recents thumbnail) instead of a fixed 158px. Double-class so it
   outranks the responsive `.phone-frame{width:…}` rules in the media queries below. */
.phone-frame.phone-frame--fill{ width:100%; max-width:none; }
.phone-frame--empty{
  background:var(--surface-2);
}
.phone-frame--empty::after{
  /* subtle film glyph hint behind a still-loading preview */
  content:""; position:absolute; inset:0; z-index:0;
  background:no-repeat center/40px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none' stroke='%231B8E5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.35'%3E%3Crect x='6' y='10' width='36' height='28' rx='4'/%3E%3Cpath d='M20 19l10 5-10 5z' fill='%231B8E5E' stroke='none'/%3E%3C/svg%3E");
}
.phone-frame video,.phone-frame img.phone-frame__poster{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }
.phone-frame__poster{ animation:fadeIn var(--dur) var(--ease-out); }
/* stage wraps poster+source so the crop window moves both together. Default: fills
   the frame (cover). Cropped: oversized + translated so the chosen 9:16 slice of
   the source exactly fills the frame (the frame's overflow:hidden does the crop). */
.phone-frame__stage{ position:absolute; inset:0; z-index:1; }
.phone-frame__stage.is-cropped{ inset:auto; top:0; left:0; }
.phone-frame__stage.is-cropped > .phone-frame__poster,
.phone-frame__stage.is-cropped > .phone-frame__media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:fill;
}
/* blur-pad: blurred dark cover of the source filling the frame behind the sharp
   video when the crop window extends beyond the source (mirrors the render) */
.phone-frame__blurpad{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  filter:blur(10px) brightness(.45); transform:scale(1.12);
}
.phone-frame--blurpad .phone-frame__stage{ box-shadow:0 2.5cqw 8cqw rgba(0,0,0,.65); }
/* lorem-ipsum stand-in "video" for the Réglages overlay preview */
.phone-frame__preview-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(80% 50% at 30% 18%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(150deg, #3a4a55, #1d2630 70%);
}

/* logo overlay — drawn exactly as it burns in (no chrome) */
.phone-frame__logo{ position:absolute; z-index:5; width:calc(var(--logo-size,220) / 10.8 * 1cqw); }
.phone-frame__logo.is-empty{ display:none; }
/* the logo is a <canvas> recoloured in JS (no -webkit-mask: masked elements vanish
   over a playing video in WKWebView) — it scales like an <img> via width/height:auto. */
.phone-frame__logo-img{ width:100%; height:auto; display:block; }
.phone-frame__logo--top-right{ top:3.7cqw; right:3.7cqw; }
.phone-frame__logo--top-left{ top:3.7cqw; left:3.7cqw; }
.phone-frame__logo--bottom-right{ bottom:3.7cqw; right:3.7cqw; }
.phone-frame__logo--bottom-left{ bottom:3.7cqw; left:3.7cqw; }

/* subtitle overlay — mirrors the burned-in styles (outline / box / shadow) */
.phone-frame__sub{
  position:absolute; left:0; right:0; z-index:2; text-align:center; padding:0 5cqw;
  font-weight:800; line-height:1.16; color:var(--sub-color,#fff);
  font-size:calc(var(--sub-size,52) / 10.8 * 1cqw);
}
/* Overlay bitmaps: the PNGs the render burns in (captions, the title sticker,
   an intro/outro card's text). Their geometry is set inline from studio.js so it
   can use the render's own numbers; these rules only keep the global img reset
   from constraining them, and give the motion-word layer something to be
   positioned against — without `position`, its left/top were simply ignored. */
.phone-frame__sub__img{ display:block; width:100%; max-width:none; }
.phone-frame__sub__word{ position:absolute; max-width:none; pointer-events:none; }
/* On an intro/outro card the block spans the whole frame to paint the
   background, so the text bitmap carries its own placement. */
.phone-frame__section .phone-frame__sub__img{ position:absolute; left:0; right:0; }
.phone-frame__sub[data-style="teaser"] .sub-hl{ font-size:1.12em; }
/* subtitle entry animations (preview mirror of the ffmpeg fade/slide) */
.phone-frame__sub.is-animating[data-anim="fade"]{ animation:subFade .12s var(--ease-out); }
.phone-frame__sub.is-animating[data-anim="slide-up"]{ animation:subSlideUp .12s var(--ease-out); }
.phone-frame__sub.is-animating[data-anim="slide-down"]{ animation:subSlideDown .12s var(--ease-out); }
@keyframes subFade{ from{ opacity:0; } to{ opacity:1; } }
/* translateY here composes with the inline placement transform via the wrapper{ animation:txtUp .12s var(--ease-out); }
/* cold-open subs LIVE motion — mirrors the render: a continuous grow (~3%/s)
   + short-period organic sway. Individual translate/scale properties compose
   with the inline positioning transform. (The old 3.5s single-sine float read
   as a lifeless drift inside a 2s caption.) */
.phone-frame--coldopen .phone-frame__sub {
  animation: subLive 2.6s ease-in-out infinite alternate;
  will-change: translate, scale;
}
@keyframes subLive {
  0%   { scale: 1;     translate: 0 .3cqw; }
  45%  {               translate: .45cqw -.4cqw; }
  100% { scale: 1.055; translate: -.3cqw -.6cqw; }
}
/* intro/outro section card entry animation (preview only) */
.phone-frame__section.is-animating[data-anim="fade"]{ animation:subFade .3s var(--ease-out); }

/* Réglages overlay preview ("demo"): the entry animations are slowed and made
   pronounced so each one is clearly distinguishable. transforms don't apply to
   inline elements{
  display:inline-block;
}
.phone-frame--demo .phone-frame__sub.is-animating[data-anim="fade"],
.phone-frame--demo .phone-frame__title.is-animating[data-anim="fade"],
.phone-frame--demo .phone-frame__section.is-animating[data-anim="fade"]{
  animation:demoFade .5s var(--ease-out);
}
@keyframes demoFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes demoSlideUp{ from{ opacity:0; transform:translateY(90%); } to{ opacity:1; transform:translateY(0); } }
@keyframes demoSlideDown{ from{ opacity:0; transform:translateY(-90%); } to{ opacity:1; transform:translateY(0); } }
@keyframes demoSlideSide{ 0%{ opacity:0; transform:translateX(-90%); } 100%{ opacity:1; transform:translateX(0); } }
@keyframes subSlideUp{ from{ opacity:.2; } to{ opacity:1; } }
@keyframes subSlideDown{ from{ opacity:.2; } to{ opacity:1; } }
@keyframes txtUp{ from{ transform:translateY(36%); } to{ transform:translateY(0); } }
@keyframes txtDown{ from{ transform:translateY(-36%); } to{ transform:translateY(0); } }
@keyframes txtSide{ 0%{ opacity:0; transform:translateX(-40%); } 100%{ opacity:1; transform:translateX(0); } }

/* per-word highlight (auto-picked key word or *asterisk*-marked) */
.sub-hl{ color:var(--hl,#FFD400); }
.sub-hl--bold{ font-weight:900; -webkit-text-stroke:.5px var(--hl,#FFD400); }
.sub-hl--underline{ text-decoration:underline; text-decoration-thickness:.08em; text-underline-offset:.08em; }
.sub-hl--glow{ text-shadow:0 0 .18em var(--hl,#FFD400), 0 0 .34em var(--hl,#FFD400); }
.sub-hl--shake{ display:inline-block; animation:hlShake .35s linear infinite; }
.sub-hl--bounce{ display:inline-block; animation:hlBounce 1s ease-in-out infinite; }
@keyframes hlShake{ 0%,100%{ transform:translateX(-.06em); } 50%{ transform:translateX(.06em); } }
@keyframes hlBounce{ 0%,100%{ transform:translateY(0); } 30%{ transform:translateY(-.22em); } 60%{ transform:translateY(0); } }

/* zoom — scale the underlying poster/video; frame clips the overflow */
.phone-frame__poster, .phone-frame video{ transform-origin:center center; }

/* title layer — burned over the video (overlay) or a full-frame intro (section) */
.phone-frame__title{
  position:absolute; left:0; right:0; z-index:5; text-align:center; padding:0 5cqw;
  font-weight:800; line-height:1.16; color:var(--title-color,#fff);
  font-size:calc(var(--title-size,72) / 10.8 * 1cqw);
}
.phone-frame__title[data-mode="section"]{
  inset:0; left:0; right:0; top:0 !important; transform:none !important;
  display:flex; align-items:center; justify-content:center;
}
.phone-frame__title.is-animating[data-anim="fade"]{ animation:subFade .3s var(--ease-out); }

/* THE title look (one style, not configurable): teaser sticker text — same
   language as the cold-open subs. UPPERCASE, thick stroke + hard offset shadow,
   accent word bigger, upright (mirrors render_subtitle's teaser branch). */
.phone-frame__title[data-style="teaser"]{ line-height:1.08; }
.phone-frame__title[data-style="teaser"] .sub-hl{ font-size:1.12em; }
/* The over-video title stays where it is: no entrance, no float or growth — it is simply
   there, then FADES OUT over its last .3 s (driven per-frame by paintPreviewAt through
   .is-leaving; mirrors the render's fade=t=out). */
.phone-frame__title.is-leaving[data-anim="pop"]{ animation:titleOut .3s ease-in both; }
@keyframes titleOut{ from{ opacity:1; } to{ opacity:0; } }

/* full-frame intro/outro section card (mirrors the prepended/appended section
   in the render). z-index:2 keeps it above the video but BELOW the scrubber so
   the time bar stays usable while previewing the intro/outro. */
.phone-frame__section{
  position:absolute; inset:0; z-index:2; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:0 8cqw; font-weight:800; line-height:1.16;
  font-size:calc(var(--sec-size,64) / 10.8 * 1cqw);
}
.phone-frame__section.hidden{ display:none; }
/* a 9:16 video asset that replaces the intro/outro card. The compound
   `.phone-frame video.phone-frame__section-video` selector is deliberate: the
   generic `.phone-frame video` rule (for the rendered clip) is more specific
   than a lone `.phone-frame__section-video` and would otherwise force this
   overlay back into `position:relative; z-index:1`, dropping it out of the
   frame entirely. */
.phone-frame video.phone-frame__section-video{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  object-fit:cover; background:#000;
}
.phone-frame__section-video.hidden{ display:none; }
/* main-phase source video — overlays the poster (compound selector beats the
   generic `.phone-frame video` rule that would force it back into flow). */
.phone-frame video.phone-frame__media{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  object-fit:cover; background:#000; will-change:transform;
}
.phone-frame__media.hidden{ display:none; }

/* intro/outro asset picker button + gallery window */
.asset-pick{ display:flex; align-items:center; gap:var(--s-2); justify-content:flex-start; width:100%; min-width:0; min-height:42px; overflow:hidden; text-align:left; }
.asset-pick wa-icon{ flex:0 0 auto; }
.asset-pick__thumb{ width:28px; height:50px; object-fit:cover; border-radius:4px; background:#000; flex:0 0 auto; }
.asset-pick__name{ flex:1 1 auto; min-width:0; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; }
.asset-pick__dur{ opacity:.7; flex:0 0 auto; }
.asset-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(116px,1fr));
  gap:var(--s-3); width:min(600px, 84vw); max-height:62vh; overflow-y:auto; padding:var(--wa-space-3xs);
}
.asset-grid.is-busy{ opacity:.5; pointer-events:none; }
.asset-card{
  position:relative;
  display:flex; flex-direction:column; gap:var(--wa-space-2xs); padding:0; border:2px solid var(--border);
  border-radius:var(--r-md); background:var(--surface-2); cursor:pointer; overflow:hidden; text-align:left;
}
.asset-card:hover{ border-color:var(--primary); }
.asset-card:focus-visible{ outline:none; border-color:var(--primary); box-shadow:var(--shadow-focus); }
.asset-card.is-active{ border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-soft); }
/* per-asset rename / delete overlay (top-right, revealed on hover/focus) */
.asset-card__actions{
  position:absolute; top:6px; right:6px; z-index:2; display:flex; gap:var(--wa-space-2xs);
  opacity:0; transition:opacity var(--dur-fast);
}
.asset-card:hover .asset-card__actions,
.asset-card:focus-within .asset-card__actions{ opacity:1; }
.asset-card__act{
  width:26px; height:26px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-xs); background:rgba(6,12,9,.74); color:#fff;
  border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.asset-card__act:hover{ background:rgba(6,12,9,.94); }
.asset-card__act--danger:hover{ background:var(--danger); border-color:var(--danger); color:#fff; }
.asset-card__act wa-icon{ font-size:14px; }
.asset-card__thumb{ width:100%; aspect-ratio:9/16; object-fit:cover; background:#000; display:block; }
.asset-card__thumb.is-empty{ background:var(--surface-2); }
.asset-card__thumb--text{ display:flex; align-items:center; justify-content:center; color:var(--muted); background:var(--surface-2); }
.asset-card__label{ padding:0 var(--wa-space-xs); font-size:.82rem; font-weight:600; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; }
.asset-card__dur{ padding:0 var(--wa-space-xs) var(--wa-space-xs); font-size:.72rem; opacity:.7; }
.asset-card--upload{ align-items:center; justify-content:center; gap:var(--wa-space-xs); color:var(--primary); border-style:dashed; aspect-ratio:9/16; }

/* black fade scrims — top behind the logo, bottom behind the subtitles */
.phone-frame__scrim{ position:absolute; left:0; right:0; z-index:1; pointer-events:none; }
.phone-frame__scrim--top{
  top:0; height:24%;
  background:linear-gradient(to bottom, rgba(0,0,0,.8), transparent);
}
.phone-frame__scrim--bottom{
  bottom:0; height:34%;
  background:linear-gradient(to top, rgba(0,0,0,.8), transparent);
}

.phone-frame.is-rendered{ animation:renderReveal 700ms var(--ease-out); }
@keyframes renderReveal{ from{ box-shadow:var(--glow-render); } to{ box-shadow:none; } }

/* preview scrubber — sits at the bottom edge of the frame (preview mode only) */
.phone-frame__scrub-wrap{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:6cqw 4cqw 3cqw; box-sizing:border-box;
  background:linear-gradient(to top, rgba(0,0,0,.45), transparent);
}
.phone-frame__scrub-row{ display:flex; align-items:center; gap:8px; }
.phone-frame__play{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; border:none; border-radius:50%;
  background:rgba(255,255,255,.2); color:#fff; cursor:pointer;
  -webkit-appearance:none; appearance:none; transition:background .15s var(--ease-out);
}
.phone-frame__play:hover{ background:rgba(255,255,255,.34); }
.phone-frame__time{
  flex:0 0 auto; font-size:10px; line-height:1; color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(0,0,0,.6); white-space:nowrap; font-variant-numeric:tabular-nums;
}
/* the scrubber is a wa-slider: sized and coloured through its tokens/parts, white-on-video like a player */
.phone-frame__scrub{ flex:1 1 auto; min-width:0; margin:0; --track-size:3px; --thumb-width:12px; --thumb-height:12px; }
.phone-frame__scrub::part(slider){ --wa-color-neutral-fill-normal:color-mix(in srgb, white 40%, transparent); }
.phone-frame__scrub::part(indicator){ background:white; }
.phone-frame__scrub::part(thumb){ background:white; border-color:white; box-shadow:var(--wa-shadow-s); }

/* in-frame render-progress overlay — tracks the (sticky) video while scrolling */
.phone-frame__render{
  position:absolute; inset:0; z-index:6;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:var(--s-2); padding:var(--s-4); box-sizing:border-box;
  background:rgba(28,26,23,.5); backdrop-filter:blur(1px);
}
.phone-frame__render wa-progress-bar{ width:100%; }
.phone-frame__render-label{ color:#fff; opacity:.92; }

/* ----------------------------------------------------------------- 21b. CLIP CONTROL PANELS */
.clip-panel{
  display:flex; flex-direction:column; gap:var(--s-3);
  padding:var(--s-3); border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface-2);
}
.clip-panel__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:var(--s-3) var(--s-4); align-items:center;
}
.ctl-field{ display:flex; flex-direction:column; gap:var(--wa-space-xs); min-width:0; }
/* a field that needs the whole row, not one auto-fit track (e.g. a text input
   paired with a button — the button's fixed width would otherwise squeeze the
   input down to whatever the track leaves over) */
.ctl-field--full{ grid-column:1 / -1; }
.ctl-field__label{ font-size:12px; color:var(--muted); font-weight:600; }
/* A control paired with buttons: the control takes the slack, the buttons keep
   their natural width. Without this every flex child shrinks together, so a
   select ends up narrower than the word it has to show and an icon-only button
   collapses into a circle with a clipped glyph. */
.ctl-inline{ gap:var(--s-2); min-width:0; flex-wrap:wrap; }
/* 12rem basis + wrap: on a narrow column the buttons drop to their own line and
   the control keeps a readable width, instead of everything shrinking together
   until a programme name renders as "Ch…". */
.ctl-inline > :first-child{ flex:1 1 12rem; min-width:0; }
.ctl-inline > .btn,
.ctl-inline__actions{ flex:0 0 auto; }
.ctl-inline .btn{ white-space:nowrap; }
.ctl-inline__actions{ display:flex; align-items:center; gap:var(--s-2); }
.ctl-range{ display:flex; align-items:center; gap:var(--s-2); }
.ctl-range .range{ flex:1 1 auto; min-width:0; }
.ctl-range__val{ flex:0 0 auto; width:44px; text-align:right; }
/* the per-control reset X: present but disabled while the value is already at
   its default, so a row never reflows as you drag */
.ctl-range__reset:disabled{ opacity:.18; }
.range{ accent-color:var(--primary); }
.ctl-color{ flex:none; }
.ctl-color:disabled{ opacity:.4; cursor:not-allowed; }

/* collapsible control panels (Habillage / Sous-titres) */
.clip-panel__toggle{ cursor:pointer; user-select:none; }
.clip-panel__head-right{ gap:var(--s-3); }
.clip-panel__toggle .studio-transcript__chev{ display:inline-flex; transition:transform var(--dur); color:var(--muted); }
.clip-panel__toggle .studio-transcript__chev.is-open{ transform:rotate(180deg); }
.clip-panel__body{ display:flex; flex-direction:column; gap:var(--s-3); }
.clip-panel__body.hidden{ display:none; }

/* 3-column layout for the host */
.dress-host {
  display: grid;
  /* as many columns as fit (three on a desktop, one or two on a phone): a column never forces the card wider */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: var(--s-3);
}

.dress-host > .clip-panel--collapsible {
  grid-column: span 1;
  min-width: 0;
}

.dress-host > .clip-panel--collapsible.is-expanded {
  grid-column: 1 / -1;
}

/* Make sure the text truncates cleanly if needed */
.dress-host > .clip-panel--collapsible:not(.is-expanded) .section-label {
  white-space: nowrap;
  overflow-x:clip; overflow-y:visible;
  text-overflow: ellipsis;
  font-size: 11px;
}

/* --- b-roll & images panel --- */
.broll-actions{ gap:var(--s-2); align-items:center; }
.broll-search{ gap:var(--s-2); flex:1 1 auto; min-width:0; }
.broll-search__input{ flex:1 1 auto; min-width:120px; }
.broll-search__kind{ flex:0 0 auto; max-width:110px; }
.broll-status{ display:inline-flex; align-items:center; gap:var(--wa-space-xs); }
.broll-count{ font-variant-numeric:tabular-nums; }
.broll-quota{ font-variant-numeric:tabular-nums; }
.broll-quota:empty{ display:none; }
/* initial magic-wand call-to-action (shown until the clip has b-roll) */
.broll-initial{ align-items:flex-start; gap:var(--s-2); }
.broll-initial.hidden{ display:none; }
.broll-autofill{ align-self:flex-start; }
.broll-empty{ padding:var(--s-2) 0; }

.broll-results{ border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-3); background:var(--surface-2); }
.broll-results.hidden{ display:none; }
.broll-results__head{ margin-bottom:var(--s-2); }
.broll-results__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:var(--s-2); }

.broll-tile{ position:relative; padding:0; border:1px solid var(--border); border-radius:var(--r-sm);
  overflow:hidden; cursor:pointer; background:var(--surface); aspect-ratio:9/16; transition:border-color var(--dur), transform var(--dur); }
.broll-tile:hover{ border-color:var(--primary); transform:translateY(-1px); }
.broll-tile__img{ width:100%; height:100%; object-fit:cover; display:block; }
/* load-more sits under the results grid, centred, out of the way until there is
   a next page to ask for */
.broll-more-wrap{ justify-content:center; padding:var(--s-2) 0 0; }
.broll-more-wrap.hidden{ display:none; }
.broll-tile__type{ position:absolute; top:4px; right:4px; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; }
/* per-asset source label — every asset says where it came from */
.broll-tile__src{ position:absolute; left:0; right:0; bottom:0; font-size:9px; line-height:1;
  padding:var(--wa-space-2xs) var(--wa-space-2xs); text-align:center; color:#fff; background:rgba(0,0,0,.55);
  white-space:nowrap; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; pointer-events:none; }
.broll-row__media{ display:flex; flex-direction:column; align-items:center; gap:var(--wa-space-3xs); flex:0 0 auto; }
.broll-row__src{ font-size:9px; color:var(--muted); max-width:48px;
  white-space:nowrap; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; }

/* AI suggestion card (taller, with meta + add button) */
.broll-sugg{ display:flex; flex-direction:column; gap:var(--wa-space-xs); }
.broll-sugg .broll-tile{ width:100%; }
.broll-sugg__meta{ display:flex; flex-direction:column; gap:var(--wa-space-3xs); min-width:0; }
.broll-sugg__q{ font-size:12px; font-weight:600; white-space:nowrap; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; }

/* current cutaway rows */
.broll-list{ display:flex; flex-direction:column; gap:var(--s-2); }
.broll-row{ display:flex; align-items:center; gap:var(--s-3); padding:var(--s-2);
  border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); }
.broll-row__thumb{ position:relative; flex:0 0 auto; width:40px; height:64px; border-radius:var(--r-xs); overflow:hidden; background:var(--surface-2); }
.broll-row__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.broll-row__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:var(--wa-space-2xs); }
.broll-row__q{ font-size:13px; font-weight:600; white-space:nowrap; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; }
.broll-row__times{ gap:var(--wa-space-xs); align-items:center; flex-wrap:wrap; }
/* Wide enough for "108,5" plus the caret. These were 62px, which a number input
   spends on its own spinner arrows before the text gets a look in — a two-decimal
   timecode came out clipped mid-digit ("36," for 36,0). The spinners are no use
   here (there is a 0.1 step and a keyboard) so they go, and the width is the text's. */
.broll-row__times .broll-time{ flex:0 0 auto; width:5.4rem; padding:var(--wa-space-2xs) var(--wa-space-xs); text-align:center;
  font-variant-numeric:tabular-nums; appearance:textfield; -moz-appearance:textfield; }
.broll-time::-webkit-outer-spin-button,
.broll-time::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.broll-row__actions{ flex:0 0 auto; gap:var(--wa-space-xs); }
.broll-style{ flex:0 0 auto; max-width:148px; padding:var(--wa-space-2xs) var(--wa-space-xs); }
.broll-row__dur{ flex:0 0 auto; font-variant-numeric:tabular-nums; min-width:34px; }
.broll-row.is-drop{ border-color:var(--primary); box-shadow:0 0 0 2px var(--primary) inset; }
.broll-row.is-drop *{ pointer-events:none; }   /* let the drop land on the row, not a child */
.broll-row--warn{ border-color:var(--warning); }
.broll-row--warn .broll-time{ border-color:var(--warning); }
/* hover-zoom popover (suggestions / search results / used cutaways) */
.broll-hp{ position:fixed; z-index:9000; width:220px; aspect-ratio:9/16; border-radius:var(--r-md,10px);
  overflow:hidden; background:#000; border:1px solid var(--border);
  box-shadow:0 14px 40px rgba(0,0,0,.5); pointer-events:none; }
.broll-hp.hidden{ display:none; }
.broll-hp__media{ width:100%; height:100%; object-fit:cover; display:block; }
.broll-tile, .broll-row__thumb{ cursor:zoom-in; }
.broll-tile[draggable], .broll-row__thumb[draggable]{ cursor:grab; }
.broll-tile[draggable]:active, .broll-row__thumb[draggable]:active{ cursor:grabbing; }

/* --- b-roll cutaway layer in the phone preview --- */
.phone-frame__broll{ position:absolute; inset:0; z-index:2; opacity:0; pointer-events:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.phone-frame__broll.hidden{ display:none; }
.phone-frame__broll.is-on{ opacity:1; }
.phone-frame__broll-img, .phone-frame__broll-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.phone-frame__broll-img.hidden, .phone-frame__broll-vid.hidden{ display:none; }

/* B-roll picker: which library the search box queries. */
.broll-mode{ gap:var(--wa-space-3xs); padding:var(--wa-space-3xs); border-radius:var(--r-2); background:var(--surface-2); }
.broll-mode__chip{ padding:.25rem .55rem; border:0; border-radius:calc(var(--r-2) - 2px);
  background:transparent; color:var(--text-2); font-size:.75rem; cursor:pointer; }
/* the pressed state is drawn by the Web Awesome button itself (a dark pill): a background + shadow on the HOST showed as a square box behind it */

/* Per-sticker geometry: size / vertical position / frame. */
.broll-geom{ gap:.25rem; margin-top:.35rem; }
.broll-geom__row{ display:grid; grid-template-columns:4.2rem 1fr 2.6rem; align-items:center; gap:.4rem; }
.broll-geom__lbl{ white-space:nowrap; }
.broll-geom__range{ width:100%; accent-color:var(--accent); }
.broll-geom__val{ text-align:right; font-variant-numeric:tabular-nums; }
.broll-tile__type--svg{ font-size:.55rem; font-weight:700; letter-spacing:.04em;
  padding:0 .2rem; line-height:1.4; }

/* Floating SVG stickers — over the footage, never covering it. One box per
   sticker, centred horizontally, its CENTRE parked at top:<pos>%. Sizes are quoted
   against the frame's width (cqw) so the preview matches the render at any preview
   scale; the frame itself opens the container-query context. */
.phone-frame__svgs{ position:absolute; inset:0; z-index:3; pointer-events:none;
  container-type:inline-size; }
.phone-frame__svgs.hidden{ display:none; }
/* The static tilt lives on `transform` and the motion on the INDEPENDENT `scale`
   and `translate` properties, so the two compose instead of one clobbering the
   other — the same trick @keyframes titleLive uses. */
.phone-frame__svg{ position:absolute; transform:translate(-50%,-50%) rotate(-2deg);
  box-sizing:content-box; display:block; transform-origin:50% 50%;
  animation:svgPopIn .34s cubic-bezier(.22,1.4,.36,1) both,
            svgFloat 3.2s ease-in-out .34s infinite alternate; }
.phone-frame__svg-img{ display:block; width:100%; height:auto;
  filter:drop-shadow(0 .4cqw 1.2cqw rgba(0,0,0,.45)); }
/* pop in with an overshoot, exactly as the render's scale expression does */
@keyframes svgPopIn{
  from{ scale:.35; opacity:0; }
  62% { scale:1.10; opacity:1; }
  to  { scale:1;    opacity:1; }
}
/* then drift and grow slowly while it sits there (render: the creep to 1.06) */
@keyframes svgFloat{
  from{ scale:1;    translate:0 0; }
  to  { scale:1.06; translate:.35cqw -.6cqw; }
}
@media (prefers-reduced-motion: reduce){
  .phone-frame__svg{ animation:none; }
}

/* editable extrait transcript */
.clip-transcript__toggle{ width:100%; background:none; border:none; cursor:pointer; padding:0; color:var(--text); }
.clip-transcript__toggle .studio-transcript__chev{ transition:transform var(--dur); }
.clip-transcript__toggle .studio-transcript__chev.is-open{ transform:rotate(180deg); }
.clip-transcript__body{ margin-top:var(--s-3); }
.clip-transcript__body.hidden{ display:none; }
.clip-transcript__list{ display:flex; flex-direction:column; gap:var(--s-2); }
.clip-transcript__row{ display:grid; grid-template-columns:48px 1fr; gap:var(--s-2); align-items:start; }
.clip-transcript__time{ padding-top:var(--wa-space-xs); font-size:12px; }
.clip-transcript__text{ resize:none; overflow:hidden; min-height:34px; }
/* in a clip card, the transcript is now just a shortcut to the source card */
.clip-transcript__jump-row{ display:flex; }
/* cold-open preview grade — mirrors the render's eq/vignette treatment */
.phone-frame--coldopen .phone-frame__media,
.phone-frame--coldopen .phone-frame__poster,
.phone-frame--coldopen .phone-frame__blurpad{
  filter:saturate(.55) contrast(1.05) brightness(.96);
}
/* darkened edges — the render's `vignette` filter (a CSS filter can't do it) */
.phone-frame__cold-vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 85% 85% at 50% 50%,
    transparent 30%, rgba(0,0,0,.5) 65%, rgba(0,0,0,.85) 100%);
}
/* film grain — the render's temporal `noise` (SVG turbulence stand-in) */
.phone-frame__cold-grain{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.09;
  mix-blend-mode:overlay; background-size:130px 130px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* white flash popping just before the cut into the main clip (above captions) */
.phone-frame__cold-flash{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:#fff; opacity:0;
}

/* ---- DATES announcement overlay (mirrors the burned render sequence):
   dim scrim → program phrase pops in → dates reveal one by one, all in the
   teaser sticker language; the logo hides while the block owns the screen. */
.phone-frame__dates{ position:absolute; inset:0; z-index:4; pointer-events:none; }
/* the PANEL behind the phrase + dates: black at 50 %, rounded, inset 5 % each
   side, a crisp stroke in the announcement colour — mirrors subtitles.render_panel.
   It sits inside the text block, so it follows the block's vertical position. */
.phone-frame__dates-scrim{
  position:absolute; left:5cqw; right:5cqw; top:0; height:0; opacity:0;
  background:rgba(0,0,0,.5); border-radius:4cqw;
  box-shadow:inset 0 0 0 .45cqw var(--dt-color,#FFD400);
}
/* its glow, a neon tube — a near-white core, a tight bright halo, a wide soft
   bloom inside and out — whose opacity studio.js breathes on the render's curve
   (subtitles.render_panel_glow) */
.phone-frame__dates-glow{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.4;
  box-shadow:inset 0 0 0 .22cqw color-mix(in srgb, var(--dt-color,#FFD400) 35%, #fff),
             0 0 .9cqw .25cqw var(--dt-color,#FFD400),
             0 0 3.2cqw 1cqw color-mix(in srgb, var(--dt-color,#FFD400) 75%, transparent),
             inset 0 0 2.6cqw .8cqw color-mix(in srgb, var(--dt-color,#FFD400) 70%, transparent);
}
/* the block is the render's own bitmaps (/api/dates-preview), placed at the render's rows:
   studio.js sets each top / height as a % of the frame height */
.phone-frame__dates-inner{ position:absolute; inset:0; }
.phone-frame__dates-phrase{
  position:absolute; left:0; width:100%; height:auto; opacity:0; display:block;
}
.phone-frame__dates-phrase.is-in{ animation:dtIn .3s cubic-bezier(.2,1.2,.35,1) both; }
@keyframes dtIn{
  from{ opacity:0; transform:translateY(var(--dt-pop,3.1cqw)); }
  62%{ opacity:1; transform:translateY(calc(var(--dt-pop,3.1cqw) * -.15)); }
  to{ opacity:1; transform:translateY(0); }
}
/* ONE line SLOT: each date's bitmap sits on the same row; JS slides it through
   horizontally + floats it (opacity + translate), one replacing the other. */
.phone-frame__dates-list{ position:absolute; inset:0; }
.phone-frame__dates-line{ position:absolute; left:0; width:100%; opacity:0; will-change:transform,opacity; }
.phone-frame__dates-line img{ display:block; width:100%; height:100%; }

/* ---- Studio "create from scratch" launcher + source picker ---- */
.studio-start{ max-width:900px; margin:0 auto; padding:var(--s-6) 0; }
.studio-start__head{ text-align:center; margin:0 0 var(--s-2); }
.studio-start__sub{ text-align:center; margin:0 auto var(--s-6); max-width:50ch; }
.studio-start__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--s-4); }
.studio-start__card{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-2);
  text-align:left; padding:var(--s-5); border-radius:var(--r-lg);
  border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer;
  transition:border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.studio-start__card:hover:not(:disabled){ border-color:var(--primary); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.18); }
.studio-start__card:disabled, .studio-start__card.is-disabled{ opacity:.55; cursor:default; }
.studio-start__icon{
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:14px; color:var(--primary);
  background:color-mix(in srgb, var(--primary) 14%, transparent);
}
.studio-start__icon wa-icon{ font-size:30px; }
.studio-start__title{ margin:0; }
.studio-start__desc{ margin:0; }
.studio-start__hint{ margin-top:var(--s-1); }

.source-picker{ display:flex; flex-direction:column; gap:var(--s-3); }
.source-picker__search{ width:100%; }
.source-picker__scratch{ align-self:flex-start; }
.source-picker__grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  grid-auto-rows:max-content; align-items:start; align-content:start;
  gap:var(--s-3); padding:var(--wa-space-3xs);
}
.source-picker__grid .video-card{
  align-self:start; width:100%; min-width:0; min-height:210px; cursor:pointer;
}
.source-picker__grid .video-card__thumb{
  flex:0 0 auto; width:100%; min-height:100px;
}
.source-picker__more{ align-self:center; min-width:180px; }
.source-picker__more[hidden]{ display:none; }

/* ---- Story repost browser (paginated picker of published posts/reels) ---- */
.repost__filters{ align-self:flex-start; }
.repost__grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:var(--s-3); padding:var(--wa-space-3xs);
}
.repost__more{ display:flex; justify-content:center; padding:var(--s-2) 0 var(--s-4); }
.repost-card{
  display:block; padding:0; overflow:hidden; text-align:left;
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); cursor:pointer;
  transition:border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.repost-card:hover{ border-color:var(--primary); transform:translateY(-2px); }
.repost-card__thumb{ position:relative; display:block; width:100%; aspect-ratio:4/5; background:var(--surface-2) center/cover no-repeat; }
.repost-card__plat{
  position:absolute; top:6px; left:6px; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff;
}
.repost-card__plat--instagram{ background:linear-gradient(45deg,#f09433,#dc2743 50%,#bc1888); }
.repost-card__plat--facebook{ background:#1877f2; }
.repost-card__plat wa-icon{ font-size:13px; }
.repost-card__kind{
  position:absolute; top:6px; right:6px; font-size:10px; font-weight:700;
  padding:var(--wa-space-3xs) var(--wa-space-xs); border-radius:6px; background:rgba(0,0,0,.55); color:#fff;
}
.repost-card__cap{
  padding:var(--wa-space-xs) var(--wa-space-xs) var(--wa-space-xs); color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* per-card favourite (bookmark) toggle — pin a post/reel to the top row */
.repost-card__fav{
  position:absolute; bottom:6px; right:6px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; border:0; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; cursor:pointer;
  opacity:0; transition:opacity var(--dur), background var(--dur), color var(--dur), transform var(--dur);
}
.repost-card:hover .repost-card__fav, .repost-card__fav.is-on{ opacity:1; }
.repost-card__fav:hover{ transform:scale(1.1); background:rgba(0,0,0,.7); }
.repost-card__fav.is-on{ color:var(--accent-amber); }
.repost-card__fav wa-icon{ font-size:15px; }
/* pinned favourites row, always on top of the repost browser */
.repost-favs__head{ align-items:center; color:var(--muted); }
.repost-favs__head .icon{ color:var(--accent-amber); display:inline-flex; }

/* ---- story decorator (text/emoji/link chips + draggable IG mention) ---- */
.deco-layer{ position:absolute; inset:0; z-index:6; }
.deco-chip{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-weight:600; line-height:1.3;
  white-space:pre; text-align:center; cursor:grab; user-select:none;
  touch-action:none; max-width:94%;
}
.deco-chip:active{ cursor:grabbing; }
.deco-chip--text{ color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.55); }
.deco-chip--rich-text{ padding:0; max-width:none; line-height:1; text-shadow:none; }
.deco-chip--rich-text > canvas{ position:absolute; pointer-events:none; }
.deco-chip--rich-text[contenteditable="true"]{ white-space:pre-wrap; min-height:1.3em; }
.deco-chip--text > canvas,.deco-chip--list > canvas{display:block;pointer-events:none;}
.deco-chip--pill{ text-shadow:none; padding:.22em .45em; border-radius:.4em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.deco-chip--emoji{ line-height:1; text-shadow:none; }
.deco-chip--link{
  background:#fff; color:#111827; padding:.35em .7em; border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,.35); white-space:nowrap;
}
.deco-chip--mention{
  background:rgba(255,255,255,.92); color:#4338CA; font-style:italic;
  padding:.3em .6em; border-radius:.35em; white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
/* Instagram stickers (instagrapi) — drawn the way the app draws them. Instagram
   renders the real sticker at publish; these are WYSIWYG stand-ins (sizes in em). */
.deco-chip--ig{
  --ig-grad:linear-gradient(90deg,#FFD521 0%,#FDA319 25%,#FF3F9B 55%,#6505CA 80%,#1400C8 100%);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  background:#fff; color:#262626; font-weight:700; text-shadow:none; cursor:grab;
  white-space:nowrap; box-shadow:0 .1em .6em rgba(0,0,0,.22); line-height:1.2;
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
}
.deco-chip--ig.is-selected{ outline:2px solid #fff; outline-offset:3px; box-shadow:0 0 0 5px rgba(0,149,246,.55); }

.ig-ic{ display:inline-flex; }
.ig-grad{
  background:var(--ig-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.deco-chip--ig-mention, .deco-chip--ig-hashtag, .deco-chip--ig-location,
.deco-chip--ig-link{ padding:.55em 1.05em; border-radius:.7em; font-size-adjust:none; }
.deco-chip--ig-location .ig-ic{ color:#D62976; }
/* the link button as igapi.bake_link_pill draws it: white pill, violet round arrow, violet label */
.deco-chip--ig-link{ color:#5E17EB; letter-spacing:.01em; border-radius:999px; padding:.34em 1.1em .34em .34em; gap:.5em;
  font-family:Poppins,-apple-system,"Segoe UI",sans-serif; font-weight:700; }
.deco-chip--ig-link .ig-link__t{ color:#5E17EB; }
.ig-link__c{ display:inline-flex; align-items:center; justify-content:center; width:1.9em; height:1.9em; border-radius:50%;
  background:#5E17EB; color:#fff; font-size:.95em; }
/* poll — values from the app's resources: the question (22dp, white) sits on a coloured
   band (the sticker's `color`, black by default), the answers (14dp) are #EFEFEF pills with
   16dp corners, 8dp apart, on a white body with 20dp corners. 1em = the 14dp answer text. */
/* poll — calibrated on Instagram's own rendering (measured on a published story, checked against
   polls made in the app): 1em = the answer text; the sticker is 21.4em wide. Vertical metrics
   MUST stay in these proportions — the box measured here is the width/height sent to Instagram,
   which stretches its sticker to fill it (too flat = letters squashed wide). Answers are stacked
   and left-aligned, even with two. */
.deco-chip--ig-poll{
  display:block; width:21.4em; padding:0; border-radius:1.35em; overflow:hidden;
  white-space:normal; text-align:center; background:#fff;
}
.ig-poll__q{
  background:#000; color:#fff; font-weight:700; font-size:1.57em; line-height:1.44;
  padding:.573em .75em .6em; word-break:break-word;
}
/* Instagram sets the question in a CONDENSED bold: the same text fits ~1.3x more per line than
   a regular bold. Condensing it here keeps the line breaks — hence the height — identical. */
.ig-poll__q > span{ display:block; width:128%; margin-left:-14%; transform:scaleX(.78); transform-origin:50% 50%; }
.ig-poll__opts{ display:flex; gap:.62em; padding:1.156em 1.3em; }
.ig-poll__opts > span{
  flex:1; min-width:0; background:#EFEFEF; color:#262626; border-radius:1.1em; text-align:left;
  padding:1.145em 1.05em; font-weight:700; font-size:1em; line-height:1.2;
  overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap;
}
.ig-poll__opts > span.is-hint{ color:#C7C7C7; font-weight:600; }
.ig-poll__opts.is-multi{ flex-direction:column; }
.poll-swatch{ width:30px; height:30px; border-radius:50%; color:#fff; border:2px solid transparent; font-weight:700; }
.poll-swatch[aria-pressed="true"]{ border-color:#fff; box-shadow:0 0 0 2px var(--primary); }
.poll-swatch:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; }
/* shared publication — the post card: account row, then the picture */
.deco-chip--ig-media{
  display:block; width:24em; padding:0; border-radius:.9em; overflow:hidden; text-align:left; white-space:normal;
}
.ig-post__head{ display:flex; align-items:center; gap:.6em; padding:.7em .8em; }
.ig-post__av{
  width:1.9em; height:1.9em; border-radius:50%; padding:2px; flex:0 0 auto;
  background:linear-gradient(45deg,#FFD521,#FDA319,#FF3F9B,#6505CA,#1400C8);
  display:inline-flex; align-items:center; justify-content:center;
}
.ig-post__av > span{
  width:100%; height:100%; border-radius:50%; background:#fff; color:#262626;
  display:inline-flex; align-items:center; justify-content:center; font-size:.8em; font-weight:700;
}
.ig-post__user{ font-weight:700; font-size:.95em; color:#262626; }
.ig-post__img{
  width:100%; aspect-ratio:1/1; background:#DBDBDB center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; color:#737373; font-weight:600; font-size:.9em;
}
.ig-post__img.is-reel{ aspect-ratio:4/5; }
/* the account's clickable @mention follows the same look */
.deco-chip--mention{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  background:#fff; font-weight:700; font-style:normal; padding:.55em 1.05em; border-radius:.7em;
  box-shadow:0 .1em .6em rgba(0,0,0,.22); white-space:nowrap;
  --ig-grad:linear-gradient(90deg,#FFD521 0%,#FDA319 25%,#FF3F9B 55%,#6505CA 80%,#1400C8 100%);
}
/* Instagram story chrome over the preview (progress bar, account row, reply bar) */
.ig-chrome{
  position:absolute; inset:0; z-index:9; pointer-events:none; color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,0) 14%,rgba(0,0,0,0) 84%,rgba(0,0,0,.4));
}
.ig-chrome.hidden{ display:none; }
/* the app's covered bands: the top and bottom 250 px of the 1920 px story */
.ig-chrome__safe{ position:absolute; left:0; right:0; height:13%; }
.ig-chrome__safe--top{ top:0; border-bottom:1px dashed rgba(255,255,255,.45); }
.ig-chrome__safe--bottom{ bottom:0; border-top:1px dashed rgba(255,255,255,.45); }
.ig-chrome__bar{ position:absolute; left:3%; right:3%; top:1.2%; height:.18em; min-height:2px; border-radius:2px; background:rgba(255,255,255,.35); }
.ig-chrome__bar i{ display:block; width:38%; height:100%; border-radius:2px; background:#fff; }
.ig-chrome__top{ position:absolute; left:3%; right:3%; top:2.4%; display:flex; align-items:center; gap:.55em; font-size:1em; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.ig-chrome__av{ width:2.1em; height:2.1em; border-radius:50%; background:linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5); box-shadow:inset 0 0 0 .14em #000, inset 0 0 0 .2em #fff; }
.ig-chrome__user{ font-weight:700; }
.ig-chrome__time{ opacity:.75; font-size:.9em; }
.ig-chrome__dots{ margin-left:auto; letter-spacing:.05em; font-size:.9em; }
.ig-chrome__bottom{ position:absolute; left:3%; right:3%; bottom:2.2%; display:flex; align-items:center; gap:.7em; }
.ig-chrome__reply{ flex:1; border:1.5px solid rgba(255,255,255,.75); border-radius:999px; padding:.7em 1.1em; font-size:.95em; opacity:.95; }
.ig-chrome__ic{ font-size:1.5em; line-height:1; }

.deco-chip.is-selected{ outline:2px solid var(--primary); outline-offset:2px; }
.deco-chip[contenteditable="true"]{ cursor:text; outline:2px dashed var(--primary); }

/* accent bar + legibility scrim chips (AI story-builder vocabulary) */
.deco-chip--bar{ height:1.1%; min-height:4px; border-radius:999px; }
.deco-chip--scrim{
  left:0; right:0; transform:none; cursor:pointer; max-width:none;
  background:linear-gradient(0deg, rgba(5,7,10,.85), rgba(5,7,10,0));
}
.deco-chip--scrim[data-pos="top"]{ background:linear-gradient(180deg, rgba(5,7,10,.85), rgba(5,7,10,0)); }
.deco-chip--scrim.is-selected{ outline-offset:-2px; }
/* decorative shape accents (AI story-builder vocabulary) */
.deco-chip--shape{ max-width:none; }
.deco-chip--shape{ padding:0; line-height:0; background:none; border:0; }
.deco-chip--shape > svg{ display:block; width:100%; height:100%; pointer-events:none; }
.shape-picker{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:var(--wa-space-s); }
.shape-picker__item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--wa-space-s);
  padding:var(--wa-space-m) var(--wa-space-s); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2);
  color:var(--text); font-size:12px; text-align:center; }
.shape-picker__item > span:first-child{ width:76px; height:58px; display:grid; place-items:center; }
.shape-picker__item:hover{ border-color:var(--primary); }
.shape-picker__item:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.shape-editor{ flex:1 1 100%; min-width:0; display:flex; flex-direction:column; gap:var(--wa-space-s); }
.shape-fields{ display:grid; grid-template-columns:1fr; gap:var(--wa-space-s); }
.shape-field{ display:flex; align-items:center; gap:var(--wa-space-xs); min-width:0; }
.shape-field > span:first-child{ flex:0 0 118px; }
.shape-field :is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker)[type=range]{ flex:1 1 auto; min-width:50px; accent-color:var(--primary); }
.shape-field > span:last-child{ min-width:46px; text-align:right; }
.shape-editor :is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker)[type=color]{ flex:none; }
.shape-editor .input{ min-width:0; flex:1; }
.shape-details{ margin:0; }
.shape-details > summary{ cursor:pointer; font-size:13px; font-weight:600; }
.shape-details[open] > summary{ margin-bottom:var(--wa-space-s); }
.shape-details .shape-field{ margin-top:var(--wa-space-s); }
.text-content-label{display:flex;flex-direction:column;gap:var(--wa-space-xs);}
.text-editor .text-content{width:100%;resize:vertical;min-height:100px;}
.text-editor .text-details > .row,.text-editor .text-details > .input{margin-top:var(--wa-space-s);}
.text-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wa-space-xs);}
.text-preset{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--wa-space-s) var(--wa-space-xs);
  font-size:19px;min-height:55px;cursor:pointer;background:var(--surface-2);overflow:hidden;text-overflow:ellipsis;}
.text-preset:hover,.text-preset:focus-visible{border-color:var(--primary);outline:2px solid var(--primary);outline-offset:1px;}
@media(max-width:420px){ .shape-field > span:first-child{ flex-basis:95px; } }
/* blurred backdrop behind transformed / full-width story media */
.deco-media-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:blur(22px) brightness(.62); transform:scale(1.12); /* hide blur edges */
}
.post-preview__frame--story img,
.post-preview__frame--story video{ position:relative; z-index:1; transition:transform .15s ease; }
/* Canva-style selection handles (media + chips) */
.deco-handles{
  position:absolute; z-index:8; pointer-events:none;
  border:1.5px dashed var(--primary); border-radius:6px;
}
.deco-handles--media{ border-radius:12px; }
.deco-handle{
  position:absolute; width:12px; height:12px; border-radius:50%;
  background:#fff; border:2px solid var(--primary);
  pointer-events:auto; box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.deco-handle--nw{ left:-6px; top:-6px; cursor:nwse-resize; }
.deco-handle--ne{ right:-6px; top:-6px; cursor:nesw-resize; }
.deco-handle--sw{ left:-6px; bottom:-6px; cursor:nesw-resize; }
.deco-handle--se{ right:-6px; bottom:-6px; cursor:nwse-resize; }
.deco-handle--rot{
  left:50%; top:-30px; transform:translateX(-50%); cursor:grab;
  background:var(--primary); border-color:#fff;
}
.deco-handle--rot::after{
  content:""; position:absolute; left:50%; top:12px; width:1.5px; height:16px;
  background:var(--primary); transform:translateX(-50%);
}
/* autosave status chip (replaces the old Enregistrer button) */
.autosave-chip{ white-space:nowrap; transition:color .2s; }
.autosave-chip--ok{ color:var(--success-text); }
.autosave-chip--err{ color:var(--danger-text); }
/* AI magic-wand row */

/* 'card' layout preview: media floats as a rounded card over the gradient bg —
   mirrors reshare._card_base geometry (86% width, centre ~44%, max 62% height) */
.post-preview__frame.deco-card > img,
.post-preview__frame.deco-card > video{ object-fit:contain; }
.deco-inspector{ gap:var(--s-2); align-items:center; }

.deco-color{
  width:22px; height:22px; border-radius:50%; padding:0; cursor:pointer;
  border:2px solid var(--border-strong);
}
.deco-color.is-on{ border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-soft); }
.deco-tools .btn.is-active{ border-color:var(--primary); color:var(--primary); }

/* ----------------------------------------------------------------- 22. CLIP CARD (studio) */
.clip-list{ display:flex; flex-direction:column; gap:var(--s-4); }
.clip-card{
  display:grid; grid-template-columns:230px 1fr; gap:var(--s-5);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s-4); box-shadow:var(--shadow-sm); position:relative;
}
.clip-card .phone-wrap{ position:sticky; top:var(--s-4); align-self:start; display:flex; flex-direction:column; gap:var(--s-2); }
.clip-card .phone-frame{ width:100%; }
/* download button under the phone (render mode only) — full width, centred */
wa-dropdown.dl-menu{ align-self:stretch; display:flex; }
wa-dropdown.dl-menu.hidden{ display:none; }
.phone-wrap__download{ width:100%; }
.clip-card__body{ display:flex; flex-direction:column; gap:var(--s-3); min-width:0; }
.clip-card__head{ display:flex; flex-direction:column; gap:var(--wa-space-xs); min-width:0; }
/* the title row: fixed-size icon actions around a title that takes the rest (and wraps, never pushes them out) */
/* "Voir la transcription" closes the meta line, on its end edge */
.clip-card--collapsed .clip-transcript__jump{ display:none; }
/* collapse toggle: fold a clip card down to its header row (expanded by default) */
.clip-card__collapse{ transition:transform var(--dur); }
.clip-card--collapsed .clip-card__collapse{ transform:rotate(-90deg); }
/* doubled class so the single column beats the responsive `.clip-card` overrides */
.clip-card.clip-card--collapsed{ grid-template-columns:1fr; }
.clip-card--collapsed .phone-wrap{ display:none; }
.clip-card--collapsed .clip-card__body > :not(.clip-card__head){ display:none; }
/* keep the collapsed header on one tidy line: title truncates instead of wrapping */
.clip-card--collapsed .kit-head__title{ white-space:nowrap; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; }
.clip-card__num{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:20px; height:20px; border-radius:50%;
  background:var(--clip-color); color:#fff; font-size:12px; font-weight:700; line-height:1;
}
.reason-chip{
  display:flex; gap:var(--s-2); padding:var(--s-2) var(--s-3);
  background:var(--surface-2); border-radius:var(--r-md);
  font-size:13px; font-style:italic; color:var(--muted); line-height:1.5;
}
.reason-chip__quote{ font-family:var(--font-display); font-size:18px; line-height:1; color:var(--primary); flex:0 0 auto; }
.caption-editor{ display:flex; flex-direction:column; gap:var(--s-2); }
.caption-editor .textarea{ width:100%; }
.caption-editor__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap; }
.caption-editor__status{ display:flex; align-items:center; gap:var(--s-2); min-width:0; }
.caption-editor__status .clip-caption__count{ font-family:var(--font-mono); white-space:nowrap; }
.caption-editor__actions{ display:flex; align-items:center; gap:var(--s-2); }
/* caption "prompt actions" dropdown — reusable instructions for regeneration */
.prompt-actions{ position:relative; }
wa-badge.prompt-actions__count{ font-size:var(--wa-font-size-2xs); }
.prompt-actions__panel{
  position:absolute; bottom:calc(100% + 8px); right:0; z-index:60;
  width:min(360px, 86vw); padding:var(--s-4);
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; gap:var(--s-3);
}
.prompt-actions__title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.prompt-actions__rows{ display:flex; flex-direction:column; gap:var(--wa-space-3xs); max-height:300px; overflow-y:auto; margin:0 calc(-1 * var(--s-2)); }
.prompt-actions__item{
  display:flex; align-items:flex-start; gap:var(--s-3); cursor:pointer;
  padding:var(--s-2); border-radius:var(--r-sm);
}
.prompt-actions__item:hover{ background:var(--surface-2); }
.prompt-actions__item > :is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker)[type=checkbox]{ margin-top:var(--wa-space-2xs); flex:0 0 auto; }
.prompt-actions__text{ display:flex; flex-direction:column; gap:var(--wa-space-3xs); flex:1 1 auto; min-width:0; }
.prompt-actions__name{ font-size:13px; font-weight:600; color:var(--text); }
/* THREE LINES OF THE BODY, NO MORE — in both lists.
   A consigne's description is a paragraph and some run to a page (PROFILING),
   so the picker was asking you to scroll past one entry to reach the next, which
   is not a picker. The popover clamps its preview and carries the whole text on
   hover; the Réglages field, where the text is actually edited, caps at the same
   three lines and scrolls — so what you see there is still what you edit. */
.prompt-actions__desc{
  font-size:12px; line-height:1.35; color:var(--muted);
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3; line-clamp:3; overflow:hidden;
}
.prompt-actions__item .btn--icon{ flex:0 0 auto; opacity:0; transition:opacity var(--dur); }
.prompt-actions__item:hover .btn--icon{ opacity:.7; }
.prompt-actions__item .btn--icon:hover{ opacity:1; }
.prompt-actions__empty{ padding:var(--s-2); }
.prompt-actions__add{ display:flex; flex-direction:column; gap:var(--s-2); border-top:1px solid var(--border); padding-top:var(--s-3); }
.prompt-actions__add .input{ width:100%; min-width:0; }
.prompt-actions__add .btn{ align-self:flex-end; }
/* per-profile consignes editor (Réglages › Profils) */
.consignes-edit{ display:flex; flex-direction:column; gap:var(--s-3); }
.consignes-edit__rows{ display:flex; flex-direction:column; gap:var(--s-2); }
.consignes-edit__item{ display:flex; align-items:center; gap:var(--s-2); }
.consignes-edit__item > :is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker)[type=checkbox]{ flex:0 0 auto; }
.consignes-edit__fields{ display:flex; flex-direction:column; gap:var(--wa-space-2xs); flex:1 1 auto; min-width:0; }
.consignes-edit__item{ align-items:flex-start; }
.consignes-edit__desc.textarea{
  /* Exactly three lines: a whole multiple of the line box, so the fourth line
     is not sliced in half at the bottom edge. */
  font-size:13px; line-height:20px;
  /* Three line boxes and not a pixel more. Counted on the border box: three
     lines + the TOP padding + the two borders. The bottom padding is left out
     on purpose — a scroll container paints its overflow through its padding, so
     including it showed the top half of a fourth line sliced off at the edge. */
  min-height:0; max-height:calc(60px + var(--s-2) + 2px);
  padding-block:var(--s-2); resize:vertical;
}
.consignes-edit__title{ font-weight:600; }
.consignes-edit__add{ display:flex; flex-direction:column; gap:var(--s-2); border-top:1px solid var(--border); padding-top:var(--s-3); }
.consignes-edit__add .btn{ align-self:flex-end; }
/* crop tool modal — 9:16 window over the source frame */
.cropper{ display:flex; flex-direction:column; gap:var(--s-3); align-items:center; }
/* the stage IS the 9:16 output frame; the video moves/zooms under it and the
   uncovered area previews the render's blur-pad */
.cropper__frame{
  position:relative; aspect-ratio:9/16; height:min(56vh, 520px); max-width:100%;
  overflow:hidden; border-radius:var(--r-sm); background:#000;
  border:1px solid var(--border); cursor:grab; touch-action:none; user-select:none;
}
.cropper__frame:active{ cursor:grabbing; }
.cropper__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(10px) brightness(.45); transform:scale(1.12); pointer-events:none;
}
.cropper__fg{
  position:absolute; max-width:none; max-height:none; pointer-events:none;
  box-shadow:0 10px 34px rgba(0,0,0,.6); -webkit-user-drag:none;
}
.cropper__controls{ display:flex; align-items:center; gap:var(--s-2); width:100%; flex-wrap:wrap; }
.cropper__zoomgroup{ display:flex; align-items:center; gap:var(--s-2); margin-left:auto; min-width:0; }
.cropper__zoom{ width:150px; accent-color:var(--primary); }
/* tabular digits + a fixed box so the slider does not shift as the number grows */
.cropper__zoomval{ min-width:4.5ch; text-align:right; font-feature-settings:"tnum"; }
/* the grade section of the Image dialog */
.cropper__pane{ display:flex; flex-direction:column; gap:var(--s-3); align-items:center; min-width:0; }
.cropper__grade{ display:flex; flex-direction:column; gap:var(--s-3); width:100%; min-width:0; }
.cropper__grade .clip-panel__grid{ grid-template-columns:1fr; gap:var(--s-3); }
/* Side by side once there is room: the sliders sit beside the picture they
   change, instead of below a 9:16 stage that already fills the dialog. */
@media (min-width:720px){
  .cropper{ display:grid; grid-template-columns:minmax(0,auto) minmax(280px,1fr);
            align-items:start; gap:var(--s-5); }
  .cropper__grade{ position:sticky; top:0; }
}
/* the SVG <filter> the preview applies to the video: a definition, never drawn */
.phone-frame__gradedefs{ position:absolute; width:0; height:0; overflow:hidden; }
.autosave-pill{
  display:inline-flex; align-items:center; gap:var(--wa-space-2xs);
  font-size:12px; color:var(--success-text);
  opacity:0; transition:opacity var(--dur);
}
.autosave-pill.is-visible{ opacity:1; }
.autosave-pill wa-icon{ font-size:14px; }
.clip-card__actions{ display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }
/* render progress now lives inside the phone frame (.phone-frame__render) */

.clip-caption__count.is-warning{ color:var(--warning-text); }
.clip-caption__count.is-danger{ color:var(--danger-text); font-weight:600; }

/* studio header widget — title + duration over the generation controls */
.studio-head__bar{ margin:0 0 var(--s-3); gap:var(--s-2); }
.studio-head__back{ color:var(--muted); margin-left:calc(var(--s-3) * -1); }
.studio-head__back:hover{ color:var(--text); }
.studio-head__src-del{ color:var(--muted); }
.studio-head__src-del:hover{ color:var(--danger-text); background:var(--danger-soft); }
.studio-head__local-del{ color:var(--muted); }
.studio-head__local-del:hover{ color:var(--text); background:var(--surface-2); }
.studio-head__top{ margin-bottom:var(--s-4); }
.studio-head__top .t-h1{ margin:0; }
/* source preview player (streams before or after download) */
.studio-head__player-wrap{ margin-bottom:var(--s-4); }
.studio-head__player{
  display:block; width:100%; max-width:480px; aspect-ratio:16/9;
  background:#000; border:1px solid var(--border); border-radius:var(--r-lg);
  object-fit:contain;
}
.studio-controls{ display:flex; align-items:flex-end; gap:var(--s-5); flex-wrap:wrap; }
.studio-controls__field{ flex:0 0 auto; }
.studio-controls .spacer{ min-width:var(--s-4); }
@media (max-width:560px){
  .studio-controls{ align-items:stretch; }
  .studio-controls .btn--lg{ width:100%; justify-content:center; }
}

/* preview / render mode switch — sits under the phone frame, slides between halves */

/* preview phase selector (Réglages overlay preview) — N segments, no wrap */
.preview-phase{
  display:inline-flex; flex-wrap:nowrap; gap:var(--wa-space-3xs); padding:var(--wa-space-2xs);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-pill); user-select:none;
}
.preview-phase__btn{
  border:none; background:none; cursor:pointer; height:28px; padding:0 var(--wa-space-m);
  border-radius:var(--r-pill); font-size:12px; font-weight:600; color:var(--muted);
  white-space:nowrap; transition:color var(--dur-fast), background var(--dur-fast);
}
.preview-phase__btn.is-active{ background:var(--surface-3); color:var(--text); box-shadow:var(--shadow-xs); }

/* render-action row — the "Génère le MP4…" line + Rendre button */
.clip-render-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4); border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface-2);
}
/* render action sitting under the preview (narrow sticky column) — stack the hint
   above a full-width button so it stays readable in ~230px. */
.clip-render-row--under-preview{ flex-direction:column; align-items:stretch; gap:var(--s-2); padding:var(--s-3); text-align:center; }
.clip-render-row--under-preview .btn{ width:100%; justify-content:center; }

/* publish row — platforms + schedule/publish actions */
.clip-publish-row{
  display:flex; flex-direction:column; gap:var(--s-3);
  padding:var(--s-4); border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface-2);
}
.clip-publish-row__head{ gap:var(--s-3); }
.clip-publish-row__platforms{ gap:var(--s-2); }
.clip-publish-row__commit{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3); }
.clip-publish-row__when{ gap:var(--s-2); flex:0 0 auto; margin-right:auto; }
.clip-publish-row__when .input{ width:auto; }
.clip-publish-row__btns{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
@media (max-width:560px){
  .clip-publish-row__when{ margin-right:0; flex:1 1 100%; }
  .clip-publish-row__btns{ flex:1 1 100%; }
  .clip-publish-row__btns .btn{ flex:1 1 auto; justify-content:center; }
}

/* schedule picker — native datetime field + quick presets + live echo
   (core.js buildSchedulePicker; shared by the clip studio and the post studio).
   flex:1 1 100% makes it claim its own line inside .clip-publish-row__commit so
   the action buttons wrap neatly beneath it. */
.sched-picker{ display:flex; flex-direction:column; gap:var(--s-2); flex:1 1 100%; min-width:0; }
.sched-picker__input.input{ width:auto; align-self:flex-start; max-width:100%; }
.sched-picker__presets{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.sched-picker__foot{ display:block; min-height:18px; font-size:var(--wa-font-size-s); }
.sched-picker__foot wa-icon{ vertical-align:-.15em; margin-inline-end:var(--wa-space-2xs); color:var(--muted); }
.sched-picker__tz{ display:block; }
.sched-picker__resolved{ color:var(--text); font-variant-numeric:tabular-nums; }
.sched-picker__resolved.is-warn{ color:var(--danger); }

/* transcript editor hint (asterisk highlighting) */
.clip-transcript__hint{ margin:0 0 var(--s-2); line-height:1.5; }

/* slide-to-confirm */

/* corner picker (settings logo) */

/* dropzone (settings logo) */

/* ----------------------------------------------------------------- 23. VIEW-SPECIFIC LAYOUT */

/* ===== Accueil (home) ===== */

.view--home{
  width:100%;
  max-width:1280px;
  margin-inline:auto;
}

/* hero band: greeting + live stat chips, one flat surface */
.hero{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-6);
  padding:var(--s-6) var(--s-7);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--border);
}
.hero__text{ min-width:0; }
.hero__date{ color:var(--muted); margin-top:var(--s-1); text-transform:capitalize; }
.hero__stats{
  flex:0 1 auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(82px, 1fr));
  gap:var(--s-2);
}

/* app recap cards — one per creation/organisation app */

/* "En cours de génération" strip (hidden when idle) */

/* "Story du jour" suggestion */
.suggest__row{ display:flex; gap:var(--s-4); align-items:flex-start; }
.suggest__thumb{
  width:88px; aspect-ratio:9/16; flex:0 0 auto; object-fit:cover;
  border-radius:var(--r-md); background:var(--surface-3); border:1px solid var(--border);
}
.suggest__thumb--empty{ display:flex; align-items:center; justify-content:center; color:var(--faint); }
.suggest__text{ min-width:0; display:flex; flex-direction:column; gap:var(--s-1); }
.suggest__caption{ font-style:italic; line-height:1.4; }

/* upcoming (next scheduled posts) */

/* drafts strip (posts & stories) */

/* when the story suggestion can't load (Meta hors ligne), let À venir span full width */

@media (max-width:900px){
  .hero{ flex-direction:column; align-items:flex-start; }
  .hero__stats{ width:100%; }
}
@media (max-width:520px){
  .hero{ padding:var(--s-5); }
  .hero__stats{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); width:100%;
  }

}

/* library filter bar */
.filter-bar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) 0;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.filter-bar .input{ max-width:280px; }
.filter-bar__sentinel{ height:1px; }

/* library folder volet (collapsible directory tree) */
.library-recents{ min-width:0; margin-bottom:var(--s-5); }
.library-recents h2{ margin:0 0 var(--s-3); }
.library-recents__row{ display:flex; gap:var(--s-3); overflow-x:auto; padding:var(--wa-space-3xs) var(--wa-space-3xs) var(--wa-space-s); scrollbar-width:auto; }
wa-button.library-recent{ width:11.5rem; }
.library-body{ display:flex; gap:var(--s-4); align-items:flex-start; }
.library-main{ flex:1 1 auto; min-width:0; }
.library-volet{
  flex:0 0 248px; max-width:248px; align-self:stretch;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); padding:var(--s-3);
  position:sticky; top:64px; max-height:calc(100vh - 96px); overflow:auto;
}
.library-volet.hidden{ display:none; }
.library-volet__head{ display:flex; flex-direction:column; align-items:stretch; gap:var(--wa-space-xs); margin-bottom:var(--s-2); }
.library-volet__actions{ display:flex; flex-wrap:wrap; gap:var(--wa-space-2xs); }
.library-volet__actions wa-button{ flex:1 1 auto; }
.library-volet__actions wa-button::part(base){ white-space:nowrap; }
.vtree{ display:flex; flex-direction:column; }
.vtree__row{ display:flex; align-items:center; gap:var(--wa-space-2xs); border-radius:var(--r-sm); padding:var(--wa-space-2xs) var(--wa-space-2xs); }
.vtree__row:hover{ background:var(--surface-2); }
.vtree__row.is-off{ opacity:0.5; }
.vtree__twist{
  flex:0 0 18px; width:18px; height:18px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--muted); cursor:pointer;
}
.vtree__twist.is-leaf{ cursor:default; visibility:hidden; }
.vtree__twist wa-icon{ font-size:14px; }
.vtree__label{ display:flex; align-items:center; gap:var(--wa-space-xs); flex:1 1 auto; min-width:0; cursor:pointer; font-size:12px; }
.vtree__label :is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker){ flex:0 0 auto; }
.vtree__mag{
  flex:0 0 auto; width:20px; height:20px; padding:0; border-radius:var(--r-sm);
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--muted); cursor:pointer; opacity:.5;
}
.vtree__row:hover .vtree__mag{ opacity:.8; }
.vtree__mag:hover{ background:var(--surface-2); color:var(--text); opacity:1; }
.vtree__mag.is-on{ opacity:1; color:var(--primary); background:var(--primary-soft); }
.vtree__row.is-magnified{ background:var(--primary-soft); }
.library-focus{
  display:flex; align-items:center; gap:var(--wa-space-xs); margin-bottom:var(--s-3);
  padding:var(--wa-space-xs) var(--wa-space-s); border-radius:var(--r-md); font-size:12px;
  background:var(--primary-soft); color:var(--primary);
}
.library-focus.hidden{ display:none; }
.library-focus .btn{ margin-left:auto; }
.vtree__name{ flex:1 1 auto; min-width:0; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; }
.vtree__count{ flex:0 0 auto; color:var(--muted); font-size:10px; font-family:var(--font-mono); }
@media (max-width: 720px){
  .library-body{ flex-direction:column; }
  .library-volet{ flex-basis:auto; max-width:none; width:100%; position:static; max-height:320px; }
}

/* calendar */
.calendar{ display:grid; grid-template-columns:repeat(7, 1fr); gap:var(--wa-space-3xs); background:var(--border);
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.calendar__weekday{ background:var(--surface-2); padding:var(--s-2); text-align:center; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); }
.calendar__day{ background:var(--surface); min-height:96px; padding:var(--s-2); display:flex; flex-direction:column; gap:var(--s-1); }
.calendar__day--muted{ background:var(--surface-2); }
.calendar__day--muted .calendar__daynum{ color:var(--faint); }
.calendar__daynum{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.calendar__day.is-today .calendar__daynum{ color:var(--primary); font-weight:600;
  width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--primary); border-radius:50%; }

/* stories get a left accent bar so they read apart from feed posts/reels at a glance */

.calendar__more{ font-size:11px; color:var(--muted); cursor:pointer; }

.schedule-list{ display:flex; flex-direction:column; gap:var(--s-6); }
.kit-row.schedule-row--recurring{ border-style:dashed; }

/* recurring-story previews + management */
.recur-card__head{ display:flex; align-items:center; gap:var(--s-2); margin-bottom:var(--s-3); }
.recur-card__head .icon{ color:var(--primary); display:inline-flex; }
.recur-rules{ display:flex; flex-direction:column; gap:var(--s-2); }
.recur-rule{ display:flex; align-items:center; gap:var(--s-3); padding:var(--s-2);
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); }
.recur-rule.is-paused{ opacity:.62; }
.recur-rule__thumb{ width:34px; aspect-ratio:9/16; flex:0 0 auto; border-radius:var(--r-sm);
  background:var(--surface-3); overflow:hidden; }
.recur-rule__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:var(--wa-space-3xs); }
.recur-wd{ min-width:46px; justify-content:center; }
.calendar-toolbar{ justify-content:space-between; margin-bottom:var(--s-4); }
.calendar-toolbar__label{ min-width:180px; text-align:center; }
@media (max-width:520px){
  .calendar-toolbar{ gap:var(--s-2); }
  .calendar-toolbar__month{ gap:var(--s-1); }
  .calendar-toolbar__label{ min-width:112px; font-size:18px; }
}

/* settings */
.settings{ display:flex; flex-direction:column; gap:var(--s-6); max-width:720px; }
wa-tab-group.settings-workspace{ max-width:980px; --track-color:var(--wa-color-surface-border); }
wa-tab-group.settings-workspace::part(body){ padding-inline-start:var(--s-6); }
wa-tab-group.settings-workspace[placement=top]::part(body){ padding-inline-start:0; padding-top:var(--s-4); }
wa-tab-group.settings-workspace wa-tab-panel{ --padding:0; }
.settings-panel{ min-width:0; }
.settings-card{ /* compose .card */ }
.settings-card__head{ display:flex; flex-direction:column; gap:var(--s-1); margin-bottom:var(--s-4); }
.settings-card__help{ color:var(--muted); font-size:13px; }
/* ----------------------------------------------------------------- 24. CARD ENTRANCE STAGGER */
.stagger > *{ animation:cardRise var(--dur) var(--ease-out) both; }
.stagger > *:nth-child(1){ animation-delay:0ms; }
.stagger > *:nth-child(2){ animation-delay:40ms; }
.stagger > *:nth-child(3){ animation-delay:80ms; }
.stagger > *:nth-child(4){ animation-delay:120ms; }
.stagger > *:nth-child(5){ animation-delay:160ms; }
.stagger > *:nth-child(6){ animation-delay:200ms; }
.stagger > *:nth-child(7){ animation-delay:240ms; }
.stagger > *:nth-child(8){ animation-delay:280ms; }
.stagger > *:nth-child(9){ animation-delay:320ms; }
.stagger > *:nth-child(10){ animation-delay:360ms; }
.stagger > *:nth-child(11){ animation-delay:400ms; }
.stagger > *:nth-child(n+12){ animation-delay:440ms; }
@keyframes cardRise{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* ----------------------------------------------------------------- 25. RESPONSIVE */

/* tablet: 232px sidebar -> 76px icon rail (auto) */
@media (max-width:1024px){
:root{ --sidebar-w:76px; }
/* tooltip on hover */
/* already a rail; manual toggle is redundant here */
.grid--2{ grid-template-columns:1fr; }
}

/* stack two-column layouts below 900px */
@media (max-width:900px){
  .grid--2{ grid-template-columns:1fr; }
  .clip-card{ grid-template-columns:170px 1fr; }
  .phone-frame{ width:170px; }
}

/* phone: bottom tab bar */
@media (max-width:720px){
:root{ --sidebar-w:0px; }
/* 8 items now (Créer/Organiser/Système flattened) — let them share the width */
.clip-card{ grid-template-columns:1fr; }
/* stacked: the preview scrolls with the card (sticky, it would slide over the clip's header and settings) */
.clip-card .phone-wrap{ position:static; }
.phone-frame{ width:100%; max-width:200px; margin:0 auto; }
.grid--2{ grid-template-columns:1fr; }
}

@media (max-width:1024px){
  /* mobile keeps the bottom nav bar visible */
}

/* ---- (legacy) Canva-like Motion editor (canvas + timeline + layers + inspector) ---- */
.view--wide{ max-width:none; }

/* canvas */

/* layers panel */

.btn.is-off{ opacity:.4; }

/* transport */

/* timeline */

 .mg-tl__grip--r{ right:0; }

/* ----------------------------------------------------------------- 28. REDUCED MOTION */
/* ---------------------------------------------------------- Stockage view */
.view-head{ margin-bottom:var(--s-5); }
.view-head .t-body{ margin-top:var(--s-1); max-width:70ch; }
.stg-top{ display:grid; grid-template-columns:minmax(240px,300px) 1fr; gap:var(--s-4); margin-bottom:var(--s-4); }
@media (max-width:760px){ .stg-top{ grid-template-columns:1fr; } }
.stg-chart{ display:flex; align-items:center; justify-content:center; padding:var(--s-5); }
.stg-donut{ width:100%; max-width:240px; height:auto; }
.stg-donut__total{ fill:var(--text); font-size:22px; font-weight:700; font-family:var(--font-display); }
.stg-donut__sub{ fill:var(--muted); font-size:11px; }
.stg-side{ padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-4); }
.stg-reclaim{ display:flex; gap:var(--s-3); align-items:center; padding:var(--s-3);
  border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--primary-soft); }
.stg-reclaim__copy{ display:flex; flex:1 1 auto; min-width:0; flex-direction:column; gap:var(--wa-space-3xs); }
.stg-reclaim strong{ color:var(--primary); }
@media (max-width:520px){
  .stg-reclaim{ align-items:stretch; flex-direction:column; }
  .stg-reclaim .btn{ width:100%; }
}
.stg-disk__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--s-2); }
.stg-disk__track{ height:10px; border-radius:var(--r-pill); background:var(--surface-2); overflow:hidden; }
.stg-disk__fill{ height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-hover)); border-radius:var(--r-pill); }
.stg-legend{ display:flex; flex-direction:column; gap:var(--s-2); }
.stg-legend__row{ display:flex; align-items:center; gap:var(--s-2); font-size:13px; }
.stg-legend__dot{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.stg-legend__label{ flex:1 1 auto; min-width:0; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; }
.stg-legend__val{ color:var(--muted); font-size:12px; }
.stg-list{ display:flex; flex-direction:column; padding:var(--s-2) var(--s-4); }
.stg-item__dot{ width:var(--wa-space-s); height:var(--wa-space-s); border-radius:var(--wa-border-radius-s); flex:none; margin-top:var(--wa-space-2xs); }
.stg-item__bytes{ font-weight:var(--wa-font-weight-semibold); }
.stg-item__lock{ display:inline-flex; align-items:center; gap:var(--wa-space-2xs); }
/* smart-prune card: reversible cleanup + the auto-prune age setting */
.stg-smart{ margin-bottom:var(--s-4); }
.stg-smart__head{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-4); flex-wrap:wrap; padding:var(--s-4) 0 var(--s-2); border-bottom:1px solid var(--border); }
.stg-smart__head > div:first-child{ max-width:560px; }
.stg-smart__auto{ gap:var(--s-2); align-items:center; flex:0 0 auto; flex-wrap:wrap; } .stg-smart__auto > span{ white-space:nowrap; }
.stg-smart__days{ flex:none; width:6rem; }
@media (max-width:620px){
  .stg-smart__auto{
    display:grid; grid-template-columns:auto 64px minmax(0, 1fr);
    width:100%; flex:1 1 100%;
  }
  .stg-smart__days{ width:64px; }
  .stg-smart__auto .btn{ grid-column:1 / -1; width:100%; }
}

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

/* =====================================================================
   SHARED WORKSPACE LAYOUT
   Tonal elevation replaces boxed borders, actions use pill geometry, and
   every destination shares the same generous workspace rhythm.
   ===================================================================== */
body{
  background:var(--bg);
}

.view{ gap:clamp(var(--wa-space-l),2.4vw,var(--wa-space-2xl)); }
.view__head,.view-head{ align-items:flex-start; }
.t-display{ font-size:clamp(31px,3vw,44px); line-height:1.08; letter-spacing:-.04em; }
.t-h1{ font-size:clamp(26px,2.2vw,34px); line-height:1.12; letter-spacing:-.035em; }
.t-h2{ font-size:20px; letter-spacing:-.025em; }
.t-h3{ font-size:16px; }
.section-label,.t-label{ letter-spacing:.09em; }

.card{
  border-color:transparent;
  border-radius:var(--r-lg);
  padding:var(--s-5);
  background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.card--hover{
  transition:background var(--dur),box-shadow var(--dur),transform var(--dur);
}
.card--hover:hover{
  background:var(--surface-2);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

/* Unified creation destination */
.create-hub{ max-width:1240px; margin:0 auto; }
.create-hero{
  position:relative;
  min-height:230px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-8);
  padding:clamp(var(--wa-space-xl),4vw,var(--wa-space-3xl));
  overflow:hidden;
  border-radius:16px;
  background:var(--surface-2);
}
.create-hero::after{
  content:"";
  position:absolute;
  width:340px; height:340px;
  right:-160px; bottom:-210px;
  border:60px solid var(--border);
  border-radius:50%;
}
.create-hero__copy{ position:relative; z-index:1; max-width:720px; }
.create-hero__eyebrow{
  display:inline-flex; align-items:center; gap:var(--s-2);
  margin-bottom:var(--s-3);
  color:var(--primary);
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.create-hero__title{
  margin:0 0 var(--s-3);
  font-size:clamp(34px,4.2vw,58px);
  line-height:1.02;
  letter-spacing:-.052em;
}
.create-hero__desc{ max-width:64ch; color:var(--muted); font-size:15px; line-height:1.65; }
.create-hero__orb{
  position:relative; z-index:1;
  width:110px; height:110px; flex:0 0 110px;
  display:grid; place-items:center;
  border-radius:38px;
  color:var(--primary-text);
  background:var(--primary);
  box-shadow:0 22px 54px color-mix(in srgb, var(--primary) 20%, transparent);
  transform:rotate(7deg);
}
.create-hero__orb > span{ transform:rotate(-7deg); }
.create-workflows{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-4);
}
.create-workflow{
  position:relative;
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-radius:var(--r-xl);
  background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
  transition:transform var(--dur),background var(--dur),box-shadow var(--dur);
}
.create-workflow:hover{ transform:translateY(-3px); background:var(--surface-2); box-shadow:var(--shadow-md); }
.create-workflow--wide{ grid-column:1/-1; }
.create-workflow--primary{
  background:var(--surface);
}
.create-workflow--secondary .create-workflow__icon{ background:var(--tertiary-soft); color:var(--tertiary); }
.create-workflow--tertiary .create-workflow__icon{ background:var(--secondary-soft); color:var(--secondary); }
.create-workflow__launch{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--s-4);
  padding:var(--s-6) var(--s-6) var(--s-4);
  color:inherit;
  text-align:left;
}
.create-workflow__icon{
  width:58px; height:58px;
  display:grid; place-items:center;
  border-radius:20px;
  color:var(--primary);
  background:var(--primary-soft);
}
.create-workflow__copy{ display:flex; min-width:0; flex-direction:column; gap:var(--wa-space-2xs); }
.create-workflow__eyebrow{
  color:var(--primary);
  font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
.create-workflow__title{ font-size:21px; letter-spacing:-.025em; }
.create-workflow__desc{ max-width:68ch; color:var(--muted); font-size:13px; line-height:1.55; }
.create-workflow__arrow{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--surface-3);
}
.create-workflow__meta{ padding:0 var(--s-6); color:var(--faint); font-size:11px; }
.create-workflow__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  padding:var(--s-4) var(--s-6) var(--s-6);
}
.create-action{
  min-height:38px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:0 var(--s-4);
  border-radius:var(--r-pill);
  background:var(--surface-3);
  font-size:12px; font-weight:700;
}
.create-action:hover{ background:color-mix(in srgb,var(--surface-3) 78%,var(--primary)); }
.create-action--primary{ background:var(--primary); color:var(--primary-text); }
.create-section{ display:flex; flex-direction:column; gap:var(--s-4); }
.create-section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4); }
.create-recents{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-3); }

/* Specialist workspaces inherit the same tonal hierarchy */
.studio-head{
  padding:var(--s-5);
  border-radius:var(--r-xl);
  background:var(--surface);
}
.studio-head__bar{ margin-bottom:var(--s-3); }
.studio-head__player{ border-radius:var(--r-lg); }
.studio-controls{
  margin-top:var(--s-4);
  padding:var(--s-4);
  border-radius:var(--r-lg);
  background:var(--surface-2);
}
.studio-transcript,.studio-clips{ border-radius:var(--r-xl); }
.clip-card{ border-radius:var(--r-xl); }
.post-studio{
  grid-template-columns:minmax(320px,1fr) minmax(320px,420px);
  gap:clamp(var(--wa-space-l),3vw,var(--wa-space-2xl));
}
.post-preview{
  padding:var(--s-4);
  border-radius:var(--r-xl);
  background:var(--surface);
}
.post-preview__frame{ border:0; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
.post-controls{
  padding:var(--s-5);
  border-radius:var(--r-xl);
  background:var(--surface);
}
.studio-start{ max-width:1120px; width:100%; padding:0; }
.studio-start__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.studio-start__card{
  min-height:210px;
  padding:var(--s-6);
  border:0;
  border-radius:var(--r-xl);
  background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.studio-start__card:hover:not(:disabled){ border-color:transparent; background:var(--surface-2); box-shadow:var(--shadow-md); }
.studio-start__icon{ width:58px; height:58px; border-radius:20px; }
.repost-browser{
  padding:var(--s-5);
  border-radius:var(--r-xl);
  background:var(--surface);
}
.repost__grid{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:var(--s-4); }
.repost-card{ border:0; border-radius:var(--r-lg); background:var(--surface-2); }
.repost-card__thumb{ border-radius:var(--r-lg) var(--r-lg) 0 0; }
.repost-card__cap{ padding:var(--s-3); }
.filter-bar{
  top:-1px;
  padding:var(--s-3);
  border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter:blur(16px);
}
.library-volet{ border:0; border-radius:var(--r-lg); background:var(--surface); padding:var(--s-4); }
.video-card{ border-radius:var(--r-lg); overflow:hidden; }
.calendar{ border:0; border-radius:var(--r-xl); gap:var(--wa-space-3xs); background:var(--bg); }
.calendar__weekday{ background:var(--surface-2); }
.calendar__day{ background:var(--surface); min-height:112px; padding:var(--s-3); }
.calendar__day--muted{ background:color-mix(in srgb,var(--surface) 76%,var(--bg)); }
.settings-card{ border-radius:var(--r-xl); padding:var(--s-6); }
.stg-top .card,.stg-list{ border-radius:var(--r-xl); }
wa-tab-group.route-tabs{ align-self:flex-start; --track-color:transparent; }
wa-tab-group.route-tabs::part(body){ display:none; }

/* reference photos */

/* character spec sheets */

/* AI copy rows */

/* results */
/* the bands Instagram/Facebook overlay their own UI on */

/* saved projects */

@media (max-width:1024px){
:root{ --sidebar-w:80px; }
}
@media (max-width:860px){
  .create-workflows{ grid-template-columns:1fr; }
  .create-workflow--wide{ grid-column:auto; }
  .create-recents{ grid-template-columns:1fr; }
  .post-studio{ grid-template-columns:1fr; }
  .studio-start__grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
.create-hero{ min-height:0; padding:var(--s-6); border-radius:var(--r-xl); }
.create-hero__title{ font-size:36px; }
.create-hero__orb{ display:none; }
.create-workflow__launch{ grid-template-columns:auto minmax(0,1fr); padding:var(--s-5) var(--s-4) var(--s-3); }
.create-workflow__arrow{ display:none; }
.create-workflow__icon{ width:50px; height:50px; border-radius:17px; }
.create-workflow__title{ font-size:18px; }
.create-workflow__meta{ padding-inline:var(--s-4); }
.create-workflow__actions{ padding:var(--s-3) var(--s-4) var(--s-5); }
.create-section__head{ align-items:flex-start; }
.create-section__head .create-action{ display:none; }
.calendar__day{ min-height:72px; padding:var(--wa-space-xs); }
}

/* ---- clip thumbnail preview ------------------------------------------ */
.thumb-preview{ display:flex; flex-direction:column; gap:var(--s-2); align-items:center; }
.thumb-preview__img{
  width:100%; max-width:230px; aspect-ratio:9/16; object-fit:cover;
  border-radius:var(--r-sm); background:var(--surface-2);
  transition:opacity var(--dur);
}
.thumb-preview__img.is-loading{ opacity:.45; }

/* ---- the vignette that rides along with a publication ------------------ */
/* Shown where the decision is made. A button, because it opens the Vignette
   panel: the cover is the first thing anyone sees of a clip and the easiest
   thing to forget you never looked at. */
.clip-publish-row__thumb{
  flex:0 0 auto; padding:0; border:1px solid var(--border); background:var(--surface-2);
  border-radius:var(--r-sm); overflow:hidden; cursor:pointer; line-height:0;
  transition:border-color var(--dur), transform var(--dur);
}
.clip-publish-row__thumb img{ display:block; width:96px; aspect-ratio:9/16; object-fit:cover; }
/* roughly the height of the date picker, the quick chips and the buttons stacked
   beside it, so the row reads as one block rather than a stamp next to a form */
@media (max-width:560px){ .clip-publish-row__thumb img{ width:68px; } }
.clip-publish-row__thumb:hover{ border-color:var(--primary); transform:translateY(-1px); }
.clip-publish-row__thumb:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
/* the fields need ~16rem: narrower, they take their own line under the thumbnail instead of squeezing beside it */
.clip-publish-row__fields{ display:flex; flex-direction:column; gap:var(--s-2); flex:1 1 16rem; min-width:0; }
.clip-defaults{ flex-wrap:wrap; gap:var(--wa-space-xs); }
.clip-publish-row__fields .sched-picker{ flex:1 1 auto; }

.broll-hp.is-svg { background: transparent; border: none; box-shadow: none; border-radius: 0; }
.broll-hp.is-svg .broll-hp__media { object-fit: contain; }

/* start-from-scratch story: background chooser */
/* « Fond de la story » picker */
.gb{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:var(--s-5); align-items:start; }
.gb__left{ position:sticky; top:0; display:flex; flex-direction:column; gap:var(--wa-space-s); align-items:center; }
.gb__preview{ width:200px; aspect-ratio:9/16; border-radius:18px; border:1px solid color-mix(in srgb, var(--text) 14%, transparent); box-shadow:0 10px 28px rgba(0,0,0,.35); background:#111; }
.gb__hint{ margin:0; text-align:center; }
.gb__right{ display:flex; flex-direction:column; gap:var(--s-4); min-width:0; }
.gb__mode{ align-self:flex-start; }
.gb__sec, .gb__grad{ display:flex; flex-direction:column; gap:var(--wa-space-s); }
.gb__lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:600; color:var(--text-muted); }
.gb__presets{ display:flex; flex-wrap:wrap; gap:var(--wa-space-xs); }
.gb__chip{ width:34px; height:34px; border-radius:50%; padding:0; cursor:pointer; border:2px solid color-mix(in srgb, var(--text) 16%, transparent); }
.gb__chip--g{ width:30px; height:52px; border-radius:9px; overflow:hidden; }
.gb__chip-cv{ display:block; width:100%; height:100%; }
.gb__chip:hover{ border-color:color-mix(in srgb, var(--text) 45%, transparent); }
.gb__chip.is-on{ border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
.gb__colors{ display:flex; flex-direction:column; gap:var(--wa-space-xs); }
.gb__color{ display:flex; align-items:center; gap:var(--wa-space-s); }
.gb__ci{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; background:color-mix(in srgb, var(--text) 12%, transparent); color:var(--text-muted); }
.gb__color wa-color-picker{ flex:none; }
.gb__hex{ width:96px; height:34px; padding:0 var(--wa-space-s); border-radius:9px; border:1px solid color-mix(in srgb, var(--text) 14%, transparent); background:color-mix(in srgb, var(--text) 6%, transparent);
  color:var(--text); font:inherit; font-size:13px; font-variant-numeric:tabular-nums; text-transform:uppercase; }
.gb__hex:focus{ outline:2px solid var(--primary); outline-offset:1px; }
.gb__x{ width:28px; height:28px; border-radius:50%; border:0; cursor:pointer; background:transparent; color:var(--text-muted); font-size:18px; line-height:1; }
.gb__x:hover{ background:color-mix(in srgb, var(--text) 10%, transparent); color:var(--text); }
.gb__ctools{ display:flex; gap:var(--wa-space-xs); flex-wrap:wrap; }
.gb__types{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:var(--wa-space-xs); }
.gb__type{ display:flex; flex-direction:column; align-items:center; gap:var(--wa-space-xs); padding:var(--wa-space-xs) var(--wa-space-2xs) var(--wa-space-xs); border-radius:12px; cursor:pointer; font:inherit; font-size:11.5px; color:var(--text);
  border:1px solid color-mix(in srgb, var(--text) 12%, transparent); background:color-mix(in srgb, var(--text) 5%, transparent); }
.gb__type canvas{ width:36px; height:64px; border-radius:7px; display:block; }
.gb__type:hover{ background:color-mix(in srgb, var(--text) 10%, transparent); }
.gb__type.is-on{ border-color:var(--primary); color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, transparent); }
.gb__angle, .gb__pos{ display:flex; align-items:center; gap:var(--wa-space-m); flex-wrap:wrap; }
.gb__angle[hidden], .gb__pos[hidden], .gb__grad[hidden]{ display:none; }
.gb__dirs, .gb__padgrid{ display:grid; grid-template-columns:repeat(3, 28px); gap:var(--wa-space-2xs); }
.gb__dir, .gb__cell{ width:28px; height:28px; border-radius:8px; border:1px solid color-mix(in srgb, var(--text) 14%, transparent); background:color-mix(in srgb, var(--text) 5%, transparent); color:var(--text); cursor:pointer; font:inherit; font-size:14px; padding:0; }
.gb__dir:disabled{ opacity:.25; cursor:default; }
.gb__dir:hover:not(:disabled), .gb__cell:hover{ background:color-mix(in srgb, var(--text) 12%, transparent); }
.gb__dir.is-on, .gb__cell.is-on{ border-color:var(--primary); background:var(--primary); color:var(--primary-text); }
.gb__rng{ display:flex; align-items:center; gap:var(--wa-space-s); flex:1; min-width:160px; }
.gb__rng :is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker){ flex:1; accent-color:var(--primary); }
.gb__val{ width:42px; text-align:right; font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--text-muted); }
@media (max-width:700px){ .gb{ grid-template-columns:1fr; } .gb__left{ position:static; } .gb__preview{ width:140px; } .gb__types{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.blank-base{ display:flex; flex-direction:column; gap:var(--s-3); }
.blank-base__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:var(--s-3); }
.blank-base__sw{ aspect-ratio:9/16; border-radius:var(--r-md,10px); border:2px solid var(--border); cursor:pointer; padding:0; }
.blank-base__sw.is-on{ border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 35%,transparent); }
.blank-base__custom{ display:flex; align-items:center; gap:var(--s-2); }

/* « Télécharger » choice: final video / source only */

/* the clip's accent colour: a plain circle in the card header (the native picker opens on click) */
.clip-card__accent{
  --accent:#FFD400; --accent-ink:#111; position:relative; flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--accent); cursor:pointer; margin:0 var(--s-1);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--accent) 55%, transparent);
  transition:transform var(--dur);
}
.clip-card__accent-num{ color:var(--accent-ink); font-size:13px; font-weight:800; line-height:1; pointer-events:none; }
.clip-card__accent:hover{ transform:scale(1.1); }
.clip-card__accent-input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; border:0; }

.clip-card--flash{ animation:clipFlash 2.2s ease-out; }
@keyframes clipFlash{ 0%{ box-shadow:0 0 0 3px var(--primary); } 100%{ box-shadow:0 0 0 3px transparent; } }

.clip-card__title-link{ cursor:pointer; }
.clip-card__title-link:hover{ text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); text-underline-offset:3px; }

/* link sticker, "zone seule": a dashed tap area (nothing is drawn at publish) */
.deco-chip--ig.is-zone{
  display:flex; align-items:center; justify-content:center; max-width:none; box-sizing:border-box;
  background:rgba(255,255,255,.10); box-shadow:none; color:#fff; border-radius:.5em;
  outline:2px dashed rgba(255,255,255,.9); outline-offset:-2px; padding:0;
}
.ig-zone__t{ font-size:.62em; font-weight:700; letter-spacing:.04em; text-transform:uppercase; text-shadow:0 1px 3px rgba(0,0,0,.6); }

/* saved-story card: quick publish + delete on the status row */
.hub-actions{ display:inline-flex; align-items:center; gap:var(--s-2); margin-left:auto; }
.hub-actions .video-card__del{ position:static; }

/* =====================================================================
   STORY BUILDER — side panel (cards · element tiles · selection · publish)
   ===================================================================== */
.post-studio{ grid-template-columns:minmax(300px,1fr) minmax(380px,480px); }
.post-preview{ position:sticky; top:var(--s-4); align-self:start; }
.post-controls.sb-stack{ padding:var(--s-4); gap:var(--s-3); background:var(--surface); }
.sb-stack{ display:flex; flex-direction:column; gap:var(--s-3); min-width:0; }
.sb-stack.hidden{ display:none; }

.sb-card{
  display:flex; flex-direction:column; gap:var(--s-3); min-width:0;
  padding:var(--s-4); border-radius:var(--r-lg);
  background:var(--surface-2); border:1px solid var(--border);
}
.sb-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3); }
.sb-card__titles{ min-width:0; }
.sb-card__title{ margin:0; display:flex; align-items:center; gap:var(--wa-space-xs); font-size:14px; font-weight:700; letter-spacing:.01em; color:var(--text); }
.sb-card__title .sb-svg{ color:var(--primary); display:inline-flex; }
.sb-card__sub{ margin:var(--wa-space-2xs) 0 0; font-size:12px; line-height:1.4; color:var(--muted); }
.sb-card__body{ display:flex; flex-direction:column; gap:var(--s-3); min-width:0; }
.sb-card--ai{
  background:var(--surface-2);
  border-color:color-mix(in srgb, var(--primary) 32%, var(--border));
}
.sb-card--publish{ border-color:color-mix(in srgb, var(--primary) 22%, var(--border)); }

.sb-field{ display:flex; flex-direction:column; gap:var(--s-2); }
.sb-field__l{ font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }

/* element tiles */
.sb-status{
  align-self:flex-start; font-size:12px; line-height:1.35; color:var(--muted);
  padding:var(--wa-space-xs) var(--wa-space-s); border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border);
}
.sb-status:empty{ display:none; }
.sb-status.is-ok{ color:var(--success-text, var(--primary)); border-color:color-mix(in srgb, var(--primary) 35%, var(--border)); }

/* switch (Aperçu Instagram) */
.deco-inspector{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); padding:var(--s-3);
  border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border);
}
.deco-inspector.hidden{ display:none; }
.deco-inspector .input{ flex:1 1 100%; min-width:0; }
.deco-inspector .sb-ins-wand{ flex:1 1 100%; justify-content:center; }
.sb-wa-builder{ flex:1 1 100%; min-width:0; }
.sb-wa-builder summary{ cursor:pointer; font-weight:600; padding:var(--wa-space-xs) 0; }
.sb-wa-builder__fields{ display:grid; gap:var(--wa-space-s); padding:var(--wa-space-xs) 0; }
.sb-wa-builder__fields label{ display:grid; gap:var(--wa-space-xs); min-width:0; }
.sb-wa-builder__fields .input{ width:100%; min-width:0; box-sizing:border-box; }
.sb-wa-builder__fields :is(textarea,wa-textarea){ resize:vertical; }
.sb-wa-builder__fields .btn{ justify-self:start; }

.deco-inspector > .t-caption:first-child{
  flex:0 0 100%; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary);
}

/* publish */
.sb-actions{ display:grid; grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr)); gap:var(--s-2); }
.sb-act{ font-weight:var(--wa-font-weight-bold); }
.sb-act::part(base){ min-height:44px; }
.sb-act--test{ width:100%; border:1px dashed var(--border-strong, var(--border)); font-weight:600; }
.sb-hint{ margin:0; font-size:12px; line-height:1.5; color:var(--muted); }
@media (max-width:900px){ .post-studio{ grid-template-columns:1fr; } .post-preview{ position:static; } }
@media (max-width:480px){ .sb-actions{ grid-template-columns:1fr; } }

/* link sticker, "bouton animé": the renderer's PNG, moved by the same curves as the bake */
.deco-chip--ig.is-anim{
  display:block; background:none; box-shadow:none; padding:0; border-radius:0; max-width:none;
  overflow:visible; box-sizing:border-box;
}
.deco-chip--ig.is-anim.is-selected{ outline:2px dashed rgba(255,255,255,.95); outline-offset:2px; box-shadow:none; }
.lb-mover{ position:absolute; inset:0; transform-origin:50% 50%; will-change:transform,opacity; pointer-events:none; }
.lb-cursor{ position:absolute; left:50%; top:50%; opacity:0; pointer-events:none; will-change:transform,opacity; }
.lb-img, .lb-shine{ position:absolute; display:block; max-width:none; user-select:none; -webkit-user-drag:none; }
.lb-shine{ -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; opacity:0; }
.lb-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:var(--wa-space-xs) var(--wa-space-m); width:100%; }
.lb-row{ display:flex; align-items:center; gap:var(--wa-space-xs); min-width:0; }
.lb-row__l{ font-size:.78rem; font-weight:600; opacity:.8; flex:0 0 auto; min-width:92px; }
.lb-row :is(select,wa-select), .lb-row :is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker)[type="text"], .lb-row .input{ flex:1 1 auto; min-width:0; }
.lb-row :is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker)[type="range"]{ flex:1 1 auto; min-width:0; }
.lb-row__v{ flex:0 0 auto; min-width:44px; text-align:right; }
.lb-color{ width:38px; height:28px; padding:0; border:1px solid rgba(127,127,127,.35); border-radius:8px; background:none; cursor:pointer; }

/* snap to grid: faint thirds while dragging, bright line on what was caught */
.sb-switches{ display:inline-flex; align-items:center; gap:var(--wa-space-m); flex-wrap:wrap; justify-content:flex-end; }
.deco-guides{ position:absolute; inset:0; pointer-events:none; z-index:6; opacity:0; transition:opacity .12s ease; }
.deco-guides.is-on{ opacity:1; }
.deco-guides .g{ position:absolute; display:block; background:rgba(255,255,255,.28); }
.deco-guides .g--v{ top:0; bottom:0; width:1px; transform:translateX(-.5px); }
.deco-guides .g--h{ left:0; right:0; height:1px; transform:translateY(-.5px); }
.deco-guides .g--c{ background:rgba(255,255,255,.42); }
.deco-guides .g--hit{ background:#FF2E93; box-shadow:0 0 0 .5px rgba(255,46,147,.45), 0 0 6px rgba(255,46,147,.7); display:none; }

/* Navigation and story workspace: persistent context, readable actions. */

:where(a,:is(button,wa-button),:is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker),:is(select,wa-select),:is(textarea,wa-textarea),[tabindex]):focus-visible { outline:3px solid var(--primary); outline-offset:3px; }

.saved-posts-actions{ display:flex; gap:var(--wa-space-xs); flex-wrap:wrap; }
.saved-posts-toolbar{
  display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-4);
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--shadow-xs);
}
.saved-posts-filters{ display:grid; grid-template-columns:minmax(220px,1fr) 180px 180px; gap:var(--wa-space-s); }
.saved-posts-toolbar__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); min-height:28px; }
.saved-posts-summary{ color:var(--muted); font-size:12px; line-height:1.5; }
.saved-posts-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  align-items:stretch; gap:var(--s-6); margin-top:var(--s-2);
}
.saved-post-card{
  min-width:0; height:100%; padding:0; gap:0; overflow:hidden; cursor:default;
  background:var(--surface);
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur) var(--ease-out),border-color var(--dur-fast),box-shadow var(--dur) var(--ease-out);
}
.saved-post-card:hover{
  transform:translateY(-3px); border-color:var(--border-strong); box-shadow:var(--shadow-md);
}
.saved-post-card__media{
  isolation:isolate; position:relative; width:100%; max-height:none !important; aspect-ratio:4/3 !important;
  padding:0 !important; border-radius:0; background:var(--surface-2);
}
.saved-post-card__media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(3,8,6,.38) 0%,transparent 30%,transparent 66%,rgba(3,8,6,.38) 100%);
}
.saved-post-card__backdrop{
  position:absolute; z-index:0; inset:-18px; background-position:center; background-size:cover;
  filter:blur(20px) saturate(.8); opacity:.46; transform:scale(1.08);
}
.saved-post-card__image,.saved-post-card__media > video{
  position:relative; z-index:1; width:100% !important; height:100% !important;
  object-fit:contain !important; transition:transform var(--dur-slow) var(--ease-out);
}
.saved-post-card:hover .saved-post-card__image,.saved-post-card:hover .saved-post-card__media > video{ transform:scale(1.018); }
.saved-post-card__badges{
  position:absolute; z-index:3; top:var(--s-3); left:var(--s-3);
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--wa-space-xs);
}
.saved-post-card__badges .badge{
  min-height:24px; padding-inline:var(--wa-space-xs); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 3px 12px rgba(0,0,0,.24); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.saved-post-card__open-cue{
  position:absolute; z-index:3; right:var(--s-3); bottom:var(--s-3);
  display:inline-flex; align-items:center; gap:var(--wa-space-xs); min-height:30px; padding:0 var(--wa-space-s);
  border-radius:var(--r-pill); background:rgba(8,15,12,.8); color:#fff;
  font-size:11px; font-weight:600; opacity:0; transform:translateY(4px);
  transition:opacity var(--dur-fast),transform var(--dur-fast); backdrop-filter:blur(8px);
}
.saved-post-card:hover .saved-post-card__open-cue,.saved-post-card__media:focus-visible .saved-post-card__open-cue{
  opacity:1; transform:none;
}
.saved-post-card__body{ flex:1 1 auto; gap:var(--s-3); padding:var(--s-4); }
.saved-post-card .video-card__title{ min-height:44px; font-size:16px; line-height:1.4; }
.saved-post-card .video-card__title a{ display:block; }
.saved-post-card .video-card__title a:hover{ color:var(--primary); }
.saved-post-card__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--wa-space-xs); margin-top:calc(-1 * var(--wa-space-2xs));
  color:var(--muted); font-size:11px; line-height:1.45;
}
.saved-post-card__meta span+span::before{ content:"·"; margin-right:var(--wa-space-xs); color:var(--faint); }
.saved-post-card .hub-actions{
  width:100%; margin:0; margin-top:auto; display:flex; flex-direction:column; align-items:stretch; gap:var(--s-3);
}
.saved-post-card__primary-actions{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--s-2); }
.saved-post-card__primary-actions .btn{ width:100%; justify-content:center; min-width:0; }
.saved-post-card__utilities{
  display:flex; align-items:center; min-height:30px; padding-top:var(--s-3); border-top:1px solid var(--border);
}
.saved-post-card__duplicate{ color:var(--muted); }
.saved-post-card__delete{ position:static; margin-left:auto; background:transparent; }
.saved-posts-empty{ grid-column:1/-1; }

.dash-hero { border-color:color-mix(in srgb,var(--primary) 35%,var(--border)); background:var(--surface); }
.dash-hero__title { max-width:18ch; font-size:clamp(30px,3.5vw,48px); }
.dash-work__media img { object-fit:contain; }

@media (max-width:720px) {
.saved-posts-toolbar{ padding:var(--s-3); }
.saved-posts-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
.saved-posts-filters :is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker) { grid-column:1 / -1; }
.saved-posts-toolbar__foot{ align-items:flex-start; }
.saved-posts-grid { grid-template-columns:1fr; gap:var(--s-4); }
.saved-post-card__media{ aspect-ratio:16/10 !important; }
.saved-post-card .video-card__title{ min-height:0; }
}

@media (prefers-reduced-motion:reduce) {
  .view-enter,.stagger > * { animation:none; }
}

/* ===================== Calendrier v2: published history + schedule + ideas ===================== */
.cal-filters{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-4); }
.cal-filters__group{ gap:var(--s-2); }
.cal-filters__sep{ width:1px; height:22px; background:var(--border); margin:0 var(--s-1); }
.cal-filters__spacer{ flex:1 1 auto; }
.cal-src{ display:inline-flex; align-items:center; gap:var(--wa-space-xs); }
.cal-src__dot{ width:8px; height:8px; border-radius:50%; background:var(--faint); }
.cal-src--history .cal-src__dot{ background:#C77DFF; }
.cal-src--cmbot .cal-src__dot{ background:var(--primary); }
.cal-src--ideas .cal-src__dot{ background:#E9B949; }
.cal-src:not(.is-active){ opacity:.55; }
.cal-sync{ color:var(--muted); display:inline-flex; align-items:center; gap:var(--wa-space-xs); }
.cal-sync::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--success); }
.cal-sync.is-on::before{ background:var(--primary); animation:opsPulse 1.2s ease-in-out infinite; }
.cal-sync.is-warn::before{ background:var(--warning); }

.cal-grid .calendar__day{ min-height:128px; cursor:pointer; transition:background .12s ease; gap:var(--wa-space-xs); }
.cal-grid .calendar__day:hover{ background:color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.cal-day.is-past:not(.calendar__day--muted) .calendar__daynum{ opacity:.75; }
.cal-day__head{ display:flex; align-items:center; justify-content:space-between; }
.cal-day__add{ width:22px; height:22px; display:grid; place-items:center; border-radius:6px; color:var(--muted);
  opacity:0; transition:opacity .12s ease, background .12s ease; }
.cal-day:hover .cal-day__add{ opacity:1; }
.cal-day__add:hover{ background:var(--surface-3, var(--surface-2)); color:var(--text); }
.cal-strip{ display:flex; flex-wrap:wrap; gap:var(--wa-space-2xs); align-items:flex-end; }
.cal-thumb{ position:relative; flex:0 0 auto; padding:0; border:0; border-radius:5px; overflow:hidden; background:var(--surface-2);
  cursor:pointer; box-shadow:0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); transition:transform .12s ease, box-shadow .12s ease; }
.cal-thumb:hover{ transform:translateY(-1px); box-shadow:0 0 0 1.5px var(--text); z-index:1; }
.cal-thumb--story{ width:26px; height:46px; }
.cal-thumb--post, .cal-thumb--reel{ width:40px; height:40px; }
.cal-thumb--reel{ height:46px; width:30px; }
.cal-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cal-thumb__ph{ width:100%; height:100%; display:grid; place-items:center; color:var(--faint); }
.cal-thumb__play{ position:absolute; right:3px; top:3px; width:0; height:0; border-style:solid; border-width:4px 0 4px 6px;
  border-color:transparent transparent transparent #fff; filter:drop-shadow(0 0 1px rgba(0,0,0,.8)); }
.cal-thumb.is-ours{ box-shadow:0 0 0 1px var(--primary); }
.cal-thumb--sched{ box-shadow:0 0 0 1.5px var(--primary); }
.cal-thumb--sched.is-pending img, .cal-thumb--sched.is-recurring img{ opacity:.6; }
.cal-thumb--sched.is-pending{ box-shadow:0 0 0 1.5px var(--primary); outline:1px dashed var(--primary); outline-offset:1px; }
.cal-thumb--sched.is-failed{ box-shadow:0 0 0 1.5px var(--danger); }
.cal-thumb--sched.is-recurring{ box-shadow:0 0 0 1px var(--faint); outline:1px dashed var(--faint); outline-offset:1px; }
.cal-thumb__time{ position:absolute; left:0; right:0; bottom:0; font:600 8px/1.4 var(--font-mono); color:#fff; text-align:center;
  background:linear-gradient(transparent, rgba(0,0,0,.75)); padding-top:var(--wa-space-2xs); }
.cal-more{ font-size:11px; color:var(--muted); align-self:center; }
.cal-more--ideas{ align-self:flex-start; }
.cal-idea{ display:flex; align-items:center; gap:var(--wa-space-2xs); width:100%; min-width:0; padding:var(--wa-space-2xs) var(--wa-space-xs); border-radius:6px; text-align:left;
  background:color-mix(in srgb, #E9B949 16%, transparent); color:var(--text); font-size:11px; cursor:pointer; }
.cal-idea:hover{ background:color-mix(in srgb, #E9B949 26%, transparent); }
.cal-idea.is-done{ opacity:.5; text-decoration:line-through; }
.cal-idea__kind{ flex:0 0 auto; width:15px; height:15px; border-radius:4px; display:inline-grid; place-items:center; vertical-align:text-bottom; margin-inline-end:var(--wa-space-2xs);
  background:#E9B949; color:#1a1405; font:700 9px/1 var(--font-ui); }
.cal-idea__t{ min-width:0; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; }

.cal-panel{ display:flex; flex-direction:column; gap:var(--s-5); }
.cal-panel__sec{ display:flex; flex-direction:column; gap:var(--s-3); }
.cal-panel__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:var(--s-2); }
.cal-card{ display:flex; flex-direction:column; gap:var(--wa-space-2xs); padding:0; border:0; background:none; text-align:left; cursor:pointer; color:inherit; }
.cal-card__media{ position:relative; border-radius:8px; overflow:hidden; background:var(--surface-2); aspect-ratio:9/16;
  box-shadow:0 0 0 1px var(--border); }
.cal-card--post .cal-card__media{ aspect-ratio:1; }
.cal-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.cal-card:hover .cal-card__media{ box-shadow:0 0 0 2px var(--text); }
.cal-card__meta{ display:flex; align-items:center; gap:var(--wa-space-2xs); font-size:11px; color:var(--muted); }
.cal-card__kind{ margin-left:auto; }

 .cal-plat--facebook{ color:var(--facebook); }

.cal-ideas{ display:flex; flex-direction:column; gap:var(--s-2); }
.cal-idea-row.is-done{ opacity:.55; }
.cal-ai{ color:#E9B949; display:inline-flex; vertical-align:middle; margin-inline-start:var(--wa-space-2xs); }
.cal-ideas__add{ display:flex; gap:var(--s-2); }
.cal-ideas__add .input{ flex:1 1 auto; min-width:0; }
.cal-ideas__add .cal-kind{ flex:0 0 92px; }
.cal-suggest{ display:flex; flex-direction:column; gap:var(--s-2); }
.cal-suggest__row{ display:flex; gap:var(--s-3); align-items:flex-start; padding:var(--s-3); border-radius:var(--r-sm);
  background:var(--surface-2); cursor:pointer; }
.cal-suggest__row :is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker){ margin-top:var(--wa-space-2xs); accent-color:var(--primary); }

.cal-detail{ display:grid; grid-template-columns:minmax(0, 280px) minmax(0, 1fr); gap:var(--s-5); align-items:start; }
@media (max-width: 720px){ .cal-detail{ grid-template-columns:1fr; } }
.cal-preview{ border-radius:var(--r-md); overflow:hidden; background:#000; display:grid; place-items:center; }
.cal-preview--story{ aspect-ratio:9/16; }
.cal-preview--post, .cal-preview--reel{ aspect-ratio:4/5; }
.cal-preview img, .cal-preview video{ width:100%; height:100%; object-fit:contain; display:block; }
.cal-preview__ph{ filter:blur(2px); opacity:.6; }
.cal-caption{ white-space:pre-wrap; max-height:260px; overflow:auto; }
.cal-outcome{ display:flex; flex-direction:column; gap:var(--wa-space-xs); }
.cal-outcome__row{ display:flex; align-items:center; gap:var(--wa-space-xs); flex-wrap:wrap; padding:var(--wa-space-xs) var(--wa-space-s); border-radius:var(--r-sm); font-size:13px; }
.cal-outcome__row.is-ok{ background:color-mix(in srgb, var(--success) 12%, transparent); }
.cal-outcome__row.is-err{ background:color-mix(in srgb, var(--danger) 12%, transparent); }
.cal-outcome__row.is-ok .cal-outcome__ic{ color:var(--success); } .cal-outcome__row.is-err .cal-outcome__ic{ color:var(--danger); }
.cal-outcome__ic{ display:inline-flex; }
.cal-outcome__link{ margin-left:auto; font-weight:600; }
.cal-raw summary{ cursor:pointer; color:var(--muted); }
.cal-raw pre{ white-space:pre-wrap; font-size:11px; background:var(--surface-2); padding:var(--s-3); border-radius:var(--r-sm); max-height:180px; overflow:auto; }
.recur-card--fold > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:var(--s-2); }
.recur-card--fold > summary::-webkit-details-marker{ display:none; }
.recur-card--fold > summary::after{ content:"▸"; margin-left:auto; color:var(--muted); transition:transform .15s ease; }
.recur-card--fold[open] > summary::after{ transform:rotate(90deg); }
.recur-card--fold:not([open]){ padding-top:var(--s-3); padding-bottom:var(--s-3); }
/* one network at a time */
.cal-nets{ display:inline-flex; gap:var(--wa-space-2xs); padding:var(--wa-space-2xs); border-radius:999px; background:var(--surface-2); border:1px solid var(--border); }
.cal-net{ display:inline-flex; align-items:center; gap:var(--wa-space-xs); padding:var(--wa-space-xs) var(--wa-space-m); border-radius:999px; font-size:13px; font-weight:600;
  color:var(--muted); transition:background .15s ease, color .15s ease; }
.cal-net:hover{ color:var(--text); }
.cal-net__ic{ display:inline-flex; }
.cal-net.is-active{ background:color-mix(in srgb, var(--text) 13%, var(--surface)); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.3), inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); }
.cal-net--instagram.is-active .cal-net__ic{ color:var(--instagram); }
.cal-net--facebook.is-active .cal-net__ic{ color:var(--facebook); }
.cal-net--linkedin.is-active .cal-net__ic{ color:var(--linkedin); }
.cal-net--youtube.is-active .cal-net__ic{ color:var(--youtube); }
.cal-sync.is-off::before{ background:var(--faint); }
@media (max-width: 760px){ .cal-net span:not(.cal-net__ic){ display:none; } .cal-net{ padding:var(--wa-space-xs) var(--wa-space-s); } }
.cal-netbar{ margin:0 0 var(--s-3); }

/* ---------------- Calendrier: week view (publications at the time they went out) ---------------- */
.wk-card{ overflow:hidden; }
.wk{ display:flex; flex-direction:column; min-width:0; }
.wk__row{ display:grid; grid-template-columns:54px repeat(7, minmax(0, 1fr)); }
.wk__gutter{ border-right:1px solid var(--border); }
.wk__head{ position:sticky; top:0; z-index:3; background:var(--surface-2); border-bottom:1px solid var(--border); }
.wk__day{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:var(--wa-space-xs); align-items:baseline;
  padding:var(--wa-space-s) var(--wa-space-s); text-align:left; border-right:1px solid color-mix(in srgb, var(--border) 60%, transparent); color:var(--text); }
.wk__day:last-child{ border-right:0; }
.wk__day:hover{ background:color-mix(in srgb, var(--text) 5%, transparent); }
.wk__dname{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); grid-row:1; grid-column:1; }
.wk__dnum{ font:600 20px/1 var(--font-ui); grid-row:1 / span 2; grid-column:2; justify-self:end; }
.wk__dsum{ grid-row:2; grid-column:1; font-size:11px; color:var(--muted); white-space:nowrap; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; }
.wk__day.is-today .wk__dnum{ color:var(--primary); }
.wk__day.is-today{ box-shadow:inset 0 -2px 0 var(--primary); }
.wk__day.is-past .wk__dnum{ opacity:.7; }
.wk__ideas{ border-bottom:1px solid var(--border); background:color-mix(in srgb, #E9B949 4%, var(--surface)); }
.wk__ideas .wk__gutter{ display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--muted); }
.wk__ideacell{ display:flex; flex-direction:column; gap:var(--wa-space-2xs); padding:var(--wa-space-xs); min-height:34px;
  border-right:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.wk__ideacell:last-child{ border-right:0; }
.wk__add{ align-self:flex-start; width:22px; height:20px; display:grid; place-items:center; border-radius:6px; color:var(--faint);
  opacity:0; transition:opacity .12s ease; }
.wk__ideacell:hover .wk__add{ opacity:1; }
.wk__add:hover{ color:var(--text); background:var(--surface-2); }
.wk__grid{ position:relative; }
.wk__hours{ position:relative; }
.wk__hour{ position:absolute; right:8px; transform:translateY(-50%); font:500 10px/1 var(--font-mono); color:var(--faint); }
.wk__hour:first-child{ transform:none; top:3px !important; }
.wk__col{ position:relative; border-right:1px solid color-mix(in srgb, var(--border) 60%, transparent); cursor:pointer; }
.wk__col:last-child{ border-right:0; }
.wk__col.is-today{ background:color-mix(in srgb, var(--primary) 4%, transparent); }
.wk__line{ position:absolute; left:0; right:0; height:1px; background:color-mix(in srgb, var(--border) 55%, transparent); pointer-events:none; }
.wk__now{ position:absolute; left:-1px; right:0; height:2px; background:#FF4D6A; z-index:2; pointer-events:none; }
.wk__now::before{ content:""; position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background:#FF4D6A; }

.wk-item{ position:absolute; z-index:1; display:flex; gap:var(--wa-space-xs); align-items:flex-start; padding:var(--wa-space-2xs); border-radius:8px; text-align:left;
  background:var(--surface-2); color:var(--text); box-shadow:0 0 0 1px var(--border), 0 2px 6px rgba(0,0,0,.25);
  transition:transform .12s ease, box-shadow .12s ease; overflow:hidden; }
.wk-item:hover{ z-index:4; transform:translateY(-1px); box-shadow:0 0 0 1.5px var(--text), 0 6px 16px rgba(0,0,0,.4); }
.wk-item.is-ours{ box-shadow:0 0 0 1px var(--primary), 0 2px 6px rgba(0,0,0,.25); }
.wk-item.is-sched{ background:color-mix(in srgb, var(--primary) 10%, var(--surface-2)); }
.wk-item.is-sched.is-pending, .wk-item.is-sched.is-recurring{ outline:1px dashed var(--primary); outline-offset:-1px; }
.wk-item.is-sched.is-failed{ box-shadow:0 0 0 1.5px var(--danger); background:color-mix(in srgb, var(--danger) 10%, var(--surface-2)); }
.wk-item__thumb{ position:relative; flex:0 0 auto; border-radius:5px; overflow:hidden; background:#000; }
.wk-item__thumb--story, .wk-item__thumb--reel{ width:27px; height:48px; }
.wk-item__thumb--post{ width:40px; height:40px; }
.wk-item__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.wk-item__meta{ display:flex; flex-direction:column; gap:var(--wa-space-3xs); min-width:0; padding-top:var(--wa-space-3xs); }
.wk-item__time{ font:600 11px/1.2 var(--font-mono); }
.wk-item__kind{ font-size:10px; color:var(--muted); white-space:nowrap; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; }
.wk-item__st{ font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--primary); }
.wk-item__st--failed{ color:var(--danger); } .wk-item__st--posted{ color:var(--success); } .wk-item__st--recurring{ color:var(--muted); }
.wk-item.is-compact{ padding:var(--wa-space-3xs); }
.wk-item.is-compact .wk-item__meta{ display:none; }
.wk-item.is-compact .wk-item__thumb{ width:100%; }
@media (max-width: 900px){ .wk-item__meta{ display:none; } .wk__dsum{ display:none; } }
/* a burst of stories: one fanned stack */
.wk-stack{ position:relative; flex:0 0 auto; display:flex; height:48px; width:52px; }
.wk-stack__t{ position:absolute; top:0; left:calc(var(--i) * 11px); box-shadow:0 0 0 1.5px var(--surface-2), 2px 0 6px rgba(0,0,0,.4); }
.wk-stack__t.wk-item__thumb--post{ top:4px; }
.wk-stack__n{ position:absolute; right:-2px; bottom:-2px; z-index:2; min-width:18px; padding:var(--wa-space-3xs) var(--wa-space-2xs); border-radius:999px;
  background:var(--text); color:var(--bg); font:700 9px/1.4 var(--font-ui); text-align:center; }
.wk-item.is-compact .wk-stack{ width:100%; }

/* ---------- format identity: story = Instagram ring · post = square tile · reel = play badge ---------- */
:root{ --story-ring:linear-gradient(45deg,#FEDA75 0%,#FA7E1E 25%,#D62976 50%,#962FBF 75%,#4F5BD5 100%);
  --post-c:#7FB2EE; --reel-c:#A78BFA; }
/* month grid */
.cal-thumb--story{ padding:var(--wa-space-3xs); background:var(--story-ring); border-radius:9px; box-shadow:none; width:28px; height:48px; }
.cal-thumb--story img, .cal-thumb--story .cal-thumb__ph{ border-radius:7px; }
.cal-thumb--story:hover{ box-shadow:0 0 0 1.5px var(--text); }
.cal-thumb--post{ border-radius:2px; box-shadow:0 0 0 1.5px var(--post-c); }
.cal-thumb--post::after{ content:""; position:absolute; top:3px; right:3px; width:8px; height:8px; border-radius:1px;
  background:linear-gradient(90deg, #fff 0 2px, transparent 2px 3px, #fff 3px 5px, transparent 5px 6px, #fff 6px 8px);
  -webkit-mask:linear-gradient(#000 0 2px, transparent 2px 3px, #000 3px 5px, transparent 5px 6px, #000 6px 8px);
          mask:linear-gradient(#000 0 2px, transparent 2px 3px, #000 3px 5px, transparent 5px 6px, #000 6px 8px);
  filter:drop-shadow(0 0 1px rgba(0,0,0,.9)); }
.cal-thumb--reel{ border-radius:5px; box-shadow:0 0 0 1px color-mix(in srgb, var(--text) 25%, transparent); }
/* a reel = a centred play button over the picture (stories have the ring, posts the square) */
.cal-thumb--reel .cal-thumb__play, .wk-item--reel .cal-thumb__play, .cal-card--reel .cal-thumb__play{
  border:0; width:15px; height:15px; left:50%; top:50%; right:auto; transform:translate(-50%,-50%); border-radius:50%;
  background:rgba(0,0,0,.55); box-shadow:0 0 0 1.5px #fff; filter:none; }
.cal-thumb--reel .cal-thumb__play::after, .wk-item--reel .cal-thumb__play::after, .cal-card--reel .cal-thumb__play::after{
  content:""; position:absolute; left:5.5px; top:4px; border-style:solid; border-width:3.5px 0 3.5px 5.5px;
  border-color:transparent transparent transparent #fff; }
.cal-card--reel .cal-thumb__play{ width:30px; height:30px; box-shadow:0 0 0 2px #fff; }
.cal-card--reel .cal-thumb__play::after{ left:11px; top:8.5px; border-width:6.5px 0 6.5px 10px; }
/* week cards: a coloured edge + the thumbnail's own frame */
.wk-item{ --kind-c:var(--muted); padding-left:var(--wa-space-xs); }
.wk-item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--kind-c); }
.wk-item--story{ --kind-c:var(--story-ring); }
.wk-item--story::before{ background:var(--story-ring); }
.wk-item--post{ --kind-c:var(--post-c); }
.wk-item--reel{ --kind-c:var(--reel-c); }
.wk-item--mixed::before{ background:linear-gradient(var(--post-c), #D62976); }
.wk-item--story .wk-item__thumb:not(.wk-stack__t), .wk-item--story .wk-stack__t.wk-item__thumb--story{ padding:var(--wa-space-3xs); background:var(--story-ring); border-radius:8px; }
.wk-item--story .wk-item__thumb img{ border-radius:6px; }
.wk-item__thumb--post{ border-radius:2px; box-shadow:0 0 0 1.5px var(--post-c); }
.wk-item__thumb--reel{ box-shadow:0 0 0 1px color-mix(in srgb, var(--text) 25%, transparent); }
.wk-item--story .wk-item__kind{ color:#F2789F; } .wk-item--post .wk-item__kind{ color:var(--post-c); } .wk-item--reel .wk-item__kind{ color:var(--reel-c); }
/* day panel */
.cal-card--story .cal-card__media{ padding:var(--wa-space-2xs); background:var(--story-ring); border-radius:12px; box-shadow:none; }
.cal-card--story .cal-card__media img{ border-radius:9px; }
.cal-card--post .cal-card__media{ border-radius:3px; box-shadow:0 0 0 1.5px var(--post-c); }
.cal-card--reel .cal-card__media{ box-shadow:0 0 0 1px color-mix(in srgb, var(--text) 25%, transparent); }
.cal-card--story .cal-card__kind{ color:#F2789F; } .cal-card--post .cal-card__kind{ color:var(--post-c); } .cal-card--reel .cal-card__kind{ color:var(--reel-c); }
/* legend */
.cal-legend{ display:inline-flex; align-items:center; gap:var(--wa-space-s); margin-left:var(--s-2); font-size:11px; color:var(--muted); }
.cal-legend__i{ display:inline-flex; align-items:center; gap:var(--wa-space-2xs); }
.cal-legend__sw{ display:inline-block; width:9px; height:14px; border-radius:3px; }
.cal-legend__sw--story{ background:var(--story-ring); }
.cal-legend__sw--post{ width:12px; height:12px; border-radius:2px; box-shadow:inset 0 0 0 2px var(--post-c); }
.cal-legend__sw--reel{ position:relative; border-radius:3px; background:#3a3f4a; }
.cal-legend__sw--reel::after{ content:""; position:absolute; left:3px; top:4px; border-style:solid; border-width:3px 0 3px 4.5px; border-color:transparent transparent transparent #fff; }
@media (max-width: 1100px){ .cal-legend{ display:none; } }
.cal-link{ overflow-wrap:anywhere; }

/* poll inspector */
.poll-ed{ display:flex; flex-direction:column; gap:var(--s-3); width:100%; }
.poll-ai{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--wa-space-xs); }
.poll-emo{ display:inline-flex; align-items:center; gap:var(--wa-space-2xs); }
.poll-field{ display:flex; flex-direction:column; gap:var(--wa-space-2xs); }
.poll-field__head{ display:flex; align-items:center; justify-content:space-between; }
.poll-q{ width:100%; resize:none; line-height:1.35; }
.poll-answers{ display:flex; flex-direction:column; gap:var(--wa-space-xs); }
.poll-answer{ display:grid; grid-template-columns:18px minmax(0,1fr) 44px repeat(3, 28px); align-items:center; gap:var(--wa-space-2xs); }
.poll-answer__n{ font:600 11px/1 var(--font-mono); color:var(--muted); text-align:center; }
.poll-count{ font-size:10.5px; color:var(--faint); text-align:right; }
.poll-count.is-near{ color:var(--warning); font-weight:700; }
.poll-mini{ width:28px; height:28px; min-width:0; padding:0; }
.poll-add{ align-self:flex-start; }
.poll-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--wa-space-s) var(--wa-space-m); }
.poll-tools :is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker)[type=range]{ width:110px; }

/* ================= Story / post composer: top bar · stage · parameters panel ================= */
.cmp-top{ position:relative; z-index:30; display:flex; flex-wrap:wrap; align-items:center; gap:var(--wa-space-s) var(--wa-space-l);
  padding:var(--wa-space-xs) 0 var(--wa-space-m); margin-bottom:var(--wa-space-m); border-bottom:1px solid var(--border); }
.cmp-top__l{ display:flex; align-items:center; gap:var(--wa-space-s); flex:1 1 320px; min-width:min(100%, 260px); }
.cmp-top__titles{ display:none; }                    /* the breadcrumb already says where we are */
.cmp-top .story-title{ flex:1 1 200px; min-width:140px; max-width:360px; margin:0;
  --wa-form-control-background-color:transparent; --wa-form-control-border-color:transparent; font-weight:var(--wa-font-weight-bold); }
.cmp-top .story-title:hover, .cmp-top .story-title:focus-within{ --wa-form-control-background-color:var(--wa-color-surface-raised); --wa-form-control-border-color:var(--wa-color-surface-border); }
.cmp-top__c{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--wa-space-s); }
.cmp-top__sep{ width:1px; height:22px; background:var(--border); }
.cmp-top__r{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--wa-space-xs); margin-inline-start:auto; min-width:0; max-width:100%; }
.cmp-top__r .autosave-chip{ white-space:normal; max-width:100%; }
/* the bar sizes by its own width: icon-only platforms / source when it gets tight */
.view:has(> .cmp-top){ container-type:inline-size; }
@container (max-width:1340px){ .cmp-top .pill__lbl, .cmp-top .btn__lbl{ display:none; } }

.cmp-main.post-studio{ grid-template-columns:minmax(0,1fr) minmax(340px,420px); gap:var(--s-5); align-items:start; }
.cmp-stage{ display:flex; flex-direction:column; gap:var(--s-3); min-width:0; }
.cmp-stage .post-preview{ position:static; display:flex; flex-direction:column; align-items:center;
  background:none; }
.cmp-stage .post-preview__frame--story{ height:min(62vh, 600px); }
.cmp-panel{ overflow:auto; overscroll-behavior:contain; }

/* the selected element's controls, under the canvas */
.cmp-selbar{ padding:var(--s-3) var(--s-4); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent); max-height:36vh; overflow:auto; }
.cmp-selbar.hidden{ display:none; }
.cmp-selbar .deco-inspector{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--wa-space-xs) var(--wa-space-s); }
.cmp-selbar .deco-inspector > .poll-ed{ flex:1 1 100%; }

/* video timeline */
.cmp-tl{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:var(--wa-space-s);
  padding:var(--wa-space-xs) var(--wa-space-s); border-radius:var(--r-lg); background:var(--surface); box-shadow:0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent); }
.cmp-tl__btn{ width:32px; height:32px; display:grid; place-items:center; border-radius:50%; color:var(--text); background:var(--surface-2); }
.cmp-tl__btn:hover{ background:var(--surface-3, var(--surface-2)); }
.cmp-tl__time{ font-size:11px; color:var(--muted); white-space:nowrap; }
.cmp-tl__track{ position:relative; height:52px; border-radius:8px; overflow:hidden; cursor:pointer; background:#000; touch-action:none; }
.cmp-tl__strip{ position:absolute; inset:0; display:flex; }
.cmp-tl__strip canvas{ flex:1 1 0; min-width:0; height:100%; object-fit:cover; opacity:.75; }
.cmp-tl__played{ position:absolute; left:0; top:0; bottom:0; background:color-mix(in srgb, var(--primary) 22%, transparent); pointer-events:none; }
.cmp-tl__head{ position:absolute; top:-2px; bottom:-2px; width:2px; margin-left:calc(-1 * var(--wa-space-3xs)); background:#fff; box-shadow:0 0 6px rgba(0,0,0,.8); pointer-events:none; }
.cmp-tl__marks{ position:absolute; inset:0; pointer-events:none; }
.cmp-tl__mark{ position:absolute; top:0; bottom:0; width:2px; margin-left:calc(-1 * var(--wa-space-3xs)); background:#E9B949; pointer-events:auto; }
.cmp-tl__mark::after{ content:""; position:absolute; top:-1px; left:-4px; width:10px; height:10px; border-radius:50%; background:#E9B949; box-shadow:0 0 0 2px #000; }

@media (max-width: 1180px){
  .cmp-main.post-studio{ grid-template-columns:minmax(0,1fr) minmax(300px,340px); gap:var(--s-4); }
  .cmp-stage .post-preview__frame--story{ height:min(58vh, 540px); }
}
@media (max-width: 760px){
  .cmp-main.post-studio{ grid-template-columns:1fr; }
  .cmp-stage, .cmp-panel{ position:static; max-height:none; }
}
/* a story's stage fits the window: the canvas takes what is left above the timeline + selection bar */
.cmp-stage:has(.post-preview__frame--story) .post-preview{ flex:1 1 0; min-height:0; padding:var(--wa-space-xs) 0 var(--wa-space-l); }   /* room under the canvas: it never touches the timeline */
.cmp-stage:has(.post-preview__frame--story) .post-preview{ container-type:size; justify-content:center; }
.cmp-stage:has(.post-preview__frame--story) .post-preview__frame--story{
  /* Fit BOTH axes without flex stretching the 1080 × 1920 canvas. */
  width:min(100cqw, calc(100cqh * 9 / 16)); height:auto; aspect-ratio:9/16;
  max-width:none; max-height:none; min-height:0; flex:0 0 auto;
}
.cmp-stage .post-preview__frame--story > img,
.cmp-stage .post-preview__frame--story > video{ position:absolute; inset:0; }
.cmp-stage:has(.post-preview__frame--story) .post-preview > p{ flex:0 0 auto; margin:6px 0 0 !important; }
.cmp-stage .cmp-tl, .cmp-stage .cmp-selbar{ flex:0 0 auto; }
.cmp-stage .cmp-selbar{ max-height:min(34vh, 300px); }
/* the canvas has priority: the selection bar scrolls inside itself, the 9:16 note goes */
.cmp-stage:has(.post-preview__frame--story) .post-preview{ min-height:300px; }
.cmp-stage:has(.post-preview__frame--story) .post-preview > p{ display:none; }
.cmp-stage .cmp-selbar{ max-height:clamp(110px, 28vh, 260px); }

/* one-row top bar on narrower screens: icon-only platforms / source, no subtitle */

.cmp-stage .post-preview__frame{ align-self:center; margin-left:auto; margin-right:auto; }
@media (max-width:760px){
  .cmp-stage:has(.post-preview__frame--story) .post-preview{ flex:none; container-type:inline-size; }
  .cmp-stage:has(.post-preview__frame--story) .post-preview__frame--story{ width:min(100cqw, 360px); }
}
@media (max-height: 760px){
  .cmp-stage:has(.post-preview__frame--story) .post-preview{ min-height:250px; padding:8px; }
  .cmp-stage .cmp-selbar{ max-height:clamp(96px, 24vh, 200px); padding:var(--s-2) var(--s-3); }
  .cmp-stage .cmp-tl{ padding:var(--wa-space-xs) var(--wa-space-s); } .cmp-tl__track{ height:42px; }
}
/* one row, always: the name field gives way first, then the labels (≤1360 px) */

.cmp-stage .post-preview{ align-self:stretch; }

/* narrow: the breadcrumb already says where we are — the name field gets the room */

/* the selection card heads the settings column: full width, no scroll of its own */
.cmp-panel > .cmp-selbar{ max-height:none; overflow:visible; border-radius:var(--r-xl); padding:var(--s-3) var(--s-4) var(--s-4);
  background:color-mix(in srgb, var(--accent, #2EBA80) 7%, var(--surface));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent, #2EBA80) 45%, transparent); }
.cmp-selbar__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-2); }
.cmp-selbar__t{ font:600 11px/1 var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--accent, #2EBA80); }
.cmp-panel > .cmp-selbar .deco-inspector{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--wa-space-xs); }
/* wide titles keep their room (the name field gives way, not the heading) */

.cmp-panel{ overflow-x:hidden; }

/* the selection box is positioned against the preview: make it the containing block */
.cmp-stage .post-preview{ position:relative; }
.cmp-panel > .cmp-selbar .deco-inspector{ border:0; background:none; padding:0; }

/* =====================================================================================================
   COMPOSER v3 — one tool at a time, flat and light (Canva / Instagram-editor feel)
   tabs on top of the panel · chat-style assistant · no cards inside cards · the canvas gets the room
   ===================================================================================================== */

.cmp-stage .post-preview{ background:transparent !important; box-shadow:none !important; border:0 !important; }
.cmp-stage .post-preview__frame{ box-shadow:0 18px 60px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent); border-radius:20px; }

/* the tool panel */
.cmp-panel{ display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden; background:var(--surface);
  border-radius:20px; box-shadow:0 0 0 1px color-mix(in srgb, var(--border) 55%, transparent); }
.cmp-panes{ flex:1 1 auto; min-height:0; overflow:auto; padding:var(--wa-space-m); overscroll-behavior:contain; }
.cmp-pane{ display:flex; flex-direction:column; gap:var(--s-4); }
.cmp-pane.hidden{ display:none; }
.cmp-panel.is-selecting .cmp-panes{ display:none; }
.cmp-panel > .cmp-selbar{ margin:0; border-radius:0; box-shadow:none; background:transparent; padding:var(--wa-space-m); overflow:auto; flex:1 1 auto; min-height:0; }

/* cards lose their frames inside the panel: headings + content, nothing nested */
.cmp-pane .sb-card, .cmp-pane .sb-card--ai, .cmp-pane .sb-card--publish{
  background:transparent; border:0; box-shadow:none; padding:0; border-radius:0; }
.cmp-pane .sb-card__head{ margin-bottom:var(--s-3); flex-wrap:wrap; }
.cmp-pane .sb-switches{ flex-direction:column; align-items:flex-start; gap:var(--wa-space-2xs); justify-content:flex-start; }
.cmp-pane .sb-card__title{ font:700 15px/1.2 var(--font-ui); display:flex; align-items:center; gap:var(--wa-space-xs); }
.cmp-pane .sb-card__sub{ font-size:12.5px; line-height:1.45; color:var(--text-muted); margin-top:var(--wa-space-2xs); }
.cmp-pane .sb-hint{ font-size:12px; color:var(--text-muted); }


/* publication: calm */
.cmp-pane .sb-actions{ gap:var(--wa-space-xs); }

/* inputs inside the panel: softer */
.cmp-pane .input, .cmp-selbar .input{ border-radius:12px; }
@media (max-width:760px){ .cmp-panel{ max-height:none !important; } wa-tab.cmp-tab > span:not(.cmp-tab__ic){ display:none; } }

/* ---- left icon rail + panel at the left, canvas on the right ---- */
.cmp-main.post-studio{ grid-template-columns:auto minmax(0,1fr); gap:var(--s-4); align-items:start; }
.cmp-side.hidden{ display:none; }
/* animation card */
.an-body{ display:flex; flex-direction:column; gap:var(--wa-space-m); }
.an-sec{ display:flex; flex-direction:column; gap:var(--wa-space-xs); }
.an-h{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); font-weight:600; }
.an-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
.an-chip{ border:1px solid color-mix(in srgb, var(--text) 12%, transparent); background:color-mix(in srgb, var(--text) 5%, transparent); color:var(--text);
  font:inherit; font-size:11px; line-height:1.15; padding:var(--wa-space-xs) var(--wa-space-2xs) var(--wa-space-xs); min-height:80px; border-radius:12px; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:var(--wa-space-xs); white-space:normal; overflow-wrap:normal; word-break:normal; hyphens:manual; }
.an-chip__t{ font-size:10.5px; letter-spacing:-.01em; }
.an-chip__t{ display:block; }
/* the little looping demo of each effect: a mini card (two lines) over a dashed ghost of its resting place */
.an-glyph{ position:relative; width:46px; height:40px; display:flex; align-items:center; justify-content:center; gap:1px; flex:none; }
.an-glyph.is-none{ color:var(--text-muted); font-size:18px; }
.an-g-ghost{ position:absolute; left:50%; top:50%; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:8px; border:1.5px dashed color-mix(in srgb, var(--text) 22%, transparent); }
.an-g-sq{ position:relative; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:0 6px; width:30px; height:30px; border-radius:8px; overflow:hidden;
  background:linear-gradient(135deg, #A78BFA, #6D28D9); box-shadow:0 3px 8px rgba(109,40,217,.4); will-change:transform, opacity, filter, clip-path; }
.an-g-sq i{ display:block; height:3px; border-radius:2px; background:rgba(255,255,255,.92); }
.an-g-sq .an-g-l2{ width:60%; opacity:.75; }
.an-g-ch{ display:inline-block; font-weight:800; font-size:22px; line-height:1; color:#C4B5FD; will-change:transform, opacity; }
.an-g-sh{ position:absolute; inset:-20% -60%; background:linear-gradient(90deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%); transform:translateX(-120%); }
.an-chip.is-on .an-g-sq, .an-pill.is-on .an-g-sq{ background:linear-gradient(135deg, #8CE7BC, #1F9E6A); box-shadow:0 3px 8px rgba(46,186,128,.4); }
.an-chip.is-on .an-g-ch, .an-pill.is-on .an-g-ch{ color:var(--primary); }
/* collapsed: one compact row */
.an-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:var(--wa-space-xs); align-items:center; }
.an-row:not(:has(.an-play)){ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.an-pill{ display:flex; align-items:center; gap:var(--wa-space-xs); min-width:0; padding:var(--wa-space-2xs) var(--wa-space-xs) var(--wa-space-2xs) var(--wa-space-3xs); border-radius:12px; cursor:pointer; font:inherit; color:var(--text); text-align:left;
  border:1px solid color-mix(in srgb, var(--text) 12%, transparent); background:color-mix(in srgb, var(--text) 5%, transparent); }
.an-pill.is-on{ border-color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, transparent); }
.an-pill .an-glyph{ transform:scale(.8); margin:-3px -6px -3px -4px; width:40px; }
.an-pill .an-g-ch{ font-size:15px; }
.an-pill__txt{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.an-pill__k{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.an-pill__v{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; }
.an-pill.is-on .an-pill__v{ color:var(--primary); }
.an-play{ width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; background:var(--primary); color:var(--primary-text); font-size:13px; display:grid; place-items:center; }
.an-toggle{ font-size:12px; }
.an-chip:hover{ background:color-mix(in srgb, var(--text) 10%, transparent); }
.an-chip.is-on{ border-color:var(--primary); color:var(--primary); background:color-mix(in srgb, var(--primary) 14%, transparent); }
.an-dirs, .an-seg{ display:flex; align-items:center; gap:var(--wa-space-2xs); flex-wrap:wrap; }
.an-dirs .an-lbl{ font-size:11px; color:var(--text-muted); margin-right:auto; }
.an-dir{ min-width:32px; height:28px; padding:0 var(--wa-space-xs); border-radius:8px; border:1px solid color-mix(in srgb, var(--text) 12%, transparent); background:transparent;
  color:var(--text); font:inherit; font-size:12.5px; cursor:pointer; }
.an-dir.is-on{ border-color:var(--primary); color:var(--primary); background:color-mix(in srgb, var(--primary) 14%, transparent); }
.an-dir:disabled{ opacity:.45; cursor:default; }
.an-seg .an-dir{ flex:1; }
.an-actions{ display:flex; gap:var(--wa-space-xs); }
.an-note{ margin:0; font-size:11.5px; line-height:1.35; color:var(--text-muted); }
/* compact music card */
.deco-music{ display:flex; flex-direction:column; gap:var(--wa-space-s); min-width:0; }
.mu-ic{ display:inline-flex; }
.mu-now, .mu-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:var(--wa-space-s); }
.mu-now{ padding:var(--wa-space-s); border-radius:14px; background:color-mix(in srgb, var(--primary) 9%, var(--surface-2)); }
.mu-cover{ position:relative; width:40px; height:40px; border-radius:10px; overflow:hidden; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, #7C3AED, #EC4899); flex:none; }
.mu-cover--lg{ width:48px; height:48px; border-radius:12px; }
.mu-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mu-meta{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.mu-title{ font-weight:600; font-size:13.5px; white-space:nowrap; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; }
.mu-artist{ font-size:12px; color:var(--text-muted); white-space:nowrap; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; }
.mu-btn{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; border:0; cursor:pointer; color:var(--text);
  background:color-mix(in srgb, var(--text) 10%, transparent); transition:background .15s, transform .15s; }
.mu-btn:hover{ background:color-mix(in srgb, var(--text) 18%, transparent); }
.mu-btn.is-on, .mu-btn--add{ background:var(--primary); color:var(--primary-text); }
.mu-btn--ghost{ background:transparent; color:var(--text-muted); }
.mu-ctl{ display:grid; grid-template-columns:58px minmax(0,1fr) 44px; align-items:center; gap:var(--wa-space-xs); }
.mu-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.mu-val{ font-size:12px; font-variant-numeric:tabular-nums; text-align:right; color:var(--text-muted); }
.mu-range{ width:100%; accent-color:var(--primary); }
.mu-check{ display:flex; gap:var(--wa-space-xs); align-items:center; font-size:12.5px; }
.mu-search{ display:flex; align-items:center; gap:var(--wa-space-xs); padding:0 var(--wa-space-s); height:38px; border-radius:999px; color:var(--text-muted);
  background:color-mix(in srgb, var(--text) 7%, transparent); border:1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.mu-search:focus-within{ border-color:var(--primary); }
.mu-q{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--text); font:inherit; font-size:13px; }
.mu-results{ display:flex; flex-direction:column; gap:var(--wa-space-2xs); max-height:360px; overflow-y:auto; }
.mu-results .mu-row{ padding:var(--wa-space-xs); border-radius:10px; }
.mu-results .mu-row:hover{ background:color-mix(in srgb, var(--text) 6%, transparent); }
.mu-recent{ display:flex; flex-direction:column; gap:var(--wa-space-2xs); }
.mu-recent.hidden{ display:none; }
.mu-recent .mu-lbl{ padding:var(--wa-space-3xs) var(--wa-space-3xs) var(--wa-space-2xs); }
.mu-recent .mu-row{ padding:var(--wa-space-xs); border-radius:10px; }
.mu-recent .mu-row:hover{ background:color-mix(in srgb, var(--text) 6%, transparent); }
.mu-btn.is-loading{ opacity:.55; pointer-events:none; animation:mu-pulse 1s ease-in-out infinite; }
@keyframes mu-pulse{ 50%{ transform:scale(.9); } }
.mu-empty{ font-size:12px; color:var(--text-muted); padding:var(--wa-space-2xs) var(--wa-space-3xs); }
.mu-foot{ margin:0; font-size:11px; line-height:1.35; color:var(--text-muted); }
.deco-music.is-disabled{ opacity:.5; pointer-events:none; }
.cmp-tools{ display:flex; gap:var(--wa-space-s); align-items:stretch; min-height:460px; }
/* the tool rail: a vertical wa-tab-group — icon above label, a rounded surface on the start edge of the panel */
wa-tab-group.cmp-rail{ flex:0 0 5rem; width:5rem; align-self:stretch; background:var(--surface); border-radius:var(--wa-border-radius-l);
  border:1px solid var(--border); --track-color:transparent; --indicator-color:transparent; }
wa-tab-group.cmp-rail::part(body){ display:none; }
wa-tab-group.cmp-rail[placement=top]{ flex:0 0 auto; width:auto; }
wa-tab-group.cmp-rail[placement=top]::part(tabs){ justify-content:space-around; }
wa-tab-group.cmp-rail::part(nav){ width:100%; }
wa-tab-group.cmp-rail::part(tabs){ gap:var(--wa-space-2xs); padding:var(--wa-space-xs); width:100%; box-sizing:border-box; }
wa-tab.cmp-tab{ font-size:var(--wa-font-size-2xs); font-weight:var(--wa-font-weight-bold); border-radius:var(--wa-border-radius-m); }
wa-tab.cmp-tab{ display:flex; width:100%; }
wa-tab.cmp-tab::part(base){ flex-direction:column; align-items:center; justify-content:center; gap:var(--wa-space-2xs); padding:var(--wa-space-s) var(--wa-space-2xs) var(--wa-space-xs); width:100%; box-sizing:border-box; text-align:center; white-space:nowrap; }
wa-tab.cmp-tab[active]{ background:var(--primary-soft); }
wa-tab.cmp-tab.hidden{ display:none; }
.cmp-tools .cmp-panel{ width:316px; flex:0 0 316px; }
.cmp-tools.is-selecting wa-tab.cmp-tab[active]{ background:transparent; color:var(--wa-color-text-quiet); }
@media (max-width:1180px){ .cmp-tools .cmp-panel{ width:276px; flex-basis:276px; } .cmp-main.post-studio{ gap:var(--s-3); } }
@media (max-width:760px){
  .cmp-main.post-studio{ grid-template-columns:1fr; }
  .cmp-tools{ flex-direction:column; min-height:0; height:auto !important; }
  .cmp-rail{ flex-direction:row; width:auto; flex:0 0 auto; padding:var(--wa-space-xs); justify-content:space-around; }
  .cmp-tools .cmp-panel{ width:auto; flex:1 1 auto; }
}

/* ---- floating toolbar next to the selected element ---- */
.deco-float{ position:absolute; z-index:60; display:flex; align-items:center; gap:var(--wa-space-3xs); padding:var(--wa-space-2xs); transform:translateX(-50%);
  background:color-mix(in srgb, var(--surface) 96%, #000); border-radius:14px; white-space:nowrap;
  box-shadow:0 8px 28px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent); }
.deco-float.hidden{ display:none; }
.deco-float__b{ min-width:32px; height:32px; padding:0 var(--wa-space-xs); border:0; border-radius:9px; background:transparent; color:var(--text);
  font:600 12px var(--font-ui); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s; }
.deco-float__b:hover{ background:color-mix(in srgb, var(--text) 12%, transparent); }
.deco-float__b--danger:hover{ background:color-mix(in srgb, var(--danger) 22%, transparent); color:var(--danger-text, #ff8c8f); }
.deco-float__b.hidden, .deco-float__color.hidden, .deco-float__sep.hidden{ display:none; }
.deco-float__sep{ width:1px; height:18px; background:var(--border); margin:0 var(--wa-space-2xs); }
.deco-float__color{ width:28px; height:28px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; margin:0 var(--wa-space-3xs); }
.deco-float__color::-webkit-color-swatch-wrapper{ padding:0; } .deco-float__color::-webkit-color-swatch{ border:2px solid var(--border-strong); border-radius:50%; }

/* ---- text editor: Style / Avancé ---- */
.text-tabs{ align-self:stretch; display:flex; width:100%; }
wa-button-group.text-tabs{ display:flex; width:100%; }
wa-button-group.text-tabs > wa-button{ flex:1; }
.text-view{ display:flex; flex-direction:column; gap:var(--s-3); }
.text-view.hidden{ display:none; }
.text-field{ display:flex; flex-direction:column; gap:var(--wa-space-xs); }
.text-presets--strip{ display:flex !important; flex-wrap:nowrap; overflow-x:auto; gap:var(--wa-space-xs); padding-bottom:var(--wa-space-xs); scrollbar-width:thin; }
.text-presets--strip .text-preset{ flex:0 0 auto; }
.text-colors{ gap:var(--s-4) !important; }
.text-actions{ margin-top:var(--s-2); }
.text-presets--strip .text-preset{ padding:var(--wa-space-xs) var(--wa-space-s); font-size:13px; min-height:0; line-height:1.3; }

/* ---- nothing in the tool panel may be cut off: every flex/grid child may shrink, buttons wrap ---- */
.cmp-pane, .cmp-pane > *, .cmp-pane .sb-card__body, .cmp-selbar, .cmp-selbar .deco-inspector, .shape-editor, .text-view, .lb-grid, .poll-ed{ min-width:0; max-width:100%; }
.cmp-panel :is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), .cmp-panel :is(select,wa-select), .cmp-panel :is(textarea,wa-textarea){
  min-width:0 !important; max-width:100%; box-sizing:border-box; }
.cmp-panel :is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker)[type=range]{ min-width:0; }
.cmp-panel .btn{ min-width:0; max-width:100%; white-space:normal; line-height:1.25; text-align:center; }
.cmp-panel .sb-actions .btn{ font-size:13px; }
.cmp-selbar .deco-inspector > .text-tabs, .cmp-selbar .deco-inspector > .text-view, .cmp-selbar .deco-inspector > .shape-editor{ flex:1 1 100%; }
.cmp-selbar .deco-inspector > *{ max-width:100%; }
.cmp-panel .sb-wa-builder__fields, .cmp-panel .segmented{ min-width:0; }
.cmp-panel wa-button-group{ flex-wrap:wrap; }
.cmp-panel .row--wrap{ flex-wrap:wrap; }
/* shape picker: the shape never runs into its label */
.shape-picker__item{ gap:var(--wa-space-s); padding:var(--wa-space-m) var(--wa-space-s) var(--wa-space-s); }
.shape-picker__item > span:first-child{ width:72px; height:54px; overflow:hidden; }
.shape-picker__item > span:first-child svg{ max-width:100%; max-height:100%; overflow:hidden; }
.shape-picker__item > span:last-child{ line-height:1.2; min-height:2.4em; display:flex; align-items:flex-start; justify-content:center; }
/* ---------------------------------------------------------------- PARCOURS view */
.parc-layout{ display:grid; grid-template-columns:minmax(240px, 320px) minmax(0, 1fr); gap:var(--s-5); align-items:start; }
.parc-side{ display:flex; flex-direction:column; gap:var(--s-3); position:sticky; top:var(--s-4); max-height:calc(100vh - 140px); }
.parc-side__top{ display:flex; flex-direction:column; gap:var(--s-2); }
.parc-list{ display:flex; flex-direction:column; gap:var(--wa-space-xs); overflow:auto; padding-right:var(--wa-space-3xs); }
.parc-editor{ display:flex; flex-direction:column; gap:var(--s-4); padding:var(--s-5); border-radius:20px; background:var(--surface);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--border) 55%, transparent); min-width:0; }
.parc-editor__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); }
.parc-field{ display:flex; flex-direction:column; gap:var(--wa-space-xs); min-width:0; }
.parc-field__l{ font:700 11px/1 var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.parc-title{ font-size:18px; font-weight:700; }
.parc-body{ min-height:280px; line-height:1.55; resize:vertical; }
.parc-probe{ display:flex; flex-direction:column; gap:var(--wa-space-xs); padding:var(--wa-space-m); border-radius:14px; background:var(--surface-2); }
.parc-probe__out{ display:flex; flex-wrap:wrap; gap:var(--wa-space-xs); align-items:center; min-height:24px; }
.parc-chip{ padding:var(--wa-space-2xs) var(--wa-space-s); border-radius:999px; background:color-mix(in srgb, var(--text) 10%, transparent); font:600 12px var(--font-ui); }
.parc-chip.is-this{ background:color-mix(in srgb, var(--primary) 22%, transparent); color:var(--primary); }
.parc-pal{ display:flex; flex-direction:column; gap:var(--s-3); }
.parc-pal__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(140px,200px); gap:var(--s-4); align-items:stretch; }
.parc-pal__rows{ display:flex; flex-direction:column; gap:var(--wa-space-xs); }
.parc-pal__row{ display:grid; grid-template-columns:64px 40px minmax(0,1fr); gap:var(--wa-space-s); align-items:center; }
.parc-pal__l{ font:600 13px var(--font-ui); color:var(--text-muted); }
.parc-pal__col{ flex:none; }
.parc-pal__hex{ font-family:ui-monospace,monospace; text-transform:uppercase; }
.parc-pal__strip{ border-radius:14px; padding:var(--wa-space-m); display:flex; flex-direction:column; justify-content:space-between; gap:var(--wa-space-s); min-height:112px; border:1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.parc-pal__ink{ font:800 20px/1.1 var(--font-ui); overflow-wrap:anywhere; }
.parc-pal__acc{ height:10px; width:56%; border-radius:999px; }
.parc-pal__presets{ display:flex; flex-wrap:wrap; gap:var(--wa-space-xs); }
.parc-pal__preset{ display:flex; padding:0; border:1px solid color-mix(in srgb, var(--text) 18%, transparent); border-radius:999px; overflow:hidden; cursor:pointer; background:none; }
.parc-pal__preset i{ width:18px; height:22px; display:block; }
.parc-pal__preset:hover{ border-color:var(--primary); }
@media (max-width:640px){ .parc-pal__grid{ grid-template-columns:1fr; } }
.parc-uses ul{ margin:var(--wa-space-xs) 0 0; padding-left:var(--wa-space-m); color:var(--text-muted); font-size:13px; line-height:1.55; }
.parc-del{ align-self:flex-start; color:var(--danger-text, #ff8c8f); }
.parc-empty{ padding:var(--s-6) var(--s-4); text-align:center; }
@media (max-width:900px){ .parc-layout{ grid-template-columns:1fr; } .parc-side{ position:static; max-height:none; } }
.parc-field__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
.parc-wandrow{ display:inline-flex; align-items:center; gap:var(--wa-space-s); }
.parc-wand{ border-radius:999px; }
.parc-undo{ border:0; background:transparent; color:var(--text-muted); font:500 12px var(--font-ui); cursor:pointer; padding:var(--wa-space-2xs) var(--wa-space-3xs); }
.parc-undo:hover{ color:var(--text); }
.parc-undo.hidden{ display:none; }

/* ---- Parcours: calmer list, nothing clipped ---- */
.parc-layout{ margin-top:var(--s-5); gap:var(--s-6); }
.parc-side{ gap:var(--s-3); }
.parc-list{ gap:var(--wa-space-xs); padding:var(--wa-space-2xs) var(--wa-space-xs) var(--wa-space-s) var(--wa-space-2xs); margin:calc(-1 * var(--wa-space-2xs)) calc(-1 * var(--wa-space-xs)) 0 calc(-1 * var(--wa-space-2xs)); scrollbar-width:thin; }
.parc-side__top .btn{ width:100%; }
.parc-search{ border-radius:14px; }
.parc-editor{ padding:var(--s-6); gap:var(--s-5); }
.parc-editor__head .t-h2{ font-size:20px; }
.parc-field .input, .parc-field .textarea{ border-radius:14px; }

.typing{ display:inline-flex; gap:var(--wa-space-2xs); align-items:center; }
.typing i{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.35; animation:typing 1s infinite ease-in-out; }
.typing i:nth-child(2){ animation-delay:.15s; } .typing i:nth-child(3){ animation-delay:.3s; }
@keyframes typing{ 0%,80%,100%{ opacity:.25; transform:translateY(0);} 40%{ opacity:1; transform:translateY(-3px);} }

/* ---- background editor (Fond tab) ---- */
.bg-ed__patterns{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--wa-space-xs); }
.bg-ed__pat{ display:flex; flex-direction:column; gap:var(--wa-space-2xs); align-items:stretch; padding:var(--wa-space-2xs); border:0; border-radius:12px; background:var(--surface-2); cursor:pointer;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent); font:600 10.5px var(--font-ui); color:var(--text-muted); transition:box-shadow .12s, transform .12s; }
.bg-ed__pat:hover{ transform:translateY(-1px); color:var(--text); }
.bg-ed__pat.is-on{ box-shadow:0 0 0 2px var(--primary); color:var(--text); }
.bg-ed__pat img{ width:100%; aspect-ratio:9/12; object-fit:cover; border-radius:8px; display:block; background:#111; }
.bg-ed__pat span{ text-align:center; white-space:nowrap; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; }

/* ---- icon picker ---- */
.icon-picker{ display:flex; flex-direction:column; gap:var(--s-3); width:100%; min-width:0; max-width:100%; }
.icon-picker__ideas{ display:flex; flex-wrap:wrap; gap:var(--wa-space-xs); }
.bg-ed__chip{ padding:var(--wa-space-2xs) var(--wa-space-s); border:0; border-radius:999px; background:var(--surface-2); color:var(--text); font:600 12px var(--font-ui); cursor:pointer; box-shadow:0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent); }
.bg-ed__chip:hover{ box-shadow:0 0 0 1.5px var(--primary); }
.icon-picker__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(56px, 1fr)); gap:var(--wa-space-xs); max-height:52vh; overflow-y:auto; overflow-x:hidden; padding:var(--wa-space-2xs); }
.icon-picker :is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker){ width:100%; box-sizing:border-box; }
.icon-picker__item{ aspect-ratio:1; border:0; border-radius:14px; background:var(--surface-2); display:grid; place-items:center; cursor:pointer; padding:var(--wa-space-s);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent); transition:box-shadow .12s, transform .12s; }
.icon-picker__item:hover:not(:disabled){ box-shadow:0 0 0 2px var(--primary); transform:translateY(-1px); }
.icon-picker__item:disabled{ opacity:.5; }
.icon-picker__item img{ width:100%; height:100%; object-fit:contain; }
.deco-chip--icon{ position:absolute; line-height:0; cursor:grab; }
.deco-chip--icon svg{ display:block; overflow:visible; }

/* ---- photo picker ---- */
.photo-picker{ display:flex; flex-direction:column; gap:var(--s-3); width:100%; min-width:0; }
.photo-picker .row :is(input,wa-input,wa-checkbox,wa-switch,wa-slider,wa-color-picker){ flex:1; min-width:0; }
.photo-picker__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:var(--wa-space-xs); max-height:54vh; overflow-y:auto; overflow-x:hidden; padding:var(--wa-space-2xs); }
.photo-picker__item{ aspect-ratio:4/5; border:0; border-radius:12px; overflow:hidden; padding:0; cursor:pointer; background:var(--surface-2);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent); transition:box-shadow .12s, transform .12s; }
.photo-picker__item:hover:not(:disabled){ box-shadow:0 0 0 2px var(--primary); transform:translateY(-1px); }
.photo-picker__item:disabled{ opacity:.5; }
.photo-picker__item img{ width:100%; height:100%; object-fit:cover; display:block; }
.deco-chip--photo{ position:absolute; cursor:grab; max-width:none; }          /* a cover photo is wider than the frame: never capped at 94 % */

/* ---- font picker (app-wide font library) ---- */
.font-picker{ display:flex; flex-direction:column; gap:var(--s-3); min-width:min(560px,86vw); }
.font-chips{ display:flex; flex-wrap:wrap; gap:var(--wa-space-xs); }
.font-chip{ padding:var(--wa-space-2xs) var(--wa-space-s); border-radius:999px; border:1px solid color-mix(in srgb, var(--text) 16%, transparent); background:none; color:inherit; font:600 12px var(--font-ui); cursor:pointer; }
.font-chip.is-on{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.font-list{ display:flex; flex-direction:column; gap:var(--wa-space-2xs); max-height:min(52vh,460px); overflow:auto; padding:var(--wa-space-2xs) var(--wa-space-xs) var(--wa-space-2xs) var(--wa-space-2xs); }
.font-row{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--wa-space-s); text-align:left; padding:var(--wa-space-xs) var(--wa-space-s); border-radius:10px; border:1px solid transparent; background:color-mix(in srgb, var(--text) 5%, transparent); color:inherit; cursor:pointer; }
.font-row:hover{ background:color-mix(in srgb, var(--text) 10%, transparent); }
.font-row.is-on{ border-color:var(--primary); background:color-mix(in srgb, var(--primary) 14%, transparent); }
.font-name{ font-size:20px; line-height:1.15; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; }
.font-row__meta{ flex:none; font:500 11px var(--font-ui); color:var(--text-muted); }
.font-row__del{ flex:none; padding:var(--wa-space-3xs) var(--wa-space-xs); color:var(--text-muted); }
.font-row__del:hover{ color:#ff7b7b; }
.font-picker__foot{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--wa-space-xs); }
.font-btn{ display:flex; align-items:center; justify-content:space-between; gap:var(--wa-space-xs); width:100%; padding:var(--wa-space-xs) var(--wa-space-s); border-radius:10px; border:1px solid color-mix(in srgb, var(--text) 18%, transparent); background:color-mix(in srgb, var(--text) 5%, transparent); color:inherit; cursor:pointer; text-align:left; }
.font-btn:hover{ border-color:var(--primary); }
.font-btn__name{ font-size:17px; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; }
.font-btn__chev{ flex:none; color:var(--text-muted); }

.parc-pal__grad{ display:flex; align-items:center; gap:var(--wa-space-s); flex-wrap:wrap; margin-top:var(--wa-space-3xs); }
.parc-fonts{ display:flex; flex-direction:column; gap:var(--s-3); }
.parc-fonts__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.parc-fonts__col{ display:flex; flex-direction:column; gap:var(--wa-space-xs); min-width:0; }
.parc-fonts__sample{ border-radius:14px; padding:var(--wa-space-m) var(--wa-space-m); border:1px solid color-mix(in srgb, var(--text) 14%, transparent); }
@media (max-width:640px){ .parc-fonts__row{ grid-template-columns:1fr; } }
.logo-swatch{ width:28px; height:28px; border-radius:50%; border:2px solid color-mix(in srgb, var(--text) 30%, transparent); cursor:pointer; padding:0; }
.logo-swatch:hover{ border-color:var(--primary); }

/* assistant questions (form in the chat) */
.qa-card{ margin-top:var(--wa-space-s); display:flex; flex-direction:column; gap:var(--wa-space-s); padding:var(--wa-space-s); border-radius:14px; background:color-mix(in srgb, var(--primary) 8%, transparent); border:1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.qa-q{ display:flex; flex-direction:column; gap:var(--wa-space-xs); }
.qa-q__t{ margin:0; font:600 13.5px/1.35 var(--font-ui); }
.qa-chips{ display:flex; flex-direction:column; gap:var(--wa-space-xs); }
.qa-chip{ text-align:left; padding:var(--wa-space-xs) var(--wa-space-s); border-radius:10px; border:1px solid color-mix(in srgb, var(--text) 18%, transparent); background:color-mix(in srgb, var(--text) 5%, transparent); color:inherit; font:500 13px/1.35 var(--font-ui); cursor:pointer; }
.qa-chip:hover{ border-color:var(--primary); }
.qa-chip.is-on{ border-color:var(--primary); background:color-mix(in srgb, var(--primary) 20%, transparent); }
.qa-mem{ display:flex; align-items:center; gap:var(--wa-space-xs); font:500 12px var(--font-ui); color:var(--text-muted); cursor:pointer; }
.qa-actions{ display:flex; flex-wrap:wrap; gap:var(--wa-space-xs); }

/* ---- (i) hints: explanatory text lives in a tooltip (js/info-hints.js) ---- */
.is-hint-src{ display:none !important; }
.info-i{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:16px; height:16px; margin-left:var(--wa-space-xs); padding:0; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--text) 38%, transparent); background:none; color:var(--text-muted); font:italic 700 10px/1 Georgia, serif; cursor:help; vertical-align:middle; }
.info-i:hover, .info-i:focus-visible{ border-color:var(--primary); color:var(--primary); outline:none; }
.has-info{ display:flex; align-items:center; flex-wrap:wrap; }
.info-tip{ white-space:pre-line; position:fixed; z-index:10000; max-width:min(340px, calc(100vw - 20px)); padding:var(--wa-space-s) var(--wa-space-s); border-radius:10px; background:var(--surface-3); color:var(--text);
  border:1px solid color-mix(in srgb, var(--text) 18%, transparent); box-shadow:0 8px 28px rgba(0,0,0,.4); font:500 12.5px/1.45 var(--font-ui); pointer-events:none; }
.info-tip.hidden{ display:none; }
.parc-pal__warn{ display:flex; align-items:center; gap:var(--wa-space-s); flex-wrap:wrap; padding:var(--wa-space-s) var(--wa-space-s); border-radius:12px; background:color-mix(in srgb, #ffb04d 12%, transparent); border:1px solid color-mix(in srgb, #ffb04d 40%, transparent); }

/* pickers inside dialogs: breathing room around their first row so focus rings (3px) are never cut off */
.photo-picker, .icon-picker, .font-picker{ padding:var(--wa-space-2xs); }

/* A save conflict stays visible and usable on both editor columns and mobile. */
.draft-conflict{ flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--wa-space-s); }
.draft-conflict > div{ min-width:0; }
.draft-conflict > div:first-child{ flex:1 1 280px; }
.draft-conflict p{ margin:var(--wa-space-2xs) 0 0; }
.draft-conflict .row{ gap:var(--wa-space-xs); }

/* multi-selection */
.deco-marquee{ position:absolute; z-index:60; pointer-events:none; border:1px solid var(--primary); background:color-mix(in srgb, var(--primary) 14%, transparent); border-radius:2px; }
.deco-chip.is-marquee{ outline:2px dashed var(--primary); outline-offset:2px; }
.deco-handles--group{ border-style:solid; }

/* layers panel */
.deco-chip.is-hidden{ display:none !important; }
.deco-chip.is-locked{ pointer-events:none; }

/* brand / recent colour swatches under the colour fields */
.swatch-strip{ display:flex; flex-wrap:wrap; gap:var(--wa-space-2xs); margin:calc(-1 * var(--wa-space-3xs)) 0 var(--wa-space-xs); }
.swatch{ width:18px; height:18px; padding:0; border-radius:50%; border:1.5px solid color-mix(in srgb, var(--text) 30%, transparent); cursor:pointer; }
.swatch:hover{ transform:scale(1.15); border-color:var(--primary); }

/* ---- Story template stream: a row of miniature stories above the studio ---- */
.tpl-strip{ display:flex; flex-direction:column; gap:var(--s-2); margin:0 0 var(--s-3); padding:var(--s-3) var(--s-4); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-2); min-width:0; }
.tpl-strip.is-collapsed{ padding-block:var(--s-2); }
.tpl-head{ display:flex; align-items:center; gap:var(--s-3); min-width:0; }
.tpl-title{ font-size:14px; white-space:nowrap; }
.tpl-sub{ flex:1 1 auto; min-width:0; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; }
.tpl-chips{ display:flex; gap:var(--wa-space-xs); overflow-x:auto; scrollbar-width:none; padding-bottom:var(--wa-space-3xs); min-width:0; max-width:100%; }
.tpl-strip{ min-width:0; max-width:100%; }
.tpl-chip{ flex:0 0 auto; }
.tpl-chips::-webkit-scrollbar{ display:none; }
.tpl-chip__n{ font-size:11px; opacity:.65; margin-inline-start:var(--wa-space-2xs); }
.tpl-body{ position:relative; min-width:0; }
.tpl-rail{ display:flex; gap:var(--wa-space-s); overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; padding:var(--wa-space-2xs) var(--wa-space-3xs) var(--wa-space-xs); }
.tpl-rail::-webkit-scrollbar{ display:none; }
.tpl-card{ flex:none; display:flex; flex-direction:column; gap:var(--wa-space-2xs); width:84px; padding:0; border:0; background:none; color:var(--text); font:inherit; cursor:pointer; scroll-snap-align:start; text-align:center; }
.tpl-card__n{ font-size:11.5px; line-height:1.2; overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; opacity:.85; }
.tpl-card:hover .tpl-card__n, .tpl-card:focus-visible .tpl-card__n{ opacity:1; color:var(--primary); }
.tpl-thumb{ position:relative; display:block; width:84px; aspect-ratio:9/16; border-radius:10px; overflow:hidden; container-type:inline-size; border:1px solid color-mix(in srgb, var(--text) 14%, transparent); box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .15s, box-shadow .15s; }
.tpl-thumb .tpl-real{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:5; background:inherit; }
.tpl-card:hover .tpl-thumb, .tpl-card:focus-visible .tpl-thumb{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.28); }
.tpl-card:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; border-radius:10px; }
.tpl-a{ position:absolute; display:block; pointer-events:none; }
.tpl-strip.is-busy .tpl-card{ opacity:.55; cursor:progress; }
.tpl-arrow{ position:absolute; top:34%; z-index:2; box-shadow:var(--wa-shadow-m); }
.tpl-arrow--l{ left:4px; } .tpl-arrow--r{ right:4px; }
@media (max-width:760px){ .tpl-sub{ display:none; } .tpl-arrow{ display:none; } }

/* ---- Parcours tag above the story canvas ---- */
.pc-wrap{ position:relative; align-self:center; z-index:400; }
.pc-tag{ display:inline-flex; align-items:center; gap:var(--wa-space-xs); max-width:min(92vw, 420px); padding:var(--wa-space-2xs) var(--wa-space-s); border:1px solid var(--border); border-radius:999px; background:var(--surface-2); color:var(--text); font:inherit; font-size:12.5px; cursor:default; }
.pc-tag__k{ opacity:.6; text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; }
.pc-tag__name{ overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.pc-tag__name.is-empty{ font-weight:400; opacity:.65; }
.pc-tag__caret{ opacity:.6; font-size:11px; }
.pc-dots{ display:inline-flex; } .pc-dots i{ width:11px; height:11px; border-radius:50%; margin-left:calc(-1 * var(--wa-space-2xs)); border:1.5px solid var(--surface-2); } .pc-dots i:first-child{ margin-left:0; }

 .pc-item.is-on{ background:color-mix(in srgb, var(--primary) 16%, transparent); color:var(--primary); }
.pc-tag__fonts{ display:inline-flex; align-items:center; gap:var(--wa-space-xs); padding-left:var(--wa-space-xs); border-left:1px solid var(--border); font-size:13px; white-space:nowrap; }
.pc-tag__font + .pc-tag__font::before{ content:"·"; margin-right:var(--wa-space-xs); opacity:.5; }
.pc-tag{ max-width:min(94vw, 560px); }
wa-progress-bar.activity-center__progress--posting{ --indicator-color:var(--primary); }
wa-progress-bar.activity-center__progress--pending{ --indicator-color:color-mix(in srgb, var(--primary) 55%, var(--surface-3)); }

/* ---- assistant progress phrases ---- */

/* a picked template, shown as a card in the conversation */
.story-agent-tpl{ display:flex; align-items:center; gap:var(--wa-space-s); }
.story-agent-tpl__mini{ flex:none; display:block; }
.story-agent-tpl__mini .tpl-thumb{ width:38px; border-radius:6px; box-shadow:none; }
.story-agent-tpl__txt{ display:flex; flex-direction:column; gap:var(--wa-space-3xs); min-width:0; }
.story-agent-tpl__k{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; opacity:.65; }
.story-agent-tpl__txt b{ font-size:13.5px; }
.story-agent-tpl__g{ font-size:11.5px; opacity:.7; }

/* ---- AI provider switch (sidebar) ---- */

/* ---- story studio panel rhythm (flat panels, no oversized pill controls) ---- */
.post-studio .sb-card{ border-radius:var(--wa-border-radius-l); padding:var(--wa-space-m); box-shadow:none; }
.post-studio .sb-card__title{ font-size:var(--wa-font-size-s); font-weight:var(--wa-font-weight-semibold); }
.post-studio .shape-field{ gap:var(--wa-space-xs); }
.post-studio .text-actions{ gap:var(--wa-space-2xs); }

/* ---- story tools: "Ajouter" pane — Web Awesome layout utilities + button tiles ---- */
.sb-tiles{ --min-column-size:12rem; gap:var(--wa-space-xs); }
wa-button.sb-tile{ width:100%; }
wa-button.sb-tile::part(base){ height:auto; justify-content:flex-start; align-items:flex-start; padding:var(--wa-space-s); text-align:start; }
/* the label fills the row and reads from the start edge: title and description share one left edge beside the icon */
wa-button.sb-tile::part(label){ white-space:normal; flex:1 1 auto; text-align:start; }
wa-button.sb-tile wa-icon{ margin-top:var(--wa-space-3xs); color:var(--wa-color-text-quiet); }
.sb-tile__body{ display:flex; flex-direction:column; gap:var(--wa-space-3xs); min-width:0; }
.sb-tile__t{ font-weight:var(--wa-font-weight-semibold); }
.sb-tile__d{ font-size:var(--wa-font-size-xs); color:var(--wa-color-text-quiet); }
.sb-add .sb-hint{ margin:0; }

/* ---- story tools: Calques and Fond panes ---- */
.layers-list{ display:flex; flex-direction:column; gap:var(--wa-space-3xs); }
.layers-row{ display:flex; align-items:center; gap:var(--wa-space-3xs); }
.layers-pick{ flex:1 1 auto; min-width:0; }
.layers-pick::part(base){ justify-content:flex-start; }
.layers-pick::part(label){ overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; }
.layers-row.is-off .layers-pick{ opacity:.5; }
.layers-actions{ display:flex; flex:none; gap:var(--wa-space-3xs); }
wa-button-group.bg-ed__kinds{ display:flex; width:100%; }
wa-button-group.bg-ed__kinds > wa-button{ flex:1; }
.bg-ed wa-slider, .bg-ed wa-select{ width:100%; }
wa-tab.cmp-tab wa-icon{ margin-inline:auto; }
/* rail indicators: the icon box holds a song cover / background swatch in place of the icon, a count or a dot on its corner */
.cmp-tab__ic{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; margin-inline:auto; }
.cmp-tab__cover{ width:1.75rem; height:1.75rem; object-fit:cover; border-radius:var(--wa-border-radius-s); box-shadow:0 0 0 var(--wa-border-width-s) var(--wa-color-surface-border); }
.cmp-tab__swatch{ width:1.5rem; height:1.5rem; border-radius:var(--wa-border-radius-s); box-shadow:inset 0 0 0 var(--wa-border-width-s) var(--wa-color-surface-border); }
.cmp-tab__dot{ position:absolute; top:calc(-1 * var(--wa-space-3xs)); right:calc(-1 * var(--wa-space-3xs)); width:var(--wa-space-xs); height:var(--wa-space-xs); border-radius:var(--wa-border-radius-circle);
  background:var(--wa-color-brand-fill-loud); box-shadow:0 0 0 2px var(--wa-color-surface-default); }
wa-badge.cmp-tab__count{ position:absolute; top:calc(-1 * var(--wa-space-2xs)); right:calc(-1 * var(--wa-space-s)); font-size:var(--wa-font-size-2xs); }
wa-badge.cmp-tab__count::part(base){ padding:var(--wa-space-3xs) var(--wa-space-2xs); min-width:1.5em; justify-content:center; }

/* ---- assistant progress: one status block ---- */

/* ---- story tools: Publier pane ---- */
.sb-publish .sched-picker__presets{ margin-top:0; }
wa-details.recur-block::part(base){ border-color:var(--wa-color-surface-border); }

/* =====================================================================================================
   THE ASSISTANT COLUMN — the story's third column: header, conversation, composer pinned at the bottom
   ===================================================================================================== */
.cmp-main.post-studio.has-side{ grid-template-columns:auto minmax(0,1fr) minmax(300px,360px); }
.cmp-side{ min-width:0; display:flex; flex-direction:column; }
.cmp-ai{ background:var(--wa-color-surface-default); border:var(--wa-border-width-s) solid var(--wa-color-surface-border); border-radius:var(--wa-border-radius-l); overflow:hidden; }
.sb-ai{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.sb-ai__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--wa-space-xs); padding:var(--wa-space-xs) var(--wa-space-xs) var(--wa-space-xs) var(--wa-space-m);
  border-bottom:var(--wa-border-width-s) solid var(--wa-color-surface-border); }
.sb-ai__title{ display:flex; align-items:center; gap:var(--wa-space-xs); min-width:0; }
.sb-ai__title > wa-icon{ color:var(--wa-color-brand-on-quiet); flex:none; }
.sb-ai__title h2{ margin:0; }
.sb-ai__tools{ display:flex; gap:var(--wa-space-3xs); flex:none; }
.sb-ai .story-agent-log{ flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:var(--wa-space-m); padding:var(--wa-space-m); scrollbar-width:thin; }

/* turns: the request on the right in a quiet bubble, the assistant's reply flat on the column */
.story-agent-turn{ display:flex; flex-direction:column; gap:var(--wa-space-xs); min-width:0; font-size:var(--wa-font-size-s); line-height:var(--wa-line-height-normal); }
.story-agent-turn__text{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.story-agent-turn--user{ align-self:flex-end; max-width:88%; padding:var(--wa-space-xs) var(--wa-space-s); border-radius:var(--wa-border-radius-l) var(--wa-border-radius-l) var(--wa-border-radius-s) var(--wa-border-radius-l);
  background:var(--wa-color-neutral-fill-quiet); }
.story-agent-turn--assistant{ align-self:stretch; }
.story-agent-turn.is-undone{ opacity:.5; }
.story-agent-turn__tags wa-tag{ max-width:100%; }
.story-agent-turn__actions{ display:flex; gap:var(--wa-space-2xs); }
.story-agent-turn__warn ul{ margin:var(--wa-space-3xs) 0 0; }
.story-agent-turn__ref{ align-self:flex-end; padding:0; border:0; background:none; cursor:zoom-in; }
.story-agent-turn__ref img{ display:block; width:96px; max-height:150px; object-fit:cover; border-radius:var(--wa-border-radius-m); }
.story-agent-turn--pending{ padding:var(--wa-space-s); border-radius:var(--wa-border-radius-l); background:var(--wa-color-neutral-fill-quiet); }

/* choices (the assistant's propositions, the empty state's ideas): full-width rows, label at the start, arrow at the end */
.story-agent-option, .sb-ai__idea{ width:100%; }
.story-agent-option::part(base), .sb-ai__idea::part(base){ justify-content:space-between; text-align:start; }
.story-agent-option::part(label), .sb-ai__idea::part(label){ flex:1 1 auto; text-align:start; }

/* empty conversation */
.sb-ai__empty{ margin-block:auto; padding:var(--wa-space-m) var(--wa-space-2xs); }
.sb-ai__empty h4{ margin:0; }
.sb-ai__empty p{ margin:0; }
.sb-ai__empty-ic{ display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:var(--wa-border-radius-circle);
  background:var(--wa-color-brand-fill-quiet); color:var(--wa-color-brand-on-quiet); }
.sb-ai__ideas{ margin-top:var(--wa-space-xs); }

/* the composer: pinned under the conversation */
.sb-ai__composer{ display:flex; flex-direction:column; gap:var(--wa-space-xs); padding:var(--wa-space-s); border-top:var(--wa-border-width-s) solid var(--wa-color-surface-border); background:var(--wa-color-surface-lowered); }
.sb-ai__composer wa-textarea{ width:100%; }
.sb-ai__bar{ display:flex; align-items:center; gap:var(--wa-space-xs); min-width:0; }
.sb-ai__target{ flex:1 1 auto; min-width:0; display:flex; }
.sb-ai__target wa-tag{ max-width:100%; min-width:0; }
.story-agent-reference{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--wa-space-s); padding:var(--wa-space-xs); border-radius:var(--wa-border-radius-m); background:var(--wa-color-surface-raised); font-size:var(--wa-font-size-xs); }
.story-agent-reference.hidden{ display:none; }
.story-agent-reference img{ width:34px; height:60px; object-fit:contain; border-radius:var(--wa-border-radius-s); }
.story-agent-reference > span{ flex:1 1 0; min-width:0; }
.story-agent-reference .story-agent-reference__status{ flex:1 1 100%; }

/* narrower windows: the assistant moves under the canvas with a fixed-height conversation */
@media (max-width:1180px){ .cmp-main.post-studio.has-side{ grid-template-columns:auto minmax(0,1fr) 300px; } }
@media (max-width:980px){
  .cmp-main.post-studio.has-side{ grid-template-columns:auto minmax(0,1fr); }
  .cmp-main.post-studio.has-side > .cmp-side{ grid-column:1 / -1; height:min(640px, 80vh) !important; }
}
@media (max-width:760px){ .cmp-main.post-studio.has-side{ grid-template-columns:minmax(0,1fr); } }