.surf-assistant {
  --xw-green: #75ff9b;
  --xw-green-deep: #20d86c;
  --xw-cyan: #59e8ff;
  --xw-ink: #f4fff7;
  --xw-muted: #86a593;
  --xw-bg: #050a07;
  --xw-panel: rgba(7, 15, 10, .97);
  --xw-surface: rgba(15, 27, 19, .94);
  --xw-line: rgba(117, 255, 155, .18);
  --surf-bot-top: 55vh;
  position: fixed;
  z-index: 170;
  top: var(--surf-bot-top);
  right: 18px;
  width: 70px;
  color: var(--xw-ink);
  font-family: Inter, "Noto Sans SC", system-ui, sans-serif;
  transform: translateY(-50%);
  touch-action: none;
}
.surf-assistant,.surf-assistant * { box-sizing: border-box; }
.surf-assistant button,.surf-assistant textarea,.surf-assistant select { font: inherit; }
.surf-assistant .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.surf-bot-toggle {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 70px;
  min-height: 98px;
  padding: 11px 6px 8px;
  place-items: center;
  overflow: visible;
  color: var(--xw-ink);
  border: 1px solid rgba(117,255,155,.5);
  border-radius: 25px;
  background:
    linear-gradient(rgba(117,255,155,.05) 1px, transparent 1px) 0 0 / 9px 9px,
    linear-gradient(145deg, rgba(15,32,21,.98), rgba(3,8,5,.98));
  box-shadow: 0 20px 50px rgba(0,0,0,.48), inset 0 0 25px rgba(117,255,155,.08), 0 0 30px rgba(34,222,103,.12);
  cursor: grab;
  user-select: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.surf-bot-toggle::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6px;
  border: 1px solid rgba(117,255,155,.16);
  border-radius: 30px;
  background: conic-gradient(from 0deg, transparent 0 66%, rgba(117,255,155,.72) 78%, transparent 88%);
  filter: drop-shadow(0 0 8px rgba(117,255,155,.34));
  animation: xwOrbit 6s linear infinite;
}
.surf-bot-toggle::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 9px;
  bottom: 36px;
  left: 9px;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--xw-green),transparent);
  box-shadow: 0 0 9px var(--xw-green);
  opacity: .6;
  animation: xwScan 3.4s ease-in-out infinite;
}
.surf-bot-toggle:hover { border-color: var(--xw-green); box-shadow: 0 22px 55px rgba(0,0,0,.52), inset 0 0 32px rgba(117,255,155,.12), 0 0 36px rgba(117,255,155,.22); transform: translateX(-4px) scale(1.02); }
.surf-bot-toggle:active { cursor: grabbing; }
.surf-bot-toggle:focus-visible { outline: 2px solid var(--xw-cyan); outline-offset: 5px; }
.surf-assistant.is-open .surf-bot-toggle { border-color: var(--xw-green); box-shadow: inset 0 0 32px rgba(117,255,155,.16), 0 0 42px rgba(117,255,155,.25); }

