:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --wp:linear-gradient(180deg,#d6f4f8 0%,#aae6f0 24%,#83d3e6 52%,#63c0d9 78%,#56b6c9 100%); --scene:1; --rayop:1;
  --frame:linear-gradient(rgba(190,238,250,.9),rgba(118,206,230,.86) 62%,rgba(130,218,210,.86));
  --edge:rgba(5,55,105,.62); --shine:rgba(255,255,255,.75);
  --tool:linear-gradient(#fbfaf3 0%,#cfeaf1 60%,#d2efdd 100%); --body:#f4f1e7;
  --ink:#0f2c40; --soft:#54798d; --link:#0668aa;
  --select:#d9eff1; --select-edge:#8fcadb; --input:#fbf9f1; --banner:#fff8c9;
  --title:#06304f; --glow:rgba(255,255,255,.95);
  --taskbar:linear-gradient(rgba(228,248,252,.7),rgba(78,180,204,.8));
  --floorh:min(18vh,158px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --wp:linear-gradient(180deg,#0b5a8f 0%,#08427a 40%,#052e5c 75%,#06485a 100%); --scene:1; --rayop:.5;
    --frame:linear-gradient(rgba(32,72,118,.86),rgba(12,36,66,.9));
    --edge:rgba(0,10,25,.8); --shine:rgba(140,200,255,.3);
    --tool:linear-gradient(#2b5889,#173a62); --body:#0f2237;
    --ink:#e4f1fb; --soft:#8fb0ca; --link:#7cc4ff;
    --select:#1d4b78; --select-edge:#4b93cf; --input:#0a1a2c; --banner:#4a4420;
    --title:#e8f4ff; --glow:transparent;
    --taskbar:linear-gradient(rgba(42,84,136,.75),rgba(8,24,46,.88));
  }
}
:root[data-theme="dark"]{
  --wp:linear-gradient(180deg,#0b5a8f 0%,#08427a 40%,#052e5c 75%,#06485a 100%); --scene:1; --rayop:.5;
  --frame:linear-gradient(rgba(32,72,118,.86),rgba(12,36,66,.9));
  --edge:rgba(0,10,25,.8); --shine:rgba(140,200,255,.3);
  --tool:linear-gradient(#2b5889,#173a62); --body:#0f2237;
  --ink:#e4f1fb; --soft:#8fb0ca; --link:#7cc4ff;
  --select:#1d4b78; --select-edge:#4b93cf; --input:#0a1a2c; --banner:#4a4420;
  --title:#e8f4ff; --glow:transparent;
  --taskbar:linear-gradient(rgba(42,84,136,.75),rgba(8,24,46,.88));
}
:root[data-theme="pink"]{
  --wp:radial-gradient(ellipse 70% 30% at 15% 100%,rgba(255,240,250,.55),transparent 65%),linear-gradient(160deg,#6b2680 0%,#c44fa3 40%,#ff9ec9 72%,#ffe4f1 100%); --scene:0; --rayop:0;
  --frame:linear-gradient(rgba(252,208,238,.86),rgba(236,164,210,.82));
  --edge:rgba(110,20,80,.55); --shine:rgba(255,255,255,.75);
  --tool:linear-gradient(#fff7fd,#f6d0eb); --body:#ffffff;
  --ink:#3a1a33; --soft:#86687d; --link:#a2287f;
  --select:#fde3f4; --select-edge:#e6a5d3; --input:#ffffff; --banner:#fff8c9;
  --title:#4a1440; --glow:rgba(255,255,255,.95);
  --taskbar:linear-gradient(rgba(255,228,246,.65),rgba(190,90,160,.75));
}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;height:100%;display:flex;flex-direction:column;overflow:hidden;color:var(--ink);
  font:14px/1.45 "Open Sans","Segoe UI",Frutiger,"Trebuchet MS",system-ui,sans-serif;
  background:var(--wp)
}
.scene{position:fixed;inset:0;pointer-events:none;opacity:var(--scene)}
.rays{position:fixed;left:-10%;right:-10%;top:0;height:75%;pointer-events:none;opacity:var(--rayop);
  background:repeating-linear-gradient(105deg,transparent 0 70px,rgba(255,255,255,.2) 110px,transparent 150px,transparent 230px,rgba(255,255,255,.12) 262px,transparent 300px);
  -webkit-mask-image:linear-gradient(#000,transparent 90%);mask-image:linear-gradient(#000,transparent 90%);animation:rays 16s ease-in-out infinite alternate}
@keyframes rays{from{transform:translateX(-50px)}to{transform:translateX(50px)}}
.floor{position:fixed;left:0;right:0;bottom:0;height:var(--floorh);pointer-events:none}
.fw{position:absolute;left:0;width:200%;height:100%;display:block;animation:waveflow var(--gt,40s) linear infinite}
.fw.f3{bottom:7%;fill:url(#gGrassBack);opacity:.8;--gt:48s}
.fw.f2{bottom:0;fill:url(#gGrassMid);--gt:38s;animation-direction:reverse}
.fw.f1{bottom:-11%;fill:url(#gGrassFront);--gt:56s}
.fw.fg{bottom:-11%;fill:url(#gGrassGloss);--gt:56s}
.plant{position:fixed;bottom:calc(var(--floorh) - 58px);width:clamp(84px,11vw,150px);aspect-ratio:2/5;transform-origin:50% 100%;animation:sway 7s ease-in-out infinite alternate}
.plant.l{left:7vw}.plant.r{right:7vw;animation-delay:-3s}
@keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.fish{position:fixed;left:-90px;top:var(--y);width:var(--w);animation:swim var(--t) linear infinite;animation-delay:var(--d)}
.fish svg,.sfish svg{display:block;width:100%;aspect-ratio:2/1}
.fish.rev{left:auto;right:-90px;animation-name:swimrev}
.fish>svg,.sfish>svg{transform:scaleX(-1)}
.fish.rev>svg,.sfish.rev>svg{transform:none}
@keyframes swim{0%{transform:translate(0,0)}25%{transform:translate(30vw,-12px)}50%{transform:translate(58vw,8px)}75%{transform:translate(86vw,-10px)}100%{transform:translate(120vw,0)}}
@keyframes swimrev{0%{transform:translate(0,0)}25%{transform:translate(-30vw,10px)}50%{transform:translate(-58vw,-8px)}75%{transform:translate(-86vw,10px)}100%{transform:translate(-120vw,0)}}
.bubbles span,.sbub{border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.98) 0 7%,rgba(255,255,255,0) 8%),radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 56%,rgba(255,255,255,.4) 70%,rgba(255,255,255,.75) 77%,rgba(170,240,255,.25) 84%,rgba(255,255,255,0) 86%),radial-gradient(circle at 72% 82%,rgba(130,255,215,.5),rgba(130,255,215,0) 46%),radial-gradient(circle at 50% 50%,rgba(175,238,255,.14),rgba(110,205,255,.2));
  box-shadow:inset 0 0 10px rgba(255,255,255,.45),0 0 8px rgba(170,238,255,.35)}
.bubbles span{position:fixed;left:var(--x);bottom:-50px;width:var(--s);height:var(--s);animation:rise var(--t) linear infinite;animation-delay:var(--d)}
.sbub{position:absolute;left:var(--x);bottom:-8%;width:var(--s);height:var(--s);animation:risestage var(--t) linear infinite;animation-delay:var(--d)}
@keyframes risestage{0%{bottom:-8%;opacity:0}10%{opacity:.95}100%{bottom:104%;opacity:.3}}
@keyframes rise{0%{transform:translate(0,0);opacity:0}8%{opacity:.95}100%{transform:translate(var(--dx,24px),-115vh);opacity:.2}}
.lamp{position:fixed;bottom:calc(var(--floorh) - 46px);width:clamp(48px,4.6vw,72px);display:none}
.lamp.l{left:1.5vw}.lamp.r{right:1.5vw}
@media (min-width:1100px){.lamp{display:block}}
.wax{animation:wax 9s ease-in-out infinite alternate}
.wax.b{animation-duration:12s;animation-delay:-4s}
@keyframes wax{from{transform:translateY(0)}to{transform:translateY(-78px)}}
/* aquarium call stage + header scene */
.sfish{position:absolute;top:var(--y);left:-15%;width:var(--w);animation:swimstage var(--t) linear infinite;animation-delay:var(--d)}
.sfish.rev{left:auto;right:-15%;animation-name:swimstagerev}
@keyframes swimstage{from{left:-15%}to{left:110%}}
@keyframes swimstagerev{from{right:-15%}to{right:110%}}
.partner{position:relative;z-index:1}
.me .minifish{top:34px}
.minifish{position:absolute;right:14px;top:10px;width:36px;aspect-ratio:2/1;animation:nib 7s ease-in-out infinite}
/* Out, turn, back towards the name, turn again - never tail-first. */
@keyframes nib{
  0%  {transform:translateX(-14px) scaleX(-1)}
  45% {transform:translateX(0)     scaleX(-1)}
  50% {transform:translateX(0)     scaleX(1)}
  95% {transform:translateX(-14px) scaleX(1)}
  100%{transform:translateX(-14px) scaleX(-1)}
}
/* Built around --dx/--dy so a nudge rattles a window where it stands, rather
   than snapping a window you have dragged back to where it started. */
@keyframes shake{
  0%,100%{transform:translate(var(--dx,0px),var(--dy,0px))}
  15%{transform:translate(calc(var(--dx,0px) - 9px),calc(var(--dy,0px) + 3px))}
  30%{transform:translate(calc(var(--dx,0px) + 8px),calc(var(--dy,0px) - 4px))}
  45%{transform:translate(calc(var(--dx,0px) - 7px),calc(var(--dy,0px) - 3px))}
  60%{transform:translate(calc(var(--dx,0px) + 6px),calc(var(--dy,0px) + 4px))}
  75%{transform:translate(calc(var(--dx,0px) - 4px),calc(var(--dy,0px) + 2px))}}
.shake{animation:shake .55s}
@media (prefers-reduced-motion:reduce){.bubbles span,.sbub,.rays,.fish,.sfish,.plant,.wax,.minifish,.wv,.fw,.surface svg,.livedot,.shake{animation:none}}

/* ---------- desktop + windows ---------- */
.desk{position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:center;gap:22px;padding:22px}
.win{
  display:flex;flex-direction:column;padding:0 7px 7px;border-radius:8px;background:var(--frame);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px var(--shine),0 10px 34px rgba(0,30,60,.5)
}
.contacts{width:320px;flex:none;height:min(680px,100%)}
.conv{flex:1;min-width:0;max-width:780px;height:min(640px,100%)}
.tbar{display:flex;align-items:center;gap:8px;height:30px;flex:none;font-size:13px;color:var(--title);text-shadow:0 0 7px var(--glow),0 0 2px var(--glow)}
.tbar .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic{width:20px;height:18px;flex:none}
.caption{margin-left:auto;align-self:flex-start;margin-right:-7px;margin-top:-1px;display:flex;gap:1px}
.caption span,.caption .cbtn{display:grid;place-items:center;width:28px;height:19px;font-size:11px;line-height:1;font-family:inherit;cursor:pointer;color:#123;text-shadow:none;border:1px solid var(--edge);border-top:0;background:linear-gradient(rgba(255,255,255,.85) 0 48%,rgba(255,255,255,.2) 50%),rgba(130,190,230,.75)}
.caption span:first-child{border-radius:0 0 0 4px}
.caption span.x,.caption .cbtn.x{width:44px;color:#fff;border-radius:0 0 4px 0;background:linear-gradient(rgba(255,255,255,.6) 0 48%,rgba(255,255,255,0) 50%),linear-gradient(#f0836f,#c2261a)}
.back{display:none;font:inherit;color:var(--title);border:1px solid var(--edge);border-radius:5px;padding:1px 9px;cursor:pointer;background:linear-gradient(rgba(255,255,255,.8),rgba(190,225,248,.6))}
.inner{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--body);border:1px solid var(--edge);border-radius:3px;overflow:hidden}

/* display pictures with status frames */
.dp{--sz:40px;--c1:#bff294;--c2:#3fae2f;flex:none;width:var(--sz);height:var(--sz);padding:calc(var(--sz)*.09);border-radius:calc(var(--sz)*.2);
  background:linear-gradient(var(--c1),var(--c2));border:1px solid rgba(0,60,20,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 3px rgba(0,30,10,.35)}
.dp.busy{--c1:#ffb9ad;--c2:#d43a2a;border-color:rgba(90,10,0,.55)}
.dp.away{--c1:#ffe89e;--c2:#e0a41a;border-color:rgba(90,60,0,.55)}
.dp.off{--c1:#e4e8ec;--c2:#98a3ae;border-color:rgba(40,50,60,.5)}
.dp i{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:calc(var(--sz)*.12);overflow:hidden;font-style:normal;font-weight:700;color:#fff;font-size:calc(var(--sz)*.42);background:linear-gradient(135deg,#8fdcff,#1b6fd0)}
.dp i::after{content:"";position:absolute;left:0;right:0;top:0;height:46%;background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.04))}
.dp.p i{background:linear-gradient(135deg,#b4f5a0,#12996a)}
.dp i.bd{background:linear-gradient(#f2fbff,#b9dff5)}
.dp i.bd svg{width:82%;height:82%;margin-top:14%}
.dp.xl{--sz:84px}

/* glossy buttons */
.gbtn{--c1:#8fdcff;--c2:#1d8fd6;font-weight:600;font-size:13px;font-family:inherit;color:#fff;text-shadow:0 -1px 0 rgba(0,50,100,.55);padding:5px 15px;border-radius:999px;border:1px solid rgba(0,60,110,.65);cursor:pointer;
  background:linear-gradient(rgba(255,255,255,.85) 0,rgba(255,255,255,.4) 46%,rgba(255,255,255,0) 50%),radial-gradient(ellipse at 50% 125%,rgba(255,255,255,.6),rgba(255,255,255,0) 65%),linear-gradient(var(--c1),var(--c2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 -3px 6px rgba(0,60,120,.25),0 2px 5px rgba(0,50,100,.4)}
.gbtn.green{--c1:#b4f07a;--c2:#2f9e2a}
.gbtn.red{--c1:#ff9b8a;--c2:#cf2a1c}
.gbtn.off{filter:grayscale(.85) brightness(.92)}
.gbtn:hover{filter:brightness(1.08)}
.gbtn:active{transform:translateY(1px)}
button:focus-visible,input:focus-visible,.ct:focus-visible{outline:2px solid #fff;outline-offset:1px;box-shadow:0 0 0 4px #1a8fd8}
.lnk{background:none;border:0;padding:0;color:var(--link);text-decoration:underline;font:inherit;cursor:pointer}

/* ---------- contact list ---------- */
.me{position:relative;overflow:hidden;display:flex;gap:10px;align-items:center;padding:10px 10px 22px;background:repeating-linear-gradient(105deg,transparent 0 34px,rgba(255,255,255,.3) 52px,transparent 70px),var(--tool);border-bottom:1px solid var(--select-edge);flex:none}
.me .edit{position:absolute;right:10px;top:8px;z-index:2;padding:2px 8px;font-size:12px}
.me b{font-size:15px}.me small{display:block;color:var(--soft)}
.stat{color:var(--soft);font-weight:400}
.search{position:relative;margin:8px 10px 4px;flex:none}
.search input{width:100%;font:inherit;font-size:13px;color:var(--ink);padding:6px 8px 6px 28px;border-radius:4px;border:1px solid var(--select-edge);background:var(--input)}
.search span{position:absolute;left:8px;top:5px;font-size:13px}
.clist{flex:1;min-height:0;overflow:auto;padding:0 4px 6px}
.gh{display:flex;gap:6px;align-items:baseline;padding:8px 8px 3px;font-weight:600;color:var(--link);font-size:13px}
/* The group-chat row's wave avatar, sitting in the usual .dp frame. */
.dp.grouproom i{background:linear-gradient(135deg,#5cc3f5,#1b5fa8);font-size:calc(var(--sz)*.36);letter-spacing:.02em}
.gh em{font-style:normal;color:var(--soft);font-weight:400}
.ct{display:flex;gap:9px;align-items:center;width:100%;padding:4px 8px;border:1px solid transparent;border-radius:4px;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.ct:hover,.ct.sel{background:linear-gradient(rgba(255,255,255,.4),var(--select));border-color:var(--select-edge)}
.ct .nm{display:block;font-size:13.5px;line-height:1.25}.ct .nm small{color:var(--soft);font-size:12.5px}
.ct .pm{display:block;font-size:12px;color:var(--soft);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct .txt{min-width:0}
.ct .dot{flex:none;width:12px;height:12px;margin:0 4px 0 8px;border-radius:3px;background:linear-gradient(#bff294,#3fae2f);border:1px solid rgba(0,60,20,.5)}
.ct .dot.amber{background:linear-gradient(#ffe89e,#e0a41a)}
.news{flex:none;border-top:1px solid var(--select-edge);padding:8px 10px;background:var(--tool);font-size:12.5px}
.news b{display:block;margin-bottom:4px}
.news div{display:flex;gap:8px;align-items:center}
.thumb{flex:none;width:44px;height:32px;border-radius:3px;border:1px solid var(--edge);background:linear-gradient(135deg,#7be0ff,#1a8fc0 50%,#2fae5a)}

/* ---------- conversation ---------- */
.toolbar{display:flex;gap:2px;padding:4px 6px;background:var(--tool);border-bottom:1px solid var(--select-edge);overflow-x:auto;flex:none}
.tb{display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid transparent;border-radius:4px;background:none;color:var(--ink);font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.tb:hover{border-color:var(--select-edge);background:linear-gradient(rgba(255,255,255,.55),var(--select))}
.cbody{flex:1;min-height:0;display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:10px;padding:10px 12px 10px 10px}
.c-top{grid-column:1;grid-row:1/3}.c-me{grid-column:1;grid-row:3;align-self:end}
.chead{grid-column:2;grid-row:1;position:relative;overflow:hidden;padding:8px 12px 20px;margin-bottom:8px;border:1px solid var(--select-edge);border-radius:6px;background:repeating-linear-gradient(105deg,transparent 0 30px,rgba(255,255,255,.3) 46px,transparent 62px),var(--tool)}
.chead b{font-size:19px;font-weight:600}.chead small{color:var(--soft);font-size:13px;margin-left:6px}
.log{grid-column:2;grid-row:2;min-height:0;overflow:auto;background:var(--input);border:1px solid var(--select-edge);border-radius:3px;padding:8px 12px}
.grp{padding:5px 0 7px;border-bottom:1px solid;border-image:linear-gradient(90deg,var(--select-edge),transparent) 1}
.says{font-size:12.5px;color:var(--soft)}
.b{position:relative;padding-left:14px;margin:1px 0 0 4px}
.b::before{content:"•";position:absolute;left:0;color:var(--soft)}
.sys{font-size:13px;color:var(--soft);font-style:italic;margin:8px 0}
.invite{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin:8px 0;font-size:13px}
.last{font-size:12px;color:var(--soft);padding-top:6px}
.comp{grid-column:2;grid-row:3;position:relative;margin-top:8px}
.comp::before,.comp::after{content:"";position:absolute;top:14px;border:6px solid transparent}
.comp::before{left:-13px;border-right-color:var(--select-edge)}
.comp::after{left:-12px;border-right-color:var(--input)}
.inputbox{display:flex;background:var(--input);border:1px solid var(--select-edge);border-radius:3px}
.inputbox input{flex:1;min-width:0;font:inherit;color:var(--ink);background:none;border:0;padding:9px 10px}
.emobar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:4px 0 0}
.emobar .tb{padding:3px 7px}
.emobar .gbtn{margin-left:auto}

/* call view */
.callwrap{flex:1;min-height:0;display:flex;flex-direction:column}
.stage{position:relative;flex:1;min-height:0;margin:10px;border-radius:5px;border:1px solid var(--edge);overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(to top,#e9dcbc 0 8%,#fbf6e9 8% 9.5%,transparent 9.5%),repeating-linear-gradient(105deg,transparent 0 50px,rgba(255,255,255,.16) 80px,transparent 110px),linear-gradient(180deg,#a6ebf7,#4fb2d6 62%,#2f93bd);box-shadow:inset 0 0 40px rgba(0,30,70,.5)}
.stage::after{content:"";position:absolute;inset:0 0 55% 0;background:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,0));pointer-events:none}
.tile-label{position:absolute;left:12px;bottom:12px;z-index:2;padding:3px 11px;border-radius:999px;color:#fff;font-weight:600;background:rgba(8,58,92,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-shadow:0 1px 2px rgba(0,0,0,.45)}
.self{position:absolute;right:12px;bottom:12px;z-index:2;width:130px;height:88px;border-radius:5px;border:2px solid #fff;background:radial-gradient(circle at 50% 30%,#ffd9a0,#e08a3a);display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.screen{display:none;position:absolute;inset:10px;border-radius:4px;overflow:hidden;background:#05070d;border:1px solid var(--edge)}
.screen .vid{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#3b2a66,#0a0716 75%);display:grid;place-items:center}
.screen .play{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:26px;padding-left:5px;border:2px solid rgba(255,255,255,.7);background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.08))}
.screen .prog{position:absolute;left:14px;right:14px;bottom:14px;height:6px;border-radius:3px;background:rgba(255,255,255,.25)}
.screen .prog::after{content:"";display:block;width:38%;height:100%;border-radius:3px;background:linear-gradient(#b4f07a,#2f9e2a)}
.screen .badge{position:absolute;left:10px;top:10px;z-index:2}
.sharing .screen{display:block}
.sharing .partner{position:absolute;top:12px;right:12px;z-index:3}
.sharing .partner .dp{--sz:64px}
.sharing .self,.sharing .tile-label{display:none}
.callbar{display:flex;align-items:center;gap:10px;flex:none;padding:7px 10px 7px 12px;font-size:13px;
  background:var(--tool);border-bottom:1px solid var(--select-edge)}
.callbar b{font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.callbar .tm{flex:none;color:var(--soft);font-variant-numeric:tabular-nums}
.callbar .gbtn{flex:none;margin-left:auto;padding:4px 13px;font-size:12px}
.livedot{flex:none;width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,70,20,.5);
  background:radial-gradient(circle at 34% 26%,#fff 0 20%,rgba(255,255,255,0) 21%),linear-gradient(#b4f07a,#2f9e2a);
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(60,190,60,.5)}55%{box-shadow:0 0 0 5px rgba(60,190,60,0)}}
.controls{display:flex;justify-content:center;gap:16px;padding:2px 10px 12px;flex:none;flex-wrap:wrap}
.ctl{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--soft)}
.ctl .gbtn{width:50px;height:50px;border-radius:50%;padding:0;font-size:19px}
.ctl .gbtn.wide{width:74px;border-radius:25px}

/* ---------- personalise dialog ---------- */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(6,48,79,.38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dlg{width:min(680px,100%);max-height:100%}
.dlgbody{padding:12px;gap:12px;overflow:hidden}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1;min-height:0;overflow:auto}
.card{border:1px solid var(--select-edge);border-radius:6px;padding:10px;background:var(--input)}
.card h3{margin:0 0 8px;font-size:14px;font-weight:600}
.prev{width:100%;aspect-ratio:2/1;display:block;margin-bottom:10px;transform:scaleX(-1)}
.card label{display:block;font-size:12px;color:var(--soft);margin-bottom:9px}
.card input[type=text]{display:block;width:100%;margin-top:3px;font:inherit;font-size:13px;color:var(--ink);
  padding:6px 8px;border-radius:4px;border:1px solid var(--select-edge);background:var(--body)}
.pickrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px}
.pickrow>.lb{flex:none;width:48px;font-size:12px;color:var(--soft)}
.pk{width:44px;height:28px;padding:0;border:1px solid var(--select-edge);border-radius:5px;
  background:var(--body);cursor:pointer;display:grid;place-items:center}
.pk svg{width:40px;aspect-ratio:2/1;transform:scaleX(-1)}
.pk.on{border-color:#2f9e2a;box-shadow:0 0 0 2px rgba(60,190,60,.4)}
.sw{width:25px;height:25px;border-radius:50%;padding:0;cursor:pointer;border:1px solid rgba(0,40,70,.4);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.75)}
.sw.on{outline:2px solid #2f9e2a;outline-offset:2px}
.card input[type=color]{width:34px;height:25px;padding:0;border:1px solid var(--select-edge);
  border-radius:5px;background:var(--body);cursor:pointer}
.dlgfoot{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;flex:none;
  padding-top:10px;border-top:1px solid var(--select-edge)}
.dlgfoot .hint{margin-right:auto;font-size:12px;color:var(--soft)}
@media (max-width:640px){.cards{grid-template-columns:1fr;align-content:start}
  .dlgfoot .hint{display:none}
  .dlg{width:100%}}

/* ---------- taskbar ---------- */
.taskbar{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:8px;height:44px;padding:0 8px;background:var(--taskbar);border-top:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--shine);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.start{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,60,20,.6);position:relative;background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.4),transparent 60%),linear-gradient(#b4f07a,#2f9e2a);box-shadow:0 1px 4px rgba(0,30,10,.5)}
.start::after{content:"";position:absolute;top:2px;left:15%;width:70%;height:46%;border-radius:50%;background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.08))}
.task{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:4px;border:1px solid var(--edge);color:var(--title);font:inherit;font-size:13px;cursor:pointer;background:linear-gradient(rgba(255,255,255,.55) 0 48%,rgba(255,255,255,.15) 50%),rgba(120,180,225,.4)}
.task.on{background:linear-gradient(rgba(255,255,255,.75) 0 48%,rgba(255,255,255,.35) 50%),rgba(150,205,240,.7);box-shadow:inset 0 -2px 0 #fff}
.tray{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--title);font-size:12px}
.swatch{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.45);cursor:pointer;padding:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.swatch.s1{background:linear-gradient(#a8e0ff,#2a86c9)}.swatch.s2{background:linear-gradient(#ffc4e6,#c04a9c)}.swatch.s3{background:linear-gradient(#3f6ea5,#0a1a2e)}

/* glass + liquid */
.win{position:relative}
.win::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(115deg,rgba(255,255,255,.5) 0 22%,rgba(255,255,255,0) 22.2% 34%,rgba(255,255,255,.18) 34.2% 44%,rgba(255,255,255,0) 44.2%);
  -webkit-mask-image:linear-gradient(#000,transparent 60%);mask-image:linear-gradient(#000,transparent 60%)}
.tbar,.inner{position:relative;z-index:1}
.dp{position:relative}
.dp::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.55) 0 28%,transparent 29%)}
/* A message you haven't opened yet, on a contact or group's avatar. */
.dp .unread,.dot .unread{position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#ffd9a0,#ff8a1f 60%,#e0691a);
  border:2px solid var(--body);box-shadow:0 1px 2px rgba(0,30,10,.4);z-index:1}
.wv{position:absolute;left:0;width:200%;height:16px;bottom:0;animation:waveflow 9s linear infinite}
.wv.b{bottom:5px;fill:rgba(70,196,232,.78);animation-duration:15s;animation-direction:reverse}
.wv.f{fill:#6fd04e}
@keyframes waveflow{to{transform:translateX(-50%)}}
.chead b,.chead small,.me>div{position:relative;z-index:1}
.surface{position:absolute;left:0;right:0;top:0;height:50px;overflow:hidden;pointer-events:none}
.surface svg{position:absolute;left:0;top:0;width:200%;height:32px;fill:rgba(255,255,255,.5);animation:waveflow 24s linear infinite}
.surface svg+svg{top:12px;fill:rgba(255,255,255,.26);animation-duration:34s;animation-direction:reverse}
.stage .surface{height:40px;z-index:0}
.tb .g{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:11px;border:1px solid rgba(0,60,110,.55);
  background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.95) 0 14%,rgba(255,255,255,0) 15%),linear-gradient(#8fe4ff,#1d8fd6);box-shadow:inset 0 -3px 5px rgba(0,60,120,.25),0 1px 2px rgba(0,40,80,.3)}
.tb .g.gr{border-color:rgba(0,70,20,.55);background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.95) 0 14%,rgba(255,255,255,0) 15%),linear-gradient(#b4f07a,#2f9e2a)}
@media (max-width:860px){
  .desk{padding:6px 6px 0;gap:0}
  .desk .win{width:100%;max-width:none;height:100%}
  .desk[data-view="list"] .conv{display:none}
  .desk:not([data-view="list"]) .contacts{display:none}
  .caption{display:none}.back{display:block}
  .cbody{grid-template-columns:64px minmax(0,1fr);column-gap:8px;padding:8px}
  .dp.xl{--sz:56px}
  .self{width:96px;height:66px}
  .tray .clock{display:none}
}

/* ==========================================================================
   Additions for the live app: the sign-in page, real video, connection state.
   Everything above this line is the approved Sunroom design.
   ========================================================================== */

/* ---- sign-in ---- */
.signin{width:min(380px,100%)}
.signin .inner{padding:0}
.hero{position:relative;overflow:hidden;padding:18px 16px 24px;text-align:center;
  background:repeating-linear-gradient(105deg,transparent 0 34px,rgba(255,255,255,.3) 52px,transparent 70px),var(--tool);
  border-bottom:1px solid var(--select-edge)}
.hero svg.mark{width:96px;height:64px;display:block;margin:0 auto 4px}
.hero h1{margin:0;font-size:22px;font-weight:700;letter-spacing:.2px}
.hero p{margin:2px 0 0;font-size:13px;color:var(--soft)}
.hero .minifish{top:auto;bottom:22px;right:18px}
form.auth{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
form.auth label{display:block;font-size:12px;color:var(--soft)}
form.auth input{display:block;width:100%;margin-top:3px;font:inherit;font-size:14px;color:var(--ink);
  padding:8px 10px;border-radius:4px;border:1px solid var(--select-edge);background:var(--input)}
form.auth .gbtn{width:100%;padding:9px;font-size:14px}
.note{font-size:12px;color:var(--soft);text-align:center;margin:0}
.err{font-size:13px;padding:8px 10px;border-radius:4px;border:1px solid #d8897c;
  background:#fdeeeb;color:#8f2418}
:root[data-theme="dark"] .err{background:#4a1f18;border-color:#8f4034;color:#ffd9d1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .err{background:#4a1f18;border-color:#8f4034;color:#ffd9d1}}
.busy{opacity:.6;pointer-events:none}

/* ---- live video ---- */
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#07293f;z-index:1}
.stage video:not(.live){display:none}
.self video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:3px;background:#07293f}
.self video:not(.live){display:none}
.stage.contain video#remoteVideo{object-fit:contain;background:#05131f}
.waiting{position:relative;z-index:2;display:grid;justify-items:center;gap:10px;text-align:center}
.waiting .lede{color:#fff;font-weight:600;text-shadow:0 1px 3px rgba(0,30,60,.7)}
.waiting .sub{color:rgba(255,255,255,.85);font-size:13px;text-shadow:0 1px 3px rgba(0,30,60,.7)}
.stage.hasvideo .waiting,.stage.hasvideo .sfish,.stage.hasvideo .sbub,.stage.hasvideo .surface{display:none}
.stage.hasvideo{background:#07293f}
.stage.hasvideo::after{display:none}

/* ---- incoming call ---- */
.ringing{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex:none;padding:8px 10px 8px 12px;font-size:13px;
  background:linear-gradient(rgba(255,255,255,.6) 0 50%,rgba(180,240,150,.45) 51%),var(--tool);
  border-bottom:1px solid var(--select-edge)}
.ringing b{font-weight:600}
.ringing .gbtn,.ringing .tbtn{flex:none}
.ringing .sp{margin-left:auto}

/* ---- connection state ---- */
.connbar{flex:none;display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:12.5px;
  border-top:1px solid var(--select-edge);background:var(--tool);color:var(--soft)}
.connbar .livedot{animation:none}
.connbar.bad{color:#8f2418}
.connbar.bad .livedot{background:linear-gradient(#ffb9ad,#d43a2a);border-color:rgba(90,10,0,.5)}
:root[data-theme="dark"] .connbar.bad{color:#ffb9ad}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .connbar.bad{color:#ffb9ad}}

/* ---- status dropdown ---- */
.statwrap{display:inline-block;position:relative}
.statsel{font:inherit;font-size:13px;color:var(--soft);border:1px solid transparent;border-radius:4px;
  background:transparent;cursor:pointer;padding:0 2px}
.statsel:hover{border-color:var(--select-edge);background:rgba(255,255,255,.45)}
:root[data-theme="dark"] .statsel:hover{background:rgba(120,180,230,.2)}

/* a message that failed to send */
.grp.pending{opacity:.55}
.sys.warn{color:#8f2418;font-style:normal}
:root[data-theme="dark"] .sys.warn{color:#ffb9ad}

/* A disabled tool should look it - the call buttons switch off when they're offline. */
.tb:disabled{opacity:.4;cursor:not-allowed}
.tb:disabled:hover{border-color:transparent;background:none}
.tb:disabled .g{filter:grayscale(1)}
.gbtn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.7)}
.gbtn:disabled:hover{filter:grayscale(.7)}

/* The quieter glass button - Decline, Cancel, "+ Sticky note" and friends.
   Places that need their own look (the cog, "Remove their account") override it. */
.tbtn{font:inherit;font-size:13px;color:var(--ink);padding:4px 12px;border-radius:4px;cursor:pointer;
  border:1px solid var(--select-edge);
  background:linear-gradient(rgba(255,255,255,.8) 0 48%,rgba(255,255,255,.3) 50%),var(--select);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(0,40,80,.2)}
.tbtn:hover{border-color:var(--link);filter:brightness(1.04)}
.tbtn:active{transform:translateY(1px)}
.tbtn:disabled{opacity:.5;cursor:not-allowed}
:where(:root[data-theme="dark"]) .tbtn{
  background:linear-gradient(rgba(255,255,255,.16) 0 48%,rgba(255,255,255,.04) 50%),var(--select);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.35)}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme="light"]):not([data-theme="pink"])) .tbtn{
  background:linear-gradient(rgba(255,255,255,.16) 0 48%,rgba(255,255,255,.04) 50%),var(--select);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.35)}}

/* On a phone the app windows fill the screen, but the sign-in card should not. */
@media (max-width:860px){
  .desk .win.signin{height:auto;max-height:100%;border-radius:8px}
  .desk:has(.signin){padding:16px}
}

/* "Remove their account" - only the person who set the room up sees this. */
.startover{margin-top:10px;padding-top:10px;border-top:1px solid var(--select-edge)}
.startover .tbtn{color:#8f2418;border-color:#d8897c}
:root[data-theme="dark"] .startover .tbtn{color:#ffb9ad;border-color:#8f4034}

/* ==========================================================================
   Window chrome that works, a window for shared screens, and attachments.
   ========================================================================== */

/* ---- the personalise button (a plain cog, like the old MSN one) ---- */
.me .edit{position:absolute;right:10px;top:8px;z-index:2;width:24px;height:24px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  border-radius:50%;cursor:pointer;
  border:1px solid rgba(0,70,20,.55);
  background:radial-gradient(circle at 32% 18%,rgba(255,255,255,.9) 0 16%,rgba(255,255,255,0) 17%),linear-gradient(#b4f07a,#2f9e2a);
  box-shadow:inset 0 -3px 5px rgba(0,60,120,.25),0 1px 2px rgba(0,40,80,.3)}
.me .edit .editico{font-size:14px}
.me .edit:hover{filter:brightness(1.08)}
.me .edit:active{transform:translateY(1px)}

/* ---- minimise and maximise ---- */
.win.mini{display:none}
#desk[data-maxed="conv"] .contacts{display:none}
#desk[data-maxed="conv"] .conv{max-width:none;width:100%}
#desk[data-maxed="contacts"] .conv{display:none}
#desk[data-maxed="contacts"] .contacts{width:100%;max-width:none}
.task .tic{font-size:13px;line-height:1}
@keyframes taskflash{0%,100%{background:linear-gradient(rgba(255,255,255,.55) 0 48%,rgba(255,255,255,.15) 50%),rgba(120,180,225,.4)}
  50%{background:linear-gradient(rgba(255,255,255,.8) 0 48%,rgba(255,255,255,.35) 50%),rgba(255,196,90,.85)}}
.task.flash{animation:taskflash 1.1s ease-in-out infinite}

/* ---- windows you can move around the desk ---- */
#desk .win{transform:translate(var(--dx,0px),var(--dy,0px))}
#desk .win>.tbar{cursor:grab;touch-action:none}
#desk .win.dragging>.tbar{cursor:grabbing}
#desk[data-maxed="conv"] .conv,#desk[data-maxed="contacts"] .contacts{transform:none}
#desk[data-maxed="conv"] .conv>.tbar,#desk[data-maxed="contacts"] .contacts>.tbar{cursor:default}

/* ---- a shared screen gets its own window ---- */
#desk .screenwin{position:absolute;inset:0;margin:auto;width:min(880px,92%);height:min(600px,86%);z-index:12}
#desk .screenwin.maxed{inset:10px;width:auto;height:auto;margin:0;transform:none}
#desk .screenwin.maxed>.tbar{cursor:default}
.screenwin .inner{background:#05131f}
.screenwin video{width:100%;height:100%;object-fit:contain;background:#05131f}
@media (max-width:860px){
  #desk .screenwin{width:96%;height:82%}
  /* One window at a time on a phone, so nothing is dragged out of reach. */
  #desk .win{transform:none}
  #desk .win>.tbar{cursor:default}
}

/* ---- photos and files in the log ---- */
.b.att{padding-left:0;margin:5px 0 3px 4px}
.b.att::before{content:none}
.att img{display:block;max-width:min(260px,100%);max-height:260px;border-radius:6px;
  border:1px solid var(--select-edge);background:var(--input)}
.att .chip{display:inline-flex;align-items:center;gap:9px;max-width:260px;padding:7px 11px;
  border:1px solid var(--select-edge);border-radius:6px;background:var(--input);
  color:inherit;text-decoration:none}
.att .chip:hover{border-color:var(--link)}
.att .fic{flex:none;font-size:17px}
.att .fmeta{min-width:0;line-height:1.3}
.att .fmeta b{display:block;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att .fmeta small{display:block;font-size:11.5px;color:var(--soft)}
.cbody.dropping .log{outline:2px dashed var(--link);outline-offset:-3px;background:var(--select)}

/* ---- the green orb, and the camera-and-sound menu it opens ---- */
.start{padding:0;cursor:pointer;display:grid;place-items:center}
.start svg{position:relative;z-index:1;width:22px;aspect-ratio:2/1;--fa:#fff;--fb:rgba(255,255,255,.7);
  transform:scaleX(-1);filter:drop-shadow(0 1px 1px rgba(0,50,20,.45))}
.start.on{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 1px 5px rgba(0,30,10,.55)}
.startmenu{position:fixed;left:8px;bottom:50px;z-index:60;width:min(330px,calc(100vw - 16px));
  padding:0 7px 7px;border-radius:10px;background:var(--frame);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px var(--shine),0 14px 40px rgba(0,30,60,.55)}
.smhead{display:flex;align-items:center;gap:8px;height:32px;font-size:13px;color:var(--title);
  text-shadow:0 0 7px var(--glow),0 0 2px var(--glow)}
.smhead .cbtn{margin-left:auto;margin-right:-7px;align-self:flex-start;margin-top:-1px}
.smbody{display:grid;gap:9px;padding:10px;border:1px solid var(--edge);border-radius:3px;background:var(--body)}
.smprev{position:relative;height:124px;border-radius:5px;overflow:hidden;display:grid;place-items:center;
  border:1px solid var(--select-edge);background:#07293f}
.smprev video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.smprev video:not(.live){display:none}
.smprevoff{position:absolute;font-size:12px;color:rgba(255,255,255,.75)}
.smprev video.live+.smprevoff{display:none}
.smrow{display:grid;gap:3px;font-size:12px;color:var(--soft)}
.smrow select{font:inherit;font-size:12.5px;color:var(--ink);width:100%;padding:5px 6px;
  border-radius:4px;border:1px solid var(--select-edge);background:var(--input)}
.smrow input[type=range]{width:100%;accent-color:#2f9e2a}
.smmeter{height:8px;border-radius:4px;overflow:hidden;border:1px solid var(--select-edge);background:var(--input)}
.smmeter span{display:block;width:0;height:100%;background:linear-gradient(90deg,#b4f07a,#2f9e2a);transition:width .07s linear}
.smnote{text-align:left;margin:0}

/* ---- your own display picture ---- */
.dp i.pic{font-size:0}
.dprow{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.card .dp.dppick{--sz:68px;flex:none}
.dpbtns{display:grid;gap:6px;min-width:0}
.dpbtns .tbtn{font-size:12px;padding:4px 10px;white-space:nowrap}
.smcheck{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--soft);line-height:1.3}
.smcheck input{margin:1px 0 0;accent-color:#2f9e2a;flex:none}

/* ---- the contact preview, and the three ways to reach them ---- */
.peek{flex:none;position:relative;overflow:hidden;padding:10px;border-top:1px solid var(--select-edge);
  background:repeating-linear-gradient(105deg,transparent 0 34px,rgba(255,255,255,.3) 52px,transparent 70px),var(--tool)}
.peekwho{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.peektxt{min-width:0;position:relative;z-index:1}
.peektxt b{display:block;font-size:15px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peektxt small{color:var(--soft)}
.peektxt .pm{display:block;font-size:12px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peek .minifish{top:8px}
.peek .dp.xl{--sz:52px}
.peekbtns{position:relative;z-index:1;display:grid;gap:6px}
.peekbtns .gbtn{width:100%;padding:6px 12px}
.peekprefs{margin-top:6px;grid-template-columns:1fr 1fr}
.peekprefs .tbtn{width:100%;padding:5px 8px;font-size:12px;text-align:center}
.peekprefs .tbtn.on{background:rgba(255,255,255,.6);font-weight:600}
/* A glossy red bubble instead of a plain x. */
.peekclose{position:absolute;top:7px;right:7px;z-index:2;width:15px;height:15px;padding:0;
  border-radius:50%;border:1px solid rgba(120,26,14,0.85);cursor:pointer;
  font-size:0;line-height:0;color:transparent;
  background:radial-gradient(circle at 34% 26%,#ffb3a6 0%,#f76b4e 38%,#d23a1d 72%,#8e1f0f 100%);
  box-shadow:0 1px 2px rgba(0,0,0,0.32),inset 0 1px 1px rgba(255,255,255,0.6);
  transition:filter .12s ease,transform .12s ease}
.peekclose:hover{filter:brightness(1.12) saturate(1.06)}
.peekclose:active{transform:scale(0.94);filter:brightness(0.92)}
.peekclose:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.ct-empty{padding:8px 12px;font-size:13px;color:var(--soft);font-style:italic}
.emobar .clip{font-size:15px}

/* ---- screensaver ---- */
#screensaver{position:fixed;inset:0;z-index:9999;cursor:none;overflow:hidden;
  background:radial-gradient(ellipse at 40% 35%,#0a1a3a 0%,#060e22 55%,#020810 100%)}
#screensaver canvas{position:absolute;inset:0;width:100%;height:100%}
.ss-label{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  color:rgba(180,220,255,0.45);font-size:13px;letter-spacing:0.04em;
  text-shadow:0 1px 8px rgba(0,80,180,0.6);pointer-events:none;white-space:nowrap}

/* ---- now-playing ticker ---- */
.ticker{display:block;max-width:100%;overflow:hidden;white-space:nowrap;margin-top:2px}
.tickerTrack{display:inline-block;font-size:11.5px;color:var(--link);padding-left:100%;
  animation:tickerscroll 11s linear infinite}
.tickerTrack:empty{animation:none}
.tickerTrack::before{content:"\1F3B5 "}
@keyframes tickerscroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.ct .ticker{margin-top:1px}
.ct .tickerTrack{font-size:11px}
.peektxt .ticker{margin-top:3px}

/* ---- now-playing settings in Personalise ---- */
.nowplaying-settings{margin-top:10px;border-top:1px solid var(--select-edge);padding-top:8px}
.nowplaying-settings summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--link);margin-bottom:8px;user-select:none}
.nowplaying-settings label{margin-top:8px}
/* The Spotify token shows as dots, but is a plain text box underneath: a real
   password box makes Chrome treat the whole app as a login page and autofill
   your saved name into the message box. */
.nowplaying-settings .f-spotify{-webkit-text-security:disc;text-security:disc}

/* ---- Cmd/Ctrl+K quick switcher ---- */
.palette{position:fixed;inset:0;z-index:70;display:flex;justify-content:center;padding:12vh 16px 16px;
  background:rgba(5,15,30,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.palbox{width:min(440px,100%);max-height:70vh;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;
  background:var(--frame);border:1px solid var(--edge);box-shadow:inset 0 0 0 1px var(--shine),0 20px 60px rgba(0,20,40,.55)}
.palbox input{font:inherit;font-size:15px;color:var(--ink);padding:12px 14px;border:0;border-bottom:1px solid var(--select-edge);
  background:var(--input);outline:none}
.pallist{overflow:auto;min-height:0;background:var(--body)}
.palitem{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;border:0;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer}
.palitem.on{background:linear-gradient(rgba(255,255,255,.4),var(--select))}
.palitem b{font-size:13.5px;font-weight:600}
.palitem small{display:block;color:var(--soft);font-size:11.5px}
.palempty{padding:16px 14px;font-size:13px;color:var(--soft);font-style:italic;text-align:center}
.palhint{padding:6px 14px;font-size:11px;color:var(--soft);background:var(--tool);border-top:1px solid var(--select-edge)}

/* ---- the Hangout window: notes, links, a watch list and a doodle ---- */
#desk .hangoutwin{position:absolute;inset:0;margin:auto;width:min(620px,92%);height:min(640px,88%);z-index:13}
#desk .hangoutwin.maxed{inset:10px;width:auto;height:auto;margin:0;transform:none}
.hgbody{display:flex;flex-direction:column;min-height:0;background:var(--input)}
.hgtabs{display:flex;gap:2px;padding:6px 6px 0;background:var(--tool);border-bottom:1px solid var(--select-edge);flex:none;overflow-x:auto}
.hgtab{font:inherit;font-size:12.5px;color:var(--ink);padding:7px 12px;border:1px solid transparent;border-bottom:0;
  border-radius:6px 6px 0 0;background:none;cursor:pointer;white-space:nowrap}
.hgtab:hover{background:rgba(255,255,255,.35)}
.hgtab.on{background:var(--input);border-color:var(--select-edge);font-weight:600}
.hgclear{margin:0 2px 4px auto;align-self:center;flex:none;font-size:11.5px;padding:3px 8px}
.hgpane{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px;overflow:auto}
.hgtoolbar{display:flex;align-items:center;gap:8px;flex:none;margin-bottom:8px;flex-wrap:wrap}
.hgform{display:flex;gap:6px;flex:none;margin-bottom:8px;flex-wrap:wrap}
.hgform input{flex:1;min-width:120px;font:inherit;font-size:13px;color:var(--ink);padding:6px 9px;
  border-radius:4px;border:1px solid var(--select-edge);background:var(--body)}
.hgform input#linkTitle{flex:0 1 140px}
.hglist{flex:1;min-height:0;overflow:auto;display:grid;gap:6px;align-content:start}

/* corkboard of sticky notes */
.corkboard{position:relative;flex:1;min-height:220px;border-radius:6px;overflow:auto;
  background:repeating-linear-gradient(45deg,#c99a5b 0 3px,#bf8d4c 3px 6px);
  border:1px solid var(--select-edge)}
:root[data-theme="dark"] .corkboard{
  background:repeating-linear-gradient(45deg,#5a3d24 0 3px,#4d3220 3px 6px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="pink"]) .corkboard{
  background:repeating-linear-gradient(45deg,#5a3d24 0 3px,#4d3220 3px 6px)}}
.stickynote{position:absolute;width:150px;min-height:110px;padding:9px;border-radius:2px;
  box-shadow:2px 4px 8px rgba(0,0,0,.28);cursor:grab;display:flex;flex-direction:column;gap:6px;
  transform:rotate(var(--rot,0deg))}
.stickynote.dragging{cursor:grabbing;z-index:5;box-shadow:4px 8px 16px rgba(0,0,0,.4)}
.stickynote textarea{flex:1;resize:none;border:0;background:transparent;font:inherit;font-size:12.5px;
  color:#3a2f10;line-height:1.35;min-height:60px;outline:none;font-family:inherit}
.stickynote .noteFoot{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:rgba(40,30,0,.55)}
.stickynote .noteDel{background:none;border:0;cursor:pointer;font-size:13px;color:rgba(40,30,0,.55);padding:0 2px}
.stickynote .noteDel:hover{color:#8f2418}

/* pasted links */
.linkchip{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--select-edge);
  border-radius:6px;background:var(--body)}
.linkchip a{flex:1;min-width:0;color:var(--link);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkchip a:hover{text-decoration:underline}
.linkchip small{display:block;color:var(--soft);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkchip .itemDel{flex:none;background:none;border:0;cursor:pointer;font-size:13px;color:var(--soft)}
.linkchip .itemDel:hover{color:#8f2418}

/* joint watch list */
.watchitem{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--select-edge);
  border-radius:6px;background:var(--body)}
.watchitem input[type=checkbox]{accent-color:#2f9e2a;flex:none}
.watchitem .watchtxt{flex:1;min-width:0}
.watchitem .watchtxt b{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.watchitem.done .watchtxt b{text-decoration:line-through;color:var(--soft)}
.watchitem a{font-size:11px;color:var(--link)}
.watchitem .itemDel{flex:none;background:none;border:0;cursor:pointer;font-size:13px;color:var(--soft)}
.watchitem .itemDel:hover{color:#8f2418}

/* shared doodle */
.swrow{display:flex;gap:5px}
.swrow .sw{width:22px;height:22px;border-radius:50%;padding:0;border:2px solid var(--select-edge);cursor:pointer}
.swrow .sw.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--body)}
#doodleWidth{width:100px;accent-color:#2f9e2a}
#doodleCanvas{flex:1;min-height:220px;width:100%;border-radius:6px;border:1px solid var(--select-edge);
  background:#fff;touch-action:none;cursor:crosshair}

@media (max-width:860px){
  #desk .hangoutwin{width:96%;height:86%}
}

/* ---- confetti and the Konami-code screen flip ---- */
.confetti-piece{position:fixed;top:-20px;z-index:9998;pointer-events:none;border-radius:2px;
  animation:confettifall linear forwards}
@keyframes confettifall{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  100%{transform:translateY(108vh) rotate(720deg);opacity:.15}
}
body.screen-flip{animation:screenflip .8s ease-in-out}
@keyframes screenflip{
  0%{filter:none;transform:none}
  20%{filter:contrast(2.2) saturate(3) brightness(1.1);transform:scale(1.01)}
  50%{filter:contrast(2.6) saturate(0.2) hue-rotate(90deg);transform:rotateY(180deg) scale(.98)}
  80%{filter:contrast(2.2) saturate(3) brightness(1.1);transform:rotateY(360deg) scale(1.01)}
  100%{filter:none;transform:none}
}
body.screen-flip{perspective:900px;transform-style:preserve-3d}

/* ==========================================================================
   Group chats: status dots, the GC picture, the group dialog and What's new.
   ========================================================================== */

/* the little status square on a group row: green all here, amber some, grey just you */
.ct .dot{position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(0,30,10,.3)}
.ct .dot.off,.gdrow .dot.off{background:linear-gradient(#e4e8ec,#98a3ae);border-color:rgba(40,50,60,.5)}
.dot .unread{top:-6px;right:-7px;width:10px;height:10px;border-width:1.5px}
.ct.room .txt{padding:2px 0}

/* "+ New" on the Groups heading */
.gh .ghact{margin-left:auto;font-size:12px;font-weight:400;text-decoration:none}
.gh .ghact:hover{text-decoration:underline}

/* What's new, at the foot of the contact list */
.news .newsrow{display:flex;gap:9px;align-items:center;width:100%;padding:0;border:0;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer}
.news .newstxt{min-width:0;line-height:1.35}
.news .newswho{color:var(--link);text-decoration:underline}
.news .newsrow:hover .newswho{text-decoration:none}
.thumb.gc{display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;
  background:linear-gradient(135deg,#5cc3f5,#1b5fa8);text-shadow:0 1px 1px rgba(0,40,80,.5)}

/* new group / add people / pick a group */
.groupdlg{width:min(420px,100%)}
.gdname{display:block;flex:none;font-size:12px;color:var(--soft)}
.gdname input{display:block;width:100%;margin-top:3px;font:inherit;font-size:13px;color:var(--ink);
  padding:6px 8px;border-radius:4px;border:1px solid var(--select-edge);background:var(--input)}
.gdlede{flex:none;margin:0;font-size:12.5px;color:var(--soft)}
.gdlist{flex:1;min-height:0;max-height:50vh;overflow:auto;display:grid;gap:2px;align-content:start;padding:4px;
  border:1px solid var(--select-edge);border-radius:4px;background:var(--input)}
.gdlist:empty::before{content:"No one else to add.";padding:8px;font-size:12.5px;font-style:italic;color:var(--soft)}
.gdrow{display:flex;align-items:center;gap:9px;padding:5px 8px;border:1px solid transparent;border-radius:4px;cursor:pointer}
.gdrow:hover{background:linear-gradient(rgba(255,255,255,.4),var(--select));border-color:var(--select-edge)}
.gdrow input{flex:none;margin:0;accent-color:#2f9e2a}
.gdrow.dis{opacity:.55;cursor:default}
.gdrow.dis:hover{background:none;border-color:transparent}
.gdrow .dot{flex:none;width:12px;height:12px;margin:0 9px;border-radius:3px;
  background:linear-gradient(#bff294,#3fae2f);border:1px solid rgba(0,60,20,.5)}
.gdrow .dot.amber{background:linear-gradient(#ffe89e,#e0a41a)}
.gdtxt{min-width:0}
.gdtxt b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gdtxt small{display:block;font-size:11.5px;color:var(--soft)}
.gdlede:empty{display:none}

/* ==========================================================================
   Several conversation windows at once. They share the conversation's spot
   on the desk, each new one cascaded down and right, and move independently.
   ========================================================================== */
.convstack{position:relative;flex:1;min-width:0;max-width:780px;height:min(640px,100%)}
.convstack:empty{display:none}
.convstack>.conv{position:absolute;inset:0;max-width:none;height:auto}
#desk[data-maxed="conv"] .convstack{max-width:none;width:100%}
#desk[data-maxed="contacts"] .convstack{display:none}
#desk .win.maxed:not(.screenwin):not(.hangoutwin){transform:none}
#desk .win.maxed>.tbar{cursor:default}

/* one taskbar button per conversation - they squeeze up rather than overflow */
.taskbar{overflow:hidden}
.task{min-width:0;flex-shrink:1;overflow:hidden}
.task .tl{min-width:0;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tray{flex:none}

/* Dragging a window shouldn't select its title, and no window can slide over
   the taskbar: the desk is its own layer, and the taskbar sits above it. */
.win>.tbar{-webkit-user-select:none;user-select:none}
.desk{z-index:1}

/* the dialogs move by their title bars too */
.modal .win{transform:translate(var(--dx,0px),var(--dy,0px))}
.modal .win>.tbar{cursor:grab;touch-action:none}
.modal .win.dragging>.tbar{cursor:grabbing}

@media (max-width:860px){
  /* a phone shows one conversation - the one in front */
  .convstack{width:100%;max-width:none;height:100%}
  .desk[data-view="list"] .convstack{display:none}
  .convstack>.conv:not(.front){display:none}
  .modal .win{transform:none}
  .taskbar{gap:5px;padding:0 6px}
  .task{padding:0 8px;gap:4px}
}

/* ---- download page ---- */
.getapp{width:min(420px,100%)}
.dl{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.dl .dlmain{display:block;text-align:center;text-decoration:none;padding:10px;font-size:15px}
.dlhint{font-size:12px;color:var(--soft);margin:0;line-height:1.45}
.dlall{font-size:13px;color:var(--ink)}
.dlall summary{cursor:pointer;color:var(--link)}
.dlall ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.dlall li{display:flex;justify-content:space-between;gap:10px}
.dlall li span{color:var(--soft);flex:none}
.dl a:not(.gbtn),#getApp a{color:var(--link)}

/* ==========================================================================
   Calls in group chats: a tile per person on the stage, and a strip in the
   group's window while a call is going on.
   ========================================================================== */
.gtiles{position:absolute;inset:0;z-index:1;display:none;gap:10px;padding:12px 12px 112px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-content:center}
.stage.group .gtiles{display:grid}
.stage.group #remoteVideo{display:none}
.gtile{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;display:grid;place-items:center;
  background:rgba(7,41,63,.82);border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 10px rgba(0,30,60,.35)}
.gtile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;background:#07293f}
.gtile video.live{display:block}
.gtile .dp.xl{--sz:64px}
.gtile .gname{position:absolute;left:8px;bottom:8px;z-index:1;max-width:calc(100% - 16px);padding:2px 9px;
  border-radius:999px;color:#fff;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:rgba(8,58,92,.6);text-shadow:0 1px 2px rgba(0,0,0,.45)}
.gtile.connecting .gname::after{content:" · connecting…";font-weight:400}
.gtile.failed .gname::after{content:" · couldn’t connect";font-weight:400}

.roomcall{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex:none;padding:8px 10px 8px 12px;font-size:13px;
  background:linear-gradient(rgba(255,255,255,.6) 0 50%,rgba(180,240,150,.45) 51%),var(--tool);
  border-bottom:1px solid var(--select-edge)}
.roomcall b{font-weight:600;min-width:0}
.roomcall .sp{margin-left:auto}
.roomcall .gbtn,.roomcall .tbtn{flex:none}
@media (max-width:860px){.gtiles{padding-bottom:84px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}}