html {
    height: 100%;
    background-color: var(--sky-background-color);
}

:root {
    -webkit-text-size-adjust: none;
    --sky-red: #e1003a;
    --sky-dark-blue: #001b5a;
    --sky-background-color: #002A8B;
    --sky-highlight-color: #3F61B0;
    --sky-quote-color: #0039bc;
    --sky-channel-link-color: #9cbaff;
    --sky-bubble-color: #001c5e;
    --sky-my-bubble-color: #0040A8;
    --sky-message-selected-color: rgba(0, 78, 174, 0.5);
    --sky-placeholder-color: #acacac;
    scrollbar-color: #3B6BB5 transparent;
    --sky-icon-control-size: 20px;
    --sky-icon-control-margin: 13px;
    --sky-header-control-padding: 11px;
    --sky-header-global-height: 50px;
    --sky-header-context-height: 45px;
    --sky-choice-card-background: rgba(255, 255, 255, 0.08);
    --sky-choice-card-background-hover: rgba(255, 255, 255, 0.12);
    --sky-choice-card-background-active: rgba(255, 255, 255, 0.18);
    --sky-choice-card-border: rgba(255, 255, 255, 0.14);
    --sky-choice-card-border-active: #FFFFFF;
    --sky-choice-card-border-disabled: rgba(255, 255, 255, 0.22);
    --sky-choice-card-text: #FFFFFF;
    --sky-choice-card-text-muted: rgba(255, 255, 255, 0.78);
    --sky-choice-card-text-disabled: rgba(255, 255, 255, 0.6);
    --profile-distance-slider-track-color: #8fdfff;
    --profile-distance-slider-track-background: rgba(255, 255, 255, 0.16);
    --profile-distance-slider-thumb-border-color: rgba(0, 0, 0, 0.12);
    --profile-distance-slider-focus-ring: rgba(143, 223, 255, 0.45);
    --sky-modo-msg-control-color: #FFFFFF;
    --sky-modo-msg-control-opacity: 0.75;
    --sky-modo-msg-control-opacity-hover: 1;
    --sky-choice-card-disabled-opacity: 0.5;
    color-scheme: light;
}

body {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--sky-background-color);
    font-family: system-ui, "Segoe UI", "Helvetica Neue", Helvetica, Arial ,sans-serif;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 0;
    width: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    scrollbar-width: thin;
}

button, [role="button"] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

[contenteditable], .selectable {
    -webkit-user-select: text;
    user-select: text;
}
[contenteditable][placeholder]:empty::before {
    content: attr(placeholder);
    color: var(--sky-placeholder-color);
    transition: opacity 0.18s ease;
}

[contenteditable][placeholder]:empty:focus::before {
    content: "";
}

.box_saisie_bottom_container:has(.pm-voice-recorder-control.recording) .msg-form-input[placeholder]:empty::before,
.box_saisie_bottom_container:has(.pm-voice-recorder-control.cancelling) .msg-form-input[placeholder]:empty::before {
    opacity: 0;
}

#skychat-info {
    display: flex;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    flex-grow: 1;
    align-items: center;
}

#skychat-info a {
    text-decoration: underline;
    color: #ffffff;
    font-weight: bold;
}

#js-skychat {
    position: relative; /* pour #js-killed */
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    text-align: left;
    min-height: 0;
    overflow: hidden;
}

#chat-shell {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

span.modo-msg-controls {
    vertical-align: text-bottom;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 4px;
    color: var(--sky-modo-msg-control-color);
}

svg.modo-msg-control {
    fill: currentColor;
    opacity: var(--sky-modo-msg-control-opacity);
    cursor: pointer;
    transition: opacity 0.15s ease;
}

svg.modo-msg-control:hover {
    opacity: var(--sky-modo-msg-control-opacity-hover);
}

#toaster {
    display: none;
    width: min(400px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    height: fit-content;
    max-height: calc(100vh - 60px);
    z-index: 2147483647;

    position: fixed;
    inset: auto auto 30px 50%;
    margin: 0;
    transform: translateX(-50%);
    background-color: #383838;
    color: #F0F0F0;
    padding: 10px;
    text-align: center;
    border-radius: 2px;
    border: none;
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
    overflow: hidden;
}

#toaster:popover-open {
    display: block;
}

#toaster.show {
    animation: fadeIn 1s forwards;
    opacity: 1;
}
#toaster:not(.show) {
    animation: fadeOut 1s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0;}
}

/* Modal dialog (native <dialog>) */
#dialog {
    display: none;
    flex-direction: column;
    background-color: var(--sky-background-color);
    border: none;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    text-align: center;
    overflow: hidden;
    /* Animation: fade + scale */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease-out,
               transform 0.2s ease-out,
               overlay 0.2s ease-out allow-discrete,
               display 0.2s ease-out allow-discrete;
}
#dialog[open] {
    display: flex;
    opacity: 1;
    transform: scale(1);
}
@starting-style {
    #dialog[open] {
        opacity: 0;
        transform: scale(0.95);
    }
}
#dialog::backdrop {
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s ease-out,
               overlay 0.2s ease-out allow-discrete,
               display 0.2s ease-out allow-discrete;
}
#dialog[open]::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
@starting-style {
    #dialog[open]::backdrop {
        background: rgba(0, 0, 0, 0);
    }
}

#dialog-titlebar {
    display: flex;
    padding: 0 12px;
    padding-right: max(env(safe-area-inset-right), 12px);
    padding-left: max(env(safe-area-inset-left), 12px);
    align-items: center;
    height: 48px;
    background-color: var(--sky-red);
    color: #FFFFFF;
}

#dialog-title {
    font-weight: bold;
    font-size: larger;
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

#dialog-close-button {
    height: 48px;
    width: 48px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    background-size: 24px;
}

#dialog-close-button .fa-xmark {
    font-size: 24px;
    line-height: 1;
}

#dialog-content {
    display: flex;
    min-width: 100%;
    flex-direction: column;
    justify-content: space-around;
    margin: 0 auto;
    padding: 16px max(env(safe-area-inset-right), 16px) max(env(safe-area-inset-bottom), 16px) max(env(safe-area-inset-left), 16px);
    flex-grow: 1;
    color: #FFFFFF;
    overflow-y: auto;
    gap: 10px;
}
#dialog-content:focus {
    outline: none;
}

.ctxMenuSeparator {
    width: 50%;
    margin: auto;
    border: 1px solid rgb(1, 1, 1, 0.5);
}

.userMenu {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    flex-direction: column;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.2s ease-out;
    z-index: 200;
}
.userMenu-panel {
    background-color: var(--sky-background-color);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    display: flex;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width: 100%;
    box-sizing: border-box;
}
.userMenu-list {
    white-space: nowrap;
    display: grid;
    grid-template-columns: max-content;
    justify-content: center;
    gap: 20px;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) 20px;
    width: 100%;
    box-sizing: border-box;
}
.userMenu.show {
    background-color: rgba(0, 0, 0, 0.5);
}
.userMenu.show > .userMenu-panel {
    transform: translateY(0);
}
.userMenu--popover {
    justify-content: flex-start;
    align-items: flex-start;
    background-color: rgba(0, 0, 0, 0);
}
.userMenu--popover.show {
    background-color: rgba(0, 0, 0, 0);
}
.userMenu--popover > .userMenu-panel {
    position: fixed;
    width: fit-content;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 16px));
    border-radius: 12px;
    transform: translateY(6px) scale(0.98);
    transform-origin: top left;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}
.userMenu--popover.show > .userMenu-panel {
    transform: translateY(0) scale(1);
}
.userMenu--popover .userMenu-list {
    min-width: 220px;
    width: fit-content;
}
.inputMenu li {
    display: flex;
}
.userMenu-list > li {
    min-height: 30px;
    padding: 0 22px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
.userMenu-list > li:not(.context-menu-user-header) {
    background-color: var(--sky-dark-blue);
    border-radius: 10px;
    color: white;
    font-weight: bold;
    cursor: pointer; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.12s ease-out;
}
.userMenu-list > li:not(.context-menu-user-header):active {
    background-color: rgba(255, 255, 255, 0.22);
}
.userMenu-list > li i {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    text-align: center;
    font-size: 17px;
    line-height: 30px;
    color: inherit;
}
.userMenu-list > li span {
    display: block;
    width: calc(100% - 39px);
    margin-left: 39px;
    min-width: 0;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.userMenu-list > li.no-icon span {
    width: 100%;
    margin-left: 0;
}

:root {
    --msg-form-input-height: 36px;
    --msg-form-input-button-width: 39px;
    --msg-box-saisie-gap: 8px;
    --msg-input-action-offset: 0px;
    --msg-form-input-background-color: #ffffff;
    --msg-form-input-text-color: #002a8b;
    --box-saisie-replyto-background-color: #00548D;
    --box-saisie-replyto-text-color: #FFFFFF;
    --chat-area-border-color: rgba(255, 255, 255, 0.08);
    --msg-popover-border-color: rgba(0, 34, 91, 0.12);
    --user-menu-border-color: rgba(255, 255, 255, 0.16);
    --msg-popover-shadow: 0 12px 30px rgba(0, 34, 91, 0.18);
    --msg-popover-radius: 10px;
    --msg-button-subtle-hover-bg: rgba(0, 102, 204, 0.1);
    --msg-button-subtle-active-bg: rgba(0, 102, 204, 0.2);
    --box-saisie-padding-left: max(env(safe-area-inset-left), var(--sky-header-control-padding));
    --box-saisie-padding-right: max(env(safe-area-inset-right),var(--sky-header-control-padding));

    /* Gender colors */
    --color-gender-man: #00b2f5;
    --color-gender-woman: #f472b6;
    --color-gender-undefined: #aaaaaa;
}

/* Composant dropup menu : menu qui s'affiche au dessus de la barre de saisie */
.dropupMenu,
.emoji-picker-panel {
    position: absolute;
    border: 1px solid var(--msg-popover-border-color);
    border-radius: var(--msg-popover-radius);
    background: var(--msg-form-input-background-color);
    color: var(--msg-form-input-text-color);
    box-shadow: var(--msg-popover-shadow);
}

.dropupMenu {
    display: flex;
    flex-direction: column;
    left: var(--box-saisie-padding-left);
    width: calc(100% - var(--box-saisie-padding-left) - var(--msg-form-input-button-width) - var(--msg-box-saisie-gap) - var(--box-saisie-padding-right));
    bottom: calc(var(--msg-form-input-height) + 16px);
    overflow: hidden;
    font-size: small;
    z-index: 10;
    padding: 8px 0;
}
.dropupMenu li {
    display: flex;
    align-items: center;
    gap: var(--msg-box-saisie-gap);
}

#highlightmenu li {
    padding: 2px 15px;
    color: #00B0F4;
}
#highlightmenu span.displayname {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;    
}
#highlightmenu span.username {
    color: #B0B0B0;
}

/* Historique de saisie (menu overlay long-press) */
.inputHistoryMenu {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 50vh;
    gap: 0;
}
.inputHistoryMenu li {
    padding: 8px 15px;
    color: inherit;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
}
.inputHistoryMenu li:active {
    background-color: rgba(0, 78, 174, 0.15);
}

.context-menu-user-header {
    display: flex;
    pointer-events: none;
}
.context-menu-user-header .userinfo {
    padding-left: 10px;
}

