/* ═══════════════════════════════════════════════════════════════
   XODE ASSISTANT — chat dock

   Built from the same tokens as the rest of the editor. It sits above
   the canvas but below the modals, and on a phone it becomes a sheet
   that clears the bottom toolbar rather than covering it.
   ═══════════════════════════════════════════════════════════════ */

/* ── launcher ─────────────────────────────────────────────────── */
.xa-launcher {
  position: fixed;
  /* Set by assistant.js from the live width of the right inspector, so
     the button sits in the canvas corner rather than on top of the
     panel. Falls back to a sane value before the script measures. */
  right: var(--xa-right, 300px);
  bottom: var(--xa-bottom, 104px);
  z-index: 9400;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border-2, #383B46);
  background: linear-gradient(135deg, #7C5CFF, #5B42C9);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(124, 92, 255, .38);
  transition: transform .18s, box-shadow .18s, opacity .18s;
}
.xa-launcher svg { width: 23px; height: 23px; }
.xa-launcher:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 32px rgba(124, 92, 255, .5);
}
.xa-launcher.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(.8);
}

/* ── panel ────────────────────────────────────────────────────── */
.xa-panel {
  position: fixed;
  right: var(--xa-right, 300px);
  bottom: var(--xa-bottom, 104px);
  z-index: 9401;
  width: 372px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100dvh - 180px);
  display: flex;
  flex-direction: column;
  background: var(--bg-1, #131419);
  border: 1px solid var(--border-1, #2B2E37);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .2s, transform .2s;
}
.xa-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.xa-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-1, #2B2E37);
  background: var(--bg-2, #1A1C22);
  flex: 0 0 auto;
}
.xa-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xa-head-text strong {
  font-family: var(--font-display, Inter, sans-serif);
  font-size: 14px; font-weight: 700;
  color: var(--text-0, #F5F5F7);
}
.xa-head-text span {
  font-size: 11.5px;
  color: var(--text-3, #5A5C66);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xa-head-text code {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  color: var(--violet, #7C5CFF);
  background: rgba(124, 92, 255, .12);
  padding: 1px 5px;
  border-radius: 4px;
}
.xa-close {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--text-2, #8B8D98);
  display: grid; place-items: center;
  cursor: pointer;
}
.xa-close svg { width: 16px; height: 16px; }
.xa-close:hover { background: var(--bg-3, #22242C); color: var(--text-0, #F5F5F7); }

/* ── log ──────────────────────────────────────────────────────── */
.xa-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}
.xa-log::-webkit-scrollbar { width: 8px; }
.xa-log::-webkit-scrollbar-thumb {
  background: var(--bg-3, #22242C);
  border-radius: 99px;
}

.xa-msg { display: flex; }
.xa-msg.xa-me { justify-content: flex-end; }

.xa-bubble {
  max-width: 86%;
  padding: 10px 13px;
  border-radius: 13px;
  font-size: 13px;
  line-height: 1.65;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.xa-bot .xa-bubble {
  background: var(--bg-2, #1A1C22);
  border: 1px solid var(--border-1, #2B2E37);
  color: var(--text-1, #C7C9D1);
  border-bottom-left-radius: 4px;
}
.xa-me .xa-bubble {
  background: linear-gradient(135deg, #7C5CFF, #6647E0);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.xa-bubble strong { color: var(--text-0, #F5F5F7); font-weight: 700; }
.xa-me .xa-bubble strong { color: #fff; }
.xa-bubble code {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  background: rgba(124, 92, 255, .16);
  color: #B9A5FF;
  padding: 1.5px 6px;
  border-radius: 5px;
  white-space: nowrap;
}
.xa-me .xa-bubble code {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

/* ── suggestion chips ─────────────────────────────────────────── */
.xa-chips {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 0 14px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.xa-chips::-webkit-scrollbar { display: none; }
.xa-chips button {
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: 99px;
  border: 1px solid var(--border-1, #2B2E37);
  background: var(--bg-2, #1A1C22);
  color: var(--text-2, #8B8D98);
  font-family: inherit;
  font-size: 11.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.xa-chips button:hover {
  border-color: var(--violet, #7C5CFF);
  color: var(--text-0, #F5F5F7);
}

/* ── input ────────────────────────────────────────────────────── */
.xa-form {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-1, #2B2E37);
  background: var(--bg-2, #1A1C22);
}
.xa-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid var(--border-1, #2B2E37);
  background: var(--bg-0, #0B0C0F);
  color: var(--text-0, #F5F5F7);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.xa-form input::placeholder { color: var(--text-3, #5A5C66); }
.xa-form input:focus { border-color: var(--violet, #7C5CFF); }
.xa-form button {
  flex: 0 0 auto;
  width: 40px;
  border-radius: 10px;
  border: 0;
  background: var(--violet, #7C5CFF);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s;
}
.xa-form button svg { width: 16px; height: 16px; }
.xa-form button:hover { background: #6647E0; }

/* ── phones ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Clear the editor's bottom bar rather than sitting on top of it. */
  .xa-launcher {
    right: 14px !important;
    bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
    width: 48px; height: 48px;
  }
  .xa-panel {
    right: 8px !important; left: 8px;
    bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto;
    height: min(440px, calc(100dvh - 260px));
  }
  .xa-bubble { max-width: 90%; font-size: 13.5px; }
  /* 16px stops iOS zooming the whole page when the field is focused. */
  .xa-form input { font-size: 16px; }
}

@media (max-width: 380px) {
  .xa-panel { bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important; }
  .xa-head-text span { display: none; }
}

/* Someone who prefers less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  .xa-panel, .xa-launcher { transition: none; }
}

/* A message you sent can be tapped to load it back into the box for
   editing — the keyboard's up arrow does not exist on a phone. */
.xa-bubble.xa-reusable { cursor: pointer; }
.xa-bubble.xa-reusable:hover { filter: brightness(1.12); }
.xa-bubble.xa-reusable:focus-visible {
  outline: 2px solid var(--violet, #7C5CFF);
  outline-offset: 2px;
}

/* ── Not on the welcome screen ────────────────────────────────
   The assistant only has anything to act on once a project is open.
   On the welcome screen every command could only answer "open a
   project first", and the launcher sat over the template grid.

   display:none rather than opacity, so it is out of the tab order
   too — a hidden button you can still reach with the keyboard is
   the same bug wearing a hat. */
.xa-launcher.xa-off,
.xa-panel.xa-off {
  display: none !important;
}