/* =====================================================
   iAdsClick Presentation Suite — Shared Styles
   File: css/styles.css
   ===================================================== */
:root{
  --stage:#0B0E12;
  --panel:#14181F;
  --panel-2:#1B212B;
  --line:#262E3A;
  --text:#E7ECEF;
  --muted:#7C8794;
  --accent:#2DE3C8;
  --accent-dim:#1B6F63;
  --warn:#FF8A3D;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;overflow:hidden;}
body{background:var(--stage);color:var(--text);font-family:'Inter',sans-serif;display:flex;flex-direction:column;}

/* ---- Mode bar ---- */
.mode-bar{display:flex;align-items:stretch;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;flex-shrink:0;}
.mode-bar::-webkit-scrollbar{display:none;}
.mode-tab{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:12px 15px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0;}
.mode-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.mode-tab:hover:not(.active){color:var(--text);}

/* ---- Shared buttons / inputs ---- */
.btn{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;padding:9px 14px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer;white-space:nowrap;}
.btn:hover{border-color:var(--accent);color:var(--accent);}
.btn.primary{background:var(--accent);color:#04201C;border-color:var(--accent);}
.btn.primary:hover{background:#27cdb5;}
.btn.danger{background:#3a1418;border-color:#7a2330;color:#ff9aa5;}
.btn.danger:hover{border-color:#ff5d72;color:#ff5d72;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn.icon{padding:9px 11px;}
input[type=text],input[type=password],select{background:var(--stage);border:1px solid var(--line);color:var(--text);border-radius:var(--radius);padding:9px 12px;font-size:13px;font-family:'Inter',sans-serif;outline:none;}
input:focus,select:focus{border-color:var(--accent);}
select{width:100%;margin-bottom:8px;}
textarea{width:100%;background:var(--stage);border:1px solid var(--line);color:var(--text);border-radius:var(--radius);padding:10px 12px;font-size:13px;font-family:'Inter',sans-serif;resize:vertical;min-height:80px;outline:none;}
textarea:focus{border-color:var(--accent);}
.switch{position:relative;width:36px;height:20px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;inset:0;background:var(--line);border-radius:20px;cursor:pointer;transition:.2s;}
.slider:before{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
.switch input:checked+.slider{background:var(--accent);}
.switch input:checked+.slider:before{transform:translateX(16px);}
.divider{height:1px;background:var(--line);margin:10px 0;}
.hint{font-size:11px;color:var(--muted);line-height:1.5;margin:0;}
.h4{margin:0 0 6px;font-family:'Space Grotesk',sans-serif;font-size:11.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;}
.row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:12.5px;}
.row-between label{color:var(--text);}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.chip{padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:600;background:var(--panel-2);border:1px solid var(--line);color:var(--muted);cursor:pointer;}
.chip:hover{border-color:var(--accent);color:var(--accent);}
.hidden-el{display:none !important;}

/* ---- Full-mode panels ---- */
.full-mode{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0;}
.full-mode.active{display:flex;}
.split-2col{display:grid;grid-template-columns:320px 1fr;flex:1;overflow:hidden;min-height:0;}
.side-col{background:var(--panel);border-right:1px solid var(--line);padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
.main-col{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--stage);min-height:0;}

/* ---- Viewer tab ---- */
.control-strip{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;flex-shrink:0;}
.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;color:var(--text);white-space:nowrap;}
.brand span{color:var(--accent);}
.url-input{flex:1;min-width:200px;background:var(--stage);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);font-size:13px;padding:9px 12px;outline:none;}
.url-input:focus{border-color:var(--accent);}
.tab-rail{display:flex;align-items:center;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto;padding:0 10px;flex-shrink:0;scrollbar-width:none;}
.tab-rail::-webkit-scrollbar{display:none;}
.viewer-tab{display:flex;align-items:center;gap:6px;padding:8px 12px;border-right:1px dashed var(--line);cursor:pointer;flex-shrink:0;color:var(--muted);font-size:12px;max-width:200px;}
.viewer-tab.active{color:var(--accent);background:var(--panel-2);}
.viewer-tab .tab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.viewer-tab .tab-pop,.viewer-tab .tab-close{opacity:.5;font-size:12px;}
.viewer-tab .tab-pop:hover,.viewer-tab .tab-close:hover{opacity:1;}
.viewer-tab .tab-close:hover{color:var(--warn);}
.tab-empty{padding:9px 14px;color:var(--muted);font-size:12px;font-style:italic;}
.stage-wrap{position:relative;flex:1;background:#000;overflow:hidden;}
.stage-wrap.drag-over::after{content:"Drop to add";position:absolute;inset:10px;border:2px dashed var(--accent);border-radius:14px;background:rgba(45,227,200,.07);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;color:var(--accent);z-index:40;pointer-events:none;}
.stage-wrap iframe,.stage-wrap video,.stage-wrap img{width:100%;height:100%;border:0;display:block;object-fit:contain;background:#000;}
.stage-placeholder{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--muted);}
.stage-placeholder b{color:var(--text);font-size:18px;font-weight:700;}
.mask{position:absolute;background:var(--stage);pointer-events:none;z-index:5;}
.settings-toggle{position:relative;}
.settings-panel{position:absolute;top:50px;right:0;width:280px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px;z-index:50;display:none;box-shadow:0 20px 40px rgba(0,0,0,.5);}
.settings-panel.open{display:block;}

/* ---- Recorder ---- */
.rec-topbar{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--panel);border-bottom:1px solid var(--line);flex-shrink:0;flex-wrap:wrap;}
.src-btn{display:flex;align-items:center;gap:5px;padding:7px 11px;border-radius:8px;border:1px solid var(--line);background:var(--stage);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;white-space:nowrap;}
.src-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(45,227,200,.08);}
.src-btn:hover:not(:disabled){border-color:var(--text);color:var(--text);}
.rec-ctl-group{display:flex;align-items:center;gap:7px;margin-left:auto;flex-shrink:0;}
.rec-timer{font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:700;color:var(--accent);min-width:50px;text-align:center;}
.rec-status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);}
.status-dot.live{background:#ff5d72;animation:pulse 1.2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.rec-body{display:flex;flex:1;min-height:0;overflow:hidden;}
.rec-drawer{width:270px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;transition:width .2s,opacity .2s;}
.rec-drawer.collapsed{width:0;opacity:0;overflow:hidden;}
.rec-drawer-inner{padding:14px;min-width:250px;}
.rec-drawer-inner .h4{margin-bottom:7px;}
.rec-stage{flex:1;display:flex;flex-direction:column;background:#000;min-width:0;min-height:0;}
.rec-preview{flex:1;position:relative;overflow:hidden;min-height:200px;}
.rec-preview canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;}
#compositeCanvas{cursor:default;}
.drawer-toggle-btn{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:10;width:16px;height:40px;background:var(--panel-2);border:1px solid var(--line);border-left:none;border-radius:0 6px 6px 0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:10px;}
.drawer-toggle-btn:hover{color:var(--accent);}
.rec-footer{padding:10px 14px;background:var(--panel);border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0;min-height:48px;}
.caption-bar{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);max-width:80%;padding:9px 18px;background:rgba(11,14,18,.85);border:1px solid var(--accent-dim);border-radius:30px;font-size:14px;color:var(--text);text-align:center;opacity:0;transition:opacity .25s;pointer-events:none;}
.caption-bar.show{opacity:1;}
.keyword-chip{position:absolute;top:16px;left:16px;padding:6px 14px;background:linear-gradient(135deg,var(--accent),#1B6F63);color:#04201C;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;border-radius:999px;opacity:0;transform:scale(.7) translateY(-8px);transition:opacity .35s,transform .35s;pointer-events:none;}
.keyword-chip.show{opacity:1;transform:scale(1) translateY(0);}
.teleprompter-overlay{position:absolute;bottom:0;left:0;right:0;z-index:20;max-height:40%;overflow:hidden;background:linear-gradient(transparent,rgba(11,14,18,.92) 30%);padding:16px 36px 14px;font-size:16px;line-height:1.7;color:#fff;pointer-events:none;}
.tp-text{animation:tpScroll linear forwards;}
@keyframes tpScroll{from{transform:translateY(0);}to{transform:translateY(-100%);}}
.seg{display:flex;background:var(--stage);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:8px;}
.seg button{flex:1;background:none;border:none;color:var(--muted);font-size:11.5px;font-family:'Inter',sans-serif;font-weight:600;padding:7px 4px;cursor:pointer;}
.seg button.active{background:var(--accent);color:#04201C;}
.meter-bar{height:7px;background:var(--stage);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:4px;}
.meter-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--warn));transition:width .08s;}
/* mobile */
.mob-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--line);padding:10px;gap:6px;z-index:70;}

