/* Shared Star Shop visual language for dialogs throughout Sokket.
   Keep each dialog's sizing, scrolling and positioning in its feature stylesheet. */
:root {
    --sok-modal-surface: #12121a;
    --sok-modal-field: #0f0f16;
    --sok-modal-border: #ffffff0f;
    --sok-modal-control: #ffffff08;
    --sok-modal-accent: #a987ff;
    --sok-modal-ring: #a990ff70;
    --sok-modal-motion: .22s cubic-bezier(.22,.8,.24,1);
}

/* Backdrops remain separate from media viewers, active calls and the scanner. */
:is(.modal-overlay,.ma-modal,.st2-dialog-overlay,.music-modal-backdrop,
    .cropper-overlay,.sok-bubble-picker-overlay,.onlyid-e2ee-overlay,
    .cp-action-sheet-overlay,.incoming-call-modal,.level-modal-overlay,
    .sok-report-overlay,.fp-overlay,.dialog-backdrop) {
    background: #05050acd;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

/* Normal dialogs, sheets and their feature-specific cards. */
:is(.modal-content,.sokket-create-card,.sokket-settings-card,.ma-modal-content,
    .st2-dialog,.music-modal-sheet,.gift-modal-card,.invite-modal-card,
    .lfg-wizard,.sok-bubble-picker,.cropper-card,.incoming-call-modal-content,
    .onlyid-e2ee-dialog,.cp-action-sheet,.room-modal-card.rum-card,
    #roomEditModal .room-modal-card,.qr-confirm-card,.market-dialog,
    .gift3-dialog .gift3-panel,.gift3-value-dialog .gift3-panel,
    .level-modal,.sok-report-dialog,.fp-window,.pm-confirm) {
    background: var(--sok-modal-surface);
    border: 1px solid var(--sok-modal-border);
    box-shadow: none;
    color: #f8f7fc;
}

/* A few older windows use inline styles on their outer card. */
:is(#inviteModal,#memberActionModal,#chatBgPickerModal,#seenModal,#roleTagModal,
    #forwardModal,#adminBroadcastModal) > div:first-child {
    background: var(--sok-modal-surface) !important;
    border: 1px solid var(--sok-modal-border) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
}

.modal-content,.st2-dialog,.sokket-create-card,.sokket-settings-card,
.ma-modal-content,.music-modal-sheet,.lfg-wizard,.sok-bubble-picker,
.cropper-card,.onlyid-e2ee-dialog,.market-dialog,.level-modal,
.sok-report-dialog,.fp-window,.pm-confirm {
    border-radius: 20px;
}

/* Flat inner panels and quiet dividers. */
:is(.sokket-settings-section,.rum-panel,.lfg-wizard-head,.lfg-wizard-footer,
    .cropper-header,.music-add-btn,.cp-action-sheet) {
    background: var(--sok-modal-surface);
    border-color: #ffffff14;
    box-shadow: none;
}
.sokket-create-steps,.sokket-create-filter {
    background: var(--sok-modal-surface);
    border-color: #a18aff24;
    border-radius: 999px;
    box-shadow: none;
}
.sokket-create-steps span,.sokket-create-filter button { border-radius: 999px; }
.sokket-create-steps span.active,.sokket-create-filter button.active {
    background: #332e58;
    box-shadow: none;
}
.sokket-create-filter button:hover,.sokket-create-filter button:focus-visible {
    background: #ffffff0e;
}
.sokket-create-filter button.active:hover,.sokket-create-filter button.active:focus-visible {
    background: #332e58;
}

/* All ordinary dialog controls use the same expanding outline on interaction.
   Feature-specific semantic colours, for example danger and call buttons, stay intact. */
:is(.modal-overlay,.ma-modal,.st2-dialog-overlay,.music-modal,.cropper-overlay,
    .sok-bubble-picker-overlay,.onlyid-e2ee-overlay,.cp-action-sheet-overlay,
    .incoming-call-modal,.market-dialog,.level-modal-overlay,.sok-report-overlay,
    .fp-overlay,.dialog-backdrop,
    .gift3-dialog,.gift3-value-dialog) button {
    outline: 4px solid transparent;
    outline-offset: 0;
    transition: background-color .2s ease, color .2s ease,
        outline-color var(--sok-modal-motion),outline-offset var(--sok-modal-motion);
}
:is(.modal-overlay,.ma-modal,.st2-dialog-overlay,.music-modal,.cropper-overlay,
    .sok-bubble-picker-overlay,.onlyid-e2ee-overlay,.cp-action-sheet-overlay,
    .incoming-call-modal,.market-dialog,.level-modal-overlay,.sok-report-overlay,
    .fp-overlay,.dialog-backdrop,
    .gift3-dialog,.gift3-value-dialog) button:is(:hover,:focus-visible,:active):not(:disabled) {
    outline-color: var(--sok-modal-ring);
    outline-offset: 4px;
}
/* Segmented selectors behave like the tab strip inside Star Shop. */
.sokket-create-filter button:is(:hover,:focus-visible,:active),
#textChannelEditorModal .sokket-text-editor-filter button:is(:hover,:focus-visible,:active),
.gift3-dialog .gift3-menu button:is(:hover,:focus-visible,:active) {
    outline-color: transparent;
    outline-offset: 0;
}

/* Primary and secondary actions share a quiet, rounded pill treatment. */
:is(.modal-actions,.del-modal-actions,.logout-modal-actions,.room-modal-actions,
    .st2-dialog-actions,.cropper-footer,.lfg-wizard-footer,.qr-confirm-actions,
    .onlyid-e2ee-actions,.sokket-leave-owner-actions) button,
:is(.modal-overlay,.sokket-create-card,.sokket-settings-card,.ma-modal,
    .music-modal,.st2-dialog,.onlyid-e2ee-dialog) :is(.sokket-create-primary,
    .sokket-create-secondary,.modal-btn,.gift-opt-btn,.gift-cancel-btn,
    .music-add-btn,.music-sec-action,.invite-action-btn),
#adminBroadcastModal > div > div button,
#chatBgPickerModal > div button,
#inviteModal > div button,
#forwardModal > div button,
.market-dialog .market-button {
    border: 0;
    border-radius: 999px;
    background: var(--sok-modal-control);
    background-image: none;
    box-shadow: none;
    color: #d6d1e0;
    font-weight: 750;
    text-shadow: none;
}
:is(.modal-actions,.del-modal-actions,.logout-modal-actions,.room-modal-actions,
    .st2-dialog-actions,.cropper-footer,.lfg-wizard-footer,.qr-confirm-actions,
    .onlyid-e2ee-actions,.sokket-leave-owner-actions) button:is(:hover,:focus-visible,:active):not(:disabled),
:is(.modal-overlay,.sokket-create-card,.sokket-settings-card,.ma-modal,
    .music-modal,.st2-dialog,.onlyid-e2ee-dialog) :is(.sokket-create-primary,
    .sokket-create-secondary,.modal-btn,.gift-opt-btn,.gift-cancel-btn,
    .music-add-btn,.music-sec-action,.invite-action-btn):is(:hover,:focus-visible,:active):not(:disabled),
#adminBroadcastModal > div > div button:is(:hover,:focus-visible,:active):not(:disabled),
#chatBgPickerModal > div button:is(:hover,:focus-visible,:active):not(:disabled),
#inviteModal > div button:is(:hover,:focus-visible,:active):not(:disabled),
#forwardModal > div button:is(:hover,:focus-visible,:active):not(:disabled),
.market-dialog .market-button:is(:hover,:focus-visible,:active):not(:disabled) {
    background: #956ffb14;
    background-image: none;
    box-shadow: none;
    color: #b99dff;
    filter: none;
    transform: none;
}
:is(.sokket-create-primary,.st2-dialog-confirm,
    .modal-btn.create,.modal-btn.danger,.gift-opt-primary,
    .cropper-btn-save,.lfg-wizard-next,.lfg-wizard-publish,
    .qr-confirm-approve,.onlyid-e2ee-actions button[type=submit]) {
    color: var(--sok-modal-accent) !important;
}
:is(.modal-btn.danger,.del-modal-btn.danger,.room-modal-confirm.danger,
    .qr-confirm-reject,.gift2-danger,.sokket-studio-link-danger) {
    color: #ff8b95 !important;
}
.del-modal-actions { gap: 10px; }
.del-modal-btn { min-height: 44px; min-width: 100px; padding: 10px 16px; text-transform: none; }

/* Inputs should sit on the same dark inset surface as shop filters. */
:is(.modal-overlay,.ma-modal,.st2-dialog-overlay,.music-modal,.cropper-overlay,
    .onlyid-e2ee-overlay,.market-dialog,.level-modal-overlay,.sok-report-overlay,
    .fp-overlay)
    :is(input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select) {
    background: var(--sok-modal-field) !important;
    border: 1px solid #a18aff24 !important;
    border-radius: 12px;
    box-shadow: none;
    color: #f8f7fc;
}
:is(.modal-overlay,.ma-modal,.st2-dialog-overlay,.music-modal,.cropper-overlay,
    .onlyid-e2ee-overlay,.market-dialog,.level-modal-overlay,.sok-report-overlay,
    .fp-overlay)
    :is(input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select):focus-visible {
    border-color: var(--sok-modal-ring) !important;
    box-shadow: 0 0 0 3px #a990ff20;
}

/* Close controls: circular glass buttons with the Star Shop ring. */
:is(.sokket-create-close,.ma-modal-close,.st2-dialog-close,.music-modal-close,
    .cropper-close,.lfg-wizard-close,.invite-close-btn,.sok-bubble-picker-close,
    .rum-close,.dialog-close,.gift3-icon,.level-modal-close,.sok-report-close,
    .fp-close) {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: #ffffff12;
    background-image: none;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 5px 16px #0004;
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
:is(.sokket-create-close,.ma-modal-close,.st2-dialog-close,.music-modal-close,
    .cropper-close,.lfg-wizard-close,.invite-close-btn,.sok-bubble-picker-close,
    .rum-close,.dialog-close,.gift3-icon,.level-modal-close,.sok-report-close,
    .fp-close):is(:hover,:focus-visible,:active) {
    background: #ffffff24;
    background-image: none;
    color: #fff;
    filter: none;
    transform: none;
}
.sokket-create-card:not(.sokket-text-editor-card) { padding-top: 76px; }
.sokket-create-card:not(.sokket-text-editor-card) > .sokket-create-close,
.st2-dialog-close { top: 18px; left: 17px; right: auto; }
.st2-dialog { padding-top: 76px; }
.st2-dialog-title { padding-right: 0; }
.ma-modal-header { border-bottom-color: #ffffff0f; }
.ma-modal:not(.shop-modal-open) .ma-modal-header { position: relative; min-height: 78px; box-sizing: border-box; }
.ma-modal:not(.shop-modal-open) .ma-modal-title { padding-left: 53px; }
.ma-modal:not(.shop-modal-open) .ma-modal-close { position: absolute; top: 18px; left: 17px; }
.lfg-wizard-close { top: 17px; left: 17px; right: auto; }
.lfg-wizard-head { background: var(--sok-modal-surface); }
.music-modal-sheet,.cp-action-sheet { border-radius: 20px 20px 0 0; }
.music-modal-grabber,.ma-modal-grabber { background: #ffffff24; }
.cropper-header { background: var(--sok-modal-surface); }
.market-dialog .dialog-close {
    top: 16px; left: 16px; right: auto; border-radius: 50%;
    background-color: #ffffff12; background-image: none;
    color: #fff; box-shadow: 0 5px 16px #0004;
    text-shadow: none; transform: none;
    outline: 4px solid transparent; outline-offset: 0;
    transition: background-color .2s ease,outline-color var(--sok-modal-motion),outline-offset var(--sok-modal-motion);
}
.market-dialog .dialog-close:is(:hover,:focus-visible,:active) {
    background-color: #ffffff24; background-image: none;
    color: #fff; box-shadow: 0 5px 16px #0004; transform: none;
    outline-color: var(--sok-modal-ring); outline-offset: 4px;
}
.market-dialog h2 { padding-left: 44px; }
.market-dialog::backdrop,.gift3-dialog::backdrop,.gift3-value-dialog::backdrop {
    background: #05050acd;
    backdrop-filter: blur(9px);
}
.gift3-dialog .gift3-content,.gift3-value-dialog .gift3-content { background: var(--sok-modal-surface); }
.gift3-dialog .gift3-menu,.gift3-value-dialog .gift3-menu { background: var(--sok-modal-surface); border: 1px solid var(--sok-modal-border); box-shadow: none; }
.gift3-dialog .gift3-icon,.gift3-value-dialog .gift3-icon { position: absolute; }
.room-modal-card.rum-card { background: var(--sok-modal-surface); border-color: var(--sok-modal-border); }
.room-modal-card.rum-card .rum-head { background-color: var(--sok-modal-surface); }
#roomUserModal .rum-close { top: 15px; left: 15px; right: auto; z-index: 7; }
#roomUserModal .rum-ident { padding-left: 36px; }
#roomEditModal .room-modal-card { background: var(--sok-modal-surface); border-color: var(--sok-modal-border); }
#roomUserModal button,#roomEditModal button {
    outline: 4px solid transparent; outline-offset: 0;
    transition: background-color .2s ease,color .2s ease,
        outline-color var(--sok-modal-motion),outline-offset var(--sok-modal-motion);
}
#roomUserModal button:is(:hover,:focus-visible,:active):not(:disabled),
#roomEditModal button:is(:hover,:focus-visible,:active):not(:disabled) {
    outline-color: var(--sok-modal-ring); outline-offset: 4px;
    filter: none; transform: none;
}
#roomUserModal :is(.rum-act,.rmm-item,.uvp-mute-btn) {
    border-radius: 999px; background: var(--sok-modal-control); border-color: #ffffff0f;
}
#roomEditModal .room-modal-input {
    background: var(--sok-modal-field); border-color: #a18aff24;
}
#roomEditModal .room-modal-input:focus { border-color: var(--sok-modal-ring); box-shadow: 0 0 0 3px #a990ff20; }
#roomEditModal .room-modal-confirm { color: var(--sok-modal-accent); }
#roomSettingsModal .room-settings-save {
    background: var(--sok-modal-control);
    background-image: none;
    box-shadow: none;
    color: var(--sok-modal-accent);
}
#roomSettingsModal .room-settings-save:is(:hover,:focus-visible,:active):not(:disabled) {
    background: #956ffb14;
    color: #b99dff;
}
#folderSettingsModal .modal-header { border-bottom-color: #ffffff0f !important; }
#folderSettingsModal :is(#closeFolderSettings,#backFromFolderEdit),#seenModal > div > div:first-child > i:first-child {
    display: grid; place-items: center; width: 42px; height: 42px;
    border-radius: 50%; background: #ffffff12; color: #fff !important;
    outline: 4px solid transparent; outline-offset: 0;
    transition: background-color .2s ease,outline-color var(--sok-modal-motion),outline-offset var(--sok-modal-motion);
}
#folderSettingsModal :is(#closeFolderSettings,#backFromFolderEdit):is(:hover,:focus-visible),
#seenModal > div > div:first-child > i:first-child:is(:hover,:focus-visible) {
    background: #ffffff24; outline-color: var(--sok-modal-ring); outline-offset: 4px;
}
#groupSettingsModal .sokket-settings-section { background: var(--sok-modal-surface); }
#groupSettingsModal .sokket-settings-footer { margin-top: 24px; }
#groupSettingsModal #settingsMembersList button:not(.sokket-create-secondary),
#groupSettingsModal #settingsMembersList button:not(.sokket-create-secondary):is(:hover,:focus-visible,:active) {
    outline: none !important;
    outline-offset: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    transition: background-color .18s ease, color .18s ease !important;
}
#groupSettingsModal #settingsMembersList button:not(.sokket-create-secondary)::before,
#groupSettingsModal #settingsMembersList button:not(.sokket-create-secondary)::after { content: none !important; }
#chatProfileModal .chat-profile-content {
    box-sizing: border-box; background: var(--sok-modal-surface);
    border: 1px solid var(--sok-modal-border); box-shadow: none;
}
#chatProfileModal .cp-back-btn,
#photoViewer :is(.media-modal-btn,.mv-tool) {
    border: 0; border-radius: 50%;
    background: #ffffff12; color: #fff;
    outline: 4px solid transparent; outline-offset: 0;
    box-shadow: 0 5px 16px #0004;
    transition: background-color .2s ease,outline-color var(--sok-modal-motion),outline-offset var(--sok-modal-motion);
}
#chatProfileModal .cp-back-btn { width: 42px; height: 42px; }
#chatProfileModal .cp-back-btn:is(:hover,:focus-visible,:active),
#photoViewer :is(.media-modal-btn,.mv-tool):is(:hover,:focus-visible,:active):not(:disabled) {
    background: #ffffff24; color: #fff;
    outline-color: var(--sok-modal-ring); outline-offset: 4px;
    filter: none; transform: none;
}
#photoViewer .media-modal-header {
    background: var(--sok-modal-surface);
    border-color: var(--sok-modal-border);
    box-shadow: none;
}
#qrScannerOverlay .qr-confirm-card { background: var(--sok-modal-surface); border-color: var(--sok-modal-border); box-shadow: none; }
.level-modal-ok,.sok-report-footer button,.fp-btn.fp-download,
.pm-confirm .pm-button {
    border: 0; border-radius: 999px; background: var(--sok-modal-control);
    box-shadow: none; color: var(--sok-modal-accent);
}
.level-modal-ok:is(:hover,:focus-visible,:active),
.sok-report-footer button:is(:hover,:focus-visible,:active):not(:disabled),
.fp-btn.fp-download:is(:hover,:focus-visible,:active),
.pm-confirm .pm-button:is(:hover,:focus-visible,:active):not(:disabled) {
    background: #956ffb14; color: #b99dff; filter: none; transform: none;
}
.sok-report-head-icon { display: none; }
.sok-report-head .sok-report-close { order: -1; }
.sok-report-reason,.sok-report-tile,.sok-report-action,
.sok-report-entity,.sok-report-note { background: var(--sok-modal-surface); border-color: #ffffff14; }
.sok-report-reason:is(:hover,:focus-visible),
.sok-report-footer button:is(:hover,:focus-visible):not(:disabled) { transform: none; }
.sok-report-footer .sok-report-secondary { color: #d6d1e0; }
.sok-report-footer .sok-report-primary.danger {
    background: #ff47571a; box-shadow: none; color: #ff8b95;
}
.sok-report-footer .sok-report-primary.danger:is(:hover,:focus-visible,:active):not(:disabled) {
    background: #ff475728; color: #ffb6bf;
}
.onlyid-e2ee-actions button[type=submit] {
    background: var(--sok-modal-control); color: var(--sok-modal-accent);
}
.fp-header { border-bottom-color: #ffffff0f; }
.fp-btn.fp-close { width: 42px; min-width: 42px; padding: 0; }
.fp-btn.fp-download { min-height: 42px; }
#photoViewer .pm-confirm { background: var(--sok-modal-surface); border-color: var(--sok-modal-border); }
#roleTagModal #roleTagSave { color: var(--sok-modal-accent) !important; }
#chatBgPickerModal > div > div button:first-child { color: #ff8b95 !important; }

/* Windows download chooser on the public landing page. */
#windowsDialog .dialog {
    padding-top: 76px; border: 1px solid var(--sok-modal-border);
    border-radius: 20px; background: var(--sok-modal-surface);
    box-shadow: none;
}
#windowsDialog .dialog-close {
    top: 18px; left: 17px; right: auto;
    width: 42px; height: 42px; border: 0; border-radius: 50%;
    background: #ffffff12; color: #fff; box-shadow: 0 5px 16px #0004;
    outline: 4px solid transparent; outline-offset: 0;
    transition: background-color .2s ease,outline-color var(--sok-modal-motion),outline-offset var(--sok-modal-motion);
}
#windowsDialog .dialog-actions a {
    min-height: 48px; border: 0; border-radius: 999px;
    background: var(--sok-modal-control); box-shadow: none;
    color: #d6d1e0; text-shadow: none;
    outline: 4px solid transparent; outline-offset: 0;
    transition: background-color .2s ease,color .2s ease,
        outline-color var(--sok-modal-motion),outline-offset var(--sok-modal-motion);
}
#windowsDialog :is(.dialog-close,.dialog-actions a)::before,
#windowsDialog :is(.dialog-close,.dialog-actions a)::after { content: none; }
#windowsDialog :is(.dialog-close,.dialog-actions a):is(:hover,:focus-visible,:active) {
    background: #956ffb14; box-shadow: none; color: #b99dff;
    outline-color: var(--sok-modal-ring); outline-offset: 4px;
    filter: none; transform: none;
}
.sok-bubble-choice:is(:hover,:focus-visible,:active) { transform: none; }

