/* Existing media and handoff states; these styles never infer provider results. */
.voice-feedback { text-align: center; }
#voiceStatus { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
#voiceGestureHint { font-size: 14px; line-height: 1.6; color: inherit; }
.voice-feedback.is-cancelled { border-color: #edc4cd; background: #fff4f6; color: #a23450; }
.voice-feedback.is-cancelled #voiceGestureHint { color: inherit; }
#pressToTalkButton { min-height: 44px; border-radius: 18px; }
#pressToTalkButton[aria-busy="true"] { color: #4d4398; }
#pressToTalkButton[data-voice-state="TRANSCRIBING"] { display: flex; align-items: center; justify-content: center; gap: 6px; height: auto; line-height: 1.4; }
#pressToTalkButton[data-voice-state="TRANSCRIBING"]::before { content: ""; flex: 0 0 14px; width: 14px; height: 14px; border: 2px solid #d2cced; border-top-color: currentColor; border-radius: 50%; animation: voiceProcessingSpin .9s linear infinite; pointer-events: none; }
@keyframes voiceProcessingSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #pressToTalkButton[data-voice-state="TRANSCRIBING"]::before { animation: none; }
}

.composer-shell .attachment-list { gap: 10px; padding: 12px 10px; overscroll-behavior-x: contain; }
.composer-shell .attachment-chip {
  width: 178px;
  height: auto;
  flex: 0 0 178px;
  border: 1px solid #ded9f2;
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}
.composer-shell .attachment-chip > .attachment-preview {
  width: 100%;
  height: 92px;
  min-height: 44px;
  flex: 0 0 92px;
  background: #eeebff;
}
.composer-shell .attachment-chip > .attachment-preview img { object-fit: contain; }
.composer-shell .attachment-chip > img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin: 24px auto;
  object-fit: contain;
}
.composer-shell .attachment-chip > div { flex: 1; padding: 10px 11px 12px; background: #fff; }
.composer-shell .attachment-chip strong {
  color: #37305f;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
}
.composer-shell .attachment-chip p { margin: 5px 0 0; color: #6b6086; font-size: 13px; line-height: 1.6; }
.composer-shell .attachment-chip[data-media-status="READY"] { border-color: #bdb4ea; }
.composer-shell .attachment-chip[data-media-status="FAILED"] { border-color: #dfb6bd; }
.composer-shell .attachment-chip[data-media-status="FAILED"] p { color: #963649; }
.composer-shell .attachment-chip[data-media-status="CANCELLED"] p { color: #766977; }
.composer-shell .attachment-chip[data-error-code="TEXT_PILOT_RESULT_UNKNOWN"],
.composer-shell .attachment-chip[data-error-code="TEXT_PILOT_STOPPED"],
.composer-shell .attachment-chip[data-error-code="MEDIA_ANALYSIS_PROVIDER_FAILED"],
.composer-shell .attachment-chip[data-media-status="UNCONFIRMED"] { border-color: #d8bf91; }
.composer-shell .attachment-chip[data-error-code="TEXT_PILOT_RESULT_UNKNOWN"] p,
.composer-shell .attachment-chip[data-error-code="TEXT_PILOT_STOPPED"] p,
.composer-shell .attachment-chip[data-error-code="MEDIA_ANALYSIS_PROVIDER_FAILED"] p,
.composer-shell .attachment-chip[data-media-status="UNCONFIRMED"] p { color: #805a22; }
.composer-shell .attachment-chip > button[data-attachment-id] {
  top: 2px;
  right: 2px;
  width: 44px;
  height: 44px;
  padding: 12px;
  background: #393052d9;
}
.composer-shell .attachment-chip > button[data-attachment-id] img { width: 20px; height: 20px; }
.composer-shell .attachment-add { min-width: 68px; min-height: 68px; align-self: flex-start; }
.composer-error:not(:empty), .dialog-error:not(:empty) { overflow-wrap: anywhere; }
.composer-error:not(:empty) { border: 1px solid #ead8e1; color: #983846; line-height: 1.6; }

.camera-page {
  z-index: 70;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f9f7ff;
}
.camera-top {
  position: sticky;
  z-index: 2;
  top: 0;
  height: calc(62px + env(safe-area-inset-top));
  flex: 0 0 calc(62px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 14px 0;
  background: #faf9ff;
}
.camera-back, .camera-top-spacer { width: 44px; min-width: 44px; height: 44px; flex-basis: 44px; border-radius: 14px; }
.camera-back { background: #eeebff; }
.camera-back img { width: 24px; height: 24px; }
.camera-top h2 { color: #322967; font-size: 17px; font-weight: 500; }
.camera-page .viewfinder { min-height: 190px; background: #292439; }
.camera-page .viewfinder video, .camera-page .viewfinder img { object-fit: contain; }
.camera-help { padding: 0 20px; font-size: 14px; line-height: 1.6; }
.camera-controls { flex: 0 0 auto; min-height: 210px; padding: 24px 26px max(20px, env(safe-area-inset-bottom)); }
.camera-option { min-width: 56px; min-height: 58px; padding: 8px; color: #5e5088; font-size: 13px; }
.camera-option img { width: 26px; height: 26px; }
.camera-controls .review-row button, #cameraSystemButton { min-width: 105px; min-height: 44px; border-radius: 14px; }
.camera-tip { margin-top: 20px; color: #706582; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.camera-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; border-radius: 24px; background: #f8f6ff; color: #332b5c; }
.camera-dialog section { gap: 16px; padding: 20px; }
.camera-dialog img { background: #eae5f7; }
.camera-dialog button { min-height: 44px; border-radius: 14px; }

.handoff-dialog, .handoff-guidance-dialog, .handoff-success-dialog {
  width: min(420px, calc(100% - 28px));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #efebfb;
  border-radius: 26px;
  background: #fff;
  color: #332b5c;
}
.handoff-dialog form { gap: 16px; padding: 22px; }
.handoff-dialog .dialog-heading { gap: 12px; align-items: center; }
.handoff-dialog h2, .handoff-success-content h2, .handoff-guidance-content h2 { font-size: 21px; font-weight: 600; line-height: 1.45; }
.handoff-dialog p, .handoff-success-content > p { font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.handoff-dialog .dialog-close { width: 44px; min-width: 44px; height: 44px; border-radius: 15px; background: #f5f2ff; }
.handoff-dialog label { font-size: 14px; line-height: 1.6; }
.handoff-dialog .contact-fields label { font-weight: 400; }
.handoff-dialog .contact-fields input, .handoff-dialog select, #agentHandoffNarrative {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #dcd6ed;
  border-radius: 13px;
  padding: 10px 12px;
  background: #fcfbff;
  color: #332b5c;
  font: inherit;
}
#agentHandoffNarrative { min-height: 110px; resize: vertical; line-height: 1.6; }
.handoff-dialog label:has(#handoffConsent) { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; padding: 12px; border-radius: 14px; background: #f7f4ff; }
#handoffConsent { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--lavender); }
#handoffError:not(:empty) { padding: 10px 12px; border-radius: 13px; background: #fff3f5; color: #99384c; font-size: 14px; line-height: 1.6; }
#handoffForm[data-submit-state="UNCONFIRMED"] #handoffError:not(:empty) { background: #fff8ed; color: #805a22; }
#handoffError:empty { display: none; }
.handoff-dialog .primary, .handoff-success-dialog .primary, .handoff-guidance-dialog button { min-height: 44px; border-radius: 15px; }
.handoff-success-ticket { border: 1px solid #e3dcf8; border-radius: 15px; font-size: 15px !important; overflow-wrap: anywhere; }
.handoff-dialog input:focus-visible, .handoff-dialog select:focus-visible, #agentHandoffNarrative:focus-visible,
.handoff-dialog button:focus-visible, .camera-page button:focus-visible, .camera-dialog button:focus-visible,
.composer-shell .attachment-chip button:focus-visible, .composer-shell .attachment-add:focus-visible {
  outline: 2px solid #7061d9;
  outline-offset: 2px;
}

@media (max-width: 350px) {
  .handoff-dialog form { padding: 18px; }
  .camera-controls { padding-left: 20px; padding-right: 20px; }
  .composer-shell .attachment-chip { width: 164px; flex-basis: 164px; }
}
@media (max-height: 600px) {
  .camera-page .viewfinder { flex: 1 0 190px; }
  .camera-controls { min-height: 178px; padding-top: 18px; }
  .camera-tip { margin-top: 14px; }
}