/* ============================================================
   live-messages.css · 主播端 / 观众端共用直播消息基础层
   ------------------------------------------------------------
   阶段 1 只建立容器、基础行与两端布局；等级、入场动效、滚动
   和顶部渐隐将在后续阶段逐步补充。
   ============================================================ */

.live-message-panel {
    position: absolute;
    z-index: 6;
    width: min(300px, calc(100% - 72px));
    height: 152px;
    overflow: hidden;
    color: #fff;
    pointer-events: none;
    transition:
        top 260ms cubic-bezier(0.2, 0.82, 0.24, 1),
        bottom 260ms cubic-bezier(0.2, 0.82, 0.24, 1),
        width 260ms cubic-bezier(0.2, 0.82, 0.24, 1),
        height 260ms cubic-bezier(0.2, 0.82, 0.24, 1);
}

.host-live-message-panel {
    left: 12px;
    bottom: 14px;
}

.video-stage.is-host-comment-composing .host-live-message-panel {
    bottom: 254px;
    height: 132px;
}

.audience-live-message-panel {
    z-index: 4;
    left: 12px;
    bottom: 84px;
    width: min(300px, calc(100% - 70px));
}

.audience-video-stage.is-comment-composing .audience-live-message-panel {
    bottom: 254px;
}

/* 推荐商品出现时，评论区只占左侧可用空间；商品退场后平滑恢复原宽度。 */
html[data-live-mode="shopping"] .audience-video-stage.has-shopping-teaser .audience-live-message-panel {
    width: calc(100% - 138px);
}

/* 浮动连麦席位占据右下 92px：两端消息区同步缩短，避免评论盖住小窗。 */
.co-mic-stage[data-comic-layout="floating"][data-comic-connected="true"] .live-message-panel {
    width: calc(100% - 130px);
}

.co-mic-stage[data-comic-layout="floating"][data-comic-connected="true"] .live-entry-banner-layer {
    /* 横幅最终还会向右滑入 18px，因此额外预留这段动画位移。 */
    width: calc(100% - 122px);
}

/* 宫格、主播连线及 PK 的画面都在同一画面底边结束；消息区向上自适应补齐空隙。 */
.co-mic-stage:is(
    [data-comic-layout^="grid"],
    .host-link-active,
    .pk-active
) .live-message-panel {
    top: calc(
        var(--comic-stage-top) + var(--comic-stage-height) + 8px +
        var(--split-transient-reserved-height, 0px)
    );
    height: auto;
}

/* 临时信息平时跟随文字上沿；碰到非全屏画面底边后才固定并压缩评论区。 */
.co-mic-stage:is(
    [data-comic-layout^="grid"],
    .host-link-active,
    .pk-active
).is-transient-clamped.has-live-entry .live-entry-banner-layer {
    top: calc(
        var(--comic-stage-top) + var(--comic-stage-height) + 8px +
        var(--gift-entry-reserved-height, 0px)
    );
    bottom: auto;
}

/* 邀请卡和接通后的控制栏出现时，观众消息分别向上让位。 */
.audience-video-stage.is-co-mic-invite-visible .audience-live-message-panel {
    bottom: 148px;
}

.audience-video-stage.is-co-mic-controls-visible .audience-live-message-panel {
    bottom: 140px;
}

.audience-video-stage.is-co-mic-invite-visible .audience-live-entry-banner {
    bottom: calc(156px + var(--entry-comment-height, 0px));
}

.audience-video-stage.is-co-mic-controls-visible .audience-live-entry-banner {
    bottom: calc(148px + var(--entry-comment-height, 0px));
}

/* 观众端浮动连麦为 Home 安全区整体上移 16px；评论区与小窗严格共用 128px 底线。 */
.audience-video-stage[data-comic-layout="floating"][data-comic-connected="true"]:not(.is-comment-composing) .audience-live-message-panel {
    bottom: 128px;
}

.audience-video-stage[data-comic-layout="floating"][data-comic-connected="true"]:not(.is-comment-composing) .audience-live-entry-banner {
    bottom: calc(136px + var(--entry-comment-height, 0px));
}

