.audio_card { display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 300px; /* min-width: 300px; */ padding: 0 5px; /* margin-top: 40px; */ /* border-radius: 20px; */ color: #fff; font-weight: 100; /* box-shadow: 0px 0px 70px 0px #274684; */ /* background: #071739; */ overflow: hidden; } .audio_card .current-song { display: flex; flex-direction: column; align-items: center; width: 100%; /* padding: 20px 0px; */ border-radius: 20px; color: #071739; background: #fff; } .audio_card .current-song audio { display: none; } .audio_card .current-song .img-wrap { position: relative; margin: 20px; /* width: 270px; */ height: 100px; overflow: hidden; border-radius: 100pc; /* box-shadow: 0px 10px 40px 0px rgba(39, 70, 132, 0.7); */ } .audio_card .current-song .img-wrap img { width: auto; height: 100%; } .audio_card .current-song .song-name { /* margin-top: 30px; */ font-size: 14px; } .audio_card .current-song .song-autor { color: #709fdc; font-size: 18px; } .audio_card .current-song .time { display: flex; justify-content: space-between; /* margin-top: 10px; */ width: 200px; } .audio_card .current-song .timeline { position: relative; margin: 0 auto; width: 200px; height: 5px; background: #709fdc; border-radius: 5px; cursor: pointer; } .audio_card .current-song .timeline:hover .hover-playhead { opacity: 1; } .audio_card .current-song .timeline:hover .hover-playhead::before { opacity: 1; } .audio_card .current-song .timeline:hover .hover-playhead::after { opacity: 1; } .audio_card .current-song .timeline .playhead { position: relative; z-index: 2; width: var(--qchat-audio-progress, 0%); height: 5px; border-radius: 5px; background: #0d6efd; box-shadow: 0 0 0 1px rgba(13,110,253,0.08), 0 0 6px rgba(13,110,253,0.28); transition: width 120ms linear; } .audio_card .current-song .timeline .hover-playhead { position: absolute; z-index: 1; top: 0; left: 0; width: var(--qchat-audio-hover-progress, 0%); height: 5px; opacity: 0; border-radius: 5px; background: rgba(13,110,253,0.38); transition: opacity 0.3s; } .audio_card .current-song .timeline .hover-playhead::before { opacity: 0; content: attr(data-content); display: block; position: absolute; top: -30px; right: -23px; width: 40px; padding: 3px; text-align: center; color: white; background: #274684; border-radius: calc( 20px - 12px); } .audio_card .current-song .timeline .hover-playhead::after { opacity: 0; content: ""; display: block; position: absolute; top: -8px; right: -8px; border-top: 8px solid #274684; border-left: 8px solid transparent; border-right: 8px solid transparent; } .audio_card .current-song .controls { margin-top: 10px; } .audio_card .current-song .controls button { color: #071739; border-radius: 50%; margin: 15px; font-size: 18px; text-align: center; transition: 0.2s; cursor: pointer; border: none; background: 0; } .audio_card .current-song .controls button:focus { outline: none; } .audio_card .current-song .controls button.play { width: 50px; height: 50px; border: 1px solid #e2e2e2; } .audio_card .current-song .controls button.play:hover { left: 0; box-shadow: 0px 0px 15px 0px rgba(39, 70, 132, 0.7); } .audio_card .current-song .controls button.play .fa-play { transform: translateX(2px); } .audio_card .current-song .controls button.prev-next { width: 35px; height: 35px; } .audio_card .current-song .controls button.prev-next:hover { transform: scale(1.2); } .audio_card .play-list { display: flex; flex-direction: column; padding: 10px; height: 180px; overflow-y: scroll; } .audio_card .play-list .track { display: flex; align-items: center; margin-bottom: 10px; border-radius: calc( 20px - 10px); border: 1px solid transparent; transition: 0.3s; cursor: pointer; } .audio_card .play-list .track:hover { background: #274684; border-color: #274684; position: relative; } .audio_card .play-list .track.current-audio { background: #274684; box-shadow: 0px 0px 15px 0px #274684; } .audio_card .play-list .track.play-now { background: #274684; box-shadow: 0px 0px 15px 0px #274684; position: relative; } .audio_card .play-list .track.play-now:after { content: ""; display: block; position: absolute; left: 17px; width: 57px; height: 57px; border-radius: calc( 20px - 10px); font-size: 16px; -webkit-animation: play 2s linear infinite; animation: play 2s linear infinite; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 56 56' style='enable-background:new 0 0 56 56;' xml:space='preserve'%3E%3Cpath style='fill:%23071739;' d='M47.799,8.201c-10.935-10.935-28.663-10.935-39.598,0c-10.935,10.935-10.935,28.663,0,39.598 c10.935,10.935,28.663,10.935,39.598,0C58.734,36.864,58.734,19.136,47.799,8.201z M32.95,32.95c-2.734,2.734-7.166,2.734-9.899,0 c-2.734-2.734-2.734-7.166,0-9.899s7.166-2.734,9.899,0S35.683,30.216,32.95,32.95z'/%3E%3Cpath style='fill:%23E7ECED;' d='M35.778,20.222c-4.296-4.296-11.261-4.296-15.556,0c-4.296,4.296-4.296,11.261,0,15.556 c4.296,4.296,11.261,4.296,15.556,0C40.074,31.482,40.074,24.518,35.778,20.222z M30.121,30.121c-1.172,1.172-3.071,1.172-4.243,0 s-1.172-3.071,0-4.243s3.071-1.172,4.243,0S31.293,28.95,30.121,30.121z'/%3E%3Cg%3E%3Cpath style='fill:%23709fdc;' d='M35.778,35.778c-0.76,0.76-1.607,1.378-2.504,1.87l8.157,14.92c2.284-1.25,4.434-2.835,6.368-4.769 c1.934-1.934,3.519-4.084,4.769-6.368l-14.92-8.157C37.157,34.172,36.538,35.018,35.778,35.778z'/%3E%3Cpath style='fill:%23709fdc;' d='M20.222,20.222c0.76-0.76,1.607-1.378,2.504-1.87l-8.157-14.92c-2.284,1.25-4.434,2.835-6.368,4.769 s-3.519,4.084-4.769,6.368l14.92,8.157C18.843,21.828,19.462,20.982,20.222,20.222z'/%3E%3C/g%3E%3C/svg%3E"); } .audio_card .play-list .track.play-now .track-img { filter: opacity(70%); } .audio_card .play-list .track .track-img { width: 90px; border-radius: calc( 20px - 10px); } .audio_card .play-list .track .track-discr { margin-left: 15px; display: flex; flex-direction: column; min-width: 190px; } .audio_card .play-list .track .track-discr .track-name { font-size: 17px; margin-top: 8px; } .audio_card .play-list .track .track-discr .track-author { margin-top: 8px; font-weight: 300; color: #709fdc; } .audio_card .play-list .track .track-duration { min-width: 40px; margin-left: 10px; margin-right: 10px; font-weight: 500; } .fa-instagram { position: absolute; color: #071739; top: 3%; right: 2%; font-size: 38px; } .fa-instagram:hover { font-size: 42px; color: #fff; transition: all 0.1s linear; cursor: pointer; } .play-list::-webkit-scrollbar { width: 5px; } .play-list::-webkit-scrollbar-thumb { background: #fff; border-radius: 5px; } .play-list::-webkit-scrollbar-track { background: #071739; } @-webkit-keyframes play { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes play { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .audio-player{ min-width:300px !important; display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap; } .audio_card .current-song.playing .img-wrap { animation: rotateCover 15s linear infinite; animation-delay: -0s; /* Начинаем с текущего положения */ transform: rotate(var(--cover-start-angle, 0deg)); } .cover-paused { animation-play-state: paused; } @keyframes rotateCover { from { transform: rotate(var(--cover-start-angle, 0deg)); } to { transform: rotate(calc(var(--cover-start-angle, 0deg) + 360deg)); } } /* tablet/mobile audio layout — keep the <=575px wide style up to 1200px. */ @media (max-width: 1200px) { #messagesContainer .message:has(.qchat-audio-mini-player), #messagesContainer .message:has(.qchat-audio-mini-group), #messagesContainer .message:has(.qchat-file-bundle-group-audio), #messagesContainer .message:has(.qchat-file-bundle-list-audio) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #messagesContainer .message:has(.qchat-audio-mini-player) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-group) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-group-audio) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-list-audio) > .d-flex { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; gap: 6px !important; box-sizing: border-box !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-avatar, #messagesContainer .message:has(.qchat-audio-mini-group) .message-avatar, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-avatar, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-avatar { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble { flex: 1 1 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content, #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content, #messagesContainer .message:has(.qchat-audio-mini-group) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list-audio, #messagesContainer .message .qchat-audio-mini-player { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #messagesContainer .message .qchat-audio-mini-player { gap: 6px !important; padding: 6px !important; overflow: hidden !important; } #messagesContainer .message .qchat-audio-mini-meta, #messagesContainer .message .qchat-audio-mini-player .qchat-file-bundle-preview-meta { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; } #messagesContainer .message .qchat-audio-mini-progress, #messagesContainer .message .qchat-audio-mini-progress.time { width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-template-columns: auto minmax(72px, 1fr) auto !important; gap: 4px !important; font-size: 0.64rem !important; } #messagesContainer .message .qchat-audio-mini-progress .timeline { width: 100% !important; min-width: 72px !important; max-width: 100% !important; } #messagesContainer .message .qchat-audio-mini-controls { display: grid !important; grid-template-areas: "prev play next" "range range range" !important; grid-template-rows: 30px 16px !important; grid-template-columns: 24px 28px 24px !important; column-gap: 3px !important; row-gap: 2px !important; flex: 0 0 82px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; margin-left: auto !important; margin-bottom: 0 !important; align-self: center !important; opacity: 1 !important; transform: none !important; overflow: visible !important; pointer-events: auto !important; transition: none !important; } #messagesContainer .message .qchat-audio-mini-btn { width: 24px !important; height: 24px !important; font-size: 0.72rem !important; } #messagesContainer .message .qchat-audio-mini-play { width: 28px !important; height: 28px !important; } } /* The volume UI is intentionally not visible; wheel volume is handled on the mini-player itself. */ .qchat-audio-mini-player .qchat-audio-volume-wrap, .qchat-audio-mini-player .qchat-audio-mini-volume, .qchat-audio-mini-player .qchat-audio-volume-range, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-wrap, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-volume, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; } /* stable compact-audio width. Keep the <=575px wide layout up to 1200px and do not resize on click/focus/play. */ #messagesContainer .message:has(.qchat-audio-mini-player) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-group) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-group-audio) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-list-audio) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player:hover) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player.playing) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:hover) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.playing) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content, #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio, #messagesContainer .message .qchat-audio-mini-player, #messagesContainer .message .qchat-audio-mini-player:hover, #messagesContainer .message .qchat-audio-mini-player:focus-within, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open, #messagesContainer .message .qchat-audio-mini-player.playing { transition-property: background-color, box-shadow, transform !important; transition-duration: 0s !important; box-sizing: border-box !important; } #messagesContainer .message .qchat-audio-mini-player, #messagesContainer .message .qchat-audio-mini-player:hover, #messagesContainer .message .qchat-audio-mini-player:focus-within, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open, #messagesContainer .message .qchat-audio-mini-player.playing { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; align-items: center !important; overflow: hidden !important; } #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-meta, #messagesContainer .message .qchat-audio-mini-player .qchat-file-bundle-preview-meta { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; overflow: hidden !important; } #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress.time, #messagesContainer .message .qchat-audio-mini-player:hover .qchat-audio-mini-progress.time, #messagesContainer .message .qchat-audio-mini-player:focus-within .qchat-audio-mini-progress.time, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-progress.time, #messagesContainer .message .qchat-audio-mini-player.playing .qchat-audio-mini-progress.time { width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-template-columns: auto minmax(72px, 1fr) auto !important; } #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress .timeline { width: 100% !important; min-width: 72px !important; max-width: 100% !important; } .qchat-audio-mini-player .qchat-audio-mini-controls, .qchat-audio-mini-player:hover .qchat-audio-mini-controls, .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls, .qchat-audio-mini-player.playing .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player:hover .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player.playing .qchat-audio-mini-controls { display: grid !important; grid-template-areas: "prev play next" "range range range" !important; grid-template-rows: 30px 16px !important; grid-template-columns: 24px 28px 24px !important; column-gap: 3px !important; row-gap: 2px !important; flex: 0 0 82px !important; flex-basis: 82px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; margin-left: auto !important; margin-bottom: 0 !important; align-self: center !important; opacity: 1 !important; transform: none !important; overflow: visible !important; pointer-events: auto !important; transition: none !important; } .qchat-audio-mini-player .qchat-audio-volume-wrap, .qchat-audio-mini-player .qchat-audio-mini-volume, .qchat-audio-mini-player .qchat-audio-volume-range, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-wrap, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-volume, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; } @media (max-width: 1200px) { #messagesContainer { --qchat-audio-mini-collapsed-width: 100% !important; --qchat-audio-mini-controls-width: 82px !important; } #messagesContainer .message:has(.qchat-audio-mini-player), #messagesContainer .message:has(.qchat-audio-mini-group), #messagesContainer .message:has(.qchat-file-bundle-group-audio), #messagesContainer .message:has(.qchat-file-bundle-list-audio), #messagesContainer .message:has(.qchat-audio-mini-player) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-group) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-group-audio) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-list-audio) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player:hover) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player.playing) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:hover) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.playing) .message-bubble { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; box-sizing: border-box !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-avatar, #messagesContainer .message:has(.qchat-audio-mini-group) .message-avatar, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-avatar, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-avatar { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content, #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content, #messagesContainer .message:has(.qchat-audio-mini-group) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list-audio, #messagesContainer .message .qchat-audio-mini-player { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; transition: none !important; } #messagesContainer .message .qchat-audio-mini-player { gap: 6px !important; padding: 6px !important; } } /* cap compact audio player width at 464px while keeping narrow screens responsive. */ #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:hover) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.playing) .message-bubble { width: min(464px, 100%) !important; max-width: min(464px, 100%) !important; min-width: 0 !important; flex: 0 1 464px !important; box-sizing: border-box !important; overflow: hidden !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content, #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content, #messagesContainer .message:has(.qchat-audio-mini-group) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list-audio { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .qchat-audio-mini-group, .qchat-audio-mini-group .qchat-file-bundle-list, .qchat-file-bundle-list-audio, .qchat-file-bundle-group-audio, .qchat-audio-mini-player, .qchat-audio-mini-player:hover, .qchat-audio-mini-player:focus-within, .qchat-audio-mini-player.qchat-audio-controls-open, .qchat-audio-mini-player.playing, #messagesContainer .message .qchat-audio-mini-player, #messagesContainer .message .qchat-audio-mini-player:hover, #messagesContainer .message .qchat-audio-mini-player:focus-within, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open, #messagesContainer .message .qchat-audio-mini-player.playing, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player { width: 100% !important; max-width: 464px !important; min-width: 0 !important; box-sizing: border-box !important; } #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress.time, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress .timeline { max-width: 100% !important; min-width: 0 !important; } /* hard visual cap for compact audio. This must stay after the full-width responsive overrides. */ #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:hover) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.playing) .message-bubble { flex: 0 1 464px !important; flex-basis: 464px !important; width: 100% !important; max-width: 464px !important; min-width: 0 !important; inline-size: 100% !important; max-inline-size: 464px !important; box-sizing: border-box !important; overflow: hidden !important; } #messagesContainer .message.sent:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message.sent:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message.sent:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message.sent:has(.qchat-file-bundle-list-audio) .message-bubble { margin-left: auto !important; margin-right: 0 !important; } #messagesContainer .message.received:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message.received:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message.received:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message.received:has(.qchat-file-bundle-list-audio) .message-bubble { margin-left: 0 !important; margin-right: auto !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content, #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content, #messagesContainer .message:has(.qchat-audio-mini-group) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list-audio { width: 100% !important; max-width: 464px !important; min-width: 0 !important; inline-size: 100% !important; max-inline-size: 464px !important; box-sizing: border-box !important; overflow: hidden !important; } .qchat-audio-mini-group, .qchat-audio-mini-group .qchat-file-bundle-list, .qchat-file-bundle-list-audio, .qchat-file-bundle-group-audio, .qchat-audio-mini-player, .qchat-audio-mini-player:hover, .qchat-audio-mini-player:focus-within, .qchat-audio-mini-player.qchat-audio-controls-open, .qchat-audio-mini-player.playing, #messagesContainer .message .qchat-audio-mini-player, #messagesContainer .message .qchat-audio-mini-player:hover, #messagesContainer .message .qchat-audio-mini-player:focus-within, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open, #messagesContainer .message .qchat-audio-mini-player.playing, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player { flex: 0 1 464px !important; width: 100% !important; max-width: 464px !important; min-width: 0 !important; inline-size: 100% !important; max-inline-size: 464px !important; box-sizing: border-box !important; overflow: hidden !important; } #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-meta, #messagesContainer .message .qchat-audio-mini-player .qchat-file-bundle-preview-meta, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress.time, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress .timeline { max-width: 100% !important; min-width: 0 !important; } @media (max-width: 520px) { #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content, #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content, .qchat-audio-mini-group, .qchat-file-bundle-list-audio, .qchat-file-bundle-group-audio, .qchat-audio-mini-player, #messagesContainer .message .qchat-audio-mini-player { max-width: 100% !important; max-inline-size: 100% !important; } } /* keep avatars uniform on tablet/desktop. Audio messages were inheriting the compact 30px avatar from audio-only responsive rules. */ @media (min-width: 768px) { #messagesContainer .message .message-avatar, #messagesContainer .message:has(.qchat-audio-mini-player) .message-avatar, #messagesContainer .message:has(.qchat-audio-mini-group) .message-avatar, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-avatar, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-avatar, #messagesContainer .message .avatar-placeholder.encrypted-message-avatar, #messagesContainer .message:has(.qchat-audio-mini-player) .avatar-placeholder.encrypted-message-avatar, #messagesContainer .message:has(.qchat-audio-mini-group) .avatar-placeholder.encrypted-message-avatar, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .avatar-placeholder.encrypted-message-avatar, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .avatar-placeholder.encrypted-message-avatar { width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; flex: 0 0 48px !important; flex-basis: 48px !important; inline-size: 48px !important; block-size: 48px !important; object-fit: cover !important; box-sizing: border-box !important; } } /* keep the classic audio player at its original 300px max width. Inline renderers can set width/max-width:100% !important on .audio_card, so logical max-inline-size is used as an additional hard visual cap. */ .audio_card.qchat-audio-classic-card, .qchat-audio-classic-card, .qchat-audio-classic-card .qchat-audio-classic-player, .audio_card.qchat-audio-classic-card .current-song, .audio_card.qchat-audio-classic-card .qchat-audio-classic-player, .qchat-audio-classic-player, .blog-audio-current.qchat-audio-classic-player { width: min(300px, 100%) !important; max-width: 300px !important; min-width: 0 !important; inline-size: min(300px, 100%) !important; max-inline-size: 300px !important; min-inline-size: 0 !important; box-sizing: border-box !important; } .audio_card.qchat-audio-classic-card, .qchat-audio-classic-card { flex: 0 1 300px !important; align-self: flex-start !important; justify-self: start !important; } .audio_card.qchat-audio-classic-card .qchat-audio-classic-player, .qchat-audio-classic-card .qchat-audio-classic-player, .qchat-audio-classic-player, .blog-audio-current.qchat-audio-classic-player { margin-left: 0 !important; margin-right: auto !important; overflow: hidden !important; } .audio_card.qchat-audio-classic-card .song-name, .audio_card.qchat-audio-classic-card .song-autor, .qchat-audio-classic-player .song-name, .qchat-audio-classic-player .song-autor { max-width: calc(300px - 24px) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; box-sizing: border-box !important; } @media (max-width: 300px) { .audio_card.qchat-audio-classic-card, .qchat-audio-classic-card, .qchat-audio-classic-card .qchat-audio-classic-player, .audio_card.qchat-audio-classic-card .current-song, .audio_card.qchat-audio-classic-card .qchat-audio-classic-player, .qchat-audio-classic-player, .blog-audio-current.qchat-audio-classic-player { width: 100% !important; max-width: 100% !important; inline-size: 100% !important; max-inline-size: 100% !important; flex-basis: 100% !important; } } /* keep the classic audio player compact inside Profile Blog too. Blog renderers may set width/max-width:100% !important on .audio_card; cap the blog audio lane wrappers so the inline 100% resolves to 300px. */ :root { --qchat-classic-audio-max-width: 300px; } .profile-blog-post .profile-blog-attachments:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-file-bundle-message:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-file-bundle-groups:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-audio-group:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-audio-list:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-audio-attachment:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-attachment-preview:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .qchat-file-bundle-group-audio:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .qchat-file-bundle-list-audio:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .qchat-file-bundle-item-audio:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .qchat-file-bundle-preview-item:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .qchat-file-bundle-item:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-attachment:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-file-list:has(.audio_card.qchat-audio-classic-card) { width: min(var(--qchat-classic-audio-max-width), 100%) !important; max-width: var(--qchat-classic-audio-max-width) !important; min-width: 0 !important; flex: 0 1 var(--qchat-classic-audio-max-width) !important; flex-basis: var(--qchat-classic-audio-max-width) !important; justify-self: start !important; align-self: flex-start !important; box-sizing: border-box !important; } .profile-blog-post .audio_card.qchat-audio-classic-card, .profile-blog-post .qchat-audio-classic-card, .profile-blog-post .audio_card.qchat-audio-classic-card .current-song, .profile-blog-post .audio_card.qchat-audio-classic-card .qchat-audio-classic-player, .profile-blog-post .qchat-audio-classic-player, .profile-blog-post .blog-audio-current.qchat-audio-classic-player, .profile-blog-audio-section .audio_card.qchat-audio-classic-card, .profile-blog-audio-section .qchat-audio-classic-player, .profile-blog-attachment-preview .audio_card.qchat-audio-classic-card, .profile-blog-attachment-preview .qchat-audio-classic-player { width: min(var(--qchat-classic-audio-max-width), 100%) !important; max-width: var(--qchat-classic-audio-max-width) !important; min-width: 0 !important; flex: 0 1 var(--qchat-classic-audio-max-width) !important; flex-basis: var(--qchat-classic-audio-max-width) !important; justify-self: start !important; align-self: flex-start !important; margin-left: 0 !important; margin-right: auto !important; box-sizing: border-box !important; overflow: hidden !important; } .profile-blog-post .audio_card.qchat-audio-classic-card .song-name, .profile-blog-post .audio_card.qchat-audio-classic-card .song-autor, .profile-blog-post .qchat-audio-classic-player .song-name, .profile-blog-post .qchat-audio-classic-player .song-autor, .profile-blog-audio-section .qchat-audio-classic-player .song-name, .profile-blog-audio-section .qchat-audio-classic-player .song-autor { max-width: calc(var(--qchat-classic-audio-max-width) - 24px) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; box-sizing: border-box !important; } @media (max-width: 300px) { .profile-blog-post .profile-blog-attachments:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-file-bundle-message:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-file-bundle-groups:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-audio-group:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-audio-list:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-audio-attachment:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-attachment-preview:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .qchat-file-bundle-group-audio:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .qchat-file-bundle-list-audio:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .qchat-file-bundle-item-audio:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .qchat-file-bundle-preview-item:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .qchat-file-bundle-item:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-attachment:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .profile-blog-file-list:has(.audio_card.qchat-audio-classic-card), .profile-blog-post .audio_card.qchat-audio-classic-card, .profile-blog-post .qchat-audio-classic-card, .profile-blog-post .audio_card.qchat-audio-classic-card .current-song, .profile-blog-post .audio_card.qchat-audio-classic-card .qchat-audio-classic-player, .profile-blog-post .qchat-audio-classic-player, .profile-blog-post .blog-audio-current.qchat-audio-classic-player, .profile-blog-audio-section .audio_card.qchat-audio-classic-card, .profile-blog-audio-section .qchat-audio-classic-player, .profile-blog-attachment-preview .audio_card.qchat-audio-classic-card, .profile-blog-attachment-preview .qchat-audio-classic-player { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; } } /* QChat static player runtime styles */ /* Migrated from playerjs.js; player runtime no longer injects styles. */ /* audio volume/playback OSD */ #qchatAudioVolumeOsd { position: fixed !important; right: 28px !important; bottom: 28px !important; z-index: 2147483647 !important; min-width: 178px !important; padding: 18px 20px 16px !important; border-radius: 22px !important; background: rgba(12, 18, 28, 0.88) !important; color: #fff !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34) !important; backdrop-filter: blur(14px) saturate(1.35) !important; -webkit-backdrop-filter: blur(14px) saturate(1.35) !important; opacity: 0 !important; transform: translate3d(0, 18px, 0) scale(0.94) !important; transition: opacity 150ms ease, transform 170ms cubic-bezier(.2,.8,.2,1) !important; pointer-events: none !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; text-align: center !important; } #qchatAudioVolumeOsd.qchat-audio-volume-osd-visible { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; } #qchatAudioVolumeOsd .qchat-audio-volume-osd-label { font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; opacity: 0.78 !important; margin-bottom: 8px !important; } #qchatAudioVolumeOsd .qchat-audio-volume-osd-value { font-size: 48px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -0.04em !important; } #qchatAudioVolumeOsd .qchat-audio-volume-osd-bar { width: 100% !important; height: 9px !important; margin-top: 14px !important; overflow: hidden !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.22) !important; } #qchatAudioVolumeOsd .qchat-audio-volume-osd-fill { display: block !important; width: 100% !important; height: 100% !important; border-radius: inherit !important; background: rgba(255, 255, 255, 0.92) !important; transform-origin: left center !important; transform: scaleX(var(--qchat-audio-volume-osd-progress, 1)) !important; transition: transform 90ms ease !important; } #qchatAudioVolumeOsd .qchat-audio-volume-osd-icon { display: none !important; font-size: 36px !important; line-height: 1 !important; margin-bottom: 10px !important; text-align: center !important; } #qchatAudioVolumeOsd .qchat-audio-volume-osd-subtitle { display: none !important; margin-top: 8px !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.22 !important; opacity: 0.84 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd { min-width: 288px !important; max-width: min(380px, calc(100vw - 40px)) !important; padding: 18px 20px 17px !important; text-align: left !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd .qchat-audio-volume-osd-icon { display: block !important; text-align: left !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd .qchat-audio-volume-osd-label { margin-bottom: 7px !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd .qchat-audio-volume-osd-value { font-size: 30px !important; font-weight: 900 !important; line-height: 1.12 !important; letter-spacing: -0.025em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd .qchat-audio-volume-osd-subtitle { display: block !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd.qchat-audio-track-osd { left: auto !important; right: 28px !important; width: auto !important; min-width: 288px !important; max-width: min(500px, calc(100vw - 56px)) !important; padding: 13px 18px 14px !important; border-radius: 18px !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd.qchat-audio-track-osd .qchat-audio-volume-osd-label { font-size: 10px !important; margin-bottom: 4px !important; letter-spacing: 0.055em !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd.qchat-audio-track-osd .qchat-audio-volume-osd-value { font-size: 18px !important; line-height: 1.16 !important; letter-spacing: -0.012em !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd.qchat-audio-track-osd .qchat-audio-volume-osd-subtitle { margin-top: 4px !important; font-size: 12px !important; line-height: 1.16 !important; font-weight: 600 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd.qchat-audio-track-osd .qchat-audio-volume-osd-icon { font-size: 23px !important; margin-bottom: 5px !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd .qchat-audio-volume-osd-bar { display: none !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd.qchat-audio-pause-osd { min-width: 178px !important; max-width: min(240px, calc(100vw - 40px)) !important; text-align: center !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd.qchat-audio-pause-osd .qchat-audio-volume-osd-icon { display: block !important; text-align: center !important; font-size: 23px !important; margin-bottom: 5px !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd.qchat-audio-pause-osd .qchat-audio-volume-osd-label, #qchatAudioVolumeOsd.qchat-audio-playback-osd.qchat-audio-pause-osd .qchat-audio-volume-osd-subtitle { display: none !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd.qchat-audio-pause-osd .qchat-audio-volume-osd-value { font-size: 18px !important; line-height: 1.16 !important; letter-spacing: -0.012em !important; text-align: center !important; } @media (max-width: 640px) { #qchatAudioVolumeOsd.qchat-audio-playback-osd.qchat-audio-pause-osd .qchat-audio-volume-osd-value { font-size: 16px !important; } } @media (max-width: 640px) { #qchatAudioVolumeOsd { right: 16px !important; bottom: 18px !important; min-width: 150px !important; padding: 15px 16px 14px !important; border-radius: 19px !important; } #qchatAudioVolumeOsd .qchat-audio-volume-osd-value { font-size: 40px !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd.qchat-audio-track-osd { left: auto !important; right: 10px !important; bottom: 12px !important; width: auto !important; min-width: 0 !important; max-width: calc(100vw - 20px) !important; padding: 11px 13px 12px !important; border-radius: 16px !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd.qchat-audio-track-osd .qchat-audio-volume-osd-value { font-size: 16px !important; } #qchatAudioVolumeOsd.qchat-audio-playback-osd.qchat-audio-track-osd .qchat-audio-volume-osd-subtitle { font-size: 11px !important; } } /* chat audio navigation/current-track */ @keyframes qchatAudioCoverSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes qchatAudioTitleMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 16px)); } } .current-song.chat-audio-current, .current-song.blog-audio-current { border-radius: 14px; } .qchat-audio-mini-player.qchat-audio-click-toggle-ready { cursor: pointer !important; } .qchat-audio-mini-player.qchat-audio-click-toggle-ready .qchat-audio-mini-controls, .qchat-audio-mini-player.qchat-audio-click-toggle-ready .qchat-audio-mini-progress, .qchat-audio-mini-player.qchat-audio-click-toggle-ready .qchat-audio-mini-cover, .qchat-audio-mini-player.qchat-audio-click-toggle-ready .qchat-audio-cover-preview { cursor: auto !important; } .qchat-audio-mini-player.qchat-audio-click-toggle-ready .timeline { cursor: pointer !important; } .qchat-audio-mini-player .qchat-audio-mini-art { border-radius: 999px !important; overflow: hidden !important; transform-origin: center center !important; will-change: transform; } .qchat-audio-mini-player .qchat-audio-mini-cover, .qchat-audio-mini-player .qchat-audio-cover-preview { width: 100% !important; height: 100% !important; border-radius: 999px !important; object-fit: cover !important; display: block !important; transform-origin: center center !important; } .qchat-audio-mini-player.playing .qchat-audio-mini-art { animation: qchatAudioCoverSpin 6s linear infinite !important; } .qchat-audio-mini-player .song-name, .qchat-audio-mini-player .song-autor { position: relative !important; overflow: hidden !important; white-space: nowrap !important; } .qchat-audio-mini-player .song-name .qchat-audio-title-marquee, .qchat-audio-mini-player .song-autor .qchat-audio-title-marquee { display: inline-flex !important; min-width: max-content !important; gap: 32px !important; will-change: transform; } .qchat-audio-mini-player .song-name .qchat-audio-title-copy, .qchat-audio-mini-player .song-autor .qchat-audio-title-copy { flex: 0 0 auto !important; white-space: nowrap !important; } .qchat-audio-mini-player .song-name .qchat-audio-title-copy-clone, .qchat-audio-mini-player .song-autor .qchat-audio-title-copy-clone { display: none !important; } .qchat-audio-mini-player.playing .song-name.qchat-audio-title-overflow .qchat-audio-title-copy-clone, .qchat-audio-mini-player.playing .song-autor.qchat-audio-title-overflow .qchat-audio-title-copy-clone { display: inline-block !important; } .qchat-audio-mini-player.playing .song-name.qchat-audio-title-overflow .qchat-audio-title-marquee, .qchat-audio-mini-player.playing .song-autor.qchat-audio-title-overflow .qchat-audio-title-marquee { animation: qchatAudioTitleMarquee var(--qchat-title-marquee-duration, 12s) linear infinite !important; } .qchat-audio-mini-player .qchat-audio-mini-controls { display: grid !important; grid-template-columns: 24px 28px 24px !important; grid-template-areas: "prev play next" "range range range" !important; align-items: center !important; justify-items: center !important; column-gap: 3px !important; row-gap: 3px !important; flex: 0 0 82px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; max-height: none !important; margin-left: auto !important; margin-bottom: 5px !important; align-self: flex-end !important; overflow: visible !important; opacity: 1 !important; transform: none !important; transform-origin: left center !important; pointer-events: auto !important; transition: none !important; } .qchat-audio-mini-player .qchat-audio-volume-wrap { display: contents !important; } .qchat-audio-mini-player .qchat-audio-mini-volume { display: none !important; } .qchat-audio-mini-player .prev { grid-area: prev !important; } .qchat-audio-mini-player .play { grid-area: play !important; } .qchat-audio-mini-player .next { grid-area: next !important; } .qchat-audio-mini-player .qchat-audio-volume-range { grid-area: range !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 4px !important; opacity: 1 !important; transform: none !important; transition: opacity 170ms ease !important; cursor: pointer !important; } .qchat-audio-mini-player:hover .qchat-audio-mini-controls, .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls { opacity: 1 !important; max-width: 82px !important; max-height: none !important; transform: none !important; pointer-events: auto !important; } .current-song .prev[disabled], .current-song .next[disabled] { opacity: 0.45 !important; cursor: not-allowed !important; } @media (prefers-reduced-motion: reduce) { .qchat-audio-mini-player.playing .qchat-audio-mini-art, .qchat-audio-mini-player.playing .song-name.qchat-audio-title-overflow .qchat-audio-title-marquee, .qchat-audio-mini-player.playing .song-autor.qchat-audio-title-overflow .qchat-audio-title-marquee { animation: none !important; } } .message.audio-jump-focus .message-bubble, [data-message-id].audio-jump-focus .message-bubble, .profile-blog-attachment.audio-jump-focus, .profile-blog-post.audio-jump-focus { box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25); transition: box-shadow 0.2s ease; } .qchat-audio-mini-group, .qchat-audio-mini-group .qchat-file-bundle-list, .qchat-audio-mini-player, #messagesContainer .message .qchat-audio-mini-group, #messagesContainer .message .qchat-audio-mini-player, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .qchat-audio-mini-player .qchat-file-bundle-preview-icon, .qchat-audio-mini-player .qchat-audio-mini-art, .qchat-audio-mini-player .qchat-audio-mini-cover, #messagesContainer .message .qchat-audio-mini-player .qchat-file-bundle-preview-icon, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-art, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-cover, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-art, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-cover { width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; flex: 0 0 48px !important; flex-basis: 48px !important; } .qchat-audio-mini-player .qchat-audio-mini-cover, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-cover, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-cover { object-fit: cover !important; display: block !important; } .qchat-audio-mini-player .qchat-audio-mini-controls, .qchat-audio-mini-player .qchat-audio-mini-controls.controls, .qchat-audio-mini-player .qchat-audio-mini-controls.qchat-audio-controls-fixed, .qchat-audio-mini-player .qchat-audio-mini-controls.qchat-audio-controls-stacked, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls { display: grid !important; grid-template-columns: 24px 28px 24px !important; grid-template-areas: "prev play next" "range range range" !important; align-items: center !important; justify-items: center !important; column-gap: 3px !important; row-gap: 3px !important; flex: 0 0 82px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; max-height: none !important; height: auto !important; margin-left: auto !important; margin-bottom: 5px !important; align-self: flex-end !important; overflow: visible !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; transition: none !important; } .qchat-audio-mini-player:hover .qchat-audio-mini-controls, .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player:hover .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player:hover .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls { max-width: 82px !important; max-height: none !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } .qchat-audio-mini-player .qchat-audio-mini-controls .prev, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .prev, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls .prev { grid-area: prev !important; display: inline-flex !important; } .qchat-audio-mini-player .qchat-audio-mini-controls .play, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .play, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls .play { grid-area: play !important; display: inline-flex !important; } .qchat-audio-mini-player .qchat-audio-mini-controls .next, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .next, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls .next { grid-area: next !important; display: inline-flex !important; } .qchat-audio-mini-player .qchat-audio-volume-wrap, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-wrap, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-volume-wrap { grid-area: range !important; display: block !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 4px !important; min-height: 4px !important; line-height: 0 !important; align-self: end !important; transform: translateY(var(--qchat-volume-align-y, 0px)) !important; will-change: transform !important; } .qchat-audio-mini-player .qchat-audio-mini-volume, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-volume, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-volume { display: none !important; } .qchat-audio-mini-player .qchat-audio-volume-range, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-volume-range { grid-area: range !important; display: block !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 4px !important; min-height: 4px !important; padding: 0 !important; margin: 0 !important; opacity: 1 !important; transform: none !important; appearance: none !important; -webkit-appearance: none !important; background: transparent !important; cursor: pointer !important; } .qchat-audio-mini-player .qchat-audio-volume-range::-webkit-slider-runnable-track, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range::-webkit-slider-runnable-track, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-volume-range::-webkit-slider-runnable-track { height: 4px !important; border-radius: 999px !important; background: rgba(0,0,0,0.16) !important; } .qchat-audio-mini-player .qchat-audio-volume-range::-webkit-slider-thumb, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range::-webkit-slider-thumb, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-volume-range::-webkit-slider-thumb { -webkit-appearance: none !important; width: 12px !important; height: 12px !important; margin-top: -4px !important; border: 0 !important; border-radius: 999px !important; background: #0d6efd !important; } .qchat-audio-mini-player .qchat-audio-volume-range::-moz-range-track, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range::-moz-range-track, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-volume-range::-moz-range-track { height: 4px !important; border-radius: 999px !important; background: rgba(0,0,0,0.16) !important; } .qchat-audio-mini-player .qchat-audio-volume-range::-moz-range-thumb, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range::-moz-range-thumb, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-volume-range::-moz-range-thumb { width: 12px !important; height: 12px !important; border: 0 !important; border-radius: 999px !important; background: #0d6efd !important; } /* final compact audio layout override — no slide-out controls, full-width player. */ #messagesContainer .message:has(.qchat-audio-mini-player) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-group) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-group-audio) > .d-flex { width: var(--qchat-message-lane-width, 50%) !important; max-width: var(--qchat-message-lane-width, 50%) !important; min-width: 0 !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble { flex: 1 1 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content, #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .qchat-audio-mini-group, .qchat-audio-mini-group .qchat-file-bundle-list, .qchat-audio-mini-player, #messagesContainer .message .qchat-audio-mini-player, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; box-sizing: border-box !important; } .qchat-audio-mini-player .qchat-file-bundle-preview-meta, .qchat-audio-mini-player .qchat-audio-mini-meta { flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important; } .qchat-audio-mini-player .qchat-file-bundle-preview-icon, .qchat-audio-mini-player .qchat-audio-mini-art, .qchat-audio-mini-player .qchat-audio-mini-cover, #messagesContainer .message .qchat-audio-mini-player .qchat-file-bundle-preview-icon, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-art, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-cover, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-art, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-cover { width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; flex: 0 0 48px !important; object-fit: cover !important; } .qchat-audio-mini-player .qchat-audio-mini-controls, .qchat-audio-mini-player .qchat-audio-mini-controls.controls, .qchat-audio-mini-player .qchat-audio-mini-controls.qchat-audio-controls-fixed, .qchat-audio-mini-player .qchat-audio-mini-controls.qchat-audio-controls-stacked, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls { display: grid !important; grid-template-columns: 24px 28px 24px !important; grid-template-areas: "prev play next" "range range range" !important; align-items: center !important; justify-items: center !important; column-gap: 3px !important; row-gap: 3px !important; flex: 0 0 82px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: auto !important; max-height: none !important; margin-left: auto !important; margin-bottom: 5px !important; align-self: flex-end !important; overflow: visible !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; transition: none !important; } .qchat-audio-mini-player:hover .qchat-audio-mini-controls, .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player:hover .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player:hover .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls { width: 82px !important; min-width: 82px !important; max-width: 82px !important; max-height: none !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } .qchat-audio-mini-player .qchat-audio-mini-controls .prev, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .prev, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls .prev { grid-area: prev !important; display: inline-flex !important; } .qchat-audio-mini-player .qchat-audio-mini-controls .play, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .play, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls .play { grid-area: play !important; display: inline-flex !important; } .qchat-audio-mini-player .qchat-audio-mini-controls .next, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .next, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls .next { grid-area: next !important; display: inline-flex !important; } .qchat-audio-mini-player .qchat-audio-volume-wrap, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-wrap, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-volume-wrap { grid-area: range !important; display: block !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 4px !important; min-height: 4px !important; line-height: 0 !important; align-self: end !important; transform: translateY(var(--qchat-volume-align-y, 0px)) !important; will-change: transform !important; } .qchat-audio-mini-player .qchat-audio-mini-volume, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-volume, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-volume { display: none !important; } .qchat-audio-mini-player .qchat-audio-volume-range, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-volume-range { grid-area: range !important; display: block !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 4px !important; min-height: 4px !important; padding: 0 !important; margin: 0 !important; opacity: 1 !important; transform: none !important; appearance: none !important; -webkit-appearance: none !important; background: transparent !important; cursor: pointer !important; } @media (max-width: 575.98px) { /* audio messages need the full mobile row width, not the desktop 50% lane. */ #messagesContainer .message:has(.qchat-audio-mini-player) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-group) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-group-audio) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-list-audio) > .d-flex { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; box-sizing: border-box !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble { flex: 1 1 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content, #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-player { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #messagesContainer .message .qchat-audio-mini-player { width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 6px !important; padding: 6px !important; } #messagesContainer .message .qchat-audio-mini-meta, #messagesContainer .message .qchat-audio-mini-player .qchat-file-bundle-preview-meta { flex: 1 1 0 !important; min-width: 0 !important; } #messagesContainer .message .qchat-audio-mini-progress .timeline { min-width: 72px !important; width: 100% !important; } } .qchat-audio-mini-player, #messagesContainer .message .qchat-audio-mini-player, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .qchat-audio-mini-player .qchat-file-bundle-preview-meta, .qchat-audio-mini-player .qchat-audio-mini-meta, #messagesContainer .message .qchat-audio-mini-player .qchat-file-bundle-preview-meta, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-meta, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-file-bundle-preview-meta, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-meta { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; } .qchat-audio-mini-player .qchat-audio-mini-progress, .qchat-audio-mini-player .qchat-audio-mini-progress.time, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress.time, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-progress, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-progress.time { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .qchat-audio-mini-player .qchat-audio-mini-progress .timeline, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress .timeline, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-progress .timeline { width: 100% !important; min-width: 72px !important; max-width: 100% !important; } .qchat-audio-mini-player .qchat-audio-mini-controls, .qchat-audio-mini-player .qchat-audio-mini-controls.controls, .qchat-audio-mini-player .qchat-audio-mini-controls.qchat-audio-controls-fixed, .qchat-audio-mini-player .qchat-audio-mini-controls.qchat-audio-controls-stacked, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls { display: grid !important; grid-template-columns: 24px 28px 24px !important; grid-template-areas: "prev play next" "range range range" !important; grid-template-rows: 30px 16px !important; align-items: center !important; justify-items: center !important; column-gap: 3px !important; row-gap: 2px !important; flex: 0 0 82px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; margin-left: auto !important; margin-bottom: 0 !important; align-self: center !important; overflow: visible !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; transition: none !important; } .qchat-audio-mini-player:hover .qchat-audio-mini-controls, .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player:hover .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player:hover .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls { width: 82px !important; min-width: 82px !important; max-width: 82px !important; max-height: 30px !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } .qchat-audio-mini-player .qchat-audio-volume-wrap, .qchat-audio-mini-player .qchat-audio-mini-volume, .qchat-audio-mini-player .qchat-audio-volume-range, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-wrap, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-volume, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-volume-wrap, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-volume, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-volume-range { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; transform: none !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list-audio { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } @media (max-width: 991.98px) { #messagesContainer .message:has(.qchat-audio-mini-player) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-group) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-group-audio) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-list-audio) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; box-sizing: border-box !important; } } /* stable compact-audio width. Keep the <=575px wide layout up to 1200px and do not resize on click/focus/play. */ #messagesContainer .message:has(.qchat-audio-mini-player) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-group) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-group-audio) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-list-audio) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player:hover) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player.playing) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:hover) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.playing) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content, #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio, #messagesContainer .message .qchat-audio-mini-player, #messagesContainer .message .qchat-audio-mini-player:hover, #messagesContainer .message .qchat-audio-mini-player:focus-within, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open, #messagesContainer .message .qchat-audio-mini-player.playing { transition-property: background-color, box-shadow, transform !important; transition-duration: 0s !important; box-sizing: border-box !important; } #messagesContainer .message .qchat-audio-mini-player, #messagesContainer .message .qchat-audio-mini-player:hover, #messagesContainer .message .qchat-audio-mini-player:focus-within, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open, #messagesContainer .message .qchat-audio-mini-player.playing { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; align-items: center !important; overflow: hidden !important; } #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-meta, #messagesContainer .message .qchat-audio-mini-player .qchat-file-bundle-preview-meta { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; overflow: hidden !important; } #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress.time, #messagesContainer .message .qchat-audio-mini-player:hover .qchat-audio-mini-progress.time, #messagesContainer .message .qchat-audio-mini-player:focus-within .qchat-audio-mini-progress.time, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-progress.time, #messagesContainer .message .qchat-audio-mini-player.playing .qchat-audio-mini-progress.time { width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-template-columns: auto minmax(72px, 1fr) auto !important; } #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress .timeline { width: 100% !important; min-width: 72px !important; max-width: 100% !important; } .qchat-audio-mini-player .qchat-audio-mini-controls, .qchat-audio-mini-player:hover .qchat-audio-mini-controls, .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls, .qchat-audio-mini-player.playing .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player:hover .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player.playing .qchat-audio-mini-controls { display: grid !important; grid-template-areas: "prev play next" "range range range" !important; grid-template-rows: 30px 16px !important; grid-template-columns: 24px 28px 24px !important; column-gap: 3px !important; row-gap: 2px !important; flex: 0 0 82px !important; flex-basis: 82px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; margin-left: auto !important; margin-bottom: 0 !important; align-self: center !important; opacity: 1 !important; transform: none !important; overflow: visible !important; pointer-events: auto !important; transition: none !important; } .qchat-audio-mini-player .qchat-audio-volume-wrap, .qchat-audio-mini-player .qchat-audio-mini-volume, .qchat-audio-mini-player .qchat-audio-volume-range, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-wrap, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-volume, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; } @media (max-width: 1200px) { #messagesContainer { --qchat-audio-mini-collapsed-width: 100% !important; --qchat-audio-mini-controls-width: 82px !important; } #messagesContainer .message:has(.qchat-audio-mini-player), #messagesContainer .message:has(.qchat-audio-mini-group), #messagesContainer .message:has(.qchat-file-bundle-group-audio), #messagesContainer .message:has(.qchat-file-bundle-list-audio), #messagesContainer .message:has(.qchat-audio-mini-player) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-group) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-group-audio) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-list-audio) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player:hover) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player.playing) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:hover) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.playing) .message-bubble { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; box-sizing: border-box !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-avatar, #messagesContainer .message:has(.qchat-audio-mini-group) .message-avatar, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-avatar, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-avatar { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content, #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content, #messagesContainer .message:has(.qchat-audio-mini-group) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list-audio, #messagesContainer .message .qchat-audio-mini-player { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; transition: none !important; } #messagesContainer .message .qchat-audio-mini-player { gap: 6px !important; padding: 6px !important; } } /* hard visual cap for compact audio. This must stay after the full-width responsive overrides. */ #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:hover) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.playing) .message-bubble { flex: 0 1 500px !important; flex-basis: 500px !important; width: 100% !important; max-width: 500px !important; min-width: 0 !important; inline-size: 100% !important; max-inline-size: 500px !important; box-sizing: border-box !important; overflow: hidden !important; } #messagesContainer .message.sent:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message.sent:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message.sent:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message.sent:has(.qchat-file-bundle-list-audio) .message-bubble { margin-left: auto !important; margin-right: 0 !important; } #messagesContainer .message.received:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message.received:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message.received:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message.received:has(.qchat-file-bundle-list-audio) .message-bubble { margin-left: 0 !important; margin-right: auto !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content, #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content, #messagesContainer .message:has(.qchat-audio-mini-group) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list-audio { width: 100% !important; max-width: 500px !important; min-width: 0 !important; inline-size: 100% !important; max-inline-size: 500px !important; box-sizing: border-box !important; overflow: hidden !important; } .qchat-audio-mini-group, .qchat-audio-mini-group .qchat-file-bundle-list, .qchat-file-bundle-list-audio, .qchat-file-bundle-group-audio, .qchat-audio-mini-player, .qchat-audio-mini-player:hover, .qchat-audio-mini-player:focus-within, .qchat-audio-mini-player.qchat-audio-controls-open, .qchat-audio-mini-player.playing, #messagesContainer .message .qchat-audio-mini-player, #messagesContainer .message .qchat-audio-mini-player:hover, #messagesContainer .message .qchat-audio-mini-player:focus-within, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open, #messagesContainer .message .qchat-audio-mini-player.playing, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player { flex: 0 1 500px !important; width: 100% !important; max-width: 500px !important; min-width: 0 !important; inline-size: 100% !important; max-inline-size: 500px !important; box-sizing: border-box !important; overflow: hidden !important; } #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-meta, #messagesContainer .message .qchat-audio-mini-player .qchat-file-bundle-preview-meta, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress.time, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress .timeline { max-width: 100% !important; min-width: 0 !important; } @media (max-width: 520px) { #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content, #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content, .qchat-audio-mini-group, .qchat-file-bundle-list-audio, .qchat-file-bundle-group-audio, .qchat-audio-mini-player, #messagesContainer .message .qchat-audio-mini-player { max-width: 100% !important; max-inline-size: 100% !important; } } /* tablet/mobile audio layout — keep the <=575px wide style up to 1200px. */ @media (max-width: 1200px) { #messagesContainer .message:has(.qchat-audio-mini-player), #messagesContainer .message:has(.qchat-audio-mini-group), #messagesContainer .message:has(.qchat-file-bundle-group-audio), #messagesContainer .message:has(.qchat-file-bundle-list-audio) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #messagesContainer .message:has(.qchat-audio-mini-player) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-group) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-group-audio) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-list-audio) > .d-flex { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; gap: 6px !important; box-sizing: border-box !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-avatar, #messagesContainer .message:has(.qchat-audio-mini-group) .message-avatar, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-avatar, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-avatar { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble { flex: 1 1 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content, #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content, #messagesContainer .message:has(.qchat-audio-mini-group) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list-audio, #messagesContainer .message .qchat-audio-mini-player { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #messagesContainer .message .qchat-audio-mini-player { gap: 6px !important; padding: 6px !important; overflow: hidden !important; } #messagesContainer .message .qchat-audio-mini-meta, #messagesContainer .message .qchat-audio-mini-player .qchat-file-bundle-preview-meta { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; } #messagesContainer .message .qchat-audio-mini-progress, #messagesContainer .message .qchat-audio-mini-progress.time { width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-template-columns: auto minmax(72px, 1fr) auto !important; gap: 4px !important; font-size: 0.64rem !important; } #messagesContainer .message .qchat-audio-mini-progress .timeline { width: 100% !important; min-width: 72px !important; max-width: 100% !important; } #messagesContainer .message .qchat-audio-mini-controls { display: grid !important; grid-template-areas: "prev play next" "range range range" !important; grid-template-rows: 30px 16px !important; grid-template-columns: 24px 28px 24px !important; column-gap: 3px !important; row-gap: 2px !important; flex: 0 0 82px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; margin-left: auto !important; margin-bottom: 0 !important; align-self: center !important; opacity: 1 !important; transform: none !important; overflow: visible !important; pointer-events: auto !important; transition: none !important; } #messagesContainer .message .qchat-audio-mini-btn { width: 24px !important; height: 24px !important; font-size: 0.72rem !important; } #messagesContainer .message .qchat-audio-mini-play { width: 28px !important; height: 28px !important; } } /* The volume UI is intentionally not visible; wheel volume is handled on the mini-player itself. */ .qchat-audio-mini-player .qchat-audio-volume-wrap, .qchat-audio-mini-player .qchat-audio-mini-volume, .qchat-audio-mini-player .qchat-audio-volume-range, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-wrap, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-volume, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; } /* cap compact audio player width at 500px while keeping narrow screens responsive. */ #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:hover) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player:focus-within) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.qchat-audio-controls-open) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player.playing) .message-bubble { width: min(500px, 100%) !important; max-width: min(500px, 100%) !important; min-width: 0 !important; flex: 0 1 500px !important; box-sizing: border-box !important; overflow: hidden !important; } #messagesContainer .message:has(.qchat-audio-mini-player) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-player) .message-content, #messagesContainer .message:has(.qchat-audio-mini-player) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-player) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content-wrapper, #messagesContainer .message:has(.qchat-audio-mini-group) .message-content, #messagesContainer .message:has(.qchat-audio-mini-group) .decrypted-file-content, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-audio-mini-group) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .qchat-file-bundle-list-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content-wrapper, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .decrypted-file-content, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-message, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-groups, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-audio-mini-group, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-group-audio, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .qchat-file-bundle-list-audio { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .qchat-audio-mini-group, .qchat-audio-mini-group .qchat-file-bundle-list, .qchat-file-bundle-list-audio, .qchat-file-bundle-group-audio, .qchat-audio-mini-player, .qchat-audio-mini-player:hover, .qchat-audio-mini-player:focus-within, .qchat-audio-mini-player.qchat-audio-controls-open, .qchat-audio-mini-player.playing, #messagesContainer .message .qchat-audio-mini-player, #messagesContainer .message .qchat-audio-mini-player:hover, #messagesContainer .message .qchat-audio-mini-player:focus-within, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open, #messagesContainer .message .qchat-audio-mini-player.playing, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player { width: 100% !important; max-width: 500px !important; min-width: 0 !important; box-sizing: border-box !important; } #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress.time, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-progress .timeline { max-width: 100% !important; min-width: 0 !important; } /* stable explicit volume slider under prev/play/next. The slider is positioned inside the fixed controls column, not as a grid item, so hover/focus cannot reflow it to the right or hide it. */ .qchat-audio-mini-player, #messagesContainer .message .qchat-audio-mini-player, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player { overflow: hidden !important; } .qchat-audio-mini-player .qchat-audio-mini-meta, .qchat-audio-mini-player .qchat-file-bundle-preview-meta, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-meta, #messagesContainer .message .qchat-audio-mini-player .qchat-file-bundle-preview-meta, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-meta, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-file-bundle-preview-meta { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } .qchat-audio-mini-player .qchat-audio-mini-controls, .qchat-audio-mini-player .qchat-audio-mini-controls.controls, .qchat-audio-mini-player .qchat-audio-mini-controls.qchat-audio-controls-stacked, .qchat-audio-mini-player .qchat-audio-mini-controls.qchat-audio-controls-fixed, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls, .qchat-audio-mini-player:hover .qchat-audio-mini-controls, .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player:hover .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, #messagesContainer .message .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player:hover .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls { position: relative !important; display: block !important; flex: 0 0 82px !important; flex-basis: 82px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; margin-left: auto !important; margin-bottom: 0 !important; align-self: center !important; overflow: visible !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; transition: none !important; contain: none !important; box-sizing: border-box !important; } .qchat-audio-mini-player .qchat-audio-mini-controls .prev, .qchat-audio-mini-player .qchat-audio-mini-controls .play, .qchat-audio-mini-player .qchat-audio-mini-controls .next, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .prev, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .play, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .next, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls .prev, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls .play, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls .next { position: absolute !important; top: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; z-index: 2 !important; } .qchat-audio-mini-player .qchat-audio-mini-controls .prev, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .prev, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls .prev { left: 0 !important; } .qchat-audio-mini-player .qchat-audio-mini-controls .play, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .play, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls .play { left: 27px !important; } .qchat-audio-mini-player .qchat-audio-mini-controls .next, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .next, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls .next { right: 0 !important; } .qchat-audio-mini-player .qchat-audio-mini-volume, .qchat-audio-mini-player button.volume, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-volume, #messagesContainer .message .qchat-audio-mini-player button.volume, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-volume, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player button.volume { display: none !important; } .qchat-audio-mini-player .qchat-audio-mini-meta > .qchat-audio-volume-wrap, .qchat-audio-mini-player .qchat-file-bundle-preview-meta > .qchat-audio-volume-wrap, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-meta > .qchat-audio-volume-wrap, #messagesContainer .message .qchat-audio-mini-player .qchat-file-bundle-preview-meta > .qchat-audio-volume-wrap, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-meta > .qchat-audio-volume-wrap, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-file-bundle-preview-meta > .qchat-audio-volume-wrap { display: none !important; } .qchat-audio-mini-player .qchat-audio-mini-controls .qchat-audio-volume-wrap, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .qchat-audio-volume-wrap, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls .qchat-audio-volume-wrap { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 1px !important; display: block !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 16px !important; min-height: 16px !important; max-height: 16px !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; overflow: visible !important; pointer-events: auto !important; transform: none !important; z-index: 3 !important; box-sizing: border-box !important; } .qchat-audio-mini-player .qchat-audio-mini-controls .qchat-audio-volume-range, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls .qchat-audio-volume-range, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls .qchat-audio-volume-range, .qchat-audio-mini-player .qchat-audio-mini-controls .qchat-audio-volume-range:hover, .qchat-audio-mini-player .qchat-audio-mini-controls .qchat-audio-volume-range:focus, .qchat-audio-mini-player .qchat-audio-mini-controls .qchat-audio-volume-range:active { position: absolute !important; left: 4px !important; top: 5px !important; display: block !important; width: 74px !important; min-width: 74px !important; max-width: 74px !important; height: 10px !important; min-height: 10px !important; max-height: 10px !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; appearance: none !important; -webkit-appearance: none !important; background: transparent !important; cursor: pointer !important; pointer-events: auto !important; transform: none !important; touch-action: pan-x !important; box-sizing: border-box !important; z-index: 4 !important; } .qchat-audio-mini-player .qchat-audio-volume-range::-webkit-slider-runnable-track, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range::-webkit-slider-runnable-track, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-volume-range::-webkit-slider-runnable-track { height: 3px !important; border-radius: 999px !important; background: linear-gradient(to right, #0d6efd 0%, #0d6efd var(--qchat-volume-percent, 100%), rgba(0,0,0,0.16) var(--qchat-volume-percent, 100%), rgba(0,0,0,0.16) 100%) !important; } .qchat-audio-mini-player .qchat-audio-volume-range::-webkit-slider-thumb, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range::-webkit-slider-thumb, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-volume-range::-webkit-slider-thumb { -webkit-appearance: none !important; width: 10px !important; height: 10px !important; margin-top: -3.5px !important; border: 0 !important; border-radius: 999px !important; background: #0d6efd !important; box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important; } .qchat-audio-mini-player .qchat-audio-volume-range::-moz-range-track, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range::-moz-range-track, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-volume-range::-moz-range-track { height: 3px !important; border-radius: 999px !important; background: rgba(0,0,0,0.16) !important; } .qchat-audio-mini-player .qchat-audio-volume-range::-moz-range-progress, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range::-moz-range-progress, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-volume-range::-moz-range-progress { height: 3px !important; border-radius: 999px !important; background: #0d6efd !important; } .qchat-audio-mini-player .qchat-audio-volume-range::-moz-range-thumb, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-volume-range::-moz-range-thumb, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-volume-range::-moz-range-thumb { width: 10px !important; height: 10px !important; border: 0 !important; border-radius: 999px !important; background: #0d6efd !important; box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important; } @media (max-width: 575.98px) { .qchat-audio-mini-player .qchat-audio-mini-controls, .qchat-audio-mini-player .qchat-audio-mini-controls.controls, .qchat-audio-mini-player .qchat-audio-mini-controls.qchat-audio-controls-stacked, .qchat-audio-mini-player .qchat-audio-mini-controls.qchat-audio-controls-fixed, #messagesContainer .message .qchat-audio-mini-player .qchat-audio-mini-controls, .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player .qchat-audio-mini-controls, .qchat-audio-mini-player:hover .qchat-audio-mini-controls, .qchat-audio-mini-player:focus-within .qchat-audio-mini-controls, .qchat-audio-mini-player.qchat-audio-controls-open .qchat-audio-mini-controls { flex-basis: 82px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; } } /* keep avatars uniform on tablet/desktop. Audio messages were inheriting the compact 30px avatar from audio-only responsive rules. */ @media (min-width: 768px) { #messagesContainer .message .message-avatar, #messagesContainer .message:has(.qchat-audio-mini-player) .message-avatar, #messagesContainer .message:has(.qchat-audio-mini-group) .message-avatar, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-avatar, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-avatar, #messagesContainer .message .avatar-placeholder.encrypted-message-avatar, #messagesContainer .message:has(.qchat-audio-mini-player) .avatar-placeholder.encrypted-message-avatar, #messagesContainer .message:has(.qchat-audio-mini-group) .avatar-placeholder.encrypted-message-avatar, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .avatar-placeholder.encrypted-message-avatar, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .avatar-placeholder.encrypted-message-avatar { width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; flex: 0 0 48px !important; flex-basis: 48px !important; inline-size: 48px !important; block-size: 48px !important; object-fit: cover !important; box-sizing: border-box !important; } } /* wide messages below 768 */ /* regular messages use the same wide mobile lane as audio below 768px. */ @media (max-width: 767.98px) { #messagesContainer { --qchat-message-lane-width: 100% !important; --qchat-message-mobile-lane-width: 100% !important; --qchat-message-row-gap: 6px !important; } #messagesContainer .message, #messagesContainer .message.sent, #messagesContainer .message.received { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #messagesContainer .message > .d-flex, #messagesContainer .message.sent > .d-flex, #messagesContainer .message.received > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-player) > .d-flex, #messagesContainer .message:has(.qchat-audio-mini-group) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-group-audio) > .d-flex, #messagesContainer .message:has(.qchat-file-bundle-list-audio) > .d-flex { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; box-sizing: border-box !important; gap: var(--qchat-message-row-gap, 6px) !important; } #messagesContainer .message.received > .d-flex { margin-left: 0 !important; margin-right: auto !important; justify-content: flex-start !important; } #messagesContainer .message.sent > .d-flex { margin-left: auto !important; margin-right: 0 !important; justify-content: flex-end !important; } #messagesContainer .message .message-avatar { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; } #messagesContainer .message .message-bubble, #messagesContainer .message.sent .message-bubble, #messagesContainer .message.received .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-player) .message-bubble, #messagesContainer .message:has(.qchat-audio-mini-group) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-group-audio) .message-bubble, #messagesContainer .message:has(.qchat-file-bundle-list-audio) .message-bubble { flex: 1 1 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } #messagesContainer .message .message-content-wrapper, #messagesContainer .message .message-header, #messagesContainer .message .message-content, #messagesContainer .message .message-footer, #messagesContainer .message .decrypted-file-content, #messagesContainer .message .file-caption, #messagesContainer .message .message-reply-preview, #messagesContainer .message .reply-preview-content, #messagesContainer .message .qchat-file-bundle-message, #messagesContainer .message .qchat-file-bundle-groups, #messagesContainer .message .qchat-file-bundle-group, #messagesContainer .message .qchat-file-bundle-list, #messagesContainer .message .qchat-audio-mini-group, #messagesContainer .message .qchat-file-bundle-list-audio, #messagesContainer .message .qchat-file-bundle-group-audio, #messagesContainer .message .qchat-audio-mini-player, #messagesContainer .message .file-preview, #messagesContainer .message .video-preview { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #messagesContainer .message .qchat-file-bundle-message { width: 100% !important; max-width: 100% !important; } #messagesContainer .message .message-content, #messagesContainer .message .file-caption, #messagesContainer .message .reply-preview-text, #messagesContainer .message .reply-preview-caption, #messagesContainer .message .reply-preview-file-link { overflow-wrap: anywhere !important; word-break: break-word !important; } } /* QChat audio/profile parity v23 * Profile/blog mini players use exactly the same theme surface as chat players. * Also keep the file-size part visible on both classic and compact layouts. */ body.dark-theme .profile-blog-post .qchat-audio-mini-player, body.dark-theme .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player, body.dark-theme .profile-blog-audio-section .qchat-audio-mini-player { background: var(--qchat-dark-surface-2, #21262d) !important; color: var(--qchat-dark-text, #c9d1d9) !important; border-color: var(--qchat-dark-surface-3, #30363d) !important; } body.dark-theme .profile-blog-post .qchat-audio-mini-player.playing, body.dark-theme .profile-blog-post .qchat-audio-mini-player.chat-audio-current, body.dark-theme .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player.playing, body.dark-theme .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player.chat-audio-current { background: linear-gradient(135deg, rgba(31,111,235,0.28), rgba(56,139,253,0.18)) !important; border-color: rgba(88,166,255,0.45) !important; } @media (prefers-color-scheme: dark) { body.auto-theme .profile-blog-post .qchat-audio-mini-player, body.auto-theme .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player, body.auto-theme .profile-blog-audio-section .qchat-audio-mini-player { background: #21262d !important; color: #c9d1d9 !important; border-color: #30363d !important; } body.auto-theme .profile-blog-post .qchat-audio-mini-player.playing, body.auto-theme .profile-blog-post .qchat-audio-mini-player.chat-audio-current, body.auto-theme .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player.playing, body.auto-theme .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player.chat-audio-current { background: linear-gradient(135deg, rgba(31,111,235,0.28), rgba(56,139,253,0.18)) !important; border-color: rgba(88,166,255,0.45) !important; } } .qchat-audio-mini-player .qchat-file-bundle-preview-size, .qchat-audio-mini-player .song-autor, .profile-blog-post .qchat-audio-mini-player .qchat-file-bundle-preview-size, .profile-blog-post .qchat-audio-mini-player .song-autor { display: block !important; min-height: 1.25em !important; } .audio_card.qchat-audio-classic-card .qchat-audio-classic-size, .profile-blog-post .audio_card.qchat-audio-classic-card .qchat-audio-classic-size { display: block !important; margin-top: 2px !important; font-size: 0.78rem !important; line-height: 1.25 !important; opacity: 0.82 !important; white-space: nowrap !important; } /* QChat audio polish v25 * The internal `classic` renderer is now labelled “Modern player” in Settings. * Keep it compact in Profile Blog while playing. Light themes intentionally * keep the renderer's original white surface from `.audio_card .current-song`. */ html body .profile-blog-post .audio_card.qchat-audio-classic-card, html body .profile-blog-post .audio_card.qchat-audio-classic-card > .qchat-audio-classic-player, html body .profile-blog-post .qchat-audio-classic-player, html body .profile-blog-post .qchat-audio-classic-player.playing, html body .profile-blog-post .qchat-audio-classic-player.blog-audio-current, html body .profile-blog-audio-section .audio_card.qchat-audio-classic-card, html body .profile-blog-audio-section .qchat-audio-classic-player, html body .profile-blog-attachment-preview .audio_card.qchat-audio-classic-card, html body .profile-blog-attachment-preview .qchat-audio-classic-player { width: min(300px, 100%) !important; max-width: 300px !important; min-width: 0 !important; inline-size: min(300px, 100%) !important; max-inline-size: 300px !important; flex: 0 1 300px !important; flex-basis: 300px !important; box-sizing: border-box !important; } body.light-theme #messagesContainer .audio_card.qchat-audio-classic-card { background: transparent !important; } @media (prefers-color-scheme: light) { body.auto-theme #messagesContainer .audio_card.qchat-audio-classic-card { background: transparent !important; } } /* QChat audio theme parity v27 * The compact renderer is presented as the Classic player. In explicit light * mode (and auto-light), use a white card just like the Modern player. The * profile selectors are intentionally more specific than later runtime-static * fallback rules so cached/profile audio cannot turn gray again. */ body.light-theme .qchat-audio-mini-player, body.light-theme .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player, body.light-theme .profile-blog-attachments .profile-blog-attachment .qchat-audio-mini-player { background: #fff !important; } @media (prefers-color-scheme: light) { body.auto-theme .qchat-audio-mini-player, body.auto-theme .profile-blog-file-list .profile-blog-attachment-preview .qchat-audio-mini-player, body.auto-theme .profile-blog-attachments .profile-blog-attachment .qchat-audio-mini-player { background: #fff !important; } } /* QChat persistent audio dock v1 * The real player node is re-parented here while switching tabs/chats, keeping * the same HTMLAudioElement and playback position alive. Long-press/right-click * opens a tiny context menu with “Закрыть плеер”. */ .qchat-persistent-audio-dock { position: fixed !important; z-index: 1065 !important; left: 50% !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; transform: translateX(-50%) !important; width: min(560px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; pointer-events: none !important; box-sizing: border-box !important; } .qchat-persistent-audio-dock[hidden] { display: none !important; } .qchat-persistent-audio-dock-surface { width: 100% !important; min-width: 0 !important; padding: 8px !important; border: 1px solid rgba(127, 127, 127, 0.28) !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; pointer-events: auto !important; box-sizing: border-box !important; overflow: hidden !important; touch-action: manipulation !important; -webkit-user-select: none !important; user-select: none !important; } body.dark-theme .qchat-persistent-audio-dock-surface { background: rgba(13, 17, 23, 0.96) !important; border-color: rgba(201, 209, 217, 0.22) !important; } @media (prefers-color-scheme: dark) { body.auto-theme .qchat-persistent-audio-dock-surface { background: rgba(13, 17, 23, 0.96) !important; border-color: rgba(201, 209, 217, 0.22) !important; } } .qchat-persistent-audio-dock .qchat-persistent-audio-mount, .qchat-persistent-audio-dock .qchat-persistent-audio-player, .qchat-persistent-audio-dock .audio_card.qchat-audio-classic-card, .qchat-persistent-audio-dock .qchat-audio-classic-player { width: 100% !important; max-width: 100% !important; min-width: 0 !important; inline-size: 100% !important; max-inline-size: 100% !important; flex: 1 1 auto !important; flex-basis: auto !important; margin: 0 !important; box-sizing: border-box !important; } .qchat-persistent-audio-dock .qchat-audio-mini-player, .qchat-persistent-audio-dock .qchat-audio-mini-player:hover, .qchat-persistent-audio-dock .qchat-audio-mini-player:focus-within, .qchat-persistent-audio-dock .qchat-audio-mini-player.playing { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) 82px !important; align-items: center !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; transform: none !important; transition: none !important; box-sizing: border-box !important; overflow: hidden !important; } .qchat-persistent-audio-dock .qchat-audio-mini-art { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; } .qchat-persistent-audio-dock .qchat-audio-mini-cover { width: 48px !important; height: 48px !important; } .qchat-persistent-audio-dock .qchat-audio-mini-meta, .qchat-persistent-audio-dock .qchat-file-bundle-preview-meta { min-width: 0 !important; overflow: hidden !important; } .qchat-persistent-audio-dock .qchat-audio-mini-controls { display: grid !important; grid-template-columns: 24px 28px 24px !important; gap: 3px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; transition: none !important; } .qchat-persistent-audio-context-menu { position: fixed !important; z-index: 1085 !important; min-width: 190px !important; padding: 5px !important; border: 1px solid rgba(127, 127, 127, 0.32) !important; border-radius: 10px !important; background: #fff !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28) !important; opacity: 0 !important; transform: scale(0.98) !important; transform-origin: top left !important; transition: opacity 90ms ease, transform 90ms ease !important; -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; } .qchat-persistent-audio-context-menu[hidden] { display: none !important; } .qchat-persistent-audio-context-menu.show { opacity: 1 !important; transform: scale(1) !important; } .qchat-persistent-audio-close { width: 100% !important; display: flex !important; align-items: center !important; gap: 9px !important; padding: 9px 11px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #dc3545 !important; text-align: left !important; font: inherit !important; } .qchat-persistent-audio-close:hover, .qchat-persistent-audio-close:focus-visible { background: rgba(220, 53, 69, 0.10) !important; outline: none !important; } body.dark-theme .qchat-persistent-audio-context-menu { background: #161b22 !important; border-color: #30363d !important; } @media (prefers-color-scheme: dark) { body.auto-theme .qchat-persistent-audio-context-menu { background: #161b22 !important; border-color: #30363d !important; } } body:has(#messagingTab.active) .qchat-persistent-audio-dock { bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; } @media (max-width: 767.98px) { .qchat-persistent-audio-dock { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; } body:has(#messagingTab.active) .qchat-persistent-audio-dock { bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; } .qchat-persistent-audio-dock-surface { padding: 6px !important; border-radius: 12px !important; } .qchat-persistent-audio-dock .qchat-audio-mini-player, .qchat-persistent-audio-dock .qchat-audio-mini-player:hover, .qchat-persistent-audio-dock .qchat-audio-mini-player:focus-within, .qchat-persistent-audio-dock .qchat-audio-mini-player.playing { grid-template-columns: 44px minmax(0, 1fr) 82px !important; gap: 7px !important; } .qchat-persistent-audio-dock .qchat-audio-mini-art, .qchat-persistent-audio-dock .qchat-audio-mini-cover { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } } /* QChat persistent audio dock v2: draggable + stable controls. */ .qchat-persistent-audio-dock.qchat-dock-moved { left: var(--qchat-dock-left, 8px) !important; top: var(--qchat-dock-top, 8px) !important; right: auto !important; bottom: auto !important; transform: none !important; } body:has(#messagingTab.active) .qchat-persistent-audio-dock.qchat-dock-moved { bottom: auto !important; } @media (max-width: 767.98px) { body:has(#messagingTab.active) .qchat-persistent-audio-dock.qchat-dock-moved { bottom: auto !important; } } .qchat-persistent-audio-drag-handle { position: absolute !important; left: 50% !important; top: -15px !important; transform: translateX(-50%) !important; width: 54px !important; height: 18px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: auto !important; cursor: grab !important; touch-action: none !important; z-index: 2 !important; -webkit-tap-highlight-color: transparent !important; } .qchat-persistent-audio-drag-handle > span { display: block !important; width: 38px !important; height: 5px !important; border-radius: 999px !important; background: rgba(127, 127, 127, 0.65) !important; box-shadow: 0 1px 4px rgba(0,0,0,.22) !important; } .qchat-persistent-audio-dock.qchat-dock-dragging .qchat-persistent-audio-drag-handle { cursor: grabbing !important; } .qchat-persistent-audio-dock .qchat-audio-mini-controls, .qchat-persistent-audio-dock .qchat-audio-mini-controls.controls, .qchat-persistent-audio-dock .qchat-audio-mini-controls.qchat-audio-controls-stacked, .qchat-persistent-audio-dock .qchat-audio-mini-controls.qchat-audio-controls-fixed { position: relative !important; display: grid !important; grid-template-columns: 24px 28px 24px !important; grid-template-rows: 30px 14px !important; grid-template-areas: "prev play next" "range range range" !important; align-items: center !important; justify-items: center !important; column-gap: 3px !important; row-gap: 2px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; margin: 0 0 1px auto !important; overflow: visible !important; } .qchat-persistent-audio-dock .qchat-audio-mini-controls .prev, .qchat-persistent-audio-dock .qchat-audio-mini-controls .play, .qchat-persistent-audio-dock .qchat-audio-mini-controls .next { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .qchat-persistent-audio-dock .qchat-audio-mini-controls .prev { grid-area: prev !important; width:24px !important; height:24px !important; } .qchat-persistent-audio-dock .qchat-audio-mini-controls .play { grid-area: play !important; width:28px !important; height:28px !important; } .qchat-persistent-audio-dock .qchat-audio-mini-controls .next { grid-area: next !important; width:24px !important; height:24px !important; } .qchat-persistent-audio-dock .qchat-audio-mini-controls .qchat-audio-volume-wrap { position: relative !important; inset: auto !important; grid-area: range !important; display: block !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 14px !important; min-height: 14px !important; max-height: 14px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .qchat-persistent-audio-dock .qchat-audio-mini-controls .qchat-audio-volume-range { position: absolute !important; left: 4px !important; top: 2px !important; width: 74px !important; min-width: 74px !important; max-width: 74px !important; height: 10px !important; margin: 0 !important; } @media (max-width: 767.98px) { .qchat-persistent-audio-drag-handle { top: -17px !important; height: 20px !important; } .qchat-persistent-audio-drag-handle > span { width: 42px !important; height: 5px !important; } } /* QChat persistent audio dock v3: same footprint as the regular compact player. * The dock is only a positioning layer; it must not add its own card chrome, * padding or a different mobile size around the real audio player. */ .qchat-persistent-audio-dock { width: min(464px, calc(100vw - 16px)) !important; max-width: min(464px, calc(100vw - 16px)) !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .qchat-persistent-audio-dock-surface, body.dark-theme .qchat-persistent-audio-dock-surface { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: visible !important; } @media (prefers-color-scheme: dark) { body.auto-theme .qchat-persistent-audio-dock-surface { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } .qchat-persistent-audio-dock .qchat-persistent-audio-mount, .qchat-persistent-audio-dock .qchat-persistent-audio-player, .qchat-persistent-audio-dock .qchat-audio-mini-player, .qchat-persistent-audio-dock .qchat-audio-mini-player:hover, .qchat-persistent-audio-dock .qchat-audio-mini-player:focus-within, .qchat-persistent-audio-dock .qchat-audio-mini-player.playing { width: 100% !important; max-width: 464px !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* Keep the docked player visually identical to the regular player on phones: * do not shrink the cover to the old dock-only 44px variant. */ @media (max-width: 767.98px) { .qchat-persistent-audio-dock { width: min(464px, calc(100vw - 16px)) !important; max-width: min(464px, calc(100vw - 16px)) !important; } .qchat-persistent-audio-dock-surface { padding: 0 !important; border: 0 !important; border-radius: 0 !important; } .qchat-persistent-audio-dock .qchat-audio-mini-player, .qchat-persistent-audio-dock .qchat-audio-mini-player:hover, .qchat-persistent-audio-dock .qchat-audio-mini-player:focus-within, .qchat-persistent-audio-dock .qchat-audio-mini-player.playing { grid-template-columns: 48px minmax(0, 1fr) 82px !important; gap: 10px !important; } .qchat-persistent-audio-dock .qchat-audio-mini-art, .qchat-persistent-audio-dock .qchat-audio-mini-cover { width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; } } /* QChat persistent audio dock v4: opaque themed player surface. * Once the real player is moved out of a chat/profile container it no longer * inherits that container's surface color. Give the docked player its own * fully opaque theme surface so page content never shows through it. */ .qchat-persistent-audio-dock .qchat-audio-mini-player, .qchat-persistent-audio-dock .qchat-audio-mini-player:hover, .qchat-persistent-audio-dock .qchat-audio-mini-player:focus-within { background: #fff !important; background-color: #fff !important; } .qchat-persistent-audio-dock .qchat-audio-mini-player.playing { background: #eef4ff !important; background-color: #eef4ff !important; } body.dark-theme .qchat-persistent-audio-dock .qchat-audio-mini-player, body.dark-theme .qchat-persistent-audio-dock .qchat-audio-mini-player:hover, body.dark-theme .qchat-persistent-audio-dock .qchat-audio-mini-player:focus-within { background: #21262d !important; background-color: #21262d !important; } body.dark-theme .qchat-persistent-audio-dock .qchat-audio-mini-player.playing { background: #1d3154 !important; background-color: #1d3154 !important; } @media (prefers-color-scheme: dark) { body.auto-theme .qchat-persistent-audio-dock .qchat-audio-mini-player, body.auto-theme .qchat-persistent-audio-dock .qchat-audio-mini-player:hover, body.auto-theme .qchat-persistent-audio-dock .qchat-audio-mini-player:focus-within { background: #21262d !important; background-color: #21262d !important; } body.auto-theme .qchat-persistent-audio-dock .qchat-audio-mini-player.playing { background: #1d3154 !important; background-color: #1d3154 !important; } } /* QChat persistent audio dock v5: always use the small user-facing Classic * layout in the floating dock, even when the source player is Modern. The real * player stays alive in an off-screen keeper so the same HTMLAudioElement keeps * playing without a decrypt/reload cycle. */ .qchat-persistent-audio-keeper { position: absolute !important; left: -10000px !important; top: 0 !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; clip-path: inset(100%) !important; -webkit-clip-path: inset(100%) !important; } .qchat-persistent-audio-dock .qchat-persistent-audio-facade, .qchat-persistent-audio-dock .qchat-persistent-audio-facade:hover, .qchat-persistent-audio-dock .qchat-persistent-audio-facade:focus-within, .qchat-persistent-audio-dock .qchat-persistent-audio-facade.playing { width: 100% !important; max-width: 464px !important; min-width: 0 !important; margin: 0 !important; transform: none !important; transition: none !important; box-sizing: border-box !important; } /* Profile Blog Modern player must use exactly the same footprint/class contract * as Modern audio rendered in chat. This also fixes old/fallback blog markup. */ html body .profile-blog-post .audio_card[data-audio-player-style="classic"], html body .profile-blog-post .audio_card[data-audio-player-style="classic"] > .current-song, html body .profile-blog-audio-section .audio_card[data-audio-player-style="classic"], html body .profile-blog-audio-section .audio_card[data-audio-player-style="classic"] > .current-song { width: min(300px, 100%) !important; max-width: 300px !important; min-width: 0 !important; inline-size: min(300px, 100%) !important; max-inline-size: 300px !important; flex: 0 1 300px !important; flex-basis: 300px !important; box-sizing: border-box !important; } /* QChat Modern player profile/chat parity v34 * “Modern player” is the legacy audio_card renderer. Profile/blog wraps it in * several full-width file containers, while chat does not. Cap every wrapper * that actually contains this renderer to the same 300px lane used in chat. * Do not use a numeric flex-basis here: several wrappers are column flexboxes. */ html body .profile-blog-post .profile-blog-attachments:has(.audio_card[data-audio-player-style="classic"]), html body .profile-blog-post .profile-blog-file-bundle-message:has(.audio_card[data-audio-player-style="classic"]), html body .profile-blog-post .profile-blog-file-bundle-groups:has(.audio_card[data-audio-player-style="classic"]), html body .profile-blog-post .profile-blog-audio-group:has(.audio_card[data-audio-player-style="classic"]), html body .profile-blog-post .profile-blog-audio-list:has(.audio_card[data-audio-player-style="classic"]), html body .profile-blog-post .profile-blog-audio-attachment:has(.audio_card[data-audio-player-style="classic"]), html body .profile-blog-post .profile-blog-attachment-preview:has(.audio_card[data-audio-player-style="classic"]), html body .profile-blog-post .qchat-file-bundle-group-audio:has(.audio_card[data-audio-player-style="classic"]), html body .profile-blog-post .qchat-file-bundle-list-audio:has(.audio_card[data-audio-player-style="classic"]), html body .profile-blog-post .qchat-file-bundle-item-audio:has(.audio_card[data-audio-player-style="classic"]), html body .profile-blog-post .profile-blog-file-list:has(.audio_card[data-audio-player-style="classic"]), html body .profile-blog-post .audio_card[data-audio-player-style="classic"], html body .profile-blog-audio-section .audio_card[data-audio-player-style="classic"] { width: min(300px, 100%) !important; max-width: 300px !important; min-width: 0 !important; inline-size: min(300px, 100%) !important; max-inline-size: 300px !important; min-inline-size: 0 !important; flex: 0 0 auto !important; flex-basis: auto !important; align-self: flex-start !important; justify-self: start !important; box-sizing: border-box !important; } html body .profile-blog-post .audio_card[data-audio-player-style="classic"] > .current-song, html body .profile-blog-audio-section .audio_card[data-audio-player-style="classic"] > .current-song { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; flex-basis: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; box-sizing: border-box !important; } /* Modern chat controls must be a real visible row. The previous compact cap * left overflow:hidden on current-song, so prev/play/next could be clipped below * the timeline even though the buttons existed in DOM. */ html body #messagesContainer .audio_card[data-audio-player-style="classic"], html body #messagesContainer .audio_card[data-audio-player-style="classic"] > .current-song, html body #messagesContainer .qchat-audio-classic-card, html body #messagesContainer .qchat-audio-classic-player { height: auto !important; max-height: none !important; overflow: visible !important; } html body #messagesContainer .audio_card[data-audio-player-style="classic"] > .current-song > .controls, html body #messagesContainer .qchat-audio-classic-player > .controls { position: static !important; display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 66px !important; margin: 8px 0 0 !important; padding: 0 !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; flex-shrink: 0 !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; box-sizing: border-box !important; } html body #messagesContainer .audio_card[data-audio-player-style="classic"] > .current-song > .controls > button, html body #messagesContainer .qchat-audio-classic-player > .controls > button { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* QChat Modern profile player metadata visibility v35 * Keep the v34 300px profile/chat width parity and restore the natural-height * metadata rows that were accidentally dropped when the chat control-row fix * was merged. The legacy audio_card renderer is the user-facing Modern player. */ html body #profileTab .profile-blog-post .audio_card[data-audio-player-style="classic"], html body #profileTab .profile-blog-post .audio_card[data-audio-player-style="classic"] > .current-song, html body #profileTab .profile-blog-post .qchat-audio-classic-card, html body #profileTab .profile-blog-post .qchat-audio-classic-player, html body #profileTab .profile-blog-audio-section .audio_card[data-audio-player-style="classic"], html body #profileTab .profile-blog-audio-section .audio_card[data-audio-player-style="classic"] > .current-song { height: auto !important; min-height: 0 !important; max-height: none !important; flex-basis: auto !important; box-sizing: border-box !important; } html body #profileTab .profile-blog-post .audio_card[data-audio-player-style="classic"] > .current-song, html body #profileTab .profile-blog-post .qchat-audio-classic-player, html body #profileTab .profile-blog-audio-section .audio_card[data-audio-player-style="classic"] > .current-song { overflow: visible !important; } html body #profileTab .profile-blog-post .qchat-audio-classic-player > .img-wrap, html body #profileTab .profile-blog-post .qchat-audio-classic-player > .song-name, html body #profileTab .profile-blog-post .qchat-audio-classic-player > .song-autor, html body #profileTab .profile-blog-post .qchat-audio-classic-player > .qchat-audio-classic-size, html body #profileTab .profile-blog-post .qchat-audio-classic-player > .time, html body #profileTab .profile-blog-post .qchat-audio-classic-player > .timeline, html body #profileTab .profile-blog-post .qchat-audio-classic-player > .controls, html body #profileTab .profile-blog-audio-section .qchat-audio-classic-player > .img-wrap, html body #profileTab .profile-blog-audio-section .qchat-audio-classic-player > .song-name, html body #profileTab .profile-blog-audio-section .qchat-audio-classic-player > .song-autor, html body #profileTab .profile-blog-audio-section .qchat-audio-classic-player > .qchat-audio-classic-size, html body #profileTab .profile-blog-audio-section .qchat-audio-classic-player > .time, html body #profileTab .profile-blog-audio-section .qchat-audio-classic-player > .timeline, html body #profileTab .profile-blog-audio-section .qchat-audio-classic-player > .controls { flex: 0 0 auto !important; flex-shrink: 0 !important; } html body #profileTab .profile-blog-post .qchat-audio-classic-player > .song-name, html body #profileTab .profile-blog-post .qchat-audio-classic-player > .song-autor, html body #profileTab .profile-blog-audio-section .qchat-audio-classic-player > .song-name, html body #profileTab .profile-blog-audio-section .qchat-audio-classic-player > .song-autor { position: relative !important; z-index: 2 !important; display: block !important; width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; min-width: 0 !important; height: auto !important; min-height: 1.25em !important; max-height: none !important; line-height: 1.25 !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; visibility: visible !important; opacity: 1 !important; box-sizing: border-box !important; } /* Keep all Modern controls in Profile Blog visible without changing the * 300px footprint fixed by v34. */ html body #profileTab .profile-blog-post .qchat-audio-classic-player > .controls, html body #profileTab .profile-blog-audio-section .qchat-audio-classic-player > .controls { position: static !important; display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 66px !important; margin: 8px 0 0 !important; padding: 0 !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } /* QChat Modern chat/profile exact parity v36 * User-facing “Modern” uses the legacy audio_card renderer. Profile Blog now * has a definite 300px lane, but chat renders audio_card directly inside * .decrypted-file-content. Leaving that chain shrink-to-fit makes percentage * widths resolve against a narrower message bubble, so the same player becomes * visibly thinner/cropped in chat. Give chat the same definite 300px content * lane and the same natural-height metadata/control contract as Profile Blog. */ html body #messagesContainer .message:has(.audio_card[data-audio-player-style="classic"]) .message-content-wrapper, html body #messagesContainer .message:has(.audio_card[data-audio-player-style="classic"]) .message-content, html body #messagesContainer .message:has(.audio_card[data-audio-player-style="classic"]) .decrypted-file-content { width: min(300px, 100%) !important; max-width: 300px !important; min-width: 0 !important; inline-size: min(300px, 100%) !important; max-inline-size: 300px !important; min-inline-size: 0 !important; flex: 0 0 auto !important; flex-basis: auto !important; box-sizing: border-box !important; overflow: visible !important; } html body #messagesContainer .message:has(.audio_card[data-audio-player-style="classic"]) .message-bubble { flex: 0 0 auto !important; width: auto !important; min-width: min(324px, 100%) !important; max-width: min(324px, 100%) !important; box-sizing: border-box !important; overflow: visible !important; } html body #messagesContainer .message:has(.audio_card[data-audio-player-style="classic"]) > .d-flex { width: auto !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; box-sizing: border-box !important; } html body #messagesContainer .message.sent:has(.audio_card[data-audio-player-style="classic"]) > .d-flex { margin-left: auto !important; margin-right: 0 !important; justify-content: flex-end !important; } html body #messagesContainer .message.received:has(.audio_card[data-audio-player-style="classic"]) > .d-flex { margin-left: 0 !important; margin-right: auto !important; justify-content: flex-start !important; } html body #messagesContainer .audio_card[data-audio-player-style="classic"], html body #messagesContainer .audio_card[data-audio-player-style="classic"] > .current-song, html body #messagesContainer .qchat-audio-classic-card, html body #messagesContainer .qchat-audio-classic-player { width: min(300px, 100%) !important; max-width: 300px !important; min-width: 0 !important; inline-size: min(300px, 100%) !important; max-inline-size: 300px !important; min-inline-size: 0 !important; flex: 0 0 auto !important; flex-basis: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box !important; } html body #messagesContainer .audio_card[data-audio-player-style="classic"] > .current-song, html body #messagesContainer .qchat-audio-classic-player { overflow: visible !important; margin-left: 0 !important; margin-right: auto !important; } html body #messagesContainer .qchat-audio-classic-player > .img-wrap, html body #messagesContainer .qchat-audio-classic-player > .song-name, html body #messagesContainer .qchat-audio-classic-player > .song-autor, html body #messagesContainer .qchat-audio-classic-player > .qchat-audio-classic-size, html body #messagesContainer .qchat-audio-classic-player > .time, html body #messagesContainer .qchat-audio-classic-player > .timeline, html body #messagesContainer .qchat-audio-classic-player > .controls { flex: 0 0 auto !important; flex-shrink: 0 !important; } html body #messagesContainer .qchat-audio-classic-player > .song-name, html body #messagesContainer .qchat-audio-classic-player > .song-autor { position: relative !important; z-index: 2 !important; display: block !important; width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; min-width: 0 !important; height: auto !important; min-height: 1.25em !important; max-height: none !important; line-height: 1.25 !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; visibility: visible !important; opacity: 1 !important; box-sizing: border-box !important; } html body #messagesContainer .qchat-audio-classic-player > .qchat-audio-classic-size { display: block !important; width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; visibility: visible !important; opacity: 1 !important; } html body #messagesContainer .qchat-audio-classic-player > .time, html body #messagesContainer .qchat-audio-classic-player > .timeline { width: 200px !important; max-width: calc(100% - 24px) !important; } html body #messagesContainer .qchat-audio-classic-player > .controls { position: static !important; display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 66px !important; margin: 8px 0 0 !important; padding: 0 !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; box-sizing: border-box !important; } @media (max-width: 360px) { html body #messagesContainer .message:has(.audio_card[data-audio-player-style="classic"]) .message-bubble { width: calc(100vw - 44px) !important; min-width: 0 !important; max-width: calc(100vw - 44px) !important; } html body #messagesContainer .message:has(.audio_card[data-audio-player-style="classic"]) .message-content-wrapper, html body #messagesContainer .message:has(.audio_card[data-audio-player-style="classic"]) .message-content, html body #messagesContainer .message:has(.audio_card[data-audio-player-style="classic"]) .decrypted-file-content, html body #messagesContainer .audio_card[data-audio-player-style="classic"], html body #messagesContainer .audio_card[data-audio-player-style="classic"] > .current-song, html body #messagesContainer .qchat-audio-classic-card, html body #messagesContainer .qchat-audio-classic-player { width: 100% !important; max-width: 100% !important; inline-size: 100% !important; max-inline-size: 100% !important; } } /* QChat Modern chat/profile exact layout parity v37 * Modern = the vertical audio_card renderer. Cached chat history may carry * older classless audio_card markup, so target the renderer itself rather than * only the newest qchat classes. Profile Blog is the visual reference: 300px * player lane, natural height and an always-visible prev/play/next row. */ :root { --qchat-modern-audio-width: 300px; } html body #messagesContainer .audio_card, html body #messagesContainer .audio_card > .current-song, html body #messagesContainer .audio_card.qchat-audio-classic-card, html body #messagesContainer .qchat-audio-classic-player { width: min(var(--qchat-modern-audio-width), 100%) !important; min-width: min(var(--qchat-modern-audio-width), 100%) !important; max-width: var(--qchat-modern-audio-width) !important; inline-size: min(var(--qchat-modern-audio-width), 100%) !important; min-inline-size: min(var(--qchat-modern-audio-width), 100%) !important; max-inline-size: var(--qchat-modern-audio-width) !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; flex-basis: auto !important; box-sizing: border-box !important; } html body #messagesContainer .audio_card > .current-song, html body #messagesContainer .qchat-audio-classic-player { overflow: visible !important; } /* Give a direct chat attachment the same definite lane as Profile Blog. * Do not constrain a forwarded blog card itself; only its nested player uses * the 300px lane. */ html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.audio_card) .message-content-wrapper, html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.audio_card) .message-content, html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.audio_card) .decrypted-file-content { width: var(--qchat-modern-audio-width) !important; min-width: var(--qchat-modern-audio-width) !important; max-width: var(--qchat-modern-audio-width) !important; inline-size: var(--qchat-modern-audio-width) !important; min-inline-size: var(--qchat-modern-audio-width) !important; max-inline-size: var(--qchat-modern-audio-width) !important; height: auto !important; max-height: none !important; overflow: visible !important; box-sizing: border-box !important; } html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.audio_card) > .d-flex { width: fit-content !important; min-width: 0 !important; max-width: 100% !important; flex: 0 0 auto !important; box-sizing: border-box !important; } html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.audio_card) .message-bubble { width: fit-content !important; min-width: 0 !important; max-width: min(332px, 100%) !important; flex: 0 0 auto !important; height: auto !important; max-height: none !important; overflow: visible !important; box-sizing: border-box !important; } html body #messagesContainer .message.sent:not(:has(.saved-profile-blog-post)):has(.audio_card) > .d-flex { margin-left: auto !important; margin-right: 0 !important; justify-content: flex-end !important; } html body #messagesContainer .message.received:not(:has(.saved-profile-blog-post)):has(.audio_card) > .d-flex { margin-left: 0 !important; margin-right: auto !important; justify-content: flex-start !important; } /* Forwarded blog cards keep their own outer width, but every Modern player * inside them gets exactly the same footprint and control row. */ html body #messagesContainer .saved-profile-blog-post .audio_card, html body #messagesContainer .saved-profile-blog-post .audio_card > .current-song, html body #messagesContainer .saved-profile-blog-post .qchat-audio-classic-player { width: min(var(--qchat-modern-audio-width), 100%) !important; min-width: min(var(--qchat-modern-audio-width), 100%) !important; max-width: var(--qchat-modern-audio-width) !important; inline-size: min(var(--qchat-modern-audio-width), 100%) !important; max-inline-size: var(--qchat-modern-audio-width) !important; margin-left: 0 !important; margin-right: auto !important; overflow: visible !important; } /* The row must exist in layout even for old cached chat HTML. */ html body #messagesContainer .audio_card > .current-song > .controls, html body #messagesContainer .qchat-audio-classic-player > .controls { position: static !important; display: flex !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 66px !important; height: auto !important; margin: 8px 0 0 !important; padding: 0 !important; align-items: center !important; justify-content: center !important; gap: 0 !important; flex: 0 0 auto !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; transform: none !important; box-sizing: border-box !important; } html body #messagesContainer .audio_card > .current-song > .controls > button, html body #messagesContainer .qchat-audio-classic-player > .controls > button { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; } /* Match the Blog metadata/progress geometry too, including legacy classless * current-song nodes restored from history. */ html body #messagesContainer .audio_card > .current-song > .song-name, html body #messagesContainer .audio_card > .current-song > .song-autor, html body #messagesContainer .audio_card > .current-song > .qchat-audio-classic-size { display: block !important; width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; visibility: visible !important; opacity: 1 !important; } html body #messagesContainer .audio_card > .current-song > .time, html body #messagesContainer .audio_card > .current-song > .timeline { width: 200px !important; max-width: calc(100% - 24px) !important; } @media (max-width: 380px) { html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.audio_card) .message-bubble { width: calc(100vw - 44px) !important; max-width: calc(100vw - 44px) !important; } html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.audio_card) .message-content-wrapper, html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.audio_card) .message-content, html body #messagesContainer .message:not(:has(.saved-profile-blog-post)):has(.audio_card) .decrypted-file-content, html body #messagesContainer .audio_card, html body #messagesContainer .audio_card > .current-song, html body #messagesContainer .qchat-audio-classic-player { width: 100% !important; min-width: 0 !important; max-width: 100% !important; inline-size: 100% !important; min-inline-size: 0 !important; max-inline-size: 100% !important; } }