/* ============================================================================
   PRODUCT SCENES — kit part: an AI assistant's chat beside GetAccept
   ui_components/atoms/Animations/ProductScenes/Kit/Chat.css

   Loaded after ProductScenes.css (the kit's base, which every scene
   loads) by the scenes that draw it, before their own stylesheet: every Assistant scene, through McpScene.
   A scene requires each part it uses; the base holds the root contract and
   the pieces most scenes share.
   ========================================================================= */

/* ---- GetAccept from an AI assistant (the Mcp* scenes): the
   assistant's chat beside the GetAccept screen it changes. The root is
   .ps-mcp: the GetAccept side (.ps-mcp__app) holds a nested scene
   (kit.nest plays it), the assistant side (.ps-chat) the conversation
   (kit.chat plays it). Side by side when wide, the chat above GetAccept
   when narrow.

   .ps-chat is any MCP client's chat, not one vendor's (Claude, ChatGPT,
   Gemini…): what they share, drawn in our tokens. Your message in a
   bubble on the right, the tool calls as quiet rows naming the
   connector, the permission prompt before an action, the assistant's
   reply as plain text, the composer with its send button. Its look is
   the --ps-chat-* properties on .ps-chat: a client's skin, if a page
   ever wants one, is a class that sets them ---- */

/* Down to the host's bottom edge (into its bleed), as every scene runs off
   it; across, the scene stays inside the host's padding */
.ps-mcp { display: flex; flex-direction: column; margin-bottom: calc(-1 * var(--ps-bleed)); }

/* The grid is a child: the root is the size container, and a container
   query can only restyle what is inside it */
.ps-mcp__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: var(--space-24);
  flex: 1 1 auto;
  min-height: 0;
}

.ps-mcp__app { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding-top: var(--space-8); }
.ps-mcp__app > .ps { flex: 1 1 auto; }

@container ps (max-width: 640px) {
  .ps-mcp__layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(16rem, 0.85fr) minmax(0, 1.15fr); gap: var(--space-16); }
}

/* The outcome (.ps-mcp__overlay): on a chat on its own, once the task is
   done the chat moves up and the GetAccept screen that changed appears
   under it: the app's own screen as its scene draws it (DocumentTimeline's
   log, MeetingLog's card, KnowledgeBase's table), never a card made up for
   the scene. In the chat's column (as wide as the chat), a fixed gap under
   it, a margin above the scene's visible bottom. The markup is the end
   state, in CSS alone: the layout is a stage over the whole root (absolute,
   so its height is the root's whatever sizes the host), its rows the chat
   at the root's full height, then the screen; aligned to the end, the rows
   overflow at the top, so the chat is raised by exactly the screen, the
   gap and the margin, its top running off the scene */
.ps-mcp { position: relative; --ps-overlay-gap: var(--space-20); }
.ps-mcp--solo .ps-mcp__layout:has(> .ps-mcp__overlay) { position: absolute; inset: 0; grid-template-rows: 100% auto; row-gap: var(--ps-overlay-gap); align-content: end; }
.ps-mcp__overlay { position: relative; z-index: 3; grid-area: 2 / 1; display: flex; flex-direction: column; margin-bottom: calc(var(--space-16) + var(--ps-bleed, 0px)); }
/* The app's screens are drawn at the app's sizes (11-13px); beside the
   large chat they read a size up */
.ps-mcp__overlay > * { zoom: 1.12; }
/* The document timeline, all its columns, as DocumentTimeline draws it */
.ps-mcp__overlay .ps-doc-log ol { margin-bottom: 0; }
/* The knowledge base, lifted out of its window (its root class for its
   glyphs and tints, not its window's bleed): its head and table in a
   surface, the window's margins and bleed taken back */
