/* App shell: sidebar, tool top bars, collapsible sections and the preview stage (js/app-ui.js).
   Loaded last so it can refine the tool styles in marketing-toolkit.css. :is(#tab-text,#tab-chat,.tool-text,.tool-chat) = any tool panel. */
:root{--side-w:248px;--top-h:76px;--radius:14px;--shadow:0 1px 2px rgba(20,32,30,.05),0 1px 1px rgba(20,32,30,.03);
  --shadow-lg:0 10px 30px rgba(20,32,30,.10);--hover:rgba(14,111,92,.07);--stage:#E6EBE9}

body{padding:0}
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}

/* ---------- sidebar ---------- */
.app-side{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;
  background:var(--panel);border-right:1px solid var(--line);padding:18px 14px 16px max(14px,env(safe-area-inset-left,0px))}
.side-brand{display:flex;align-items:center;gap:11px;padding:2px 6px 16px}
.side-logo{width:38px;height:38px;border-radius:10px;display:block;flex:none;object-fit:cover;background:#04211C}
.side-brand h1{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.2px;line-height:1.15;margin:0}
.side-cog{margin-left:auto;align-self:flex-start;width:32px;height:32px;display:grid;place-items:center;flex:none;cursor:pointer;
  border:1px solid transparent;border-radius:8px;background:none;color:var(--muted);padding:0}
.side-cog svg{width:19px;height:19px}
.side-cog:hover{background:var(--hover);color:var(--fg);border-color:var(--line)}
.side-cog:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.side-brand h1 small{display:block;font-family:var(--body);font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--muted)}
.side-l{margin:6px 8px 2px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.app-side .tabs{display:flex;flex-direction:column;gap:2px;background:none;border:0;padding:0;border-radius:0}
.app-side .tabs button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 10px;border-radius:10px;color:var(--fg);font-weight:600;font-size:14.5px;line-height:1.25}
.app-side .tabs button svg{width:20px;height:20px;flex:none;color:var(--muted)}
.app-side .tabs button small{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
.app-side .tabs button:hover{background:var(--hover)}
.app-side .tabs button[aria-selected=true]{background:var(--sunk);box-shadow:inset 3px 0 0 var(--accent)}
.app-side .tabs button[aria-selected=true] svg{color:var(--accent)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.side-note{margin:0;font-size:12px;color:var(--muted);line-height:1.45}
kbd{font-family:var(--mono);font-size:11px;background:var(--sunk);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 4px}

/* ---------- main area ---------- */
.app-main{min-width:0;padding:0 max(28px,env(safe-area-inset-right,0px)) 48px 28px}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .shell{max-width:1560px;grid-template-columns:minmax(0,1fr) minmax(340px,460px);gap:24px}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) header.top{position:sticky;top:0;z-index:30;min-height:var(--top-h);align-items:center;flex-wrap:nowrap;gap:16px;padding:14px 0;
  margin-bottom:2px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) header.top .tt{display:flex;flex-direction:column;gap:2px;min-width:0}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .apptitle{font-size:23px}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) header.top p{font-size:13.5px;max-width:64ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) header.top .actions{display:flex;gap:8px;margin-left:auto;flex:none;align-items:center}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) header.top .actions button{white-space:nowrap;font-size:14px;align-self:auto}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) header.top .actions button.primary{padding:9px 18px;box-shadow:var(--shadow)}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) header.top .actions button.ghost{border-color:transparent}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) header.top .actions button.ghost:hover{background:var(--hover);border-color:transparent}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) header.top .actions .bk-save+button:not(.bk-save){margin-left:6px}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .editor{gap:14px}

/* ---------- cards: quieter, collapsible ---------- */
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) section.card{border-radius:var(--radius);box-shadow:var(--shadow);padding:6px 18px 18px;gap:0}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) section.card>h2{min-height:52px;font-size:16.5px;flex-wrap:nowrap}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) section.card>h2>.card-tog{display:flex;align-items:center;gap:8px;flex:1;min-width:0;text-align:left;background:none;border:0;border-radius:8px;padding:10px 6px 10px 2px;margin-left:-4px;
  font-family:var(--display);font-size:16.5px;font-weight:700;letter-spacing:0;color:var(--fg)}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) section.card>h2>.card-tog:hover{background:none;color:var(--accent)}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .card-tog small{margin-left:4px}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .card-chev{width:20px;height:20px;flex:none;color:var(--muted);transition:transform .2s}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .collapsed .card-chev{transform:rotate(-90deg)}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) section.card.collapsed{padding-bottom:6px}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .card-sum{margin:-8px 0 8px 26px;font-size:13px;color:var(--muted);cursor:pointer}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .card-body{display:flex;flex-direction:column;gap:12px;padding-top:4px}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .card-body[hidden]{display:none}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) section.card>h2>button:not(.card-tog){flex:none;font-size:13.5px;padding:6px 12px}
@media (prefers-reduced-motion:reduce){:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .card-chev{transition:none}}

