.nav-fixed .topnav {
    z-index: 1039;
}

.fixed-top{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.topnav {
    padding-left: 0;
    height: 3.5rem;
    z-index: 1039;
}

.navbar .form-control, .topnav {
    font-size: 1rem;
}

.form-control {
    display: block;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control-inline {
    display: inline-block;
}

.shadow {
    box-shadow: 0 .15rem 1.75rem 0 rgba(31,45,65,.15);
}
.bg-white {
    background-color: #fff;
}

.bg-gray {
    background-color: #eee;
}

.profile {
    width: 230px;
}

.profile-logo {
    float: left;
    width: 50px;
    height: 50px;
    background: #b681c3;
    border-radius: 25px;
    text-align: center;
    vertical-align: middle;
    font-size: 1.4em;
    padding: 7px;
    color: #f9f9f9;
}

.profile-info {
    float: left;
    margin-left: 10px;
    margin-top: 8px;
    color: #616263;
    width: 120px;
}

.user-logout {
    float: right;
    text-align: center;
}

.logout-icon {
    display: block;
    font-size: 1.5em;
}

.logout-text {
    font-size: .7em;
}

.profile-info span {
    display: block;
    line-height: 1.2;
    text-transform: capitalize;
}

#permspan {
    font-size: .9em;
    color: #108e07;
    font-style: italic;
}

#chpwspan a {
    padding: 4px 0;
    font-size: 0.9em;
    color: #e4157e;
}

#chpwspan.invisible {
    display: none;
}

.sidenav .user-logout a {
    font-size: 1em;
    padding: 7px 0 0;
    color: #e4157e;
    cursor: pointer;
    line-height: .7;
}

.sidenav .user-logout a:hover {
    color: #ab0659;
}

.navbar, .navbar .container, .navbar .container-fluid, .navbar .container-lg, .navbar .container-md, .navbar .container-sm, .navbar .container-xl {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    background: #610a86;
}
.navbar {
    position: relative;
    padding: .1rem;
}

.topnav .navbar-brand {
    width: 15rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.btn {
    display: inline-block;
    font-weight: 400;
    font-size: 1em;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.255rem .75rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn {
    transition-duration: 0.4s;
}

.btn-default:hover {
    color: #fff;
    background-color: #545b62;
    border-color: #4e555b;
}

.btn-default {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-cancel {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-cancel:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-blue {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-blue:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-warn {
    color: #ffc107;
    background-color: transparent;
    background-image: none;
    border-color: #ffc107;
}

.btn-warn:hover {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}

.btn-large {
    font-size: 110%;
}

.app {
    background-color: #f4f4f4;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
}

.coln-left {
    flex: 30%;
    padding: 0;
    margin: 0;
}

.coln-left-hide {
  flex: 0;
}

.coln-right {
    flex: 70%;
    position: relative;
}

/* Clear floats after the columns */
.row {
    display: flex;
}

.full-height {
    height: calc(var(--vh, 1vh) * 100);
}

.full-width {
    width: calc(100vw - 200px);
    height: calc(var(--vh, 1vh) * 100 - 56px);
}

.full-width-active {
    width: 100vw;
}

.container {
    width: 100%;
}

.users-header {
    height: 92px;
    padding: 0;
    overflow: hidden;
    /* [革命色] 原 Galène 紫 #610a86 改革命红 */
    background: #a32d2d;
    font-size: .95rem;
    font-weight: 500;
}

.users-header:after, .profile-user:after, .users-header:before {
    display: table;
    content: " ";
}

.users-header:after, .profile-user:after {
    clear: both;
}

.reply {
    height: 53px;
    width: 100%;
    background-color: #eae7e5;
    padding: 10px 5px 10px 5px;
    margin: 0;
    z-index: 1000;
}

.reply textarea {
    width: 100%;
    resize: none;
    overflow: hidden;
    padding: 5px;
    outline: none;
    border: none;
    text-indent: 5px;
    box-shadow: none;
    height: 100%;
}

textarea.form-reply {
    height: 2.1em;
    margin-right: .5em;
}

.form-reply {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 1rem;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.form-reply::placeholder {
  opacity: .7;
}

.select {
    display: block;
    width: 100%;
    padding: .275rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.select-inline {
    display: inline-block;
}

.message {
    width: auto !important;
    padding: 3px 8px 5px !important;
    background: transparent;
    font-size: 13px;
    box-shadow: none;
    border-radius: 0;
    word-wrap: break-word;
    /* [YY式] 占满宽度列表式消息（2026-08-20 东哥要求：昵称醒目、消息不窄） */
    display: block !important;
    margin: 3px 0;
    max-width: 100%;
    text-align: left;
}

.message-sender {
    background: rgba(163, 45, 45, 0.06);  /* 自己消息淡红底区分 */
}

.message-private {
    background: rgba(212, 175, 55, 0.08);
}

.message-private .message-header:after {
    content: "(private)";
    margin-left: 1em;
}

.message-system {
    font-size: 11px;
    background: rgba(0,0,0,0.04);
    border-radius: 4px;
    padding: 2px 8px;
    display: inline-block;
    color: #888;
}

.message-row:after, .message-row:before {
    display: table;
    content: " ";
}

.message-row:after {
    clear: both;
}

.message-content {
    white-space: pre-wrap;
    margin: 0;
    padding: 0;
    padding-left: 2px;
    word-wrap: break-word;
    word-break: break-word;
    font-weight: 400;
    /* [YY式] 内容 14px 行高舒展（2026-08-20） */
    font-size: 14px;
    line-height: 1.65;
    color: #202035;
}

.message-header {
    margin: 0;
    /* [YY式] 去掉斜体，昵称更醒目（2026-08-20） */
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
    color: #444;
    text-shadow: none;
}

/* [YY式] 昵称革命红加粗（谁说的话一目了然） */
.message-user {
    font-weight: bold;
    color: #a32d2d;
}

.message-footer {
    margin: 0;
    padding: 0;
    margin-bottom: -5px;
    line-height: .9;
    text-align: right;
}

.message-time {
    margin-left: 1em;
    font-weight: normal;
    font-size: 11px;
    color: #999;
}

.message-me-asterisk, .message-me-user {
    margin-right: 0.33em;
}

.message-me-content {
    white-space: pre-wrap;
}

.video-container {
    height: calc(var(--vh, 1vh) * 100 - 56px);
    position: relative;
    background: rgba(0, 0, 0, 0.91);
    /* Display only when showing video */
    display: block;
}

.chat-btn {
    display: block;
    /*on top of video peers*/
    z-index: 1002;
    font-size: 1.8em;
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
}

.chat-btn .icon-chat {
    color: #cac7c7;
    height: 50px;
    padding: 10px;
    text-shadow: 0px 0px 1px #b3adad;
}

.collapse-video {
    left: inherit;
    right: 30px;
}

.video-controls, .top-video-controls {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 25px;
    text-align: center;
    color: #eaeaea;
    font-size: 1.1em;
    opacity: 0;
    height: 32px;
}

.video-controls:after, .top-video-controls:after {
    clear: both;
    display: table;
    content: " ";
}

.top-video-controls {
    text-align: right;
    bottom: inherit;
    top: 0;
    line-height: 1.1;
    font-size: 1.3em;
    text-shadow: 1px 1px 2px rgb(90 86 86);
}

.controls-button {
    padding: 3px 10px;
    vertical-align: middle;
    height: 100%;
}

.controls-left {
    float: left;
    text-align: left;
}

.controls-right {
    float: right;
    text-align: right;
}

.vc-overlay {
    background: linear-gradient(180deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 70%) 100%);
}

.peer:hover > .video-controls, .peer:hover > .top-video-controls {
    opacity: 1;
}

.video-controls span, .top-video-controls span {
    margin-right: 20px;
    transition: opacity .7s ease-out;
    opacity: 1;
    cursor: pointer;
}

.video-controls span:last-child, .top-video-controls span:last-child {
    margin-right: 0;
}

.video-controls span:hover, .top-video-controls span:hover {
    opacity: .8;
    transition: opacity .5s ease-out;
}

.top-video-controls .video-stop{
    display: flex;
    width: 1.5em;
    height: 1.5em;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    color: #eaeaea;
}

.video-controls .volume {
    display: inline-block;
    text-align: center;
}

.video-controls .video-play {
    font-size: 0.85em;
}

.video-controls .video-stop {
    color: #d03e3e;
}

.video-controls span.disabled, .video-controls span.disabled:hover, .top-video-controls span.disabled:hover{
    opacity: .2;
    color: #c8c8c8
}

.volume-mute {
    vertical-align: middle;
    width: 25px;
    display: var(--dv, inline);
}

.volume-slider {
    height: 4px;
    width: 60px;
    cursor: pointer;
    margin: 5px 5px;
    vertical-align: middle;
    opacity: var(--ov, 0);
    transition: opacity .5s ease-out;
}

.video-controls .volume:hover {
    --ov: 1;
    --dv: inline;
}

.mobile-container {
    display: block !important;
}

.login-container {
    height: calc(var(--vh, 1vh) * 100 - 56px);
    position: relative;
    display: flex;
    justify-content: center;
    overflow: scroll;
}

.login-box {
    width: 20em;
    padding: 1em;
    margin: 2em auto;
    height: auto;
    min-height: 23em;
    background: #fcfcfc;
}

.login-box .connect {
    width: 100%;
    text-align: center;
}

.login-box h2 {
    text-align: center;
    margin-bottom: 40px;
}

.label-fallback {
    opacity: 0.5;
}

.label {
    left: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1;
    text-align: center;
    line-height: 24px;
    color: #ffffff;
}

.nav-link {
    padding: 0;
    color: #dbd9d9;
    min-width: 30px;
    display: block;
    text-align: center;
    margin: 0 10px;
    position: relative;
    line-height: 1.1;
}

.nav-link span {
    display: block;
}

.nav-link label {
    display: block;
    cursor: pointer;
    color: #fff;
    font-size: 55%;
}

.nav-link:hover {
    color: #c2a4e0;
}
.nav-link label:hover {
    color: #c2a4e0;
}

.nav-cancel, .muted, .nav-cancel label, .muted label {
    color: #d03e3e
}

.nav-cancel:hover, .muted:hover, .nav-cancel label:hover, .muted label:hover {
    color: #d03e3e
}

.nav-button {
    cursor: pointer;
    font-size: 25px;
}

.nav-more {
    padding-top: 5px;
    margin-left: 0;
}

.header-title {
    float: left;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    /* [革命色] 白底革命红标题，醒目（原 #ebebeb 浅灰在白底看不见） */
    color: #a32d2d;
    line-height: 2em;
}

#title {
    text-align: center;
}

h1 {
    white-space: nowrap;
}

#statdiv {
    white-space: nowrap;
    margin-bottom: 16px;
}

#errspan {
    margin-left: 1em;
}

.connected {
    color: green;
}

.disconnected {
    color: red;
    font-weight: bold;
}

.login {
    display: inline
}

.loginform label {
    min-width: 3em;
    display: inline-block;
    padding-top: 10px;
}

.loginform input[type="text"], .loginform input[type="password"] {
    width: 100%;
}

.switch-radio {
    margin: 0;
}

.invisible {
    display: none;
}

.error {
    color: red;
    font-weight: bold;
}

.noerror {
    display: none;
}

.clear {
    clear: both;
    content: "";
}

#optionsdiv {
    margin-bottom: 4px;
}

#optionsdiv input[type="checkbox"] {
  vertical-align: middle;
}

#presentbutton, #unpresentbutton {
    white-space: nowrap;
    margin-right: 0.4em;
    margin-top: .1em;
    font-size: 1.1em;
    text-align: left;
    width: 5.8em;
}