.surf-bot-robot {
  position: relative;
  display: grid;
  width: 49px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(117,255,155,.72);
  border-radius: 16px 16px 19px 19px;
  background: radial-gradient(circle at 50% 18%, rgba(117,255,155,.18), transparent 48%), #07100b;
  box-shadow: inset 0 -10px 20px rgba(0,0,0,.45), 0 0 18px rgba(117,255,155,.18);
  clip-path: polygon(12% 0,88% 0,100% 15%,100% 86%,86% 100%,14% 100%,0 86%,0 15%);
}
.surf-bot-robot::before,.surf-bot-robot::after { content: ""; position: absolute; top: 19px; width: 5px; height: 12px; border: 1px solid rgba(117,255,155,.55); background: #07100b; }.surf-bot-robot::before { left: -6px; border-radius: 4px 0 0 4px; }.surf-bot-robot::after { right: -6px; border-radius: 0 4px 4px 0; }
.surf-bot-antenna { position: absolute; top: -9px; width: 2px; height: 10px; background: var(--xw-green); box-shadow: 0 0 8px var(--xw-green); }
.surf-bot-antenna::after { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--xw-green); box-shadow: 0 0 13px var(--xw-green); }
.surf-bot-face { display: flex; gap: 10px; align-items: center; justify-content: center; width: 35px; height: 23px; border: 1px solid rgba(117,255,155,.18); border-radius: 8px; background: #020604; box-shadow: inset 0 0 12px rgba(117,255,155,.08); }
.surf-bot-face b { width: 6px; height: 6px; border-radius: 2px; background: var(--xw-green); box-shadow: 0 0 10px var(--xw-green); animation: xwBlink 4.8s infinite; }
.surf-bot-body { position: absolute; right: 5px; bottom: 2px; color: var(--xw-green); font: 900 7px "JetBrains Mono", monospace; font-style: normal; text-shadow: 0 0 8px var(--xw-green); }
.surf-bot-toggle-copy { text-align: center; }.surf-bot-toggle-copy strong,.surf-bot-toggle-copy small { display: block; }.surf-bot-toggle-copy strong { font-size: 11px; letter-spacing: .12em; }.surf-bot-toggle-copy small { margin-top: 3px; color: var(--xw-green); font: 800 6px "JetBrains Mono", monospace; letter-spacing: .08em; white-space: nowrap; }
.surf-bot-live { position: absolute; z-index: 4; top: 8px; right: 7px; width: 7px; height: 7px; border: 1px solid #07100b; border-radius: 50%; background: #526158; }.surf-assistant.is-connected .surf-bot-live { background: var(--xw-green); box-shadow: 0 0 10px var(--xw-green); }

.surf-bot-panel {
  position: absolute;
  top: 50%;
  right: 87px;
  display: grid;
  grid-template-rows: auto auto minmax(160px,1fr) auto auto auto;
  width: min(430px,calc(100vw - 128px));
  max-height: min(720px,calc(100vh - 28px));
  overflow: hidden;
  color: var(--xw-ink);
  border: 1px solid rgba(117,255,155,.42);
  border-radius: 20px;
  background:
    linear-gradient(rgba(117,255,155,.035) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg,rgba(117,255,155,.025) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--xw-panel);
  box-shadow: 0 34px 110px rgba(0,0,0,.64), inset 0 0 50px rgba(117,255,155,.035), 0 0 55px rgba(117,255,155,.12);
  opacity: 0;
  pointer-events: none;
  transform: translate(24px,-50%) scale(.95);
  transform-origin: right center;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
  backdrop-filter: blur(22px);
}
.surf-bot-panel::before { content: ""; position: absolute; z-index: 3; top: 0; right: 42px; left: 42px; height: 2px; background: linear-gradient(90deg,transparent,var(--xw-green),var(--xw-cyan),transparent); box-shadow: 0 0 14px rgba(117,255,155,.65); }
.surf-assistant.is-open .surf-bot-panel { opacity: 1; pointer-events: auto; transform: translate(0,-50%) scale(1); }

.surf-bot-head { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr) 32px; gap: 11px; align-items: center; padding: 15px 16px 13px; border-bottom: 1px solid var(--xw-line); background: linear-gradient(90deg,rgba(117,255,155,.07),transparent 62%); cursor: grab; user-select: none; }
.surf-bot-head::after { content: "NODE 01"; position: absolute; right: 54px; bottom: 7px; color: rgba(117,255,155,.35); font: 700 5px "JetBrains Mono", monospace; letter-spacing: .12em; }.surf-bot-head:active { cursor: grabbing; }
.surf-bot-head > div:nth-child(2) span { color: var(--xw-green); font: 800 7px "JetBrains Mono", monospace; letter-spacing: .13em; }.surf-bot-head h2 { margin: 3px 0 0; color: var(--xw-ink); font-size: 16px; letter-spacing: -.02em; }
.surf-bot-head > button { display: grid; width: 32px; height: 32px; padding: 0; place-items: center; color: var(--xw-muted); border: 1px solid var(--xw-line); border-radius: 10px; background: rgba(4,10,6,.7); font-size: 19px; cursor: pointer; }.surf-bot-head > button:hover { color: var(--xw-ink); border-color: var(--xw-green); }
.surf-bot-mini { position: relative; display: grid; width: 40px; height: 40px; place-items: center; overflow: hidden; border: 1px solid rgba(117,255,155,.65); border-radius: 13px; background: radial-gradient(circle,rgba(117,255,155,.18),#061009 65%); box-shadow: 0 0 17px rgba(117,255,155,.14); }.surf-bot-mini::before { content: ""; position: absolute; width: 30px; height: 30px; border: 1px solid rgba(117,255,155,.2); border-radius: 50%; animation: xwOrbit 5s linear infinite; }.surf-bot-mini i { position: relative; display: block; width: 24px; height: 14px; border-radius: 6px; background: var(--xw-green); }.surf-bot-mini i::before,.surf-bot-mini i::after { content: ""; position: absolute; top: 5px; width: 4px; height: 4px; border-radius: 1px; background: #061009; }.surf-bot-mini i::before { left: 5px; }.surf-bot-mini i::after { right: 5px; }.surf-bot-mini b { position: absolute; right: 3px; bottom: 1px; color: var(--xw-green); font: 900 6px "JetBrains Mono", monospace; }

.surf-bot-context { display: flex; gap: 7px; align-items: center; min-height: 37px; padding: 0 16px; border-bottom: 1px solid var(--xw-line); background: rgba(117,255,155,.025); font-size: 8px; }.surf-bot-context i { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #526158; }.surf-bot-context i.online { background: var(--xw-green); box-shadow: 0 0 9px var(--xw-green); }.surf-bot-context span { color: var(--xw-muted); }.surf-bot-context strong { margin-left: auto; overflow: hidden; color: var(--xw-ink); text-overflow: ellipsis; white-space: nowrap; }
.surf-bot-messages { min-height: 180px; overflow-y: auto; overscroll-behavior: contain; padding: 15px; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(117,255,155,.35) transparent; }
.surf-message { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; align-items: start; margin-bottom: 13px; }.surf-message > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(117,255,155,.55); border-radius: 9px; color: #041008; background: var(--xw-green); box-shadow: 0 0 14px rgba(117,255,155,.16); font-size: 9px; font-weight: 900; }.surf-message.user { grid-template-columns: minmax(0,1fr) 28px; }.surf-message.user > span { grid-column: 2; grid-row: 1; color: var(--xw-cyan); border-color: rgba(89,232,255,.32); background: rgba(89,232,255,.08); }.surf-message.user > div { grid-column: 1; grid-row: 1; border-color: rgba(89,232,255,.16); border-radius: 13px 5px 13px 13px; background: rgba(89,232,255,.045); }
.surf-message > div { min-width: 0; padding: 10px 11px; border: 1px solid var(--xw-line); border-radius: 5px 13px 13px 13px; background: rgba(12,23,16,.78); box-shadow: inset 0 0 20px rgba(117,255,155,.025); }.surf-message strong { display: block; margin-bottom: 5px; color: var(--xw-green); font-size: 8px; letter-spacing: .06em; }.surf-message p { margin: 0; color: #dcebe1; font-size: 10px; line-height: 1.72; white-space: pre-wrap; overflow-wrap: anywhere; }.surf-message a { color: var(--xw-cyan); text-decoration: underline; text-underline-offset: 3px; }.surf-message.loading p::after { content: ""; display: inline-block; width: 18px; height: 3px; margin-left: 6px; border-radius: 999px; background: linear-gradient(90deg,var(--xw-green) 25%,transparent 25% 40%,var(--xw-cyan) 40% 64%,transparent 64% 78%,var(--xw-green) 78%); animation: xwThinking 1s infinite; }
.surf-research-copy { display: grid; gap: 8px; }.surf-research-copy h3 { margin: 6px 0 0; padding: 5px 8px; color: var(--xw-green); border-left: 2px solid var(--xw-green); border-radius: 0 7px 7px 0; background: rgba(117,255,155,.055); font-size: 10px; line-height: 1.55; letter-spacing: .02em; }.surf-research-copy h3:first-child { margin-top: 0; }.surf-research-copy p { margin: 0; }.surf-research-copy .surf-research-list-item { position: relative; padding-left: 5px; color: #dcebe1; }.surf-research-copy a { word-break: break-all; }
.surf-quick-prompts { display: flex; gap: 6px; padding: 0 15px 11px; overflow-x: auto; touch-action: pan-x; }.surf-quick-prompts button { flex: 0 0 auto; min-height: 27px; padding: 0 9px; color: var(--xw-muted); border: 1px solid var(--xw-line); border-radius: 999px; background: rgba(4,10,6,.62); font-size: 7px; font-weight: 800; cursor: pointer; }.surf-quick-prompts button:hover { color: var(--xw-green); border-color: rgba(117,255,155,.6); background: rgba(117,255,155,.06); }
.surf-bot-form { padding: 11px 15px; border-top: 1px solid var(--xw-line); background: rgba(3,8,5,.72); }.surf-bot-input textarea { width: 100%; min-height: 70px; max-height: 160px; padding: 10px 11px; color: var(--xw-ink); border: 1px solid rgba(117,255,155,.2); border-radius: 11px; outline: none; background: rgba(10,20,14,.92); font-size: 10px; line-height: 1.55; resize: vertical; touch-action: pan-y; }.surf-bot-input textarea::placeholder { color: #638071; }.surf-bot-input textarea:focus { border-color: var(--xw-green); box-shadow: 0 0 0 2px rgba(117,255,155,.07), inset 0 0 20px rgba(117,255,155,.025); }
.surf-bot-actions { display: flex; gap: 7px; align-items: end; margin-top: 8px; }.surf-bot-actions label { display: grid; gap: 3px; margin-right: auto; }.surf-bot-actions label span { color: var(--xw-muted); font-size: 7px; }.surf-bot-actions select,.surf-bot-actions button,.surf-bot-panel footer button { min-height: 31px; padding: 0 9px; color: var(--xw-ink); border: 1px solid var(--xw-line); border-radius: 8px; background: rgba(11,22,15,.9); font-size: 8px; font-weight: 800; cursor: pointer; }.surf-bot-actions select { min-width: 78px; }.surf-bot-actions button:hover,.surf-bot-panel footer button:hover:not(:disabled) { border-color: var(--xw-green); }.surf-bot-actions .surf-bot-submit { color: #041008; border-color: var(--xw-green); background: linear-gradient(135deg,var(--xw-green),#4bea8a); box-shadow: 0 6px 18px rgba(117,255,155,.14); }.surf-bot-actions button:disabled { opacity: .55; cursor: wait; }
.surf-bot-panel footer { display: flex; justify-content: space-between; align-items: center; padding: 9px 15px; color: var(--xw-muted); border-top: 1px solid var(--xw-line); background: rgba(3,8,5,.76); font: 700 7px "JetBrains Mono", monospace; letter-spacing: .05em; }.surf-bot-panel footer span::before { content: "●"; margin-right: 6px; color: var(--xw-green); text-shadow: 0 0 8px var(--xw-green); }.surf-bot-panel footer button:disabled { opacity: .4; cursor: default; }

@keyframes xwOrbit { to { transform: rotate(360deg); } }
@keyframes xwScan { 0%,100% { transform: translateY(-14px); opacity: .18; } 50% { transform: translateY(14px); opacity: .78; } }
@keyframes xwBlink { 0%,45%,49%,100% { transform: scaleY(1); } 47% { transform: scaleY(.12); } }
@keyframes xwThinking { 50% { opacity: .3; transform: translateX(3px); } }

@media (max-width: 620px) {
  .surf-assistant { right: 10px; width: 58px; }
  .surf-bot-toggle { width: 58px; min-height: 82px; padding: 9px 4px 6px; border-radius: 21px; }
  .surf-bot-robot { width: 41px; height: 39px; }
  .surf-bot-face { width: 30px; height: 20px; }
  .surf-bot-panel { position: fixed; top: auto; right: 8px; bottom: 8px; width: calc(100vw - 16px); max-height: min(740px,calc(100vh - 16px)); transform: translateY(22px) scale(.98); transform-origin: right bottom; }
  .surf-assistant.is-open .surf-bot-panel { transform: translateY(0) scale(1); }
  .surf-assistant.is-open .surf-bot-toggle { opacity: 0; pointer-events: none; }
  .surf-bot-head { cursor: default; }
  .surf-bot-messages { min-height: 135px; }
  .surf-bot-actions { flex-wrap: wrap; }.surf-bot-actions label { flex: 1; }.surf-bot-actions select { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .surf-bot-toggle::before,.surf-bot-toggle::after,.surf-bot-face b,.surf-message.loading p::after,.surf-bot-mini::before { animation: none; }.surf-bot-panel,.surf-bot-toggle { transition: none; } }