.hidden {
    display: none;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
a *, label {
    cursor: pointer;
}
a {
    text-decoration: none;
    color: #2C88D6;
    font-weight: normal;
}
button {
    display: block;
}

input, textarea, .msg-form-input {
    color: #002a8b;
    font-weight: bold;
}

input:focus, textarea:focus, select:focus, .msg-form-input:focus {
    outline: none;
}

textarea, input[type="text"], input[type="password"] {
    font-family: system-ui, "Segoe UI", "Helvetica Neue", Helvetica, Arial ,sans-serif;
    font-size: unset;
    display: table-cell;
    border-style: none;
    border-radius: 10px;
}

input[type="text"], input[type="password"] {
    height: 36px;
}

input[type="radio"], input[type="checkbox"] {
    width: 18px;
    height: 18px;
    background-color: #E1E1E1;
    vertical-align: middle;
    margin-right: 4px;
}

input[type="radio"] {
    appearance: none;
    border: 4px solid #E1E1E1;
    border-radius: 10px;
}

input[type="radio"]:checked {
    background: grey;
    border: 4px solid #e1e1e1;
}

select {
    appearance: none;
    border: 4px solid #E1E1E1;
    background-color: #E1E1E1;
    vertical-align: middle;
}

/*********************************************** STYLES COMMUNS */
.girl {
    background-image: url(../images/icon-woman.png);
    color: #f54b92 !important;
}
.boy {
    background-image: url(../images/icon-man.png);
    color: #01b8e2 !important;
}
.operator {
    background-image: url(../images/icon-op.png);
}
.halfoperator {
    background-image: url(../images/icon-halfop.png);
}
.voice {
    background-image: url(../images/icon-voice.png);
}
.bot {
    background-image: url(../images/icon-bot.png);
}
.boy, .girl, .operator, .halfoperator, .voice, .bot {
    background-repeat: no-repeat;
    background-position: left center;
}
/* BG images des boutons */
.buttonlink.close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image: none;
}
.buttonlink.close .fa-xmark,
.user-profile-close .fa-xmark {
    line-height: 1;
}
.buttonlink.close.littleclose {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 14px;
    height: 14px;
    font-size: 11px;
}
.buttonlink.users-button {
    background-image: url(../images/users@2x.png?20200126);
    width: 31px;
    height: 34px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.buttonlink {
    padding: 7px;
    color: #fff;
    display: inline-block;
}
.buttonlink.active {
    background-color: #4397E4;
}
/* FORMULAIRES */
.buttonform,
input[type="submit"],
.reportUser-submit {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: none;
    border-radius: 14px;
    background-color: var(--sky-red);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

.buttonform:disabled,
input[type="submit"]:disabled,
.reportUser-submit:disabled {
    background-color: #aba5a6;
    color: #ffffff;
    cursor: not-allowed;
}

#dialog textarea, #dialog input:not([type="submit"]) {
    padding: 4px;
}

#dialog select {
    padding: 8px 10px;
}

.dialog-title-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.dialog-title-icon svg {
    width: 100%;
    height: 100%;
}

.dialog-title-icon circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.dialog-title-icon path {
    fill: currentColor;
}

#dialog-content.reportUser {
    justify-content: flex-start;
}

.reportUser-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 100%;
}

.reportUser-label {
    font-size: 0.95rem;
    text-align: left;
}

.reportUser-form select,
.reportUser-form textarea,
.reportUser-submit {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-sizing: border-box;
    font: inherit;
}

.reportUser-form select,
.reportUser-form textarea {
    background-color: #ffffff;
    color: #001a56;
}

.reportUser-form textarea {
    min-height: 132px;
    padding: 10px 12px;
    resize: vertical;
}

.reportUser-submit {
    min-height: 48px;
    padding: 0 16px;
    border: none;
    border-radius: 14px;
    font-weight: 700;
}

.reportUser-submit:disabled {
    opacity: 0.7;
    cursor: progress;
}

.time {
    color: #cccccc;
    font-size: x-small;
}
/* FIN DES STYLES COMMUNS *********************************/

/*********************************************** STYLES MOBILE FIRST */
ul {
    list-style-type: none;
}

/* Loader */
#page, .killed, .akilled {
    min-height: 100%;
    height: 100%;
}

.fatal-error {
    position: absolute;
    padding-top: 120px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #FFFFFF;
    font-weight: bold;
    z-index: 300;
}

#js-killed {
    z-index: 500;
}

.kicked {
    position: absolute;
    inset: 0;
    padding: 20px;
    justify-content: center;
    align-items: center;
    background: #FCC400;
    overflow: auto;
    z-index: 250;
}

.kicked-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: min(100%, 560px);
    margin: auto;
}

.kicked-media {
    position: relative;
    width: min(100%, 460px);
}

.kicked-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.kicked-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    background-image: none;
    border: 0;
    color: #FFFFFF;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
    box-shadow: none;
}

.kicked-close .fa-xmark {
    font-size: 22px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85));
}

.kicked-message {
    display: block;
    max-width: 34rem;
    color: #FFFFFF;
    font-size: 1.05em;
    line-height: 1.45;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.killed {
    background: #C90303 url(../images/killed.jpg) no-repeat center center;
}
.akilled {
    background: #252424 url(../images/akilled.jpg) no-repeat center center;
}

/* Styles des textes dans les chans */
.white {
    color: #FFFFFF;
}
.blue {
    color: var(--color-gender-man);
}
.pink {
    color: var(--color-gender-woman);
}
.black {
    color: var(--color-gender-undefined);
}
.join {
    color: #5bb30f;
}
.part, .quit {
    color: #CCCCCC;
}
.action {
    color: #fb9cfb;
}
.mode, .ban {
    color: #deb;
}
.kick {
    color: #FF7C7C;
}
.username {
    color: inherit;
} 
button {
    border-radius: 10px;
}

/* Navigation entre salons */
#left-nav-container {
    position: absolute;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    visibility: collapse;
    width: min(200px, 80vw);
    min-width: min(200px, 80vw);
    max-width: min(200px, 80vw);
    height: 100%;
    background-color: var(--sky-dark-blue);
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-100%);
    pointer-events: none;
    z-index: 5;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-property: transform, visibility;
    --left-nav-container-gap: 10px;
    gap: var(--left-nav-container-gap);
    scrollbar-width: none;
    padding-bottom: env(safe-area-inset-bottom);
}

#left-nav-bottom {
    margin-top: auto;
    padding-bottom: 10px;
}

#left-nav-container.show {
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

#left-nav-container.show ~ #right-container {
    filter: brightness(0.5);
}

#left-channel-nav, #left-pm-nav, #left-settings-nav {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

#left-channel-nav li, #left-pm-nav li, #left-settings-nav li {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    border-radius: 2px;
    position: relative;
}

#left-channel-nav li.left-nav-item-draggable,
#left-pm-nav li.left-nav-item-draggable,
#left-settings-nav li.left-nav-item-draggable {
    cursor: grab;
}

#left-channel-nav.left-nav-is-dragging,
#left-pm-nav.left-nav-is-dragging,
#left-settings-nav.left-nav-is-dragging {
    user-select: none;
}

#left-channel-nav li.left-nav-item-dragging,
#left-pm-nav li.left-nav-item-dragging,
#left-settings-nav li.left-nav-item-dragging {
    opacity: 0.55;
    cursor: grabbing;
}

#left-channel-nav li.left-nav-drop-target-before::before,
#left-pm-nav li.left-nav-drop-target-before::before,
#left-settings-nav li.left-nav-drop-target-before::before,
#left-channel-nav li.left-nav-drop-target-after::after,
#left-pm-nav li.left-nav-drop-target-after::after,
#left-settings-nav li.left-nav-drop-target-after::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: rgba(67, 151, 228, 0.85);
    pointer-events: none;
}

#left-channel-nav li.left-nav-drop-target-before::before,
#left-pm-nav li.left-nav-drop-target-before::before,
#left-settings-nav li.left-nav-drop-target-before::before {
    top: 0;
}

#left-channel-nav li.left-nav-drop-target-after::after,
#left-pm-nav li.left-nav-drop-target-after::after,
#left-settings-nav li.left-nav-drop-target-after::after {
    bottom: 0;
}

#left-channel-nav li:not(:last-child)::after, #left-pm-nav li:not(:last-child)::after, #left-settings-nav li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 10px;
    bottom: 0;
    left: 10px;
    height: 1px;
    background: rgba(113, 209, 227, 0.1);
    pointer-events: none;
}

#left-channel-nav > li.active, #left-pm-nav > li.active, #left-settings-nav > li.active {
    background-color: rgba(67, 151, 228, 0.50);
}

.left-nav-item-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 45px;
    color: #FFFFFF;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: color .3s ease-in-out;
    padding: 4px 10px;
}

.left-nav-section-divider {
    width: calc(100% - 20px);
    height: 1px;
    margin: 0 10px;
    background: rgba(133, 133, 133, 0.7);
    flex: 0 0 auto;
}

/* Nouvelle activité sur les salons */
#left-channel-nav > li.new_activity, #left-pm-nav > li.new_activity {
    background: rgba(255, 150, 0, 0.25);
}
#left-channel-nav li.new_activity_msg, #left-pm-nav li.new_activity_msg {
    background: rgba(255, 150, 0, 0.5)
}
#left-channel-nav > li.highlight, #left-pm-nav > li.highlight {
    background: var(--sky-highlight-color);
}
#left-channel-nav > li.highlight, #left-pm-nav > li.highlight {
    color: #FF0000;
}

.chan-nav-img {
    height: 30px;
    width: 30px;
    display: inline-block;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
}

.nav-label {
    margin-left: 10px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.embedded #chat-logout-form {
    display: none;
}

.chat-logout-link {
    display: block;
    color: #FFFFFF;
    text-decoration: underline;
    text-align: center;
    padding: 12px;
    font-size: 14px;
}
.chat-logout-link:hover {
    text-decoration: none;
}

/* Conteneur des vues */
#right-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: auto;
    overflow: hidden;
    background-color: var(--sky-background-color);
}

#right-container .view {
    display: none;
    max-height: 100%;
    max-width: 100%;
    flex: auto;
}
#right-container .view.active {
    display: flex;
}

.userlist {
    --userlist-inline-padding-right: max(env(safe-area-inset-right), 16px);
    display: flex;
    flex: auto;
    flex-direction: column;
    padding-top: 6px;
    padding-right: var(--userlist-inline-padding-right);
    padding-bottom: max(env(safe-area-inset-bottom), 6px);
    padding-left: max(env(safe-area-inset-left), 16px);
    overflow-y: scroll;
    overflow-x: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
}

.user-list-area {
    display: none;
    position: relative;
    flex-direction: column;
    min-width: 0px;
    max-width: 100%;
    overflow: hidden;
}

.profile-sidebar-area {
    display: none;
    position: relative;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    background-color: var(--sky-background-color);
}

.profile-sidebar-content {
    display: flex;
    flex: auto;
    min-height: 0;
}

.header-control-button {
    appearance: none;
    border: 0;
    padding: var(--sky-header-control-padding);
    box-sizing: content-box;
    width: var(--sky-icon-control-size);
    height: var(--sky-icon-control-size);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-size: contain;
    flex-shrink: 0;
    transition: background-color 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}

.header-control-button.hidden {
    display: none;
}

#btn_openuserlist {
    background-image: url("../images/online.svg?20231025");
}

#btn_conversations {
    background-image: none;
    color: #ffffff;
    position: relative;
    overflow: visible;
}

#btn_openuserlist.active, #btn_conversations.active, #btn_menu.active, #btn_profilesearch.active {
    background-color: #4397E4;
    filter: brightness(1.15) saturate(1.15);
    transform: translateY(-1px);
}

#btn_conversations i {
    font-size: 18px;
    line-height: 1;
}

.btn-conversations-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px #FFF;
}

#btn_menu {
    color: #ffffff;
    background-image: none;
}

#btn_menu i {
    font-size: 18px;
    line-height: 1;
}

#btn_menu.back {
    background-image: url("../images/back.svg");
    background-size: contain;
}

#btn_menu.back i {
    display: none;
}

#btn_pm_actions {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>');
}

#btn_profilesearch {
    color: #ffffff;
}

#btn_profilesearch i {
    font-size: 17px;
    line-height: 1;
}

#btn_closeview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background-image: none;
}

#btn_closeview .fa-xmark {
    font-size: 17px;
    line-height: 1;
}

.user-list-area-header {
    display: none;
    position: relative;
    align-items: center;
    justify-content: flex-end;
    padding: 2px max(env(safe-area-inset-right), 4px) 2px max(env(safe-area-inset-left), 4px);
    flex-shrink: 0;
}

.user-list-area.has-online-grid .user-list-area-header {
    display: flex;
}

