/* The conversation: the empty state, question bubbles and the answers under them, citations, the sources under an
 * answer and the actions below it. The search steps that appear while an answer runs are in inspector.css. Panels
 * are white with a hairline on a near-white page, and nothing casts a shadow. */

/* ---------- empty state ---------- */
.hello {
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  min-height:56vh; padding:8px 2px 40px; animation:ig-fadeup .45s ease both;
}
.hello h2 {
  margin:0; width:100%; font:var(--md-display-small); letter-spacing:var(--md-display-small-track);
  color:var(--md-on-surface); text-wrap:balance;
}
/* The second line carries a slow gradient through the primary palette. -webkit-text-fill-color is what actually
 * reveals it; the plain colour beside it is what shows if background-clip:text is unsupported. */
.hello h2 .accent {
  color:var(--md-primary);
  background:linear-gradient(100deg, var(--md-primary-30), var(--md-primary-40), var(--md-primary-50),
                             var(--md-primary-40), var(--md-primary-30));
  background-size:320% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:ig-hue 8s ease-in-out infinite;
}
.hello p {
  margin:12px auto 0; max-width:460px; font:var(--md-body-large); color:var(--md-on-surface-variant); text-wrap:pretty;
}
/* the starter questions: M3 filled cards, a state layer instead of a lift */
.cards { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; width:100%; margin-top:32px; }
.cards button {
  display:flex; align-items:center; gap:16px; padding:16px; cursor:pointer; text-align:start;
  border:1px solid var(--ua-line); border-radius:var(--md-shape-lg); background:var(--md-surface-container-low);
  color:var(--md-on-surface);
  animation:ig-fadeup .4s ease both;
}
.cards button:hover { background-image:var(--md-hover-layer); }
.cards button:active { background-image:var(--md-press-layer); }
.cards .tile {
  flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:var(--md-secondary-container); color:var(--md-on-secondary-container); font-size:20px;
}
.cards .txt { flex:1 1 0%; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cards .q { font:var(--md-title-small); color:var(--md-on-surface); text-wrap:pretty; }
.cards .meta { margin:0; font:var(--md-body-small); color:var(--md-on-surface-variant); }
.cards .go-in { flex:0 0 auto; font-size:18px; color:var(--md-on-surface-variant); }
/* M3's tonal button */
.talk {
  margin-top:24px; display:inline-flex; align-items:center; gap:8px; height:40px; padding-inline:16px 24px;
  cursor:pointer; border:0; border-radius:var(--md-shape-full);
  background:var(--md-secondary-container); color:var(--md-on-secondary-container);
  font:var(--md-label-large); letter-spacing:var(--md-label-large-track);
}
.talk .ic { font-size:18px; }
.talk:hover { background-image:var(--md-hover-layer); }
.talk:active { background-image:var(--md-press-layer); }

/* ---------- turns ---------- */
.turn { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:8px 0; }
.turn.you { align-items:flex-end; }
/* An answer has the agent's face at its start (avatar.js), in the column's own gutter: the answer, its sources and
 * actions stay one column beside it. On a phone the face sits above the answer instead, so no width is lost. */
.turn.agent { position:relative; padding-inline-start:44px; }
.agent-avatar {
  display:block; flex:0 0 auto; border-radius:50%; object-fit:cover; background:var(--md-surface-container-high);
  box-shadow:0 0 0 1px var(--ua-line);
}
.agent-avatar.in-thread { position:absolute; inset-inline-start:0; top:10px; width:32px; height:32px; }
.bubble, .answer-box {
  max-width:74%; color:var(--md-on-surface);
  font:var(--md-body-large); white-space:pre-wrap; overflow-wrap:anywhere; text-wrap:pretty;
  animation:ig-fadeup .32s ease both;
}
/* The question is a bubble, in the pale green of the chat it belongs to; an answer is text on the page, as ChatGPT
 * and Gemini show one. The bubble's small corner is its tail, and the logical corner names turn it round in Arabic
 * by themselves. */
.turn.you .bubble {
  padding:12px 16px; border-radius:var(--md-shape-lg-inc); border-end-end-radius:var(--md-shape-xs);
  background:var(--ua-tint); border:1px solid var(--ua-tint-line);
}
.answer-box { max-width:100%; padding-block:4px; }
/* a streamed word fading in (REVEAL_FADE_MS in reveal.js); words still to come are in the text already, so a caret
   after them would sit ahead of what shows: a typed answer, like Gemini's, has none */
.answer .fresh { animation:ig-veil .25s ease both; }
.answer.streaming.revealing::after { content:none; }
.answer.streaming::after {
  content:""; display:inline-block; width:8px; height:16px; margin-inline-start:3px;
  background:var(--md-primary); vertical-align:-.2em; border-radius:1px; animation:blink 1.05s steps(2) infinite;
}
/* a question that was asked out loud */
.via-voice {
  display:inline-flex; align-items:center; gap:4px; height:24px; padding-inline:8px 10px; margin-bottom:6px;
  border-radius:var(--md-shape-full); background:var(--md-surface-container-lowest); color:var(--md-primary);
  font:var(--md-label-medium); letter-spacing:var(--md-label-medium-track); white-space:nowrap;
}

/* an answer that found nothing is the app working as it should, so it reads quieter rather than as an error;
 * a note the server attached to an answer does get the error colours */
.turn.nomatch .answer { color:var(--md-on-surface-variant); }
/* a service's reply keeps its line breaks: its review is one line per detail (thread.js) */
.answer.service-text { white-space:pre-line; }
/* the review of an application, drawn from its summary rows in place of its lines (thread.js reviewCard) */
.review {
  max-width:560px; margin-block:10px; padding:14px 16px; white-space:normal;
  border:1px solid var(--ua-tint-line); border-radius:var(--md-shape-lg); background:var(--md-surface-container-lowest);
}
.review-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--ua-line); }
.review-head > .ic { flex:0 0 auto; font-size:20px; color:var(--md-on-surface-variant); }
.review-title { flex:1 1 auto; font:var(--md-title-small); }
.review-status {
  display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:var(--md-shape-full);
  background:var(--ua-tint); color:var(--md-on-surface-variant); font:var(--md-body-small);
}
.review-status.recorded { background:#e3f1e5; color:#1e5b2a; }
.review-status .ic { font-size:12px; }
.review-rows {
  display:grid; grid-template-columns:minmax(110px, max-content) minmax(0, 1fr); gap:6px 16px; margin:10px 0 0;
  font:var(--md-body-medium);
}
.review-rows dt { color:var(--md-on-surface-variant); }
.review-rows dd { margin:0; overflow-wrap:anywhere; }
.review-block { margin-top:10px; padding-top:10px; border-top:1px solid var(--ua-line); }
.review-label { margin-bottom:4px; font:var(--md-body-small); color:var(--md-on-surface-variant); }
.review-block p { margin:0; font:var(--md-body-medium); white-space:pre-line; }
@media (max-width:480px) { .review-rows { grid-template-columns:minmax(0, 1fr); gap:0; } .review-rows dd { margin-bottom:6px; } }
.service-login { margin-top:8px; }
/* asked for a person: the Contact us card in place of the reply's line (thread.js contactCard). Drawn like the review
 * card; Contact us is the primary action, Call back the outlined one, as the reply's taps are */
.contact-card {
  max-width:640px; margin-block:4px; padding:14px 16px; white-space:normal;
  border:1px solid var(--ua-tint-line); border-radius:var(--md-shape-lg); background:var(--md-surface-container-lowest);
}
.contact-head { display:flex; align-items:center; gap:12px; }
.contact-icon {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  inline-size:44px; block-size:44px; border-radius:var(--md-shape-md); background:var(--ua-tint); color:var(--md-primary);
}
.contact-icon .ic { font-size:20px; }
.contact-title { font:var(--md-title-small); color:var(--md-on-surface); }
.contact-lead { font:var(--md-body-medium); color:var(--md-on-surface-variant); text-wrap:pretty; }
.contact-acts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.contact-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-block-size:40px; padding-inline:16px;
  border:1px solid var(--md-outline-variant); border-radius:var(--md-shape-full); background:transparent;
  color:var(--md-on-surface-variant); font:var(--md-label-large); letter-spacing:var(--md-label-large-track);
  text-decoration:none; cursor:pointer;
}
.contact-btn.primary { border-color:var(--md-primary); background:var(--md-primary); color:var(--md-on-primary); }
.contact-btn:hover { background-image:var(--md-hover-layer); }
.contact-btn:active { background-image:var(--md-press-layer); }
.contact-btn .ic { font-size:16px; }
.contact-number { margin-inline-start:4px; }
.contact-btn:focus-visible { outline:2px solid var(--md-primary); outline-offset:2px; }
@media (max-width:480px) { .contact-acts { grid-template-columns:minmax(0, 1fr); } }
.answer-note {
  display:flex; align-items:flex-start; gap:8px; max-width:470px; margin-top:2px; padding:12px 16px;
  background:var(--md-error-container); border-radius:var(--md-shape-lg);
  font:var(--md-body-small); color:var(--md-on-error-container); text-wrap:pretty;
}
.answer-note .ic { flex:0 0 auto; font-size:16px; color:var(--md-error); }

