/* Generated by tools/generate/port_app_prototype.py from workbench/html-prototype (shared/conversation.css, shared/chat-bar.css, chat/chat.css, chat/chat-sent.css),
 * scoped to .app-frame. Do not edit; change the prototype and run the port again. */

/* ---- shared/conversation.css ---- */
/* A conversation's lines, as the app draws them in an open chat or room: the rules of
 * atlas-application/desktop/features/rooms/styles/rooms.css with the conversation surface's
 * from features/rooms/styles/conversations.css, and the marks of global-ui/icons/marks/mark/marks.css.
 * Class names are the app's. Each writer keeps one side by first appearance (left, right, left,
 * right: modules/rooms/thread/thread.ts sidesOf); a run by one writer shows its mark and name once.
 * Not carried: Atlas's notice rows, the reply button's tooltip, the development-model label. */
.app-frame .rm-lines { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-5) max(var(--space-5), calc((100% - var(--conversation-width)) / 2)) var(--space-5);
  scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.app-frame .rm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app-frame .rm-line { position: relative; display: flex; align-items: flex-start; gap: 10px; max-width: min(88%, calc(var(--conversation-message-width) + 28px));
  margin-top: var(--conversation-continuation-gap); font-size: var(--text-md); text-align: left; }
.app-frame .rm-line[data-first] { margin-top: var(--conversation-message-gap); }
.app-frame .rm-line:first-child { margin-top: 0; }
.app-frame .rm-line[data-side="right"] { flex-direction: row-reverse; margin-left: auto; }
.app-frame .rm-line-mark { display: grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
.app-frame .rm-line-text { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; }
.app-frame .rm-line-author { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin-bottom: var(--space-1);
  color: var(--text-dim); font-size: var(--text-xs); line-height: var(--line); }
.app-frame .rm-line-name { color: var(--text); font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.app-frame .rm-line-author time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-frame .rm-line-body { color: var(--text-body); font-size: var(--text-md); line-height: var(--conversation-message-line); white-space: pre-wrap; overflow-wrap: anywhere; }
.app-frame .rm-you { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--chip); color: var(--chip-text); font-size: 10px; font-weight: 600; }

/* Under a person's line: the marks of the agents it went to, lit once handed over, ticked once read. */
.app-frame .rm-line-to { display: flex; gap: 6px; margin-top: 4px; }
.app-frame .rm-line[data-side="right"] .rm-line-to { align-self: flex-end; }
.app-frame .rm-reach { position: relative; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; opacity: 0.4; transition: opacity var(--motion); }
.app-frame .rm-reach[data-state="delivered"], .app-frame .rm-reach[data-state="read"] { opacity: 1; }
.app-frame .rm-tick { position: absolute; right: -4px; bottom: -4px; width: 9px; height: 9px; padding: 1px; border-radius: 50%; background: var(--text);
  fill: none; stroke: var(--bg); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app-frame .rm-reach:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* A reply names the line it answers. */
.app-frame .rm-quote { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-1) 0 var(--space-2); padding-left: var(--space-2);
  border-left: 2px solid var(--border); color: var(--text-dim); font-size: var(--text-sm); line-height: var(--line); overflow-wrap: anywhere; }
.app-frame .rm-quote-label { color: var(--text-body); font-weight: 500; }
.app-frame .rm-quote-excerpt { white-space: pre-wrap; }

/* Reply: beside an agent's line while it is pointed at or the button is focused; it takes no room. */
.app-frame .rm-line .rm-reply-to { position: absolute; bottom: -2px; left: 100%; display: grid; place-items: center; width: var(--control-hit-min); height: var(--control-hit-min);
  margin-left: var(--space-1); padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--text-dim); cursor: pointer; opacity: 0;
  transition: opacity var(--motion), background var(--motion), color var(--motion); }
