/* Mídia do atendimento: cartões compactos, controles legíveis, foco na conversa. */
.message-attachment {
  width: 310px;
  max-width: 100%;
  min-width: min(190px, 100%);
  border-radius: 12px;
  border-color: var(--line, #dfe7ee);
  background: #fff;
  box-shadow: 0 2px 8px #19314906;
}
.message-attachment .attachment-content { background: #edf3f6; }
.attachment-placeholder { display: flex; align-items: center; gap: 9px; padding: 17px 14px; width: 100%; color: #526c82; font-size: 12px; }
.attachment-placeholder .attachment-document-icon { min-height: 0; width: 25px; }
.attachment-placeholder .icon { width: 22px; height: 22px; }
.attachment-heading { padding: 11px 13px 2px; }
.attachment-kicker { display: block; color: #61798c; text-transform: uppercase; letter-spacing: 1.25px; font-weight: 700; font-size: 9px; line-height: 1.6; }
.message-attachment .attachment-heading strong { color: var(--ink, #193149); font-size: 12px; line-height: 1.6; margin-top: 2px; }
.message-attachment .attachment-heading > span:last-child { font-size: 10px; color: #607589; }
.attachment-state { font-size: 10px; line-height: 1.7; color: #526c82; padding: 3px 13px 0; margin: 0; }
.message-attachment[aria-busy="true"] .attachment-state { color: #276048; }
.attachment-actions { padding: 4px 9px 8px; gap: 4px; }
.attachment-actions .text-button { min-height: 36px; padding: 5px; font-size: 11px; color: #315b73; }
.attachment-actions .text-button:last-child { margin-left: auto; }
.message-attachment .attachment-error { margin: 0; padding: 0 13px 11px; font-size: 11px; color: #a23c3c; }
.attachment-error:empty { display: none; }
.attachment-image-button { position: relative; display: block; width: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; overflow: hidden; }
.attachment-image-button .attachment-image { width: 100%; max-height: 260px; object-fit: contain; }
.attachment-image-hint { position: absolute; bottom: 8px; right: 8px; border: 1px solid #ffffff36; border-radius: 6px; padding: 4px 7px; color: #fff; background: #132b44d9; font-size: 10px; line-height: 1.5; pointer-events: none; }
.attachment-image-button:focus-visible { outline: 3px solid #28795e; outline-offset: -3px; }
.attachment-audio-player { width: 100%; padding: 9px 9px 8px; background: #f1f6f7; }
.attachment-audio-player .attachment-audio { width: 100%; max-width: none; height: 44px; margin: 0; }
.attachment-rate { display: flex; gap: 5px; justify-content: flex-end; margin-top: 5px; }
.attachment-rate button { border: 1px solid transparent; border-radius: 6px; min-width: 39px; min-height: 32px; padding: 3px 8px; color: #466176; font: inherit; font-size: 11px; background: transparent; cursor: pointer; }
.attachment-rate button[aria-pressed="true"] { border-color: #badccc; color: #245a43; background: #e1f4eb; font-weight: 700; }
.attachment-rate button:hover { background: #e2ebe9; }
.attachment-rate button:focus-visible { outline: 2px solid #28795e; outline-offset: 2px; }
.attachment-video-player { width: 100%; background: #152c3e; }
.attachment-video-player .attachment-video { width: 100%; max-height: 245px; }
.attachment-video-player .attachment-expand { display: flex; width: 100%; justify-content: flex-end; color: #d5f2e4; padding: 7px 11px; min-height: 36px; font-size: 11px; }
/* Prévias pequenas deixam mais histórico à vista; o visualizador conserva o tamanho completo. */
.message-attachment:is(.attachment-image, .attachment-video) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 220px;
  min-width: min(160px, 100%);
  border-radius: 9px;
}
.message-attachment.attachment-audio { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 300px; height: auto; }
.message-attachment.attachment-audio .attachment-heading { padding-top: 6px; }
.message-attachment.attachment-audio .attachment-heading strong { font-size: 11px; }
.message-attachment.attachment-audio .attachment-actions { padding-block: 0 4px; }
.message-attachment.attachment-audio .attachment-actions .text-button { min-height: 32px; }
.message-attachment:is(.attachment-image, .attachment-video, .attachment-audio) .attachment-content { grid-column: 1 / -1; grid-row: 1; }
.message-attachment:is(.attachment-image, .attachment-video) .attachment-image,
.message-attachment:is(.attachment-image, .attachment-video) .attachment-video { max-height: 140px; }
.message-attachment:is(.attachment-image, .attachment-video) .attachment-placeholder { padding: 12px 10px; font-size: 11px; }
.message-attachment:is(.attachment-image, .attachment-video, .attachment-audio) .attachment-heading {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  min-width: 0;
  padding: 7px 10px 2px;
}
.message-attachment:is(.attachment-image, .attachment-video, .attachment-audio) .attachment-heading strong {
  grid-column: 1 / -1;
  grid-row: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}
.message-attachment:is(.attachment-image, .attachment-video, .attachment-audio) .attachment-kicker {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  letter-spacing: .7px;
  line-height: 1.4;
}
.message-attachment:is(.attachment-image, .attachment-video, .attachment-audio) .attachment-heading > span:last-child {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  text-align: right;
  line-height: 1.4;
}
.message-attachment:is(.attachment-image, .attachment-video, .attachment-audio) .attachment-state {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  padding: 2px 0 5px 10px;
  line-height: 1.4;
}
.message-attachment:is(.attachment-image, .attachment-video, .attachment-audio) .attachment-actions {
  grid-column: 2;
  grid-row: 3;
  max-width: 106px;
  gap: 0;
  padding: 0 6px 4px;
}
.message-attachment:is(.attachment-image, .attachment-video, .attachment-audio) .attachment-actions .text-button {
  min-height: 32px;
  padding: 4px;
}
.message-attachment.attachment-video .attachment-video-player { position: relative; }
.message-attachment.attachment-video .attachment-expand { position: absolute; top: 6px; right: 6px; width: auto; min-height: 32px; padding: 4px 7px; border-radius: 6px; background: #132b44e6; }
.message-attachment:is(.attachment-image, .attachment-video, .attachment-audio) .attachment-error,
.message-attachment:is(.attachment-image, .attachment-video, .attachment-audio) .attachment-unavailable { grid-column: 1 / -1; padding: 0 10px 8px; }
.attachment-selection-preview .attachment-image-button { height: 100%; }
.attachment-selection-preview .attachment-image-hint,
.attachment-selection-preview .attachment-expand { display: none; }
.audio-selection .attachment-selection-preview { height: auto; overflow: visible; }
.audio-selection .attachment-audio-player { padding: 0; background: transparent; }
.attachment-selection-preview .attachment-video-player { height: 100%; }
.attachment-selection-preview .attachment-video { height: 100%; object-fit: cover; }
.media-viewer {
  width: min(960px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid #d5e1e8;
  border-radius: 16px;
  color: var(--ink, #193149);
  background: #fff;
  box-shadow: 0 24px 100px #091b2f66;
}
.media-viewer::backdrop { background: #091b2fbd; backdrop-filter: blur(4px); }
.media-viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; }
.media-viewer-heading > div { min-width: 0; }
.media-viewer-heading h2 { font: inherit; font-size: 15px; font-weight: 700; line-height: 1.6; margin: 2px 0 0; overflow-wrap: anywhere; }
.media-viewer-heading .icon-button { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--line, #dfe7ee); border-radius: 9px; color: #375c74; }
.media-viewer-stage { display: flex; justify-content: center; align-items: center; height: min(64dvh, 660px); overflow: auto; background: #132b44; }
.media-viewer-stage img, .media-viewer-stage video { display: block; width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.media-viewer-stage.is-zoomed { display: block; }
.media-viewer-stage.is-zoomed img { height: auto; object-fit: initial; }
.media-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 20px; }
.media-viewer-toolbar .text-button { color: #315b73; min-height: 44px; font-size: 12px; }
.media-viewer-zoom { display: flex; border: 1px solid var(--line, #dfe7ee); border-radius: 8px; overflow: hidden; }
.media-viewer-zoom button { border: 0; border-right: 1px solid var(--line, #dfe7ee); background: #f4f7fa; color: #375c74; font: inherit; font-size: 13px; min-width: 44px; min-height: 42px; padding: 5px 9px; cursor: pointer; }
.media-viewer-zoom button:last-child { border-right: 0; }
.media-viewer-zoom button:hover { background: #e5f2ec; }
.media-viewer button:focus-visible { outline: 2px solid #28795e; outline-offset: -3px; }
.media-viewer-help { font-size: 11px; color: #607589; }
.media-viewer-error { font-size: 12px; color: #a23c3c; margin: 0; padding: 0 20px 13px; }
.media-viewer-error:empty { display: none; }
@media (max-width: 760px) {
  .attachment-actions .text-button, .attachment-rate button { min-height: 44px; }
  .message-attachment { width: 290px; }
  .attachment-image-button .attachment-image { max-height: 230px; }
  .message-attachment:is(.attachment-image, .attachment-video) .attachment-actions .text-button,
  .message-attachment:is(.attachment-image, .attachment-video) .attachment-expand,
  .message-attachment.attachment-audio .attachment-actions .text-button { min-height: 44px; }
  .media-viewer { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 12px; }
  .media-viewer-heading { padding: 10px 12px; }
  .media-viewer-heading h2 { font-size: 13px; }
  .media-viewer-stage { height: 58dvh; }
  .media-viewer-toolbar { padding: 8px 12px; gap: 7px; flex-wrap: wrap; }
}