/* Shared by the main conversation and the work order assistant. */
.chat-page,
.chat-layout,
#chat-main-container,
#chat-component-container,
#ot-chat-component-wrapper,
.manteia-chat-wrapper {
  min-width: 0;
  min-height: 0;
}

.chat-page {
  background: var(--bg-card, #fff);
}

/* Shared Mermaid cards: all typography stays outside the generated SVG. */
.chat-diagram-card,
.chat-diagram-modal {
  --diagram-blue: #2563eb;
  box-sizing: border-box;
  min-width: 0;
  color: #334155;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  font: 400 13px/1.5 Arial, sans-serif;
  overflow: hidden;
}

.chat-diagram-card { margin: 20px 0; box-shadow: 0 3px 18px rgb(15 23 42 / 4%); }
.chat-diagram-header { padding: 20px 22px 16px; background: linear-gradient(125deg, #f8fbff, #fff 75%); }
.chat-diagram-eyebrow { display: block; color: #2563eb; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.chat-markdown-container .chat-diagram-title,
.chat-diagram-modal h2 { margin: 6px 0 0; padding: 0; color: #0f172a; font-size: 16px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.chat-markdown-container .chat-diagram-description { margin: 6px 0 0; color: #64748b; font-size: 12px; line-height: 1.6; }
.chat-diagram-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 14px; border-block: 1px solid #edf2f7; background: #fff; }
.chat-diagram-tool-group { display: flex; align-items: center; gap: 4px; min-width: 0; }
.chat-diagram-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; color: #475569; background: transparent; font: 600 11px/1 Arial, sans-serif; cursor: pointer; transition: background-color .15s, color .15s; }
.chat-diagram-button svg { flex-shrink: 0; width: 16px; height: 16px; margin: 0; }
.chat-diagram-button:hover { background: #eff6ff; color: #1d4ed8; }
.chat-diagram-button:focus-visible,
.chat-diagram-viewport:focus-visible,
.chat-diagram-source summary:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
.chat-diagram-button:disabled { opacity: .35; cursor: default; }
.chat-diagram-icon-button { width: 36px; padding: 0; }
.chat-diagram-zoom { width: 48px; text-align: center; color: #64748b; font: 500 11px/1 Arial, sans-serif; font-variant-numeric: tabular-nums; }
.chat-diagram-viewport { container-type: inline-size; width: 100%; max-height: 440px; min-height: 130px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; background: radial-gradient(#e2e8f0 .7px, transparent .7px) 0 0 / 18px 18px, #fff; }
.chat-diagram-stage { display: flex; justify-content: center; min-width: 100%; width: max-content; padding: 22px 16px; box-sizing: border-box; }
.chat-diagram-canvas { --diagram-zoom: 1; flex-shrink: 0; width: calc(min(max(100cqw - 32px, var(--diagram-natural-width) * .8), var(--diagram-natural-width)) * var(--diagram-zoom)); max-width: none; }
.chat-diagram-canvas > svg { display: block; width: 100%; height: auto; max-width: none; margin: 0; }
.chat-markdown-container .chat-diagram-note,
.chat-diagram-modal .chat-diagram-note { margin: 0; padding: 12px 18px; border-top: 1px solid #edf2f7; color: #64748b; font: 400 10px/1.6 Arial, sans-serif; }
.chat-diagram-feedback { padding: 0 18px; color: #2563eb; font-size: 11px; }
.chat-diagram-feedback:not(:empty) { padding-block: 8px; border-top: 1px solid #edf2f7; }
.chat-diagram-source { border-top: 1px solid #edf2f7; background: #f8fafc; }
.chat-diagram-source summary { padding: 11px 18px; color: #64748b; font-size: 11px; cursor: pointer; }
.chat-markdown-container .chat-diagram-source pre,
.chat-diagram-modal .chat-diagram-source pre { max-height: 260px; margin: 0; padding: 16px 18px; border: 0; border-top: 1px solid #e2e8f0; border-radius: 0; background: #f8fafc; color: #0f172a; font: 13px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; overflow: auto; white-space: pre; }
.chat-markdown-container .chat-diagram-source code,
.chat-diagram-modal .chat-diagram-source code { padding: 0; color: inherit; background: transparent; font: inherit; }
.chat-diagram-placeholder { display: flex; min-height: 145px; align-items: center; justify-content: center; gap: 12px; padding: 24px; color: #64748b; font-size: 12px; background: #f8fafc; }
.chat-diagram-loading-mark { width: 18px; height: 18px; border: 2px solid #dbeafe; border-top-color: #3b82f6; border-radius: 50%; animation: diagram-spin 1s linear infinite; }
.chat-diagram-fallback { min-height: 100px; align-items: flex-start; flex-direction: column; gap: 6px; background: #f8fafc; }
.chat-diagram-fallback strong { font-size: 12px; font-weight: 600; color: #475569; }
.chat-diagram-fallback .chat-diagram-button { margin-top: 5px; padding-inline: 0; color: #2563eb; }
.chat-diagram-modal { position: fixed; inset: 0; width: min(1120px, calc(100vw - 48px)); max-width: none; height: fit-content; max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow-y: auto; box-shadow: 0 24px 80px rgb(15 23 42 / 20%); }
.chat-diagram-modal::backdrop { background: rgb(15 23 42 / 48%); backdrop-filter: blur(4px); }
.chat-diagram-modal-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; }
.chat-diagram-modal .chat-diagram-viewport { max-height: calc(100dvh - 270px); min-height: min(300px, 40dvh); }
.chat-diagram-modal .chat-diagram-stage { padding-block: 32px; }
@keyframes diagram-spin { to { transform: rotate(360deg); } }
@media (max-width: 520px) {
  .chat-diagram-header { padding: 17px 16px 14px; }
  .chat-diagram-toolbar { gap: 4px; padding: 6px 8px; }
  .chat-diagram-tool-group { gap: 1px; }
  .chat-diagram-button { height: 36px; padding-inline: 7px; font-size: 10px; }
  .chat-diagram-icon-button { width: 32px; padding: 0; }
  .chat-diagram-export-tools { margin-left: auto; }
  .chat-diagram-zoom { width: 40px; }
  .chat-diagram-card { border-radius: 14px; }
  .chat-diagram-modal { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom); }
  .chat-diagram-modal-header { padding: 18px 16px; }
  .chat-diagram-modal .chat-diagram-viewport { max-height: calc(100dvh - 260px); min-height: 40dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-diagram-loading-mark { animation: none; }
  .chat-diagram-button { transition: none; }
}

.chat-page-header {
  position: relative;
  z-index: 30;
}

.chat-log-container {
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  padding: 28px 24px 16px;
}

.manteia-chat-wrapper #chat-messages-list {
  width: min(100%, 48rem);
  margin-inline: auto;
  gap: 24px;
}

.chat-footer-content {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.chat-composer {
  grid-template-columns: minmax(0, 1fr) auto;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgb(15 23 42 / 4%);
}

.chat-input-region {
  grid-column: 1 / -1;
  grid-row: 1;
}

.chat-plus-control {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}

.chat-send-controls {
  grid-column: 2;
  grid-row: 2;
}

.manteia-chat-wrapper #chat-input-field,
.manteia-chat-wrapper .chat-input-sizer {
  box-sizing: border-box;
  min-height: 28px;
  max-height: min(176px, calc(var(--chat-viewport-height, 100dvh) * .24));
  padding: 2px 4px;
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-main, #0f172a);
  outline: none;
  border-radius: 0;
  overflow-x: hidden;
}

.manteia-chat-wrapper .chat-input-sizer {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  min-height: 0;
  max-height: none;
  border: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

.manteia-chat-wrapper #chat-input-field::placeholder {
  color: #64748b;
}

.manteia-chat-wrapper #chat-inline-badge-container:empty {
  display: none;
}

.chat-input-region:has(#chat-audio-review:not(.hidden)),
.chat-input-region:has(#chat-recording-status:not(.hidden)) {
  min-height: 44px;
}

.manteia-chat-wrapper #chat-mention-dropdown,
.manteia-chat-wrapper #chat-slash-dropdown {
  width: min(100%, 24rem);
  max-height: min(18rem, calc(var(--chat-viewport-height, 100dvh) * .38));
}

.manteia-chat-wrapper #chat-attachment-preview img {
  max-height: 72px;
}

.chat-message-body {
  overflow-wrap: anywhere;
}

.manteia-chat-wrapper .chat-markdown-container {
  max-width: 100%;
  color: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* Chat code has a light surface even when an ancestor uses prose-invert.
   Own both Typography palettes so pre/code cannot inherit pale text. */
.manteia-chat-wrapper .chat-markdown-container,
.chat-diagram-modal {
  --tw-prose-code: #0f172a;
  --tw-prose-pre-code: #0f172a;
  --tw-prose-pre-bg: #f8fafc;
  --tw-prose-invert-code: #0f172a;
  --tw-prose-invert-pre-code: #0f172a;
  --tw-prose-invert-pre-bg: #f8fafc;
}

.chat-markdown-container > :first-child { margin-top: 0; }
.chat-markdown-container > :last-child { margin-bottom: 0; }
.chat-markdown-container p { margin: 0 0 1em; }
.chat-markdown-container h1,
.chat-markdown-container h2,
.chat-markdown-container h3,
.chat-markdown-container h4 {
  color: var(--text-main, #0f172a);
  font-weight: 650;
  line-height: 1.35;
  margin: 1.5em 0 .65em;
  letter-spacing: -.015em;
}
.chat-markdown-container h1 { font-size: 1.35em; }
.chat-markdown-container h2 { font-size: 1.2em; }
.chat-markdown-container h3,
.chat-markdown-container h4 { font-size: 1.05em; }
.chat-markdown-container strong { font-weight: 650; }
.chat-markdown-container ul,
.chat-markdown-container ol {
  padding-left: 1.5em;
  margin: .75em 0 1.1em;
}
.chat-markdown-container ul { list-style: disc; }
.chat-markdown-container ol { list-style: decimal; }
.chat-markdown-container li { padding-left: .2em; margin: .35em 0; }
.chat-markdown-container li > p { margin: .4em 0; }
.chat-markdown-container a { color: var(--brand-primary, #2563eb); text-decoration: underline; text-underline-offset: 3px; }
.chat-markdown-container hr { border: 0; border-top: 1px solid var(--border-ui, #e2e8f0); margin: 1.5em 0; }
.chat-markdown-container blockquote {
  margin: 1.25em 0;
  padding: .75em 1em;
  border-left: 3px solid #93c5fd;
  border-radius: 0 12px 12px 0;
  background: #f8fafc;
  color: #475569;
}
.chat-markdown-container code {
  padding: .15em .35em;
  background: #f1f5f9;
  color: #0f172a;
  border-radius: 6px;
  font-size: .875em;
}
.chat-markdown-container pre {
  max-width: 100%;
  margin: 1.25em 0;
  padding: 16px;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  white-space: pre;
}
.chat-markdown-container pre code,
.chat-diagram-modal pre code { padding: 0; background: transparent; color: #0f172a; font: inherit; }
.chat-markdown-container pre code::before,
.chat-markdown-container pre code::after,
.chat-diagram-modal pre code::before,
.chat-diagram-modal pre code::after { content: none; }
.chat-markdown-container img { max-width: 100%; height: auto; border-radius: 12px; }

.chat-message-user .chat-markdown-container { line-height: 1.55; }
.chat-message-user .chat-markdown-container p { white-space: pre-wrap; }
.chat-message-actions { opacity: 1; }
.chat-message-assistant:has(.chat-report-shortcuts) .chat-message-actions { display: none; }
.chat-report-shortcuts { width: 100%; }
.chat-report-shortcuts button { min-height: 40px; padding: 8px 12px; font-size: 12px; }

.manteia-chat-wrapper .chat-markdown-table-outer {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0;
}
.manteia-chat-wrapper .chat-md-table-copy-btn {
  position: static;
  order: -1;
  align-self: end;
  min-height: 36px;
  box-shadow: none;
}
.manteia-chat-wrapper .chat-md-table-copy-btn span { display: inline; }
.manteia-chat-wrapper .chat-markdown-table-wrapper { margin: 0; padding: 0; background: #fff; border-radius: 12px; }
.manteia-chat-wrapper .chat-markdown-table-wrapper th,
.manteia-chat-wrapper .chat-markdown-table-wrapper td {
  min-width: 7.5rem;
  max-width: 22rem;
  white-space: normal !important;
  padding: 12px !important;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
  line-height: 1.5;
  border-bottom: 1px solid #e2e8f0;
}
.manteia-chat-wrapper .chat-markdown-table-wrapper th {
  background: #f8fafc;
  color: #475569;
  font-weight: 650;
}
.manteia-chat-wrapper .chat-markdown-table-wrapper tbody tr:last-child td { border-bottom: 0; }
.manteia-chat-wrapper .chat-references-container { max-width: 100%; }
.manteia-chat-wrapper .chat-references-container > button { text-align: left; min-height: 52px; }
.manteia-chat-wrapper .chat-references-container [data-reference-name] { font-size: 13px; }
.manteia-chat-wrapper .chat-action-chips,
.manteia-chat-wrapper .chat-followups-container { flex-wrap: wrap; overflow-x: visible; }
.manteia-chat-wrapper .chat-action-chips > button,
.manteia-chat-wrapper .chat-followups-container > button { min-height: 40px; max-width: 100%; white-space: normal; text-align: left; }
.manteia-chat-wrapper .chat-action-chips .chip-label { font-size: 12px; }
.manteia-chat-wrapper button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 3px; }
.manteia-chat-wrapper button:disabled { cursor: not-allowed; }
.chat-table-toolbar { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; }
.chat-table-toolbar button { display: inline-flex; min-height: 40px; align-items: center; gap: 6px; }
.chat-table-toolbar span { font-size: 12px; }

.chat-table-modal-dialog { min-height: 0; }
.chat-table-modal-header { flex-shrink: 0; }
.chat-table-modal-body { min-height: 0; }
.chat-table-modal-header button { min-width: 40px; min-height: 40px; }
.ot-assistant-container #ot-chat-panel { min-height: 0; }
.ot-assistant-container #ot-chat-panel > div:first-child h4 {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.ot-assistant-container #ot-chat-panel > div:first-child button { min-width: 40px; min-height: 40px; }

/* Also responds to the keyboard, whose height does not change CSS media queries. */
.chat-page.chat-viewport-compact .chat-page-header {
  height: 48px;
}
.chat-page.chat-viewport-compact .chat-page-header p { display: none; }
.chat-viewport-compact .manteia-chat-wrapper .chat-log-container { padding-top: 4px; padding-bottom: 4px; }
.chat-viewport-compact .manteia-chat-wrapper .chat-footer-content { padding: 4px 8px max(4px, env(safe-area-inset-bottom)); }
.chat-viewport-compact .manteia-chat-wrapper .chat-composer { padding: 6px 8px 4px; gap: 2px; }
.ot-assistant-container.chat-viewport-compact #ot-chat-panel > div:first-child { padding-top: 4px; padding-bottom: 4px; }

@media (max-width: 767px) {
  .chat-page.chat-page {
    position: fixed;
    top: var(--chat-viewport-top, 0px);
    inset-inline: 0;
    z-index: 40;
    height: var(--chat-viewport-height, 100dvh);
  }
  .chat-page.chat-page .chat-page-header {
    height: calc(60px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  .chat-page.chat-viewport-compact .chat-page-header { height: calc(48px + env(safe-area-inset-top)); }
  .chat-page-header .chat-brand-icon { display: none; }
  .chat-log-container { padding: 24px 16px 12px; scrollbar-gutter: auto; }
  .manteia-chat-wrapper #chat-messages-list { gap: 24px; }
  .chat-footer-content { padding: 8px 12px max(10px, env(safe-area-inset-bottom)); }
  .chat-composer { padding: 12px 10px 8px; gap: 6px; }
  .chat-message-user .chat-message-body { max-width: 90%; }
  .chat-message-actions { margin-top: 4px; }
  .chat-status-indicator { margin: 0 0 12px; }
  #wo-detail-modal .ot-assistant-container {
    top: var(--chat-viewport-top, 0px);
    bottom: auto;
    height: var(--chat-viewport-height, 100dvh);
    border-radius: 0;
    background: #fff;
  }
  .ot-assistant-container #ot-chat-panel > div:first-child {
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-bottom: 8px;
  }
  .chat-table-modal.chat-table-modal { padding: 0; }
  .chat-table-modal .chat-table-modal-dialog { height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .chat-table-modal .chat-table-modal-header { padding: 12px; gap: 8px; flex-wrap: wrap; }
  .chat-table-modal .chat-table-modal-body { padding: 12px; }
}

@media (max-height: 500px) and (max-width: 767px) {
  .chat-page-header { height: 48px; }
  .chat-page-header p { display: none; }
  .chat-footer-content { padding-top: 4px; }
  .chat-composer { padding-top: 8px; gap: 0; }
  .chat-log-container { padding-top: 12px; }
}

@media (min-width: 768px) and (pointer: coarse) {
  .chat-page.chat-page {
    height: min(100%, var(--chat-viewport-height, 100dvh));
  }
  #wo-detail-modal .ot-assistant-container {
    max-height: calc(var(--chat-viewport-height, 100dvh) - 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .manteia-chat-wrapper *, .chat-page-header * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}