.spatial-ai-panel {
  position: fixed;
  right: 18px;
  top: 88px;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 110px);
  background: rgba(255,255,255,.98);
  border: 1px solid #d6dbe3;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
  z-index: 1300;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.spatial-ai-panel.hidden { display:none; }
.spatial-ai-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding: 12px 14px; background:#0f172a; color:#fff;
}
.spatial-ai-sub { font-size:.8rem; opacity:.8; margin-top:2px; }
.spatial-ai-close {
  border:none; background:transparent; color:#fff; font-size:1.45rem; cursor:pointer;
}
.spatial-ai-body { padding: 12px 14px; overflow:auto; }
.spatial-ai-label { display:block; font-weight:600; margin-bottom:6px; }
#spatial-ai-query {
  width:100%; resize:vertical; min-height:80px; border:1px solid #cbd5e1; border-radius:10px;
  padding:10px; font: inherit;
}
.spatial-ai-actions, .spatial-ai-examples { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.spatial-ai-examples button {
  border:1px solid #cbd5e1; background:#f8fafc; border-radius:999px; padding:5px 10px; cursor:pointer;
}
.spatial-ai-status {
  margin-top:10px; padding:8px 10px; border-radius:10px; background:#f8fafc; color:#334155;
}
.spatial-ai-status[data-kind="ok"] { background:#ecfdf5; color:#166534; }
.spatial-ai-status[data-kind="error"] { background:#fef2f2; color:#991b1b; }
.spatial-ai-summary {
  margin-top:10px; padding:10px; border-left:4px solid #0ea5e9; background:#f8fafc; white-space:pre-wrap;
}
.spatial-ai-meta {
  margin-top:10px; font-size:.92rem; color:#334155; background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:10px;
}
.spatial-ai-meta > div + div { margin-top:4px; }
.spatial-ai-table { margin-top:10px; }
.spatial-ai-table table { width:100%; border-collapse:collapse; font-size:.92rem; }
.spatial-ai-table th, .spatial-ai-table td { padding:8px; border-bottom:1px solid #e2e8f0; text-align:left; }
.spatial-ai-table tbody tr { cursor:pointer; }
.spatial-ai-table tbody tr:hover { background:#f8fafc; }
.spatial-ai-popup { margin-top:8px; padding-top:6px; border-top:1px solid #e2e8f0; }
@media (max-width: 720px) {
  .spatial-ai-panel { left: 12px; right: 12px; width: auto; top: 76px; max-height: calc(100vh - 88px); }
}