.app-frame .rm-line[data-side="right"] .rm-reply-to { right: 100%; left: auto; margin-right: var(--space-1); margin-left: 0; }
.app-frame .rm-line:hover .rm-reply-to, .app-frame .rm-reply-to:focus-visible { opacity: 1; }
.app-frame .rm-reply-to:hover { background: var(--panel-active); color: var(--text); }
.app-frame .rm-reply-to:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.app-frame .rm-reply-to svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Who is answering now, after the last line. */
.app-frame .rm-turn { display: flex; align-items: center; gap: 10px; margin-top: var(--conversation-message-gap); color: var(--text-dim); font-size: var(--text-sm); }
.app-frame .rm-dots { display: inline-flex; gap: 3px; }
.app-frame .rm-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.app-frame .rm-dots i:nth-child(2) { }
.app-frame .rm-dots i:nth-child(3) { }
@keyframes rm-dot { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* Marks (the agents' symbols) are drawn by shared/marks.css. */

/* Cleaner than the app, at Oliver's word (27 Oct 2026, "we need to make it cleaner"). Each rule here
 * departs from the app on purpose, so it can be kept or dropped on its own:
 * 1. (Withdrawn at Oliver's word: the conversation starts at the top and runs down, as the app's does.)
 * 2. A run by one writer shows the name once; its later lines are only words.
 * 3. The time shows when a line is pointed at or focused (it is always in the line's tooltip).
 * 4. The agents a person's line went to show when the line is pointed at or focused, taking no room.
 * 5. More room between writers: 40px where the app has 24px, 10px within a run where it has 8px, and
 *    40px before who is answering where it has 14px.
 * 6. Each model's name in its own quiet colour (tokens.css --writer-*); the person's stays white.
 * 7. A reply names only who it answers; pressing the name drops down their words (a details element).
 * 8. The name sits beside its logo on both sides: on the right the name row runs from the logo inwards,
 *    and the logo is centred on the name's line.
 * 9. Each writer's words in their own Forlais face (tokens.css --font-*): You Regular, Claude Adir,
 *    Grok Rounded, GPT Frl UI Medium. */
.app-frame .rm-lines { --conversation-message-gap: 40px; --conversation-continuation-gap: 10px; display: flex; flex-direction: column; }
/* In the column a line would shrink to its words; held at its full measure, a run keeps one left edge. */
.app-frame .rm-lines > .rm-line { width: 100%; }
.app-frame .rm-line:not([data-first]) .rm-line-author { display: none; }
.app-frame .rm-line[data-writer="claude"] .rm-line-name { color: var(--writer-claude); }
.app-frame .rm-line[data-writer="grok"] .rm-line-name { color: var(--writer-grok); }
.app-frame .rm-line[data-writer="gpt"] .rm-line-name { color: var(--writer-gpt); }
.app-frame .rm-line[data-side="right"] .rm-line-author { flex-direction: row-reverse; }
.app-frame .rm-line[data-writer="you"] .rm-line-body { font-family: var(--font-you); }
.app-frame .rm-line[data-writer="claude"] .rm-line-body { font-family: var(--font-claude); }
.app-frame .rm-line[data-writer="grok"] .rm-line-body { font-family: var(--font-grok); }
.app-frame .rm-line[data-writer="gpt"] .rm-line-body { font-family: var(--font-gpt); }
.app-frame .rm-line[data-first] .rm-line-mark { margin-top: -1px; }
.app-frame details.rm-quote { display: block; margin: 0 0 var(--space-1); padding: 0; border: 0; }
.app-frame details.rm-quote > summary { display: inline-flex; align-items: center; gap: 5px; min-height: var(--control-hit-min); margin-left: -4px; padding: 0 6px 0 4px;
  border-radius: var(--radius); color: var(--text-dim); font-size: var(--text-sm); font-weight: 500; list-style: none; cursor: pointer;
  transition: background var(--motion), color var(--motion); }
.app-frame details.rm-quote > summary::-webkit-details-marker { display: none; }
.app-frame details.rm-quote > summary:hover { background: var(--control-hover); color: var(--text-body); }
.app-frame details.rm-quote > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.app-frame details.rm-quote > summary svg { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.app-frame details.rm-quote .rm-quote-chevron { transition: transform var(--motion); }
.app-frame details.rm-quote[open] .rm-quote-chevron { transform: rotate(180deg); }
.app-frame details.rm-quote[data-writer="claude"] .rm-quote-who { color: var(--writer-claude); }
.app-frame details.rm-quote[data-writer="grok"] .rm-quote-who { color: var(--writer-grok); }
.app-frame details.rm-quote[data-writer="gpt"] .rm-quote-who { color: var(--writer-gpt); }
.app-frame details.rm-quote .rm-quote-excerpt { display: block; margin: var(--space-1) 0 var(--space-2); padding-left: var(--space-2); border-left: 2px solid var(--border);
  color: var(--text-dim); font-size: var(--text-sm); line-height: var(--line); overflow-wrap: anywhere; }
.app-frame .rm-line-author time { opacity: 0; transition: opacity var(--motion); }
.app-frame .rm-line:hover .rm-line-author time, .app-frame .rm-line:focus-within .rm-line-author time { opacity: 1; }
.app-frame .rm-line-to { position: absolute; top: 100%; left: 0; opacity: 0; transition: opacity var(--motion); }
.app-frame .rm-line[data-side="right"] .rm-line-to { right: 0; left: auto; }
.app-frame .rm-line:hover .rm-line-to, .app-frame .rm-line:focus-within .rm-line-to { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .app-frame .rm-line-author time, .app-frame .rm-line-to, .app-frame details.rm-quote > summary, .app-frame details.rm-quote .rm-quote-chevron { transition: none; }
  .app-frame .rm-dots i { animation: none; opacity: 0.7; }
  .app-frame .rm-reply-to, .app-frame .rm-reach { transition: none; }
}

/* ---- shared/chat-bar.css ---- */
/* The one chat bar, as the app draws it in an open chat or room: the box shape of
 * atlas-application/desktop/global-ui/components/chat-bar/chat-bar/chat-bar.css, with the
 * conversation surface's own touches from features/rooms/styles/conversations.css (the panel
 * ground, a hairline border, the placeholder in the dim grey) and the reply-detail button from
 * chat-bar/response-detail/response-detail.css. Class names are the app's, so the two can be
 * read side by side. Not carried here: the agents' tray the disc opens, the reply line above
 * the bar, the note beneath it, and the light theme. */
.app-frame .cb { --cb-surface: var(--panel); --cb-height: var(--chat-bar-height); --cb-disc-size: var(--chat-bar-icon-target);
  display: flex; flex-direction: column; align-items: center; width: min(var(--conversation-width), 100%); }

.app-frame .cb-bar { --cb-side: calc(var(--cb-disc-size) + 12px); position: relative; width: 100%; min-height: var(--cb-height); padding: 4px var(--cb-side);
  border-radius: calc(var(--cb-height) / 2); background: var(--cb-surface); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-composer);
  transition: box-shadow var(--motion), border-radius var(--motion), min-height var(--motion), padding var(--motion); }
/* No blue ring round the bar: the border stays, and a neutral halo shows it is in use. */
.app-frame .cb-bar:focus-within { box-shadow: inset 0 0 0 1px var(--border), 0 0 0 3px color-mix(in srgb, var(--text) 4%, transparent),
  0 0 0 4px color-mix(in srgb, var(--text) 8%, transparent), var(--shadow-composer); }
.app-frame .cb-bar textarea { display: block; width: 100%; min-height: var(--cb-disc-size); max-height: 240px; padding: 8px 2px; border: 0; background: none; color: var(--text);
  font: 400 var(--text-md)/1.5 var(--font); outline: none; resize: none; overflow-y: auto; scrollbar-width: thin; }
.app-frame .cb-bar textarea::placeholder { color: var(--text-dim); }
.app-frame .cb-bar > .cb-disc { position: absolute; bottom: 4px; left: 4px; transition: transform var(--motion); }
.app-frame .cb-bar > .cb-send { position: absolute; right: 8px; bottom: 6px; }
.app-frame .cb[data-detail] { --cb-detail-width: 150px; }
.app-frame .cb-bar > .cb-response-detail { position: absolute; right: calc(12px + var(--cb-disc-size)); bottom: 12px; max-width: var(--cb-detail-width); }

/* The box: the message on top, the disc and Send beneath; rounded, not soft. */
.app-frame .cb[data-shape="box"] .cb-bar { --cb-box: var(--chat-bar-box-height); min-height: var(--cb-box); padding: 18px 20px calc(var(--cb-disc-size) + 22px); border-radius: 14px; }
.app-frame .cb[data-shape="box"] .cb-bar textarea { min-height: calc(var(--cb-box) - var(--cb-disc-size) - 40px); padding: 2px 0; }
.app-frame .cb[data-shape="box"] .cb-bar > .cb-disc { bottom: 10px; left: 10px; }
.app-frame .cb[data-shape="box"] .cb-bar > .cb-send { right: 12px; bottom: 12px; }

/* The who-disc: the Intelligence glyph, faint while nobody is chosen. */
.app-frame .cb-disc { position: relative; display: grid; flex-shrink: 0; place-items: center; width: var(--cb-disc-size); height: var(--cb-disc-size); padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; overflow: hidden; }
.app-frame .cb-disc[data-empty] .cb-glyph { opacity: 0.7; }
.app-frame .cb-glyph { position: relative; z-index: 1; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Reply detail: Concise, Standard or Detailed for the next reply. */
.app-frame .cb-detail-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--control-hit-min); max-width: 100%;
  padding: var(--space-1); border: 0; border-radius: var(--radius); background: none; color: var(--text-body); font: 400 var(--text-sm)/1.45 var(--font);
  white-space: nowrap; cursor: pointer; }
.app-frame .cb-detail-button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.app-frame .cb-detail-button:hover { background: var(--panel-active); color: var(--text); }

/* Your Teams (Oliver, 27 Oct 2026), where the app has reply detail: the person's reusable teams, the
   chosen one named on the button; the menu opens upwards from the bar's bottom line. */
.app-frame .cb-teams { position: relative; }
.app-frame .cb-teams .cb-detail-button span { overflow: hidden; text-overflow: ellipsis; }
.app-frame .cb-teams-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; min-width: 230px; margin: 0; padding: 4px; list-style: none;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow-floating); }
.app-frame .cb-teams-menu[hidden] { display: none; }
.app-frame .cb-teams-head { padding: 6px 10px 4px; color: var(--text-dim); font-size: var(--text-xs); }
.app-frame .cb-teams-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius);
  background: none; color: var(--text-body); font: 400 var(--text-sm)/1.3 var(--font); text-align: left; cursor: pointer; }
