
.ms-ttsx{position:relative;z-index:20;display:inline-flex;align-items:center;margin-right:auto;
  width:-moz-fit-content;width:fit-content;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ms-ttsx-p{flex:0 0 28px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:50%;background:#C81E2D;color:#fff;cursor:pointer;line-height:0;
  transition:box-shadow .2s ease,transform .12s ease}
.ms-ttsx-p:hover{box-shadow:0 0 0 4px rgba(200,30,45,.22)}
.ms-ttsx-p:active{transform:scale(.93)}
.ms-ttsx-p svg{display:block}
.ms-ttsx-l{margin-left:8px;font-size:13px;line-height:1;cursor:pointer;white-space:nowrap;
  color:var(--msn-body,rgba(247,251,255,1.0));letter-spacing:.02em}
/* —— 展开面板：**浮层**，不占文档流 —— */
.ms-ttsx-x{position:absolute;left:calc(100% + 10px);top:50%;z-index:60;
  display:flex;align-items:center;white-space:nowrap;
  padding:6px 10px;border:1px solid rgba(143,196,236,.26);border-radius:999px;
  background:#1B4670;box-shadow:0 8px 24px rgba(0,0,0,.42);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-50%) translateX(-8px);
  transition:opacity .2s ease,transform .22s cubic-bezier(.22,.8,.3,1),visibility .2s}
.ms-ttsx.on .ms-ttsx-x{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%) translateX(0)}
.ms-ttsx-t{font-size:14px;font-variant-numeric:tabular-nums;
  color:var(--msn-body,rgba(247,251,255,0.97))}
/* 进度条：红色描边 + 半透明（老板 2026-09-27 指定）；
   高度从 4px 提到 9px —— 带边框的细条看不清，也更好抓着拖 */
.ms-ttsx-bar{position:relative;width:110px;height:9px;margin:0 10px;border-radius:999px;
  border:1px solid rgba(200,30,45,.40);background:rgba(200,30,45,.06);cursor:pointer;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22)}
.ms-ttsx-bar i{position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;
  background:rgba(200,30,45,.30)}
.ms-ttsx-bar i::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #C81E2D}
.ms-ttsx-v{display:inline-flex;align-items:center;padding:0;background:none;border:0;
  color:var(--msn-link,#CFE8FB);cursor:pointer;line-height:0}
/* K26 音量：竖向 84px，向上弹出（上=大声，下=静音） */
.ms-ttsx-r{width:6px;height:64px;margin:0;padding:0;flex:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;outline:none;border-radius:3px;
  background:rgba(143,196,236,.26);
  writing-mode:vertical-lr;direction:rtl;
  transition:none}
.ms-ttsx-r::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:#C81E2D;box-shadow:0 0 0 2px rgba(200,30,45,.22);margin:0}
.ms-ttsx-r::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;
  background:#C81E2D;box-shadow:0 0 0 2px rgba(200,30,45,.22)}
.ms-ttsx-volwrap{position:absolute;left:50%;bottom:calc(100% + 12px);z-index:70;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  width:34px;box-sizing:border-box;
  margin-left:-17px;
  padding:9px 9px 8px;border:1px solid rgba(143,196,236,.26);border-radius:12px;
  background:#1B4670;box-shadow:0 8px 24px rgba(0,0,0,.42);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(8px);
  transition:opacity .2s ease,transform .22s cubic-bezier(.22,.8,.3,1),visibility .2s}
.ms-ttsx.vopen .ms-ttsx-volwrap{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0)}
.ms-ttsx-volwrap::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;
  border:5px solid transparent;border-top-color:#1B4670}
.ms-ttsx-vn{font-size:11px;line-height:1;font-variant-numeric:tabular-nums;
  color:rgba(247,251,255,0.97)}
/* « 收起到最小：做成**有底的小按钮**——原来只有 12px 纯字，太小也看不出能点；
   左边留 14px 间距，跟音量图标分开，手指/鼠标都不容易误触 */
.ms-ttsx-c{margin-left:14px;padding:2px 7px 3px;background:rgba(200,30,45,.16);
  border:1px solid rgba(200,30,45,.55);border-radius:6px;
  font-size:16px;font-weight:700;line-height:1;color:#fff;cursor:pointer;
  transition:background .15s ease,border-color .15s ease}
.ms-ttsx-c:hover{background:#C81E2D;border-color:#C81E2D}
.ms-ttsx.is-load .ms-ttsx-l{opacity:.5}
