/* 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; }
.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); }
.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 (files.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%; }
}

/* ---------- 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); }