.ps-mcp__overlay > .ps-mcp__table { display: flex; flex-direction: column; gap: var(--space-12); margin: 0; padding-top: var(--space-14); overflow: hidden; }
.ps-mcp__table .ps-knowledge-base__head { padding: 0 var(--space-16); }
.ps-mcp__table .ps-knowledge-base__table { margin: 0; }
.ps-mcp__table .ps-knowledge-base__row { grid-template-columns: minmax(0, 1fr) 80px 110px; padding: var(--space-10) var(--space-16); }

/* Large chat (.ps-mcp--large-chat): the chat read at a larger size, when
   the scene gives it the room; narrow, the kit's sizes stand */
@container ps (min-width: 480px) {
  .ps-mcp--large-chat .ps-chat__bar { height: 46px; font-size: 13.5px; }
  .ps-mcp--large-chat .ps-chat__assistants i { width: 26px; height: 26px; background-size: 14px; }
  .ps-mcp--large-chat .ps-chat__thread { padding: var(--space-20) var(--space-20) var(--space-12); }
  .ps-mcp--large-chat .ps-chat__log { gap: var(--space-14); }
  .ps-mcp--large-chat .ps-chat__you { font-size: 15px; }
  .ps-mcp--large-chat .ps-chat__tool { font-size: 13.5px; }
  .ps-mcp--large-chat .ps-mark { width: 16px; height: 16px; }
  .ps-mcp--large-chat .ps-chat__approve { gap: var(--space-10); padding: var(--space-12) var(--space-14); font-size: 14.5px; }
  .ps-mcp--large-chat .ps-chat__choice > span i { padding: 6px var(--space-10); font-size: 13px; }
  .ps-mcp--large-chat .ps-chat__app { width: 32px; height: 32px; background-size: 18px; }
  .ps-mcp--large-chat .ps-chat__choice > em { font-size: 13.5px; }
  .ps-mcp--large-chat .ps-chat__says { font-size: 15px; }
  .ps-mcp--large-chat .ps-chat__composer { margin: 0 var(--space-14) var(--space-14); font-size: 14px; }
  .ps-mcp--large-chat .ps-chat__composer > span i { width: 28px; height: 28px; }
  .ps-mcp--large-chat .ps-chat__composer > span i::after { inset: 7px; }
}

.ps-chat {
  --ps-chat-canvas: var(--ps-surface);
  --ps-chat-bubble: var(--neutral-50);
  --ps-chat-line: var(--ps-line);
  --ps-chat-ink: var(--text-dark);
  --ps-chat-muted: var(--ps-muted);
  --ps-chat-send: var(--indigo-950);
  --ps-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --ps-icon-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E");

  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--ps-chat-line);
  border-radius: var(--radius-16);
  background: var(--ps-chat-canvas);
  box-shadow: var(--ps-lift);
  color: var(--ps-chat-ink);
}

/* The title bar: the conversation's name, the assistants it works in */
.ps-chat__bar { flex: none; display: flex; align-items: center; gap: var(--space-8); height: 40px; padding: 0 var(--space-12) 0 var(--space-16); border-bottom: 1px solid var(--ps-chat-line); color: var(--ps-chat-muted); font-size: 12px; white-space: nowrap; }
.ps-chat__bar b { overflow: hidden; color: var(--ps-chat-ink); font-weight: var(--fw-medium); text-overflow: ellipsis; }

/* The assistants it works in (.ps-chat__assistants, in the bar): Claude,
   ChatGPT, Gemini and a generic + for any other, small overlapping
   circles with each app's mark. Marks from Lobe Icons (MIT), as the
   page's setup section uses them */
