/* ============================================================
   Limitless Studio CMS — Editor UI (dark, Rocket-style)
   ============================================================ */
:root{
  --bg:#0d0e12; --bg2:#15171d; --bg3:#1c1f27; --panel:#16181f;
  --line:#272a33; --line2:#33373f;
  --fg:#e8eaed; --fg-mut:#9aa0aa; --fg-dim:#6b7280;
  --accent:#7B2FFF; --accent2:#9d5cff;
  --green:#34d399; --amber:#f59e0b; --red:#f87171;
  --mono:'IBM Plex Mono',monospace; --sans:'Inter',-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--fg);font-size:14px;overflow:hidden}
button{font-family:inherit;cursor:pointer}
.field{
  width:100%;background:var(--bg3);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;color:var(--fg);font-family:inherit;font-size:13px;outline:none;
}
.field:focus{border-color:var(--accent)}
.field::placeholder{color:var(--fg-dim)}

/* ===== TOP BAR ===== */
#topbar{
  height:52px;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;background:var(--bg2);border-bottom:1px solid var(--line);gap:8px;
}
.tb-left,.tb-center,.tb-right{display:flex;align-items:center;gap:8px}
.tb-logo{color:var(--accent);font-size:14px}
.tb-tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--fg-mut)}
.tb-sep{color:var(--fg-dim)}
.tb-select{
  background:var(--bg3);border:1px solid var(--line);border-radius:7px;color:var(--fg);
  padding:6px 8px;font-size:12px;font-family:inherit;outline:none;max-width:150px;
}
.tb-chip{
  background:var(--bg3);border:1px solid var(--line);border-radius:7px;color:var(--fg-mut);
  padding:6px 10px;font-size:12px;display:inline-flex;align-items:center;gap:6px;transition:.15s;
}
.tb-chip:hover{color:var(--fg);border-color:var(--line2)}
.tb-icon{
  background:transparent;border:1px solid transparent;border-radius:7px;color:var(--fg-mut);
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;transition:.15s;
}
.tb-icon:hover{color:var(--fg);background:var(--bg3)}
.tb-icon.active{color:var(--accent);background:rgba(123,47,255,.12)}
.tb-btn{
  background:var(--bg3);border:1px solid var(--line);border-radius:7px;color:var(--fg);
  padding:7px 16px;font-size:12px;font-weight:600;transition:.15s;
}
.tb-btn:hover{border-color:var(--line2)}
.tb-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.tb-btn.primary:hover{background:var(--accent2)}
.tb-btn.full{width:100%;justify-content:center}
.tb-state{font-size:11px;color:var(--fg-dim);font-family:var(--mono);min-width:46px;text-align:right}
.tb-state.dirty{color:var(--amber)}
.badge{background:var(--accent);color:#fff;border-radius:999px;font-size:10px;padding:1px 6px;margin-left:4px}

/* ===== WORKSPACE ===== */
#workspace{height:calc(100% - 52px);display:flex;position:relative}

/* flyouts */
.flyout{
  position:absolute;top:0;left:0;height:100%;width:280px;background:var(--panel);
  border-right:1px solid var(--line);padding:18px 16px;z-index:30;overflow-y:auto;
}
.flyout-head{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--fg-mut);margin-bottom:14px}
.flyout-sub{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--fg-dim);margin:18px 0 10px}
.flyout-note{font-size:12px;color:var(--fg-mut);margin-bottom:14px;line-height:1.5}
.page-item{
  display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:8px;
  border:1px solid var(--line);margin-bottom:8px;cursor:pointer;transition:.15s;
}
.page-item:hover{border-color:var(--line2);background:var(--bg3)}
.page-item.active{border-color:var(--accent);background:rgba(123,47,255,.08)}
.page-item .pi-title{font-weight:600;font-size:13px}
.page-item .pi-slug{font-family:var(--mono);font-size:10px;color:var(--fg-dim)}
.page-item .pi-del{color:var(--fg-dim);background:none;border:none;font-size:13px}
.page-item .pi-del:hover{color:var(--red)}
.addpage-types{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.addpage-type{
  background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:10px;text-align:left;color:var(--fg);
}
.addpage-type.active{border-color:var(--accent)}
.addpage-type strong{display:block;font-size:12px}
.addpage-type small{color:var(--fg-dim);font-size:10px}
#newpage-title{margin-bottom:10px}
.section-tpl{
  background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:8px;
  cursor:pointer;transition:.15s;
}
.section-tpl:hover{border-color:var(--accent)}
.section-tpl strong{display:block;font-size:12px;margin-bottom:2px}
.section-tpl small{color:var(--fg-dim);font-size:11px}

/* canvas */
#canvas-wrap{flex:1;display:flex;flex-direction:column;align-items:center;background:#0a0b0e;overflow:auto;position:relative}
#editmode-tag{
  position:absolute;top:10px;left:14px;z-index:5;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;color:var(--fg-dim);background:var(--bg2);padding:4px 10px;border-radius:6px;border:1px solid var(--line);
}
#canvas-frame{margin:42px 0;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);transition:width .25s}
#canvas-frame[data-device="desktop"]{width:min(1180px,calc(100% - 48px))}
#canvas-frame[data-device="tablet"]{width:820px}
#canvas-frame[data-device="mobile"]{width:390px}
#canvas{width:100%;height:78vh;border:none;display:block}

/* right bar */
#rightbar{
  width:330px;background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;position:relative;
}
.rp-head{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--fg-mut);
  padding:16px 16px 10px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.rp-x{background:none;border:none;color:var(--fg-dim);font-size:13px}
