/* OliviaPH v9 private channels, shared music, and auto-next queue */
.channel-chat {
    position: fixed;
    z-index: 40;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    width: 480px;
    min-height: 0;
    overflow: hidden;
    border-left: 1px solid #202a39;
    background: #090e16;
    box-shadow: -12px 0 34px rgba(0, 0, 0, .18);
    color: #e9edf4;
}

.channel-workspace {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 158px minmax(0, 1fr);
}

.channel-rail {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    border-right: 1px solid #202a39;
    background: #0b111a;
}

.channel-rail-header,
.channel-chat-header {
    display: flex;
    min-height: 66px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #202a39;
    background: #0d141f;
}

.channel-rail-header {
    padding: 10px 12px;
}

.channel-rail-header > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.channel-kicker {
    color: #6f7d91;
    font-size: .63rem;
    font-weight: 760;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.channel-rail-header strong {
    color: #f4f6fa;
    font-size: .98rem;
    font-weight: 750;
}

.channel-add {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border: 1px solid #375d98;
    border-radius: 9px;
    background: #172c4c;
    color: #dbe8ff;
    font: inherit;
    font-size: 1.22rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.channel-add:hover {
    border-color: #5f8fe4;
    background: #1d3962;
    transform: translateY(-1px);
}

.channel-list {
    display: flex;
    min-height: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 8px;
    scrollbar-color: #303b4d transparent;
    scrollbar-width: thin;
}

.channel-list::-webkit-scrollbar,
.channel-messages::-webkit-scrollbar,
.channel-member-options::-webkit-scrollbar,
.channel-music-queue::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.channel-list::-webkit-scrollbar-thumb,
.channel-messages::-webkit-scrollbar-thumb,
.channel-member-options::-webkit-scrollbar-thumb,
.channel-music-queue::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #303b4d;
}

.channel-list-item {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 8px 7px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #8e9aab;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.channel-list-item:hover {
    background: #111b29;
    color: #dce3ed;
}

.channel-list-item.is-active {
    border-color: #2c4e7d;
    background: #172943;
    color: #f1f5fb;
}

.channel-list-item.has-unread:not(.is-active) {
    color: #eff4fc;
}

.channel-list-hash {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 7px;
    background: #151f2e;
    color: #75849a;
    font-size: .86rem;
    font-weight: 820;
}

.channel-list-item.is-active .channel-list-hash {
    background: #28518a;
    color: #e4efff;
}

.channel-list-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.channel-list-copy strong,
.channel-list-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-list-copy strong {
    font-size: .78rem;
    font-weight: 710;
}

.channel-list-copy small {
    color: #647186;
    font-size: .64rem;
}

.channel-list-item b {
    display: grid;
    min-width: 19px;
    height: 19px;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #d75f70;
    color: #fff;
    font-size: .65rem;
    font-weight: 780;
}

.channel-list-empty,
.channel-list-error {
    display: grid;
    margin: auto 4px;
    justify-items: center;
    gap: 5px;
    padding: 18px 8px;
    color: #718096;
    font-size: .73rem;
    text-align: center;
}

.channel-list-empty > span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid #27364b;
    border-radius: 9px;
    color: #7696c7;
    font-size: 1rem;
    font-weight: 800;
}

.channel-list-empty strong,
.channel-list-error strong {
    color: #cbd4e0;
}

.channel-list-empty small,
.channel-list-error small {
    line-height: 1.45;
}

.channel-list-loading {
    display: flex;
    margin: auto;
    gap: 4px;
}

.channel-list-loading span,
.channel-loading > span,
.channel-typing-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #79a6ee;
    animation: channel-pulse 1s infinite ease-in-out;
}

.channel-list-loading span:nth-child(2),
.channel-loading > span:nth-child(2),
.channel-typing-dots i:nth-child(2) {
    animation-delay: .15s;
}

.channel-list-loading span:nth-child(3),
.channel-loading > span:nth-child(3),
.channel-typing-dots i:nth-child(3) {
    animation-delay: .3s;
}

@keyframes channel-pulse {
    0%, 70%, 100% { opacity: .32; transform: translateY(0); }
    35% { opacity: 1; transform: translateY(-2px); }
}

.channel-rail-footer {
    display: flex;
    min-height: 43px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 9px 10px;
    border-top: 1px solid #1c2635;
    color: #626f82;
    font-size: .64rem;
}