.ps-chat { --ps-mark-claude: url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z%22 fill=%22%23D97757%22 fill-rule=%22nonzero%22%3E%3C/path%3E%3C/svg%3E"); --ps-mark-chatgpt: url("data:image/svg+xml,%3Csvg fill=%22%23000%22 fill-rule=%22evenodd%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z%22%3E%3C/path%3E%3C/svg%3E"); --ps-mark-gemini: url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z%22 fill=%22%233186FF%22%3E%3C/path%3E%3Cpath d=%22M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z%22 fill=%22url(%23lobe-icons-gemini-0-_R_0_)%22%3E%3C/path%3E%3Cpath d=%22M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z%22 fill=%22url(%23lobe-icons-gemini-1-_R_0_)%22%3E%3C/path%3E%3Cpath d=%22M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z%22 fill=%22url(%23lobe-icons-gemini-2-_R_0_)%22%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient gradientUnits=%22userSpaceOnUse%22 id=%22lobe-icons-gemini-0-_R_0_%22 x1=%227%22 x2=%2211%22 y1=%2215.5%22 y2=%2212%22%3E%3Cstop stop-color=%22%2308B962%22%3E%3C/stop%3E%3Cstop offset=%221%22 stop-color=%22%2308B962%22 stop-opacity=%220%22%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient gradientUnits=%22userSpaceOnUse%22 id=%22lobe-icons-gemini-1-_R_0_%22 x1=%228%22 x2=%2211.5%22 y1=%225.5%22 y2=%2211%22%3E%3Cstop stop-color=%22%23F94543%22%3E%3C/stop%3E%3Cstop offset=%221%22 stop-color=%22%23F94543%22 stop-opacity=%220%22%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient gradientUnits=%22userSpaceOnUse%22 id=%22lobe-icons-gemini-2-_R_0_%22 x1=%223.5%22 x2=%2217.5%22 y1=%2213.5%22 y2=%2212%22%3E%3Cstop stop-color=%22%23FABC12%22%3E%3C/stop%3E%3Cstop offset=%22.46%22 stop-color=%22%23FABC12%22 stop-opacity=%220%22%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); }
.ps-chat__assistants { display: flex; margin-left: auto; }
.ps-chat__assistants i { position: relative; flex: none; width: 22px; height: 22px; border: 1px solid var(--ps-chat-line); border-radius: var(--radius-full); background: var(--ps-chat-canvas) var(--ps-assistant-mark, none) center / 12px no-repeat; box-shadow: 0 0 0 2px var(--ps-chat-canvas); }
.ps-chat__assistants i + i { margin-left: -6px; }
.ps-chat__assistants [data-assistant="claude"] { --ps-assistant-mark: var(--ps-mark-claude); }
.ps-chat__assistants [data-assistant="chatgpt"] { --ps-assistant-mark: var(--ps-mark-chatgpt); }
.ps-chat__assistants [data-assistant="gemini"] { --ps-assistant-mark: var(--ps-mark-gemini); }
.ps-chat__assistants [data-assistant="more"]::before { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ps-chat-muted); font-size: 13px; font-weight: var(--fw-semibold); line-height: 1; }

.ps-chat__thread { position: relative; flex: 1 1 auto; min-height: 0; padding: var(--space-16) var(--space-16) var(--space-8); overflow: hidden; }

/* The pinned question: your latest message, kept at the top of the thread
   once it has scrolled out (kit.chat), on a fade into the conversation */
