/* PakStudyHub Meet — room */
:root {
  --pm-accent: #14b8a6;
  --pm-bg: #0d141b;
  --pm-bar: #121c25;
  --pm-line: rgba(255, 255, 255, .09);
  --pm-text: #e7edf3;
  --pm-mute: #93a3b3;
  --pm-red: #ef4444;
  --pm-ok: #22c55e;
  --pm-warn: #f59e0b;
  --pm-card: #ffffff;
  --pm-ink: #0f1a24;
  --pm-ink2: #536271;
  --pm-r: 14px;
  --pm-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body.pm {
  margin: 0; background: var(--pm-bg); color: var(--pm-text); font: 15px/1.45 var(--pm-font);
  display: grid; grid-template-rows: auto 1fr; height: 100vh; height: 100dvh; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.pm [hidden] { display: none !important; }
.pm button { font: inherit; color: inherit; }
.pm a { color: inherit; }

/* ---------------------------------------------------------------- top bar */
.pm-bar {
  display: flex; align-items: center; gap: 14px; padding: 8px 14px; min-height: 58px;
  background: var(--pm-bar); border-bottom: 1px solid var(--pm-line); position: relative; z-index: 40;
  padding-top: max(8px, env(safe-area-inset-top));
}
.pm-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.pm-brand__dot { width: 26px; height: 26px; border-radius: 8px; background: conic-gradient(from 200deg, var(--pm-accent), #3b82f6, var(--pm-accent)); box-shadow: 0 0 0 3px rgba(20, 184, 166, .15); }
.pm-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.pm-title h1 { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pm-text); }
.pm-chip { flex: none; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, .08); color: var(--pm-mute); }
.pm-chip--live { background: rgba(239, 68, 68, .16); color: #fca5a5; }
.pm-chip--ended { background: rgba(148, 163, 184, .14); }
.pm-timer { display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 4px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-variant-numeric: tabular-nums; }
.pm-timer__label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--pm-mute); }
.pm-timer b { font-size: 17px; }
.pm-timer.is-warn { background: rgba(245, 158, 11, .16); color: #fcd34d; }
.pm-timer.is-last { background: rgba(239, 68, 68, .2); color: #fecaca; animation: pm-blink 1s steps(2) infinite; }
@keyframes pm-blink { 50% { opacity: .55; } }
.pm-actions { display: flex; align-items: center; gap: 6px; }
.pm-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--pm-line); background: rgba(255, 255, 255, .04); cursor: pointer; white-space: nowrap; text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background .15s, border-color .15s, transform .1s;
}
.pm-btn:hover { background: rgba(255, 255, 255, .09); }
.pm-btn:active { transform: scale(.97); }
.pm-btn:focus-visible, .pm-tools button:focus-visible { outline: 2px solid var(--pm-accent); outline-offset: 2px; }
.pm-btn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.pm-btn svg path[fill="none"], .pm-btn svg [fill="none"] { fill: none; }
.pm-btn.is-on { background: rgba(20, 184, 166, .18); border-color: rgba(20, 184, 166, .5); color: #99f6e4; }
.pm-btn.is-done { border-color: var(--pm-ok); }
.pm-btn--go { background: var(--pm-accent); border-color: transparent; color: #04211d; font-weight: 700; padding: 0 16px; }
.pm-btn--go:hover { background: #2dd4bf; }
.pm-btn--soft { background: rgba(255, 255, 255, .06); }
.pm-recdot { width: 11px; height: 11px; border-radius: 50%; background: var(--pm-red); box-shadow: 0 0 0 3px rgba(239, 68, 68, .25); }
.pm-btn--rec.is-rec { background: rgba(239, 68, 68, .18); border-color: rgba(239, 68, 68, .55); color: #fecaca; font-variant-numeric: tabular-nums; }
.pm-btn--rec.is-rec .pm-recdot { animation: pm-blink 1s steps(2) infinite; }
.pm-count { font-style: normal; font-size: 12px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--pm-accent); color: #04211d; display: inline-grid; place-items: center; font-weight: 700; }
.pm-attend { font-size: 13px; padding: 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); color: var(--pm-mute); white-space: nowrap; }
.pm-attend.is-ok { background: rgba(34, 197, 94, .16); color: #86efac; }
.pm-more { position: relative; }
.pm-more .pm-btn { padding: 0 10px; }
.pm-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 250px; padding: 6px; border-radius: 12px;
  background: #1a2632; border: 1px solid var(--pm-line); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); display: grid;
}
.pm-menu button, .pm-menu a { text-align: left; padding: 10px 12px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-decoration: none; font-size: 14px; }
.pm-menu button:hover, .pm-menu a:hover { background: rgba(255, 255, 255, .07); }
.pm-menu .pm-danger { color: #fca5a5; border-top: 1px solid var(--pm-line); border-radius: 0 0 8px 8px; margin-top: 4px; }

/* ---------------------------------------------------------------- stage */
.pm-stage { position: relative; display: flex; min-height: 0; }
.pm-video { flex: 1; min-width: 0; background: #000; position: relative; }
.pm-video iframe { display: block; border: 0; width: 100%; height: 100%; }
.pm-connecting { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--pm-mute); text-align: center; padding: 20px; }
.pm-connecting--err p { color: #fecaca; max-width: 420px; }
.pm-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .12); border-top-color: var(--pm-accent); animation: pm-spin .8s linear infinite; }
@keyframes pm-spin { to { transform: rotate(360deg); } }

/* board + video side by side */
.pm--board .pm-stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 380px); }
.pm--board .pm-video { order: 2; border-left: 1px solid var(--pm-line); }
.pm-board { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #17212b; position: relative; }
.pm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-bottom: 1px solid var(--pm-line); background: #141e27; }
.pm-tg { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.pm-tools button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--pm-text); }
.pm-tools button:hover { background: rgba(255, 255, 255, .08); }
.pm-tools button.is-on { background: rgba(20, 184, 166, .22); color: #5eead4; }
.pm-tools svg { width: 20px; height: 20px; }
.pm-colors button::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.pm-colors button.is-on { background: rgba(255, 255, 255, .12); }
.pm-colors button.is-on::after { box-shadow: 0 0 0 2px #17212b, 0 0 0 4px #5eead4; }
.pm-sizes i { width: var(--s); height: var(--s); border-radius: 50%; background: currentColor; }
.pm-pages span { min-width: 54px; text-align: center; font-size: 13px; color: var(--pm-mute); font-variant-numeric: tabular-nums; }
.pm-pages button { font-size: 20px; }
.pm-viewonly { position: absolute; left: 12px; top: 10px; z-index: 3; font-size: 12px; padding: 5px 10px; border-radius: 99px; background: rgba(15, 23, 32, .75); color: #99f6e4; pointer-events: none; }
.pm-canvaswrap { position: relative; flex: 1; min-height: 0; overflow: hidden; margin: 10px; }
.pm-canvas { position: absolute; border-radius: 6px; }
.pm-canvas--live { touch-action: none; cursor: crosshair; }
.pm-board--view .pm-canvas--live { cursor: default; }
.pm-canvas.pm-bg--plain { background: #fff; }
.pm-canvas.pm-bg--grid { background-color: #fff; background-image: linear-gradient(rgba(37, 99, 235, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, .14) 1px, transparent 1px); background-size: 2.5% 4.444%; }
.pm-canvas.pm-bg--lines { background-color: #fff; background-image: linear-gradient(rgba(37, 99, 235, .16) 1px, transparent 1px); background-size: 100% 4.444%; }
.pm-canvas.pm-bg--dark { background: #14322a; box-shadow: inset 0 0 60px rgba(0, 0, 0, .35); }
.pm-canvas:not(.pm-canvas--live) { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.pm-textinput { position: absolute; z-index: 4; min-width: 120px; padding: 0 2px; margin: 0; border: 1px dashed var(--pm-accent); background: rgba(255, 255, 255, .6); font: 600 16px/1.25 var(--pm-font); resize: none; outline: none; field-sizing: content; }

/* ---------------------------------------------------------------- screens */
.pm-screen { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; overflow: auto;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(20, 184, 166, .16), transparent 60%), var(--pm-bg); }
.pm--screen .pm-video, .pm--screen .pm-board { visibility: hidden; }
.pm-panel { width: min(460px, 100%); background: var(--pm-card); color: var(--pm-ink); border-radius: 20px; padding: 28px 26px; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); text-align: center; display: grid; gap: 14px; justify-items: center; }
.pm-panel > p { margin: 0; color: var(--pm-ink2); }
.pm-hello { display: grid; gap: 4px; justify-items: center; }
.pm-hello__icon { font-size: 34px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: #ecfdf9; margin-bottom: 6px; }
.pm-pulse { animation: pm-pulse 2s ease-in-out infinite; }
@keyframes pm-pulse { 50% { transform: scale(1.06); } }
.pm-hello h2 { margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
.pm-sub { margin: 0; color: var(--pm-ink2); }
.pm-sub a { color: #0f766e; }
.pm-when { margin: 6px 0 0; font-size: 14px; padding: 4px 12px; border-radius: 99px; background: #f1f5f9; color: var(--pm-ink); }
.pm-form { display: grid; gap: 12px; width: 100%; text-align: left; }
.pm-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--pm-ink); }
.pm-form input { height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #d6dee6; font: 16px var(--pm-font); color: var(--pm-ink); background: #fff; }
.pm-form input:focus { outline: none; border-color: var(--pm-accent); box-shadow: 0 0 0 4px rgba(20, 184, 166, .15); }
.pm-err { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fef2f2; color: #b91c1c; font-size: 14px; }
.pm-big { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 22px; border: 0; border-radius: 13px; background: var(--pm-accent); color: #042f2a; font-weight: 700; font-size: 16px; cursor: pointer; text-decoration: none; width: 100%; }
.pm-big:hover { filter: brightness(1.06); }
.pm-big:disabled { opacity: .6; cursor: wait; }
.pm-big--soft { background: #eef2f6; color: var(--pm-ink); }
.pm-fine { margin: 0; font-size: 13px; color: var(--pm-ink2); text-align: center; }
.pm-fine a { color: #0f766e; }

.pm-wait { display: grid; gap: 2px; padding: 14px 20px; border-radius: 14px; background: #f1f5f9; min-width: 220px; height: auto; color: var(--pm-ink); }
[data-pm-wait] small { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--pm-ink2); }
[data-pm-wait] b { font-size: 34px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
[data-pm-wait] b.pm-small { font-size: 16px; }
.pm-notes { width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; font-size: 14px; }
.pm-notes p { margin: 4px 0 0; color: #713f12; }
.pm-endbtns { display: grid; gap: 10px; width: 100%; }
.pm-result { width: 100%; display: grid; gap: 2px; padding: 14px; border-radius: 14px; }
.pm-result--ok { background: #f0fdf4; color: #166534; }
.pm-result--bad { background: #fef2f2; color: #991b1b; }
.pm-result b { font-size: 17px; }
.pm-recmini { width: 100%; text-align: left; }
.pm-recmini h3 { font-size: 14px; margin: 4px 0 8px; }
.pm-recmini .pm-recitem { background: #f8fafc; color: var(--pm-ink); border-color: #e2e8f0; }
.pm-recmini .pm-recitem small { color: var(--pm-ink2); }
.pm-recmini .pm-mini { background: #fff; border-color: #cbd5e1; color: var(--pm-ink); }

/* ---------------------------------------------------------------- side panel */
.pm-side { position: fixed; z-index: 35; top: 58px; right: 0; bottom: 0; width: min(380px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow: auto;
  background: #131d26; border-left: 1px solid var(--pm-line); box-shadow: -20px 0 40px rgba(0, 0, 0, .35); }
.pm-side__head { display: flex; align-items: center; justify-content: space-between; }
.pm-side__head h2 { margin: 0; font-size: 17px; }
.pm-x { width: 36px; height: 36px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .06); font-size: 22px; cursor: pointer; }
.pm-side__rule { margin: 0; font-size: 13px; color: var(--pm-mute); }
.pm-side__sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pm-side__sum span { display: grid; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: 12px; color: var(--pm-mute); text-align: center; }
.pm-side__sum b { font-size: 20px; color: var(--pm-text); }
.pm-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pm-people__empty { padding: 14px; border-radius: 10px; background: rgba(255, 255, 255, .04); color: var(--pm-mute); font-size: 14px; }
.pm-person { display: flex; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.pm-person__main { display: flex; gap: 10px; min-width: 0; }
.pm-person__main > div { min-width: 0; display: grid; gap: 2px; }
.pm-person b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-person small { font-size: 12px; color: var(--pm-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-dot { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: #475569; }
.pm-person.is-on .pm-dot { background: var(--pm-ok); box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.pm-person__st { display: grid; gap: 6px; justify-items: end; align-content: start; }
.pm-person select { height: 30px; font-size: 12px; border-radius: 8px; background: #0f1720; color: var(--pm-text); border: 1px solid var(--pm-line); padding: 0 6px; }
.pm-tag { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; }
.pm-tag--ok { background: rgba(34, 197, 94, .18); color: #86efac; }
.pm-tag--bad { background: rgba(239, 68, 68, .14); color: #fca5a5; }
.pm-bar2 { height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: 3px 0; width: 100%; min-width: 120px; }
.pm-bar2 i { display: block; height: 100%; background: var(--pm-accent); border-radius: inherit; transition: width .4s; }
.pm-side__foot { display: flex; gap: 8px; }
.pm-recbox { border-top: 1px solid var(--pm-line); padding-top: 12px; display: grid; gap: 8px; }
.pm-recbox h3 { margin: 0; font-size: 15px; }
.pm-recitem { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--pm-line); font-size: 13px; }
.pm-recitem small { color: var(--pm-mute); }
.pm-recitem--failed { border-color: rgba(239, 68, 68, .45); }
.pm-recitem--done { border-color: rgba(34, 197, 94, .4); }
.pm-recacts { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-mini { font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--pm-line); background: rgba(255, 255, 255, .06); cursor: pointer; text-decoration: none; }
.pm-mini--x { color: #fca5a5; }

/* ---------------------------------------------------------------- toast */
.pm-toast { position: fixed; z-index: 60; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(560px, calc(100% - 32px));
  padding: 12px 16px; border-radius: 12px; background: #f8fafc; color: var(--pm-ink); font-size: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); animation: pm-up .25s ease-out; }
@keyframes pm-up { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 900px) {
  .pm-btn span:not(.pm-count) { display: none; }
  .pm-btn--go span, .pm-btn--rec.is-rec span { display: inline !important; }
  .pm-brand__name { display: none; }
  .pm-bar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .pm-btn { padding: 0 10px; }
}
@media (max-width: 640px) {
  .pm-bar { flex-wrap: wrap; row-gap: 6px; }
  .pm-title { order: 1; flex: 1 1 calc(100% - 140px); }
  .pm-brand { order: 0; }
  .pm-timer { order: 2; padding: 2px 8px; }
  .pm-timer b { font-size: 15px; }
  .pm-actions { order: 3; width: 100%; justify-content: flex-end; }
  .pm-actions .pm-attend { margin-right: auto; }
  .pm-side { top: 0; z-index: 50; }
  .pm--board .pm-stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(160px, 1fr); }
  .pm--board .pm-canvaswrap { flex: none; aspect-ratio: 16 / 9; max-height: 58dvh; }
  .pm--board .pm-video { border-left: 0; border-top: 1px solid var(--pm-line); }
  .pm-tools { gap: 4px; padding: 6px; overflow-x: auto; flex-wrap: nowrap; }
  .pm-tg { flex: none; }
  .pm-tools button { width: 34px; height: 34px; }
  .pm-canvaswrap { margin: 6px; }
  .pm-panel { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.pm-menu__h { margin: 6px 12px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--pm-mute); }
.pm-menu__h:first-child { margin-top: 2px; }
.pm-menu b { color: #5eead4; }
.pm-sharecard { position: fixed; z-index: 55; left: 50%; top: 74px; transform: translateX(-50%); width: min(440px, calc(100% - 24px)); display: grid; gap: 10px; padding: 18px; border-radius: 16px; background: #fff; color: var(--pm-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); animation: pm-up .25s ease-out; }
.pm-sharecard b { padding-right: 34px; }
.pm-sharecard input { height: 44px; padding: 0 12px; border-radius: 10px; border: 1.5px solid #d6dee6; font: 15px var(--pm-font); color: var(--pm-ink); background: #f8fafc; }
.pm-sharecard .pm-x { position: absolute; right: 10px; top: 10px; background: #f1f5f9; color: var(--pm-ink); }
.pm-sharecard__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-sharecard .pm-big { height: 46px; font-size: 15px; }
.pm-big--wa { background: #25d366; color: #053d1f; }
/* Free mode */
.pm--free [data-pm-free-hide] { display: none !important; }
.pm:not(.pm--free) [data-pm-free-only] { display: none !important; }
.pm-menu__note { margin: 4px 6px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .05); font-size: 12.5px; line-height: 1.45; color: var(--pm-mute); }
.pm--free .pm-video { background: radial-gradient(900px 500px at 50% 0%, rgba(20, 184, 166, .14), transparent 60%), #0b1218; }
.pm-free { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 20px; text-align: center; overflow: auto; }
.pm-free__icon { font-size: 34px; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 20px; background: rgba(20, 184, 166, .14); }
.pm-free h2 { margin: 0; font-size: 21px; color: var(--pm-text); }
.pm-free p { margin: 0; max-width: 440px; color: var(--pm-mute); }
.pm-free p b, .pm-free li b { color: var(--pm-text); }
.pm-free .pm-big { width: auto; min-width: 240px; }
.pm-free__warn { color: #fcd34d !important; }
.pm-free__steps { margin: 4px 0 0; padding-left: 20px; max-width: 440px; text-align: left; color: var(--pm-mute); font-size: 14px; display: grid; gap: 4px; }
.pm--board .pm-free { gap: 8px; padding: 14px; }
.pm--board .pm-free h2 { font-size: 16px; }
.pm--board .pm-free .pm-big { min-width: 0; width: 100%; height: 44px; font-size: 14px; }
.pm--board .pm-free__steps, .pm--board .pm-free__icon { display: none; }
/* Built-in video (Cloudflare) */
.pmv { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #0b1218; }
.pmv.has-strip { grid-template-rows: minmax(0, 1fr) auto auto; }
.pmv-main { position: relative; min-height: 0; padding: 8px 8px 0; }
.pmv-tile { position: relative; background: #1a2430; border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.pmv-tile video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
.pmv-tile--big { height: 100%; }
.pmv-tile--big video, .pmv-tile--screen video { object-fit: contain; }
.pmv-strip { display: flex; gap: 8px; overflow-x: auto; padding: 8px; scrollbar-width: thin; }
.pmv-strip .pmv-tile { flex: 0 0 auto; width: 176px; height: 104px; }
.pmv-strip .pmv-avatar { width: 44px; height: 44px; font-size: 18px; }
.is-mirror { transform: scaleX(-1); }
.pmv-avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--pm-accent); color: #042f2a; display: grid; place-items: center; font-size: 34px; font-weight: 700; }
.pmv-name { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .6); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmv-mute { font-style: normal; font-size: 11px; }
.pmv-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 10px; background: #0f1720; border-top: 1px solid var(--pm-line); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.pmv-btn { display: grid; justify-items: center; gap: 3px; min-width: 66px; padding: 8px 10px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .08); cursor: pointer; font-size: 12px; color: var(--pm-text); }
.pmv-btn:hover { background: rgba(255, 255, 255, .14); }
.pmv-btn i { display: grid; }
.pmv-btn svg { width: 22px; height: 22px; }
.pmv-btn.is-off { background: #dc2626; color: #fff; }
.pmv-btn.is-on { background: var(--pm-accent); color: #042f2a; }
.pmv-btn--leave { background: #b91c1c; color: #fff; }
.pmv-btn:focus-visible { outline: 2px solid var(--pm-accent); outline-offset: 2px; }
.pmv-sound { position: absolute; z-index: 4; top: 14px; left: 50%; transform: translateX(-50%); padding: 10px 16px; border: 0; border-radius: 99px; background: #f8fafc; color: var(--pm-ink); font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.pmv-audio { display: none; }
.pmv.is-connecting .pmv-main::after { content: "Connecting video…"; position: absolute; top: 16px; right: 16px; padding: 4px 10px; border-radius: 99px; background: rgba(245, 158, 11, .2); color: #fcd34d; font-size: 12px; }
.pm--board .pmv-strip .pmv-tile { width: 120px; height: 72px; }
.pm--board .pmv-btn { min-width: 44px; padding: 8px; }
.pm--board .pmv-btn span { display: none; }
@media (max-width: 640px) {
  .pmv-btn { min-width: 52px; padding: 7px 6px; font-size: 11px; }
  .pmv-strip .pmv-tile { width: 128px; height: 80px; }
  .pmv-main { padding: 6px 6px 0; }
}
.pm--cf .pm-toast { bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px)); }