/* ============================================================
   UI chrome — deliberately neutral, never the brand surface.
   The brand lives inside the artboards; if the tool itself were
   coral, you could not judge whether a visual is on-brand.
   Dock and token approach carried over from the design system's
   own LinkedIn Visual Designer shell.
   ============================================================ */

:root{
  --ui-surface:#FFFFFF; --ui-border:#E5E7EB; --ui-heading:#111827; --ui-body:#4B5563;
  --ui-muted:#9AA1AC; --ui-hover:#F3F4F6; --ui-bg:#ECEEF0;
  --ui-accent:#2563EB; --ui-danger:#DC2626;
  --ui-shadow:0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  height:100vh;overflow:hidden;background:var(--ui-bg);color:var(--ui-heading);
  font-family:'Nunito Sans',system-ui,-apple-system,sans-serif;font-size:14px;
}
.view{position:absolute;inset:0 0 78px 0;display:none;}
.view.active{display:flex;flex-direction:column;}

/* ---- top bar ---- */
.bar{
  flex:none;height:56px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 18px;background:var(--ui-surface);border-bottom:1px solid var(--ui-border);
}
.bar-l,.bar-r{display:flex;align-items:center;gap:10px;}
.mark{width:11px;height:11px;border-radius:50%;background:var(--brand-dot,#F2685C);flex:none;}
.ghost{
  border:none;background:transparent;font:inherit;color:var(--ui-heading);
  padding:5px 7px;border-radius:7px;width:150px;
}
.ghost.strong{font-weight:800;}
.ghost:hover{background:var(--ui-hover);}
.ghost:focus{outline:2px solid var(--ui-accent);outline-offset:-1px;background:#fff;}
.sep{width:1px;height:22px;background:var(--ui-border);}

/* ---- board ---- */
.board{flex:1;display:flex;min-height:0;}
.stage{flex:1;display:flex;flex-direction:column;min-width:0;padding:18px 18px 0;}
.hero{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
}
.hero iframe{
  width:1080px;height:1350px;border:0;flex:none;background:#fff;
  border-radius:6px;box-shadow:0 8px 26px rgb(0 0 0 / .16);
  transform-origin:center center;
}
.notes{flex:none;min-height:0;display:flex;flex-direction:column;gap:5px;margin:10px 0 0;}
.note{
  font-size:12.5px;padding:7px 11px;border-radius:8px;line-height:1.4;
  background:#FEF3C7;color:#78350F;border:1px solid #FDE68A;
}
.note.bad{background:#FEE2E2;color:#7F1D1D;border-color:#FECACA;}

.reel-wrap{flex:none;display:flex;align-items:center;gap:10px;padding:14px 0 16px;}
.reel{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;flex:1;}
.thumb{
  flex:none;width:112px;cursor:pointer;border:2px solid transparent;border-radius:8px;
  padding:3px;background:transparent;transition:border-color .12s;
}
.thumb:hover{border-color:var(--ui-border);}
.thumb.sel{border-color:var(--ui-accent);}
.thumb .frame{
  width:104px;height:130px;overflow:hidden;border-radius:5px;background:#fff;
  box-shadow:0 1px 4px rgb(0 0 0 / .12);position:relative;
}
.thumb iframe{
  width:1080px;height:1350px;border:0;position:absolute;top:0;left:0;
  transform:scale(0.0963);transform-origin:top left;pointer-events:none;
}
.thumb .cap{
  display:flex;align-items:center;gap:5px;margin-top:5px;
  font-size:11px;color:var(--ui-muted);
}
.thumb .cap b{color:var(--ui-heading);font-weight:800;}
.dot{width:7px;height:7px;border-radius:50%;flex:none;}

/* ---- inspector ---- */
.inspector{
  flex:none;width:358px;background:var(--ui-surface);border-left:1px solid var(--ui-border);
  display:flex;flex-direction:column;min-height:0;
}
.insp-head{
  flex:none;padding:11px 16px;border-bottom:1px solid var(--ui-border);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.insp-head h3{margin:0;font-size:14px;font-weight:800;}
.insp-actions{display:flex;gap:5px;}
#insp-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px;}
.insp-foot{
  flex:none;padding:12px 16px;border-top:1px solid var(--ui-border);display:flex;gap:8px;
}

.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
.field > span{font-size:11.5px;font-weight:700;color:var(--ui-body);letter-spacing:.02em;}
.field.inline{flex-direction:row;align-items:center;gap:7px;margin:0;}
.field.inline > span{font-size:11.5px;color:var(--ui-muted);}
input[type=text],textarea,select{
  font:inherit;color:var(--ui-heading);background:#fff;
  border:1px solid var(--ui-border);border-radius:8px;padding:7px 9px;width:100%;
}
textarea{resize:vertical;line-height:1.45;}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ui-accent);outline-offset:-1px;}
.hint{font-size:11px;color:var(--ui-muted);margin:-6px 0 10px;line-height:1.35;}
/* Mechanism intents are written for the model and run long. Clamp to
   two lines here; the full text stays on the title attribute. */
.hint.intent{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;cursor:help;
}

.group{border:1px solid var(--ui-border);border-radius:10px;padding:10px;margin-bottom:9px;}
.group h4{margin:0 0 9px;font-size:11.5px;font-weight:800;color:var(--ui-body);}
.rowset{display:flex;flex-direction:column;gap:7px;}
.rowitem{display:flex;gap:5px;align-items:center;}
.rowitem input{flex:1;min-width:0;}
.x{
  flex:none;width:24px;height:24px;border:1px solid var(--ui-border);background:#fff;
  border-radius:6px;cursor:pointer;color:var(--ui-muted);line-height:1;
}
.x:hover{border-color:var(--ui-danger);color:var(--ui-danger);}

.swatches{display:flex;gap:6px;flex-wrap:wrap;}
.sw{
  width:28px;height:28px;border-radius:8px;border:2px solid transparent;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .08);
}
.sw.on{border-color:var(--ui-heading);}

/* ---- buttons ---- */
.btn{
  font:inherit;font-weight:700;font-size:12.5px;cursor:pointer;
  background:#fff;color:var(--ui-heading);border:1px solid var(--ui-border);
  border-radius:9px;padding:8px 13px;transition:background .12s,border-color .12s;
}
.btn:hover{background:var(--ui-hover);}
.btn.primary{background:var(--ui-heading);color:#fff;border-color:var(--ui-heading);}
.btn.primary:hover{background:#000;}
.btn.primary:disabled{opacity:.45;cursor:default;}
.btn.ghostbtn{background:transparent;}
.btn.tiny{padding:5px 9px;font-size:11.5px;}
.btn.danger:hover{border-color:var(--ui-danger);color:var(--ui-danger);}
.btn.icon{width:34px;padding:0;height:34px;font-size:16px;}
.btn:disabled{opacity:.4;cursor:default;}

/* ---- panes (compose / brand) ---- */
.pane{
  max-width:760px;margin:0 auto;padding:38px 26px;width:100%;
  overflow-y:auto;
}
.pane h2{margin:0 0 6px;font-size:22px;font-weight:800;}
.lead{margin:0 0 20px;color:var(--ui-body);line-height:1.55;}
.row{display:flex;align-items:center;gap:12px;margin-top:14px;}
.status{font-size:13px;margin-bottom:12px;line-height:1.5;}
.status.err{color:var(--ui-danger);}
.status.ok{color:#047857;}
.log{margin-top:18px;display:flex;flex-direction:column;gap:8px;}
.log .entry{
  font-size:12.5px;padding:9px 12px;border-radius:9px;background:#fff;
  border:1px solid var(--ui-border);line-height:1.5;
}
.log .entry.bad{border-color:#FECACA;background:#FEF2F2;}
.brand-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.brand-grid .field{margin:0;}
.swatch-row{display:flex;gap:8px;align-items:center;}
.swatch-row input[type=color]{
  width:38px;height:34px;padding:0;border:1px solid var(--ui-border);
  border-radius:8px;background:#fff;cursor:pointer;
}
.gaps{
  margin-top:22px;font-size:12.5px;line-height:1.6;color:#78350F;
  background:#FEF3C7;border:1px solid #FDE68A;border-radius:10px;padding:12px 14px;
}
.gaps:empty{display:none;}

/* ---- dock (from the design system shell) ---- */
.dock{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:2px;padding:6px;
  background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:16px;
  box-shadow:var(--ui-shadow);
}
.dbtn{
  position:relative;width:42px;height:42px;border:none;background:transparent;border-radius:11px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ui-body);
  transition:background .12s,color .12s;
}
.dbtn svg{width:20px;height:20px;}
.dbtn:hover{background:var(--ui-hover);color:var(--ui-heading);}
.dbtn.active{background:var(--ui-heading);color:#fff;}
.dsep{width:1px;height:24px;background:var(--ui-border);margin:0 5px;}
.dbtn::after{
  content:attr(data-label);position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--ui-heading);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;
  padding:5px 9px;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;
}
.dbtn:hover::after{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---- top bar under pressure ----------------------------------
   The bar gained a client picker, a project picker and two actions.
   Below ~1500px those push the undo controls off-screen, so labels
   drop first and the name fields narrow — the controls themselves
   never disappear. */
@media (max-width: 1500px){
  .bar{gap:10px;padding:0 12px;}
  .bar-r{gap:7px;}
  .field.inline > span{display:none;}
  .ghost{width:118px;}
}
@media (max-width: 1180px){
  .ghost.strong{width:104px;}
  .ghost:not(.strong){width:92px;}
  #p-category{display:none;}
}

/* ---- chat: de primaire ingang --------------------------------
   Links van het canvas, niet in een aparte view. Praten en kijken
   moeten tegelijk kunnen — anders wordt chat een formulier dat je
   invult en verlaat, in plaats van een gesprek over wat je ziet. */
.chat{
  flex:none;width:340px;background:var(--ui-surface);
  border-right:1px solid var(--ui-border);
  display:flex;flex-direction:column;min-height:0;
}
.chat-head{
  flex:none;padding:11px 16px;border-bottom:1px solid var(--ui-border);
  display:flex;align-items:center;justify-content:space-between;
}
.chat-head h3{margin:0;font-size:14px;font-weight:800;}
.chat-log{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:14px 16px;display:flex;flex-direction:column;gap:11px;
}
.msg{font-size:13px;line-height:1.5;border-radius:11px;padding:9px 12px;max-width:100%;}
.msg.user{background:var(--ui-heading);color:#fff;align-self:flex-end;}
.msg.bot{background:var(--ui-hover);color:var(--ui-heading);}
.msg.sys{
  background:transparent;color:var(--ui-muted);font-size:11.5px;
  padding:0 2px;font-style:italic;
}
.msg.err{background:#FEF2F2;color:#7F1D1D;border:1px solid #FECACA;}
.msg .tag{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;opacity:.6;margin-bottom:4px;
}
.chat-input{
  flex:none;padding:12px 16px;border-top:1px solid var(--ui-border);
  display:flex;flex-direction:column;gap:8px;
}
.chat-empty{color:var(--ui-muted);font-size:12.5px;line-height:1.55;}
@media (max-width: 1400px){ .chat{width:296px;} }

/* ---- headline engine: ranked suggestions in the inspector ---- */
.hl-trigger{margin:-2px 0 10px;}
.hl-box{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;}
.hl-item{
  padding:8px 10px;border:1px solid var(--ui-border);border-radius:9px;
  background:var(--ui-surface);cursor:pointer;transition:border-color .12s,box-shadow .12s;
}
.hl-item:hover{border-color:var(--ui-heading);box-shadow:var(--ui-shadow);}
.hl-h{font-weight:800;font-size:13px;line-height:1.32;color:var(--ui-heading);}
.hl-m{font-size:11px;color:var(--ui-muted);margin-top:4px;line-height:1.35;}
.hl-item.best .hl-h::after{content:' ★';color:var(--ui-accent);}