/* CorteVivo — suíte NLE. Estética: utilitário-industrial, quase-preto,
   hairlines 1px, timecodes mono. Âmbar = você · Ciano = agente. */
:root {
  --bg: #0b0c0e;
  --srf: #121417;
  --srf2: #181b1f;
  --srf3: #1f2329;
  --line: #262b32;
  --line2: #30363f;
  --txt: #e9ecf1;
  --dim: #7d8694;
  --faint: #4b535f;
  --amber: #ffb020;
  --amber-dim: #8a5f12;
  --cyan: #38d1ff;
  --ok: #3ecf8e;
  --err: #ff6b6b;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--txt); font: 13px/1.45 var(--sans); overflow: hidden; }
body::after { /* grão sutil de sala escura */
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
button, input, select, textarea { font: inherit; color: inherit; }
.tc { font-family: var(--mono); font-size: 12px; color: var(--dim); letter-spacing: .02em; }

/* ---------- login ---------- */
#login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background:
  radial-gradient(1200px 600px at 70% -10%, #15202b 0%, transparent 60%), var(--bg); z-index: 100; }
.login-card { width: 320px; background: var(--srf); border: 1px solid var(--line); padding: 36px 30px 30px; display: flex; flex-direction: column; gap: 12px; }
.logo-mark { font-weight: 700; font-size: 26px; letter-spacing: .14em; }
.logo-mark span { color: var(--amber); }
.logo-mark.sm { font-size: 15px; }
.login-sub { color: var(--dim); font-size: 12px; margin-bottom: 14px; }
.login-card input { background: var(--bg); border: 1px solid var(--line2); padding: 10px 12px; outline: none; }
.login-card input:focus { border-color: var(--amber); }
#loginerr { color: var(--err); font-size: 12px; min-height: 15px; }

/* ---------- botões ---------- */
.btn { background: var(--srf3); border: 1px solid var(--line2); padding: 7px 14px; cursor: pointer; font-weight: 500; }
.btn:hover { border-color: var(--dim); }
.btn.accent { background: var(--amber); border-color: var(--amber); color: #171205; font-weight: 600; }
.btn.accent:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.mini { background: transparent; border: 1px solid var(--line2); color: var(--dim); font-size: 11px; padding: 2px 9px; cursor: pointer; }
.mini:hover { color: var(--txt); border-color: var(--dim); }
.mini.danger:hover { color: var(--err); border-color: var(--err); }

/* ---------- shell ---------- */
#app { display: grid; grid-template-rows: 46px 1fr 268px; height: 100vh; }
#topbar { display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--srf); border-bottom: 1px solid var(--line); }
.tb-spacer { flex: 1; }
.proj-sel { background: var(--srf3); border: 1px solid var(--line2); padding: 6px 10px; max-width: 240px; }
.live-chip, .agent-chip { display: flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.live-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--err); }
.live-chip.on i { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 1.8s infinite; }
.agent-chip { color: var(--cyan); }
.agent-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse .9s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
#btn-feed b { color: var(--cyan); font-weight: 600; margin-left: 4px; }

#workspace { display: grid; grid-template-columns: 252px 1fr 288px; gap: 1px; background: var(--line); min-height: 0; }
.panel { background: var(--srf); min-height: 0; display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 9px 12px; font-size: 10px; letter-spacing: .16em; color: var(--dim); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.panel-head-label { font-size: 10px; letter-spacing: .16em; color: var(--dim); }

/* ---------- bin ---------- */
.bin-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.asset-card { display: grid; grid-template-columns: 64px 1fr; gap: 9px; padding: 6px; border: 1px solid transparent; cursor: pointer; background: var(--srf2); }
.asset-card:hover { border-color: var(--line2); }
.asset-card.sel { border-color: var(--amber); }
.asset-card.agent-flash { animation: agentflash 1.6s; }
.asset-thumb { width: 64px; height: 40px; object-fit: cover; background: #000; }
.asset-thumb.ph { display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--faint); letter-spacing: .1em; border: 1px dashed var(--line2); }
.asset-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-meta { font-family: var(--mono); font-size: 10px; color: var(--dim); display: flex; gap: 7px; margin-top: 3px; }
.badge-tr { color: var(--ok); }

/* ---------- monitor ---------- */
.mon-stage { flex: 1; min-height: 0; background: #000; display: flex; align-items: center; justify-content: center; position: relative; }
.mon-stage video { max-width: 100%; max-height: 100%; }
.mon-empty { position: absolute; color: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: .2em; }
.mon-ctl { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.jobchip { font-family: var(--mono); font-size: 10px; color: var(--dim); border: 1px solid var(--line2); padding: 3px 8px; display: inline-flex; align-items: center; gap: 6px; }
.jobchip i { width: 44px; height: 3px; background: var(--srf3); position: relative; }
.jobchip i b { position: absolute; inset: 0 auto 0 0; background: var(--cyan); }
.jobchip.pronto i b { background: var(--ok); }
.jobchip.erro { color: var(--err); border-color: var(--err); }

/* ---------- inspector ---------- */
.insp-body { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 14px; }
.insp-sec { border: 1px solid var(--line); background: var(--srf2); }
.insp-sec > h4 { margin: 0; padding: 7px 10px; font-size: 10px; letter-spacing: .14em; color: var(--dim); border-bottom: 1px solid var(--line); font-weight: 600; }
.insp-rows { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.row { display: grid; grid-template-columns: 86px 1fr; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
.row input[type="number"], .row input[type="text"], .row select, .insp-rows textarea {
  background: var(--bg); border: 1px solid var(--line2); padding: 5px 8px; width: 100%; font-family: var(--mono); font-size: 12px; outline: none; }
.row input:focus, .row select:focus, .insp-rows textarea:focus { border-color: var(--amber); }
.insp-rows textarea { font-family: var(--sans); resize: vertical; min-height: 54px; }
.row-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.insp-hint { color: var(--faint); font-size: 11px; padding: 0 2px; }

/* ---------- timeline ---------- */
#timeline { border-top: 1px solid var(--line); }
.tl-head { display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--line); }
.zoom-lbl { font-size: 10px; letter-spacing: .12em; color: var(--dim); display: flex; align-items: center; gap: 8px; }
.zoom-lbl input { accent-color: var(--amber); width: 120px; }
.tl-scroll { overflow-x: auto; overflow-y: hidden; flex: 1; }
.tl-inner { position: relative; min-width: 100%; padding-left: 44px; }
.ruler { height: 22px; position: relative; border-bottom: 1px solid var(--line); cursor: crosshair; }
.ruler .tick { position: absolute; bottom: 0; width: 1px; height: 6px; background: var(--line2); }
.ruler .tick.maj { height: 11px; background: var(--dim); }
.ruler .tick-lbl { position: absolute; bottom: 8px; font-family: var(--mono); font-size: 9px; color: var(--faint); transform: translateX(3px); }
.playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--amber); z-index: 6; pointer-events: none; }
.playhead::before { content: ""; position: absolute; top: 0; left: -5px; border: 5px solid transparent; border-top-color: var(--amber); }
.track { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); position: relative; }
.track-tag { position: absolute; left: -44px; width: 44px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; color: var(--faint); border-right: 1px solid var(--line); top: 0; bottom: 0; background: var(--srf); z-index: 5; }
.track-lane { position: relative; height: 56px; flex: 1; background: repeating-linear-gradient(90deg, transparent 0 59px, rgba(255,255,255,.015) 59px 60px); }
.track[data-track="text"] .track-lane, .track[data-track="cap"] .track-lane { height: 30px; }
.track[data-track="audio"] .track-lane { height: 34px; }

.clip { position: absolute; top: 4px; bottom: 4px; background: var(--srf3); border: 1px solid var(--line2); border-left: 3px solid var(--amber-dim); overflow: hidden; cursor: grab; user-select: none; }
.clip .clip-name { font-size: 11px; font-weight: 500; padding: 4px 7px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip .clip-meta { font-family: var(--mono); font-size: 9px; color: var(--dim); padding: 1px 7px; white-space: nowrap; }
.clip.sel { border-color: var(--amber); border-left-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.clip.agent-flash { animation: agentflash 1.6s; }
.clip .thumbbg { position: absolute; inset: 0; opacity: .25; background-size: cover; background-position: center; pointer-events: none; }
.handle { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 3; }
.handle.l { left: 0; } .handle.r { right: 0; }
.handle:hover { background: rgba(255,176,32,.35); }
.tclip { position: absolute; top: 3px; bottom: 3px; background: #2b2440; border: 1px solid #52447e; font-size: 10px; padding: 2px 7px; white-space: nowrap; overflow: hidden; cursor: pointer; user-select: none; }
.tclip.sel { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.tclip.agent-flash { animation: agentflash 1.6s; }
.capbar { position: absolute; top: 3px; bottom: 3px; background: #14323c; border: 1px solid #2b5a68; font-size: 10px; padding: 2px 8px; color: #9bd8e8; white-space: nowrap; }
.audioclip { position: absolute; top: 3px; bottom: 3px; background: #15342a; border: 1px solid #2c5f4c; font-size: 10px; padding: 3px 8px; color: #9fe0c3; white-space: nowrap; overflow: hidden; }
.lane-empty { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 10px; color: var(--faint); font-size: 10px; letter-spacing: .1em; }
.transition-pip { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 4; background: var(--srf); border: 1px solid var(--cyan); color: var(--cyan); font-family: var(--mono); font-size: 8px; padding: 1px 4px; pointer-events: none; }

@keyframes agentflash { 0% { box-shadow: 0 0 0 2px var(--cyan); } 70% { box-shadow: 0 0 0 2px var(--cyan); } 100% { box-shadow: none; } }

/* ---------- feed drawer / toasts ---------- */
#feed-drawer { position: fixed; top: 46px; right: 0; bottom: 0; width: 320px; background: var(--srf); border-left: 1px solid var(--line); z-index: 40; display: flex; flex-direction: column; box-shadow: -18px 0 40px rgba(0,0,0,.5); }
#feed { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.evt { display: flex; gap: 8px; font-size: 12px; align-items: flex-start; }
.evt .who { flex-shrink: 0; font-family: var(--mono); font-size: 9px; padding: 2px 6px; margin-top: 1px; letter-spacing: .06em; }
.evt .who.agente { background: #0c2a35; color: var(--cyan); }
.evt .who.sistema { background: #23262b; color: var(--dim); }
.evt .who.user { background: #332508; color: var(--amber); }
.evt time { display: block; font-family: var(--mono); font-size: 9px; color: var(--faint); margin-top: 2px; }
#toasts { position: fixed; bottom: 286px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.toast { background: var(--srf); border: 1px solid var(--cyan); border-left-width: 3px; padding: 8px 14px; font-size: 12px; animation: toastin .25s ease, toastout .4s ease 4.6s forwards; max-width: 520px; box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.toast .who { color: var(--cyan); font-family: var(--mono); font-size: 10px; margin-right: 8px; }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }
@keyframes toastout { to { opacity: 0; transform: translateY(6px); } }