#media-prepare{display:flex;flex-direction:column;gap:6px;margin:0 12px;max-height:210px;overflow:auto}#media-prepare[hidden]{display:none}
.media-prepared{display:flex;align-items:center;gap:8px;padding:8px;border-radius:12px;background:#282332;overflow-wrap:anywhere}.media-prepared img{width:48px;height:48px;object-fit:cover}.media-prepared span{flex:1;min-width:0}.media-prepared audio{max-width:45%;height:36px}.media-prepared button{font-size:22px;padding:2px 9px}
#media-info{margin:0 16px;color:#c8bbda;font-size:13px;min-height:0}#media-info:empty{display:none}
#media-micro{display:grid;place-items:center;flex:none;border:0;background:transparent;color:var(--purple,#b889ef);padding:0;width:32px;min-width:0;height:40px}#media-micro svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.media-message{display:flex;flex-direction:column;align-items:flex-start;gap:7px;max-width:100%;overflow-wrap:anywhere}.media-message img{max-width:min(340px,100%);max-height:260px;object-fit:contain;cursor:zoom-in;border-radius:10px}.media-message video{max-width:100%;width:340px;max-height:260px;border-radius:10px}.media-message audio{width:min(340px,100%)}.media-name{font-size:13px;color:#bfb6cb}.media-actions{display:flex;gap:16px;align-items:center;font-size:13px}.media-actions button{padding:3px 7px;font-size:12px}.media-actions a{color:#c69cff}
.composer.media-pending #send-button{display:grid!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}.composer input{min-width:0}
#media-viewer{padding:0;border:0;max-width:none;max-height:none;width:100vw;height:100dvh;background:#111019;color:#fff;overflow:hidden}#media-viewer::backdrop{background:#111019}.media-viewer-toolbar{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:12px;background:#111019de}.media-viewer-toolbar button{font-size:32px;padding:0 12px}.media-viewer-toolbar a{color:#d5b8ff}.media-viewport{height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}.media-viewport img{max-width:100%;max-height:calc(100% - 80px);object-fit:contain;user-select:none;-webkit-user-drag:none;transform-origin:center}
@media(max-width:760px){#media-micro{width:27px}.media-prepared{flex-wrap:wrap}.media-prepared audio{max-width:100%}.media-viewer-toolbar{padding-top:max(12px,env(safe-area-inset-top))}}

/* Même tracé et mêmes zones tactiles pour les commandes de saisie. */
#chat .composer #media-micro,#chat .composer #emoji-toggle,#chat .composer #composer-plus{display:grid;place-items:center;background:transparent;border:0;box-shadow:none;border-radius:50%;color:var(--purple);width:36px;min-width:36px;height:40px;padding:0}
#chat .composer #media-micro svg,#chat .composer #emoji-toggle svg,#chat .composer #composer-plus svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#chat .composer #media-micro:focus-visible,#chat .composer #emoji-toggle:focus-visible,#chat .composer #composer-plus:focus-visible{outline:2px solid var(--purple);outline-offset:1px}

#chat .composer #media-micro{margin-right:-8px}
#chat .composer #media-micro,#chat .composer #emoji-toggle{width:32px;min-width:32px}

/* L'aperçu ne partage plus une ligne compressible avec le lecteur natif Android. */
#media-prepare{flex:none;min-width:0;max-height:210px}
#media-prepare .media-prepared{display:grid;flex:none;grid-template-columns:minmax(0,1fr) 32px;gap:8px;min-width:0;align-items:center}
#media-prepare .media-prepared>span{grid-column:1;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
#media-prepare .media-prepared>button{grid-column:2;grid-row:1;width:32px;height:32px;padding:0;border:0;background:transparent;font-size:22px;justify-self:end}
#media-prepare .media-prepared>audio{grid-column:1/-1;grid-row:2;display:block;width:100%;max-width:100%;min-width:0;height:48px}
#media-prepare .media-prepared>img{grid-column:1/-1;grid-row:2;max-width:100%;justify-self:start}