#videoselect {
    text-align-last: center;
    margin-right: 0.4em;
}

#audioselect {
    text-align-last: center;
}

#sharebutton, #unsharebutton {
    white-space: nowrap;
}

#unsharebutton {
    margin-right: 0.4em;
}

#filterselect {
    text-align-last: center;
    margin-right: 0.4em;
}

#sendselect {
    text-align-last: center;
    margin-right: 0.4em;
}

#simulcastselect {
    text-align-last: center;
    margin-right: 0.4em;
}

#requestselect {
    text-align-last: center;
}

#chatbox {
    height: 100%;
    position: relative;
}

#chat {
    padding: 0;
    margin: 0;
    background-color: #f8f8f8;
    background-size: cover;
    overflow-y: scroll;
    border: none;
    border-right: 4px solid #e6e6e6;
    /* force to fill height */
    height: 100% !important;
    width: 100%;
    min-width: 300px;
    overflow: hidden;
}

#inputform {
    display: flex;
}

#box {
    overflow: auto;
    height: calc(100% - 53px);
    padding: 10px;
}

.close-chat {
    position: absolute;
    top: 2px;
    right: 14px;
    width: 25px;
    font-size: 1em;
    text-align: center;
    font-weight: 700;
    color: #8f8f8f;
    cursor: pointer;
    border: 1px solid transparent;
}

.close-chat:hover, .close-chat:active {
    border: 1px solid #dfdfdf;
    border-radius: 4px;
}

#connectbutton {
    margin-top: 1em;
    padding: 0.37rem 1.5rem;
}

#input {
    width: 100%;
    border: none;
    resize: none;
    overflow-y: hidden;
}

#input:focus {
    outline: none;
}

#inputbutton:focus {
    outline: none;
}

#resizer {
    width: 4px;
    margin-left: -4px;
    z-index: 1000;
}

#resizer:hover {
    cursor: ew-resize;
}

#peers {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, auto);
    row-gap: 5px;
    column-gap: 10px;
    position: absolute;
    top: 0;
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: 1000;
    background-size: cover;
    overflow: hidden;
    vertical-align: top!important;
}

.peer {
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
    border: 2px solid rgba(0,0,0,0);
    background: #80808014;
}

.peer-active {
    border: 2px solid #610a86;
}

.peer-hidden {
    display: none;
}

.media {
    width: 100%;
    max-height: calc(var(--vh, 1vh) * 100 - 76px);
    padding-bottom: 20px;
    object-fit: contain;
}

.media-failed {
    filter: grayscale(0.5) contrast(0.5);
}

.mirror {
    transform: scaleX(-1);
}

#inputform {
    width: 100%;
}

.sidenav {
    background-color: #4d076b;
    box-shadow: 0 0 24px 0 rgba(71,77,86,.1), 0 1px 0 0 rgba(71,77,86,.08);
    display: block;
    position: fixed;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    width: 0px;
    /* on top of everything */
    z-index: 2999;
    top: 0;
    right: 0;
    height: calc(var(--vh, 1vh) * 100);
    overflow-x: hidden;
    overflow-y: hidden;
}

.sidenav a {
    padding: 10px 20px;
    text-decoration: none;
    font-size: 30px;
    color: #dbd9d9;
    display: block;
    transition: 0.3s;
    line-height: 1.0;
}

.sidenav a:hover {
    color: #c2a4e0;
}

.sidenav .closebtn {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    height: 56px;
}

.sidenav-label {
    display: block;
    margin-top: 15px;
}

.sidenav-label-first {
    display: block;
    margin-top: 0;
}

.sidenav form{
    margin-top: 15px;
}

.sidenav-header {
    height: 56px;
}

.sidenav-header h2{
    color: #fff;
    padding: 10px;
    margin: 0;
    max-width: 70%;
    line-height: 36px;
}

.sidenav-content {
    padding: 10px;
    background: #fff;
    height: calc(100% - 56px);
    overflow-y: auto;
    overflow-x: hidden;
}

.sidenav-content h2 {
    margin: 0;
}

fieldset {
    margin: 0;
    margin-top: 20px;
    border: 1px solid #e9e8e8;
    padding: 8px;
    border-radius: 4px;
}
legend {
    padding: 2px;
    color: #4d4f51;
}

.nav-menu {
    margin: 0;
    padding: 0;
}

.nav-menu li {
    float: left;
    max-height: 70px;
    list-style: none;
}

.show-video {
    position: absolute;
    right: 30px;
    bottom: 120px;
    color: white;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 150%;
    border-radius: 30px;
    background: #600aa0;
    box-shadow: 4px 4px 7px 1px rgba(0,0,0,0.16);
}