/* Inline legacy colours need an explicit override. These are action buttons,
   never image previews, avatars or selector rows. */
:is(#inviteModal,#chatBgPickerModal,#forwardModal,#adminBroadcastModal,#roleTagModal) > div button,
#groupSettingsModal .sokket-settings-card > div:last-child > div:last-child > button,
#folderSettingsModal .modal-content button {
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--sok-modal-control) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #d6d1e0 !important;
    outline: 4px solid transparent;
    outline-offset: 0;
    transition: background-color .2s ease,color .2s ease,
        outline-color var(--sok-modal-motion),outline-offset var(--sok-modal-motion);
}
:is(#inviteModal,#chatBgPickerModal,#forwardModal,#adminBroadcastModal,#roleTagModal) > div button:is(:hover,:focus-visible,:active):not(:disabled),
#groupSettingsModal .sokket-settings-card > div:last-child > div:last-child > button:is(:hover,:focus-visible,:active):not(:disabled),
#folderSettingsModal .modal-content button:is(:hover,:focus-visible,:active):not(:disabled) {
    background: #956ffb14 !important;
    color: #b99dff !important;
    outline-color: var(--sok-modal-ring);
    outline-offset: 4px;
    filter: none;
    transform: none;
}
#memberActionModal #maModalBanner button {
    top: 12px !important; left: 12px !important; right: auto !important;
    width: 42px !important; height: 42px !important;
    border: 0 !important; border-radius: 50% !important;
    background: #ffffff12 !important; color: #fff !important;
    outline: 4px solid transparent; outline-offset: 0;
    transition: background-color .2s ease,outline-color var(--sok-modal-motion),outline-offset var(--sok-modal-motion);
}
#memberActionModal #maModalBanner button:is(:hover,:focus-visible,:active) {
    background: #ffffff24 !important;
    outline-color: var(--sok-modal-ring); outline-offset: 4px;
}
#groupSettingsModal .sokket-settings-card > div:last-child > div:last-child > button:last-child,
#adminBroadcastModal #adminBroadcastSendBtn,
#chatBgPickerModal > div > div button:last-child,
#inviteModal > div button:first-of-type {
    color: var(--sok-modal-accent) !important;
}

@media (max-width: 600px) {
    .ma-modal-content { border-radius: 20px 20px 0 0; }
    .music-modal-sheet,.cp-action-sheet { border-radius: 20px 20px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.modal-overlay,.ma-modal,.st2-dialog-overlay,.music-modal,.cropper-overlay,
        .sok-bubble-picker-overlay,.onlyid-e2ee-overlay,.cp-action-sheet-overlay,
        .incoming-call-modal,.market-dialog,.level-modal-overlay,.sok-report-overlay,
        .fp-overlay,.dialog-backdrop,
        .gift3-dialog,.gift3-value-dialog) button { transition: none; }
}