.channel-conversation {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    background: #090e16;
}

.channel-chat-header {
    padding: 10px 12px;
}

.channel-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.channel-heading > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.channel-heading strong,
.channel-heading span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-heading strong {
    color: #f2f5f9;
    font-size: .9rem;
    font-weight: 730;
}

.channel-heading > div > span {
    max-width: 230px;
    color: #718096;
    font-size: .68rem;
}

.channel-hash {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border: 1px solid #2d4568;
    border-radius: 9px;
    background: #14223a;
    color: #8eb8f7;
    font-size: .95rem;
    font-weight: 820;
}

.channel-disconnected .channel-hash {
    border-color: #6f3540;
    background: #2a171d;
    color: #ed9da8;
}

.channel-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.channel-manage,
.channel-close {
    height: 32px;
    border: 1px solid #2a394d;
    border-radius: 8px;
    background: #111a27;
    color: #a9b6c8;
    font: inherit;
    cursor: pointer;
}

.channel-manage {
    padding: 0 9px;
    font-size: .68rem;
    font-weight: 700;
}

.channel-close {
    display: none;
    width: 32px;
    place-items: center;
    font-size: 1.2rem;
    line-height: 1;
}

.channel-manage:hover,
.channel-close:hover {
    border-color: #46658d;
    background: #172438;
    color: #e1e8f2;
}

.channel-manage[hidden],
.channel-member-strip[hidden],
.channel-music[hidden],
.channel-typing[hidden],
.channel-new-messages[hidden],
.channel-launcher b[hidden],
.channel-editor-delete[hidden],
.channel-music-admin[hidden],
.channel-editor-layer[hidden] {
    display: none !important;
}

.channel-member-strip {
    display: flex;
    min-height: 39px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    padding: 6px 12px;
    border-bottom: 1px solid #1c2635;
    background: #0b111a;
    color: #718096;
    font-size: .67rem;
}

.channel-member-strip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-music {
    display: flex;
    min-width: 0;
    flex: 0 0 auto;
    flex-direction: column;
    border-bottom: 1px solid #202a39;
    background: #080d15;
}

.channel-music-bar {
    display: grid;
    min-height: 48px;
    grid-template-columns: 31px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid #1c2635;
    background: linear-gradient(135deg, #111a29, #0c1420);
}

.channel-music-icon {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid #355d9b;
    border-radius: 9px;
    background: #172d4e;
    color: #a9caff;
    font-size: .9rem;
}

.channel-music.is-playing .channel-music-icon {
    border-color: #5687cf;
    background: #1d3b66;
    box-shadow: 0 0 0 3px rgba(79, 131, 232, .1);
}

.channel-music-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.channel-music-copy strong,
.channel-music-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-music-copy strong {
    color: #e8edf5;
    font-size: .72rem;
}

.channel-music-copy small {
    color: #7e8ca1;
    font-size: .62rem;
}

.channel-music-join {
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid #3d679f;
    border-radius: 8px;
    background: #173055;
    color: #d7e7ff;
    font: inherit;
    font-size: .64rem;
    font-weight: 760;
    cursor: pointer;
}

.channel-music-join:hover:not(:disabled) {
    border-color: #6697df;
    background: #20406d;
}

.channel-music-join:disabled {
    opacity: .55;
    cursor: wait;
}

.channel-youtube-shell,
.channel-youtube-shell iframe {
    display: block;
    width: 100%;
    height: 200px;
    min-height: 200px;
    border: 0;
    background: #05080d;
}

.channel-member-avatars {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding-left: 4px;
}

.channel-member-avatar,
.channel-member-more,
.channel-picker-avatar,
.channel-message-avatar {
    --channel-hue: 215;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid hsla(var(--channel-hue), 62%, 62%, .35);
    background: hsla(var(--channel-hue), 46%, 38%, .22);
    color: hsl(var(--channel-hue), 76%, 76%);
    font-weight: 780;
}

.channel-member-avatar,
.channel-member-more {
    width: 24px;
    height: 24px;
    margin-left: -4px;
    border-radius: 8px;
    font-size: .58rem;
}

.channel-member-more {
    border-color: #344258;
    background: #182232;
    color: #a8b4c5;
}

.channel-member-avatar img,
.channel-picker-avatar img,
.channel-message-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.channel-messages {
    position: relative;
    display: flex;
    min-height: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 3px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 10px 8px 18px;
    scrollbar-color: #303b4d transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.channel-welcome-state,
.channel-loading {
    display: grid;
    margin: auto;
    justify-items: center;
    gap: 7px;
    padding: 22px 14px;
    color: #748196;
    font-size: .77rem;
    text-align: center;
}

.channel-welcome-state strong {
    color: #d7dee8;
    font-size: .84rem;
}

.channel-welcome-state p,
.channel-loading p {
    margin: 0;
    line-height: 1.5;
}

.channel-welcome-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin-bottom: 3px;
    border: 1px solid #2b4265;
    border-radius: 12px;
    background: #132039;
    color: #8cb8f9;
    font-size: 1.15rem;
    font-weight: 820;
}

.channel-loading {
    grid-template-columns: repeat(3, 6px);
    justify-content: center;
}

.channel-loading p {
    grid-column: 1 / -1;
}

.channel-date-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #627086;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 9px 4px 5px;
}

