/* ============================================================
   STRIX HOOD — Chat widget
   Loads after strix.css and reuses its tokens, .sx-btn, .sx-pill,
   .sx-stat, .sx-status, .sx-meter, .sx-sr. Everything below is
   either genuinely new (panel, launcher, transcript, trace) or a
   tightening of an existing component for a 390px column.
   ============================================================ */

.sxc{
  --sxc-w:390px;
  --sxc-h:560px;
  --sxc-gap:22px;
  --sxc-launch:52px;
  font-family:var(--display);
}

/* The back-to-top button lives at right:22px;bottom:56px by default.
   The launcher takes the corner, so lift #sx-top above it. */
#sx-top{bottom:calc(var(--sxc-gap,22px) + 52px + 12px)}
html.sxc-bottomnav #sx-top{bottom:150px}

/* ============================================================
   LAUNCHER
   ============================================================ */
.sxc-launcher{
  position:fixed;right:22px;bottom:22px;z-index:98;
  display:inline-flex;align-items:center;gap:11px;
  height:52px;padding:0 20px 0 9px;border-radius:100px;
  border:1px solid var(--glass-2);
  background:linear-gradient(180deg,rgba(20,26,5,.92),rgba(10,10,15,.97));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 18px 44px -20px rgba(204,255,0,.45),0 10px 30px -18px rgba(0,0,0,.95);
  color:var(--plasma);cursor:pointer;
  transition:transform .45s var(--expo),border-color .3s var(--ui),box-shadow .45s var(--expo),opacity .3s var(--ui);
}
.sxc-launcher:hover{
  transform:translateY(-3px);
  border-color:var(--neon);
  box-shadow:0 24px 54px -20px rgba(204,255,0,.6);
}
.sxc-launcher:active{transform:translateY(-1px) scale(.985)}
.sxc-launcher__mark{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:rgba(204,255,0,.1);border:1px solid var(--glass);
  display:flex;align-items:center;justify-content:center;
}
.sxc-launcher__mark svg{width:20px;height:20px}
.sxc-launcher__label{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.sxc-launcher__label b{font-size:13.5px;font-weight:600;letter-spacing:-.005em}
.sxc-launcher__label em{
  font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  color:var(--gray-dim);margin-top:2px;
}
.sxc-launcher__ping{
  position:absolute;left:11px;top:11px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--neon);opacity:0;pointer-events:none;
  animation:sxc-ping 3.4s var(--expo) infinite;
}
/* while the panel is open the launcher becomes a plain close affordance */
.sxc-launcher.is-open{opacity:0;pointer-events:none;transform:translateY(10px) scale(.94)}

@keyframes sxc-ping{
  0%{opacity:.55;transform:scale(1)}
  55%,100%{opacity:0;transform:scale(1.85)}
}

/* ============================================================
   PANEL
   ============================================================ */
.sxc-panel{
  position:fixed;right:22px;bottom:calc(22px + 52px + 14px);z-index:200;
  width:var(--sxc-w);height:min(var(--sxc-h),calc(100vh - 140px));
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:22px;border:1px solid var(--glass-2);
  background:
    radial-gradient(120% 60% at 85% -10%,rgba(204,255,0,.10),transparent 62%),
    linear-gradient(180deg,rgba(20,26,5,.94),rgba(10,10,15,.99));
  backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 70px -30px rgba(204,255,0,.4);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transform-origin:100% 100%;
  transition:opacity .3s var(--ui),transform .55s var(--expo),visibility .3s;
}
.sxc-panel.is-open{opacity:1;visibility:visible;transform:none}
.sxc-panel[hidden]{display:none}

/* ---------- head ---------- */
.sxc-head{
  flex:none;display:flex;align-items:center;gap:11px;
  padding:14px 14px 13px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(20,26,5,.9),rgba(14,18,8,.55));
}
.sxc-head__mark{
  flex:none;width:32px;height:32px;border-radius:10px;
  background:rgba(204,255,0,.1);border:1px solid var(--glass);
  display:flex;align-items:center;justify-content:center;
}
.sxc-head__mark svg{width:19px;height:19px}
.sxc-head__txt{min-width:0;flex:1}
.sxc-head__title{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.sxc-head__sub{
  display:flex;align-items:center;gap:8px;margin-top:3px;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--gray-dim);
  white-space:nowrap;overflow:hidden;
}
.sxc-head__sub > span:last-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
.sxc-live{padding:2px 8px;font-size:9.5px;letter-spacing:.1em}
.sxc-live i{width:5px;height:5px}