.ps-chat__pin { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; justify-content: flex-end; padding: var(--space-8) var(--space-16) var(--space-16); background: linear-gradient(var(--ps-chat-canvas) 70%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.ps-chat__pin.is-on { opacity: 1; }
.ps-chat__pin p { max-width: 88%; margin: 0; padding: var(--space-6) var(--space-12); overflow: hidden; border-radius: var(--radius-16) var(--radius-16) var(--radius-4) var(--radius-16); background: var(--ps-chat-bubble); font-size: 13px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ps-chat__pin { transition: none; } }

/* A new chat's empty state (kit.chat): a greeting and the connector, in the
   middle of the thread until your first message lands, as an assistant
   shows a fresh conversation */
.ps-chat__empty { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-10); padding: var(--space-16); text-align: center; pointer-events: none; }
.ps-chat__empty p { margin: 0; color: var(--ps-chat-ink); font-size: 17px; font-weight: var(--fw-semibold); line-height: 1.3; }
.ps-chat__empty span { display: inline-flex; align-items: center; gap: var(--space-6); padding: 4px var(--space-10) 4px 6px; border: 1px solid var(--ps-chat-line); border-radius: var(--radius-full); color: var(--ps-chat-muted); font-size: 12px; line-height: 1.3; }
.ps-chat__log { position: relative; display: flex; flex-direction: column; gap: var(--space-12); }
.ps-chat__log > * { flex: none; }

/* Your message: a bubble on the right */
.ps-chat__you { align-self: flex-end; max-width: 88%; margin: 0; padding: var(--space-8) var(--space-12); border-radius: var(--radius-16) var(--radius-16) var(--radius-4) var(--radius-16); background: var(--ps-chat-bubble); font-size: 13px; line-height: 1.45; }

/* A tool call: a quiet line, as assistants show one: the connector's
   logo, the tool, a spinner while it runs and a chevron once it returned
   (data-on). Calls in a row sit together, one step of the answer */
.ps-chat__tool { display: flex; align-items: center; gap: var(--space-8); align-self: flex-start; max-width: 100%; color: var(--ps-chat-muted); font-size: 12.5px; line-height: 1.4; white-space: nowrap; }
.ps-chat__tool + .ps-chat__tool { margin-top: calc(var(--space-6) - var(--space-12)); }
.ps-chat__tool > span { overflow: hidden; text-overflow: ellipsis; }
.ps-chat__tool > span b { font-weight: var(--fw-medium); }
.ps-chat__tool::after { content: ""; flex: none; width: 9px; height: 9px; border: 1.5px solid var(--ps-chat-line); border-top-color: var(--ps-chat-muted); border-radius: var(--radius-full); animation: ps-chat-run 0.8s linear infinite; }
.ps-chat__tool[data-on="1"]::after { width: 10px; height: 10px; border: 0; border-radius: 0; background: var(--ps-chat-muted); opacity: 0.7; -webkit-mask: var(--ps-icon-chevron) center / contain no-repeat; mask: var(--ps-icon-chevron) center / contain no-repeat; animation: none; }

@keyframes ps-chat-run { to { transform: rotate(1turn); } }

/* The permission prompt before an action, as Claude draws it: the
   connector's app icon on a tile, what the assistant wants to use, the
   choice in a row (Deny, Allow once, Always allow; Deny and Allow when
   there is no always). Once allowed (data-on) the buttons give way to the
   answer in the same cell, so the card never changes height */
.ps-chat__approve { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-12) var(--space-10); border: 1px solid var(--ps-chat-line); border-radius: var(--radius-12); background: var(--ps-chat-canvas); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); font-size: 12.5px; line-height: 1.4; text-align: center; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.ps-chat__app { flex: none; width: 28px; height: 28px; border: 1px solid var(--ps-chat-line); border-radius: var(--radius-8); background: var(--ps-chat-canvas) var(--ps-getaccept-mark) center / 16px no-repeat; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.ps-chat__approve p { margin: 0; }
.ps-chat__approve p b { font-weight: var(--fw-semibold); }
.ps-chat__choice { display: grid; grid-template-areas: "c"; align-self: stretch; }
.ps-chat__choice > * { grid-area: c; transition: opacity 0.25s ease; }
.ps-chat__choice > span { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--space-6); }
.ps-chat__choice > span i { padding: 5px var(--space-8); overflow: hidden; border: 1px solid var(--ps-chat-line); border-radius: var(--radius-8); background: var(--ps-chat-canvas); font-size: 12px; font-style: normal; font-weight: var(--fw-medium); text-overflow: ellipsis; white-space: nowrap; }
.ps-chat__choice > span [data-ps-allow] { border-color: transparent; background: var(--ps-chat-bubble); }
.ps-chat__choice > span i:last-child { border-color: var(--ps-chat-send); background: var(--ps-chat-send); color: var(--ps-chat-canvas); }
.ps-chat__choice > em { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6); color: var(--ps-chat-ink); font-size: 12px; font-style: normal; font-weight: var(--fw-semibold); opacity: 0; }
.ps-chat__choice > em::before { content: ""; width: 12px; height: 12px; background: var(--green-600); -webkit-mask: var(--ps-icon-check) center / contain no-repeat; mask: var(--ps-icon-check) center / contain no-repeat; }
.ps-chat__approve[data-on="1"] .ps-chat__choice > span { opacity: 0; }
.ps-chat__approve[data-on="1"] .ps-chat__choice > em { opacity: 1; }
/* While it waits for you: the card lifted, its edge in the send colour */
.ps-chat__approve[data-asking="1"] { border-color: var(--ps-chat-send); box-shadow: var(--shadow-1); }
/* A narrow chat (the chat is its own size container): the prompt without
   its app tile (the line names GetAccept), so it stays short */