.blink {
    -ms-animation: blink 1.0s linear infinite;
    -o-animation: blink 1.0s linear infinite;
    animation: blink 1.0s linear infinite;
}

@keyframes blink {
    0% { box-shadow: 0 0 15px #600aa0; }
    50% { box-shadow: none; }
    100% { box-shadow: 0 0 15px #600aa0; }
}

@-webkit-keyframes blink {
    0% { box-shadow: 0 0 15px #600aa0; }
    50% { box-shadow: 0 0 0; }
    100% { box-shadow: 0 0 15px #600aa0; }
}

/*  Sidebar left */

#left-sidebar {
    min-width: 200px;
    max-width: 200px;
    transition: all 0.3s;
    background: #ffffff;
    border-right: 1px solid #dcdcdc;
}

#left-sidebar .galene-header {
    color: #fff;
    font-weight: 700;
    display: inline-block;
}

header .collapse {
    float: left;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    color: #dbd9d9;
    margin-right: 20px;
    margin-left: 5px;
}

header .collapse:hover {
    color: #c2a4e0;
}

.galene-header {
    color: #fff;
    font-weight: 700;
    font-size: 1.3rem;
    font-weight: 900;
    color: #dbd9d9;
    line-height: 34px;
}

.header-sep {
    height: 20px;
}

/* Shrinking the sidebar from 200px to 0px */
#left-sidebar.active {
    min-width: 0;
    max-width: 0;
}

#left-sidebar .sidebar-header strong {
    display: none;
}
#left-sidebar.active .sidebar-header h3 {
    display: none;
}
#left-sidebar.active .sidebar-header strong {
    display: block;
}

#users {
    padding: 0;
    margin: 0;
    height: calc(100% - 84px);
    width: 100%;
    position: relative;
    display: block;
    background-color: #fff;
    overflow-y: auto;
    border: 1px solid #f7f7f7;
}

#users .user-p {
    position: relative;
    padding: 10px !important;
    border-bottom: 1px solid #f0f0f0;
    height: 40px;
    line-height: 18px;
    margin: 0 !important;
    cursor: pointer;
    overflow: hidden;
    white-space: pre;
}

#left-sidebar.active #users > div {
    padding: 10px 5px !important;
}

#users > div:hover {
    background-color: #f2f2f2;
}

#users > div::before {
    content: "\f111";
    font-family: 'Font Awesome 6 Free';
    color: #20b91e;
    margin-right: 5px;
    font-weight: 900;
}

#users > div.user-status-raisehand::before {
    content: "\f256";
}

#users > div::after {
    font-family: 'Font Awesome 6 Free';
    color: #808080;
    margin-left: 5px;
    font-weight: 900;
    float: right;
}


.close-icon {
    font: normal 1em/1 Arial, sans-serif;
    display: inline-block;
}

.close-icon:before{ content: "\2715"; }

/* END Sidebar Left */

@media only screen and (min-width: 1025px) {
    .coln-right .collapse-video, .coln-right .show-video {
        display: none;
    }
}

@media only screen and (max-width: 1024px) {
    #presentbutton, #unpresentbutton {
        width: auto;
    }
    .nav-link {
        margin: 0 4px;
        line-height: 1.5;
    }

    .nav-link label {
        display: none;
    }

    .nav-text {
        display: none;
    }

    .nav-more {
        padding-top: 0;
        margin-left: inherit;
    }

    .full-width {
        height: calc(var(--vh, 1vh) * 100 - 56px);
    }

    .close-chat, .show-chat {
        display: none;
    }

    .video-container {
        position: fixed;
        height: calc(var(--vh, 1vh) * 100 - 56px);
        top: 56px;
        right: 0;
        left: 0;
        margin-bottom: 60px;
    }

    .top-video-controls {
        opacity: 1;
    }

    .login-container {
        position: fixed;
        height: calc(var(--vh, 1vh) * 100 - 56px);
        top: 56px;
        right: 0;
        left: 0;
        background: #eff3f9;
    }

    .login-box {
        background: transparent;
        margin: 1em auto;
    }

    .coln-left {
        flex: 100%;
        width: 100vw;
        /* chat is always visible here */
        display: block !important;
    }

    .coln-right {
        flex: none;
        position: relative;
    }

    .full-width {
        width: 100vw;
    }

    #left-sidebar.active {
        min-width: 200px;
        max-width: 200px;
        /* on top of video peers */
        z-index: 1002;
    }

    #left-sidebar {
        min-width: 0;
        max-width: 0;
    }

    /* Reappearing the sidebar on toggle button click */
    #left-sidebar {
        margin-left: 0; 
    }

    #left-sidebar .sidebar-header strong {
        display: none;
    }

    #left-sidebar.active .sidebar-header h3 {
        display: none;
    }

    #left-sidebar.active .sidebar-header strong {
        display: block;
    }

    .sidenav a {padding: 10px 10px;}

    .sidenav-header h2 {
        line-height: 36px;
    }

    #peers {
        padding: 3px;
    }

    #resizer {
        display: none;
    }

    #chat {
        border-right: none;
    }

    .dropdown-content {
        margin-top: 10px;
    }

}

#captions-container {
    position: absolute;
    bottom: 40px;
    width: 100%;
    pointer-events: none;
    z-index: 1390;
    alpha: 0;
}

#captions {
    margin: auto;
    padding: 0 0.4rem 0 0.4rem;
    width: max-content;
    font-size: 1.2rem;
    text-align: center;
    pointer-events: none;
    background-color: rgba(255,255,255,.7);
    color: #000;
}

:root{
    --contextualMenuBg: #eee;
    --contextualMenuShadow: 1px 1px 1px #444; */
    --contextualMenuRadius: 0px; */
    --contextualMenuText: black;

    --contextualSubMenuBg: #eee;

    --contextualHover: #ddd;

    --contextualOverflowIcon: #999;
    --contextualSeperator: #999;
}

.contextualMenu{
    z-index: 2999;
}

.file-progress {
    accent-color: #610a86;
    margin-left: 10px;
    margin-right: 10px;
}

#invite-dialog {
    background-color: #eee;
}

#invite-dialog {
    border: solid 2px #610a86;
}

#invite-dialog button {
    background-color: #3355ff;
    color: white;
    border-radius: .5em;
    padding: .5em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 2em;
    display: inline-block;
    width: 7em;
}

#invite-dialog button:hover {
   background-color: #0022ff;
}

#invite-dialog input {
    margin-top: 1em;
    width: 16em;
    padding: .2em
}

#invite-dialog label {
    margin-top: 1em;
    display: inline-block;
    width:12em;
}

/* Style for the toastify  messages shall be within a css file */
.toastify.error {
    background: linear-gradient(to right, #e20a0a, #df2d2d);
    color: #fff;
}
.toastify.error .toast-close {
    color: #fff;
}
.toastify.warning {
    background: linear-gradient(to right, #bdc511, #c2cf01);
    color: #000;
}
.toastify.warning .toast-close {
    color: #000;
}
.toastify.info {
    background: linear-gradient(to right, #529518, #96c93d);
    color: #000;
}
.toastify.info .toast-close {
    color: #000;
}

/* [QQ式麦克风开关] 常驻醒目按钮：关=灰色，开=红色 */
.btn-mic {
    display: inline-block;
    padding: 6px 14px;
    margin: 2px 6px;
    border-radius: 20px;
    border: 2px solid #888;
    background: #444;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-mic.mic-on {
    border-color: #e24b4a;
    background: #e24b4a;
    color: #fff;
}
.btn-mic.mic-on i {
    animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
/* ============ QQ语音式手机端改造（2026-08-19 东哥要求） ============ */

/* ---- 用户列表：大头像网格 ---- */
#users {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 8px 4px;
}
#users .user-p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 25%;
    box-sizing: border-box;
    height: auto !important;
    padding: 8px 2px !important;
    border-bottom: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: center;
}
.qq-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.6);
}
.qq-uname {
    margin-top: 5px;
    font-size: 12px;
    color: #333;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- 正在发言：绿色波纹（麦克风状态） ---- */
#users .user-p.user-status-microphone .qq-avatar {
    border-color: #21d07a;
    box-shadow: 0 0 0 3px rgba(33,208,122,0.35), 0 2px 6px rgba(0,0,0,0.3);
    animation: qqTalking 1.2s ease-in-out infinite;
}
@keyframes qqTalking {
    0%, 100% { box-shadow: 0 0 0 3px rgba(33,208,122,0.35), 0 2px 6px rgba(0,0,0,0.3); }
    50% { box-shadow: 0 0 0 6px rgba(33,208,122,0.55), 0 2px 6px rgba(0,0,0,0.3); }
}
#users .user-p.user-status-camera .qq-avatar {
    border-color: #3a86ff;
}