.user-list-area-status {
    display: none;
    padding: 12px max(env(safe-area-inset-right), 16px) 0 max(env(safe-area-inset-left), 16px);
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    line-height: 1.4;
}

.user-list-area-status:empty {
    display: none;
}

.user-list-area.show-grid-status .user-list-area-status {
    display: block;
}

.user-list-area-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.user-list-area-count {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: #FFF;
    white-space: nowrap;
    pointer-events: none;
}

.user-list-layout-toggle {
    appearance: none;
    border: 1px solid var(--sky-choice-card-border);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    cursor: pointer;
    background-color: var(--sky-choice-card-background);
    color: var(--sky-choice-card-text);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.user-list-layout-toggle:hover {
    background-color: var(--sky-choice-card-background-hover);
}

.user-list-layout-toggle i {
    font-size: 14px;
    line-height: 1;
    color: currentColor;
}

.user-list-layout-toggle:active {
    background-color: var(--sky-choice-card-background-active);
    border-color: var(--sky-choice-card-border-active);
}

.user-list-layout-toggle:focus-visible {
    outline: 2px solid rgba(0, 178, 245, 0.45);
    outline-offset: 2px;
}

.usergrid {
    display: none;
    flex: auto;
    min-height: 0;
    margin: 0;
    padding: 0px max(env(safe-area-inset-right), 2px) env(safe-area-inset-bottom) max(env(safe-area-inset-left), 2px);
    list-style: none;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 2px;
    align-content: start;
    transform: translateY(var(--usergrid-pull-offset, 0px));
    transition: transform 0.18s ease;
}

.user-list-area.online-layout-grid .userlist {
    display: none;
}

.user-list-area.online-layout-grid .usergrid {
    display: grid;
}

.user-list-area.online-layout-grid.show-grid-status .usergrid {
    padding-top: 2px;
}

.usergrid-card {
    display: block;
    min-width: 0;
}

.usergrid-card-button {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: var(--sky-dark-blue);
}

.usergrid-avatar {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.usergrid-displayname {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 4px;
    font-size: 12px;
    font-weight: 550;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    background: rgba(0, 0, 0, 0.75);    
}

@media screen and (max-width: 767px) {
    #header-topic {
        display: none;
    }

    .usergrid {
        grid-template-columns: repeat(auto-fill, minmax(clamp(100px, calc((100% - 4px) / 3), 300px), 1fr));
    }

    .usergrid-card-button {
        max-width: 300px;
        margin-inline: auto;
    }
}

.profiles-search-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 100%;
    background-color: var(--sky-background-color);
}

.profile-search-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding:
        max(env(safe-area-inset-top), 20px)
        max(env(safe-area-inset-right), 20px)
        max(env(safe-area-inset-bottom), 20px)
        max(env(safe-area-inset-left), 20px);
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.profile-search-panel-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-search-panel-copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.5;
}

.profile-search-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.profile-search-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-search-field--filters {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.profile-search-field--filters .profile-search-label {
    flex: 0 0 auto;
    width: 100%;
}

.profile-search-filter-options {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.profile-search-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 700;
}

.profile-search-field input:not([type="hidden"]):not(.profile-search-age-slider-input) {
    min-height: var(--msg-form-input-height);
    border: none;
    border-radius: 8px;
    padding: 8px;
    background-color: var(--msg-form-input-background-color);
    color: var(--msg-form-input-text-color);
    font: inherit;
}

.profile-search-field input:not([type="hidden"]):not(.profile-search-age-slider-input)::placeholder {
    color: var(--sky-placeholder-color);
    opacity: 1;
    transition: opacity 0.18s ease;
}

.profile-search-field input:not([type="hidden"]):not(.profile-search-age-slider-input):focus::placeholder {
    opacity: 0;
}

.profile-search-field input:not([type="hidden"]):not(.profile-search-age-slider-input):focus {
    outline: 2px solid rgba(0, 178, 245, 0.45);
    outline-offset: 2px;
}

.profile-search-gender-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-search-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: var(--msg-form-input-height);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--sky-choice-card-border);
    background-color: var(--sky-choice-card-background);
    color: var(--sky-choice-card-text);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.profile-search-checkbox:not(:has(input:checked)) {
    background-color: var(--sky-choice-card-background);
}

.profile-search-checkbox:hover {
    background-color: var(--sky-choice-card-background-hover);
}

.profile-search-checkbox input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.profile-search-checkbox span {
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 700;
}

.profile-search-checkbox:has(input:checked) {
    background-color: var(--sky-choice-card-background-active);
    border-color: var(--sky-choice-card-border-active);
    color: var(--sky-choice-card-text);
    transform: translateY(-1px);
}

.profile-search-checkbox:has(input:disabled) {
    opacity: var(--sky-choice-card-disabled-opacity);
    border-color: var(--sky-choice-card-border-disabled);
    background-color: var(--sky-choice-card-background);
    cursor: not-allowed;
    transform: none;
}

.profile-search-checkbox:has(input:disabled) span {
    color: var(--sky-choice-card-text-disabled);
}

.profile-search-checkbox:has(input:focus-visible) {
    outline: 2px solid rgba(0, 178, 245, 0.45);
    outline-offset: 2px;
}

.profile-search-distance-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
}

.profile-search-distance-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: var(--msg-form-input-height);
    min-height: var(--msg-form-input-height);
    padding: 0 14px;
    border: 1px solid var(--sky-choice-card-border);
    border-radius: 999px;
    background-color: var(--sky-choice-card-background);
    color: var(--sky-choice-card-text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.profile-search-distance-button:not(.is-active) {
    background-color: var(--sky-choice-card-background);
}

.profile-search-distance-button:hover {
    background-color: var(--sky-choice-card-background-hover);
}

.profile-search-distance-button.is-active {
    background-color: var(--sky-choice-card-background-active);
    border-color: var(--sky-choice-card-border-active);
}

.profile-search-distance-button.is-disabled {
    opacity: var(--sky-choice-card-disabled-opacity);
    border-color: var(--sky-choice-card-border-disabled);
    background-color: var(--sky-choice-card-background);
    color: var(--sky-choice-card-text-disabled);
    cursor: not-allowed;
}

.profile-search-distance-button.is-disabled:hover {
    background-color: var(--sky-choice-card-background);
}

.profile-search-distance-button:focus-visible,
.profile-search-distance-clear:focus-visible {
    outline: 2px solid rgba(0, 178, 245, 0.45);
    outline-offset: 2px;
}

.profile-search-distance-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--sky-choice-card-border);
    border-radius: 999px;
    background-color: var(--sky-choice-card-background);
    color: var(--sky-choice-card-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.profile-search-distance-clear:hover {
    background-color: var(--sky-choice-card-background-hover);
}

.profile-search-distance-clear:disabled,
.profile-search-distance-clear[hidden] {
    display: none;
}

.profile-search-distance-popin {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.profile-search-distance-popin-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.profile-search-distance-popin-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.46);
    cursor: pointer;
}

.profile-search-distance-popin-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 20px;
    border-radius: 24px;
    background: var(--sky-background-color);
    border: 1px solid var(--sky-choice-card-border);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
    overflow: auto;
}

.profile-search-distance-popin-body {
    min-height: 0;
}

.profile-search-distance-popin-footer {
    display: flex;
    justify-content: flex-end;
}

.profile-search-age-slider-host {
    min-width: 0;
}

.profile-search-age-slider,
.profile-distance-slider {
    display: flex;
    flex-direction: column;
    gap: 8px;
    --profile-slider-thumb-size: 40px;
    --profile-slider-track-height: 4px;
}

.profile-search-age-slider {
    --profile-age-slider-min-ratio: 0;
    --profile-age-slider-max-ratio: 1;
    --profile-age-slider-thumb-size: var(--profile-slider-thumb-size);
    --profile-age-slider-track-height: var(--profile-slider-track-height);
    --profile-distance-slider-progress-ratio: 0.778;
}

.profile-distance-slider {
    --profile-distance-slider-thumb-size: var(--profile-slider-thumb-size);
    --profile-distance-slider-track-height: var(--profile-slider-track-height);
}

.profile-search-age-slider-header,
.profile-distance-slider-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.profile-search-age-slider-title,
.profile-distance-slider-title {
    color: var(--sky-choice-card-text);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.profile-search-age-slider-value,
.profile-distance-slider-value {
    color: var(--sky-choice-card-text-muted);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.profile-search-age-slider-rail,
.profile-distance-slider-rail {
    position: relative;
}

.profile-search-age-slider-rail {
    display: grid;
    align-items: center;
}

.profile-distance-slider-rail {
    display: grid;
    align-items: center;
}

.profile-search-age-slider-track,
.profile-distance-slider-track {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    border-radius: 999px;
    pointer-events: none;
}

.profile-distance-slider-track {
    height: var(--profile-slider-track-height);
    background: linear-gradient(
        90deg,
        var(--profile-distance-slider-track-color) 0,
        var(--profile-distance-slider-track-color)
            calc((100% - var(--profile-distance-slider-thumb-size)) * var(--profile-distance-slider-progress-ratio) + (var(--profile-distance-slider-thumb-size) / 2)),
        var(--profile-distance-slider-track-background)
            calc((100% - var(--profile-distance-slider-thumb-size)) * var(--profile-distance-slider-progress-ratio) + (var(--profile-distance-slider-thumb-size) / 2)),
        var(--profile-distance-slider-track-background) 100%
    );
}

.profile-search-age-slider-track {
    height: var(--profile-slider-track-height);
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    background: linear-gradient(
        90deg,
        var(--profile-distance-slider-track-background) 0,
        var(--profile-distance-slider-track-background)
            calc((100% - var(--profile-age-slider-thumb-size)) * var(--profile-age-slider-min-ratio) + (var(--profile-age-slider-thumb-size) / 2)),
        var(--profile-distance-slider-track-color)
            calc((100% - var(--profile-age-slider-thumb-size)) * var(--profile-age-slider-min-ratio) + (var(--profile-age-slider-thumb-size) / 2)),
        var(--profile-distance-slider-track-color)
            calc((100% - var(--profile-age-slider-thumb-size)) * var(--profile-age-slider-max-ratio) + (var(--profile-age-slider-thumb-size) / 2)),
        var(--profile-distance-slider-track-background)
            calc((100% - var(--profile-age-slider-thumb-size)) * var(--profile-age-slider-max-ratio) + (var(--profile-age-slider-thumb-size) / 2)),
        var(--profile-distance-slider-track-background) 100%
    );
}

input.profile-distance-slider-input {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    z-index: 1;
    display: block;
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
    font: inherit;
    font-weight: normal;
    line-height: 1;
    color: transparent;
}

.profile-search-age-slider-input {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    z-index: 1;
    display: block;
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
    font: inherit;
    font-weight: normal;
    line-height: 1;
    color: transparent;
    pointer-events: none;
}

.profile-search-age-slider-input--min {
    z-index: 2;
}

.profile-search-age-slider-input--max {
    z-index: 1;
}

.profile-distance-slider-input::-webkit-slider-runnable-track {
    height: var(--profile-slider-track-height);
    background: transparent;
    border: none;
}

.profile-search-age-slider-input::-webkit-slider-runnable-track {
    height: var(--profile-slider-track-height);
    background: transparent;
    border: none;
}

.profile-distance-slider-input::-moz-range-track {
    height: var(--profile-slider-track-height);
    background: transparent;
    border: none;
}

.profile-search-age-slider-input::-moz-range-track {
    height: var(--profile-slider-track-height);
    background: transparent;
    border: none;
}

.profile-distance-slider-input::-webkit-slider-thumb {
    width: var(--profile-slider-thumb-size);
    height: var(--profile-slider-thumb-size);
    border: 8px solid var(--profile-distance-slider-thumb-border-color);
    border-radius: 50%;
    background: #ffffff;
    background-clip: content-box;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    margin-top: calc((var(--profile-slider-track-height) - var(--profile-slider-thumb-size)) / 2);
    box-shadow: 0 0 0 2px transparent;
}

.profile-search-age-slider-input::-webkit-slider-thumb {
    width: var(--profile-slider-thumb-size);
    height: var(--profile-slider-thumb-size);
    border: 8px solid var(--profile-distance-slider-thumb-border-color);
    border-radius: 50%;
    background: #ffffff;
    background-clip: content-box;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    margin-top: calc((var(--profile-slider-track-height) - var(--profile-slider-thumb-size)) / 2);
    box-shadow: 0 0 0 2px transparent;
    pointer-events: auto;
}

.profile-distance-slider-input::-moz-range-thumb {
    width: var(--profile-slider-thumb-size);
    height: var(--profile-slider-thumb-size);
    border: 8px solid var(--profile-distance-slider-thumb-border-color);
    border-radius: 50%;
    background: #ffffff;
    background-clip: content-box;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px transparent;
}

.profile-search-age-slider-input::-moz-range-thumb {
    width: var(--profile-slider-thumb-size);
    height: var(--profile-slider-thumb-size);
    border: 8px solid var(--profile-distance-slider-thumb-border-color);
    border-radius: 50%;
    background: #ffffff;
    background-clip: content-box;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px transparent;
    pointer-events: auto;
}

.profile-distance-slider-input:focus-visible::-webkit-slider-thumb,
.profile-distance-slider-input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--profile-distance-slider-focus-ring);
}

