/* The chat, as a floating panel in the bottom-right corner.
 *
 * A docked sidebar was tried and rejected: it pushed the content left, and the wide
 * matrices are exactly where you are looking when you want to ask something. A floating
 * panel costs no layout space and behaves identically on every page type.
 *
 * The trade accepted: it overlays the bottom-right of the view while open. That is
 * cheaper than narrowing a 1650px matrix, and it closes with one click.
 *
 * Semantic classes and the page's own CSS variables, never literal colours where a
 * variable exists (BR-019), so the panel takes the skin the package was rendered with.
 *
 * It must not print (BR-040): a chat box in a PDF deliverable is a defect.
 */

.itom-chat {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font: 13px/1.55 "Segoe UI", Helvetica, Arial, sans-serif;
}

/* The launcher IS the speech balloon — an ellipse with a tail, the word inside it.
 *
 * An ellipse rather than a rounded rectangle: a rounded rectangle reads as a button with
 * a spike on it, where a balloon is the shape people actually recognise.
 *
 * Fixed width and height rather than padding, so the shape stays a stable ellipse when
 * the label switches between "Chat" and "Close" — sized by padding it would visibly
 * stretch on every toggle.
 *
 * The tail is a CSS triangle on ::after: no SVG, no rotated square, crisp at any zoom.
 * It sits just right of centre, which is where the ellipse's edge is still low enough for
 * the tail to look attached rather than floating.
 *
 * The colour is a variable so a skin can take it over, with a dark blue default. This is
 * UI chrome rather than a rendered view, so BR-019's "a skin decides appearance" does not
 * bind here — but leaving the hook costs nothing.
 */
.itom-chat-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 62px;
  margin-bottom: 10px;                /* room for the tail below the balloon */
  padding: 0;
  border: 0;
  border-radius: 50%;                 /* the balloon */
  background: var(--itom-chat-accent, #12406e);
  color: #fff;
  font: inherit;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(18, 64, 110, .34);
}

/* The tail, pointing down and slightly in toward the corner the balloon sits in. */
.itom-chat-toggle::after {
  content: "";
  position: absolute;
  left: calc(50% + 4px);
  bottom: -9px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 0 13px;
  border-color: var(--itom-chat-accent, #12406e) transparent transparent transparent;
}

.itom-chat-toggle:hover { background: var(--itom-chat-accent-hover, #0d3258); }
.itom-chat-toggle:hover::after {
  border-top-color: var(--itom-chat-accent-hover, #0d3258);
}
.itom-chat-toggle:focus-visible {
  outline: 2px solid var(--itom-chat-accent, #12406e);
  outline-offset: 3px;
}

.itom-chat-panel {
  display: none;
  flex-direction: column;
  width: min(420px, calc(100vw - 36px));
  max-height: min(560px, calc(100vh - 120px));
  margin-bottom: 10px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #d7dee7);
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.itom-chat.open .itom-chat-panel { display: flex; }

.itom-chat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line, #d7dee7);
  background: #eef2f7;
}
.itom-chat-head strong { font-size: 13px; }
.itom-chat-meta {
  flex: 1;
  color: var(--mut, #5d6b7d);
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.itom-chat-clear {
  border: 0;
  background: none;
  padding: 0;
  color: var(--mut, #5d6b7d);
  font: inherit;
  font-size: 11.5px;
  text-decoration: underline;
  cursor: pointer;
}
.itom-chat-clear:hover { color: var(--open, #b4471f); }

.itom-chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px 15px;
}
.itom-chat-hint,
.itom-chat-detail {
  margin: 0 0 12px;
  color: var(--mut, #5d6b7d);
  font-size: 12px;
}

.itom-msg { margin-bottom: 13px; }
.itom-msg p { margin: 0 0 7px; }
.itom-msg.me {
  padding-left: 10px;
  border-left: 3px solid var(--line, #d7dee7);
  color: var(--ink, #1d2530);
  font-weight: 600;
}
.itom-msg.them { color: var(--ink, #1d2530); white-space: pre-wrap; }
.itom-msg.err { color: var(--open, #b4471f); }
.itom-msg.warn { color: var(--assumed, #8a6d1f); font-size: 12px; }
.itom-chat-wait { color: var(--mut, #5d6b7d); font-style: italic; }

/* Citation links. Visibly distinct because a link here is a guarantee: the service
 * matched the id against the model before writing it (BR-042). */
.itom-msg a.cite {
  color: var(--link, #245a8d);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .93em;
  white-space: nowrap;
}
.itom-msg a.cite:hover { background: #eef2f7; }

.itom-chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 15px;
  border-top: 1px solid var(--line, #d7dee7);
  background: var(--card, #fff);
}
.itom-chat-input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line, #d7dee7);
  border-radius: 6px;
  font: inherit;
  color: var(--ink, #1d2530);
  background: var(--card, #fff);
}
.itom-chat-input:disabled { background: #f4f6f9; color: var(--mut, #5d6b7d); }
.itom-chat-send {
  padding: 9px 16px;
  border: 1px solid var(--link, #245a8d);
  border-radius: 6px;
  background: var(--link, #245a8d);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.itom-chat-send:disabled { opacity: .55; cursor: default; }

@media print {
  .itom-chat { display: none !important; }
}