.sxc-icon{
  flex:none;width:29px;height:29px;border-radius:9px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  color:var(--gray);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;padding:0;
  transition:color .25s var(--ui),border-color .25s var(--ui),background-color .25s var(--ui);
}
.sxc-icon:hover{color:var(--plasma);border-color:var(--glass-2);background:rgba(204,255,0,.1)}
.sxc-icon__wipe{
  width:11px;height:11px;border:1.4px solid currentColor;border-radius:2px;
  border-top-width:3px;position:relative;
}
.sxc-icon--x{font-size:18px}

/* ---------- transcript ---------- */
.sxc-log{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:16px 15px 6px;
  display:flex;flex-direction:column;gap:14px;
  scrollbar-width:thin;
  mask-image:linear-gradient(180deg,transparent 0,#000 16px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16px);
}
.sxc-log:focus-visible{outline:2px solid var(--neon);outline-offset:-2px}
.sxc-log::-webkit-scrollbar{width:6px}
.sxc-log::-webkit-scrollbar-thumb{background:rgba(204,255,0,.2);border-radius:100px}

.sxc-log > *:first-child{margin-top:auto}
.sxc-msg{display:flex;gap:9px;align-items:flex-start;animation:sxc-msgin .5s var(--expo)}
.sxc-msg--me{justify-content:flex-end}
.sxc-av{
  flex:none;width:24px;height:24px;border-radius:8px;margin-top:1px;
  background:rgba(204,255,0,.1);border:1px solid var(--glass);
  display:flex;align-items:center;justify-content:center;
}
.sxc-av svg{width:14px;height:14px}
.sxc-body{min-width:0;flex:1;display:flex;flex-direction:column}
.sxc-vis{display:flex;flex-direction:column;gap:10px;min-width:0}

.sxc-bubble{
  max-width:85%;padding:9px 14px;
  border-radius:14px 14px 4px 14px;
  border:1px solid var(--glass-2);
  background:rgba(204,255,0,.1);
  color:var(--plasma);font-size:13.5px;line-height:1.5;
  word-break:break-word;
}

.sxc-p{
  font-size:13.5px;line-height:1.62;color:#C8C9D4;
  margin:0;min-height:1.2em;text-wrap:pretty;
}
.sxc-p:first-child{color:#DCDDE6}
.sxc-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.sxc-in{animation:sxc-blockin .5s var(--expo)}

@keyframes sxc-msgin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sxc-blockin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* typing indicator */
.sxc-dots{display:inline-flex;gap:4px;align-items:center;height:22px;padding-left:1px}
.sxc-dots i{
  width:5px;height:5px;border-radius:50%;background:var(--neon);opacity:.35;
  animation:sxc-dot 1.15s var(--ui) infinite;
}
.sxc-dots i:nth-child(2){animation-delay:.14s}
.sxc-dots i:nth-child(3){animation-delay:.28s}
@keyframes sxc-dot{0%,100%{opacity:.25;transform:translateY(0)}45%{opacity:1;transform:translateY(-3px)}}

/* ============================================================
   RICH BLOCKS
   ============================================================ */
.sxc-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.06);
}
.sxc-stat:last-child:nth-child(odd){grid-column:1 / -1}
.sxc-stat{padding:9px 11px;background:rgba(10,10,15,.72);gap:3px}
.sxc-stat .sx-stat__k{font-size:9.5px;letter-spacing:.09em}
.sxc-stat__v{font-size:14px !important;letter-spacing:-.01em;line-height:1.25;word-break:break-word}
.sxc-stat__d{font-style:normal;font-size:11.5px;margin-left:7px;font-family:var(--mono)}