.profile-search-age-slider-input:focus-visible::-webkit-slider-thumb,
.profile-search-age-slider-input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--profile-distance-slider-focus-ring);
}

.profile-search-age-slider-disabled {
    opacity: var(--sky-choice-card-disabled-opacity);
}

.profile-search-age-slider-disabled .profile-search-age-slider-value {
    color: var(--sky-choice-card-text-disabled);
}

.profile-search-age-slider-disabled .profile-search-age-slider-input {
    cursor: not-allowed;
}

.profile-distance-slider-disabled {
    opacity: var(--sky-choice-card-disabled-opacity);
}

.profile-distance-slider-disabled .profile-distance-slider-value {
    color: var(--sky-choice-card-text-disabled);
}

.profile-distance-slider-disabled .profile-distance-slider-input {
    cursor: not-allowed;
}

.profile-distance-slider-input:active {
    cursor: grabbing;
}

.profile-search-submit:disabled {
    opacity: 0.55;
    cursor: wait;
}

.profile-search-submit {
    margin-top: 4px;
}

.profile-search-results-area {
    display: none;
    position: relative;
    flex-direction: column;
    flex: auto;
    min-height: 0;
    min-width: 0;
    background-color: var(--sky-background-color);
}

.profiles-search-view.show-results .profile-search-panel {
    display: none;
}

.profiles-search-view.show-results .profile-search-results-area {
    display: flex;
}

.profile-search-results-header {
    display: flex;
}

.profile-search-back-button {
    appearance: none;
    border: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12) url("../images/back.svg") center / 14px 14px no-repeat;
    flex-shrink: 0;
}

.profile-search-results-status {
    padding: 12px max(env(safe-area-inset-right), 16px) 0 max(env(safe-area-inset-left), 16px);
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    line-height: 1.4;
}

.profile-search-results-status:empty {
    display: none;
}

.profile-search-results-area .userlist,
.profile-search-results-area .usergrid {
    padding-top: 10px;
}

.profile-search-results-area.profile-search-layout-list .profile-search-userlist {
    display: flex;
}

.profile-search-results-area.profile-search-layout-list .profile-search-usergrid {
    display: none;
}

.profile-search-results-area.profile-search-layout-grid .profile-search-userlist {
    display: none;
}

.profile-search-results-area.profile-search-layout-grid .profile-search-usergrid {
    display: grid;
}

.profile-search-result-item {
    cursor: pointer;
}

.profile-search-load-more-item {
    border-bottom: none;
}

.profile-search-load-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    border: 1px dashed rgba(255, 255, 255, 0.26);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    color: #FFF;
    font: inherit;
    font-weight: 700;
}

.profile-search-load-more-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.profile-search-load-more-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 22px;
    line-height: 1;
}

.profile-search-load-more-item-list {
    padding-top: 14px;
}

.profile-search-load-more-item-grid {
    min-width: 0;
}

.profile-search-load-more-grid-button {
    flex-direction: column;
    gap: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
        rgba(255, 255, 255, 0.04);
}

.profile-search-load-more-grid-button .profile-search-load-more-symbol {
    width: 54px;
    height: 54px;
    font-size: 34px;
}

.profile-search-load-more-grid-label {
    display: block;
    padding: 0 10px 10px;
    font-size: 15px;
}

@media screen and (min-width: 1024px) {
    .profiles-search-view.show-results .profile-search-panel {
        display: flex;
    }
}

.userlist li {
    display: flex;
    align-items: center;
    color: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    border-bottom: 1px solid #001b5a;
}

.userlist li.hidden {
    display: none;
}

.userlist li.bot {
    display: none;
}

.userlist li[data-skynaute-id="chanserv"] {
    display: none;
}

.userlist div {
    display: inline-block;
    padding-left: 4px;
}
.userlist div.userinfo {
    display: flex;
    flex: 1 1 0;
    width: 0;
    padding-left: 10px;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    align-items: flex-start;    
    transition: flex-grow 0.15s ease, max-width 0.15s ease;
}
.userlist div.userinfo > div:first-child {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
}
.userlist div.userinfo .age {
    font-size: small;
}
.userlist div.userinfo .pseudo {
    padding-left: unset;
}
.userlist div.userinfo .username {
    color: #aaaaaa;
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.userlist div.userinfo .username::before {
    content: "@";
}

.userlist-hover-shortcuts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    max-width: 0;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    align-self: center;
    flex-shrink: 0;
    overflow: hidden;
    transition: max-width 0.15s ease, margin-left 0.15s ease, padding-right 0.15s ease;
}

.userlist-hover-shortcut {
    margin-left: 0;
}

@media (hover: hover) and (pointer: fine) {
    .userlist-hover-shortcut {
        display: inline-flex;
    }

    .userlist li:hover .userlist-hover-shortcuts,
    .userlist li:focus-within .userlist-hover-shortcuts {
        max-width: calc(var(--userlist-hover-shortcuts-width, 0px) + var(--userlist-inline-padding-right, 0px));
        margin-left: auto;
        padding-right: 4px;
    }

    .userlist li:hover .userlist-hover-shortcut,
    .userlist li:focus-within .userlist-hover-shortcut {
        opacity: 1;
        pointer-events: auto;
    }

    .userlist-hover-shortcut:hover,
    .userlist-hover-shortcut:focus-visible {
        background: rgba(0, 0, 0, 0.38);
    }
}

.blocked-users-dialog {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 220px;
}

#dialog-content.blockedUsers {
    justify-content: flex-start;
}

.blocked-users-status {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
}

.blocked-users-list {
    padding: 0;
}

.blocked-users-list:empty {
    display: none;
}

.about-app-dialog {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#dialog-content.aboutApp {
    justify-content: flex-start;
}

#dialog-content.displaySettings {
    justify-content: flex-start;
    text-align: left;
}

.notification-settings-dialog,
.display-settings-dialog {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.notification-settings-intro,
.display-settings-intro {
    margin: 0;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

.notification-settings-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notification-settings-group-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.68);
}

.notification-settings-options,
.display-settings-options {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    border: 1px solid var(--sky-choice-card-border);
    border-radius: 18px;
    overflow: hidden;
    background: var(--sky-choice-card-background);
}

.settings-option {
    position: relative;
    display: block;
}

.settings-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.settings-option:first-child .settings-option-row {
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
}

.settings-option:last-child .settings-option-row {
    border-bottom-color: transparent;
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
}

.settings-option-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.settings-option-copy strong {
    font-size: 1rem;
    color: var(--sky-choice-card-text);
}

.settings-option-copy small {
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--sky-choice-card-text-muted);
}

.settings-option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    font-size: 1.02rem;
    color: var(--sky-choice-card-border-active);
    opacity: 0;
    transform: scale(0.72);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.settings-option input:checked + .settings-option-row {
    background: var(--sky-choice-card-background-active);
}

.settings-option input:checked + .settings-option-row .settings-option-check {
    opacity: 1;
    transform: scale(1);
}

.settings-option input:disabled + .settings-option-row {
    opacity: var(--sky-choice-card-disabled-opacity);
    cursor: not-allowed;
}

.settings-option input:disabled + .settings-option-row .settings-option-copy strong,
.settings-option input:disabled + .settings-option-row .settings-option-copy small {
    color: var(--sky-choice-card-text-disabled);
}

.settings-option input:focus-visible + .settings-option-row {
    outline: 2px solid var(--sky-choice-card-border-active);
    outline-offset: -2px;
}

.settings-option input:not(:disabled) + .settings-option-row:hover {
    background-color: var(--sky-choice-card-background-hover);
}

.settings-option input:not(:disabled):checked + .settings-option-row:hover {
    background-color: var(--sky-choice-card-background-active);
}

.notification-settings-close-button,
.display-settings-close-button {
    align-self: flex-end;
    min-width: 140px;
}

#dialog-content.notificationSettings {
    justify-content: flex-start;
    text-align: left;
}

#dialog-content.pmMediaPreview {
    justify-content: flex-start;
    padding-bottom: max(env(safe-area-inset-bottom), 16px);
}

#dialog-content.pmImageViewer {
    padding: 0;
    justify-content: stretch;
}

#dialog.pmImageViewerDialog {
    overflow: hidden;
}

.pm-media-preview-dialog {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
}

.pm-media-preview-heading {
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    color: #ffffff;
}

.pm-media-preview-surface {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top, rgba(225, 0, 58, 0.28), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.pm-media-preview-image,
.pm-media-preview-video {
    display: block;
    width: 100%;
    max-height: min(58vh, 520px);
    object-fit: contain;
    background: rgba(0, 0, 0, 0.3);
}

.pm-media-preview-meta {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: left;
    color: rgba(255, 255, 255, 0.82);
    word-break: break-word;
}

.pm-media-preview-actions {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

.pm-media-preview-button {
    flex: 1;
    min-height: 48px;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.pm-media-preview-button-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.pm-media-preview-button-primary {
    background:  var(--sky-red);
    color: #ffffff;
}

.pm-image-viewer-dialog {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    color: #ffffff;
}

.pm-image-viewer-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(225, 0, 58, 0.22), transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.28));
    touch-action: none;
    cursor: zoom-in;
}

.pm-image-viewer-stage.is-zoomed {
    cursor: grab;
}

.pm-image-viewer-stage.is-panning {
    cursor: grabbing;
}

.pm-image-viewer-image {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    max-width: none;
    max-height: none;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    visibility: hidden;
}

#dialog-content.pmWebcamCapture {
    justify-content: center;
}