/* ---- 用户列表区域：左侧边栏宽度（桌面保留） ---- */
@media only screen and (max-width: 1024px) {
    /* 手机端：用户头像更小些适配小屏 */
    .qq-avatar {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }
    #users .user-p {
        width: 25%;
    }
}

/* ---- 桌面端：左侧列表用紧凑头像行 ---- */
@media only screen and (min-width: 1025px) {
    #users {
        display: block;
    }
    #users .user-p {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 44px !important;
        padding: 4px 10px !important;
        text-align: left;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    .qq-avatar {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }
    .qq-uname {
        margin-top: 0;
        margin-left: 8px;
        font-size: 14px;
    }
}
/* ============ QQ语音式手机端增强（2026-08-19） ============ */
@media only screen and (max-width: 1024px) {
    /* 手机端：左侧栏悬浮在上方（不占文档流，避免把 header 挤到屏幕外） */
    #left-sidebar {
        position: fixed !important;
        top: 78px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 38vh !important;
        overflow-y: auto !important;
        border-right: none !important;
        border-bottom: 1px solid #dcdcdc;
        box-sizing: border-box;
        z-index: 1000;
    }
    #left-sidebar.active {
        min-width: 100% !important;
        max-width: 100% !important;
    }
    /* 顶部导航固定在左侧栏上方（实际在 header 内） */
    /* 手机端整体：左侧栏在上方显示头像，下方聊天 */
    .coln-left {
        flex: 100%;
        width: 100vw;
        display: block !important;
        height: auto !important;
    }
    /* 聊天框高度适配 */
    #chat, #chatbox {
        height: calc(var(--vh, 1vh) * 100 - 38vh - 78px) !important;
    }
    /* 隐藏桌面端的 resize/视频按钮 */
    #resizer, #show-video, #collapse-video, #expand-video {
        display: none !important;
    }
    /* 手机端用户头像 3 列 */
    #users .user-p {
        width: 25%;
    }
}
/* ============ QQ语音式底部控制栏（2026-08-19 东哥要求） ============ */
#qq-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62px;
    background: #f5f6f8;
    border-top: 1px solid #dcdcdc;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1100;
    padding: 4px 0;
}
.qq-bb-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 22%;
    height: 56px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.qq-bb-btn i {
    font-size: 22px;
    color: #333;
}
.qq-bb-btn span {
    font-size: 11px;
    color: #555;
    margin-top: 2px;
}
.qq-bb-btn.qq-bb-hangup i {
    font-size: 20px;
    color: #fff;
    background: #f44336;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qq-bb-btn.qq-bb-hangup span {
    color: #f44336;
}
/* 麦克风开=红，关=灰 */
/* [QQ式] 底部麦克风：开=绿 关=红 */
#qq-bb-mic.mic-on i {
    color: #21d07a;
}
#qq-bb-mic.mic-on span {
    color: #21d07a;
}
#qq-bb-mic.mic-off i {
    color: #f44336;
}
#qq-bb-mic.mic-off span {
    color: #f44336;
}
/* 扬声器关=斜杠 */
#qq-bb-speaker.speaker-off i {
    color: #999;
}
/* 手机端：底部栏占位，聊天区上移 */
@media only screen and (max-width: 1024px) {
    #qq-bottombar {
        height: 64px;
    }
    #chat, #chatbox {
        height: calc(var(--vh, 1vh) * 100 - 38vh - 56px - 64px) !important;
    }
    #mainrow {
        margin-bottom: 64px;
    }
}
/* ============ QQ语音式成员两排+更多（2026-08-19 东哥要求） ============ */
@media only screen and (max-width: 1024px) {
    /* 手机端：成员只显示两排（每排3个），溢出隐藏 */
    #left-sidebar {
        max-height: 44vh !important;
    }
    #users {
        max-height: 36vh;
        overflow: hidden;
    }
    /* 更多按钮 */
    #users .user-p.qq-more-item {
        justify-content: center;
    }
    #users .qq-more-box {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #e8e8e8;
        border: 2px dashed #aaa;
        color: #777;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
    }
    #users .qq-more-box span {
        font-size: 11px;
        color: #888;
    }
}
/* [2026-08-30 东哥定案] 桌面宽屏「更多成员」入口按钮 */
@media only screen and (min-width: 1025px) {
    #users .user-p.qq-more-desktop {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: auto !important;
        padding: 8px 10px !important;
        margin-top: 6px;
        border-top: 1px dashed #d5c7c7 !important;
        border-bottom: none !important;
    }
    #users .user-p.qq-more-desktop .qq-more-box {
        width: auto;
        height: auto;
        border-radius: 8px;
        background: #3d1010;
        border: 1px solid #7a1f1f;
        color: #ffd700;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        padding: 6px 16px;
    }
    #users .user-p.qq-more-desktop .qq-more-box span {
        font-size: 13px;
        color: #ffd700;
        font-weight: 500;
    }
}
/* 成员弹层 */
#qq-members-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1300;
    justify-content: center;
    align-items: flex-end;
}
#qq-members-overlay.show { display: flex; }
/* [2026-08-30 东哥定案] 底部弹出浮层：红色革命主题，上滑动画 */
#qq-members-panel {
    background: linear-gradient(180deg,#3d1010,#2a0d0d);
    border: 1px solid #7a1f1f;
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-height: 72vh;
    overflow-y: auto;
    padding: 16px 16px 22px;
    box-sizing: border-box;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.5);
    animation: qmpSlideUp 0.28s ease-out;
}
@keyframes qmpSlideUp {
    from { transform: translateY(30px); opacity: 0.5; }
    to { transform: translateY(0); opacity: 1; }
}
#qq-members-panel .qmp-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    color: #ffd700;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,215,0,0.28);
    margin-bottom: 12px;
}
#qq-members-panel .qmp-head-tip {
    font-size: 12px;
    color: #c9a9a9;
    font-weight: 400;
}
#qq-members-panel .qmp-grid {
    display: flex;
    flex-wrap: wrap;
}
#qq-members-panel .qmp-user {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 2px;
    box-sizing: border-box;
    cursor: pointer;
}
#qq-members-panel .qmp-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2.5px solid #3d1010;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
#qq-members-panel .qmp-avatar-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
#qq-members-panel .qmp-name {
    font-size: 11px;
    color: #f5e9e9;
    margin-top: 4px;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}
#qq-members-panel .qmp-badge {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 6px;
    line-height: 1.2;
    flex-shrink: 0;
}
#qq-members-panel .qmp-badge-owner { background: #ffd700; color: #2a0d0d; }
#qq-members-panel .qmp-badge-op { background: rgba(255,215,0,0.2); color: #ffd700; border: 1px solid rgba(255,215,0,0.5); }

