.banner {
  display:flex; align-items:center; gap:10px; margin:12px 20px 0; padding:10px 14px; border-radius:10px;
  font-size:12px; background:var(--callout-gold-bg); color:var(--callout-gold-fg);
  box-shadow:inset 0 0 0 1px var(--callout-gold-border);
}
.banner a { font-weight:700; text-decoration:underline; background:none; border:0; padding:0; margin-left:auto; white-space:nowrap; }
.banner.err { background:var(--tone-err-bg); color:var(--tone-err-fg); box-shadow:none; }
.pa .banner { position:relative; z-index:2; margin-top:72px; }
/* banner (offline / model not reachable) */
.banner .i { flex-shrink:0; }
.banner button.link {
  color:inherit; font-weight:700; text-decoration:underline; background:none; border:0; padding:0;
  margin-left:auto; white-space:nowrap;
}
.pa .banner + .msgs { padding-top:16px; padding-bottom:16px; -webkit-mask-image:none; mask-image:none; }
.pa .banner[hidden] + .msgs { padding-top:16px; padding-bottom:16px; -webkit-mask-image:none; mask-image:none; }
/* conversation: banner at 80-99%, composer lock */
/* the agent header is in the flow now: the usage banner is a plain row under it, never over the transcript */
.pa .uso-banner {
  width:calc(100% - 40px); max-width:var(--chat-w); display:flex; align-items:center; gap:10px; padding:10px 14px;
  border-radius:10px; font-size:12px; background:var(--callout-gold-bg); color:var(--callout-gold-fg);
  box-shadow:inset 0 0 0 1px var(--callout-gold-border); position:static; z-index:auto; flex:none;
  margin:8px auto 4px;
}
.uso-banner .uso-ic { margin-top:0; }
.uso-banner .uso-link { margin-left:auto; }
.pa .uso-banner ~ .banner { margin-top:12px; }
/* usage notice: dismiss for the week */
.pa .uso-banner .uso-x {
  flex-shrink:0; width:32px; height:32px; min-height:32px; margin:-4px -6px -4px 0; color:inherit;
  background:transparent; border-radius:50%;
}
.pa .uso-banner ~ .banner + .msgs { padding-top:16px; -webkit-mask-image:none; mask-image:none; }
.pa .uso-banner .uso-x:hover { background:color-mix(in srgb, currentColor 12%, transparent); }
.pa .uso-banner ~ .banner[hidden] + .msgs { padding-top:16px; -webkit-mask-image:none; mask-image:none; }
.uso-link {
  margin-left:auto; flex-shrink:0; border:0; background:none; color:inherit; font:inherit; font-weight:700;
  text-decoration:underline; text-underline-offset:3px; padding:0 4px; min-height:32px; cursor:pointer;
}
/* [avisos] one notice component for the conversation: usage (gold) and health (error) share width, radius, padding,
   type and rhythm; only the tone changes. A notice stands on a plate of the page colour that fills just the gap
   around it (never reaching into its neighbour), and only the last one trails the soft fade over the transcript. */
.pa .conv > .uso-banner {
  position:relative; z-index:3; align-self:start;
  background:linear-gradient(var(--callout-gold-bg), var(--callout-gold-bg)), var(--bg);
  box-shadow:inset 0 0 0 1px var(--callout-gold-border), 0 -14px 0 14px var(--bg), 0 14px 14px 10px color-mix(in srgb, var(--bg) 85%, transparent);
  box-sizing:border-box; width:calc(100% - 2 * var(--page-gutter)); max-width:var(--chat-w); margin:0 auto 8px;
  min-height:44px; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px;
  font-size:12px; line-height:1.45; text-wrap:pretty; --tone-bg:var(--callout-gold-bg);
  --tone-line:var(--callout-gold-border); color:var(--callout-gold-fg);
}
.pa .conv > .banner {
  position:relative; z-index:3; align-self:start; box-sizing:border-box;
  width:calc(100% - 2 * var(--page-gutter)); max-width:var(--chat-w); margin:0 auto 8px; min-height:44px;
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; font-size:12px;
  line-height:1.45; text-wrap:pretty; --tone-bg:var(--callout-gold-bg); --tone-line:var(--callout-gold-border);
}
.conv > .uso-banner > .i { flex:none; width:16px; height:16px; margin:0; }
.conv > .banner > .i { flex:none; width:16px; height:16px; margin:0; }
.conv > .uso-banner .uso-ic { flex:none; width:16px; height:16px; margin:0; }
.conv > .banner .banner-text { flex:1; min-width:0; }
.pa .conv > .banner.err {
  background:linear-gradient(var(--tone-err-bg), var(--tone-err-bg)), var(--bg); --tone-bg:var(--tone-err-bg);
  --tone-line:color-mix(in srgb, var(--tone-err-fg) 22%, transparent); color:var(--tone-err-fg);
}
.conv:has(> :is(.uso-banner, .banner):not([hidden])) > .conv-top { background:var(--bg); }
.pa .conv > .uso-banner:not([hidden]) {
  background:linear-gradient(var(--tone-bg), var(--tone-bg)), var(--bg);
  box-shadow:inset 0 0 0 1px var(--tone-line), 0 0 0 4px var(--bg), 0 14px 14px 10px color-mix(in srgb, var(--bg) 85%, transparent);
}
.pa .conv > .banner:not([hidden]) {
  background:linear-gradient(var(--tone-bg), var(--tone-bg)), var(--bg);
  box-shadow:inset 0 0 0 1px var(--tone-line), 0 0 0 4px var(--bg), 0 14px 14px 10px color-mix(in srgb, var(--bg) 85%, transparent);
}
/* a notice followed by another keeps only its plate: the fade belongs under the last one */
.conv > .uso-banner:not([hidden]):has(~ .banner:not([hidden])) { box-shadow:inset 0 0 0 1px var(--tone-line), 0 0 0 4px var(--bg); }
.conv > .uso-banner:not([hidden]) ~ .banner:not([hidden]) {
  box-shadow:inset 0 0 0 1px var(--tone-line), 0 0 0 4px var(--bg), 0 14px 14px 10px color-mix(in srgb, var(--bg) 85%, transparent);
}
.conv > .banner:not([hidden]) ~ .banner:not([hidden]) {
  box-shadow:inset 0 0 0 1px var(--tone-line), 0 0 0 4px var(--bg), 0 14px 14px 10px color-mix(in srgb, var(--bg) 85%, transparent);
}
.conv > .uso-banner:not([hidden]) ~ .uso-banner:not([hidden]) {
  box-shadow:inset 0 0 0 1px var(--tone-line), 0 0 0 4px var(--bg), 0 14px 14px 10px color-mix(in srgb, var(--bg) 85%, transparent);
}
.conv > .banner:not([hidden]) ~ .uso-banner:not([hidden]) {
  box-shadow:inset 0 0 0 1px var(--tone-line), 0 0 0 4px var(--bg), 0 14px 14px 10px color-mix(in srgb, var(--bg) 85%, transparent);
}
.conv > .banner #banner-text { flex:1; min-width:0; }
@container (max-width: 719px) {
  .banner { margin:10px 12px 0; }
}
@media (pointer: coarse) {
  .pa .uso-banner .uso-x { width:44px; height:44px; margin:-10px -12px -10px -4px; }
}