/* The question box and everything in it, the error banner above it, and the snackbar. The chips inside the box and
 * their popovers are in controls.css; the Fast/Deep toggle is in view.css, which owns what each view shows. */

.composer {
  flex:0 0 auto; position:relative; z-index:4; display:flex; flex-direction:column; align-items:center;
  padding:8px 24px 24px;
  /* the conversation scrolls up behind the box and fades out rather than cutting off at its edge */
  background:linear-gradient(180deg, color-mix(in srgb, var(--md-surface) 0%, transparent) 0%, var(--md-surface) 34%);
}
.composer-in { width:100%; max-width:840px; }
#banner {
  display:none; align-items:flex-start; gap:8px; margin-bottom:12px; padding:12px 16px;
  background:var(--md-error-container); border-radius:var(--md-shape-lg);
  color:var(--md-on-error-container); font:var(--md-body-medium);
}
#banner.show { display:flex; }
#banner .ic { flex:0 0 auto; margin-top:2px; font-size:16px; color:var(--md-error); }

/* The box: a white panel with a hairline and no shadow. A full radius on a box two rows tall would
 * pinch the first line of the question into the curve; at this height 32px reads as a pill. The caret shows focus,
 * helped by a hairline ring, and the controls inside have their own. */
.field {
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:16px 16px 12px; padding-inline-start:24px;
  border:1px solid var(--ua-line); border-radius:var(--md-shape-xl-inc); background:var(--md-surface-container);
}
.field:focus-within { outline:1px solid var(--md-outline); outline-offset:-1px; }
.field textarea {
  width:100%; resize:none; border:0; outline:none; background:transparent; color:var(--md-on-surface);
  font:var(--md-body-large); padding:2px 0; min-height:28px; max-height:200px; overflow-y:auto; display:block;
}
.field-row { display:flex; align-items:center; gap:8px; }
.ctrls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; flex:1 1 auto; }

/* The one filled action on screen, M3's filled icon button: broadcast to talk, arrow to send, square to stop. */
.go {
  flex:0 0 auto; width:48px; height:48px; border-radius:50%; border:0; cursor:pointer; padding:0;
  display:grid; place-items:center; font-size:24px;
  background-color:var(--md-primary); color:var(--md-on-primary);
}
.go:hover { background-image:var(--md-hover-layer); }
.go:active { background-image:var(--md-press-layer); }
.go:disabled {
  background-color:var(--md-disabled-container); background-image:none; color:var(--md-disabled-content); cursor:not-allowed;
}
.go.voice-live { background-color:var(--md-error); color:var(--md-on-error); }

/* The small print under the box: the advice, then the version with its dot (main.js). The words are kept short
 * enough that the whole line fits a 360px phone in either language; narrower, the version moves down whole. */
.smallprint { margin:12px 8px 0; text-align:center; font:var(--md-body-small); color:var(--md-on-surface-variant); }
.smallprint .build { white-space:nowrap; }

/* M3's snackbar: the inverse surface, as a pill */
.toast {
  position:fixed; inset-inline:16px; bottom:24px; z-index:90; margin:0 auto; width:max-content;   /* over the dialogs (80) */
  max-width:min(560px, calc(100vw - 32px)); min-height:48px;
  display:flex; align-items:center; gap:12px; padding:12px 24px; padding-inline-start:16px;
  background:var(--md-inverse-surface); color:var(--md-inverse-on-surface); border-radius:var(--md-shape-full);
  font:var(--md-body-medium);
  opacity:0; pointer-events:none; transition:opacity var(--md-dur-short4) var(--md-ease-standard);
}
.toast .ic { flex:0 0 auto; font-size:18px; color:var(--md-inverse-primary); }
.toast.show { opacity:1; animation:ig-fadeup .24s ease both; }

@media (max-width: 820px) {
  .composer { padding:8px 16px 16px; }
  .field { padding:12px; padding-inline-start:20px; border-radius:var(--md-shape-xl); }
}
/* on a phone, a little closer to the edge, so the box's controls stay on one row down to 360px */
@media (max-width: 480px) {
  .field { padding-inline-start:16px; }
}