/* PC 直播间:画面 + 右侧聊天(2026-10-15)。配套 js/zg-live-chat.js。
   版式:横屏 = 16:9 画面在左、聊天栏在右;竖屏 = 9:16 画面居中、聊天栏贴右,两侧垫模糊封面。
   画面一律 contain 不裁切(横画面塞竖框也不许 cover,会切掉内容 —— 同 H5 live-living-content.vue)。 */
.zg-lstage{ position:relative; display:flex; align-items:stretch; width:100%; background:#131110; overflow:hidden; }
.zg-lstage__bg{ position:absolute; inset:-40px; background-size:cover; background-position:center; filter:blur(36px) brightness(.45); transform:scale(1.1); pointer-events:none; display:none; }
.zg-lstage__video{ position:relative; flex:1 1 0; width:0; min-width:0; aspect-ratio:16/9; max-height:calc(100vh - 150px); background:#000; }
/* 播放区沿用 .zg-learn-player(状态角标/占位/aliplayer 挂载点都在里面),在舞台里改成铺满 */
.zg-lstage .zg-learn-player{ width:100%; height:100%; min-height:0; max-height:none; border-radius:0; box-shadow:none; }
.zg-lstage__video .prism-player video{ object-fit:contain; }
.zg-lstage__chat{ position:relative; flex:0 0 340px; width:340px; min-height:0; border-left:1px solid rgba(255,255,255,.08); }

.zg-lstage--portrait{ justify-content:center; height:min(calc(100vh - 150px), 820px); min-height:520px; }
.zg-lstage--portrait .zg-lstage__bg{ display:block; }
.zg-lstage--portrait .zg-lstage__video{ flex:0 0 auto; width:auto; height:100%; max-height:none; aspect-ratio:9/16; }
.zg-lstage--portrait .zg-lstage__chat{ flex:0 0 360px; width:360px; background:rgba(20,17,14,.72); }

/* ---- 聊天栏 ---- */
.zg-lchat{ position:absolute; inset:0; display:flex; flex-direction:column; background:#1d1a17; color:#efe7d6; font-family:var(--zg-font-sans, sans-serif); font-size:14px; }
.zg-lstage--portrait .zg-lchat{ background:transparent; }
.zg-lchat__hd{ flex:none; display:flex; align-items:center; justify-content:space-between; height:46px; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.zg-lchat__title{ font-weight:600; font-size:15px; color:#f3ecdd; }
.zg-lchat__status{ font-size:12px; color:rgba(239,231,214,.55); }
.zg-lchat__list{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:10px 14px; overscroll-behavior:contain; }
.zg-lchat__list::-webkit-scrollbar{ width:6px; }
.zg-lchat__list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:3px; }
.zg-lchat__empty{ padding:40px 10px; text-align:center; color:rgba(239,231,214,.45); font-size:13px; line-height:1.7; }
.zg-lchat-msg{ padding:5px 0; line-height:1.65; word-break:break-word; }
.zg-lchat-msg__nick{ color:#d9b36c; }
.zg-lchat-msg.is-mine .zg-lchat-msg__nick{ color:#e58a7c; }
.zg-lchat-msg__text{ color:#efe7d6; white-space:pre-wrap; }
/* 聊天里的网址(2026-10-15):浅蓝下划线,长网址断行不撑破聊天栏 */
/* ⚠️选择器要带上 .zg-lchat 一层:站点全局 a{color/text-decoration} 规则更具体,单类名会被盖掉(实测) */
.zg-lchat .zg-lchat-msg a.zg-lchat-msg__link{ color:#8fc6ff; text-decoration:underline; word-break:break-all; }
.zg-lchat .zg-lchat-msg a.zg-lchat-msg__link:hover{ color:#b9dcff; }
.zg-lchat-msg__img{ display:block; max-width:160px; max-height:200px; margin-top:4px; border-radius:6px; background:rgba(255,255,255,.06); object-fit:cover; cursor:zoom-in; }
.zg-lchat__bar{ flex:none; display:flex; align-items:center; gap:8px; min-height:58px; padding:10px 12px; border-top:1px solid rgba(255,255,255,.08); }
.zg-lchat__notice{ flex:1; color:rgba(239,231,214,.6); font-size:13px; }
.zg-lchat__login,.zg-lchat__retry{ flex:none; padding:6px 14px; border-radius:999px; border:1px solid rgba(239,231,214,.4); background:transparent; color:#efe7d6; font-size:13px; cursor:pointer; text-decoration:none; }
.zg-lchat__login:hover,.zg-lchat__retry:hover{ border-color:var(--zg-primary, #b23a2e); background:var(--zg-primary, #b23a2e); color:#fff; }
.zg-lchat__form{ flex:1; display:flex; align-items:center; gap:6px; margin:0; }
.zg-lchat__input{ flex:1; min-width:0; height:36px; padding:0 12px; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(255,255,255,.06); color:#f3ecdd; font-size:14px; outline:none; }
.zg-lchat__input:focus{ border-color:rgba(217,179,108,.7); }
.zg-lchat__input::placeholder{ color:rgba(239,231,214,.4); }
.zg-lchat__pic{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:transparent; color:#efe7d6; font-size:14px; cursor:pointer; }
.zg-lchat__pic:hover{ border-color:#d9b36c; color:#d9b36c; }
.zg-lchat__pic[disabled]{ opacity:.5; cursor:default; }
.zg-lchat__send{ flex:none; height:36px; padding:0 16px; border:0; border-radius:18px; background:var(--zg-primary, #b23a2e); color:#fff; font-size:14px; cursor:pointer; }
.zg-lchat__send[disabled]{ opacity:.6; }
.zg-lchat__toast{ display:none; position:absolute; left:50%; bottom:72px; transform:translateX(-50%); max-width:88%; padding:6px 14px; border-radius:6px; background:rgba(0,0,0,.78); color:#fff; font-size:13px; text-align:center; z-index:2; }
.zg-lchat-lightbox{ display:none; position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,.86); align-items:center; justify-content:center; cursor:zoom-out; }
.zg-lchat-lightbox img{ max-width:92vw; max-height:92vh; object-fit:contain; }

/* ---- 动态表情 + 打赏(2026-10-16) ---- */
.zg-lchat__emoji-btn{ font-size:18px; line-height:1; }
.zg-lchat__gift-btn{ flex:none; height:36px; padding:0 12px; border:1px solid #d9b36c; border-radius:18px; background:transparent; color:#d9b36c; font-size:13px; cursor:pointer; white-space:nowrap; }
.zg-lchat__gift-btn:hover{ background:#d9b36c; color:#1d1a17; }
/* 多了表情/打赏两个按钮后 340px 栏放不下:表单与输入框都允许收窄(input 默认按 size=20 撑宽,会把「发送」挤出栏外) */
.zg-lchat__form{ min-width:0; }
.zg-lchat__form .zg-lchat__input{ width:0; }
.zg-lchat-msg__emoji{ display:block; width:56px; height:56px; margin-top:2px; object-fit:contain; }
.zg-lchat-msg--gift{ display:flex; align-items:center; gap:8px; margin:4px 0; padding:6px 10px; border-radius:8px; background:linear-gradient(90deg, rgba(217,179,108,.28), rgba(178,58,46,.18)); border:1px solid rgba(217,179,108,.45); }
.zg-lchat-msg--gift .zg-lchat-msg__text{ color:#f6dfa8; font-weight:600; }
.zg-lchat-msg__gift-img{ flex:none; width:32px; height:32px; object-fit:contain; }
.zg-lchat-emoji{ position:absolute; left:8px; right:8px; bottom:62px; z-index:3; background:#2a2521; border:1px solid rgba(255,255,255,.12); border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.45); overflow:hidden; }
.zg-lchat-emoji__grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; max-height:220px; overflow-y:auto; padding:8px; }
.zg-lchat-emoji__item{ display:flex; align-items:center; justify-content:center; aspect-ratio:1; padding:3px; border:0; border-radius:6px; background:transparent; cursor:pointer; }
.zg-lchat-emoji__item:hover{ background:rgba(255,255,255,.1); }
.zg-lchat-emoji__item img{ width:100%; height:100%; max-width:36px; max-height:36px; object-fit:contain; }
.zg-lchat-emoji__tabs{ display:flex; gap:4px; padding:6px 8px; border-top:1px solid rgba(255,255,255,.08); }
.zg-lchat-emoji__tab{ padding:3px 12px; border:0; border-radius:999px; background:transparent; color:rgba(239,231,214,.7); font-size:12px; cursor:pointer; }
.zg-lchat-emoji__tab.is-on{ background:rgba(217,179,108,.22); color:#f3ecdd; }

/* 画面礼物动画:浮层挂在播放器元素里(全屏也可见);高于 Aliplayer 全部层级,且不拦点击 */
.zg-lgift-layer{ position:absolute; inset:0; z-index:10002; pointer-events:none; overflow:hidden; }
.zg-lgift-fly{ position:absolute; left:50%; bottom:8%; display:flex; flex-direction:column; align-items:center; gap:6px; transform:translateX(-50%); animation:zg-lgift-rise 3s ease-out forwards; }
.zg-lgift-fly__img{ width:var(--zg-gift-size, 80px); height:var(--zg-gift-size, 80px); object-fit:contain; filter:drop-shadow(0 4px 12px rgba(0,0,0,.45)); }
.zg-lgift-fly__text{ max-width:80vw; padding:4px 14px; border-radius:999px; background:rgba(0,0,0,.55); color:#f6dfa8; font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zg-lgift-fly--tier1{ --zg-gift-size:72px; }
.zg-lgift-fly--tier2{ --zg-gift-size:96px; }
.zg-lgift-fly--tier3{ --zg-gift-size:128px; }
.zg-lgift-fly--tier4{ --zg-gift-size:168px; }
.zg-lgift-fly--tier4 .zg-lgift-fly__text{ font-size:18px; background:rgba(178,58,46,.75); color:#fff; }
@keyframes zg-lgift-rise{
  0%{ opacity:0; transform:translate(-50%, 40px) scale(.6); }
  15%{ opacity:1; transform:translate(-50%, 0) scale(1); }
  75%{ opacity:1; transform:translate(-50%, -18vh) scale(1); }
  100%{ opacity:0; transform:translate(-50%, -26vh) scale(.95); }
}

/* 打赏弹窗 */
.zg-lgift-modal{ position:fixed; inset:0; z-index:100001; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.6); font-family:var(--zg-font-sans, sans-serif); }
.zg-lgift-modal__box{ position:relative; width:420px; max-width:100%; max-height:calc(100vh - 32px); overflow-y:auto; padding:24px 22px 20px; border-radius:12px; background:#fffaf1; color:#2b2420; box-shadow:0 20px 50px rgba(0,0,0,.4); }
.zg-lgift-modal__close{ position:absolute; top:8px; right:10px; width:32px; height:32px; border:0; background:transparent; color:#8a7d6c; font-size:22px; cursor:pointer; }
.zg-lgift-modal__title{ font-size:18px; font-weight:600; margin-bottom:6px; padding-right:24px; }
.zg-lgift-modal__sub{ color:#6d6152; font-size:14px; line-height:1.7; margin-bottom:12px; white-space:pre-wrap; }
.zg-lgift-modal__tip{ margin-top:12px; color:#8a7d6c; font-size:12px; text-align:center; }
.zg-lgift-modal__actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.zg-lgift-modal__pay{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.zg-lgift-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.zg-lgift-card{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px; border:1.5px solid #eadcc4; border-radius:10px; background:#fff; cursor:pointer; color:#2b2420; }
.zg-lgift-card img{ width:48px; height:48px; object-fit:contain; }
.zg-lgift-card.is-on{ border-color:var(--zg-primary, #b23a2e); background:#fff3ec; }
.zg-lgift-card__name{ font-size:13px; }
.zg-lgift-card__price{ font-size:12px; color:var(--zg-primary, #b23a2e); }
.zg-lgift-btn{ display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 18px; border:1px solid #d6c7ad; border-radius:20px; background:#fff; color:#2b2420; font-size:14px; cursor:pointer; text-decoration:none; }
.zg-lgift-btn.is-primary{ border-color:var(--zg-primary, #b23a2e); background:var(--zg-primary, #b23a2e); color:#fff; }
.zg-lgift-btn[disabled]{ opacity:.5; cursor:default; }
.zg-lgift-btn.is-wechat{ border-color:#07c160; background:#07c160; color:#fff; }
.zg-lgift-btn.is-alipay{ border-color:#1677ff; background:#1677ff; color:#fff; }
.zg-lgift-qr{ display:flex; justify-content:center; margin:8px 0 4px; }
.zg-lgift-qr canvas{ width:220px; height:220px; image-rendering:pixelated; }

/* 窄屏(<1000px):整页只留「画面在上 + 聊天在下」,铺满一屏(2026-10-28 用户要求)。
   ⚠️ 旧写法只把 flex 改成 column,横屏画面的 flex:1 1 0 + width:0 在纵向下塌成 0×0 —— 画面整块不见,
      只剩聊天;又因 body.zg-page 的 min-width:1180px,页面被撑出横向滚动。
   ⚠️ 尺寸用 vw/vh 显式算,不靠 aspect-ratio(老 Safari<15 / 老内核不认,不认就又塌成 0)。
   zg-lroom / zg-lroom-path / zg-lroom-hide 由 zg-live-chat.js 的 markLiveRoom() 打上。 */
@media (max-width:1000px){
  html.zg-lroom body{ min-width:0 !important; padding:0 !important; }
  html.zg-lroom .zg-lroom-hide{ display:none !important; }
  html.zg-lroom .zg-lroom-path{ display:block !important; width:auto !important; max-width:none !important; min-width:0 !important;
    margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }

  .zg-lstage,.zg-lstage--portrait{ flex-direction:column; height:auto; min-height:0; }
  html.zg-lroom .zg-lstage{ height:100vh; height:100dvh; margin:0 !important; border-radius:0 !important; box-shadow:none !important; }

  /* 横屏画面:满宽 16:9,最高不超过半屏多一点,给聊天留地方 */
  .zg-lstage .zg-lstage__video{ flex:0 0 auto; width:100%; height:56.25vw; max-height:55vh; aspect-ratio:auto; }
  /* 竖屏画面:居中 9:16,高 58vh,宽按比例算;窗口特别窄时以宽为准 */
  .zg-lstage--portrait .zg-lstage__video{ flex:0 0 auto; align-self:center; height:58vh; width:32.625vh; max-width:100%; max-height:none; aspect-ratio:auto; }

  .zg-lstage__chat,.zg-lstage--portrait .zg-lstage__chat{ flex:0 0 360px; width:100%; border-left:0; border-top:1px solid rgba(255,255,255,.08); }
  html.zg-lroom .zg-lstage__chat{ flex:1 1 auto; min-height:180px; height:auto; }
}