/* ---------- form controls: sentence-case labels, softer fields ---------- */
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) label,:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .lbl{font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--muted)}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .grp .lbl{font-size:12px}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) input[type=text],:is(#tab-text,#tab-chat,.tool-text,.tool-chat) input[type=number],:is(#tab-text,#tab-chat,.tool-text,.tool-chat) select,:is(#tab-text,#tab-chat,.tool-text,.tool-chat) textarea{background:var(--panel);border-color:var(--line);transition:border-color .15s,box-shadow .15s}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) input[type=text]:hover,:is(#tab-text,#tab-chat,.tool-text,.tool-chat) input[type=number]:hover,:is(#tab-text,#tab-chat,.tool-text,.tool-chat) select:hover,:is(#tab-text,#tab-chat,.tool-text,.tool-chat) textarea:hover{border-color:color-mix(in srgb,var(--muted) 55%,var(--line))}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) input[type=text]:focus,:is(#tab-text,#tab-chat,.tool-text,.tool-chat) input[type=number]:focus,:is(#tab-text,#tab-chat,.tool-text,.tool-chat) select:focus,:is(#tab-text,#tab-chat,.tool-text,.tool-chat) textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);outline:none}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) textarea{field-sizing:content;max-height:240px}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .slide input[type=text],:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .slide input[type=number],:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .slide select,:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .slide textarea{background:var(--panel)}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .person,:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .msg,:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .sfx{background:var(--bg);border-color:var(--line)}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .person input,:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .msg input,:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .msg select,:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .msg textarea,:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .person select{background:var(--panel)}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) button{transition:border-color .15s,background-color .15s}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) button.primary:hover{filter:brightness(1.07)}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .hint{line-height:1.5}

/* ---------- preview stage ---------- */
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .preview{top:calc(var(--top-h) + 6px);max-height:calc(100vh - var(--top-h) - 18px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;gap:10px;scrollbar-width:thin}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .preview .fp-controls{border:0;padding:0 2px;background:none;border-radius:0}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .frame{background:var(--stage);border:0;border-radius:10px;padding:14px;align-items:center}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .frame canvas{width:auto;max-width:100%;max-height:calc(100vh - var(--top-h) - 220px);border-radius:4px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .fp-stage{border-radius:10px;flex:none}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .frame[hidden]{display:none}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .preview>*{flex-shrink:0}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .transport{background:var(--sunk);border-radius:999px;padding:5px 14px 5px 5px;gap:12px}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .transport button.icon{width:38px;height:38px;border-radius:50%;padding:0;display:grid;place-items:center;font-size:14px;
  background:var(--accent);color:var(--accent-fg);border-color:var(--accent);flex:none}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .transport button.icon:hover{filter:brightness(1.07)}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .export{background:none;border:0;padding:0 4px;gap:6px}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .export .bar{height:4px}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .export .status:empty{display:none}
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .export:has(.status:empty) .bar{display:none}

/* the slide details drawer opens beside the sidebar, over the editor, leaving the preview in view */
@media (min-width:901px){#tab-text .tl-details{left:var(--side-w);width:min(480px,calc(100vw - var(--side-w)))}}

/* ---------- Creative: text animator, group chat animator and library share one sidebar entry ---------- */
.creative-bar{display:flex;align-items:flex-end;gap:12px 20px;border-bottom:1px solid var(--line);padding-top:16px}
.creative-bar[hidden]{display:none}
.subtabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.creative-brand{margin-left:auto;padding-bottom:8px}
.creative-brand .bk-bar{flex-wrap:nowrap}
.creative-brand .bk-bar label{font-size:12.5px;letter-spacing:0;text-transform:none}
.creative-brand .bk-bar select{min-width:180px;max-width:280px}
.subtabs button{font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;border:0;background:none;color:var(--muted);
  padding:8px 12px 10px;border-radius:8px 8px 0 0;box-shadow:inset 0 -2px 0 transparent}
.subtabs button:hover{color:var(--fg);background:var(--hover)}
.subtabs button[aria-selected=true]{color:var(--fg);box-shadow:inset 0 -3px 0 var(--accent)}
.subtabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- narrower screens ---------- */
@media (max-width:1180px){:root{--side-w:212px}.app-side .tabs button small{display:none}:is(#tab-text,#tab-chat,.tool-text,.tool-chat) .shell{grid-template-columns:minmax(0,1fr) minmax(300px,390px)}}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  :is(#tab-text,#tab-chat,.tool-text,.tool-chat) .shell{grid-template-columns:minmax(0,1fr)}
  .app-side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 14px;border-right:0;border-bottom:1px solid var(--line);padding:12px 16px}
  .side-brand{padding:0;margin-right:auto}.side-l,.side-note{display:none}
  .app-side .tabs{flex-direction:row;order:3;width:100%;overflow-x:auto}
  .app-side .tabs button{width:auto;flex:1 0 auto;padding:8px 12px}
  .app-side .tabs button[aria-selected=true]{box-shadow:inset 0 -3px 0 var(--accent)}
  .side-foot{margin:0;padding:0;border:0;flex-direction:row;align-items:center;gap:8px;width:100%}
  .creative-bar{flex-wrap:wrap}.creative-brand{padding:8px 0}
  .app-main{padding:0 16px 40px}
  :is(#tab-text,#tab-chat,.tool-text,.tool-chat) header.top{position:static;flex-wrap:wrap;min-height:0}
  :is(#tab-text,#tab-chat,.tool-text,.tool-chat) header.top p{white-space:normal}
  :is(#tab-text,#tab-chat,.tool-text,.tool-chat) header.top .actions{flex:1 1 100%;flex-wrap:wrap;margin-left:0}
  :is(#tab-text,#tab-chat,.tool-text,.tool-chat) header.top .actions button.primary{margin-left:auto}
  :is(#tab-text,#tab-chat,.tool-text,.tool-chat) .preview{position:static;max-height:none;overflow:visible}
  :is(#tab-text,#tab-chat,.tool-text,.tool-chat) .frame canvas{max-height:58vh}
}

/* music: controls that only apply to an uploaded track */
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) [data-upload-only][hidden]{display:none!important}
/* a button that reads as an inline link */
:is(#tab-text,#tab-chat,.tool-text,.tool-chat) button.linkish,.bk-dlg button.linkish{display:inline;border:0;background:none;padding:0;font:inherit;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}