.ps-chat { container: ps-chat / inline-size; }
@container ps-chat (max-width: 360px) {
  .ps-chat__app { display: none; }
  .ps-chat__approve { padding: var(--space-10); }
  .ps-chat__choice > span { gap: var(--space-4); }
  .ps-chat__choice > span i { padding-inline: var(--space-4); font-size: 11.5px; }
}

/* The GetAccept side while the assistant waits for your OK: unchanged,
   held back, and saying so ([data-ps-waiting], placed by the scene) */
.ps-mcp__app > .ps { transition: opacity 0.3s ease; }
.ps-mcp__app[data-waiting="1"] > .ps { opacity: 0.45; }
.ps-mcp__waiting { position: absolute; z-index: 2; top: 42%; left: 50%; display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-6) var(--space-12); border: 1px solid var(--ps-line); border-radius: var(--radius-full); background: var(--ps-surface); box-shadow: var(--shadow-1); font-size: 12px; font-weight: var(--fw-semibold); white-space: nowrap; opacity: 0; transform: translateX(-50%); transition: opacity 0.3s ease; }
.ps-mcp__waiting i { width: 12px; height: 12px; border: 1.5px solid var(--ps-line); border-top-color: var(--ps-chat-send, var(--indigo-950)); border-radius: 50%; animation: ps-chat-run 0.9s linear infinite; }
.ps-mcp__app[data-waiting="1"] .ps-mcp__waiting { opacity: 1; }

/* The assistant's reply: plain text, no bubble */
.ps-chat__says { margin: 0; font-size: 13.5px; line-height: 1.55; }
.ps-chat__says b { font-weight: var(--fw-semibold); }

/* The composer: one line, as a fresh chat shows it: "+", the field, the
   send button */
.ps-chat__composer { flex: none; display: flex; align-items: center; gap: var(--space-10); margin: 0 var(--space-12) var(--space-12); padding: var(--space-6) var(--space-6) var(--space-6) var(--space-14); border: 1px solid var(--ps-chat-line); border-radius: var(--radius-full); background: var(--ps-chat-canvas); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); color: var(--ps-chat-muted); font-size: 12.5px; }
.ps-chat__composer::before { content: "+"; flex: none; font-size: 16px; line-height: 1; }
/* The field: the placeholder and each typed message stacked in one cell
   (kit.chat shows one at a time) on one line; a message longer than the
   field slides left as it is typed, its last letter in view, as an input
   scrolls; a typed message in ink */
.ps-chat__composer > div { flex: 1 1 auto; display: grid; min-width: 0; overflow: hidden; line-height: 1.45; white-space: nowrap; }
.ps-chat__composer > div > span { grid-area: 1 / 1; justify-self: start; }
.ps-chat__composer [data-ps-typed] { position: relative; color: var(--ps-chat-ink); }
.ps-chat__composer > span { flex: none; display: flex; }
.ps-chat__composer > span i { position: relative; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--ps-chat-send); }
.ps-chat__composer > span i::after { content: ""; position: absolute; inset: 6px; background: var(--ps-chat-canvas); -webkit-mask: var(--ps-icon-up) center / contain no-repeat; mask: var(--ps-icon-up) center / contain no-repeat; }