.rp-x:hover{color:var(--fg)}
.rp-empty,.rp-help{padding:14px 16px;font-size:12px;color:var(--fg-mut);line-height:1.6}
.rp-help strong{color:var(--fg)}
#element-panel{border-bottom:1px solid var(--line)}
#el-controls{padding:14px 16px}
.rp-label{display:block;font-size:11px;color:var(--fg-mut);margin:14px 0 6px;font-weight:500}
.rp-label:first-child{margin-top:0}
.rp-val{font-family:var(--mono);color:var(--fg-dim);float:right}
.rp-range{width:100%;accent-color:var(--accent)}
.rp-color{width:100%;height:34px;background:var(--bg3);border:1px solid var(--line);border-radius:8px}
#editor-help{flex:0 0 auto}

/* AI chat */
#ai-chat{margin-top:auto;border-top:1px solid var(--line);padding:12px;background:var(--bg2)}
.ai-context{font-size:11px;color:var(--accent2);font-family:var(--mono);margin-bottom:8px}
.ai-log{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.ai-msg{font-size:12px;line-height:1.5;padding:8px 10px;border-radius:8px}
.ai-msg.user{background:var(--bg3);color:var(--fg);align-self:flex-end;max-width:85%}
.ai-msg.bot{background:rgba(123,47,255,.1);color:var(--fg);border:1px solid rgba(123,47,255,.25)}
.ai-msg.bot.err{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.3)}
.ai-input-row{display:flex;gap:8px;align-items:center}
.ai-input{flex:1;background:var(--bg3);border:1px solid var(--line);border-radius:999px;padding:10px 16px;color:var(--fg);font-size:13px;outline:none}
.ai-input:focus{border-color:var(--accent)}
.ai-send{width:38px;height:38px;border-radius:50%;background:var(--accent);border:none;color:#fff;font-size:14px;flex-shrink:0}
.ai-send:hover{background:var(--accent2)}
.ai-foot{text-align:center;font-size:10px;color:var(--fg-dim);margin-top:8px}

/* ===== OVERLAYS ===== */
.overlay{position:fixed;inset:0;background:rgba(5,6,8,.78);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.seo-modal,.inbox-modal{background:var(--bg2);border:1px solid var(--line);border-radius:14px;width:min(960px,100%);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.seo-modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.seo-modal-body{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:20px;overflow-y:auto}
.seo-col{min-width:0}
.seo-section-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--fg-dim);margin-bottom:12px}
.google-preview{background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:18px}
.gp-favicon{font-size:14px;margin-bottom:6px}
.gp-url{font-size:12px;color:var(--fg-mut)}
.gp-title{color:#8ab4f8;font-size:18px;margin:4px 0;line-height:1.3}
.gp-desc{font-size:12px;color:var(--fg-mut);line-height:1.5}
.kp-hint{font-size:11px;color:var(--fg-dim);margin:6px 0 14px}
.seo-score{display:flex;gap:12px;align-items:center;background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:18px}
.score-dot{width:14px;height:14px;border-radius:50%;background:var(--red);flex-shrink:0}
.score-dot.ok{background:var(--amber)}
.score-dot.good{background:var(--green)}
.score-title{font-weight:600;font-size:13px}
.score-sub{font-size:11px;color:var(--fg-dim);font-family:var(--mono)}
.seo-group{margin-bottom:16px}
.seo-group-title{font-size:11px;color:var(--fg-mut);margin-bottom:8px;font-weight:600}
.seo-checks{list-style:none;display:flex;flex-direction:column;gap:6px}
.seo-checks li{font-size:12px;color:var(--fg-mut);display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.seo-checks li::before{content:"";width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.seo-checks.problems li::before{background:var(--red)}
.seo-checks.improvements li::before{background:var(--amber)}
.seo-checks.good li::before{background:var(--green)}
.seo-modal-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-top:1px solid var(--line)}
.seo-foot-note{font-size:11px;color:var(--fg-dim)}

/* inbox */
.inbox-list{padding:16px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.inbox-item{background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:14px}
.inbox-item .ii-meta{font-family:var(--mono);font-size:10px;color:var(--fg-dim);margin-bottom:8px;display:flex;justify-content:space-between}
.inbox-item .ii-field{font-size:12px;margin-bottom:4px}
.inbox-item .ii-field b{color:var(--fg-mut);font-weight:600;margin-right:6px}
.inbox-empty{color:var(--fg-dim);font-size:13px;text-align:center;padding:40px}

/* login gate */
.login-box{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:32px;width:min(400px,100%);text-align:center}
.login-box h2{font-size:20px;margin-bottom:6px}
.login-site{color:var(--accent2);font-family:var(--mono);font-size:12px;margin-bottom:20px}
.login-box .field{margin-bottom:12px;text-align:left}
.login-error{color:var(--red);font-size:12px;margin-top:10px}
.login-guide{font-size:11px;color:var(--fg-dim);margin-top:20px;line-height:1.6}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--bg3);border:1px solid var(--line2);color:var(--fg);padding:12px 20px;border-radius:10px;font-size:13px;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.good{border-color:var(--green)}
.toast.err{border-color:var(--red)}

/* selected element highlight (applied inside iframe via injected style) */

/* The hidden attribute must ALWAYS win over .overlay{display:flex} etc. */
[hidden]{display:none !important}

/* Voice mic — pulses red while listening */
.ai-mic{width:38px;height:38px;border-radius:50%;background:var(--bg3);border:1px solid var(--line);color:#fff;font-size:15px;flex-shrink:0;cursor:pointer}
.ai-mic:hover{border-color:var(--accent)}
.ai-mic.listening{background:#e5484d;border-color:#e5484d;animation:micpulse 1.2s ease-in-out infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}50%{box-shadow:0 0 0 9px rgba(229,72,77,0)}}