.app-frame .cb-teams-item:hover, .app-frame .cb-teams-item:focus-visible { background: var(--panel-active); color: var(--text); outline: none; }
.app-frame .cb-teams-item small { margin-left: auto; color: var(--text-dim); font-size: var(--text-xs); }
.app-frame .cb-teams-check { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.app-frame .cb-teams-item[aria-checked="true"] .cb-teams-check { visibility: visible; }

/* Send: a diamond, one half dim and one lit; faint until there is something to send. */
.app-frame .cb-send { display: grid; flex-shrink: 0; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none;
  cursor: pointer; opacity: 0.35; transition: opacity var(--motion), transform var(--motion); }
.app-frame .cb-send svg { width: 17px; height: 17px; }
.app-frame .cb-send-l { fill: color-mix(in srgb, var(--text) 50%, transparent); }
.app-frame .cb-send-r { fill: var(--text); }
.app-frame .cb[data-ready] .cb-send:not(:disabled) { opacity: 1; }
.app-frame .cb-send:disabled { cursor: default; }

.app-frame .cb-disc:focus-visible, .app-frame .cb-send:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.app-frame .cb-detail-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* The usage line beneath the bar: really faint, one line, never louder than the conversation (Oliver,
   27 Oct 2026). Its words are the published billing sentence (pricing page, billing terms). */
.app-frame .cb-terms { max-width: 100%; margin: 10px 0 0; padding: 0 12px; overflow: hidden; color: var(--text-dim); opacity: 0.55;
  font-size: var(--text-xs); font-weight: 300; line-height: 16px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.app-frame .cb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .app-frame .cb-disc:hover { transform: scale(1.04); }
  .app-frame .cb[data-ready] .cb-send:not(:disabled):hover { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .app-frame .cb-bar, .app-frame .cb-disc, .app-frame .cb-send { transition: none; }
}

/* ---- chat/chat.css ---- */
/* The chat screen's main area: the chat column, with the shared chat bar (shared/chat-bar.css) at its foot. Measured from the chat-screen
 * mock (tokens.css says how). The mock's preview column and its five tiles were taken out at
 * Oliver's word on 27 Oct 2026 (for now); their column in the window grid is kept empty. */
.app-frame .peek { grid-row: 2; grid-column: 3; align-self: start; width: 8px; height: 53px; margin: 5px 0 0 13px;
  border-radius: 4px 0 0 4px; background: var(--panel-peek); }

.app-frame .chat { grid-row: 2; grid-column: 4; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  padding-bottom: var(--dock-bottom); }
.app-frame .messages { flex: 1; min-height: 0; overflow-y: auto; }

@media (max-width: 1100px) {
  .app-frame[data-mode="fluid"] .peek { display: none; }
}
@media (max-width: 760px) {
  .app-frame[data-mode="fluid"] .chat { grid-row: 3; grid-column: 2; }
}

/* ---- chat/chat-sent.css ---- */
/* The chat once a message is sent (Oliver's second mock, 27 Oct 2026): no preview column or
 * tiles; the title moves to the left; the chat bar (the app's own, shared/chat-bar.css) is centred low in the window; and a rail
 * of five white icons (Browser, Files, Terminal, Integrations, Automations) runs down the
 * right. The mock arrived as a picture in the conversation, not a file, so these values were
 * read off it by eye, not measured to the pixel as the first mock's were. */
.app-frame .window[data-layout="sent"] {
  grid-template-columns: var(--sidebar-inset) var(--sidebar-width) minmax(0, 1fr) var(--rail-mark) var(--rail-end);
}
.app-frame [data-layout="sent"] .title { grid-column: 3; justify-self: start; margin: 18px 0 0 21px; font-size: 17px; font-weight: 500; line-height: 22px; }
.app-frame [data-layout="sent"] .status { grid-column: 3 / 6; margin-right: 29px; }

/* The chat bar, centred between the sidebar and the rail, low in the window with the usage line beneath. */
.app-frame [data-layout="sent"] .chat { grid-column: 3; align-items: center; padding: 0 0 var(--sent-bottom) 18px; }
.app-frame [data-layout="sent"] .messages { align-self: stretch; }

.app-frame .rail { grid-row: 2; grid-column: 4; align-self: center; display: flex; flex-direction: column; gap: var(--rail-gap);
  margin: 0 0 82px; padding: 0; list-style: none; }
.app-frame .mark { display: grid; place-items: center; width: var(--rail-mark); height: var(--rail-mark); padding: 0; border: 0;
  border-radius: 8px; background: none; color: var(--text); cursor: pointer; transition: background var(--motion); }
.app-frame .mark svg { width: var(--rail-icon); height: var(--rail-icon); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.app-frame .mark:hover { background: var(--control-hover); }
.app-frame .mark:active { background: var(--control-pressed); }
.app-frame .mark:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.app-frame {
  --rail-mark: 36px;   /* each mark's target; its centre sits where the mock's 30px chip's does */
  --rail-icon: 26px;   /* the white icon (Oliver: no chips, bigger icons) */
  --rail-gap: 37px;    /* 73px from one mark's centre to the next, as in the mock */
  --rail-end: 29px;    /* the rail's right edge to the window's */
  --sent-bottom: 18px; /* the usage line's foot to the window's (Oliver: the bar moved down) */
}

/* Narrow windows: the marks become a row above the chat bar. */
@media (max-width: 760px) {
  .app-frame[data-mode="fluid"] .window[data-layout="sent"] { grid-template-columns: 16px minmax(0, 1fr) 16px; grid-template-rows: var(--titlebar-height) auto auto minmax(0, 1fr); }
  .app-frame[data-mode="fluid"] [data-layout="sent"] .status { grid-column: 2; margin-right: 0; }
  .app-frame[data-mode="fluid"] .rail { grid-row: 3; grid-column: 2; flex-direction: row; justify-content: center; gap: 16px; margin: 0 0 8px; }
  .app-frame[data-mode="fluid"] [data-layout="sent"] .chat { grid-row: 4; grid-column: 2; padding: 0 0 16px; }
}