/* [2026-08-30 东哥定案] 面板内正在发言：金色边框脉冲闪烁 */
#qq-members-panel .qmp-user.talking .qmp-avatar {
    border-color: #ffd700 !important;
    box-shadow: 0 0 0 3px rgba(255,215,0,0.5), 0 0 18px rgba(255,215,0,0.7);
    animation: qqTalkFlash 0.8s ease-in-out infinite;
}
#qq-members-panel .qmp-user.talking .qmp-name { color: #ffd700; font-weight: 500; }
#qq-members-panel .qmp-close {
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid #eee;
    margin-top: 6px;
    color: #999;
    font-size: 13px;
    cursor: pointer;
}
/* ============ QQ语音式说话闪烁+置顶（2026-08-19 东哥要求） ============ */
/* 正在说话：头像金色边框+脉冲闪烁（所有人可见） */
#users .user-p.talking .qq-avatar {
    border-color: #ffd700;
    box-shadow: 0 0 0 3px rgba(255,215,0,0.5), 0 0 18px rgba(255,215,0,0.7);
    animation: qqTalkFlash 0.8s ease-in-out infinite;
}
@keyframes qqTalkFlash {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255,215,0,0.5), 0 0 12px rgba(255,215,0,0.6); }
    50% { box-shadow: 0 0 0 5px rgba(255,215,0,0.85), 0 0 26px rgba(255,215,0,0.9); }
}
/* 说话者名字也高亮 */
#users .user-p.talking .qq-uname {
    color: #d4a800;
    font-weight: bold;
}
/* 置顶时的背景提示 */
#users .user-p.talking {
    background: rgba(255,215,0,0.08);
    border-radius: 10px;
}
/* 更多弹层里的说话者也闪烁（规则已在上方 #qq-members-panel .qmp-user.talking 定义，此处不再重复） */
/* ============ QQ语音式立场选择（2026-08-19 东哥要求） ============ */
#stanceform {
    margin-bottom: 12px;
}
.stance-label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
    font-weight: bold;
}
.stance-options {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.stance-opt {
    display: flex;
    align-items: center;
    cursor: pointer;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 18px;
    padding: 6px 12px;
    font-size: 13px;
    transition: all 0.15s;
}
.stance-opt input {
    margin-right: 5px;
    accent-color: #e24b4a;
}
.stance-opt:has(input:checked) {
    border-color: #e24b4a;
    background: #fdeeee;
    color: #e24b4a;
    font-weight: bold;
}
/* 密码框提示 */
#passwordform .form-control {
    border-color: #e24b4a;
}
/* [纯语音室] 永久隐藏视频容器（深灰层根除）——QQ语音式界面不需要视频区 */
.video-container,
#video-container,
#show-video,
#collapse-video,
#expand-video,
#resizer,
#captions-container {
    display: none !important;
}
/* [排麦] 底部按钮均分5个 */
#qq-bottombar .qq-bb-btn {
    width: 20%;
}
/* [立场徽标] 头像右上角小字 */
.qq-avatar {
    position: relative;
}
.qq-stance {
    position: absolute;
    bottom: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffd700;
    color: #7a0c0c;
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    padding: 0 3px;
    box-sizing: border-box;
    border: 1px solid #fff;
}

/* [自定义头像] 登录页预览 */
.qq-login-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: #999; color: #fff; font-size: 30px; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px; cursor: pointer; border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    background-size: cover; background-position: center;
}
#avatarform { text-align: center; }
/* 头像图片填满圆 */
.qq-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* [排麦] 底部按钮均分5个 */
#qq-bottombar .qq-bb-btn {
    width: 20%;
}
/* ============ [麦序系统 YY式] 麦序面板 ============ */
#queue-panel {
    border: 0.5px solid var(--color-border-tertiary, #ddd);
    border-radius: 8px;
    margin: 8px;
    padding: 8px 10px;
    background: var(--color-background-secondary, #f7f7f7);
    font-size: 13px;
}
#qp-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
#qp-mode {
    font-weight: bold;
    color: #333;
}
#qp-admin-ops {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
#qp-admin-ops select, #qp-admin-ops input {
    font-size: 12px;
    padding: 2px 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.qp-btn {
    font-size: 12px;
    padding: 3px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}
.qp-btn:hover { background: #eee; }
#qp-current {
    margin: 8px 0 4px;
    padding: 6px 8px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#qp-current-user.qp-on-mic { color: #21d07a; font-weight: bold; }
#qp-current-time { color: #f44336; font-weight: bold; }
#qp-queue-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
    min-height: 22px;
}
.qp-qitem {
    background: #e8f0fe;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}
.qp-empty { color: #999; font-size: 12px; }
#qp-actions {
    display: flex;
    gap: 8px;
}
.qp-main {
    font-size: 13px;
    padding: 5px 18px;
    background: #21d07a;
    color: #fff;
    border: none;
    border-radius: 6px;
}
#qp-leave {
    background: #f44336;
}
.qp-main:disabled {
    background: #aaa;
}
/* ============ [YY式二期] 公告/私聊/马甲/录音/音量 ============ */
#zq-announce {
    margin: 8px 10px 0;
    padding: 8px 10px;
    background: #fff8e1;
    border: 1px solid #f0d48a;
    border-radius: 8px;
    font-size: 13px;
    color: #7a5c00;
    line-height: 1.5;
}
.zq-announce-icon {
    display: inline-block;
    background: #ffd700;
    color: #7a0c0c;
    border-radius: 4px;
    padding: 0 5px;
    font-weight: bold;
    margin-right: 4px;
    font-size: 12px;
}
/* 私聊窗口 */
#zq-private {
    position: fixed;
    right: 12px;
    bottom: 120px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 320px;
}
.zq-pbox {
    width: 260px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    overflow: hidden;
}
.zq-phead {
    background: #4d7c0f;
    color: #fff;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.zq-pclose { cursor: pointer; }
.zq-pbody {
    height: 160px;
    overflow-y: auto;
    padding: 6px 8px;
    font-size: 12px;
    background: #f9f9f9;
}
.zq-pinput {
    display: flex;
    border-top: 1px solid #eee;
}
.zq-pinput input {
    flex: 1;
    border: none;
    padding: 6px 8px;
    font-size: 12px;
}
.zq-pinput button {
    border: none;
    background: #4d7c0f;
    color: #fff;
    padding: 6px 12px;
    cursor: pointer;
}
.zq-pme { color: #0c447c; margin: 2px 0; }
/* 权限马甲 */
.qq-badge {
    display: inline-block;
    font-size: 10px;
    padding: 0 4px;
    border-radius: 3px;
    margin-left: 3px;
    background: #eee;
    color: #666;
    vertical-align: middle;
}
.qq-badge-op {
    background: #e24b4a;
    color: #fff;
}
/* [革命化] 房主=亮红底+红星，管理员=深红底（革命骨干），普通=灰底 */
.qq-badge-owner {
    background: #e24b4a;
    color: #fff;
    font-weight: bold;
}
.qq-badge-op {
    background: #a32d2d;
}
/* 录音 */
.zq-rec-on {
    background: rgba(244, 67, 54, 0.2) !important;
    border-radius: 8px;
}
.zq-rec-on i {
    animation: zq-blink 1s infinite;
}
@keyframes zq-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}
/* 音量 */
#zq-vol-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    font-size: 12px;
    color: #888;
}
.zq-vol-label { min-width: 30px; }
#zq-volume { flex: 1; max-width: 200px; }
/* 系统消息样式 */
.message-row .message .message-sender { }
.zq-sys {
    color: #888;
    font-size: 12px;
    background: #f5f5f5;
    border-radius: 4px;
    padding: 2px 6px;
    display: inline-block;
}

/* ============ [YY式] 电脑端顶部标题通栏（2026-08-19 东哥要求，标题不能被挤出去） ============ */
/* [标题固定] 顶部标题栏固定，永远可见（不受布局偏移影响） */
header > .topnav {
    position: fixed !important;
    top: 0 !important;
    left: 200px !important;
    right: 0 !important;
    z-index: 2000 !important;
    /* [深红顶栏 2026-08-20 东哥要求] 白底配白字看不清，改革命红渐变+金边，文字白/金醒目 */
    background: linear-gradient(90deg, #7a0e0e 0%, #a32d2d 50%, #8b0000 100%) !important;
    border-bottom: 2px solid #d4af37 !important;
}
@media (max-width: 1024px) {
    header > .topnav {
        left: 0 !important;
    }
}
#title {
    text-align: center;
    color: #ffffff !important;
}
/* 首页标题(站名)在深红顶栏上白色醒目 */
.topnav .navbar-brand, body.zq-home #title { color: #ffffff !important; }

/* [去重] 顶部麦克风按钮隐藏（底部栏已有，避免右上/左下两个麦克风） */
.nav-menu li:first-child {
    display: none !important;
}