/* 固定小窗画面止于底栏上沿：未出现连麦控制条时，评论和入场条也不越过该底线。 */
.audience-video-stage[data-comic-layout="fixed"]:not(.is-comment-composing) .audience-live-message-panel {
    bottom: 114px;
}

.audience-video-stage[data-comic-layout="fixed"]:not(.is-comment-composing) .audience-live-entry-banner {
    bottom: calc(122px + var(--entry-comment-height, 0px));
}

.audience-video-stage[data-comic-layout="fixed"].is-co-mic-invite-visible .audience-live-message-panel {
    bottom: 160px;
}

.audience-video-stage[data-comic-layout="fixed"].is-co-mic-controls-visible .audience-live-message-panel {
    bottom: 152px;
}

.audience-video-stage[data-comic-layout="fixed"].is-co-mic-invite-visible .audience-live-entry-banner {
    bottom: calc(168px + var(--entry-comment-height, 0px));
}

.audience-video-stage[data-comic-layout="fixed"].is-co-mic-controls-visible .audience-live-entry-banner {
    bottom: calc(160px + var(--entry-comment-height, 0px));
}

.audience-video-stage.is-comment-composing .audience-live-message-panel {
    bottom: 254px;
}

.audience-video-stage.is-comment-composing .audience-live-entry-banner {
    bottom: calc(262px + var(--entry-comment-height, 0px));
}

/* 宫格/主播连线/PK 输入态：取消顶边钉住，较短消息层整体上移并覆盖少量画面。 */
.audience-video-stage.is-comment-composing:is(
    [data-comic-layout^="grid"],
    .host-link-active,
    .pk-active
) .audience-live-message-panel {
    top: auto;
    height: 132px;
}

/* 主播端宫格/连线/PK 输入态同样解除顶边钉住，让评论整体移到键盘上方。 */
.video-stage.is-host-comment-composing:is(
    [data-comic-layout^="grid"],
    .host-link-active,
    .pk-active
) .host-live-message-panel {
    top: auto;
    height: 132px;
}

.phone:not([data-stage="living"]) .host-live-message-panel,
.audience-viewer:not([data-stage="living"]) .audience-live-message-panel {
    display: none;
}

.live-message-list {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 22px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    pointer-events: auto;
    mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 100%);
}

.live-message-list::-webkit-scrollbar {
    display: none;
}

.live-message-list > .live-message-item:first-child {
    margin-top: auto;
}

.live-message-item {
    width: fit-content;
    max-width: 100%;
    flex: 0 0 auto;
    padding: 6px 10px;
    overflow-wrap: anywhere;
    border: 0;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(10, 10, 15, 0.34);
    box-shadow: none;
    font-size: 12px;
    line-height: 1.45;
}

.live-message-item.is-arriving {
    animation: live-message-pop-in 260ms cubic-bezier(0.2, 0.82, 0.24, 1) both;
    transform-origin: left bottom;
}