.sxc-tablewrap{
  border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(10,10,15,.6);overflow:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.sxc-tablewrap::-webkit-scrollbar{height:4px}
.sxc-tablewrap::-webkit-scrollbar-thumb{background:rgba(204,255,0,.25);border-radius:100px}
.sxc-table{width:100%;border-collapse:collapse;font-size:11.5px}
.sxc-table th{
  text-align:left;padding:8px 10px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray-dim);font-weight:600;background:rgba(204,255,0,.05);
  border-bottom:1px solid rgba(255,255,255,.07);white-space:nowrap;
}
.sxc-table td{
  padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.045);
  font-family:var(--mono);font-variant-numeric:tabular-nums;color:#C8C9D4;
  white-space:nowrap;
}
.sxc-table td:first-child{font-family:var(--display);color:var(--plasma);font-weight:500}
.sxc-table tbody tr:last-child td{border-bottom:0}
.sxc-table tbody tr:hover{background:rgba(204,255,0,.045)}
.sxc-table .num{text-align:right}
.sxc-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;
  background:var(--gray-dim);vertical-align:middle;
}
.sxc-dot.is-ok{background:var(--neon);box-shadow:0 0 8px rgba(204,255,0,.7)}
.sxc-dot.is-err{background:var(--crimson);box-shadow:0 0 8px rgba(255,80,0,.6)}