/* [中革中央logo] 左侧栏顶部 logo 图片 */
/* [中革中央logo] 大图撑满无白边（原 contain 显示小图+两边白） */
.zq-logo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
}
/* [文字标语logo] 2026-08-20 东哥要求：logo 换成"高举周群思想"标语（红底金字） */
.zq-logo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 4px 6px;
    box-sizing: border-box;
    line-height: 1.2;
}
.zq-lt-main {
    display: block;
    font-size: 21px;
    font-weight: 900;
    color: #ffd700;
    letter-spacing: 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.zq-lt-sub {
    display: block;
    font-size: 10.5px;
    color: #ffedc9;
    margin-top: 3px;
    letter-spacing: .5px;
}
.zq-lt-sub2 {
    display: block;
    font-size: 10.5px;
    color: #ffedc9;
    margin-top: 1px;
    letter-spacing: .5px;
}
/* 窄屏缩小字号防止换行 */
@media (max-width: 1024px) {
    body.zq-room .zq-lt-main { font-size: 18px; letter-spacing: 2px; }
    body.zq-room .zq-lt-sub, body.zq-room .zq-lt-sub2 { font-size: 9.5px; }
}
/* ============ [首页快捷进入] 群主/管理员头像网格 ============ */
#zq-admin-login {
    margin-bottom: 10px;
    text-align: center;
}
.zq-al-title {
    font-size: 14px;
    font-weight: bold;
    color: #a32d2d;
    margin-bottom: 8px;
}
#zq-al-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.zq-al-item {
    width: 56px;
    text-align: center;
    cursor: pointer;
    padding: 3px 2px;
    border-radius: 8px;
    transition: background 0.2s;
    position: relative;
}
.zq-al-item:hover {
    background: #f0e6e6;
}
/* [圆形头像] 群主/管理员头像=圆形红底（东哥：五角星不好看，用圆的） */
.zq-al-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin: 0 auto 2px;
    background: #a32d2d;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid #e24b4a;
}
.zq-al-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.zq-al-name {
    font-size: 11px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* [革命色] 管理=深红，群主=亮红（革命队伍不用蓝标） */
.zq-al-tag {
    position: absolute;
    top: 0;
    right: 2px;
    font-size: 9px;
    background: #a32d2d;
    color: #fff;
    border-radius: 3px;
    padding: 0 3px;
}
.zq-al-tag.zq-al-owner {
    background: #e24b4a;
    font-weight: bold;
}
.zq-al-sep {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin: 8px 0;
    border-top: 1px dashed #ccc;
    padding-top: 8px;
}

/* ============ [首页布局] 隐藏左侧栏+麦序面板，登录区撑满全宽 ============ */
/* [隐藏] 首页不显示左侧栏（带 logo）和麦序面板（带抢麦按钮） */
body.zq-home #left-sidebar { display: none !important; }
body.zq-home .coln-left { display: none !important; }
/* [撑满] 登录区占满 100% 宽度 */
body.zq-home .coln-right { flex: 100% !important; max-width: 100% !important; width: 100% !important; }
body.zq-home .row.full-width { width: 100vw !important; max-width: 100vw !important; }
body.zq-home .container { width: 100% !important; }
/* [顶栏] 首页顶栏全宽（不需要给左侧栏留 200px） */
body.zq-home header > .topnav { left: 0 !important; }
/* [首页登录区] 电脑版登录容器也从顶栏下方开始（防标题被 fixed 顶栏盖住） */
body.zq-home .login-container {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
}
/* [底部栏] 首页不显示 QQ 底部栏（按钮在房间内才有用） */
body.zq-home #qq-bottombar { display: none !important; }
/* [主内容] 首页主内容区全宽无边距 */
body.zq-home #mainrow { width: 100vw !important; }

/* [首页手机端] 顶栏 flex-wrap 修复（防止 nav-menu 被挤到下一行）+ 标题缩字号 */
@media (max-width: 1024px) {
    body.zq-home header > .topnav { flex-wrap: nowrap !important; }
    body.zq-home #header { display: flex !important; align-items: center !important; flex: 1 1 auto !important; min-width: 0 !important; }
    body.zq-home #title { font-size: 14px !important; max-width: calc(100vw - 110px) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; flex: 0 1 auto !important; }
    body.zq-home .nav-menu { flex: 0 0 auto !important; }
}

/* ============ [手机版空间优化] 顶栏原生按钮全隐藏，只留汉堡+标题（2026-08-20 东哥要求） ============ */
/* 根因：Galène 原生顶栏的 静音(图标像麦克风)/三点菜单 在手机上挤占空间、和底部栏完全重复 */
/* 首页（登录页）不需要静音/菜单；房间内静音=底部栏扬声器、菜单=底部栏设置 */
@media (max-width: 1024px) {
    body.zq-home .nav-menu,
    body.zq-room .nav-menu { display: none !important; }
    /* 标题放宽（nav-menu 让出的空间），单行完整显示 */
    body.zq-room #title { max-width: none !important; font-size: 15px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    body.zq-home #title { max-width: calc(100vw - 60px) !important; }
}

/* ============ [手机版空间优化2] 聊天框占半个屏幕（2026-08-20 东哥：YY 的文字对话框占到半个屏幕！） ============ */
/* 压缩标语 logo + 麦序面板默认折叠成一行，把空间全让给聊天区 */
@media (max-width: 1024px) {
    /* 标语 logo：92px 压成 50px（小字三行） */
    body.zq-room #left-sidebar .users-header { height: 50px !important; }
    body.zq-room .zq-lt-main { font-size: 13px !important; letter-spacing: 1px !important; }
    body.zq-room .zq-lt-sub, body.zq-room .zq-lt-sub2 { font-size: 8px !important; margin-top: 0 !important; }
    /* 麦序面板折叠态（由 JS zqMobileQpFold 控制）：只显示当前麦一行 */
    body.zq-room #queue-panel { min-height: 0 !important; }
    /* 展开态（data-open=1 时显示全部） */
    body.zq-room #queue-panel.zq-qp-expanded #qp-head,
    body.zq-room #queue-panel.zq-qp-expanded #qp-queue-list,
    body.zq-room #queue-panel.zq-qp-expanded #qp-actions { display: block !important; }
    /* 当前麦一行做折叠开关样式（2026-08-20 东哥：压到最小一行） */
    body.zq-room #qp-current { cursor: pointer; user-select: none; padding: 1px 8px; background: rgba(163,45,45,0.06); border-radius: 3px; margin: 1px 6px; font-size: 11px; line-height: 1.5; }
}

/* ============ [手机版空间优化3] 标题+标语合并到顶栏，左侧栏标语/汉堡删除（2026-08-20 东哥：合并到一个节约空间） ============ */
/* 桌面版：标题只显示站名（zt-station），标语默认隐藏 */
.zt-main, .zt-sub { display: none; }
@media (max-width: 1024px) {
    /* 手机房间顶栏三行：行1站名(最顶) / 行2主标语(金) / 行3两句小字（东哥 2026-08-20：站名必须保留在最顶上） */
    body.zq-room #header { flex: 1 1 auto !important; min-width: 0 !important; }
    body.zq-room #title { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important; width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; margin: 0 !important; padding: 0 8px !important; }
    body.zq-room .zt-station { display: block !important; font-size: 12px !important; color: #ffffff !important; font-weight: bold !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; text-shadow: 0 1px 2px rgba(0,0,0,.4) !important; }
    body.zq-room .zt-main { display: block !important; font-size: 15px !important; color: #ffd700 !important; font-weight: bold !important; letter-spacing: 1px !important; white-space: nowrap !important; text-shadow: 0 1px 2px rgba(0,0,0,.5) !important; }
    body.zq-room .zt-sub { display: block !important; font-size: 9px !important; color: #ffe9b0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; text-shadow: 0 1px 1px rgba(0,0,0,.4) !important; }
    /* 汉堡（3条杠）手机版隐藏：左侧栏成员固定显示，无需收放 */
    body.zq-room #sidebarCollapse, body.zq-home #sidebarCollapse { display: none !important; }
    /* 标题位置左移（汉堡让出的空间） */
    body.zq-room #title, body.zq-home #title { margin-left: 4px !important; }
    /* 左侧栏标语区删除（已并入顶栏），左侧栏直接显示成员 */
    body.zq-room #left-sidebar .users-header { display: none !important; }
    body.zq-room #left-sidebar .header-sep { display: none !important; }
}

/* ============ [房间布局修复] 聊天输入框被挤出屏幕（2026-08-20 全面体检发现） ============ */
/* 根因：#chat height:100% 撑满 coln-left，但上方还有麦序面板 200px，聊天区+输入框被挤到屏幕外 */
/* 修复：coln-left 改纵向弹性布局，麦序面板固定，聊天区占剩余空间 */
.coln-left {
    display: flex;
    flex-direction: column;
}
.coln-left #queue-panel { flex: 0 0 auto; }
.coln-left #zq-announce { flex: 0 0 auto; }
.coln-left #chat {
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
.coln-left #chatbox { height: 100%; }

/* ============ [YY语音室复刻] 聊天输入框：字多了自动增高 + 滚动条（2026-08-20 东哥要求） ============ */
/* 根因：textarea 固定 34px + overflow:hidden，打第二行字就被裁掉看不见 */
/* 修复：chatbox 改弹性列布局，box 占剩余、reply 自适应；textarea 自动增高，超4行出滚动条 */
#chatbox {
    display: flex;
    flex-direction: column;
}
#chatbox #box {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}
#chatbox .reply {
    flex: 0 0 auto;
    height: auto !important;
    min-height: 53px;
    box-sizing: border-box;
}
#chatbox .reply textarea {
    display: block;
    width: 100%;
    resize: none;
    overflow-y: auto !important;   /* 内容超出时出滚动条 */
    padding: 6px 8px;
    outline: none;
    border: none;
    box-shadow: none;
    background: #fff;
    border-radius: 6px;
    height: 34px;
    min-height: 34px;
    max-height: 160px;             /* 约6-7行，滚动条加长（东哥 2026-08-20 要求） */
    line-height: 1.5;
    box-sizing: border-box;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
}
#input {
    width: 100%;
    border: none;
    resize: none;
    overflow-y: auto !important;
}