/* ---- Whiteboard ---- */
.wb-toolbar{display:flex;gap:5px;align-items:center;padding:9px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;flex-shrink:0;}
.wb-tool{width:32px;height:32px;border-radius:7px;border:2px solid var(--line);background:var(--stage);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;}
.wb-tool.active,.wb-tool:hover{border-color:var(--accent);}
.wb-swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;flex-shrink:0;}
.wb-swatch.active{border-color:#fff;box-shadow:0 0 0 1px var(--accent);}
.wb-wrap{flex:1;position:relative;overflow:hidden;background:#111;min-height:0;}
#wbCanvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;}
/* resize handles */
.wb-handle{position:absolute;width:10px;height:10px;background:var(--accent);border:1px solid #fff;border-radius:2px;cursor:nwse-resize;z-index:5;}

/* ---- Script / AI ---- */
.script-output{flex:1;padding:20px 28px;overflow-y:auto;font-size:15px;line-height:1.8;color:var(--text);font-family:'Inter',sans-serif;white-space:pre-wrap;min-height:0;}
.script-output.empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-style:italic;font-size:14px;}
.api-key-row{display:flex;gap:6px;}
.api-key-row input{flex:1;font-family:'JetBrains Mono',monospace;font-size:12px;}

/* ---- Diagram ---- */
.diagram-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;background:var(--stage);}
.diagram-wrap svg{max-width:100%;max-height:100%;border-radius:8px;}
.diagram-bar{display:flex;gap:8px;align-items:center;padding:9px 14px;background:var(--panel);border-top:1px solid var(--line);flex-shrink:0;}

/* ---- Saved recordings ---- */
.saved-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding:20px;overflow-y:auto;align-content:start;}
.saved-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.saved-card video{width:100%;height:120px;object-fit:cover;display:block;background:#000;}
.saved-card-body{padding:10px 12px;display:flex;flex-direction:column;gap:6px;}
.saved-card-meta{font-size:11px;color:var(--muted);}
.saved-card-actions{display:flex;gap:6px;}
.saved-empty{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--muted);}