.pm-webcam-capture-dialog {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pm-webcam-capture-surface {
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(circle at top, rgba(0, 178, 245, 0.18), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.24));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pm-webcam-capture-video {
    display: block;
    width: 100%;
    max-height: min(58vh, 520px);
    object-fit: cover;
    background: #0a0d16;
}

.pm-webcam-capture-status {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    text-align: center;
    line-height: 1.5;
}

.pm-webcam-capture-button {
    align-self: center;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
    cursor: pointer;
    transition: transform 0.15s ease-out, background-color 0.15s ease-out;
}

.pm-webcam-capture-button:active,
.pm-webcam-capture-button.recording {
    transform: scale(0.94);
    background:  var(--sky-red);
}

.pm-webcam-capture-dialog.recording .pm-webcam-capture-status {
    color: #ffffff;
}

.about-app-intro {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
}

.about-app-diagnostics {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.about-app-diagnostics-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.about-app-diagnostics-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.about-app-diagnostics-row dt {
    color: #b7c7ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.about-app-diagnostics-row dd {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    user-select: text;
    -webkit-user-select: text;
}

.about-app-refresh-button {
    width: 100%;
    margin-top: 4px;
}

.blocked-userlist-li {
    gap: 10px;
}

.blocked-userlist-li .userinfo .age {
    display: none;
}

.blocked-user-remove-button {
    margin-left: auto;
    appearance: none;
    border: none;
    background-color: transparent;
    background-image: url("../images/delete.svg");
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
}

.blocked-user-remove-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.userlist-avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.avatar {
    border-radius: 50%;
}

.js-chan-conversation.show-sidebar-user {
    transform: translateX(-100%);
}

.js-chan-conversation.show-sidebar-user .user-list-area {
    display: flex;
    min-width: 100%;
}

.js-chan-conversation.show-profile-sidebar .user-list-area {
    display: none;
}

.profiles-search-view.show-profile-sidebar .profile-search-results-area {
    display: none;
}

.chat-area {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: auto;
    min-height: 0;
    min-width: 100%;
    max-width: 100%;
    max-height: 100%;
}

.chat-area > .close {
    right: 86%;
    background-color: #858585;
}

@media screen and (max-width: 1023px) {
    .js-chan-conversation {
        transition: transform 0.24s ease;
        will-change: transform;
    }

    .js-chan-conversation.show-sidebar-user .user-list-area,
    .js-chan-conversation .user-list-area.user-list-area-closing {
        display: flex;
        min-width: 100%;
    }

    .js-chan-conversation .user-list-area.user-list-area-closing {
        pointer-events: none;
    }
}

.header {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    color: #FFF;
    background-color: var(--sky-dark-blue);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

#header-global,
#header-context {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    flex-shrink: 0;
}

#header-global {
    position: relative;
    min-height: var(--sky-header-global-height);
    padding-top: env(safe-area-inset-top);
    padding-left: max(env(safe-area-inset-left), 4px);
    padding-right: max(env(safe-area-inset-right), 4px);
    background-color: var(--sky-red);
}

#header-context {
    min-height: var(--sky-header-context-height);
    padding-left: max(env(safe-area-inset-left), 8px);
    padding-right: max(env(safe-area-inset-right), 4px);
    background-color: var(--sky-dark-blue);
    gap: 8px;
}

#header-global-actions,
#header-context-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    flex-shrink: 0;
    gap: 0;
}

#header-global-actions {
    margin-left: auto;
}

#header-context-actions {
    margin-left: auto;
}

#header-logo-wrapper {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: end;
    justify-content: center;
    transform: translateX(-50%);
    pointer-events: none;
}

#header-logo {
    display: block;
    width: auto;
    height: 50px;
    max-width: min(240px, calc(100vw - 180px));
    object-fit: contain;
}

#header-wrapper {
    display: flex;
    flex-direction: column;
    flex: auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    margin: 8px 0;
}

#header-title, #header-topic {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#header-topic:empty {
    display: none;
}

#header-topic {
    flex-shrink: 1;
    font-weight: normal;
    font-size: smaller;
}

html.embedded #header-global,
html.embedded #header-global-actions,
html.embedded #btn_conversations {
    display: none;
}

html.embedded #header-context {
    width: 100%;
}

html:not(.embedded) #header-context.hide-context {
    display: none;
}

html.embedded #header-wrapper {
    margin: 10px 0;
}

/* Messages Salons - PM */
.chan-messages {
    display: block;
    height: 100%;
    padding-right: env(safe-area-inset-right);
    padding-left:  env(safe-area-inset-right);
    color: #FFFFFF;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
    word-break: break-word;
    padding: 0px 5px 0px 0px;
    scrollbar-width: thin;
}
.chan-messages li {
    margin-top: 6px;
}


/* Define the keyframes for the highlight animation */
@keyframes highlight-message {
    0% { background-color: var(--sky-bubble-color) }
    25% { background-color: var(--sky-quote-color); }
    50% { background-color: var(--sky-bubble-color); }
    75% { background-color: var(--sky-quote-color); }
    100% { background-color: var(--sky-bubble-color); }
}

.chan-messages li {
    position: relative;
}

.chan-messages li.highlight .message-right-container, .chan-messages li .message-right-container span.highlighted-nick.replyTo.highlight {
    animation: highlight-message 2s ease-out;
}

.chan-messages > li:not(.eventmessage) {
    display: flex;
    flex-wrap: nowrap;
}
.chan-messages a {
    cursor: pointer;
    color: var(--sky-channel-link-color);
    font-weight: 600;
    text-decoration: underline dotted;
    text-underline-offset: 0.12em;
}
.chan-messages a:visited {
    color: var(--sky-channel-link-color);
}
.chan-messages li.selected::after {
    content: "";
    background: var(--sky-message-selected-color);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.5;
}
.chan-messages li.infomessage {
    font-size: smaller;
    padding: 5px;
}
.chan-messages li span.highlighted-nick {
    color: #FAE309;
}

