/* Messenger: Live Messenger-era look (original drawing). Loaded after themes.css.
   Everything here is scoped to .wlm so it wins over the older rules in style.css and themes.css. */

/* ---------- shared pieces ---------- */
.wlm{font:12px/1.4 "Segoe UI",Tahoma,Verdana,sans-serif;color:#1e1e1e}
.wlm .wl-scene{position:absolute;left:0;right:0;top:0;height:96px;overflow:hidden;pointer-events:none;z-index:0}
.wlm .wl-scene-art{display:block;width:100%;height:100%}
.wlm .wl-caret{display:inline-block;width:0;height:0;margin-left:3px;border:3px solid transparent;border-top:4px solid currentColor;border-bottom:0;vertical-align:2px;opacity:.85}

/* the glossy status frame around display pictures */
.wl-frame{position:relative;display:inline-block;flex:none;padding:5px;border-radius:9px;line-height:0;
  background:linear-gradient(155deg,#f2ffe8 0%,#a8ec86 22%,#56cc2c 55%,#2f9d14 85%,#4fc22a 100%);
  box-shadow:0 0 0 1px #2c7d18,inset 0 0 0 1px #ffffffb0,0 2px 4px #0003}
.wl-frame::after{content:"";position:absolute;left:2px;right:2px;top:2px;height:45%;border-radius:7px 7px 3px 3px;background:linear-gradient(#ffffffc0,#ffffff10);pointer-events:none}
.wl-frame.s-busy{background:linear-gradient(155deg,#fff0f0 0%,#f7a2a2 22%,#e9474a 55%,#b81c22 85%,#e04448 100%);box-shadow:0 0 0 1px #8e1418,inset 0 0 0 1px #ffffffb0,0 2px 4px #0003}
.wl-frame.s-away{background:linear-gradient(155deg,#fffbe8 0%,#ffe08a 22%,#ffbf2e 55%,#e09210 85%,#fbb52a 100%);box-shadow:0 0 0 1px #a8680a,inset 0 0 0 1px #ffffffb0,0 2px 4px #0003}
.wl-frame.s-offline{background:linear-gradient(155deg,#f6f8fa 0%,#d6dde4 22%,#9fb0bf 55%,#6c8296 85%,#97a9b9 100%);box-shadow:0 0 0 1px #4f6273,inset 0 0 0 1px #ffffffb0,0 2px 4px #0003}
.wlm .wl-frame .msn-dp,.toast.msn .wl-frame img{position:relative;z-index:1;display:block;width:96px;height:96px;padding:0;margin:0;border:1px solid #6d7f8c;border-radius:3px;background:#fff;box-shadow:none;overflow:hidden;cursor:default}
.wlm .wl-frame button.msn-dp{cursor:pointer}
.wlm .wl-frame .msn-dp svg,.wlm .wl-frame .msn-dp img{display:block;width:100%;height:100%;border-radius:2px;object-fit:cover;background:#fff}
.wlm .wl-frame.sm{padding:4px;border-radius:8px}
.wlm .wl-frame.sm .msn-dp{width:48px;height:48px}
.wlm .wl-frame.mini{padding:3px;border-radius:6px;display:none}
.wlm .wl-frame.mini .msn-dp{width:34px;height:34px}
.wlm .wl-frame button.msn-dp:focus-visible{outline:2px solid #0b5fb3;outline-offset:1px}

/* aero hover: a light blue gradient pill with a thin bright border */
.wlm .msn-fmt>button:hover,.wlm .msn-fmt>button:focus-visible,.wlm .wl-mailbtn:hover,.wlm .wl-mailbtn:focus-visible,
.im.msn.wlm .bud:hover,.im.msn.wlm .bud:focus,.im.msn.wlm .grp:hover,.im.msn.wlm .grp:focus-visible{
  border-color:#80c9ec;border-radius:3px;background:linear-gradient(#fff 0%,#e3f4fc 45%,#c8eaf9 100%);outline:none}

/* status orbs */
.im.msn.wlm .bud .dot{display:block;width:11px;height:11px;margin-top:3px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0,#c6f7a8 18%,#5fd12f 48%,#2a8e12 85%);box-shadow:0 0 0 1px #2a7a15,0 1px 1px #0003}
.im.msn.wlm .bud.busy .dot{background:radial-gradient(circle at 35% 30%,#fff 0,#ffc0c0 18%,#ef4848 48%,#a51a1a 85%);box-shadow:0 0 0 1px #8e1418,0 1px 1px #0003}
.im.msn.wlm .bud.away .dot{background:radial-gradient(circle at 35% 30%,#fff 0,#ffe7a6 18%,#ffb81f 48%,#c27a00 85%);box-shadow:0 0 0 1px #9a6200,0 1px 1px #0003}
.im.msn.wlm .bud.offline .dot{background:radial-gradient(circle at 35% 30%,#fff 0,#e3e8ee 18%,#a6b3c0 48%,#66788a 85%);box-shadow:0 0 0 1px #4f6273,0 1px 1px #0003}

/* ---------- contact list ---------- */
.im.msn.wlm{position:relative;height:100%;display:flex;flex-direction:column;background:linear-gradient(#fff 0,#fff 60%,#e3f1fa 100%);overflow:hidden}
.im.msn.wlm .im-head{position:relative;z-index:1;display:flex;align-items:flex-start;gap:8px;padding:12px 10px 6px;background:none;border:0}
.im.msn.wlm .im-me{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;padding-top:6px}
.im.msn.wlm .im-name{font:600 14px/1.25 "Segoe UI",Tahoma,sans-serif;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.im.msn.wlm .im-name .st{font-weight:normal;color:#333}
.im.msn.wlm .im-pm{width:100%;font:12px "Segoe UI",Tahoma,sans-serif;color:#3d3d3d;background:transparent;box-shadow:none;border:1px solid transparent;border-radius:2px;padding:1px 3px;margin-left:-3px}
.im.msn.wlm .im-pm::placeholder{color:#4a4a4a;opacity:1}
.im.msn.wlm .im-pm:hover,.im.msn.wlm .im-pm:focus{border-color:#7fb5d8;background:#ffffffd9;outline:none}
.wlm .wl-mailbtn{flex:none;align-self:flex-end;display:grid;place-items:center;width:30px;height:26px;padding:0;border:1px solid transparent;background:none;cursor:pointer}
.wlm .wl-div{position:relative;z-index:1;height:6px;margin:2px 0 0;background:linear-gradient(90deg,#ffffff00,#8fb9d4 20%,#8fb9d4 80%,#ffffff00) center top/100% 1px no-repeat,linear-gradient(#0000000d,#0000) 0 1px/100% 5px no-repeat}
.im.msn.wlm .im-find{position:relative;z-index:1;display:flex;align-items:center;gap:4px;padding:6px 10px 4px}
.im.msn.wlm .im-find input{flex:1;min-width:0;height:24px;padding:2px 24px 2px 7px;font:12px "Segoe UI",Tahoma,sans-serif;color:#1a1a1a;border:1px solid #a9c6d8;border-radius:3px;box-shadow:inset 0 3px 4px -3px #0002;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='5' cy='5' r='3.6' fill='none' stroke='%234d7fae' stroke-width='1.4'/%3E%3Cpath d='M7.6 7.6 11 11' stroke='%234d7fae' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 7px center/12px}
.im.msn.wlm .im-find input::placeholder{color:#4f6f86;opacity:1}
.im.msn.wlm .im-find input:hover,.im.msn.wlm .im-find input:focus{border-color:#179bf3;outline:none}
.wlm .wl-tb{display:flex;align-items:center;padding:2px 3px;color:#333}
.im.msn.wlm .buddies{flex:1;min-height:0;overflow:auto;margin:2px 0 0;padding:0 4px 6px;background:none;border:0;border-radius:0}
.im.msn.wlm .grp{display:flex;align-items:center;gap:4px;margin:6px 0 1px;padding:1px 4px;border:1px solid transparent;font:13px "Segoe UI",Tahoma,sans-serif;color:#1d2f7f;cursor:pointer;user-select:none}
.im.msn.wlm .grp .n{color:#5a5a5a}
.im.msn.wlm .grp .tw{width:0;height:0;border:4px solid transparent;border-top:5px solid #3e6c8f;border-bottom:0;margin:0 2px}
.im.msn.wlm .grp.closed .tw{border:4px solid transparent;border-left:5px solid #3e6c8f;border-right:0;margin:0 3px 0 4px}
.im.msn.wlm .gl:empty{display:none}
.im.msn.wlm .bud{display:grid;grid-template-columns:12px minmax(0,1fr);column-gap:6px;align-items:start;padding:1px 6px 1px 20px;border:1px solid transparent;border-radius:3px;white-space:nowrap;cursor:default;color:#111}
.im.msn.wlm .bud .bn{overflow:hidden;text-overflow:ellipsis;font-size:13px}
.im.msn.wlm .bud b{font-weight:normal}
.im.msn.wlm .bud em{font-style:normal;color:#555}
.im.msn.wlm .bud small{font-style:normal;font-size:12px;color:#666}
.im.msn.wlm .bud:hover small,.im.msn.wlm .bud:focus small{color:#4a4a4a}
.im.msn.wlm .bud.away{color:#111}
.im.msn.wlm .im-ad{position:relative;z-index:1;display:block;margin:4px 8px 6px;padding:7px 8px;border:1px solid #bcd3e2;border-radius:3px;background:linear-gradient(#fff,#eef7fc);color:#1a1a1a;text-decoration:none;font-size:12px;text-align:center;box-shadow:0 1px 2px #0001}
.im.msn.wlm .im-ad b{display:block;color:#0b4f9c;font-weight:600}
.im.msn.wlm .im-ad span{color:#333}
.im.msn.wlm .im-ad:hover,.im.msn.wlm .im-ad:focus-visible{border-color:#80c9ec;outline:none}
.im.msn.wlm .im-ad:hover b{text-decoration:underline}
.im.msn.wlm .im-foot{padding:0 8px 8px;text-align:center}

/* ---------- conversation window ---------- */
.msn-c.wlm{position:relative;height:100%;display:flex;flex-direction:column;background:linear-gradient(#fff 0,#fff 70%,#e4f2fb 100%);container-type:inline-size;overflow:hidden}
.msn-c.wlm .msn-tools{position:relative;z-index:2;display:flex;align-items:center;gap:2px;height:31px;padding:0 8px;border:0;overflow:hidden;
  background:linear-gradient(#7cc9f0 0%,#4eaee4 48%,#2f96d4 52%,#2b8dcb 100%);box-shadow:inset 0 1px 0 #b9e5fa,0 1px 0 #1f6fa8,0 3px 5px #0000002e}
.msn-c.wlm .msn-tools button{display:flex;flex-direction:row;align-items:center;gap:0;min-width:0;height:25px;padding:0 4px;border:1px solid transparent;border-radius:3px;background:none;color:#fff;cursor:pointer}
.msn-c.wlm .msn-tools button svg{filter:drop-shadow(0 1px 0 #0b4a7c)}
.msn-c.wlm .msn-tools button:hover,.msn-c.wlm .msn-tools button:focus-visible{border-color:#cdeefe;background:linear-gradient(#ffffff59,#ffffff1a 50%,#ffffff0d 51%,#ffffff33);outline:none;box-shadow:inset 0 0 0 1px #ffffff40}
.msn-c.wlm .msn-tools button:active{background:#0b4a7c55}
.msn-c.wlm .msn-main{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:132px minmax(0,1fr);gap:0;padding:0}
.msn-c.wlm .msn-pics{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:8px;padding:12px 6px 12px 12px;min-height:0}
.msn-c.wlm .msn-left{position:relative;z-index:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:0;padding:0 10px 10px 4px}
.msn-c.wlm .msn-to{display:flex;align-items:center;gap:8px;height:74px;flex:none;padding:6px 2px 0;background:none;border:0;white-space:normal;overflow:hidden;color:#111;font-size:12px}
.msn-c.wlm .wl-who{min-width:0;line-height:1.35}
.msn-c.wlm .wl-name{font:600 15px/1.2 "Segoe UI",Tahoma,sans-serif;color:#0f0f0f}
.msn-c.wlm .wl-mail{color:#2b2b2b;font-size:12px}
.msn-c.wlm .wl-pm{display:block;color:#2b2b2b;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.msn-c.wlm .bot-badge{display:inline-block;margin-left:2px;padding:0 6px;border-radius:8px;background:#0e4f8f;color:#fff;font:600 10px/15px "Segoe UI",Tahoma,sans-serif;vertical-align:1px}
.msn-c.wlm .wl-logwrap{position:relative;flex:1;min-height:70px;display:flex;flex-direction:column;border-radius:3px;background:#fff}
.msn-c.wlm .log{flex:1;min-height:0;overflow:auto;background:#fff;border:0;border-radius:0;padding:6px 6px 4px 2px;font:13px/1.45 "Segoe UI",Tahoma,Verdana,sans-serif;color:#111;scrollbar-width:thin}
.msn-c.wlm .m{margin:0 0 6px}
.msn-c.wlm .who{color:#595959;font-size:12px;margin:0 0 1px}
.msn-c.wlm .txt{position:relative;padding:0 0 1px 14px;color:#111;word-wrap:break-word;overflow-wrap:anywhere}
.msn-c.wlm .txt::before{content:"";position:absolute;left:4px;top:.62em;width:4px;height:4px;border-radius:50%;background:#9db3c6}
.msn-c.wlm .sys{color:#595959;font-size:12px;margin:2px 0 8px}
.msn-c.wlm .sys.tip{display:flex;gap:5px;align-items:flex-start;padding:0 0 6px;border-bottom:1px solid #e3edf3;font-size:11.5px;color:#555}
.msn-c.wlm .sys.tip::before{content:"\2715";flex:none;color:#d42020;font-weight:bold;font-size:11px;line-height:1.5}
.msn-c.wlm .sys.nudge,.msn-c.wlm .sys.wink{display:flex;align-items:center;gap:8px;color:#4a4a4a}
.msn-c.wlm .sys.nudge::before,.msn-c.wlm .sys.nudge::after,.msn-c.wlm .sys.wink::before,.msn-c.wlm .sys.wink::after{content:"";flex:1;border-top:1px solid #c9dbe6}
.msn-c.wlm .quick{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px 14px}
.msn-c.wlm .ql{display:inline-flex;align-items:center;height:22px;padding:0 10px;border:1px solid #9cc6df;border-radius:11px;background:linear-gradient(#fff,#e6f4fc);color:#0b4f9c;font:12px "Segoe UI",Tahoma,sans-serif;text-decoration:none;cursor:pointer;box-shadow:0 1px 1px #0001}
.msn-c.wlm .ql:hover,.msn-c.wlm .ql:focus-visible{border-color:#3ea6e8;background:linear-gradient(#fff,#cdeafa);color:#073f7e;outline:none}
.msn-c.wlm .msn-status{min-height:20px;padding:3px 2px 2px;border:0;background:none;color:#555;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msn-c.wlm .msn-send{display:flex;align-items:stretch;gap:6px;min-height:0;padding-top:5px;background:linear-gradient(90deg,#ffffff00,#b7cfdd 15%,#b7cfdd 85%,#ffffff00) top/100% 1px no-repeat}
.msn-c.wlm .wl-box{position:relative;flex:1;min-width:0;display:flex;flex-direction:column}
.msn-c.wlm textarea{display:block;width:100%;height:58px;min-width:0;resize:none;margin:0;padding:4px 6px;border:1px solid #bdd5df;border-bottom:0;border-radius:4px 4px 0 0;background:#fff;box-shadow:none;color:#000;font-size:13px;line-height:1.35}
.msn-c.wlm textarea:focus{border-color:#5fb0e4;outline:none}
.msn-c.wlm .msn-fmt{position:relative;display:flex;align-items:center;gap:1px;height:28px;padding:0 3px;border:1px solid #bdd5df;border-radius:0 0 4px 4px;
  background:linear-gradient(#fbfdfe 0%,#eaf4f9 50%,#dcebf3 51%,#e6f1f7 100%)}
.msn-c.wlm .msn-fmt>button{display:flex;align-items:center;gap:0;height:24px;padding:0 3px;border:1px solid transparent;border-radius:3px;background:none;color:#333;cursor:pointer}
.msn-c.wlm .msn-fmt>button .wl-caret{margin-left:2px}
.msn-c.wlm .wl-sep{width:1px;height:18px;margin:0 4px;background:linear-gradient(#fff0,#9fb8c8,#fff0);box-shadow:1px 0 #fff}
.msn-c.wlm .msn-btns{display:flex;flex-direction:column;justify-content:flex-start}
.msn-c.wlm .wl-send{min-width:62px;height:58px;padding:0 10px;border:1px solid #6f9bba;border-radius:4px;background:linear-gradient(#fdfeff 0%,#e9f3f9 48%,#d3e6f2 52%,#e2eff7 100%);color:#0f2f55;font:600 12px "Segoe UI",Tahoma,sans-serif;box-shadow:inset 0 0 0 1px #ffffffa0;cursor:pointer}
.msn-c.wlm .wl-send:hover,.msn-c.wlm .wl-send:focus-visible{border-color:#3c7fb1;background:linear-gradient(#f5fbff 0%,#d9effc 48%,#bfe2f8 52%,#d4ecfa 100%);outline:none}
.msn-c.wlm .wl-send:active{background:linear-gradient(#c6e2f4,#e1f0f9)}

/* pickers */
.msn-c.wlm .msn-pop{left:-1px;bottom:calc(100% + 60px);border:1px solid #8fb4cc;border-radius:4px;background:linear-gradient(#fff,#f3f9fc);box-shadow:0 4px 12px #0003;padding:7px;font:12px "Segoe UI",Tahoma,sans-serif;color:#111}
.msn-c.wlm .msn-pop .pop-h{color:#1d3f8a;font-weight:600;margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid #dbe8f0}
.msn-c.wlm .emo-grid{grid-template-columns:repeat(9,26px);gap:1px}
.msn-c.wlm .emo-grid button,.msn-c.wlm .wink-grid button{border:1px solid transparent;border-radius:3px}
.msn-c.wlm .emo-grid button:hover,.msn-c.wlm .emo-grid button:focus-visible,.msn-c.wlm .wink-grid button:hover,.msn-c.wlm .wink-grid button:focus-visible{border-color:#80c9ec;background:linear-gradient(#fff,#c8eaf9);outline:none}
.msn-c.wlm .wink-grid svg{border:1px solid #a9c6d8;border-radius:3px}
.msn-c.wlm .emo-w svg,.wlm .emo{width:19px;height:19px}

/* winks play over the conversation area */
.msn-c.wlm .wink-stage{border-radius:3px}

/* narrow windows (and the desktop at phone width): no picture column, a small framed picture next to the name */
@container (max-width:470px){
  .msn-c.wlm .msn-main{grid-template-columns:minmax(0,1fr)}
  .msn-c.wlm .msn-pics{display:none}
  .msn-c.wlm .msn-left{padding:0 8px 8px}
  .msn-c.wlm .wl-frame.mini{display:inline-block}
  .msn-c.wlm .msn-to{height:62px}
  .msn-c.wlm .wl-mail{display:none}
  .msn-c.wlm .msn-tools{padding:0 4px}
  .msn-c.wlm .msn-tools button .wl-caret{display:none}
  .msn-c.wlm .wl-send{min-width:52px}
  .msn-c.wlm .emo-grid{grid-template-columns:repeat(7,26px)}
  .msn-c.wlm .wink-grid{grid-template-columns:repeat(2,78px)}
}

/* ---------- the "has just signed in" popup ---------- */
.toast.msn{width:200px;min-height:110px;padding:0 0 10px;border:1px solid #7fa6c2;border-radius:4px 4px 0 0;
  background:linear-gradient(#fff 0%,#fff 40%,#e1f1fa 100%);box-shadow:0 2px 10px #0004}
[data-theme] .toast.msn{border:1px solid #7fa6c2;border-radius:4px 4px 0 0;background:linear-gradient(#fff 0%,#fff 40%,#e1f1fa 100%);backdrop-filter:none}
.toast.msn .tbody b{padding:4px 22px 4px 8px;font:12px "Segoe UI",Tahoma,sans-serif;color:#fff;border-bottom:1px solid #124f80;background:linear-gradient(#2479b8 0%,#1e6fae 48%,#17619d 52%,#1a68a6 100%);text-shadow:0 1px 0 #0b3a60}
.toast.msn .tx{color:#fff}
.toast.msn .tbody p{gap:10px;padding:10px 10px 0;font:12px/1.35 "Segoe UI",Tahoma,sans-serif;color:#111}
.toast.msn .tn-dp.wl-frame{width:auto;height:auto;padding:3px;border:0;border-radius:6px}
.toast.msn .tn-dp.wl-frame img{width:40px;height:40px;object-fit:cover}
.toast.msn .tn-t u{color:#0b4f9c}