/* ai-video-agent.css */
/* AI Video Agent: intentionally fits inside the existing composer without adding a panel. */
.kaiAgentToggle{margin-left:auto;display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:#9aa8ba;font-size:10px;font-weight:800;white-space:nowrap;user-select:none}.kaiAgentToggle input{position:absolute;opacity:0;pointer-events:none}.kaiAgentToggle i{width:30px;height:16px;border-radius:999px;background:#263448;border:1px solid #43526a;position:relative;transition:.18s}.kaiAgentToggle i:after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;left:2px;top:2px;background:#a9b4c4;transition:.18s}.kaiAgentToggle.active{color:#d7ccff}.kaiAgentToggle.active i{background:#6546c7;border-color:#876cf0;box-shadow:0 0 0 3px rgba(119,75,232,.08)}.kaiAgentToggle.active i:after{left:16px;background:#fff}.kaiPromptShell.kaiAgentDropTarget{border-color:#9a7cff!important;box-shadow:0 0 0 4px rgba(126,85,239,.13)!important}.kaiPromptShell.kaiAgentDropTarget:before{content:"Drop video to attach";display:block;color:#cfc4ff;font-size:10px;font-weight:800;letter-spacing:.08em;padding:0 4px 6px}.kaiCustomDuration{display:inline-flex;align-items:center;gap:3px;min-width:102px}.kaiCustomDuration input{width:62px!important;min-width:0!important;border:0!important;background:transparent!important;color:inherit!important;font:inherit!important;padding:0!important;outline:0}.kaiCustomDuration em{font-style:normal;color:#718198;font-size:9px}.kaiCustomDuration button{border:0;background:transparent;color:#8392a6;cursor:pointer;padding:1px 3px}.kaiDurationControl>.hidden,.kaiCustomDuration.hidden{display:none!important}@media(max-width:640px){.kaiOutputMode{flex-wrap:wrap}.kaiAgentToggle{margin-left:0}}

/* header-mcp.css */
/* ESVYLA pre-launch header + MCP navigation customization.
   Kept separate from styles.css to preserve the landing performance size gate. */
.l484Header{
  height:76px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 34px;
  background:linear-gradient(180deg,rgba(3,5,10,.72),rgba(3,5,10,0));
}
.l484Brand{display:flex;align-items:center;gap:9px;justify-self:start;color:#fff;text-decoration:none;font-size:11px;letter-spacing:.16em}
.l484Brand span{display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(190,146,255,.5);border-radius:8px;color:#c49aff;background:rgba(113,61,181,.16);font-size:9px}
.l484DesktopNav{display:flex;align-items:center;gap:6px;padding:5px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(8,10,17,.48);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.l484DesktopNav a{color:#d9d9e3;text-decoration:none;font-size:10px;padding:8px 12px;border-radius:999px;transition:background .18s ease,color .18s ease;white-space:nowrap}
.l484DesktopNav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.l484DesktopNav .l484McpLink{color:#e2c8ff}
.l484McpLink span{margin-left:4px;padding:2px 4px;border-radius:4px;background:#8d52df;color:#fff;font-size:6px;letter-spacing:.08em;vertical-align:1px}
.l484HeaderActions{display:flex;align-items:center;justify-self:end;gap:7px}
.l484HeaderActions button{height:34px;padding:0 13px;border-radius:9px;font-size:9px;font-weight:750;cursor:pointer}
.l484SignIn{border:1px solid rgba(255,255,255,.13);background:rgba(8,10,17,.4);color:#f4f1f8}
.l484Register{border:1px solid rgba(178,125,255,.55);background:linear-gradient(135deg,#9a5be5,#6d3ac4);color:#fff;box-shadow:0 8px 28px rgba(111,59,195,.2)}
.l484DrawerNew{margin-left:5px;padding:2px 5px;border-radius:4px;background:#8d52df;color:#fff;font-size:7px}
.l484DrawerBrand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.l484DrawerBrand>span{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(190,146,255,.5);border-radius:9px;color:#c49aff;background:rgba(113,61,181,.16);font-size:10px}
.l484DrawerBrand strong{letter-spacing:.14em;font-size:12px}
@media(max-width:1024px){
  .l484Header{display:flex;justify-content:flex-start;padding:0 16px}
  .l484DesktopNav,.l484Brand,.l484HeaderActions{display:none!important}
  .l484MenuBtn{display:block!important;position:relative;left:auto}
}
@media(min-width:1025px){
  .l484DrawerBrand{display:none}
}