/* "Ask the map" chat panel (chat-integration ticket). Every selector here is prefixed
 * `.chat-` - chat.js is the only module that ever creates these classes and this is the
 * only file that styles them, so nothing here can collide with the seven page modules'
 * own CSS and nothing here reaches an element it does not own. Palette matched to app.css's
 * own #171b21 / #313845 / #cfd6df triplet (the info button, the card-close button) as
 * literals rather than its `--panel`/`--line`/`--ink` custom properties: those live in
 * app.css's `:root` and this file must render correctly regardless of load order.
 */

.chat-launcher {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 6;
  min-height: 44px;
  padding: 10px 16px;
  background: #171b21;
  color: #cfd6df;
  border: 1px solid #313845;
  border-radius: 20px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.chat-launcher:hover { border-color: #4d90c8; }

.chat-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 7;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: #171b21;
  color: #cfd6df;
  border: 1px solid #313845;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  overflow: hidden;
}
/* an author stylesheet's `display: flex` above outranks the UA sheet's `[hidden] { display:
 * none }` at equal specificity - so without this, chat.js's own `panelEl.hidden = true`
 * (setOpen) silently stops closing the panel the moment this rule exists. Caught in a real
 * browser, not by reading the CSS - the DOM property flips, the box stays on screen. */
.chat-panel[hidden] { display: none; }

.chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #313845;
  flex: 0 0 auto;
}
.chat-title {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #9aa4b2;
  flex: 1 1 auto;
}
.chat-close {
  min-width: 32px;
  min-height: 32px;
  background: none;
  border: 0;
  color: #9aa4b2;
  font-size: 16px;
  cursor: pointer;
}
.chat-close:hover { color: #cfd6df; }

.chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.chat-msg { white-space: pre-wrap; word-break: break-word; }
.chat-msg-user {
  align-self: flex-end;
  max-width: 88%;
  background: #2f6ea6;
  color: #fff;
  border-radius: 10px 10px 2px 10px;
  padding: 6px 10px;
}
.chat-msg-assistant {
  align-self: flex-start;
  max-width: 92%;
  background: #1f242b;
  border: 1px solid #313845;
  border-radius: 10px 10px 10px 2px;
  padding: 6px 10px;
}
.chat-msg-error { color: #fc8d59; font-size: 12px; }

/* the step rows - THE product's core. One button per tool call, running -> ok/fail;
 * clicking it (any time, including after it settles) runs the exact same call again and
 * appends a brand new row below, never mutating this one - the history of every attempt
 * stays on screen. */
.chat-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  background: #1f242b;
  border: 1px solid #313845;
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  color: #cfd6df;
  text-align: left;
  cursor: pointer;
}
.chat-step:hover { border-color: #4d90c8; }
.chat-step-name {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  word-break: break-all;
}
.chat-step-state {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.chat-step-run .chat-step-state { color: #9aa4b2; }
.chat-step-ok .chat-step-state { color: #6baed6; }
.chat-step-fail .chat-step-state { color: #fc8d59; }
.chat-step-summary { font-size: 11px; color: #9aa4b2; }
.chat-step-summary:empty { display: none; }

.chat-form {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid #313845;
  flex: 0 0 auto;
}
.chat-textarea {
  flex: 1 1 auto;
  resize: none;
  background: #0f1215;
  color: #cfd6df;
  border: 1px solid #313845;
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
}
.chat-textarea:disabled { opacity: .6; }
.chat-send {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 36px;
  background: #2f6ea6;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.chat-send:disabled { opacity: .5; cursor: default; }

@media (max-width: 420px) {
  .chat-panel { right: 8px; left: 8px; width: auto; bottom: 8px; }
  .chat-launcher { right: 8px; bottom: 8px; }
}