.chan-messages li span.highlighted-nick.replyTo i.fa-reply {
    color: currentColor;
    font-size: 0.9em;
    padding-right: 0.25em;
}
.chan-messages li span.highlighted-nick::after {
    content: " ";
}
.chan-messages a:hover,
.chan-messages a:focus-visible {
    text-decoration-style: solid;
}
.chan-messages div.replyto-original-message {
    border-left: 4px;
    border-left-color: #0039bc;
    border-left-style: solid;
    color: #B9BBBE;
    font-size: x-small;
    padding: 4px 8px;
    margin-left: 50px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    width: fit-content;
}
.chan-messages div.replyto-original-message .names, .chan-messages div.replyto-original-message .message {
    display: inline;
}
.chan-messages div.replyto-original-message .message {
    padding-top: 6px;
}
.chan-messages div.replyto-original-message svg path {
    fill: #B9BBBE;
}
.chan-messages div.replyto-original-message span.username, div.replyto span.username {
    color: #d5d5d5;
}
.chan-messages div.replyto-original-message span.username::before {
    content: "@";
}
.chan-messages div.replyto-original-message div.message-left-container {
    padding-right: unset;
    width: unset;
}
.chan-messages div.replyto-original-message span.msg {
    color: #9cbaff;
    font-style: italic;
    font-size: 1em;
}
.chan-messages div.replyto-original-message svg.reply-arrow {
    align-self: flex-end;
    flex-shrink: 0;
}
.chan-messages div.names {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    font-size: 0.8em;
    align-items: center;
}
.chan-messages div.replyto-original-message div.names {
    gap: 4px;
    font-size: 1em;
}
.chan-messages li.highlighted > .message-right-container {
    background-color: var(--sky-highlight-color);
}
.chan-messages li.highlighted > .message-right-container > div.names {
    background-color: var(--sky-dark-blue);
    padding-left: 2px;
    padding-right: 2px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.chan-messages span.username, .chan-messages span.time, ul.chan-messages div.replyto-original-message span.username, div.replyto span.username {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    color: #aaaaaa;
}

.chan-messages span.username::before {
    content: "@";
}

.chan-messages span.displayname {
    flex-shrink: 0;
}

.message-left-container {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    width: 50px;
    flex-shrink: 0;
}

.message-right-container {
    display: flex;
    flex-direction: column;
    background-color: var(--sky-bubble-color);
    width: fit-content;
    max-width: 100%;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 6px;
}

.chan-messages li.message-self > .message-right-container {
    background-color: var(--sky-my-bubble-color);
}

.message-right-container > .message {
    font-size: 0.9em;
}

.message-right-container .message [name="message"] {
    display: block;
}

.message-hover-shortcut {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    color: #FFFFFF;
    opacity: 0;
    transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
    cursor: pointer;
    pointer-events: none;
    flex: 0 0 auto;
    align-self: center;
}

@media (hover: hover) and (pointer: fine) {
    .message-hover-shortcut {
        display: inline-flex;
    }

    .chan-messages li:hover .message-hover-shortcut,
    .chan-messages li:focus-within .message-hover-shortcut {
        opacity: 1;
        pointer-events: auto;
    }

    .message-hover-shortcut:hover,
    .message-hover-shortcut:focus-visible {
        background: rgba(0, 0, 0, 0.38);
    }
}

.message-private-shortcut {
    margin-left: 4px;
}

.eventmessage {
    color: #FFFFFF;
    font-style: italic;
    display: flex;
    align-items: center;
}

.eventmessage img {
    background-color: #FFFFFF;
    padding: 4px;
}

.eventmessage .message-right-container {
    background: none;
    padding: 0px;
}

.box_saisie {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 8px var(--box-saisie-padding-right) max(env(safe-area-inset-bottom), 8px) var(--box-saisie-padding-left);
    flex-shrink: 0;
    gap: 6px;
}

.box_saisie.hidden {
    display: none;
}

.box_saisie.replyto-shown {
    background-color: var(--box-saisie-replyto-background-color);
    color: var(--box-saisie-replyto-text-color);
}
.box_saisie.replyto-shown .buttonlink.close {
    color: var(--box-saisie-replyto-text-color);
}
.box_saisie_replyto_container {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    font-size: smaller;
    overflow-x: hidden;
    word-wrap: break-word;
    word-break: break-word;
    padding-right: 24px;    
}
.box_saisie_bottom_container {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: var(--msg-box-saisie-gap);
    --msg-input-actions-width: 0px;
}

.js-pm-conversation .box_saisie_bottom_container {
    --msg-input-actions-width: calc((2 * var(--msg-form-input-button-width)) + var(--msg-box-saisie-gap));
}
.box_saisie_bottom_container .avatar-container {
    display: none;
    height: 100%;
}
.box_saisie_bottom_container img.avatar {
    height: 44px;
    width: 44px;
    border-radius: 50%;
}
.msg-form-input {
    flex: auto;
    display: flex;
    align-items: center;
    background-color: var(--msg-form-input-background-color);
    color: var(--msg-form-input-text-color);
    min-height: var(--msg-form-input-height);
    max-height: 150px;
    padding: 8px;
    padding-right: calc(var(--msg-input-actions-width) + var(--msg-input-action-offset) + 8px);
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    border: 1px solid var(--chat-area-border-color);
    border-radius: 8px;
    anchor-name: --msg-input-anchor;
}

.msg-input-actions {
    position: absolute;
    position-anchor: --msg-input-anchor;
    right: calc(anchor(--msg-input-anchor right, var(--msg-input-action-offset)) + var(--msg-input-action-offset));
    top: anchor(--msg-input-anchor top, 8px);
    display: flex;
    align-items: center;
    min-height: var(--msg-form-input-height);
    z-index: 10;
}

.pm-voice-recorder-control {
    position: relative;
    width: var(--msg-form-input-button-width);
    height: var(--msg-form-input-height);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pm-voice-recorder-label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translate(12px, -50%);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    color: #111111;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.35);
    transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.pm-voice-recorder-halo {
    position: absolute;
    inset: -12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.pm-voice-recorder-wave {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 59, 59, 0.7);
    border-radius: 18px;
    transform: scale(0.8);
    opacity: 0;
}

.pm-voice-recorder-control.recording .pm-voice-recorder-label,
.pm-voice-recorder-control.cancelling .pm-voice-recorder-label {
    opacity: 1;
    transform: translate(0, -50%);
}

.pm-voice-recorder-control.recording .pm-voice-recorder-halo,
.pm-voice-recorder-control.cancelling .pm-voice-recorder-halo {
    opacity: 1;
}

.pm-voice-recorder-control.recording .pm-voice-recorder-wave,
.pm-voice-recorder-control.cancelling .pm-voice-recorder-wave {
    animation: voice-recording-wave 1.6s ease-out infinite;
}

.pm-voice-recorder-control.recording .pm-voice-recorder-wave-secondary,
.pm-voice-recorder-control.cancelling .pm-voice-recorder-wave-secondary {
    animation-delay: 0.35s;
}

.pm-voice-recorder-control.cancelling .pm-voice-recorder-label {
    color: #ffffff;
}

.pm-voice-recorder-control.cancelling .pm-voice-recorder-wave {
    border-color: rgba(255, 140, 140, 0.8);
}

.btn_microphone {
    position: relative;
    border-style: none;
    border-radius: 10px;
    background: transparent;
    color: #0066cc;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.btn_microphone:hover, .btn_camera:hover, .btn_emoji_picker:hover, .emoji-picker-entry:hover {
    background-color: var(--msg-button-subtle-hover-bg);
}

.btn_microphone:active, .btn_camera:active, .btn_emoji_picker:active, .emoji-picker-entry:active {
    background-color: var(--msg-button-subtle-active-bg);
}

.pm-voice-recorder-control.recording .btn_microphone,
.pm-voice-recorder-control.cancelling .btn_microphone {
    background-color: rgba(220, 38, 38, 0.2);
    color: #dc2626;
}

.pm-voice-recorder-control.cancelling .btn_microphone {
    background-color: rgba(220, 38, 38, 0.3);
}

.pm-voice-recorder-control.recording .btn_microphone svg,
.pm-voice-recorder-control.cancelling .btn_microphone svg {
    fill: #dc2626;
}

.btn_microphone:disabled {
    opacity: 0.5;
    cursor: wait;
}

@keyframes voice-recording-wave {
    0% {
        transform: scale(0.78);
        opacity: 0.85;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

.btn_microphone svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.btn_camera {
    width: var(--msg-form-input-button-width);
    height: var(--msg-form-input-height);
    border-style: none;
    border-radius: 10px;
    background: transparent;
    color: #0066cc;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn_camera svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.emoji-picker-control {
    position: relative;
    display: none;
    width: var(--msg-form-input-button-width);
    height: var(--msg-form-input-height);
    flex-shrink: 0;
}

.btn_emoji_picker {
    width: var(--msg-form-input-button-width);
    height: var(--msg-form-input-height);
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #0066cc;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.emoji-picker-panel {
    right: 0;
    bottom: calc(100% + 10px);
    width: min(360px, calc(100vw - 32px));
    max-height: min(360px, 55vh);
    display: none;
    overflow-y: auto;
    padding: 12px 12px 14px;
    z-index: 15;
}

.emoji-picker-control.is-open .emoji-picker-panel {
    display: block;
}

.emoji-picker-section + .emoji-picker-section {
    margin-top: 14px;
}

.emoji-picker-heading {
    margin-bottom: 8px;
    color: color-mix(in srgb, currentColor 55%, #4d6588 45%);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 5px;
}

.emoji-picker-entry {
    min-height: 34px;
    border: none;
    border-radius: 9px;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

div.btn_gotobottom {
    position: absolute;
    border-radius: 50%;
    bottom: 102px;
    right: 26px;
    width: 42px;
    height: 42px;
    display: none;
    flex-direction: column;
    color: #00b2f5;
    cursor: pointer;
    background-color: #004EAE;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

div.btn_gotobottom div.btn_gotobottom_content {
    height: 10px;
    width: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

div.btn_gotobottom div.btn_gotobottom_content i {
    font-size: 12px;
    line-height: 1;
}

div.btn_gotobottom.shown {
    display: flex;
}

.inputMenu {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-color: #00548D;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: inherit;
    padding-right: inherit;
    padding-bottom: calc(var(--msg-form-input-height) + 16px);
    padding-left: inherit;
}
.inputMenu li {
    display: flex;
    align-items: center;
    gap: var(--msg-box-saisie-gap);
}
.inputMenu div.userinfo {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: auto;
}
.inputMenu div.usertitle {
    display: flex;
    gap: 6px;
}
.replyto span.displayname {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.replyto span.username {
    flex-shrink: 0;
}
.replyto i.fa-reply {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: medium;
    line-height: 1;
}

.box_saisie .btn_send {
    width: var(--msg-form-input-button-width);
    height: var(--msg-form-input-height);
    border-style: none;
    border-radius: 10px;
    background:  var(--sky-red) url("../images/send.svg?20211220") no-repeat center center;
    color: #FFFFFF;
    font-weight: bold;
    flex-shrink: 0;
    align-self: center;
}
.box_saisie .btn_send:disabled {
    background-color: #858585;
}
.box_saisie .btn_send:active {
    cursor: pointer;
    background-color: #6D1221;
}

/* Vues */
.js-chan-conversation {
    flex: auto;
    display: flex;
    flex-direction: row;
    min-height: 0;
    position: relative;
}

/* Page liste des salons PUBLICS */
#channels-view {
    flex: auto;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

#result-official-channels {
    display: flex;
    flex: auto;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    /*padding: 20px env(safe-area-inset-right) 20px env(safe-area-inset-left);*/
}

.result-official-channels li {
    display: block;
    text-align: center;
    background-color: rgba(0,0,0,.25);
    margin: 5px;
    padding: 5px;
    width: 130px;
    border-radius: 10px;
}
.result-official-channels li a {
    display: block;
}
.result-official-channels li img {
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 5px;
}
.result-official-channels li p {
    text-align: right;
}
.result-official-channels li p span {
    margin-left: 10px;
}

/* Banlist */
.banList {
    display: flex;
    flex: auto;
    flex-direction: column;
    overflow-y: auto;
}

.chanBanList {
    margin-top: 10px;
    margin-bottom: 10px;
    overflow-y: auto;
}

.chanBanList li:not(:last-child) {
    border-bottom: 0.5px solid #D5D5D5;
}

.chanBanList li {
    padding: 10px;
}

.chanBanList li:hover {
    color: #000;
    background-color: rgba(67, 151, 228, 0.50);
}

.chanBanList li.selected {
    color: #000;
    background: #a8c6ee;
}

/* User Logs */
#dialog-content.userLogs {
    justify-content: flex-start;
    text-align: left;
}

.userLogsList {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.userLogsList li {
    padding: 6px 8px;
    cursor: pointer;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.userLogsList li:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.userLogs-time {
    color: #aaa;
}

.userLogs-displayName {
    font-weight: bold;
}

.userLogs-username {
    color: #aaa;
    font-size: 0.9em;
}

.userLogs-msg {
    color: #fff;
}

/* Profil utilisateur */
#dialog.userProfileDialog {
    background-color: var(--sky-background-color);
}

#dialog.userProfileDialog #dialog-titlebar {
    display: none;
}

#dialog-content.userProfile {
    padding: 0;
    gap: 0;
    overflow: hidden;
    color: #FFFFFF;
    text-align: left;
}

.user-profile-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    min-height: 220px;
    padding: 32px;
    font-size: 18px;
    font-weight: 700;
}

.user-profile-loading-spinner {
    color: currentColor;
    font-size: 32px;
    line-height: 1;
}

.user-profile-loading-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.user-profile {
    min-height: 100%;
    background: var(--sky-background-color);
    color: #FFFFFF;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
}

.user-profile.user-profile-sidebar {
    width: 100%;
    min-height: 0;
    height: 100%;
}

.profile-sidebar-area .user-profile-loading {
    min-height: 100%;
    width: 100%;
    color: #FFFFFF;
}

.profile-sidebar-area .user-profile-hero {
    min-height: 320px;
}

.profile-sidebar-area .user-profile-avatar-stack {
    padding-bottom: 14px;
}

.profile-sidebar-area .user-profile-message-bubble {
    right: -4px;
    width: 32px;
    height: 32px;
    border-width: 2px;
}

.profile-sidebar-area .user-profile-message-bubble img {
    width: 14px;
    height: 14px;
}

.profile-sidebar-area .user-profile-body {
    padding: 18px max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) 18px;
}

.user-profile-inline-cta {
    display: none;
}

.user-profile-inline-cta,
.user-profile-footer {
    flex-direction: column;
    gap: 14px;
    padding: 20px 16px;
    border-radius: 24px;
    background: var(--sky-dark-blue);
}

.profile-sidebar-area .user-profile-inline-cta {
    display: flex;
}

.profile-sidebar-area .user-profile-username-age {
    font-size: 17px;
}

.profile-sidebar-area .user-profile-displayname-age {
    font-size: 20px;
}

.profile-sidebar-area .user-profile-distance-line {
    font-size: 14px;
}

.profile-sidebar-area .user-profile-about-title {
    font-size: 20px;
    margin-bottom: 10px;
}

.profile-sidebar-area .user-profile-about-text,
.profile-sidebar-area .user-profile-punchline-quote {
    font-size: 14px;
    line-height: 1.45;
}

.profile-sidebar-area .user-profile-flag {
    margin-left: -18px;
    padding-left: 18px;
    font-size: 15px;
    gap: 10px;
    margin-bottom: 14px;
}

.profile-sidebar-area .user-profile-punchline-artist,
.profile-sidebar-area .user-profile-track-artist,
.profile-sidebar-area .user-profile-track-title,
.profile-sidebar-area .user-profile-empty-state {
    font-size: 12px;
}

.profile-sidebar-area .user-profile-artist-name {
    font-size: 12px;
    left: 14px;
    right: 14px;
    bottom: 14px;
}

.profile-sidebar-area .user-profile-social-link {
    gap: 6px;
    min-width: 64px;
    min-height: 64px;
}

.profile-sidebar-area .user-profile-social-icon {
    width: 64px;
    height: 64px;
}

.profile-sidebar-area .user-profile-social-icon img {
    width: 64px;
    width: 64px;
    display: block;
}

.profile-sidebar-area .user-profile-footer {
    padding: 16px 14px;
}

.profile-sidebar-area .user-profile-cta {
    min-height: 48px;
    font-size: 15px;
    gap: 10px;
}

.profile-sidebar-area .user-profile-cta-icon {
    width: 22px;
    height: 22px;
}

.profile-sidebar-area .user-profile-report-link {
    font-size: 13px;
}

.profile-sidebar-area .user-profile-artists-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

.profile-sidebar-area .user-profile-liked-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

.profile-sidebar-area .user-profile-artist-card {
    flex: 1 1 100px;
    max-width: 112px;
    min-height: 0;
    height: auto;
}

.profile-sidebar-area .user-profile-track-card {
    flex: 1 1 100px;
    max-width: 112px;
    min-height: 0;
    height: auto;
}

.user-profile-hero {
    position: relative;
    min-height: min(100svh, 720px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.55));
}

.user-profile-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.08) 35%, rgba(0, 0, 0, 0.65) 100%);
    pointer-events: none;
}

.user-profile-hero-surface {
    position: absolute;
    inset: 0;
    z-index: 1;
    touch-action: pan-y;
}

.user-profile-hero-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

.user-profile-hero-video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

.user-profile-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: calc(18px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 24px max(18px, env(safe-area-inset-left));
    pointer-events: none;
}

.user-profile-identity {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    max-width: calc(100% - 72px);
    pointer-events: auto;
}

.user-profile-avatar-stack {
    position: relative;
    flex-shrink: 0;
    padding-bottom: 26px;
}

