/* The Assistant (design-system.md section 4). The first part is the CSS of 4.1 and 4.2, rule for rule
   in the design's order, with the rules the design marks for the phone in the phone query after it.
   One selector differs: ".icon-circle.is-done" is written ".changes .icon-circle.is-done", because a
   rule that starts with .icon-circle would define a class of style.css (design document 7.2). One rule
   is left out: .asst-start, the starter rows, which the owner replaced on 3 October 2026 with a greeting
   and three examples (design document 3.8, row 28; their rules are A3's own, below). */
.asst { width: 480px; box-sizing: border-box; display: flex; flex-direction: column; background: #f4f6f9; border: 1px solid #dce2e9; } /* Dashboard-Assistant:20 */
.asst-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 24px; background: #ffffff; border-bottom: 1px solid #dce2e9; } /* Dashboard-Assistant:21 */
.asst-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; color: #102c4a; } /* Dashboard-Assistant:22 */
.asst-head-tools { display: flex; align-items: center; gap: 4px; } /* Dashboard-Assistant:23 */
.asst-thread { flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; } /* Dashboard-Assistant:28 */
.asst-composer { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; background: #ffffff; border-top: 1px solid #dce2e9; } /* Dashboard-Assistant:33 */
.asst-photo { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #c7d0dc; border-radius: 8px; background: #ffffff; color: #102c4a; cursor: pointer; } /* Dashboard-Assistant:34 */
.asst-input { flex: 1 1 0; min-width: 0; height: 44px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #c7d0dc; border-radius: 8px; background: #ffffff; color: #132a43; font-size: 15px; line-height: 1.45; resize: none; } /* Dashboard-Assistant:35 */
.asst-send { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #102c4a; color: #ffffff; text-decoration: none; } /* Dashboard-Assistant:36 */
.asst-stop { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #102c4a; border-radius: 8px; background: #ffffff; color: #102c4a; cursor: pointer; } /* Dashboard-Assistant-Working:54 */
.msg-member { align-self: flex-end; max-width: 86%; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } /* Dashboard-Assistant-Working:29 */
.msg-bubble { padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: #102c4a; color: #ffffff; font-size: 15px; line-height: 1.45; text-wrap: pretty; } /* Dashboard-Assistant-New:30 */
.msg-when { font-size: 12px; color: #566579; } /* Dashboard-Assistant-Working:31 */
.msg-photo { width: 96px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid #c7d0dc; border-radius: 10px; background: #e8eff6; color: #102c4a; font-size: 11px; font-weight: 500; } /* Dashboard-Assistant-Working:30 */
.asst-steps { display: flex; flex-direction: column; gap: 6px; } /* Dashboard-Assistant-Working:33 */
.asst-step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #566579; } /* Dashboard-Assistant-Working:34 */
.asst-step-done { flex: none; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #e4f1ec; color: #17654f; } /* Dashboard-Assistant-Working:34 */
.asst-step-ring { flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid #c7d0dc; border-top-color: #102c4a; border-radius: 50%; } /* Dashboard-Assistant-Working:35 */
.asst-step.is-running > span:last-child { color: #102c4a; font-weight: 500; } /* Dashboard-Assistant-Working:35 */
.asst-text { margin: 0; max-width: 92%; font-size: 15px; line-height: 1.5; color: #132a43; text-wrap: pretty; } /* Dashboard-Assistant-Card:55 */
.details-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #dce2e9; border-radius: 12px; overflow: hidden; } /* Dashboard-Assistant-Working:37 */
.details-head { padding: 10px 16px; background: #f7f9fc; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; color: #566579; } /* Dashboard-Assistant-Working:38 */
.details-grid { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px 12px; align-items: baseline; padding: 12px 16px; } /* Dashboard-Assistant-Working:39 */
.details-grid > span:nth-child(odd) { font-size: 13px; color: #566579; } /* Dashboard-Assistant-Working:40 */
.details-grid > span:nth-child(even) { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } /* Dashboard-Assistant-Working:40 */
.match-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #ffffff; border: 1px solid #dce2e9; border-radius: 10px; color: #132a43; text-decoration: none; } /* Dashboard-Assistant-Card:50 */
.match-row .tag { white-space: nowrap; } /* Dashboard-Assistant-Card:53 */
.changes { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #102c4a; border-radius: 12px; overflow: hidden; } /* Dashboard-Assistant-Card:60 */
.changes-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; } /* Dashboard-Assistant-Card:61 */
.changes-title { margin: 0; font-size: 15px; font-weight: 600; color: #102c4a; } /* Dashboard-Assistant-Card:62 */
.change-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-top: 1px solid #dce2e9; } /* Dashboard-Assistant-Card:65 */
.change-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* Dashboard-Assistant-Card:67 */
.change-text > span:first-child { font-weight: 600; color: #102c4a; } /* Dashboard-Assistant-Card:67 */
.change-text > span:last-child { font-size: 13px; color: #566579; text-wrap: pretty; } /* Dashboard-Assistant-Card:67 */
.change-remove { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #566579; cursor: pointer; } /* Dashboard-Assistant-Card:68 */
.changes-consent { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 4px 16px; border-top: 1px solid #dce2e9; font-size: 14px; color: #132a43; } /* Dashboard-Assistant-New:67 */
.changes-consent input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: #102c4a; } /* Dashboard-Assistant-New:67 */
.changes-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 16px; border-top: 1px solid #dce2e9; background: #f7f9fc; } /* Dashboard-Assistant-Card:75 */
.changes.is-saved { border: 1px solid #dce2e9; } /* Dashboard-Assistant-Saved:60 */
a.change-row { color: #132a43; text-decoration: none; } /* Dashboard-Assistant-Saved:64 */
.changes .icon-circle.is-done { background: #e4f1ec; color: #17654f; } /* Dashboard-Assistant-Saved:65 */
@media (max-width: 871.98px) {
  .asst-head { padding: 10px 8px 10px 16px; } /* Member-Assistant:21 */
  .asst-thread { padding: 16px; } /* Member-Assistant:28 */
  .asst-input { font-size: 16px; } /* Member-Assistant:35 */
}

/* A3's own rules. Every class here begins with "assistant-" (design document 7.2). A rule that styles
   Deep Chat's inside starts with :host: it reaches the component through its auxiliaryStyle, where
   this file is handed over after style.css, and matches nothing in the page itself (8.9). */
.assistant-frame { height: 100%; } /* the drawer fills the Assistant root from top to bottom */
.assistant-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.assistant-host { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; }
.assistant-chat { flex: 1 1 auto; min-width: 0; min-height: 0; display: block; }
.assistant-empty { position: absolute; top: 0; left: 0; right: 0; z-index: 1; max-height: calc(100% - 145px); box-sizing: border-box; overflow-y: auto; } /* the greeting and the examples, laid over the empty message list, outside Deep Chat; never over the composer at its tallest (12px, a 120px field, 12px and a 1px rule): on a short screen they scroll */
.assistant-empty[hidden] { display: none; } /* .asst-thread sets display, which would win over the hidden attribute */
.assistant-examples { display: flex; flex-direction: column; gap: 8px; }
.assistant-examples-label { margin: 0; font-size: 13px; color: #566579; }
.assistant-example { width: 100%; min-height: 44px; box-sizing: border-box; padding: 10px 16px; border: 1px solid #dce2e9; border-radius: 10px; background: #ffffff; color: #132a43; font-size: 14px; line-height: 1.45; text-align: left; overflow-wrap: anywhere; cursor: pointer; } /* a white bordered row like the drawn starter rows (Dashboard-Assistant:29); its whole text wraps */
.assistant-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.assistant-card-off { opacity: 0.6; } /* a Changes card that was discarded, or that a later message superseded */
.assistant-card-error { margin: 0; padding: 8px 16px; border-top: 1px solid #dce2e9; font-size: 13px; color: #bd293d; }
.assistant-demo { margin: 0; font-size: 13px; color: #566579; } /* the demo's line under the greeting (ASSISTANT_DEMO=true): the examples' label */
.assistant-card-note { margin: 0; padding: 8px 16px; border-top: 1px solid #dce2e9; font-size: 13px; color: #566579; } /* the demo's line under the rows of a Saved card, placed as .assistant-card-error */
.assistant-retry { align-self: flex-start; margin-top: 8px; }
.assistant-choices { margin-top: 12px; } /* the thread's 12px gap between the question and its choices (Dashboard-Assistant-Card:55-56) */
a.change-row > svg { flex: none; align-self: center; color: #566579; } /* Dashboard-Assistant-Saved:67 */
:host #messages { box-sizing: border-box; padding: 20px 24px; }
:host #text-input { font-size: 15px; line-height: 1.45; } /* as .asst-input */
:host .outer-message-container { margin: 0 0 12px; }
:host .inner-message-container { width: 100%; max-width: 100%; margin-inline: 0; } /* Deep Chat sets calc(97.5% - 24px), centred; cards reach both edges of the thread (Dashboard-Assistant-Card:50) */
:host .outer-button-container { height: 44px; } /* three 44px parts, aligned at their foot (Dashboard-Assistant:33) */
:host .outer-button-container > .input-button { margin-bottom: 0; } /* Deep Chat's 0.2em would lift the buttons above the field */
:host .outer-message-container > .msg-when { display: block; text-align: right; margin-top: 6px; }
:host .msg-photo { overflow: hidden; }
:host .assistant-step-message ul, :host .assistant-step-2-message ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
:host .assistant-step-message li, :host .assistant-step-2-message li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #566579; }
:host .assistant-step-message li::before, :host .assistant-step-2-message li::before { content: "\2713"; flex: none; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #e4f1ec; color: #17654f; font-size: 11px; font-weight: 700; }
:host .assistant-step-message li:has(em)::before, :host .assistant-step-2-message li:has(em)::before { content: ""; box-sizing: border-box; background: none; border: 2px solid #c7d0dc; border-top-color: #102c4a; animation: assistant-turn 0.8s linear infinite; }
:host .assistant-step-message em, :host .assistant-step-2-message em { font-style: normal; font-weight: 500; color: #102c4a; }
:host .outer-message-container:not(:has(li)):has(.assistant-step-message, .assistant-step-2-message) { display: none; } /* a step bubble with no line left; :has() inside :has() would drop the rule */
:host([data-streaming]) .outer-message-container:last-child .assistant-text-message > :last-child::after,
:host([data-streaming]) .outer-message-container:last-child .assistant-text-2-message > :last-child::after { content: ""; display: inline-block; width: 8px; height: 16px; margin-left: 2px; vertical-align: -2px; background: #102c4a; } /* text still arriving (4.2) */
@keyframes assistant-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  :host .assistant-step-message li:has(em)::before, :host .assistant-step-2-message li:has(em)::before { animation: none; }
}
@media (max-width: 871.98px) {
  .assistant-frame { width: auto; border: 0; } /* the phone's full screen (7.4) */
  :host #messages { padding: 16px; }
  .changes-foot .btn-secondary { height: 40px; } /* Member-Assistant-Card:76; style.css makes it 44 on the phone */
  .changes-foot .btn-primary { height: 44px; font-size: 15px; } /* Member-Assistant-Card:77; style.css makes it 48 and 16px on the phone */
  :host #text-input { font-size: 16px; }
}