/* A chat on its own (.ps-mcp--solo): for answers that are the product,
   no GetAccept screen beside them; the chat centred at a reading width */
.ps-mcp--solo .ps-mcp__layout { grid-template-columns: minmax(0, 960px); grid-template-rows: minmax(0, 1fr); justify-content: center; }

/* Room-first (.ps-mcp--room-first): the GetAccept screen is the stage,
   the chat a compact window over its left edge, driving it. Both share
   one cell; the screen starts a fifth of the way in so the chat covers
   its sidebar, not its page. Narrow: the chat over the screen's lower part */
.ps-mcp--room-first > .ps-mcp__layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.ps-mcp--room-first > .ps-mcp__layout > * { grid-area: 1 / 1; }
.ps-mcp--room-first .ps-mcp__app { margin-left: 21%; padding-top: 0; }
.ps-mcp--room-first .ps-chat { z-index: 4; align-self: end; justify-self: start; width: min(26rem, max(18rem, 36%)); height: 88%; box-shadow: var(--shadow-4); }

/* The room's own corners on the right too (it no longer runs off the
   right edge); its toasts clear the run-off the root hides */
.ps-mcp--room-first .ps-deal-room-from-template__room { border-radius: var(--radius-16); border-right: var(--ps-edge); }
.ps-mcp--room-first.ps-mcp--run-off :is([data-ps-generating], [data-ps-toast]) { top: auto; bottom: calc(var(--ps-bleed) + var(--space-24) + var(--space-32)); }


/* Phone (a narrow root): the chat alone. GetAccept's screens (beside,
   behind or below the chat) drop out and give their room back, so a scene
   is one readable chat window; the chat still plays every step */
@container ps (max-width: 560px) {
  .ps-mcp .ps-mcp__app, .ps-mcp .ps-mcp__overlay { display: none; }
  .ps-mcp > .ps-mcp__layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .ps-mcp--solo .ps-mcp__layout:has(> .ps-mcp__overlay) { position: static; grid-template-rows: minmax(0, 1fr); align-content: normal; }
  .ps-mcp--room-first .ps-chat { align-self: stretch; justify-self: stretch; width: auto; height: auto; box-shadow: var(--ps-lift); }
}

/* A chat that runs off the scene's bottom edge (.ps-mcp--run-off): its
   bottom corners fall past the edge, the space it loses comes back under
   the composer, so the composer keeps its gap. The root clips the bottom
   only (its sides keep the shadow): a host frame's backdrop may travel
   with the scene and end before the frame's own clip */
.ps-mcp--run-off { clip-path: inset(-3rem -3rem 0 -3rem); }
.ps-mcp--run-off > .ps-mcp__layout { margin-bottom: calc(-1 * var(--space-24)); }
.ps-mcp--run-off .ps-chat { padding-bottom: var(--space-24); }

/* The MCP scenes' least heights (the contract: under .ps, above). Wide, a
   chat-led scene sits beside its screen; narrow, it stacks over it; on
   phone it is the chat alone. Room-first holds a whole room */
.ps-mcp { --ps-least: 29rem; --ps-least-narrow: 33rem; --ps-least-phone: 26rem; }
.ps-mcp--room-first { --ps-least: 35rem; --ps-least-narrow: 36rem; }
}

/* The kit's cursor in a chat (kit.chat brings it to Send and Allow) */
.ps-chat__cursor { top: 0; left: 0; z-index: 6; }