.user-profile-avatar-ring {
    width: 50px;
    height: 50px;
    padding: 2px;
    border-radius: 999px;
    background: conic-gradient(var(--sky-red) var(--profile-progress), #FFFFFF 0);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.user-profile-avatar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: cover;
    border: 0;
    background: #FFFFFF;
}

.user-profile-message-bubble {
    position: absolute;
    right: -15px;
    bottom: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    border: none;
    border-radius: 100%;
    z-index: 5;
}

.user-profile-message-bubble img {
    width: 40px;
    height: 40px;
}

.user-profile-message-bubble:disabled,
.user-profile-cta:disabled {
    opacity: 0.45;
}

.user-profile-close {
    width: var(--sky-icon-control-size);
    height: var(--sky-icon-control-size);
    padding: var(--sky-icon-control-margin);
    border: 0;
    border-radius: 999px;
    box-sizing: content-box;
    background-color: rgba(0, 0, 0, 0.45);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 5;
}

.user-profile-close .fa-xmark {
    font-size: 16px;
    line-height: 1;
}

.user-profile-heading {
    padding-top: 12px;
}

.user-profile-username-age,
.user-profile-displayname-age {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.user-profile-username-age {
    font-size: clamp(18px, 4.2vw, 24px);
    font-weight: 600;
    line-height: 1.1;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
}

.user-profile-displayname-age {
    font-size: clamp(20px, 4.8vw, 28px);
    font-weight: 700;
    line-height: 1.05;
}

.user-profile-separator {
    opacity: 0.92;
}

.user-profile-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.user-profile-body-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-profile-distance-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.user-profile-distance-line {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-size: clamp(14px, 3.6vw, 18px);
    font-weight: 600;
    line-height: 1.2;
    opacity: 0.94;
}

.user-profile-distance-line:has(.user-profile-distance-value:empty) {
    display: none;
}

.user-profile-distance-username {
    font-size: inherit;
    font-weight: inherit;
}

.user-profile-distance-icon {
    font-size: 0.95em;
}

.user-profile-about-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: clamp(20px, 4.8vw, 28px);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.user-profile-about-star {
    color: #ff2d55;
    font-size: 0.9em;
}

.user-profile-about-text,
.user-profile-punchline-quote {
    font-size: clamp(15px, 3.9vw, 21px);
    line-height: 1.28;
    font-weight: 600;
}

.user-profile-flag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    margin-left: calc(-1 * max(18px, env(safe-area-inset-left)));
    padding: 10px 28px 10px max(18px, env(safe-area-inset-left));
    font-size: clamp(17px, 4.2vw, 24px);
    font-weight: 800;
    line-height: 1;
    clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
    text-align: left;
    text-transform: uppercase;
}

.user-profile-flag-red {
    background: #ff0058;
}

.user-profile-flag-violet {
    background: #9b7cff;
}

.user-profile-flag-cyan {
    background: #18c7e8;
}

.user-profile-flag-yellow {
    background: #ffbf00;
    color: #FFFFFF;
}

.user-profile-flag-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.user-profile-flag-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.user-profile-punchline-card {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 14px;
    align-items: start;
}

.user-profile-punchline-image {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    object-fit: cover;
}

.user-profile-punchline-quote {
    margin: 0 0 12px;
}

.user-profile-punchline-artist {
    color: #59d8ff;
    font-size: clamp(15px, 3.9vw, 20px);
    font-style: italic;
}

.user-profile-artists-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 18px;
}

.user-profile-artist-card {
    min-width: 0;
    flex: 1 1 108px;
    max-width: 144px;
}

.user-profile-artist-card,
.user-profile-track-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-profile-artist-image,
.user-profile-track-cover {
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 18px;
    object-fit: cover;
    margin-bottom: 4px;
}

.user-profile-artist-image {
    background: rgba(0, 0, 0, 0.12);
}

.user-profile-liked-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px 14px;
}

.user-profile-track-card {
    min-width: 0;
    flex: 1 1 108px;
    max-width: 144px;
}

.user-profile-artist-name,
.user-profile-track-artist,
.user-profile-track-title {
    text-align: center;
    word-break: break-word;
}

.user-profile-artist-name,
.user-profile-track-title {
    font-size: clamp(12px, 3vw, 15px);
    color: rgba(255, 255, 255, 0.88);
}

.user-profile-artist-name {
    display: block;
}

.user-profile-track-artist {
    font-size: clamp(12px, 3.2vw, 16px);
    font-weight: 800;
    margin-bottom: 4px;
}

.user-profile-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.user-profile-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-width: 78px;
    min-height: 78px;
    border-radius: 999px;
    color: inherit;
}

.user-profile-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
}

.user-profile-social-link.is-disabled {
    pointer-events: none;
}

.user-profile-social-link.is-disabled .user-profile-social-icon {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    filter: grayscale(1);
}

.user-profile-footer {
    display: flex;
}

.user-profile-cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 58px;
    border: 0;
    border-radius: 18px;
    background: #FFFFFF;
    color: #0030ba;
    font-size: clamp(16px, 4vw, 22px);
    font-weight: 800;
    padding: 10px 16px;
}

.user-profile-cta-icon {
    width: 28px;
    height: 28px;
    background: url("../images/profiles/icon\ message\ on.svg") center / contain no-repeat;
}

.user-profile-report-link {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    font-size: clamp(15px, 3.8vw, 21px);
    text-align: center;
}

.user-profile-empty-state {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
}

/* FIN STYLES MOBILE FIRST ********************************/
/************************************************* Strucutre smartphone (exclut les pitimobiles) */
@media screen and (min-width: 320px) {
    /* Page liste des salons PUBLICS */
    .result-official-channels li img {
        display: block;
        margin: 0 auto;
        max-width: 100px;
        padding-bottom: 10px;
    }
    .result-official-channels li .chan_name {
        display: block;
        color: #FFFFFF;
    }
    .result-official-channels li p span {
        margin: 5px 0 0 0;
    }
    .result-official-channels li .girl {
        float: left;
        padding-left: 12px;
    }
    .result-official-channels li .boy {
        float: right;
        padding-left: 12px;
    }
}

/*********************************************** STYLES TABLETTES */
/* Pour info, les pourcentages sont calculés avec :
 * 1054px (largeur totale de la maquette)
 * 776px (largeur de la zone des dialogues + scrollbar)
 * 263px (largeur de la liste des users)
 * sur la base "cible / contexte = pourcentage"
 */
@media screen and (min-width: 768px) {
    .user-profile-artists-grid {
        gap: 18px;
    }

    .user-profile-artist-card {
        flex-basis: 120px;
        min-height: 0;
    }

    .user-profile-heading,
    .user-profile-message-bubble {
        display: none;
    }
}

@media screen and (min-width: 1024px) {
    :root {
        --sky-right-sidebar-width: 380px;
    }

    .js-chan-conversation.show-sidebar-user {
        transform: none;
    }

    /* Modal dialog (desktop) */
    #dialog {
        top: 50%;
        left: 50%;
        min-height: auto;
        max-height: 90%;
        height: fit-content;
        width: auto;
        min-width: 400px;
        max-width: 90%;
        margin: 0;
        transform: translate(-50%, -50%) scale(0.95);
        border: none;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        overflow: hidden;
    }
    #dialog[open] {
        transform: translate(-50%, -50%) scale(1);
    }
    @starting-style {
        #dialog[open] {
            transform: translate(-50%, -50%) scale(0.95);
        }
    }

    #dialog-titlebar {
        height: 40px;
    }

    #header-wrapper {
        flex-direction: row;
        align-items: center;
    }

    #header-title,
    #header-topic {
        min-width: 0;
    }

    #header-wrapper:has(#header-topic:not(:empty)) #header-title::after {
        content: "\202f:";
        margin-right: 1ch;
    }

    /* Variable sizing by content type */
    #dialog-content.userLogs {
        min-width: 560px;
    }

    #dialog-content.reportUser {
        min-width: 420px;
    }

    #dialog-content.pmMediaPreview {
        min-width: min(720px, calc(100vw - 48px));
        width: min(720px, calc(100vw - 48px));
    }

    #dialog-content.pmWebcamCapture {
        min-width: min(720px, calc(100vw - 48px));
        width: min(720px, calc(100vw - 48px));
    }

    #dialog-content.pmImageViewer {
        min-width: min(920px, calc(100vw - 48px));
        width: min(920px, calc(100vw - 48px));
        height: min(92vh, calc(100vh - 48px));
    }

    #dialog.pmImageViewerDialog {
        width: min(920px, calc(100vw - 48px));
        max-width: min(920px, calc(100vw - 48px));
        height: min(92vh, calc(100vh - 48px));
        max-height: calc(100vh - 48px);
        border-radius: 24px;
    }

    #dialog.userProfileDialog {
        width: min(920px, calc(100% - 48px));
        max-width: min(920px, calc(100% - 48px));
        height: min(920px, calc(100% - 48px));
        max-height: calc(100% - 48px);
        border-radius: 24px;
    }

    #dialog-content.userProfile {
        height: 100%;
    }

    .user-profile-hero {
        min-height: 540px;
    }

    .user-profile-body {
        padding: 32px;
    }

    .user-profile-flag {
        margin-left: -32px;
        padding-left: 32px;
    }

    /* Navigation */
    #left-nav-container {
        position: static;
        inset: auto;
        visibility: visible;
        width: 50px;
        min-width: 50px;
        max-width: none;
        height: 100%;
        transform: none;
        pointer-events: auto;
        transition: width 0.3s ease-in-out;
    }

    #left-nav-container.show {
        width: 200px;
    }

    #left-nav-container.show ~ #right-container {
        filter: unset;
    }

    #left-channel-nav .nav-label, #left-pm-nav .nav-label, #left-settings-nav .nav-label {
        margin-left: 0;
        opacity: 0;
        max-width: 0;
        visibility: hidden;
        transition:
            opacity 0.15s ease-in-out,
            max-width 0.2s ease-in-out,
            margin-left 0.2s ease-in-out,
            visibility 0s linear 0.2s;
    }

    #left-nav-container.show .nav-label {
        margin-left: 10px;
        opacity: 1;
        max-width: 140px;
        visibility: visible;
        transition:
            opacity 0.2s ease-in-out 0.05s,
            max-width 0.2s ease-in-out,
            margin-left 0.2s ease-in-out,
            visibility 0s linear 0s;
    }

    #right-container {
        flex: auto;
    }

    /* Liste utilisateurs Salons */
    html:not(.embedded) .user-list-area,
    html.embedded .user-list-area:not(#p3604606446 *) {
        display: flex !important;
        min-width: var(--sky-right-sidebar-width);
        max-width: var(--sky-right-sidebar-width);
        margin-left: 1px;
    }

    html:not(.embedded) .js-chan-conversation.show-sidebar-user .user-list-area,
    html.embedded .js-chan-conversation.show-sidebar-user .user-list-area:not(#p3604606446 *) {
        display: flex !important;
        min-width: var(--sky-right-sidebar-width);
        max-width: var(--sky-right-sidebar-width);
        margin-left: 1px;
    }

    html:not(.embedded) .js-chan-conversation.show-profile-sidebar .profile-sidebar-area,
    html:not(.embedded) .js-pm-conversation.show-profile-sidebar .profile-sidebar-area,
    html.embedded .js-chan-conversation.show-profile-sidebar .profile-sidebar-area:not(#p3604606446 *),
    html.embedded .js-pm-conversation.show-profile-sidebar .profile-sidebar-area:not(#p3604606446 *) {
        display: flex !important;
        min-width: var(--sky-right-sidebar-width);
        max-width: var(--sky-right-sidebar-width);
        margin-left: 1px;
    }

    html:not(.embedded) .js-chan-conversation.show-profile-sidebar .user-list-area,
    html.embedded .js-chan-conversation.show-profile-sidebar .user-list-area:not(#p3604606446 *) {
        display: none !important;
    }

    .profiles-search-view {
        flex-direction: row;
        align-items: stretch;
        background-color: var(--sky-background-color);
    }

    .profiles-search-view .profile-search-panel {
        display: flex;
        flex: 0 0 auto;
        width: fit-content;
        min-width: 320px;
        max-width: 420px;
        border-right: 1px solid var(--chat-area-border-color);
    }

    .js-pm-conversation .chat-area,
    .js-chan-conversation .chat-area {
        border-right: 1px solid var(--chat-area-border-color);
    }

    .profiles-search-view .profile-search-results-area {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        min-width: calc(100% - 420px);
    }

    html:not(.embedded) .profiles-search-view .profile-search-results-area,
    html.embedded .profiles-search-view .profile-search-results-area:not(#p3604606446 *) {
        min-width: 0;
        max-width: none;
        width: auto;
    }

    html:not(.embedded) .profiles-search-view.show-profile-sidebar .profile-sidebar-area,
    html.embedded .profiles-search-view.show-profile-sidebar .profile-sidebar-area:not(#p3604606446 *) {
        display: flex;
        min-width: var(--sky-right-sidebar-width);
        max-width: var(--sky-right-sidebar-width);
        margin-left: 1px;
    }

    html:not(.embedded) .profiles-search-view.show-profile-sidebar .profile-search-results-area,
    html.embedded .profiles-search-view.show-profile-sidebar .profile-search-results-area:not(#p3604606446 *) {
        display: flex;
    }

    .usergrid {
        gap: 20px;
    }

    html:not(.embedded) #btn_openuserlist,
    html.embedded #right-container:has(#p3604606446:not(.active)) #btn_openuserlist {
        display: none;
    }

    .profile-search-back-button {
        display: none;
    }

    /* Messages Salons - PM */
    .chat-area {
        min-width: auto;
    }

    .js-pm-conversation .chat-area,
    .js-chan-conversation .chat-area {
        min-width: 0;
    }

    .js-pm-conversation.show-profile-sidebar {
        flex-direction: row;
        align-items: stretch;
    }

    .js-pm-conversation.show-profile-sidebar .chat-area,
    .js-pm-conversation.show-profile-sidebar .profile-sidebar-area {
        max-height: 100%;
    }

    .chat-area > .close {
        top: calc(var(--sky-header-global-height) + var(--sky-header-context-height) + 8px);
        right: 29.5%;
    }

    html.embedded .chat-area > .close {
        top: 64px;
    }

    .userMenu {
        justify-content: center;
        align-items: center;
    }
    .userMenu.userMenu--popover {
        justify-content: flex-start;
        align-items: flex-start;
    }
    
    .userMenu-panel {
        width: fit-content;
        max-width: calc(100vw - 40px);
        border-radius: 10px;
        transform: none;
        transition-duration: 0.2s;
    }

    .userMenu-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-width: 300px;
        width: fit-content;
    }

    #dialog-content.blockedUsers {
        min-width: 420px;
        justify-content: flex-start;
    }

    .inputMenu {
        width: 100%;
        padding-bottom: 60px;
    }

    .box_saisie {
        padding: 8px;
        min-height: 60px;
    }
    .box_saisie .avatar-container {
        display: block;
    }
    .box_saisie textarea {
        height: 100%;
    }
    .box_saisie .btn_send {
        border-radius: 8px;
    }
    :root {
        --msg-form-input-height: 44px;
    }
    .box_saisie .btn_send {
        height: var(--msg-form-input-height);
        width: var(--msg-form-input-height);
    }
    .box_saisie .msg-form-input {
        height: var(--msg-form-input-height);
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* FIN STYLES TABLETTES *************************************/
/*********************************************** STYLES DESKTOP */
@media screen and (min-width: 1024px) {
    #global {
        font-size: 0.8em;
    }

    /* Messages Salons - PM */
    .chat-area > .close {
        right: 25.35%;
    }
    .buttonlink {
        padding: 8px;
    }

    .userMenu-list > li:hover {
        background-color: rgba(0, 0, 0, .25);
    }
    .userMenu--popover .userMenu-list > li:not(.context-menu-user-header):hover {
        background-color: rgba(0, 0, 0, .25);
    }
    .userMenu--popover > .userMenu-panel {
        border: 1px solid var(--user-menu-border-color);
    }
    .inputMenu li:hover, .inputMenu li.selected,
    .dropupMenu li:hover, .dropupMenu li.selected {
        background-color: rgba(0,78,174,.25);
    }

    .emoji-picker-control {
        display: block;
    }

    .js-chan-conversation .box_saisie_bottom_container {
        --msg-input-actions-width: var(--msg-form-input-button-width);
    }

    .js-pm-conversation .box_saisie_bottom_container {
        --msg-input-actions-width: calc((3 * var(--msg-form-input-button-width)) + (2 * var(--msg-box-saisie-gap)));
    }

    .result-official-channels li {
        width: 110px;
    }
}
/* FIN STYLES DESKTOP *************************************/