.sxc-rows{
  display:flex;flex-direction:column;
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:rgba(10,10,15,.6);
}
.sxc-row{
  display:flex;align-items:center;gap:10px;padding:8px 11px;
  border-bottom:1px solid rgba(255,255,255,.045);
  transition:background-color .25s var(--ui);
}
.sxc-row:last-child{border-bottom:0}
.sxc-row:hover{background:rgba(204,255,0,.045)}
.sxc-row__l{min-width:0;flex:1}
.sxc-row__l b{display:block;font-size:12.5px;font-weight:600;color:var(--plasma);line-height:1.3}
.sxc-row__l em{
  display:block;font-style:normal;font-size:10px;color:var(--gray-dim);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sxc-row__r{flex:none;text-align:right}
.sxc-row__r b{display:block;font-size:12px;font-weight:500;color:#C8C9D4}
.sxc-row__r em{display:block;font-style:normal;font-size:10px;margin-top:1px;color:var(--gray-dim)}
.sxc-row__r em.sx-up{color:var(--neon-2)}
.sxc-row__r em.sx-down{color:var(--crimson)}

.sxc-pillrow{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.sxc-tag{padding:4px 10px;font-size:10px}
.sxc-arrow{font-family:var(--mono);font-size:10px;color:var(--neon);opacity:.55}

.sxc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sxc-list li{display:flex;gap:10px;align-items:flex-start}
.sxc-list__n{
  flex:none;min-width:22px;padding-top:1px;
  font-size:10px;color:var(--neon-2);opacity:.75;letter-spacing:.06em;
}
.sxc-list b{display:block;font-size:12.5px;font-weight:600;color:var(--plasma);line-height:1.4}
.sxc-list em{
  display:block;font-style:normal;font-size:11.5px;line-height:1.5;
  color:var(--gray);margin-top:2px;
}

.sxc-code{
  margin:0;padding:11px 12px;border-radius:12px;overflow-x:auto;
  border:1px solid rgba(255,255,255,.08);background:rgba(4,4,8,.75);
  font-family:var(--mono);font-size:10.5px;line-height:1.65;color:var(--neon-2);
  white-space:pre;
}
.sxc-code code{font:inherit;color:inherit}

.sxc-note{
  display:flex;gap:8px;align-items:flex-start;
  font-family:var(--mono);font-size:10.5px;line-height:1.55;
  color:var(--gray-dim);margin:0;
}
.sxc-note__g{
  flex:none;width:7px;height:7px;margin-top:4px;transform:rotate(45deg);
  border:1px solid currentColor;
}
.sxc-note.is-warn{color:var(--amber)}
.sxc-note.is-warn .sxc-note__g{background:currentColor}

.sxc-meterwrap{display:flex;flex-direction:column;gap:5px}
.sxc-meter{height:5px}
.sxc-meter__scale{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--gray-dim);
}

/* sparkline card */
.sxc-spark{
  position:relative;padding:10px 12px 6px;border-radius:12px;
  border:1px solid rgba(204,255,0,.18);
  background:linear-gradient(180deg,rgba(204,255,0,.06),rgba(10,10,15,.5));
  overflow:hidden;
}
.sxc-spark.is-down{border-color:rgba(255,80,0,.22);background:linear-gradient(180deg,rgba(255,80,0,.06),rgba(10,10,15,.5))}
.sxc-spark__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.sxc-spark__sym{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-dim)}
.sxc-spark__d{font-size:11.5px;font-weight:600}
.sxc-spark__c{width:100%;height:52px;display:block}
.sxc-spark__tag{
  flex:none;font-size:8px;letter-spacing:.12em;color:var(--amber);
  padding:2px 6px;border-radius:100px;background:rgba(255,153,0,.14);
  border:1px solid rgba(255,153,0,.3);
}

/* execution trace */
.sxc-trace{
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,153,0,.28);
  background:rgba(10,10,15,.66);
}
.sxc-trace__head{
  display:flex;align-items:center;gap:8px;padding:8px 11px;
  background:rgba(255,153,0,.09);border-bottom:1px solid rgba(255,153,0,.2);
}
.sxc-trace__tag{
  font-size:8.5px;letter-spacing:.14em;color:var(--amber);
  padding:2px 7px;border-radius:100px;border:1px solid rgba(255,153,0,.4);
}
.sxc-trace__title{
  font-size:10.5px;color:#C8C9D4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sxc-trace__body{padding:4px 11px 6px;position:relative}
.sxc-step{
  display:flex;align-items:flex-start;gap:9px;padding:6px 0;position:relative;
  opacity:.34;transition:opacity .4s var(--ui);
}
.sxc-step::after{
  content:"";position:absolute;left:4px;top:20px;bottom:-6px;width:1px;
  background:rgba(255,255,255,.09);
}
.sxc-step:last-child::after{display:none}
.sxc-step.is-run,.sxc-step.is-ok,.sxc-step.is-warn{opacity:1}
.sxc-step__dot{
  flex:none;width:9px;height:9px;margin-top:4px;border-radius:50%;
  border:1.4px solid var(--gray-dim);background:transparent;
  transition:all .35s var(--expo);
}
.sxc-step.is-run .sxc-step__dot{
  border-color:var(--amber);background:rgba(255,153,0,.35);
  animation:sx-pulse 1s var(--ui) infinite;
}
.sxc-step.is-ok .sxc-step__dot{border-color:var(--neon);background:var(--neon);box-shadow:0 0 9px rgba(204,255,0,.75)}
.sxc-step.is-warn .sxc-step__dot{border-color:var(--amber);background:var(--amber);box-shadow:0 0 9px rgba(255,153,0,.7)}
.sxc-step__txt{min-width:0;flex:1}
.sxc-step__txt b{display:block;font-size:12px;font-weight:600;color:var(--plasma);line-height:1.35}
.sxc-step.is-warn .sxc-step__txt b{color:var(--amber)}
.sxc-step__txt em{
  display:block;font-style:normal;font-size:10px;line-height:1.5;color:var(--gray);
  margin-top:1px;word-break:break-word;
}
.sxc-step__ms{
  flex:none;font-size:10px;color:var(--gray-dim);padding-top:2px;min-width:34px;text-align:right;
}
.sxc-trace__foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 11px;border-top:1px solid rgba(255,255,255,.06);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-dim);
}
.sxc-trace__foot b{color:var(--neon-2);font-weight:500;letter-spacing:0;text-transform:none;font-size:11px}

.sxc-divider{
  display:flex;align-items:center;gap:9px;margin:2px 0;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-dim);
}
.sxc-divider::before,.sxc-divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.09)}

.sxc-actions{display:flex;flex-wrap:wrap;gap:7px}
.sxc-actions .sx-btn{padding:7px 13px;font-size:11.5px;border-radius:100px}

/* ============================================================
   FOOT — chips + composer
   ============================================================ */