/* ---- Password gate ---- */
.pw-gate{position:fixed;inset:0;z-index:9999;background:var(--stage);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;}
.pw-gate-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;color:var(--accent);}
.pw-gate input{text-align:center;width:260px;font-size:15px;padding:12px 18px;}
.pw-gate-err{color:#ff5d72;font-size:12px;min-height:16px;}

/* ---- Responsive ---- */
@media(max-width:700px){
  body{overflow:auto;}
  .mode-tab{font-size:10px;padding:10px 9px;}
  .split-2col{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .side-col{max-height:38vh;border-right:none;border-bottom:1px solid var(--line);}
  .rec-drawer{position:fixed;bottom:0;left:0;right:0;top:auto;width:100%!important;max-height:55vh;border-radius:14px 14px 0 0;border-top:1px solid var(--line);z-index:80;transform:translateY(100%);transition:transform .25s;overflow-y:auto;}
  .rec-drawer.open-sheet{transform:translateY(0);}
  .rec-drawer.collapsed{transform:translateY(100%);width:100%!important;opacity:1;}
  .rec-stage{min-height:44vw;}
  .mob-bar{display:flex;}
  .wb-toolbar{gap:3px;padding:7px;}
  .wb-tool{width:28px;height:28px;font-size:13px;}
  .url-input{width:100%;order:-1;}
  .control-strip{flex-wrap:wrap;}
}