/* PM Conversations */


#header-wrapper.pm-header-mode {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.pm-header-avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.pm-header-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.pm-header-info .displayname {
    font-weight: bold;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-header-info .username {
    color: #aaaaaa;
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-header-info .username::before {
    content: "@";
}

.js-pm-conversation {
    display: none;
    flex-direction: column;
    min-height: 0;
    flex: auto;
}
.js-pm-conversation.active {
    display: flex;
}
.js-pm-conversation .chat-area {
    display: flex;
    flex-direction: column;
    flex: auto;
    min-height: 0;
}

.pm-messages {
    padding: 22px 16px;
}

/* PM outgoing messages (send_direction=1) */
.pm-messages li.pm-outgoing {
    flex-direction: row-reverse;
}
.pm-messages li.pm-outgoing .message-right-container {
    background-color: var(--sky-my-bubble-color);
}

/* PM simplified message styles */
.pm-message-container {
    display: flex;
    flex-direction: column;
    background-color: var(--sky-bubble-color);
    width: fit-content;
    max-width: 90%;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 6px;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.pm-messages li.pm-outgoing .pm-message-container {
    background-color: var(--sky-my-bubble-color);
    border-top-left-radius: unset;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: unset;
}

.pm-messages li.pm-failed .pm-message-container {
    box-shadow: inset 0 0 0 1px rgba(225, 0, 58, 0.45);
}

.pm-message-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    min-height: 10px;
}

.pm-message-footer .time {
    color: #cccccc;
    font-size: x-small;
    white-space: nowrap;
}

.pm-message-status {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--sky-dark-blue);
    flex: 0 0 auto;
    line-height: 1;
}

.pm-message-status i {
    font-size: 11px;
    line-height: 1;
}

.pm-message-status--sending {
    color: var(--sky-dark-blue);
}

.pm-message-status--sent,
.pm-message-status--received {
    color: var(--sky-dark-blue);
}

.pm-message-status--read {
    color: #FFFFFF;
}

.pm-message-status--failed {
    color: var(--sky-red);
}

.pm-messages li:not(.pm-outgoing) .pm-message-status {
    display: none;
}

.pm-message-content {
    font-size: 0.9em;
    min-width: 0;
}

.pm-message-content [name="message"] {
    display: block;
    min-width: 0;
    max-width: 70ch;
}

.pm-message-photo,
.pm-message-video,
.pm-message-audio {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.pm-message-photo img,
.pm-message-video video {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    touch-action: manipulation;
}

.pm-message-video video {
    display: block;
    width: min(100%, 400px);
    aspect-ratio: 4 / 3;
}

.pm-messages li.pm-info {
    justify-content: center;
    text-align: center;
    font-size: 0.85em;
    color: #aaaaaa;
    padding: 12px 16px;
    white-space: pre-line;
}

.pm-messages li.pm-day-separator {
    color: #b0b8c1;
    background-color: #2a3a5c;
    border-radius: 12px;
    font-size: 0.8em;
    padding: 4px 14px;
    margin: 8px auto;
    width: fit-content;
    text-align: center;
}

/* Conversations List View */
.conv-nav-img {
    width: 30px;
    height: 30px;
    color: var(--sky-dark-blue);
    background: #FFFFFF;
    border-radius: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conv-nav-img i {
    font-size: 18px;
    line-height: 1;
}
.conv-list-view {
    display: none;
    flex-direction: column;
    min-height: 0;
    flex: auto;
    position: relative;
}
.conv-list-view.active {
    display: flex;
}
.conv-tabs {
    display: flex;
    justify-content: center;
    gap: 28px;
    padding: 6px 18px 6px;
    flex-shrink: 0;
}
.conv-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px 6px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease;
}
.conv-tab::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 70%;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: transparent;
    transform: translateX(-50%);
    transition: background-color 0.2s ease;
}
.conv-list-pull-status {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 2;
}
.conv-list-pull-status[data-state="pulling"],
.conv-list-pull-status[data-state="armed"],
.conv-list-pull-status[data-state="refreshing"] {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.conv-list-pull-status[data-state="refreshing"] [data-conv-list-pull-icon] {
    animation: conv-list-pull-spin 0.9s linear infinite;
}
.conv-list-pull-status [data-conv-list-pull-icon] {
    color: #FFFFFF;
    font-size: 18px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.conv-tab.active {
    color: #FFFFFF;
}
.conv-tab.active::after {
    background-color: var(--sky-red);
}
.conv-tab-label {
    min-width: 0;
    white-space: nowrap;
}
.count-badge {
    background-color: var(--sky-red);
    color: #FFFFFF;
    padding: 2px 6px;
    border-radius: 999px;
    flex-shrink: 0;
    line-height: 1;
    font-size: 11px;
    min-width: 1.4em;
    justify-content: center;
    display: inline-flex;
    align-items: center;
}
.count-badge[hidden] {
    display: none;
}
.conv-tab-badge {
    margin-left: 2px;
    transform: translateY(-1px);
}
.conv-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: auto;
    min-height: 0;
    scrollbar-width: thin;
    transform: translateY(var(--conv-list-pull-offset, 0px));
    transition: transform 0.18s ease;
    will-change: transform;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
}
.conv-list.conv-list-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}
.conv-list.conv-list-dragging * {
    user-select: none;
    -webkit-user-select: none;
}
.conv-list-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(113, 209, 227, 0.1);
    cursor: pointer;
    transition: background-color 0.15s;
    gap: 10px;
}
.conv-list-item:active {
    background-color: rgba(67, 151, 228, 0.25);
}
.conv-list-item-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.conv-list-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.conv-list-item-top {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.conv-list-item-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conv-list-item-age {
    color: #aaaaaa;
    font-size: 0.8em;
    flex-shrink: 0;
}
.conv-list-item-message {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #aaaaaa;
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.conv-list-item-text {
    min-width: 0;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-list-item-unread {
    color: #FFFFFF;
    font-weight: 600;
}
.conv-list-item-unread-badge {
    display: inline-flex;
    flex-shrink: 0;
}
.conv-list-item-message:not(.conv-list-item-unread) .conv-list-item-unread-badge {
    display: none;
}
.conv-list-item-time {
    color: #888888;
    font-size: 0.75em;
}
.conv-list-loading {
    text-align: center;
    padding: 16px;
    color: #aaaaaa;
    font-size: 0.9em;
}
.conv-list-empty {
    text-align: center;
    padding: 32px 16px;
    color: #888888;
    font-size: 0.9em;
    display: none;
}
.conv-list-view.active:has(.conv-tab[data-tab="messages"].active):has(.conv-list[data-tab="messages"][data-loaded="1"]:empty) .conv-list-empty[data-tab="messages"],
.conv-list-view.active:has(.conv-tab[data-tab="requests"].active):has(.conv-list[data-tab="requests"][data-loaded="1"]:empty) .conv-list-empty[data-tab="requests"] {
    display: block;
}
@keyframes conv-list-pull-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* PM request actions bar */
.pm-request-actions {
    display: flex;
    border-top: 1px solid rgba(113, 209, 227, 0.2);
    flex-shrink: 0;
    padding: 8px 0;
}
.pm-request-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 4px;
    font-size: 0.8em;
    transition: opacity 0.15s;
}
.pm-request-action:active {
    opacity: 0.7;
}
.pm-request-action svg {
    width: 28px;
    height: 28px;
}
.pm-request-action-block {
    color: #FF4444;
}
.pm-request-action-delete {
    color: #FF4444;
}
.pm-request-action-accept {
    color: #44BB44;
}
.pm-request-action[disabled] {
    opacity: 0.4;
    cursor: default;
}

/* Media placeholders with fixed dimensions */
.pm-message-photo .media-placeholder,
.pm-message-audio .media-placeholder {
    width: 100%;
    max-width: 400px;
    height: 300px;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 14px;
    position: relative;
    animation: none;
}

.pm-message-photo .media-placeholder {
    aspect-ratio: 4/3;
}

.pm-message-audio .media-placeholder {
    aspect-ratio: auto;
    height: 54px;
    min-height: 54px;
    max-width: 300px;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}

.pm-message-photo img,
.pm-message-video video {
    display: block;
    width: 100%;
    height: auto;
    min-width: 0;
    max-width: 100%;
    max-height: 50vh;
    object-fit: contain;
    aspect-ratio: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pm-message-video video {
    height: 100%;
}

.pm-message-photo img {
    cursor: zoom-in;
}

/* Hide placeholder when media is loaded */
.pm-message-photo img.loaded + .media-placeholder,
.pm-message-video video.loaded + .media-placeholder,
.pm-message-audio audio.loaded + .media-placeholder {
    display: none;
}

/* Audio message styles */
.pm-message-audio audio {
    border-radius: 8px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
}

/* History loading indicator */
.history-loading-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent,  var(--sky-red), transparent);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: 0 0 3px 3px;
}

.history-loading-indicator.visible {
    opacity: 1;
}

@keyframes loading-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Desktop overrides for photo and video messages */
@media (min-width: 768px) {
}