/* ═══ v8.30 · 📞 THE CALL CIRCLE — the call window (shared with the group chat), the ring, the Calls panel, the circle manager.
   Loaded by index.html (after styles.css) and by call.html, which has no other stylesheet. ═══ */
body.p830 { margin: 0; min-height: 100vh; min-height: 100dvh; background: radial-gradient(1200px 700px at 20% -10%, #2A2163 0%, #14112E 55%) #14112E; color: #F4F2FF; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
body.p830 * { box-sizing: border-box; }
:is(body.p830,body.sh830) #toastHost { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 100000; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
:is(body.p830,body.sh830) .toast { background: #fff; color: #1B1640; padding: 11px 16px; border-radius: 12px; font-size: 14.5px; box-shadow: 0 12px 30px rgba(0,0,0,.4); max-width: min(440px, 92vw); } :is(body.p830,body.sh830) .toast.err { border-left: 4px solid #FF5A5F; }
:is(body.p830,body.sh830) .modal-bg { position: fixed; inset: 0; background: rgba(10,8,28,.72); z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 14px; }
:is(body.p830,body.sh830) .modal { background: #fff; color: #232135; border-radius: 18px; padding: 20px; max-width: 760px; width: 100%; max-height: 92dvh; overflow: auto; position: relative; }
:is(body.p830,body.sh830) .modal-x { position: absolute; right: 10px; top: 10px; border: 0; background: #EEE; border-radius: 50%; width: 34px; height: 34px; cursor: pointer; }
:is(body.p830,body.sh830) .btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #D9D5EE; background: #fff; color: #232135; border-radius: 12px; padding: 9px 14px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; } :is(body.p830,body.sh830) .btn.primary { background: #5B3DF5; border-color: #5B3DF5; color: #fff; } :is(body.p830,body.sh830) .help { color: #6B6884; font-size: 13.5px; } :is(body.p830,body.sh830) .cal-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ring828 { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 99995; background: #1B1640; color: #fff; border-radius: 18px; padding: 14px 18px; box-shadow: 0 16px 40px rgba(0,0,0,.35); display: grid; gap: 10px; min-width: min(360px, 92vw); animation: r828in .3s ease; } @keyframes r828in { from { transform: translate(-50%, -20px); opacity: 0; } } .r828-who { font-size: 17px; } .r828-b { display: flex; gap: 8px; flex-wrap: wrap; } .r828-b .btn { min-height: 46px; flex: 1; font-weight: 800; border: 0; } .r828-ok { background: #22C55E; color: #fff; } .r828-no { background: #E5484D; color: #fff; }
.call828 { position: fixed; right: 16px; bottom: 16px; z-index: 99980; width: min(560px, calc(100vw - 32px)); background: #0E0B24; color: #fff; border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.45); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; } .call828:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.c828-ch { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: rgba(255,255,255,.06); } .c828-ch b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #c828t { font-variant-numeric: tabular-nums; opacity: .8; } .c828-cb { border: 0; background: rgba(255,255,255,.14); color: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; } .c828-recdot { color: #FF5A5F; font-weight: 900; animation: r821pulse 1s infinite alternate; }
.c828-grid { display: grid; gap: 4px; padding: 4px; background: #000; min-height: 200px; } .c828-grid.n2 { grid-template-columns: 1fr 1fr; } .c828-grid.n3, .c828-grid.n4 { grid-template-columns: 1fr 1fr; } .call828:fullscreen .c828-grid { height: 100%; }
.c828-tile { position: relative; background: #1E1A3A; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; display: grid; place-items: center; } .call828:fullscreen .c828-tile { aspect-ratio: auto; } .c828-tile video { width: 100%; height: 100%; object-fit: contain; background: #000; } .c828-tile video.hid { position: absolute; width: 1px; height: 1px; opacity: 0; } .c828-tile .c828-ph { width: 76px; height: 76px; border-radius: 50%; background: #5B3FD6; display: grid; place-items: center; font-size: 26px; font-weight: 800; } .c828-nm { position: absolute; left: 8px; bottom: 6px; font-size: 13px; font-weight: 700; background: rgba(0,0,0,.5); padding: 2px 8px; border-radius: 999px; }
.c828-self { position: absolute; right: 12px; bottom: 70px; width: 26%; max-width: 160px; border-radius: 10px; border: 2px solid rgba(255,255,255,.5); background: #000; transform: scaleX(-1); } .c828-self.hid { display: none; }
.c828-ctl { display: flex; gap: 8px; justify-content: center; padding: 10px; flex-wrap: wrap; } .c828-ctl button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; cursor: pointer; } .c828-ctl button.off { background: #4A4560; } .c828-ctl button.on { background: #7B5CF0; } .c828-ctl button.end { background: #E5484D; transform: rotate(135deg); }
.call828.min .c828-grid, .call828.min .c828-self { display: none; } .call828.min { width: 300px; }
@media (max-width: 640px) { .call828:not(.min) { left: 0; right: 0; bottom: 0; top: 0; width: 100vw; border-radius: 0; } .call828:not(.min) .c828-grid { height: 100%; align-content: center; } .c828-ctl button { width: 52px; height: 52px; } }
.rec828 { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 99996; background: #1B1640; color: #fff; border-radius: 999px; padding: 6px 8px 6px 16px; display: flex; gap: 10px; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); } .rec828 .help { color: rgba(255,255,255,.75); font-size: 12px; } .rec828 b { font-variant-numeric: tabular-nums; }
.c828-recm { max-width: 720px; } .c828-recm video { width: 100%; max-height: 50vh; background: #000; border-radius: 12px; }
/* ═══ end v8.28 ═══ */
.c828-hbtn[data-c="rec"], .c828-ctl button[data-a="rec"] { color: #FF5A5F; font-size: 20px; } .c828-ctl button[data-a="rec"].on { background: #FF5A5F; color: #fff; }
/* ── v8.30 on top of the v8.28 call window ── */
.call828 { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } .call828.pre .c828-ph { animation: c830pulse 1.1s ease-in-out infinite; } @keyframes c830pulse { 50% { opacity: .35; } }
.c828-tile .c828-ph { max-width: none; font-size: clamp(26px, 6vw, 54px); font-weight: 800; color: #CFC8FF; }
.c828-self.scr { transform: none; }
.c828-ctl { gap: 6px; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); } .c828-ctl button { width: auto; min-width: 64px; height: auto; min-height: 56px; border-radius: 16px; padding: 7px 10px 6px; display: grid; justify-items: center; gap: 2px; font-size: 21px; line-height: 1.1; transition: background .15s, transform .1s; } .c828-ctl button:active { transform: scale(.95); }
.c828-ctl button small { font-size: 10.5px; font-weight: 700; letter-spacing: .01em; opacity: .92; white-space: nowrap; } .c828-ctl button.off { background: #FF5A5F; color: #fff; } .c828-ctl button.end { background: #E5383B; color: #fff; transform: none; } .c828-ctl button.end:active { transform: scale(.95); } .c828-ctl button:focus-visible { outline: 3px solid #FFD166; outline-offset: 2px; }
.call828.min .c828-ctl button small { display: none; } .call828.min .c828-ctl button { min-width: 44px; min-height: 44px; padding: 6px; }
.c830-big { position: absolute; right: 8px; top: 8px; z-index: 2; width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 17px; cursor: pointer; opacity: 0; transition: opacity .15s; } .c828-tile:hover .c830-big, .c828-tile.big .c830-big { opacity: 1; } @media (hover: none) { .c830-big { opacity: .85; } }
.c828-grid.big { grid-template-columns: 1fr !important; } .c828-grid.big .c828-tile:not(.big) { display: none; } .c828-grid.big .c828-tile.big { aspect-ratio: 16 / 9; } .call828:fullscreen .c828-grid.big .c828-tile.big { aspect-ratio: auto; height: 100%; }
@media (max-width: 640px) { .c828-ctl button { min-width: 0; flex: 1 1 0; width: auto; height: auto; padding: 8px 2px 6px; } .c828-ctl { flex-wrap: nowrap; } .c828-ctl button small { font-size: 9.5px; } }
/* the ring: a card nobody can miss */
.ring828 { top: max(14px, env(safe-area-inset-top)); grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; padding: 16px 18px; border-radius: 22px; background: linear-gradient(135deg, #2B2170, #14112E); border: 1px solid rgba(255,255,255,.16); min-width: min(420px, 94vw); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.r830-av { grid-row: span 2; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #FFD166, #FF7AB6 55%, #7B5CF0); color: #fff; font-weight: 800; font-size: 21px; display: grid; place-items: center; animation: r830ring 1.2s ease-out infinite; } @keyframes r830ring { 0% { box-shadow: 0 0 0 0 rgba(123,92,240,.7); } 100% { box-shadow: 0 0 0 20px rgba(123,92,240,0); } }
.ring828 .r828-who { font-size: 16.5px; } .ring828 .r828-b { display: flex; gap: 8px; flex-wrap: wrap; } .ring828 .r828-b .btn { border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 800; font-size: 14.5px; cursor: pointer; min-height: 44px; } .ring828 .r828-ok { background: #1DB954; color: #fff; } .ring828 .r828-no { background: #E5383B; color: #fff; }
@media (max-width: 520px) { .ring828 { left: 8px; right: 8px; transform: none; min-width: 0; } .ring828 .r828-b .btn { flex: 1 1 auto; } }
.s830-out { margin-top: 10px; font-size: 14px; } .s830-box { display: grid; gap: 8px; background: #F4F2FF; border-radius: 12px; padding: 10px 12px; color: #232135; } .s830-box code { word-break: break-all; font-size: 13px; } .s830-box div { display: flex; gap: 8px; flex-wrap: wrap; }
/* ── the Calls panel: a sheet over the site, or the whole page on call.html ── */
.pp830 { position: fixed; inset: 0; z-index: 99970; background: rgba(10,8,28,.6); display: flex; justify-content: flex-end; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #F4F2FF; animation: pp830in .18s ease; } @keyframes pp830in { from { opacity: 0; } }
.pp830 * { box-sizing: border-box; } .pp830.page { position: static; background: none; justify-content: center; animation: none; min-height: 100dvh; }
.pp-card { width: min(460px, 100vw); height: 100%; background: #14112E; display: flex; flex-direction: column; box-shadow: -20px 0 50px rgba(0,0,0,.4); overflow: hidden; } .pp830.page .pp-card { width: min(760px, 100vw); height: auto; min-height: 100dvh; background: none; box-shadow: none; overflow: visible; }
.pp-h { display: flex; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid rgba(255,255,255,.1); } .pp-h b { font-size: 19px; flex: 1; } .pp-me { font-size: 13.5px; opacity: .75; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-x, .pp-back { border: 0; background: rgba(255,255,255,.12); color: #fff; border-radius: 12px; min-width: 40px; height: 40px; font-size: 16px; cursor: pointer; padding: 0 12px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; }
.pp-body { flex: 1; overflow-y: auto; padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 14px; align-content: start; -webkit-overflow-scrolling: touch; }
.pp-h1 { font-size: clamp(24px, 5vw, 34px); font-weight: 800; margin: 6px 0 0; letter-spacing: -.01em; } .pp-sub { margin: 0; color: #B9B3DE; font-size: 14.5px; line-height: 1.45; } .pp-sub a { color: #C9BEFF; }
.pp-unlock { border: 1px dashed rgba(255,209,102,.6); background: rgba(255,209,102,.1); color: #FFE3A3; border-radius: 14px; padding: 11px 14px; font-size: 14px; font-weight: 700; cursor: pointer; text-align: left; width: 100%; font-family: inherit; }
.pp-missed { background: rgba(229,56,59,.14); border: 1px solid rgba(229,56,59,.4); border-radius: 14px; padding: 10px 12px; display: grid; gap: 6px; font-size: 14px; } .pp-missed div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pp-missed button { margin-left: auto; }
.pp-list { display: grid; gap: 8px; } .pp-c { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 10px 10px 10px 12px; }
.pp-av { position: relative; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #7B5CF0, #FF7AB6); display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff; flex: none; } .pp-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .pp-av i { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; border-radius: 50%; background: #6B6884; border: 2.5px solid #14112E; } .pp-c.on .pp-av i { background: #1DB954; }
.pp-n { min-width: 0; display: grid; } .pp-n b { font-size: 16.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-n small { color: #B9B3DE; font-size: 12.5px; } .pp-c.on .pp-n small { color: #7BE3A0; }
.pp-b { border: 0; border-radius: 16px; min-width: 60px; min-height: 54px; padding: 6px 10px; display: grid; justify-items: center; gap: 1px; font-size: 21px; color: #fff; cursor: pointer; font-family: inherit; transition: transform .1s, filter .15s; } .pp-b small { font-size: 10.5px; font-weight: 800; } .pp-b.a { background: #1DB954; } .pp-b.v { background: #5B3DF5; } .pp-b:active { transform: scale(.94); } .pp-b:hover { filter: brightness(1.1); } .pp-b:focus-visible, .pp-t:focus-visible, .pp-btn:focus-visible { outline: 3px solid #FFD166; outline-offset: 2px; }
.pp-all { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: rgba(255,255,255,.04); border-radius: 16px; padding: 10px 12px; font-weight: 700; } .pp-all span { flex: 1; min-width: 120px; }
.pp-btn { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; border-radius: 12px; min-height: 42px; padding: 8px 14px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .pp-btn.go { background: #5B3DF5; border-color: #5B3DF5; } .pp-btn.sm { min-height: 36px; padding: 5px 10px; font-size: 13px; } .pp-btn:disabled { opacity: .5; }
.pp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .pp-t { background: linear-gradient(150deg, rgba(123,92,240,.35), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 16px 14px; color: #fff; text-decoration: none; display: grid; gap: 6px; font-size: 30px; min-height: 104px; align-content: center; transition: transform .12s; } .pp-t b { font-size: 15.5px; } .pp-t:hover { transform: translateY(-2px); }
.pp-foot { display: flex; gap: 8px; flex-wrap: wrap; } .pp-empty { text-align: center; padding: 22px 10px; color: #B9B3DE; border: 1px dashed rgba(255,255,255,.2); border-radius: 18px; font-size: 14.5px; line-height: 1.5; }
.pp-form { display: flex; gap: 8px; flex-wrap: wrap; } .pp-form input, .pp-in { flex: 1 1 180px; min-width: 0; min-height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: #fff; padding: 8px 12px; font: inherit; font-size: 16px; } .pp-form input::placeholder, .pp-in::placeholder { color: #9A94C4; }
.pp-g { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 12px; display: grid; gap: 9px; } .pp-g.off { opacity: .6; } .pp-gh { display: flex; gap: 10px; align-items: center; } .pp-gh b { flex: 1; font-size: 16.5px; } .pp-gh small { color: #B9B3DE; }
.pp-link { font-size: 12.5px; word-break: break-all; background: rgba(0,0,0,.3); padding: 7px 9px; border-radius: 9px; color: #D9D2FF; display: block; } .pp-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .pp-lab { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9A94C4; }
.pp-chip { border: 1px solid rgba(255,255,255,.2); background: transparent; color: #D9D2FF; border-radius: 999px; min-height: 36px; padding: 4px 11px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .pp-chip.on { background: #5B3DF5; border-color: #5B3DF5; color: #fff; }
.pp-g details { font-size: 13.5px; } .pp-g summary { cursor: pointer; color: #C9BEFF; font-weight: 700; padding: 4px 0; } .pp-login { max-width: 400px; margin: 9vh auto 0; padding: 24px 20px; display: grid; gap: 12px; text-align: center; } .pp-login .pp-logo { font-size: 54px; } .pp-login form { display: grid; gap: 10px; } .pp-err { color: #FFB3B5; font-weight: 700; margin: 0; }
@media (max-width: 520px) { .pp-card { width: 100vw; } .pp-c { grid-template-columns: auto 1fr auto auto; gap: 8px; padding: 9px; } .pp-av { width: 44px; height: 44px; font-size: 16px; } .pp-b { min-width: 54px; } }
@media (prefers-reduced-motion: reduce) { .pp830, .r830-av, .call828.pre .c828-ph { animation: none; } }
/* guests see only the menus the lecturer ticked */
.g830-hide { display: none !important; }
/* chat attachments: 7 days, then the recycle bin */
.c828-file.gone { opacity: .78; border-style: dashed; } .c828-file.gone .c828-fn small { color: #B4530A; } .c828-img.gone { display: grid; place-items: center; min-width: 150px; min-height: 84px; background: rgba(0,0,0,.06); border: 1px dashed rgba(0,0,0,.25); border-radius: 12px; font-size: 12.5px; color: #6B6884; padding: 8px; text-align: center; text-decoration: none; } .c830-days { opacity: .7; }

/* on the Calls page the call is the page: it takes the whole screen */
body.p830 .call828:not(.min) { left: 0; right: 0; top: 0; bottom: 0; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; } body.p830 .call828:not(.min) .c828-grid { height: 100%; min-height: 0; align-content: center; } body.p830 .call828:not(.min) .c828-tile { aspect-ratio: auto; height: 100%; min-height: 0; } body.p830 .call828:not(.min) .c828-grid.n2, body.p830 .call828:not(.min) .c828-grid.n3, body.p830 .call828:not(.min) .c828-grid.n4 { grid-auto-rows: 1fr; }
@media (orientation: portrait) { body.p830 .call828:not(.min) .c828-grid.n2 { grid-template-columns: 1fr; } }
.c828-self { aspect-ratio: 4 / 3; object-fit: cover; bottom: 96px; } .c828-self.scr { aspect-ratio: 16 / 9; object-fit: contain; }

/* ═══ v8.31 · 📒 THE CALL BOOK — people on the left, one person on the right; the ring in the top-left corner ═══ */
.pp-two { flex: 1; overflow-y: auto; padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 18px; align-content: start; -webkit-overflow-scrolling: touch; }
.pp-left, .pp-right { display: grid; gap: 12px; align-content: start; min-width: 0; } .pp-two.has-sel .pp-left { display: none; }
.pp-tools { display: flex; gap: 8px; } .pp-tools .pp-in { flex: 1 1 auto; } .pp-in[type="search"]::-webkit-search-cancel-button { filter: invert(1); }
.pp-addf { display: grid; gap: 8px; background: rgba(123,92,240,.16); border: 1px solid rgba(123,92,240,.5); border-radius: 16px; padding: 12px; }
.pp-c { grid-template-columns: minmax(0, 1fr) auto auto; padding: 6px 8px 6px 6px; transition: border-color .15s, background .15s, transform .12s; } .pp-c[hidden] { display: none; } .pp-c.sel { border-color: #7B5CF0; background: rgba(123,92,240,.2); } .pp-c.drag { opacity: .45; } .pp-c.over { border-color: #FFD166; transform: translateY(3px); } .pp-c[draggable="true"] { cursor: grab; }
.pp-who { display: flex; align-items: center; gap: 10px; min-width: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; padding: 6px; border-radius: 14px; cursor: pointer; } .pp-who:hover { background: rgba(255,255,255,.06); } .pp-who:focus-visible, .pp-hr:focus-visible, .pp-in:focus-visible { outline: 3px solid #FFD166; outline-offset: 2px; }
.pp-none { color: #B9B3DE; text-align: center; margin: 4px 0; } .pp-ord { font-size: 12.5px; margin: 0; } .pp-lnk { background: none; border: 0; color: #C9BEFF; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.pp-off { font-size: 14px; color: #B9B3DE; } .pp-off summary { cursor: pointer; padding: 6px 0; } .pp-off .pp-row { justify-content: space-between; padding: 4px 0; }
.pp-hero { display: flex; align-items: center; gap: 14px; } .pp-hero h2 { margin: 0; font-size: clamp(22px, 4.5vw, 30px); letter-spacing: -.01em; } .pp-av.big { width: 76px; height: 76px; font-size: 27px; } .pp-av.big i { width: 18px; height: 18px; } .pp-hero.on .pp-av i { background: #1DB954; }
.pp-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pp-b.wide { min-height: 76px; font-size: 27px; border-radius: 20px; } .pp-b.wide small { font-size: 13px; }
.pp-cred { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; } .pp-cred .pp-lab { grid-column: 1 / -1; } .pp-cred code { background: rgba(0,0,0,.32); border-radius: 10px; padding: 8px 10px; font-size: 14.5px; word-break: break-all; color: #F4F2FF; user-select: all; -webkit-user-select: all; }
.pp-hist { display: grid; gap: 4px; } .pp-hr { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: rgba(255,255,255,.04); border: 0; border-radius: 12px; padding: 8px 12px; color: inherit; font: inherit; text-align: left; width: 100%; cursor: pointer; } .pp-hr:disabled { cursor: default; opacity: 1; } .pp-hr:not(:disabled):hover { background: rgba(255,255,255,.09); }
.pp-hi { font-size: 18px; color: #7BE3A0; font-weight: 800; } .pp-hr.bad .pp-hi, .pp-hr.bad .pp-hs { color: #FF9A9C; } .pp-hn { display: grid; min-width: 0; } .pp-hn b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-hn small { color: #B9B3DE; font-size: 12.5px; } .pp-hs { font-size: 12.5px; color: #B9B3DE; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp830.page .pp-card { width: min(1180px, 100vw); }
@media (min-width: 900px) { .pp830.page .pp-two { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 28px; overflow: visible; align-items: start; } .pp830.page .pp-two.has-sel .pp-left { display: grid; } .pp830.page .pp-bk { display: none; } .pp830.page .pp-left { position: sticky; top: 12px; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 2px 4px 2px 2px; } .pp830.page .pp-right { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 22px; } }
/* the ring: top-left, can be tucked away or silenced */
.ring828.r831 { left: max(12px, env(safe-area-inset-left)); right: auto; top: max(12px, env(safe-area-inset-top)); transform: none; display: grid; grid-template-columns: 1fr; gap: 12px; width: min(380px, calc(100vw - 24px)); min-width: 0; z-index: 100001; box-shadow: 0 18px 50px rgba(0,0,0,.5); color: #fff; }
.r831-top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; } .r831 .r830-av { grid-row: auto; } .r831 .r828-who { display: grid; } .r831 .r828-who b { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .r831 .r828-who small { color: #C9BEFF; font-size: 13px; }
.r831-x { width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; cursor: pointer; } .r831 .r828-b .btn { flex: 1 1 auto; justify-content: center; } .r831-v { background: #5B3DF5 !important; }
.r831-mute { background: none; border: 1px solid rgba(255,255,255,.25); color: #D9D2FF; border-radius: 999px; min-height: 38px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .r831-mute:disabled { opacity: .6; }
.r831-pill { display: none; border: 0; background: #1DB954; color: #fff; font: inherit; font-weight: 800; border-radius: 999px; padding: 10px 16px; cursor: pointer; animation: r830ring 1.2s ease-out infinite; }
.ring828.r831.mini { background: none; border: 0; box-shadow: none; padding: 0; width: auto; } .ring828.r831.mini > :not(.r831-pill) { display: none; } .ring828.r831.mini .r831-pill { display: block; }
@media (max-width: 520px) { .ring828.r831 { left: 8px; right: 8px; width: auto; } .ring828.r831.mini { right: auto; } }
/* in the call window */
.c831-warn { display: block; width: 100%; border: 0; background: #B42318; color: #fff; font: inherit; font-weight: 700; font-size: 13.5px; padding: 9px 12px; cursor: pointer; text-align: left; } .c831-warn.tap { background: #5B3DF5; } .c831-au { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.call828.pre .c828-ctl { justify-content: center; }
.c831-help h2 { margin: 0 0 8px; } .c831-help ol { padding-left: 20px; line-height: 1.55; } .c831-help p { margin: 6px 0; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .r831-pill { animation: none; } }
/* ═══ end v8.31 ═══ */
.pp-hero h2, .pp830 h1, .pp830 h2 { color: #fff; }
/* ═══ v8.32 · 🎚 THE CLEAR VOICE — compact call book (everything on one screen), voice level bars, audio recording ═══ */
.pp830, body.p830 { font-family: Inter, 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; }
.pp-h { padding: calc(8px + env(safe-area-inset-top)) 14px 8px; } .pp-h b { font-size: 17px; } .pp-x, .pp-back { height: 34px; min-width: 34px; border-radius: 10px; font-size: 14px; }
.pp-two { padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); gap: 12px; } .pp-left, .pp-right { gap: 8px; }
.pp-in { min-height: 38px; border-radius: 10px; padding: 6px 10px; font-size: 15px; } .pp-btn { min-height: 38px; border-radius: 10px; padding: 6px 12px; font-size: 13.5px; } .pp-btn.sm { min-height: 32px; padding: 4px 9px; font-size: 12.5px; border-radius: 9px; }
.pp-list { gap: 5px; } .pp-c { border-radius: 14px; padding: 3px 5px 3px 3px; gap: 6px; } .pp-who { padding: 4px 5px; gap: 9px; border-radius: 11px; } .pp-av { width: 38px; height: 38px; font-size: 14px; } .pp-av i { width: 11px; height: 11px; border-width: 2px; }
.pp-n b { font-size: 14.5px; } .pp-n small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-b { min-width: 46px; min-height: 42px; border-radius: 12px; font-size: 17px; padding: 3px 8px; } .pp-b small { font-size: 9.5px; }
.pp-all { padding: 6px 8px 6px 12px; border-radius: 12px; font-size: 13.5px; } .pp-all span { min-width: 90px; } .pp-ord { font-size: 11.5px; } .pp-lab { font-size: 10.5px; }
.pp-h1 { font-size: clamp(20px, 3vw, 26px); margin: 0; } .pp-sub { font-size: 13px; line-height: 1.4; } .pp-unlock { padding: 8px 12px; font-size: 13px; border-radius: 11px; } .pp-missed { padding: 8px 10px; font-size: 13px; border-radius: 11px; }
.pp-tiles { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; } .pp-t { min-height: 0; padding: 10px 12px; border-radius: 14px; font-size: 22px; grid-template-columns: auto 1fr; align-items: center; gap: 8px; } .pp-t b { font-size: 13.5px; }
/* a person: avatar · name · call buttons · place — one row */
.pp-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; } .pp-hero h2 { font-size: clamp(18px, 2.4vw, 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-hn2 { min-width: 0; } .pp-hn2 .pp-sub { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-av.big { width: 52px; height: 52px; font-size: 19px; } .pp-av.big i { width: 14px; height: 14px; }
.pp-cta { display: flex; gap: 8px; grid-template-columns: none; } .pp-b.wide { min-height: 50px; min-width: 84px; font-size: 20px; border-radius: 14px; padding: 4px 14px; } .pp-b.wide small { font-size: 11px; }
.pp-mv { display: grid; gap: 4px; } .pp-ic { width: 32px; height: 24px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-size: 12px; cursor: pointer; padding: 0; font-family: inherit; } .pp-ic:hover { background: rgba(255,255,255,.18); } .pp-ic:focus-visible { outline: 3px solid #FFD166; outline-offset: 1px; }
.pp-g { padding: 10px; gap: 8px; border-radius: 14px; } .pp-creds { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; } .pp-f { display: grid; gap: 3px; min-width: 0; } .pp-f > span { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #9A94C4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-f > div { display: flex; gap: 4px; min-width: 0; } .pp-f .pp-in { flex: 1 1 auto; min-width: 0; width: 100%; min-height: 34px; font: 13.5px ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(0,0,0,.3); } .pp-f .pp-in[readonly] { color: #D9D2FF; } .pp-f .pp-ic { width: 34px; height: 34px; font-size: 15px; flex: none; }
.pp-chip { min-height: 30px; padding: 2px 9px; font-size: 12px; } .pp-row { gap: 5px; }
.pp-hr { padding: 5px 10px; border-radius: 9px; gap: 8px; } .pp-hn { grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; display: grid; } .pp-hn b { font-size: 13.5px; } .pp-hn small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-hi { font-size: 15px; } .pp-hist { gap: 3px; }
/* laptop / desktop: nothing scrolls but the two lists */
@media (min-width: 900px) { .pp830.page .pp-card { height: 100dvh; min-height: 0; overflow: hidden; } .pp830.page .pp-two { overflow: hidden; align-items: stretch; min-height: 0; padding-bottom: 14px; } .pp830.page .pp-left { position: static; max-height: none; min-height: 0; overflow-y: auto; align-content: start; } .pp830.page .pp-right { min-height: 0; overflow: hidden; padding: 16px; border-radius: 18px; display: flex; flex-direction: column; gap: 10px; } .pp830.page .pp-right > * { flex: none; } .pp830.page .pp-right .pp-hist { flex: 1 1 auto; min-height: 60px; overflow-y: auto; align-content: start; } }
@media (max-width: 899px) { .pp-creds { grid-template-columns: 1fr 1fr; } .pp-creds .pp-f:first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .pp-hero { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; } .pp-cta { grid-column: 1 / -1; grid-row: 2; } .pp-cta .pp-b.wide { flex: 1; } .pp-mv { grid-row: 1; grid-column: 3; grid-auto-flow: column; } .pp-c { grid-template-columns: minmax(0, 1fr) auto auto; } }
/* the call window: voice level (only you see it), tighter buttons */
.vu832 { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; margin-left: 8px; vertical-align: middle; } .vu832 i { width: 4px; border-radius: 1px; background: rgba(255,255,255,.22); height: 35%; transition: background .08s; } .vu832 i:nth-child(2) { height: 45%; } .vu832 i:nth-child(3) { height: 55%; } .vu832 i:nth-child(4) { height: 65%; } .vu832 i:nth-child(5) { height: 75%; } .vu832 i:nth-child(6) { height: 85%; } .vu832 i:nth-child(7) { height: 93%; } .vu832 i:nth-child(8) { height: 100%; }
.vu832 i.on { background: #2EE27A; } .vu832 i.on:nth-child(7) { background: #FFD166; } .vu832 i.on:nth-child(8) { background: #FF5A5F; } .vu832t { font-size: 11px; font-weight: 700; margin-left: 6px; opacity: .9; white-space: nowrap; } .vu832t.low { color: #FFD166; } .vu832t.hot { color: #FF9A9C; } .vu832t.ok { color: #7BE3A0; }
.c828-ctl button { min-width: 58px; min-height: 50px; padding: 5px 8px 4px; font-size: 19px; border-radius: 14px; } .c828-ctl button small { font-size: 10px; }
.rec832 { display: grid; gap: 10px; } .rec832 button { text-align: left; display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid #D9D5EE; background: #fff; cursor: pointer; font: inherit; } .rec832 button b { font-size: 16px; } .rec832 button small { color: #6B6884; } .rec832 button:hover { border-color: #5B3DF5; }
/* ═══ end v8.32 ═══ */