.channel-date-divider::before,
.channel-date-divider::after {
    height: 1px;
    flex: 1;
    background: #202938;
    content: '';
}

.channel-message {
    --channel-hue: 215;
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    padding: 6px 5px;
    border-radius: 8px;
    transition: background .15s ease;
}

.channel-message.is-own {
    grid-template-columns: 29px minmax(0, 1fr);
    background: rgba(42, 82, 137, .1);
}

.channel-message:hover {
    background: rgba(255, 255, 255, .025);
}

.channel-message.is-own:hover {
    background: rgba(42, 82, 137, .16);
}

.channel-message.is-own .channel-message-avatar {
    grid-column: 1;
}

.channel-message.is-own .channel-message-body {
    grid-row: auto;
    grid-column: 2;
    align-items: flex-start;
}

.channel-message-avatar {
    width: 29px;
    height: 29px;
    border-radius: 9px;
    font-size: .7rem;
}

.channel-message-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.channel-message-meta {
    display: flex;
    max-width: 100%;
    align-items: center;
    gap: 5px;
    padding-inline: 2px;
    color: #6c798d;
    font-size: .66rem;
}

.channel-message-meta strong {
    overflow: hidden;
    color: hsl(var(--channel-hue), 72%, 75%);
    font-size: .7rem;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-message.is-own .channel-message-meta {
    flex-direction: row;
}

.channel-role {
    padding: 1px 4px;
    border: 1px solid #354155;
    border-radius: 4px;
    color: #96a3b5;
    font-size: .55rem;
    font-weight: 780;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.channel-bubble {
    max-width: 100%;
    padding: 1px 2px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #e9edf4;
    font-size: .79rem;
    line-height: 1.43;
    overflow-wrap: anywhere;
    text-align: left;
    white-space: pre-wrap;
}

.channel-message.is-own .channel-bubble {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #f2f6fc;
    text-align: left;
}

.channel-new-messages {
    position: absolute;
    z-index: 2;
    right: 13px;
    bottom: 96px;
    padding: 6px 9px;
    border: 1px solid #3b5e95;
    border-radius: 999px;
    background: #172b49;
    color: #a9c8ff;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .28);
    font: inherit;
    font-size: .67rem;
    font-weight: 700;
    cursor: pointer;
}

.channel-typing {
    --channel-hue: 215;
    display: flex;
    min-height: 28px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-top: 1px solid #1b2432;
    color: hsl(var(--channel-hue), 65%, 73%);
    font-size: .67rem;
}

.channel-typing-dots {
    display: inline-flex;
    gap: 3px;
}

.channel-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    flex: 0 0 auto;
    gap: 7px;
    padding: 10px 10px 11px;
    border-top: 1px solid #202a39;
    background: #0d141f;
}

.channel-compose textarea {
    width: 100%;
    min-height: 41px;
    max-height: 112px;
    resize: none;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #2b3749;
    border-radius: 10px;
    outline: 0;
    background: #111a26;
    color: #eef2f8;
    font: inherit;
    font-size: .8rem;
    line-height: 1.35;
}

.channel-compose textarea:focus {
    border-color: #4f83e8;
    box-shadow: 0 0 0 3px rgba(79, 131, 232, .12);
}

.channel-compose textarea::placeholder {
    color: #626f82;
}

.channel-compose textarea:disabled {
    opacity: .62;
    cursor: not-allowed;
}

.channel-compose button {
    min-width: 54px;
    height: 41px;
    align-self: end;
    padding: 0 10px;
    border: 1px solid #4f83e8;
    border-radius: 10px;
    background: #4f83e8;
    color: #fff;
    font: inherit;
    font-size: .72rem;
    font-weight: 720;
    cursor: pointer;
}

.channel-compose button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.channel-compose-status {
    min-height: 0;
    grid-column: 1 / -1;
    color: #ec8d97;
    font-size: .67rem;
}

.channel-compose-status:empty {
    display: none;
}

.channel-editor-layer {
    position: absolute;
    z-index: 8;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(3, 7, 12, .82);
    backdrop-filter: blur(5px);
}

.channel-editor {
    display: flex;
    width: min(430px, 100%);
    max-height: min(680px, calc(100dvh - 36px));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #2d3d53;
    border-radius: 15px;
    background: #0e1622;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .58);
}

.channel-editor > header,
.channel-editor > footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: #111b29;
}

