/* AIBOS Concierge — slide-in panel widget
   Floating button + dim overlay + iframe panel. Mounted once per page,
   stays in DOM after close so the iframe keeps its conversation state. */

.cn-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(6,6,10,0);
  pointer-events:none;
  transition:background .2s ease-out;
}
.cn-overlay.open{background:rgba(6,6,10,.55);pointer-events:auto}

.cn-panel{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:440px;
  max-width:100vw;
  z-index:100000;
  background:#0d0d14;
  box-shadow:-20px 0 60px rgba(0,0,0,.6);
  transform:translateX(100%);
  transition:transform .22s ease-out;
  display:flex;
  flex-direction:column;
}
.cn-panel.open{transform:translateX(0)}
.cn-panel.resizing{transition:none;user-select:none}

/* Drag handle = accent yellow stripe on the left edge.
   A wider invisible hit area surrounds the visible stripe so the cursor
   target is comfortable even though the line itself stays slim. */
.cn-resize-handle{
  position:absolute;
  top:0;
  left:-5px;
  width:11px;
  height:100%;
  cursor:col-resize;
  z-index:100001;
  touch-action:none;
}
.cn-resize-handle::after{
  content:'';
  position:absolute;
  left:5px;
  top:0;
  width:2px;
  height:100%;
  background:rgba(200,255,0,.42);
  transition:background .15s ease-out, width .15s ease-out;
}
.cn-resize-handle:hover::after,
.cn-resize-handle.resizing::after{
  background:rgba(200,255,0,.95);
  width:3px;
  box-shadow:0 0 14px rgba(200,255,0,.45);
}

.cn-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.2rem;
  border-bottom:1px solid rgba(238,238,232,.08);
  background:#06060a;
}
.cn-title{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#eeeee8;
}
.cn-fallback{
  font-family:'DM Sans',-apple-system,sans-serif;
  font-size:.78rem;
  color:#99998f;
  text-decoration:none;
  transition:color .2s;
  white-space:nowrap;
}
.cn-fallback:hover{color:#c8ff00}
.cn-close{
  background:none;
  border:none;
  color:#99998f;
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  padding:.3rem .55rem;
  border-radius:6px;
  transition:color .2s,background .2s;
}
.cn-close:hover{color:#eeeee8;background:rgba(238,238,232,.06)}

.cn-iframe-wrap{flex:1;background:#06060a;position:relative;overflow:hidden}
.cn-iframe{width:100%;height:100%;border:0;display:block;opacity:0;transition:opacity .18s ease-out}
.cn-iframe.ready{opacity:1}

/* Fallback panel — shown if the iframe never confirms it booted within
   the watchdog window. Keeps the buyer experience calm: no error UI,
   just a clear way to reach the team. */
.cn-fallback-panel{
  flex:1;
  background:#06060a;
  display:none;
  align-items:center;
  justify-content:center;
  padding:2rem 1.5rem;
  text-align:center;
}
.cn-fallback-panel.open{display:flex}
.cn-fallback-inner{max-width:320px}
.cn-fallback-msg{
  font-family:'DM Sans',-apple-system,sans-serif;
  font-size:.95rem;
  line-height:1.55;
  color:#c5c5bd;
  margin:0 0 1.6rem;
}
.cn-fallback-msg strong{color:#eeeee8;font-weight:600}
.cn-fallback-cta{
  display:inline-block;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:#06060a;
  background:#c8ff00;
  padding:.75rem 1.4rem;
  border-radius:6px;
  transition:transform .15s, box-shadow .15s;
}
.cn-fallback-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(200,255,0,.25);
}

@media(max-width:768px){
  .cn-panel{width:100vw !important}
  .cn-resize-handle{display:none}
}