/* [左侧栏修复] 成员列表溢出 28px：改纵向弹性，#users 恰好占剩余空间 */
#left-sidebar {
    display: flex;
    flex-direction: column;
}
#left-sidebar #users {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
}

/* [房间修复2] 麦序面板头部被 fixed 顶栏(56px)盖住无法点击（2026-08-20 全面体检发现） */
/* 根因：顶栏改 fixed 后 mainrow 仍在 y=0 开始，麦序面板的模式选择/控麦按钮全在顶栏下面 */
#mainrow {
    padding-top: 56px !important;
    box-sizing: border-box !important;
}

/* [手机版房间修复] 左侧栏悬浮盖住麦序面板：padding-top 由 JS 按左侧栏实际高度动态调整 */
@media (max-width: 1024px) {
    /* 2026-08-20 东哥要求：标语 logo 手机版必须显示（重要内容不能藏） */
    body.zq-room #left-sidebar .users-header { display: flex; }
    body.zq-room #left-sidebar { top: 78px !important; }
    /* mainrow 的 padding-top 由 JS(zqFixMobileMainrow) 动态设置（桌面 fallback 见下方 2538 行） */
}


/* ============ [2026-08-20 东哥集中修改] 绿点小+右下角 / 顶栏三行不溢出 / 首页标题居中 / 发送按钮上箭头 ============ */
/* 1. 正在发言：去掉绿色大边框+光晕动画，改头像右下角小绿点 */
#users .user-p { position: relative !important; }
/* [2026-08-20 东哥] 谁发言谁的头像一圈绿光光晕闪烁（恢复原样式，去掉小绿点） */
#users .user-p.user-status-microphone .qq-avatar {
    border-color: #21d07a !important;
    box-shadow: 0 0 0 3px rgba(33,208,122,0.35), 0 2px 6px rgba(0,0,0,0.3) !important;
    animation: qqTalking 1.2s ease-in-out infinite !important;
}
/* 3. 首页标题居中 */
body.zq-home #title { text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; flex: 1 1 auto !important; }
/* 4. 发送按钮：红底白字向上箭头，好看 */
#inputbutton {
    background: #c41e1e !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    padding: 4px 12px !important;
    line-height: 1.4 !important;
}
#inputbutton:hover { background: #a32d2d !important; }

/* ============ [2026-08-20 东哥第5次要求] 彻底删除头像上的绿点 ============ */
/* 根因：Galène 原版 #users > div::before 用 content:"\f111"(FontAwesome 圆) + 绿色#20b91e
   在每个用户前画一个绿圆。前几次修复只删了 ::after 麦克风图标，没动到这个 ::before 绿圆
   现在用 !important 全杀：所有用户前的 ::before 和 ::after 全置空，display:none */
#users > div::before,
#users > div::after,
#users > div.user-status-raisehand::before,
#users > div.user-status-raisehand::after,
#users > div.user-status-microphone::before,
#users > div.user-status-microphone::after,
#users > div.user-status-camera::before,
#users > div.user-status-camera::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* ============ [2026-08-20 东哥] 标题和标语加宽+字加大（绿点删了空间多出来了） ============ */
/* 原来字号 12/16/9 太窄小，加大到 14/20/11，让站名更醒目 */
body.zq-room .zt-station { font-size: 14px !important; }
body.zq-room .zt-main { font-size: 20px !important; letter-spacing: 2px !important; }
body.zq-room .zt-sub { font-size: 11px !important; letter-spacing: 1px !important; }
/* 顶栏最小高度调高，容纳更大字号（height:auto 覆盖原版 .topnav height:3.5rem，否则三行标题被压） */
header > .topnav { height: auto !important; min-height: 4.8rem !important; padding-top: 4px !important; padding-bottom: 4px !important; }
body.zq-room #title { height: auto !important; min-height: 70px !important; line-height: 1.2 !important; padding: 4px 10px !important; }
/* 顶栏行高优化，三行紧凑居中 */
body.zq-room .zt-station, body.zq-room .zt-main, body.zq-room .zt-sub { line-height: 1.25 !important; margin: 1px 0 !important; }
/* 标题区在顶栏里撑满更多空间 */
body.zq-room #title { max-width: 100% !important; width: 100% !important; }
/* [2026-08-20] 顶栏高度变化后同步 mainrow 顶部内边距（避免被顶栏盖住） */
body.zq-room #mainrow { padding-top: 77px !important; }

/* [2026-08-20 东哥] 手机版麦序折叠行：🎤上麦 + 下麦 两按钮并排，点一下直接执行 */
body.zq-room #qp-current.qp-fold-mic-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: default !important;
    user-select: none !important;
    background: transparent !important;
    border-radius: 16px !important;
    margin: 2px 10px !important;
    padding: 2px 4px !important;
    width: fit-content !important;
    max-width: calc(100% - 20px) !important;
    flex-wrap: nowrap !important;
}
body.zq-room #qp-current.qp-fold-mic-btn .qp-fold-join:active { transform: scale(0.97) !important; }
body.zq-room #qp-current.qp-fold-mic-btn .qp-fold-leave:active { transform: scale(0.97) !important; }

