:root{
  --deep:#0a3d91; --mid:#1668c9; --lite:#4a9fe0; --pale:#d4e5f7; --paper:#eef5fc;
  --silver:#c8d8ea; --ink:#123; --online:#5eb230; --busy:#c0392b; --away:#e8a33d;
  --psm:#d2691e; --shadow:rgba(4,26,60,.35);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%;margin:0}
body{
  font:12px Tahoma, Geneva, Verdana, "DejaVu Sans", sans-serif;
  color:var(--ink);
  background:linear-gradient(#4b8fd6 0%, #7fc0ee 45%, #a9d8f5 62%, #6fae3e 62%, #4e8a2c 100%);
  background-attachment:fixed;
}
body::after{
  content:"";position:fixed;left:-10%;right:-10%;bottom:-14vh;height:44vh;
  background:radial-gradient(60% 100% at 50% 100%, #8cc94f, #5d9a30 70%, #4a8027);
  border-radius:50% 50% 0 0 / 70% 70% 0 0;pointer-events:none;
}
#desktop{position:relative;z-index:1;min-height:100%;display:flex;align-items:center;
  justify-content:center;gap:14px;padding:16px 12px 50px;flex-wrap:wrap}

.win{width:330px;max-height:calc(100vh - 74px);display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--deep);border-radius:8px 8px 5px 5px;
  box-shadow:0 10px 34px var(--shadow), inset 0 0 0 1px #fff;overflow:hidden}
.title{display:flex;align-items:center;gap:7px;padding:5px 6px 5px 9px;color:#fff;flex:none;
  background:linear-gradient(#5aa9e6 0%, #1c6fcc 12%, #0d4fa8 55%, #1868c4 92%, #4a95dc 100%);
  border-bottom:1px solid #082f6e}
.title b{font-size:12px;text-shadow:1px 1px 1px rgba(0,0,0,.5);flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.btns{display:flex;gap:3px}
.btns button{width:20px;height:18px;border:1px solid #0b3a7d;border-radius:3px;color:#fff;cursor:pointer;
  background:linear-gradient(#8ec6f2,#2b7fd4 45%,#1257a8);font:bold 10px/1 Tahoma;padding:0}
.btns button:hover{background:linear-gradient(#b5ddfb,#4a9de6 45%,#2670c4)}
.btns .x{background:linear-gradient(#f7a99a,#d94f34 45%,#a92b16);border-color:#7d1e0c}
.btns .x:hover{background:linear-gradient(#ffc7bb,#e9694c 45%,#c33a20)}

/* sign in */
#signin{width:310px}
.tabs{display:flex;flex:none;background:var(--pale);border-bottom:1px solid var(--silver)}
.tabs button{flex:1;padding:7px;border:none;background:none;cursor:pointer;font:bold 12px Tahoma;color:#4a6b8a}
.tabs button[aria-selected=true]{background:#fff;color:var(--deep);box-shadow:inset 0 -2px 0 var(--mid)}
.signBody{padding:16px 18px 20px;text-align:center;background:linear-gradient(#fff,#dbeafb);overflow:auto}
.bigLogo{font-size:38px;line-height:1}
.signBody h1{font:bold 15px Tahoma;margin:2px 0 2px;color:var(--deep)}
.signBody p.sub{margin:0 0 12px;color:#4a6b8a}
label{display:block;text-align:left;font-size:11px;color:#33546f;margin:9px 0 3px}
input[type=text],input[type=password],select{width:100%;padding:6px;border:1px solid #7ba7cd;
  border-radius:3px;font:12px Tahoma;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--lite);outline-offset:0}
.primary{margin-top:15px;width:100%;padding:8px;cursor:pointer;color:#fff;font:bold 12px Tahoma;
  border:1px solid #0b4f9c;border-radius:4px;background:linear-gradient(#7dc0f0,#2278ce 48%,#0f56ab)}
.primary:hover{background:linear-gradient(#a3d5f8,#3a8fe0 48%,#1a67bd)}
.primary:disabled{opacity:.6;cursor:default}
.err{margin-top:10px;color:#a92b16;text-align:left;line-height:1.4;min-height:15px}
.fineprint{margin-top:12px;font-size:10px;color:#5c7d99;line-height:1.5}

/* contact list */
.me{display:flex;gap:9px;padding:9px;flex:none;background:linear-gradient(#ffffff,#d9eafa);
  border-bottom:1px solid var(--silver)}
.avatar{width:44px;height:44px;flex:none;border:2px solid #fff;border-radius:3px;cursor:pointer;
  box-shadow:0 0 0 1px #7ba7cd;display:grid;place-items:center;font-size:22px;background:#fff}
.meta{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;gap:3px}
.nameRow{display:flex;align-items:center;gap:5px}
.nameRow .dn{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#statusPick{width:auto;font-size:11px;padding:1px 3px;border-radius:3px}
#psmEdit{width:100%;border:1px solid transparent;background:transparent;color:var(--psm);
  font:italic 11px Tahoma;padding:2px 3px;border-radius:3px}
#psmEdit:hover{border-color:var(--silver);background:#fff}
.toolbar{display:flex;gap:2px;padding:4px 6px;flex:none;background:var(--pale);border-bottom:1px solid var(--silver)}
.toolbar button{background:none;border:1px solid transparent;border-radius:3px;padding:3px 6px;
  cursor:pointer;font:11px Tahoma;color:#1b4a7a}
.toolbar button:hover{border-color:var(--lite);background:#fff}
.list{flex:1 1 auto;min-height:80px;overflow:auto;background:#fff;padding:4px 0 8px}
.group{padding:6px 8px 3px;font-weight:bold;color:#1b5fa8}
.contact{display:flex;align-items:center;gap:7px;padding:4px 8px 4px 14px;cursor:pointer}
.contact:hover{background:#dceaf9}
.contact .tile{width:22px;height:22px;flex:none;border-radius:3px;display:grid;place-items:center;
  font-size:13px;background:#fff;box-shadow:0 0 0 1px var(--silver)}
.contact .txt{min-width:0;flex:1;line-height:1.35}
.contact .cn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact .cp{color:var(--psm);font-style:italic;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact.off{color:#8a9aa8}
.contact.off .tile{filter:grayscale(1);opacity:.65}
.dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.badge{background:#d64524;color:#fff;border-radius:9px;padding:0 5px;font:bold 10px Tahoma;line-height:15px}
.mini{border:1px solid #7ba7cd;background:#fff;border-radius:3px;font:10px Tahoma;padding:2px 6px;cursor:pointer}
.mini:hover{background:var(--pale)}
.empty{padding:14px 12px;color:#7a93a8;line-height:1.5;text-align:center}

/* chat */
#chatWin{width:430px}
.who{display:flex;gap:9px;align-items:center;padding:7px 9px;flex:none;
  background:linear-gradient(#fff,#e2f0fc);border-bottom:1px solid var(--silver)}
.who .cn{font-weight:bold}
.who .cp{color:var(--psm);font-style:italic;font-size:11px}
.log{flex:1 1 auto;min-height:90px;overflow:auto;background:#fff;padding:8px 10px;line-height:1.5}
.msg{margin:0 0 7px;word-wrap:break-word}
.msg .hdr{color:#1b5fa8;font-size:11px}
.msg.mine .hdr{color:#7a4ea8}
.sys{color:#8a9aa8;font-style:italic;text-align:center;margin:8px 0;font-size:11px}
.sys.nudgeline{color:#c0392b;font-style:normal;font-weight:bold}
.typing{color:#5c7d99;font-style:italic;font-size:11px;padding:0 10px 6px;background:#fff;flex:none;min-height:16px}
.composeBar{display:flex;gap:2px;padding:4px 6px;flex:none;background:var(--pale);
  border-top:1px solid var(--silver);flex-wrap:wrap}
.composeBar button{background:none;border:1px solid transparent;border-radius:3px;padding:3px 7px;
  cursor:pointer;font:11px Tahoma;color:#1b4a7a}
.composeBar button:hover{border-color:var(--lite);background:#fff}
.composeWrap{display:flex;gap:6px;padding:7px;flex:none;background:linear-gradient(#eef5fc,#dbe9f8)}
textarea{flex:1;height:52px;resize:none;padding:5px 6px;border:1px solid #7ba7cd;border-radius:3px;
  font:12px Tahoma;color:var(--ink)}
.sendBtn{width:74px;border:1px solid #0b4f9c;border-radius:4px;color:#fff;cursor:pointer;font:bold 11px Tahoma;
  background:linear-gradient(#7dc0f0,#2278ce 48%,#0f56ab)}
.sendBtn:hover{background:linear-gradient(#a3d5f8,#3a8fe0 48%,#1a67bd)}

/* popovers + dialogs */
.pop{position:fixed;z-index:30;background:#fff;border:1px solid var(--deep);border-radius:5px;
  box-shadow:0 8px 20px var(--shadow);padding:6px;display:none}
.pop.show{display:block}
.emoGrid{display:grid;grid-template-columns:repeat(8,26px);gap:2px}
.emoGrid button{font-size:15px;border:1px solid transparent;background:none;border-radius:3px;cursor:pointer;height:26px}
.emoGrid button:hover{border-color:var(--lite);background:var(--pale)}
.winkList button,.avaGrid button{border:1px solid transparent;background:none;border-radius:3px;cursor:pointer}
.winkList button{display:block;width:158px;text-align:left;padding:5px 7px;font:11px Tahoma}
.winkList button:hover{border-color:var(--lite);background:var(--pale)}
.avaGrid{display:grid;grid-template-columns:repeat(6,28px);gap:2px}
.avaGrid button{font-size:17px;height:28px}
.avaGrid button:hover{border-color:var(--lite);background:var(--pale)}
.scrim{position:fixed;inset:0;z-index:35;background:rgba(6,28,58,.4);display:grid;place-items:center;padding:14px}
.dlg{width:300px;background:var(--paper);border:1px solid var(--deep);border-radius:8px 8px 5px 5px;
  box-shadow:0 12px 32px var(--shadow);overflow:hidden}
.dlgBody{padding:12px 14px 14px;background:linear-gradient(#fff,#e6f1fc)}
.result{display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:3px;cursor:pointer}
.result:hover{background:var(--pale)}

/* taskbar */
#taskbar{position:fixed;left:0;right:0;bottom:0;height:34px;z-index:5;display:flex;align-items:center;gap:6px;
  color:#fff;font-size:11px;background:linear-gradient(#3f92e0,#1359ae 12%,#0c4a99 90%,#1a63b8);
  border-top:1px solid #6cb2ee}
#start{display:flex;align-items:center;height:100%;padding:0 16px 0 12px;font:bold 13px Tahoma;
  background:linear-gradient(#7cc04a,#3f8f22 45%,#2c6f16);border-radius:0 9px 9px 0;
  text-shadow:1px 1px 1px rgba(0,0,0,.4)}
#conn{padding:4px 10px;border:1px solid #2f7cc4;border-radius:3px;background:rgba(255,255,255,.16)}
#clock{margin-left:auto;padding:4px 8px;margin-right:8px;background:rgba(0,0,0,.14);border-radius:3px}

/* nudge + winks */
@keyframes shake{0%,100%{transform:translate(0,0)}10%{transform:translate(-9px,4px)}
  20%{transform:translate(8px,-6px)}30%{transform:translate(-7px,-4px)}40%{transform:translate(6px,7px)}
  50%{transform:translate(-6px,3px)}60%{transform:translate(5px,-5px)}70%{transform:translate(-4px,4px)}
  80%{transform:translate(3px,-3px)}90%{transform:translate(-2px,1px)}}
.nudging{animation:shake .75s linear}
#winkStage{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.fx{position:absolute;will-change:transform,opacity}
@keyframes rise{from{transform:translateY(0) scale(.4);opacity:0}20%{opacity:1}
  to{transform:translateY(-90vh) scale(1.25);opacity:0}}
@keyframes fall{from{transform:translateY(-15vh) rotate(0)}to{transform:translateY(115vh) rotate(320deg)}}
@keyframes pop{from{transform:scale(0) rotate(0);opacity:1}to{transform:scale(2.4) rotate(200deg);opacity:0}}
@keyframes cake{0%{transform:translateY(60vh) scale(.5);opacity:0}25%{transform:translateY(0) scale(1);opacity:1}
  75%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-20vh) scale(1.4);opacity:0}}
.toast{position:fixed;right:12px;bottom:44px;z-index:50;max-width:240px;cursor:pointer;
  border:1px solid var(--deep);border-radius:6px;overflow:hidden;box-shadow:0 8px 22px var(--shadow);
  background:var(--paper);animation:slidein .25s ease-out}
@keyframes slidein{from{transform:translateY(14px);opacity:0}}
.toast .tb{padding:8px 9px;line-height:1.45}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001s !important;animation-iteration-count:1 !important}}
@media (max-width:760px){
  #desktop{padding:8px 6px 42px;align-items:stretch}
  .win{width:100%!important;max-width:100%;max-height:calc(100vh - 52px)}
  #mainWin.hidePhone{display:none}
  .backBtn{display:inline-block!important}
}
.backBtn{display:none}