.sxc-foot{
  flex:none;padding:9px 13px calc(11px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(10,10,15,.2),rgba(10,10,15,.75));
}
.sxc-chips{
  display:flex;gap:6px;overflow-x:auto;padding-bottom:9px;
  scrollbar-width:none;-ms-overflow-style:none;
  mask-image:linear-gradient(90deg,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
}
.sxc-chips::-webkit-scrollbar{display:none}
.sxc-chips:empty{display:none}
.sxc-chip{
  flex:none;padding:5px 11px;font-size:10.5px;
  border-color:rgba(204,255,0,.18);background:rgba(204,255,0,.05);color:#B9BAC8;
}
.sxc-chip:hover{border-color:var(--neon);color:var(--plasma);background:rgba(204,255,0,.12)}

.sxc-form{
  display:flex;align-items:center;gap:8px;
  padding:5px 5px 5px 13px;border-radius:100px;
  border:1px solid rgba(255,255,255,.1);background:rgba(4,4,8,.7);
  transition:border-color .25s var(--ui),box-shadow .25s var(--ui),background-color .25s var(--ui);
}
.sxc-form:focus-within{
  border-color:var(--neon);box-shadow:0 0 0 3px rgba(204,255,0,.14);
  background:rgba(20,26,5,.6);
}
.sxc-caret{font-family:var(--mono);font-size:14px;color:var(--neon);line-height:1;flex:none}
.sxc-input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  color:var(--plasma);font-family:var(--display);font-size:13px;padding:8px 0;
}
.sxc-input::placeholder{color:var(--gray-dim)}
.sxc-send{
  flex:none;width:34px;height:34px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--accent-grad);color:#12170A;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px -12px rgba(204,255,0,.9);
  transition:transform .3s var(--expo),box-shadow .3s var(--ui),opacity .2s;
}
.sxc-send:hover{transform:translateY(-1px) scale(1.04)}
.sxc-send:active{transform:scale(.94)}
.sxc-send__i{
  width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);margin-left:-3px;
}

/* ============================================================
   RESPONSIVE — full-screen sheet on phones
   ============================================================ */
@media (max-width:900px){
  #sx-top{bottom:calc(22px + 52px + 12px)}
  html.sxc-bottomnav #sx-top{bottom:150px}
  html.sxc-bottomnav .sxc-launcher{bottom:calc(72px + env(safe-area-inset-bottom))}
}

@media (max-width:640px){
  .sxc-launcher{
    right:16px;bottom:16px;height:52px;width:52px;padding:0;
    justify-content:center;border-radius:50%;
  }
  .sxc-launcher__label{display:none}
  .sxc-launcher__mark{width:36px;height:36px}
  .sxc-launcher__mark svg{width:21px;height:21px}
  .sxc-launcher__ping{left:8px;top:8px;width:36px;height:36px}
  #sx-top{bottom:82px;right:16px}
  html.sxc-bottomnav #sx-top{bottom:146px}

  .sxc-panel{
    right:0;left:0;bottom:0;top:0;
    width:100%;height:100dvh;max-height:none;border-radius:0;
    background:
      radial-gradient(120% 40% at 85% 0%,rgba(204,255,0,.09),transparent 60%),
      linear-gradient(180deg,#141A05 0%,#0C0F08 42%,#0A0A0F 100%);
    border-left:0;border-right:0;border-bottom:0;
    transform:translateY(100%);transform-origin:50% 100%;
    transition:opacity .2s var(--ui),transform .55s var(--expo),visibility .3s;
  }
  .sxc-panel.is-open{transform:none}
  .sxc-head{padding:calc(12px + env(safe-area-inset-top)) 12px 12px 14px}
  .sxc-log{padding:16px 14px 6px}
  .sxc-bubble{max-width:88%}
  .sxc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:380px){
  .sxc-stats{grid-template-columns:1fr}
}

/* short desktop windows: never let the panel escape the viewport */
@media (max-height:620px) and (min-width:641px){
  .sxc-panel{height:calc(100vh - 110px);bottom:88px}
}

@media (prefers-reduced-motion:reduce){
  .sxc-launcher__ping{display:none}
  .sxc-msg,.sxc-in{animation:none}
  .sxc-step{opacity:1}
}

@media print{
  .sxc{display:none !important}
}