/* RELAY v11 · AI chat tab, plus the chrome-less embed mode (/v11?embed=…) that the
   chat uses to show a live twin inline. */

/* ---- embed mode: one twin, no page chrome ---- */
html[data-embed] :is(.topbar, .simulation-controls, .bottomline, .toast, .drawer, .backdrop) { display: none !important; }
html[data-embed] .twin-workspace { grid-template-rows: minmax(0, 1fr); }
html[data-embed="ground"][data-world="relay"] .world:first-child,
html[data-embed="ground"][data-world="fcfs"] .world:last-child,
html[data-embed="customer"] :is(.portfolio, .journey, .customer-top, .v10-globe-legend) { display: none; }
html[data-embed="tower"] .tower-heading h1 { font-size: 18px; }
html[data-embed="ground"][data-world] .worlds { display: block; }
html[data-embed="ground"][data-world] .world { width: 100%; height: 100%; }

/* ---- chat screen ---- */
.screen.chat.active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #fff;
  color: #183b40;
  font-size: 14px;
  line-height: 1.6;
}
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 20px;
  border-bottom: 1px solid #e8eff0;
  font-size: 12px;
  color: #637c83;
}
.chat-model.warn { color: #a06509; }
.chat-new {
  border: 1px solid #dce8e9;
  background: #fff;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #24565b;
}
.chat-new:hover { background: #f2f7f7; }
.chat-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable both-edges; }
.chat-thread {
  width: min(100% - 40px, 780px);
  margin: 0 auto;
  padding: 28px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.chat-empty { margin-top: 9vh; }
.chat-empty h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.2px; }
.chat-empty p { margin: 0 0 20px; color: #637c83; max-width: 56ch; }
.chat-suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chat-suggestions button {
  text-align: left;
  border: 1px solid #dce8e9;
  background: #fff;
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 13px;
  color: #24565b;
}
.chat-suggestions button:hover { background: #f5f9f9; border-color: #c5d9da; }

/* ---- messages ---- */
.msg.user {
  align-self: flex-end;
  max-width: 82%;
  padding: 9px 14px;
  border-radius: 14px;
  background: #eef4f4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg.assistant { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.msg.assistant.working::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #087f74;
  animation: chat-pulse 1.1s ease-in-out infinite;
}
@keyframes chat-pulse { 50% { opacity: .25; } }

.part.text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md pre, .md blockquote, .md .md-table { margin: 0 0 10px; }
.md h3, .md h4, .md h5 { margin: 16px 0 6px; font-weight: 700; line-height: 1.3; }
.md h3 { font-size: 17px; }
.md h4 { font-size: 15px; }
.md h5 { font-size: 14px; }
.md ul, .md ol { padding-left: 22px; }
.md li { margin: 2px 0; }
.md a { color: #087f74; }
.md hr { border: 0; border-top: 1px solid #e3ecec; margin: 14px 0; }
.md blockquote { padding-left: 12px; border-left: 3px solid #dce8e9; color: #4f6f74; }
.md code, .tool-name {
  font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.md code { background: #f1f5f5; border-radius: 4px; padding: 1px 5px; }
.md pre, .tool-detail pre, .artifact-code {
  margin: 0;
  padding: 11px 13px;
  background: #f6f9f9;
  border: 1px solid #e3ecec;
  border-radius: 8px;
  overflow: auto;
  font: 12px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre;
}
.md pre code { background: none; padding: 0; font-size: 12px; }
.md-table { overflow-x: auto; }
.md table { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.md th, .md td { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid #e3ecec; }
.md th { font-size: 12px; font-weight: 600; color: #637c83; }

/* ---- reasoning ---- */
.thought { color: #637c83; font-size: 13px; }
.thought summary, .tool summary { cursor: pointer; list-style: none; user-select: none; }
.thought summary::-webkit-details-marker, .tool summary::-webkit-details-marker { display: none; }
.thought summary { display: inline-flex; align-items: center; gap: 6px; }
.thought summary::after { content: "›"; transition: transform .15s; }
.thought[open] summary::after { transform: rotate(90deg); }
.thought.streaming summary { animation: chat-pulse 1.4s ease-in-out infinite; }
.thought-body {
  margin-top: 6px;
  padding-left: 12px;
  border-left: 2px solid #e3ecec;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- tool calls ---- */
.tool { border: 1px solid #e3ecec; border-radius: 8px; font-size: 13px; }
.tool summary { display: flex; align-items: center; gap: 8px; padding: 7px 11px; min-width: 0; }
.tool summary:hover { background: #f8fbfb; }
.tool-state { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #c3d1d3; }
.tool[data-state="running"] .tool-state { background: #087f74; animation: chat-pulse 1.1s ease-in-out infinite; }
.tool[data-state="done"] .tool-state { background: #14ae8c; }
.tool[data-state="error"] .tool-state { background: #c8553a; }
.tool-name { flex: none; color: #183b40; }
.tool-args { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7b9095; font-size: 12px; }
.tool-note { flex: none; color: #7b9095; font-size: 12px; }
.tool[data-state="error"] .tool-note { color: #b4482f; }
.tool-detail { display: grid; gap: 6px; padding: 4px 11px 11px; }
.tool-detail > span { font-size: 11px; font-weight: 600; color: #7b9095; }
.tool-detail pre { max-height: 260px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- artifacts and twin embeds ---- */
.embed { margin: 0; border: 1px solid #dce8e9; border-radius: 10px; overflow: hidden; background: #fff; }
.embed figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 12px;
  border-bottom: 1px solid #e8eff0;
  background: #f8fbfb;
  font-size: 12px;
}
.embed-title { font-weight: 700; color: #183b40; }
.embed-meta { flex: 1; color: #7b9095; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embed figcaption button {
  flex: none;
  border: 1px solid #dce8e9;
  background: #fff;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  color: #24565b;
}
.embed figcaption button:hover { background: #f2f7f7; }
.embed iframe { display: block; width: 100%; border: 0; }
.embed-body.twin-ground { height: 340px; }
.embed-body.twin-customer { height: 380px; }
.embed-body.twin-tower { height: 520px; }
.embed-body[class*="twin-"] { background: #eaf1f1; }
.embed-body[class*="twin-"] iframe { height: 100%; }
.embed-resume {
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  color: #4f6f74;
  font-size: 13px;
}
.embed-resume:hover { color: #087f74; }
.artifact-frame { height: 120px; }
.artifact-pending { height: 72px; background: linear-gradient(90deg, #f6f9f9, #eef4f4, #f6f9f9) 0 0 / 200% 100%; animation: chat-shimmer 1.4s linear infinite; }
@keyframes chat-shimmer { to { background-position: -200% 0; } }
.artifact-code { border: 0; border-radius: 0; max-height: 420px; }

.chat-error {
  padding: 9px 12px;
  border: 1px solid #f0d5cb;
  border-radius: 8px;
  background: #fdf6f3;
  color: #9a3d27;
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* ---- composer ---- */
.chat-composer {
  width: min(100% - 40px, 780px);
  margin: 0 auto 16px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border: 1px solid #cfdfe0;
  border-radius: 14px;
  background: #fff;
}
.chat-composer:focus-within { border-color: #087f74; box-shadow: 0 0 0 3px #087f741a; }
.chat-composer textarea {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: none;
  padding: 6px 0;
  font: inherit;
  color: inherit;
  max-height: 168px;
}
.chat-send {
  flex: none;
  border: 0;
  border-radius: 9px;
  padding: 8px 14px;
  background: #087f74;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.chat-send:hover { background: #06695f; }
.chat-send.stop { background: #fff; color: #24565b; box-shadow: inset 0 0 0 1px #cfdfe0; }

@media (prefers-reduced-motion: reduce) {
  .msg.assistant.working::after, .thought.streaming summary, .tool-state, .artifact-pending { animation: none; }
}
@media (max-width: 760px) {
  .chat-suggestions { grid-template-columns: 1fr; }
  .chat-thread, .chat-composer { width: calc(100% - 24px); }
  .msg.user { max-width: 92%; }
}