.channel-editor > header {
    border-bottom: 1px solid #253247;
}

.channel-editor > footer {
    justify-content: flex-end;
    border-top: 1px solid #253247;
}

.channel-editor-delete {
    min-height: 40px;
    margin-right: auto;
    padding: 0 11px;
    border: 1px solid #713d48;
    border-radius: 9px;
    background: #2b171e;
    color: #f0a3ae;
    font: inherit;
    font-size: .74rem;
    font-weight: 720;
    cursor: pointer;
}

.channel-editor-delete:hover {
    border-color: #a85261;
    background: #3b1b24;
    color: #ffc1c9;
}

.channel-editor-delete:disabled {
    opacity: .55;
    cursor: wait;
}

.channel-editor > header > div {
    display: grid;
    gap: 2px;
}

.channel-editor h2 {
    margin: 0;
    color: #f1f4f8;
    font-size: 1.02rem;
}

.channel-editor > header > button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #2e3c50;
    border-radius: 9px;
    background: #152031;
    color: #aab5c5;
    font: inherit;
    font-size: 1.2rem;
    cursor: pointer;
}

.channel-editor-fields {
    display: grid;
    min-height: 0;
    gap: 14px;
    overflow-y: auto;
    padding: 16px;
}

.channel-editor .field {
    display: grid;
    gap: 7px;
}

.channel-editor .field > span,
.channel-member-picker legend {
    color: #cbd4df;
    font-size: .76rem;
    font-weight: 700;
}

.channel-editor .field small {
    color: #66758a;
    font-weight: 500;
}

.channel-name-input {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #334157;
    border-radius: 10px;
    background: #0b111b;
}

.channel-name-input:focus-within {
    border-color: #4f83e8;
    box-shadow: 0 0 0 3px rgba(79, 131, 232, .12);
}

.channel-name-input b {
    display: grid;
    place-items: center;
    border-right: 1px solid #2c394c;
    color: #7698cc;
}

.channel-name-input .input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.channel-member-picker {
    display: grid;
    min-width: 0;
    min-height: 0;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
}

.channel-member-picker > p {
    margin: 0 0 3px;
    color: #6f7d91;
    font-size: .68rem;
    line-height: 1.45;
}

.channel-music-admin {
    display: grid;
    min-width: 0;
    gap: 9px;
    margin: 1px 0 0;
    padding: 12px;
    border: 1px solid #2d405c;
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(26, 46, 75, .58), rgba(10, 16, 25, .82));
}

.channel-music-admin legend {
    padding: 0 6px;
    color: #dce6f4;
    font-size: .76rem;
    font-weight: 750;
}