/* ============ [2026-08-21 东哥定案] 电脑版大会堂布局大改（仅桌面 ≥1025px 生效，手机版完全不受影响） ============ */
@media only screen and (min-width: 1025px) {
    /* ① 删除三条杠（汉堡）/静音按钮/三点菜单：桌面版全部隐藏 */
    body.zq-room #sidebarCollapse, body.zq-home #sidebarCollapse { display: none !important; }
    body.zq-room #mutebutton, body.zq-home #mutebutton,
    body.zq-room #openside,   body.zq-home #openside   { display: none !important; }
    body.zq-room .nav-menu, body.zq-home .nav-menu { display: none !important; }

    /* ② 顶栏右移（左侧栏加宽后 200→400）+ 顶栏高度统一 96px + 纯色（与左侧块同一 #a32d2d，彻底统一颜色） */
    header > .topnav {
        left: 400px !important; height: 96px !important; min-height: 96px !important;
        background: #a32d2d !important;
        box-sizing: border-box !important;
    }
    /* ③ 左侧标语板块：与顶栏同一纯色 #a32d2d + 金底边；两边都 border-box 高 96px → 底部严格齐平；禁止 flex 压缩 */
    body.zq-room #left-sidebar .users-header {
        height: 96px !important;
        min-height: 96px !important;
        flex-shrink: 0 !important;
        background: #a32d2d !important;
        border-bottom: 2px solid #d4af37 !important;
        box-sizing: border-box !important;
    }
    /* ④ 大会堂大字「中国无产阶级革命中央委员会大会堂」：放大3倍(14px→42px) + 水平垂直居中 */
    body.zq-room .zt-station { font-size: 42px !important; letter-spacing: 2px !important; }
    body.zq-room #title {
        display: flex !important; flex-direction: column !important;
        align-items: center !important; justify-content: center !important;
        text-align: center !important; width: 100% !important; max-width: 100% !important;
        margin: 0 !important; padding: 0 !important;
    }
    /* ⑤ 左侧参会者栏：加宽一倍 200px→400px；成员 3 列 × 至少 8 排（首屏24人），几百人自动往下排、栏内滚动 */
    #left-sidebar { min-width: 400px !important; max-width: 400px !important; border-right: none !important; }
    body.zq-room .row.full-width { width: calc(100vw - 400px) !important; height: calc(100vh - 104px) !important; }
    body.zq-room #mainrow { padding-top: 104px !important; }
    body.zq-room #users {
        display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
        gap: 3px !important; align-content: start !important; padding: 6px 4px !important;
        overflow-y: auto !important;
    }
    body.zq-room #users .user-p {
        display: flex !important; flex-direction: column !important;
        align-items: center !important; justify-content: center !important;
        width: auto !important; height: auto !important; min-height: 56px !important;
        padding: 4px 1px !important; text-align: center !important;
        border-bottom: none !important;
    }
    body.zq-room #users .user-p .qq-avatar { width: 40px !important; height: 40px !important; font-size: 16px !important; }
    body.zq-room #users .user-p .qq-uname { margin-left: 0 !important; margin-top: 3px !important; font-size: 11px !important; max-width: 92% !important; }
    /* ⑥ 聊天/麦序区（coln-left）加宽两倍：30% → 60%，再 +3px；视频区 70% → 40% 减 3px */
    body.zq-room .coln-left  { flex: calc(60% + 3px) !important; max-width: calc(60% + 3px) !important; }
    body.zq-room .coln-right { flex: calc(40% - 3px) !important; max-width: calc(40% - 3px) !important; }
}

/* ============ [右区会议信息面板 2026-08-22 东哥定案方案A] 当前发言人 + 发言队列 + 大会堂公告（仅电脑版，手机版隐藏） ============ */
#zq-right-panel { display: none; }
@media only screen and (min-width: 1025px) {
    body.zq-room #zq-right-panel {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 14px 16px 62px 16px;
        box-sizing: border-box;
        height: 100%;
        overflow-y: auto;
    }
    /* 当前发言人卡片 */
    body.zq-room #zq-right-panel .zq-rp-speaker {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fff;
        border: 1px solid #f5c4b3;
        border-radius: 10px;
        padding: 12px 14px;
    }
    body.zq-room #zq-right-panel .zq-rp-av {
        width: 64px; height: 64px;
        border-radius: 50%;
        background: #a32d2d;
        color: #fff;
        font-size: 26px; font-weight: bold;
        display: flex; align-items: center; justify-content: center;
        border: 3px solid #e24b4a;
        flex-shrink: 0;
    }
    body.zq-room #zq-right-panel .zq-rp-info { flex: 1; min-width: 0; }
    body.zq-room #zq-right-panel .zq-rp-name { font-size: 17px; font-weight: 500; color: #2c2c2a; }
    body.zq-room #zq-right-panel .zq-rp-tag {
        font-size: 11px; border-radius: 4px; padding: 1px 6px; margin-left: 4px;
        color: #fff; vertical-align: 1px;
    }
    body.zq-room #zq-right-panel .zq-rp-tag-owner { background: #e24b4a; }
    body.zq-room #zq-right-panel .zq-rp-tag-op { background: #ba7517; }
    body.zq-room #zq-right-panel .zq-rp-tag-guest { background: #888780; }
    body.zq-room #zq-right-panel .zq-rp-st { font-size: 13px; color: #a32d2d; font-weight: 500; margin-top: 3px; }
    body.zq-room #zq-right-panel .zq-rp-st2 { font-size: 12px; color: #888780; margin-top: 2px; }
    body.zq-room #zq-right-panel .zq-rp-live { width: 10px; height: 10px; border-radius: 50%; background: #21d07a; flex-shrink: 0; }
    /* 发言队列 */
    body.zq-room #zq-right-panel .zq-rp-queue {
        background: #fff;
        border: 0.5px solid #eee;
        border-radius: 10px;
        padding: 12px 14px;
    }
    body.zq-room #zq-right-panel .zq-rp-qtitle { font-size: 13px; color: #888780; margin-bottom: 8px; }
    body.zq-room #zq-right-panel .zq-rp-qitem {
        display: flex; align-items: center; gap: 10px;
        padding: 8px 10px;
        border: 0.5px solid #eee;
        border-radius: 8px;
        margin-bottom: 6px;
    }
    body.zq-room #zq-right-panel .zq-rp-qfirst { background: #f1efe8; border-color: #f5c4b3; }
    body.zq-room #zq-right-panel .zq-rp-qtag {
        font-size: 11px; background: #a32d2d; color: #fff;
        border-radius: 4px; padding: 1px 7px; flex-shrink: 0;
    }
    body.zq-room #zq-right-panel .zq-rp-qnum {
        font-size: 12px; color: #888780; width: 16px; text-align: center; flex-shrink: 0;
    }
    body.zq-room #zq-right-panel .zq-rp-qname { font-size: 14px; color: #2c2c2a; }
    body.zq-room #zq-right-panel .zq-rp-qperm { font-size: 11px; color: #a32d2d; margin-left: auto; }
    /* 空状态 */
    body.zq-room #zq-right-panel .zq-rp-empty { font-size: 13px; color: #888780; padding: 10px 0; text-align: center; }
    /* 大会堂公告（固定内容） */
    body.zq-room #zq-right-panel .zq-rp-notice {
        background: #a32d2d;
        color: #ffd700;
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 14px;
        line-height: 1.7;
        text-align: center;
        font-weight: 500;
        border: 1px solid #d4af37;
        margin-top: auto;
    }
}

/* ============ [2026-08-22 东哥] 删除聊天框右上角"关闭(Hide chat)"叉叉（全端隐藏，JS 引用保留不报错） ============ */
#close-chat { display: none !important; }

/* ============ [2026-08-22 东哥] 电脑版聊天输入框：加宽 + 贴紧底部工具栏（零空隙） ============ */
@media only screen and (min-width: 1025px) {
    /* 首页顶栏：标题占满全宽居中 + 放大（原 #header 只有内容宽 307px，标题在小容器里居中显得偏左；字号 19.2px 偏小） */
    body.zq-home #header { flex: 1 1 auto !important; min-width: 0 !important; }
    body.zq-home #title { flex: 1 1 auto !important; }
    body.zq-home .zt-station { font-size: 36px !important; letter-spacing: 2px !important; }
    /* 主区高度 = 满屏（原来 calc(100vh-104px) 导致内容区底部上移，输入框与底部栏之间留大段空白） */
    body.zq-room .row.full-width { height: 100vh !important; }
    /* 聊天区底部让出底部工具栏 62px（border-box，含 padding），输入框正好落在工具栏上沿 */
    body.zq-room .coln-left #chat { padding-bottom: 62px !important; box-sizing: border-box !important; }
    /* 输入框行：textarea 占满（按钮只占一小块），输入框更高更宽 */
    body.zq-room #inputform { display: flex !important; align-items: center !important; gap: 8px !important; }    body.zq-room #input {
        flex: 1 1 auto !important;
        width: auto !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 160px !important;
        font-size: 15px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
    }
    body.zq-room #inputbutton {
        flex: 0 0 auto !important;
        width: 64px !important;
        height: 42px !important;
        font-size: 16px !important;
        padding: 0 !important;
        border-radius: 8px !important;
    }
    body.zq-room #chatbox .reply { padding: 8px 10px !important; }
}