/* Rich answers, as assistants render them: paragraphs, a table, a list */
.ps-chat__says > p { margin: 0 0 var(--space-6); }
.ps-chat__says > p:last-child { margin-bottom: 0; }
.ps-chat__says table { width: 100%; margin: var(--space-6) 0 var(--space-8); border-collapse: collapse; font-size: 12.5px; line-height: 1.4; }
.ps-chat__says th { padding: 0 var(--space-12) var(--space-6) 0; border-bottom: 1px solid var(--ps-chat-line); color: var(--ps-chat-muted); font-weight: var(--fw-semibold); text-align: left; white-space: nowrap; }
.ps-chat__says td { padding: var(--space-8) var(--space-12) var(--space-8) 0; border-bottom: 1px solid var(--ps-line-soft); vertical-align: top; }
.ps-chat__says td:first-child { font-weight: var(--fw-semibold); white-space: nowrap; }
.ps-chat__says td small { display: block; color: var(--ps-chat-muted); font-size: 11px; font-weight: var(--fw-regular); }
.ps-chat__says ul { margin: var(--space-4) 0 var(--space-6); padding-left: var(--space-16); list-style: disc; }
.ps-chat__says li { margin-bottom: var(--space-4); }

/* The connector's logo (.ps-mark): GetAccept's own mark
   (assets/SVGS/GetAccept_Icon.svg), as an assistant shows a connector */
.ps-chat { --ps-getaccept-mark: url("data:image/svg+xml,%3Csvg viewBox=%220 0 34 34%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M30.1308 7.13947L32.6561 3.53546C32.9298 3.14698 33.0601 2.69975 33.0601 2.25904C33.0601 1.55717 32.731 0.868359 32.1152 0.434179C31.1116 -0.270954 29.7235 -0.0293805 29.0197 0.979352L27.0548 3.78683C24.1939 1.42006 20.5314 0 16.5333 0C7.40317 0 0 7.41696 0 16.5641C0 25.7112 7.40317 33.1282 16.5333 33.1282C25.6635 33.1282 33.0666 25.7112 33.0666 16.5641C33.0666 13.0613 31.9816 9.81637 30.1308 7.13947Z%22 fill=%22%23FF7900%22/%3E %3Cpath d=%22M10.5506 13.502C9.68389 12.6304 8.27625 12.6304 7.4095 13.4987C6.97287 13.9329 6.75781 14.5042 6.75781 15.0755C6.75781 15.6435 6.97287 16.2115 7.40624 16.6457L14.9691 24.2422C15.3862 24.6633 15.9531 24.8951 16.5429 24.8951C16.6081 24.8951 16.67 24.8951 16.7352 24.8853C17.3901 24.8298 17.9864 24.4838 18.3611 23.9451L30.1306 7.13947C29.2606 5.88264 28.2244 4.75312 27.0514 3.78356L16.2431 19.2214L10.5506 13.502Z%22 fill=%22white%22/%3E %3C/svg%3E"); }
.ps-mark { flex: none; display: inline-block; width: 14px; height: 14px; background: var(--ps-getaccept-mark) center / contain no-repeat; }
/* A tool from another connector (data-app): a neutral tile, its glyph */
.ps-mark[data-app] { position: relative; border-radius: 4px; background: var(--neutral-100); }
.ps-mark[data-app="calendar"]::after { content: ""; position: absolute; inset: 2.5px; background: var(--neutral-600); -webkit-mask: var(--ps-icon-calendar) center / contain no-repeat; mask: var(--ps-icon-calendar) center / contain no-repeat; }
.ps-chat__tool > span em { color: var(--ps-chat-muted); font-style: normal; }
/* Calls to the same connector in a row: its logo on the first, a thread
   through the rest, so the logo names the connector once and never reads
   as a list of ticks */
.ps-chat__tool:has(> .ps-mark:not([data-app])) + .ps-chat__tool > .ps-mark:not([data-app]) { position: relative; background: none; }
.ps-chat__tool:has(> .ps-mark:not([data-app])) + .ps-chat__tool > .ps-mark:not([data-app])::before { content: ""; position: absolute; top: calc(-1 * var(--space-8)); bottom: 2px; left: 50%; width: 1px; background: var(--ps-chat-line); }