@keyframes live-message-pop-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.live-message-label {
    margin-right: 4px;
    color: var(--brand-text, #78d8ff);
    font-weight: 600;
}

.live-message-comment {
    padding: 2px 8px;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.94);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.live-message-gift {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 25px;
    padding: 3px 8px;
    overflow-wrap: normal;
    color: #fff4cf;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.live-message-gift .live-level-badge,
.live-message-gift .live-message-label {
    flex: 0 0 auto;
    margin-right: 0;
}

.live-message-gift .live-message-label {
    max-width: 72px;
    overflow: hidden;
    color: var(--brand-text, #78d8ff);
    text-overflow: ellipsis;
}

.live-message-gift-action {
    flex: 0 0 auto;
    color: #fff4cf;
}

.live-message-gift-recipient {
    min-width: 0;
    max-width: 64px;
    overflow: hidden;
    color: #ffe7a3;
    text-overflow: ellipsis;
}

.live-message-gift-name {
    min-width: 0;
    overflow: hidden;
    color: #ffe7a3;
    text-overflow: ellipsis;
}

.live-message-gift-image {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    object-fit: contain;
}

.live-message-gift-count {
    flex: 0 0 auto;
    color: #ffe7a3;
    font-weight: 700;
}

/* 浮动连麦时消息区会变窄；送给其他人的礼物内容按可用宽度自然换行。 */
.live-message-gift.is-recipient-gift {
    flex-wrap: wrap;
    white-space: normal;
}

.live-message-gift.is-recipient-gift .live-message-gift-recipient,
.live-message-gift.is-recipient-gift .live-message-gift-name {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.live-message-enter {
    width: fit-content;
    max-width: 100%;
    padding: 5px 9px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.live-message-enter .live-message-label {
    margin-right: 6px;
}

.live-message-enter.message-level-premium {
    color: rgba(255, 255, 255, 0.94);
    background:
        linear-gradient(105deg, rgba(80, 57, 170, 0.82), rgba(127, 63, 184, 0.7) 58%, rgba(30, 20, 58, 0.54));
    box-shadow: inset 0 0 0 1px rgba(211, 174, 255, 0.2);
}

.live-message-enter.message-level-elite {
    color: #fff8dd;
    background:
        linear-gradient(105deg, rgba(151, 92, 35, 0.82), rgba(135, 72, 155, 0.72) 58%, rgba(38, 25, 68, 0.56));
    box-shadow:
        inset 0 0 0 1px rgba(255, 230, 157, 0.3),
        0 0 8px rgba(220, 147, 70, 0.18);
}

.live-level-badge {
    position: relative;
    top: -1px;
    width: 34px;
    min-width: 34px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0 3px;
    margin-right: 4px;
    border-radius: 7.5px;
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.34);
}

.live-level-badge svg {
    width: 10px;
    height: 10px;
    overflow: visible;
}

.live-level-badge .level-icon-base {
    fill: rgba(255, 255, 255, 0.94);
}

.live-level-badge .level-icon-detail {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.live-level-badge.level-basic {
    color: #dbe7ff;
    background: linear-gradient(135deg, #53637f, #7186ad);
}

.live-level-badge.level-basic .level-icon-detail {
    fill: #6886bd;
    stroke: none;
}

/* 主播身份胶囊：紧跟等级徽章，高度严格保持一致。 */
.live-host-badge {
    position: relative;
    top: -1px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    margin-right: 4px;
    border-radius: 7.5px;
    color: #fff;
    background: color-mix(in srgb, var(--brand-2) 58%, #111827);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--brand-3) 38%, rgba(255, 255, 255, 0.18)),
        0 1px 4px color-mix(in srgb, var(--brand-1) 26%, transparent);
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
}

.live-level-badge.level-advanced {
    color: #e9fbff;
    background: linear-gradient(135deg, #397bd8, #55b9dc);
    box-shadow: inset 0 0 0 1px rgba(210, 246, 255, 0.3);
}

.live-level-badge.level-advanced .level-icon-detail {
    fill: #4e9ed4;
    stroke: none;
}

.live-level-badge.level-premium {
    color: #fff3ff;
    background: linear-gradient(135deg, #6655e8, #a35df0 56%, #e76dbd);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.42),
        0 0 5px rgba(151, 91, 238, 0.4);
}

.live-level-badge.level-premium .level-icon-detail {
    fill: #a768ee;
    stroke: none;
}

.live-level-badge.level-elite {
    color: #fff9dd;
    background: linear-gradient(120deg, #e58743, #f1c853 46%, #c75edd 78%, #7568f0);
    box-shadow:
        inset 0 0 0 1px rgba(255, 250, 207, 0.58),
        0 0 6px rgba(236, 172, 75, 0.44);
}

.live-level-badge.level-elite .level-icon-base {
    fill: #fff4bd;
}

.live-level-badge.level-elite .level-icon-detail {
    stroke: #fff9df;
    stroke-width: 1.8;
}

.live-message-system {
    color: var(--brand-text, #78d8ff);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.live-message-new-button {
    position: absolute;
    z-index: 2;
    right: auto;
    bottom: 0;
    left: 0;
    height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(var(--brand-3-rgb), 0.34);
    border-radius: 13px;
    color: #fff;
    background: rgba(10, 12, 18, 0.96);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.38);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    pointer-events: auto;
}

.live-message-new-button[hidden] {
    display: none;
}

.live-message-new-count {
    color: var(--brand-text, #78d8ff);
}

.live-entry-banner-layer {
    --entry-final-offset: 18px;
    position: absolute;
    z-index: 7;
    left: 0;
    width: min(320px, calc(100% - 40px));
    overflow: visible;
    pointer-events: none;
    transition: bottom 180ms ease;
}

.host-live-entry-banner {
    --entry-final-offset: 12px;
    bottom: calc(22px + var(--entry-comment-height, 0px));
}

.video-stage.is-host-comment-composing .host-live-entry-banner {
    bottom: calc(262px + var(--entry-comment-height, 0px));
}

.audience-live-entry-banner {
    --entry-final-offset: 12px;
    bottom: calc(92px + var(--entry-comment-height, 0px));
}

.audience-video-stage.is-comment-composing .audience-live-entry-banner {
    bottom: calc(262px + var(--entry-comment-height, 0px));
}

.phone:not([data-stage="living"]) .host-live-entry-banner,
.audience-viewer:not([data-stage="living"]) .audience-live-entry-banner,
.live-entry-banner-layer[hidden] {
    display: none;
}

.live-entry-banner-layer .live-message-enter {
    opacity: 0;
    transform: translateX(calc(-100% - 24px));
    transition:
        opacity 420ms ease,
        transform 680ms cubic-bezier(0.18, 0.78, 0.22, 1);
}

.live-entry-banner-layer.is-visible .live-message-enter {
    opacity: 1;
    transform: translateX(var(--entry-final-offset));
}

.live-entry-banner-layer.is-leaving .live-message-enter {
    opacity: 0;
    transform: translateX(-18px);
    transition-duration: 320ms;
}

@media (prefers-reduced-motion: reduce) {
    .live-message-item.is-arriving {
        animation: none;
    }

    .live-message-panel {
        transition-duration: 1ms;
    }

    .live-entry-banner-layer {
        transition-duration: 1ms;
    }

    .live-entry-banner-layer .live-message-enter {
        transition-duration: 1ms;
        transform: none;
    }
}

/* ============ 手机外消息模拟面板 ============ */
.audience-simulator {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.audience-simulator::-webkit-scrollbar {
    display: none;
}

.audience-simulator .sim-audience-list {
    max-height: clamp(120px, calc(100vh - 600px), 300px);
}

.message-simulator {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.message-simulator-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.message-simulator h3 {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.message-simulator .sub {
    margin: 3px 0 0;
    font-size: 8px;
}

.message-simulator-level {
    min-width: 34px;
    min-height: 16px;
    display: flex;
    justify-content: flex-end;
}

.message-simulator-level .live-level-badge {
    top: 0;
    margin-right: 0;
}

.message-simulator-field {
    display: block;
    margin-top: 10px;
}

.message-simulator-field > span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 9px;
}

.message-simulator-field select,
.message-simulator-field input {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    outline: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.055);
    font: inherit;
    font-size: 11px;
}

.message-simulator-field select:focus,
.message-simulator-field input:focus {
    border-color: rgba(var(--brand-3-rgb), 0.42);
}

.message-simulator-field option {
    color: #111;
}

.message-simulator-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

.message-simulator-actions button {
    min-width: 0;
    min-height: 32px;
    padding: 6px 7px;
    border: 1px solid rgba(var(--brand-3-rgb), 0.2);
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(var(--brand-1-rgb), 0.25);
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}

.message-simulator-actions button.is-wide {
    grid-column: 1 / -1;
}

.message-simulator-actions button:disabled,
.message-simulator-field :disabled {
    cursor: not-allowed;
    opacity: 0.36;
}