.channel-music-admin legend small {
    margin-left: 4px;
    color: #78a7e8;
    font-size: .58rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.channel-music-admin > p {
    margin: 0;
    color: #77869a;
    font-size: .68rem;
    line-height: 1.45;
}

.channel-music-link {
    display: grid;
    min-width: 0;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid #334760;
    border-radius: 9px;
    background: #080e17;
    color: #7fa9e5;
}

.channel-music-link > span {
    text-align: center;
    font-size: .7rem;
}

.channel-music-link input {
    width: 100%;
    height: 37px;
    min-width: 0;
    padding: 0 9px;
    border: 0;
    border-left: 1px solid #2c3d54;
    outline: 0;
    background: transparent;
    color: #e7edf6;
    font: inherit;
    font-size: .72rem;
}

.channel-music-link:focus-within {
    border-color: #4f83e8;
    box-shadow: 0 0 0 3px rgba(79, 131, 232, .12);
}

.channel-music-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.channel-music-actions button {
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid #36577f;
    border-radius: 8px;
    background: #162941;
    color: #cfe0f8;
    font: inherit;
    font-size: .65rem;
    font-weight: 720;
    cursor: pointer;
}

.channel-music-actions button:hover:not(:disabled) {
    border-color: #5d89c6;
    background: #1c3657;
}

.channel-music-actions button.is-danger {
    border-color: #683b47;
    background: #321a22;
    color: #f2aebb;
}

.channel-music-actions button:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.channel-music-queue {
    display: grid;
    max-height: 142px;
    gap: 4px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #293b52;
    border-radius: 9px;
    background: rgba(6, 11, 18, .72);
    scrollbar-color: #36455a transparent;
    scrollbar-width: thin;
}

.channel-music-queue-empty {
    margin: 0;
    padding: 8px;
    color: #68778b;
    font-size: .65rem;
    text-align: center;
}

.channel-music-queue-item {
    display: grid;
    min-width: 0;
    grid-template-columns: 23px minmax(0, 1fr) 27px;
    align-items: center;
    gap: 7px;
    padding: 5px 6px;
    border-radius: 7px;
    background: #101a28;
}

.channel-music-queue-item > b {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 6px;
    background: #1b3150;
    color: #91b8ec;
    font-size: .6rem;
}

.channel-music-queue-item > a {
    overflow: hidden;
    color: #b8c8dc;
    font-size: .66rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-music-queue-item > a:hover {
    color: #8fbaff;
    text-decoration: underline;
}

.channel-music-queue-item > button {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid #4b3440;
    border-radius: 7px;
    background: #28171e;
    color: #e9a5b1;
    font: inherit;
    cursor: pointer;
}

.channel-music-queue-item > button:disabled {
    opacity: .45;
    cursor: wait;
}

.channel-music-admin-status {
    min-height: 16px;
    color: #95b8eb;
    font-size: .66rem;
}

.channel-music-admin-status.is-error {
    color: #ee929d;
}

.channel-member-search {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid #2d3b50;
    border-radius: 9px;
    background: #0b111b;
    color: #708097;
}

.channel-member-search > span {
    text-align: center;
}

.channel-member-search input {
    width: 100%;
    height: 36px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #e6ebf2;
    font: inherit;
    font-size: .76rem;
}

.channel-member-options {
    display: flex;
    max-height: 235px;
    min-height: 80px;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #263448;
    border-radius: 10px;
    background: #0a1019;
    scrollbar-color: #303b4d transparent;
    scrollbar-width: thin;
}

.channel-member-option {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 31px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #bac4d1;
    cursor: pointer;
}

.channel-member-option[hidden] {
    display: none;
}

.channel-member-option:hover {
    background: #111b29;
}

.channel-member-option:has(input:checked) {
    border-color: #294e82;
    background: #14243b;
}

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

.channel-picker-avatar {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    font-size: .7rem;
}

.channel-picker-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.channel-picker-copy strong,
.channel-picker-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-picker-copy strong {
    font-size: .75rem;
}

.channel-picker-copy small {
    color: #68768a;
    font-size: .63rem;
}

.channel-picker-check {
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border: 1px solid #37455a;
    border-radius: 6px;
    color: transparent;
    font-size: .66rem;
}

.channel-member-option input:checked ~ .channel-picker-check {
    border-color: #4f83e8;
    background: #4f83e8;
    color: #fff;
}

.channel-member-option:has(input:disabled) {
    cursor: default;
}

.channel-editor-status {
    min-height: 18px;
    color: #ee929d;
    font-size: .7rem;
}

.channel-editor-status:empty {
    display: none;
}

.channel-launcher,
.channel-overlay {
    display: none;
}

@media (min-width: 1281px) {
    .app-main {
        margin-right: 480px;
    }

    .flash-stack {
        right: 498px;
    }
}

@media (max-width: 1280px) {
    .channel-chat {
        z-index: 70;
        top: 12px;
        right: 12px;
        bottom: 12px;
        width: min(560px, calc(100vw - 24px));
        border: 1px solid #293548;
        border-radius: 14px;
        box-shadow: -16px 18px 55px rgba(0, 0, 0, .5);
        opacity: 0;
        pointer-events: none;
        transform: translateX(calc(100% + 24px));
        transition: opacity .2s ease, transform .23s ease;
    }

    body.chat-open {
        overflow: hidden;
    }

    body.chat-open .channel-chat {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }

    .channel-close {
        display: grid;
    }

    .channel-launcher {
        position: fixed;
        z-index: 42;
        right: 18px;
        bottom: 18px;
        display: inline-flex;
        min-height: 47px;
        align-items: center;
        gap: 8px;
        padding: 9px 13px;
        border: 1px solid #385d97;
        border-radius: 12px;
        background: #172b49;
        color: #dfeaff;
        box-shadow: 0 14px 36px rgba(0, 0, 0, .4);
        font: inherit;
        font-size: .84rem;
        font-weight: 710;
        cursor: pointer;
    }

    .channel-launcher-icon {
        display: grid;
        width: 25px;
        height: 25px;
        place-items: center;
        border-radius: 7px;
        background: #4f83e8;
        color: #fff;
        font-size: .8rem;
        font-weight: 820;
    }

    .channel-launcher b {
        display: grid;
        min-width: 20px;
        height: 20px;
        place-items: center;
        padding-inline: 5px;
        border-radius: 999px;
        background: #d75f70;
        color: #fff;
        font-size: .67rem;
    }

    .channel-overlay {
        position: fixed;
        z-index: 65;
        inset: 0;
        display: block;
        background: rgba(3, 6, 11, .65);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    body.chat-open .channel-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 620px) {
    .channel-chat {
        inset: 0;
        width: 100%;
        height: 100dvh;
        border: 0;
        border-radius: 0;
        transform: translateY(105%);
    }

    body.chat-open .channel-chat {
        transform: translateY(0);
    }

    .channel-workspace {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .channel-rail {
        max-height: 145px;
        border-right: 0;
        border-bottom: 1px solid #202a39;
    }

    .channel-rail-header {
        min-height: 49px;
        padding: 7px 11px;
    }

    .channel-kicker,
    .channel-rail-footer {
        display: none;
    }

    .channel-list {
        display: flex;
        min-height: 0;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 7px 9px 9px;
    }

    .channel-list-item {
        width: 145px;
        min-width: 145px;
        padding: 7px;
    }

    .channel-list-empty,
    .channel-list-error {
        min-width: 100%;
        grid-template-columns: auto 1fr;
        justify-items: start;
        margin: 0;
        padding: 6px;
        text-align: left;
    }

    .channel-list-empty > span {
        grid-row: 1 / 3;
    }

    .channel-chat-header {
        min-height: 57px;
        padding: 8px 10px;
    }

    .channel-member-strip {
        padding-inline: 10px;
    }

    .channel-messages {
        padding: 13px 10px 16px;
    }

    .channel-compose {
        padding: 8px 9px max(9px, env(safe-area-inset-bottom));
    }

    .channel-compose textarea {
        font-size: 1rem;
    }

    .channel-launcher {
        right: 13px;
        bottom: 13px;
    }

    .channel-editor-layer {
        padding: 0;
    }

    .channel-editor {
        width: 100%;
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
    }

    .channel-editor-fields {
        flex: 1 1 0;
    }

    .channel-member-options {
        max-height: none;
        min-height: 190px;
    }
}

@media (max-width: 390px) {
    .channel-rail {
        max-height: 133px;
    }

    .channel-list-item {
        width: 132px;
        min-width: 132px;
    }

    .channel-heading > div > span {
        max-width: 145px;
    }

    .channel-member-strip > span {
        display: none;
    }

    .channel-editor > footer {
        flex-wrap: wrap;
    }

    .channel-editor-delete {
        width: 100%;
        margin-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .channel-list-loading span,
    .channel-loading > span,
    .channel-typing-dots i {
        animation: none;
    }
}

@media print {
    .channel-chat,
    .channel-launcher,
    .channel-overlay {
        display: none !important;
    }

    .app-main {
        margin-right: 0 !important;
    }
}


/* v10: reactions, mentions, and always-accessible music queue composer */
.channel-message-reactions {
    position: relative;
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 22px;
}

.channel-reaction-chip,
.channel-reaction-add,
.channel-reaction-picker button {
    min-height: 22px;
    padding: 2px 6px;
    border: 1px solid #2d3b50;
    border-radius: 999px;
    background: #111b29;
    color: #b9c5d6;
    font: inherit;
    font-size: .68rem;
    line-height: 1;
    cursor: pointer;
}

.channel-reaction-chip.is-active {
    border-color: #4f83e8;
    background: #162c4a;
    color: #d8e8ff;
}

.channel-reaction-add {
    width: 24px;
    padding: 0;
    color: #718198;
    opacity: .72;
}

.channel-message:hover .channel-reaction-add,
.channel-reaction-add:focus-visible {
    opacity: 1;
}

.channel-reaction-picker {
    position: absolute;
    z-index: 6;
    left: 0;
    bottom: calc(100% + 5px);
    display: flex;
    gap: 4px;
    padding: 6px;
    border: 1px solid #33445c;
    border-radius: 10px;
    background: #0d1622;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .38);
}

.channel-reaction-picker[hidden] { display: none; }
.channel-reaction-picker button { width: 31px; height: 29px; padding: 0; font-size: .86rem; }
.channel-reaction-picker button:hover { border-color: #557fb8; background: #19304d; }

.channel-mention {
    display: inline;
    padding: 1px 3px;
    border-radius: 4px;
    background: rgba(79, 131, 232, .14);
    color: #9ec2ff;
    font-weight: 720;
}

.channel-mention.is-me {
    background: rgba(77, 188, 132, .16);
    color: #9de0bc;
}

.channel-compose { position: relative; }
.channel-mention-menu {
    position: absolute;
    z-index: 7;
    left: 10px;
    right: 72px;
    bottom: calc(100% - 2px);
    max-height: 210px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #32445e;
    border-radius: 11px;
    background: #0c1521;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .48);
}
.channel-mention-menu[hidden] { display: none; }
.channel-mention-option {
    display: grid;
    width: 100%;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #d7dfe9;
    text-align: left;
    cursor: pointer;
}
.channel-mention-option:hover,
.channel-mention-option.is-active { background: #16253a; }
.channel-mention-option strong { overflow: hidden; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.channel-mention-option small { color: #728299; font-size: .6rem; }
.channel-mention-avatar { width: 30px; height: 30px; border-radius: 8px; font-size: .66rem; }
.channel-mention-avatar img { width: 100%; height: 100%; object-fit: cover; }

.channel-music-addbar {
    position: sticky;
    z-index: 3;
    top: -16px;
    display: grid;
    gap: 7px;
    margin: -4px -4px 0;
    padding: 10px 4px 8px;
    background: linear-gradient(180deg, #13243a 78%, rgba(19, 36, 58, 0));
}
.channel-music-addbar > strong { color: #dce8f8; font-size: .72rem; }
.channel-music-queue-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.channel-music-queue-actions button {
    min-height: 35px;
    padding: 0 9px;
    border: 1px solid #36577f;
    border-radius: 8px;
    background: #162941;
    color: #cfe0f8;
    font: inherit;
    font-size: .67rem;
    font-weight: 740;
    cursor: pointer;
}
.channel-music-queue-actions button.is-primary { border-color: #4f83e8; background: #315f9e; color: #fff; }
.channel-music-queue-actions button:disabled { opacity: .42; cursor: not-allowed; }
.channel-music-queue { max-height: 120px; }

@media (max-width: 620px) {
    .channel-mention-menu { left: 9px; right: 66px; max-height: 180px; }
    .channel-reaction-add { opacity: 1; }
    .channel-music-addbar { top: -16px; }
}

/* OliviaPH v13 channel video conference */
.channel-call-head,
.channel-call-actions button,
.channel-call-window-head button,
.channel-call-foot button {
    border: 1px solid #315f58;
    border-radius: 8px;
    background: #12332f;
    color: #bdf3df;
    font: inherit;
    font-weight: 760;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease, opacity .16s ease;
}

.channel-call-head {
    height: 32px;
    padding: 0 9px;
    font-size: .67rem;
}

.channel-call-head:hover,
.channel-call-actions button:hover,
.channel-call-foot button:hover {
    border-color: #4f8d80;
    background: #17463f;
    transform: translateY(-1px);
}

.channel-call-head.is-live {
    border-color: #2f8d68;
    background: #14543f;
    color: #dbffef;
}

.channel-call-head:disabled,
.channel-call-actions button:disabled {
    opacity: .46;
    cursor: not-allowed;
    transform: none;
}

.channel-call-banner[hidden],
.channel-call-head[hidden],
.channel-call-layer[hidden],
.channel-call-actions [hidden] {
    display: none !important;
}

.channel-call-banner {
    display: grid;
    min-width: 0;
    flex: 0 0 auto;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid #23473f;
    background: linear-gradient(90deg, #0c231f 0%, #0d1b1b 60%, #0b1519 100%);
}

.channel-call-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    color: #70d8aa;
    font-size: .59rem;
    font-weight: 860;
    letter-spacing: .08em;
    white-space: nowrap;
}

.channel-call-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #58d69e;
    box-shadow: 0 0 0 0 rgba(88, 214, 158, .48);
    animation: channel-call-live-pulse 1.8s infinite ease-out;
}

@keyframes channel-call-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(88, 214, 158, .42); }
    65%, 100% { box-shadow: 0 0 0 7px rgba(88, 214, 158, 0); }
}

.channel-call-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.channel-call-copy strong,
.channel-call-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-call-copy strong {
    color: #e2f5ed;
    font-size: .72rem;
}

.channel-call-copy small {
    color: #77968d;
    font-size: .61rem;
}

.channel-call-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.channel-call-actions button {
    min-height: 30px;
    padding: 0 9px;
    font-size: .62rem;
}

.channel-call-actions button.is-danger {
    border-color: #6f3943;
    background: #351a20;
    color: #f1b5bd;
}

.channel-call-actions button.is-danger:hover {
    border-color: #9b4c59;
    background: #482128;
}

body.video-call-open {
    overflow: hidden;
}

.channel-call-layer {
    position: fixed;
    z-index: 220;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(3, 7, 12, .86);
    backdrop-filter: blur(10px);
}

.channel-call-window {
    display: grid;
    width: min(1480px, 96vw);
    height: min(900px, 94vh);
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid #2a3749;
    border-radius: 18px;
    background: #070b11;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .62);
}

.channel-call-window-head {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #202a39;
    background: #0d141e;
}

.channel-call-window-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.channel-call-window-head strong {
    overflow: hidden;
    color: #edf3f8;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-call-window-head button {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border-color: #3a4658;
    background: #151d28;
    color: #cad2dd;
    font-size: 1.25rem;
}

.channel-call-stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #030609;
}

.channel-call-stage > iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

.channel-call-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #8ea1b8;
}

.channel-call-loading span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6ab795;
    animation: channel-pulse 1s infinite ease-in-out;
}

.channel-call-loading span:nth-child(2) { animation-delay: .15s; }
.channel-call-loading span:nth-child(3) { animation-delay: .3s; }
.channel-call-loading p { margin: 0 0 0 7px; font-size: .75rem; }

.channel-call-error {
    display: grid;
    max-width: 460px;
    min-height: 100%;
    align-content: center;
    justify-items: center;
    gap: 9px;
    margin: auto;
    padding: 24px;
    color: #8996a8;
    text-align: center;
}

.channel-call-error strong { color: #edf2f7; font-size: .95rem; }
.channel-call-error p { margin: 0; font-size: .75rem; line-height: 1.55; }
.channel-call-error a {
    margin-top: 4px;
    padding: 9px 12px;
    border: 1px solid #376d5b;
    border-radius: 9px;
    background: #12332b;
    color: #c8f7e4;
    font-size: .7rem;
    font-weight: 760;
    text-decoration: none;
}

.channel-call-foot {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 12px;
    border-top: 1px solid #202a39;
    background: #0d141e;
    color: #718096;
    font-size: .66rem;
}

.channel-call-foot button {
    min-height: 32px;
    flex: 0 0 auto;
    padding: 0 12px;
}

@media (max-width: 820px) {
    .channel-call-layer { padding: 0; }
    .channel-call-window {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
    }
    .channel-call-banner { grid-template-columns: auto minmax(0, 1fr); }
    .channel-call-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .channel-call-foot span { display: none; }
    .channel-call-foot { justify-content: flex-end; }
}

@media (max-width: 520px) {
    .channel-call-head { padding: 0 7px; font-size: .61rem; }
    .channel-call-banner { padding: 8px 10px; }
    .channel-call-window-head { min-height: 56px; padding: 8px 10px; }
    .channel-call-window-head strong { font-size: .78rem; }
}