/* ---------- citations and sources ---------- */
/* a cited file is a button rather than a link (knowledge.css), drawn the same */
.cite {
  display:inline-block; min-width:18px; height:18px; padding:0 6px; margin-inline:2px; vertical-align:.2em;
  border-radius:var(--md-shape-full); background:var(--md-secondary-container); color:var(--md-on-secondary-container);
  font:var(--md-label-small); line-height:18px; text-align:center; text-decoration:none;
  font-variant-numeric:tabular-nums;
}
@media (hover: hover) { .cite:hover { background:var(--md-primary); color:var(--md-on-primary); } }

.sources { max-width:100%; margin-top:4px; display:flex; flex-direction:column; gap:8px; }
.sources .cap {
  display:flex; align-items:center; gap:6px; padding-inline-start:4px;
  font:var(--md-label-medium); letter-spacing:var(--md-label-medium-track); color:var(--md-on-surface-variant);
}
.sources .cap .ic { font-size:16px; }
.sources .grid { display:flex; flex-wrap:wrap; gap:8px; }
/* M3's assist chip, as a pill; the title is set smaller than M3's chip label so more of it fits */
.sources .src {
  display:inline-flex; align-items:center; gap:8px; max-width:min(280px, 100%); height:32px; cursor:pointer;
  padding-inline:6px 12px; border:1px solid var(--md-outline-variant); border-radius:var(--md-shape-full);
  background:transparent; color:var(--md-on-surface); text-decoration:none;
}
.sources .src:hover { background-image:var(--md-hover-layer); }
.sources .src .n {
  flex:0 0 auto; display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:var(--md-primary); color:var(--md-on-primary); font:var(--md-label-small); font-variant-numeric:tabular-nums;
}
.sources .src .t {
  min-width:0; font:var(--md-label-medium); color:var(--md-on-surface);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sources .src .h { flex:0 0 auto; font:var(--md-label-small); color:var(--md-on-surface-variant); }

/* ---------- what sits under a finished answer ---------- */
/* M3's text buttons, at the small size, quiet until hovered */
.acts { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.acts button {
  cursor:pointer; height:32px; padding-inline:12px; border:0; border-radius:var(--md-shape-full); background:transparent;
  color:var(--md-on-surface-variant); font:var(--md-label-large); letter-spacing:var(--md-label-large-track);
}
.acts button:hover { background-image:var(--md-hover-layer); }
.acts button:active { background-image:var(--md-press-layer); }
.meta {
  margin-inline-start:8px; font:var(--md-body-small); color:var(--md-on-surface-variant); font-variant-numeric:tabular-nums;
}

/* ---------- while an answer is being worked out ---------- */
.working { display:flex; flex-direction:column; padding:2px 0; }
.working .lead { display:flex; align-items:center; gap:8px; }
/* three tiny dots circling each other, as Gemini's indicator does: the cluster turns, and each dot swells in turn.
   A pulse alone read as fixed at a glance. */
.working .dots { position:relative; width:13px; height:13px; flex:none; animation:spark-turn 1.6s linear infinite; }
.working .dots i {
  position:absolute; width:4px; height:4px; border-radius:50%; background:var(--md-primary);
  animation:spark-dot 1.2s ease-in-out infinite;
}
.working .dots i:nth-child(1) { inset-inline-start:4.5px; top:0; }                  /* on a circle around the middle */
.working .dots i:nth-child(2) { inset-inline-start:0.6px; top:6.75px; animation-delay:.4s; }
.working .dots i:nth-child(3) { inset-inline-start:8.4px; top:6.75px; animation-delay:.8s; }
@keyframes spark-turn { to { transform:rotate(360deg); } }
@keyframes spark-dot { 0%,100% { transform:scale(.6); opacity:.35; } 33% { transform:scale(1.25); opacity:1; } }
.working .say {
  font:var(--md-label-large); letter-spacing:var(--md-label-large-track);
  background:linear-gradient(90deg, var(--md-on-surface-variant) 0%, var(--md-primary) 45%, var(--md-on-surface-variant) 90%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--md-on-surface-variant);
  animation:ig-shimmer 1.8s linear infinite;
}

@media (max-width: 820px), (max-height: 700px) {
  .cards { grid-template-columns:minmax(0,1fr); margin-top:20px; }
}
@media (max-width: 820px) {
  .bubble, .answer-box { max-width:88%; }
  .turn.agent { padding-inline-start:0; }
  .agent-avatar.in-thread { position:static; width:28px; height:28px; }
}

/* ---------- a government service's reply chips (Confirm at the summary): M3's suggestion chips ---------- */
.service-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.service-chip {
  cursor:pointer; height:32px; padding-inline:16px; border:1px solid var(--md-outline-variant);
  border-radius:var(--md-shape-full); background:transparent; color:var(--md-on-surface-variant);
  font:var(--md-label-large); letter-spacing:var(--md-label-large-track);
}
.service-chip:hover { background-image:var(--md-hover-layer); }
.service-chip:active { background-image:var(--md-press-layer); }