/* ===== JDS Messenger – WhatsApp-like design (light + dark) ===== */
:root{
  --green:#00a884; --green-d:#008069; --green-l:#25d366; --brand:#008069;
  --bg:#ffffff; --panel:#ffffff; --panel2:#f0f2f5; --hover:#f5f6f6; --line:#e9edef; --line2:#d1d7db;
  --txt:#111b21; --muted:#667781; --ic:#54656f; --chip:#f0f2f5; --chip-on:#d9fdd3; --chip-on-txt:#008069;
  --wall:#efeae2; --out:#d9fdd3; --in:#ffffff; --sys:#ffeecd; --sys-txt:#54656f; --tick:#53bdeb;
  --day:#ffffff; --input:#ffffff; --composer:#f0f2f5; --red:#ea0038; --shadow:0 1px .5px rgba(11,20,26,.13);
  --font:"Segoe UI","Helvetica Neue",Roboto,system-ui,-apple-system,sans-serif;
  --doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.045' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M14 18c6-6 14-6 20 0M20 30l6-6 6 6'/%3E%3Ccircle cx='86' cy='22' r='7'/%3E%3Cpath d='M70 60h16v12H70zM74 60v-4h8v4'/%3E%3Cpath d='M18 78c0-6 10-6 10 0s10 6 10 0'/%3E%3Cpath d='M92 88l8 8M100 88l-8 8'/%3E%3Cpath d='M44 104c4-8 12-8 16 0'/%3E%3Ccircle cx='52' cy='40' r='3'/%3E%3Cpath d='M100 50l4 8h-8z'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#111b21; --panel:#111b21; --panel2:#202c33; --hover:#202c33; --line:#222d34; --line2:#3b4a54;
  --txt:#e9edef; --muted:#8696a0; --ic:#aebac1; --chip:#202c33; --chip-on:#0a332c; --chip-on-txt:#00a884;
  --wall:#0b141a; --out:#005c4b; --in:#202c33; --sys:#182229; --sys-txt:#8696a0; --day:#182229; --input:#2a3942;
  --composer:#202c33; --brand:#e9edef; --shadow:0 1px .5px rgba(11,20,26,.4); color-scheme:dark;
  --doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M14 18c6-6 14-6 20 0M20 30l6-6 6 6'/%3E%3Ccircle cx='86' cy='22' r='7'/%3E%3Cpath d='M70 60h16v12H70zM74 60v-4h8v4'/%3E%3Cpath d='M18 78c0-6 10-6 10 0s10 6 10 0'/%3E%3Cpath d='M92 88l8 8M100 88l-8 8'/%3E%3Cpath d='M44 104c4-8 12-8 16 0'/%3E%3Ccircle cx='52' cy='40' r='3'/%3E%3Cpath d='M100 50l4 8h-8z'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111b21; --panel:#111b21; --panel2:#202c33; --hover:#202c33; --line:#222d34; --line2:#3b4a54;
    --txt:#e9edef; --muted:#8696a0; --ic:#aebac1; --chip:#202c33; --chip-on:#0a332c; --chip-on-txt:#00a884;
    --wall:#0b141a; --out:#005c4b; --in:#202c33; --sys:#182229; --sys-txt:#8696a0; --day:#182229; --input:#2a3942;
    --composer:#202c33; --brand:#e9edef; --shadow:0 1px .5px rgba(11,20,26,.4); color-scheme:dark;
    --doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M14 18c6-6 14-6 20 0M20 30l6-6 6 6'/%3E%3Ccircle cx='86' cy='22' r='7'/%3E%3Cpath d='M70 60h16v12H70zM74 60v-4h8v4'/%3E%3Cpath d='M18 78c0-6 10-6 10 0s10 6 10 0'/%3E%3Cpath d='M92 88l8 8M100 88l-8 8'/%3E%3Cpath d='M44 104c4-8 12-8 16 0'/%3E%3Ccircle cx='52' cy='40' r='3'/%3E%3Cpath d='M100 50l4 8h-8z'/%3E%3C/g%3E%3C/svg%3E");
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:var(--font);font-size:15px}
a{color:#027eb5}.hidden{display:none!important}.muted{color:var(--muted)}.err{color:var(--red)}.ok{color:var(--green-d)}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
input,textarea,select{font:inherit;color:var(--txt);background:var(--input);border:1px solid var(--line2);border-radius:8px;padding:10px 12px;width:100%;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--green)}
label{display:block;color:var(--muted);font-size:14px;margin:12px 0}label input,label select,label textarea{margin-top:6px}
.ic{width:24px;height:24px;fill:currentColor;flex:none;display:block}
.grow{flex:1}

/* ===== auth pages ===== */
.auth-band{position:fixed;inset:0 0 auto 0;height:220px;background:var(--green-d);z-index:-1}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.auth-card{width:min(420px,100%);background:var(--panel);padding:30px 28px;border-radius:12px;text-align:center;box-shadow:0 17px 50px rgba(11,20,26,.19)}
.auth-card label{text-align:left}.auth-card h1{font-weight:400;margin:10px 0 6px;font-size:24px}
.auth-logo img{width:72px;height:72px}
.auth-card .btn{width:100%;margin-top:14px}
.links{font-size:14px;margin-top:16px}
.code-input{font-size:28px;letter-spacing:10px;text-align:center;font-weight:600;margin:18px 0 4px}
.btn{border-radius:24px;padding:11px 20px;background:var(--panel2);font-weight:500}
.btn.primary{background:var(--green);color:#fff}.btn.primary:hover{background:var(--green-d)}
.btn.danger{color:var(--red)}.btn.link{background:none;color:var(--green-d);padding:8px}

/* ===== layout ===== */
.app{display:grid;grid-template-columns:64px minmax(320px,30%) 1fr;height:100vh;height:100dvh;background:var(--panel2)}
.rail{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;background:var(--panel2);border-right:1px solid var(--line)}
.rail-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ic);position:relative}
.rail-btn:hover{background:#0000000d}.rail-btn.active{background:#0000001a;color:var(--txt)}
:root[data-theme="dark"] .rail-btn:hover,:root[data-theme="dark"] .rail-btn.active{background:#ffffff1a}
.dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--green-l)}
.list{position:relative;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);min-width:0}
.topbar{display:flex;align-items:center;gap:6px;padding:10px 12px 10px 18px;min-height:60px;background:var(--panel)}
.brand{flex:1;margin:0;font-size:22px;font-weight:600;color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root:not([data-theme="dark"]) .brand{color:var(--green-d)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand{color:#e9edef}}
.ibtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ic);flex:none}
.ibtn:hover{background:#0000000d}:root[data-theme="dark"] .ibtn:hover{background:#ffffff14}
.banner{display:flex;gap:10px;align-items:center;margin:0 12px 6px;padding:10px 12px;border-radius:10px;background:var(--chip-on);color:var(--txt);font-size:14px}
.banner .ic{color:var(--green-d)}
.searchbox{display:flex;align-items:center;gap:10px;margin:0 12px 6px;padding:0 12px;background:var(--panel2);border-radius:20px;color:var(--muted)}
.searchbox input{border:0;background:none;padding:9px 0}
.filters{display:flex;gap:8px;padding:2px 14px 8px}
.chip{background:var(--chip);color:var(--muted);border-radius:16px;padding:6px 12px;font-size:14px}
.chip.active{background:var(--chip-on);color:var(--chip-on-txt);font-weight:500}
.tab{flex:1;overflow-y:auto;min-height:0}
.rows{padding-bottom:90px}
.section-title{padding:14px 18px 8px;font-size:15px;font-weight:500;color:var(--txt)}
.row{display:flex;gap:14px;align-items:center;padding:0 0 0 14px;cursor:pointer;min-height:72px}
.row:hover{background:var(--hover)}.row.active{background:var(--panel2)}
.row .body{flex:1;min-width:0;border-bottom:1px solid var(--line);padding:12px 14px 12px 0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.row .top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.row .name{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .time{font-size:12px;color:var(--muted);flex:none}.row .time.new{color:var(--green-l);font-weight:600}
.row .bottom{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:14px;margin-top:3px;min-width:0}
.row .bottom .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;display:flex;gap:3px;align-items:center;min-width:0}
.row .bottom .txt span{overflow:hidden;text-overflow:ellipsis}
.row .bottom .ic{width:18px;height:18px}
.row .act{color:var(--green-d);padding:0 18px;display:grid;place-items:center}
:root[data-theme="dark"] .row .act{color:var(--green)}
.badge{background:var(--green-l);color:#fff;border-radius:12px;font-size:12px;font-weight:600;min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;flex:none}
:root[data-theme="dark"] .badge{color:#111b21}
.botpill{font-size:10px;font-weight:600;color:#fff;background:#027eb5;border-radius:5px;padding:1px 5px;margin-left:6px;vertical-align:2px}
.empty-note{padding:30px 24px;text-align:center;color:var(--muted);line-height:1.5}
.avatar{width:49px;height:49px;border-radius:50%;display:grid;place-items:center;font-weight:600;color:#fff;flex:none;font-size:18px;position:relative}
.avatar.sm{width:32px;height:32px;font-size:13px}.avatar.md{width:40px;height:40px;font-size:15px}
.avatar.huge{width:116px;height:116px;font-size:44px;margin:0 auto}.avatar.xl{width:96px;height:96px;font-size:36px}
.avatar .on{position:absolute;right:1px;bottom:1px;width:12px;height:12px;border-radius:50%;background:var(--green-l);border:2px solid var(--panel)}
.avatar.ring{box-shadow:0 0 0 2.5px var(--panel),0 0 0 5px var(--green-l)}.avatar.ring.seen{box-shadow:0 0 0 2.5px var(--panel),0 0 0 5px var(--line2)}
.avatar .plus{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:var(--green-l);color:#fff;display:grid;place-items:center;border:2px solid var(--panel);font-size:14px;line-height:1}
.fab{position:absolute;right:20px;bottom:20px;width:56px;height:56px;border-radius:16px;background:var(--green-l);color:#fff;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.25)}
:root[data-theme="dark"] .fab{color:#111b21}
.fab.small{bottom:88px;width:44px;height:44px;border-radius:12px;background:var(--panel2);color:var(--ic)}
.missed{color:var(--red)!important}.okin{color:var(--green-l)}

/* settings */
.set-head{display:flex;gap:16px;align-items:center;padding:16px 18px 18px;border-bottom:8px solid var(--panel2);cursor:pointer}
.set-head .n{font-size:20px}.set-head .a{color:var(--muted);font-size:14px;margin-top:2px}
.set-item{display:flex;gap:20px;align-items:center;padding:0 0 0 22px;min-height:62px;cursor:pointer}
.set-item:hover{background:var(--hover)}
.set-item .ic{color:var(--ic)}.set-item .t{flex:1;border-bottom:1px solid var(--line);align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-right:16px}
.set-item .t small{color:var(--muted);font-size:13px;margin-top:2px}
.set-item.danger,.set-item.danger .ic{color:var(--red)}
.set-foot{text-align:center;color:var(--muted);font-size:13px;padding:22px}
.qr{display:flex;flex-direction:column;align-items:center;gap:8px}.qr svg{width:240px;height:240px;border-radius:12px}

/* ===== chat ===== */
.chat{display:flex;flex-direction:column;min-width:0;background:var(--wall) var(--doodle);position:relative}
.chat.empty{background:var(--panel2)}
.welcome{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:30px;border-bottom:6px solid var(--green-l)}
.chat.empty .welcome{display:flex}.welcome img{width:110px;opacity:.9}.welcome h2{font-weight:300;color:var(--txt);font-size:30px;margin:18px 0 8px}
.welcome .lock{display:flex;gap:6px;align-items:center;font-size:13px;margin-top:30px}.welcome .lock .ic{width:14px;height:14px}
.chat-top{background:var(--panel2);border-left:1px solid var(--line);padding-left:10px}
.chat-meta{flex:1;min-width:0;cursor:pointer;padding-left:4px}.chat-meta .title{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-meta .sub{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.typing{color:var(--green-l)!important}
.back{display:none}
.msgs{flex:1;overflow-y:auto;padding:14px 7% 10px;display:flex;flex-direction:column;gap:2px}
.day{align-self:center;background:var(--day);color:var(--muted);font-size:12.5px;padding:5px 12px;border-radius:8px;margin:10px 0 8px;box-shadow:var(--shadow);text-transform:uppercase}
.enc{align-self:center;background:var(--sys);color:var(--sys-txt);font-size:12.5px;padding:6px 12px;border-radius:8px;margin:4px 0 10px;max-width:460px;text-align:center;box-shadow:var(--shadow)}
.msg{max-width:min(620px,72%);padding:6px 7px 8px 9px;border-radius:7.5px;position:relative;line-height:1.38;word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--shadow);font-size:14.6px}
.msg.in{background:var(--in);align-self:flex-start}.msg.out{background:var(--out);align-self:flex-end}
.msg.first{margin-top:6px}.msg.first.in{border-top-left-radius:0}.msg.first.out{border-top-right-radius:0}
.msg.first.in::before,.msg.first.out::before{content:"";position:absolute;top:0;width:8px;height:13px}
.msg.first.in::before{left:-8px;background:var(--in);clip-path:polygon(100% 0,0 0,100% 100%)}
.msg.first.out::before{right:-8px;background:var(--out);clip-path:polygon(0 0,100% 0,0 100%)}
.msg .who{font-size:12.8px;font-weight:600;margin-bottom:2px}
.msg .meta{float:right;display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--muted);margin:8px 0 -6px 10px;position:relative;top:2px}
:root[data-theme="dark"] .msg.out .meta{color:#ffffff99}
.msg .meta .ic{width:16px;height:16px}.msg .meta .read{color:var(--tick)}
.msg img{max-width:100%;max-height:340px;border-radius:6px;display:block;cursor:pointer;margin-bottom:2px}
.msg audio{width:250px;max-width:100%;height:40px}
.msg .file{display:flex;gap:10px;align-items:center;background:#0000000d;padding:10px;border-radius:6px;color:var(--txt);text-decoration:none;min-width:200px}
.msg .file .ic{color:#e05a44;width:30px;height:30px}
.msg.deleted{font-style:italic;color:var(--muted)}
.msg.sys{align-self:center;background:var(--sys);color:var(--sys-txt);font-size:13px;white-space:normal;padding:6px 12px;display:flex;gap:6px;align-items:center}
.msg.sys .ic{width:16px;height:16px}
.composer{display:flex;gap:8px;align-items:flex-end;padding:6px 10px calc(8px + env(safe-area-inset-bottom));background:var(--composer)}
.inputwrap{flex:1;display:flex;align-items:flex-end;background:var(--input);border-radius:24px;padding:2px 4px;min-width:0}
.inputwrap .ibtn{width:42px;height:44px}
.composer textarea{resize:none;border:0;background:none;padding:12px 4px;max-height:140px;min-height:44px;line-height:20px}
.send{width:48px;height:48px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;flex:none}
.send.rec{background:var(--red);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}

/* ===== status viewer ===== */
.story{position:fixed;inset:0;z-index:55;background:#000;color:#fff;display:flex;flex-direction:column}
.story .bars{display:flex;gap:4px;padding:calc(10px + env(safe-area-inset-top)) 10px 6px}
.story .bars i{flex:1;height:3px;background:#ffffff55;border-radius:2px;overflow:hidden}.story .bars b{display:block;height:100%;width:0;background:#fff}
.story header{display:flex;align-items:center;gap:10px;padding:6px 10px}.story header .ibtn{color:#fff}
.story .content{flex:1;display:grid;place-items:center;padding:20px;text-align:center;font-size:28px;line-height:1.35;white-space:pre-wrap;word-break:break-word}
.story .content img{max-width:100%;max-height:78vh;border-radius:8px}
.story footer{padding:12px 16px calc(16px + env(safe-area-inset-bottom));text-align:center;font-size:15px}
.story .tapl,.story .tapr{position:absolute;top:80px;bottom:80px;width:35%}.story .tapl{left:0}.story .tapr{right:0}
.colors{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}.colors button{width:34px;height:34px;border-radius:50%;border:3px solid transparent}
.colors button.on{border-color:var(--txt)}

/* ===== call screen ===== */
.call{position:fixed;inset:0;z-index:50;background:#0b141a;background:radial-gradient(120% 80% at 50% 0%,#1f3a34 0%,#0b141a 60%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(48px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom))}
.call video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
#localVideo{inset:auto 16px 150px auto;width:112px;height:164px;border-radius:12px;z-index:2;border:2px solid #fff3}
.call video:not([data-on]){display:none}
.call-top{text-align:center;z-index:3}.call-top h2{margin:18px 0 4px;font-weight:500;font-size:26px}
.call-top p{margin:4px 0;color:#d1d7db}.e2e{display:flex;gap:6px;align-items:center;justify-content:center;font-size:13px;margin-bottom:26px!important}
.e2e .ic{width:14px;height:14px}.reason{max-width:480px}.caption{color:#9de1d3;max-width:540px;min-height:22px;white-space:pre-wrap}
.call-bar{display:flex;gap:24px;z-index:3;background:#ffffff14;padding:14px 22px;border-radius:40px;backdrop-filter:blur(8px)}
.round{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff}
.round .ic{width:28px;height:28px}.green{background:#25d366}.red{background:#ea0038}.grey{background:#ffffff26}.grey.off{background:#fff;color:#111b21}
.ringing .avatar.huge{animation:ring 1.4s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 #25d36680}70%{box-shadow:0 0 0 26px #25d36600}100%{box-shadow:0 0 0 0 #25d36600}}

/* ===== sheet / menu / toast ===== */
.sheet{position:fixed;inset:0;z-index:60;background:#0b141a88;display:flex;align-items:center;justify-content:center;padding:16px}
.sheet-card{background:var(--panel);border-radius:14px;padding:22px;width:min(480px,100%);max-height:88vh;overflow:auto;box-shadow:0 17px 50px rgba(0,0,0,.3)}
.sheet-card h3{margin:0 0 6px;font-weight:500;font-size:19px}
.sheet-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:18px;flex-wrap:wrap}
.sheet-actions .btn{background:none;color:var(--green-d);padding:9px 14px}
:root[data-theme="dark"] .sheet-actions .btn{color:var(--green)}
.sheet-actions .btn.primary{background:var(--green);color:#fff}
.sheet-actions .btn.danger{color:var(--red)}
.pick{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:8px;cursor:pointer}.pick:hover{background:var(--hover)}
.pick input{width:18px;height:18px;margin:0;accent-color:var(--green)}
.opt{display:flex;align-items:center;gap:16px;padding:12px 6px;border-radius:8px;cursor:pointer}.opt:hover{background:var(--hover)}
.opt .circle{width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;flex:none}
.menu{position:fixed;z-index:70;background:var(--panel);border-radius:10px;padding:8px 0;min-width:210px;box-shadow:0 8px 28px rgba(11,20,26,.26)}
.menu button{display:block;width:100%;text-align:left;padding:11px 22px;font-size:14.5px}.menu button:hover{background:var(--hover)}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#323739;color:#fff;padding:12px 18px;border-radius:8px;z-index:80;max-width:92vw;font-size:14px}
code,.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px;word-break:break-all;background:var(--panel2);padding:3px 5px;border-radius:5px;display:inline-block}
.bottomnav{display:none}
video.scan{width:100%;border-radius:12px;background:#000;max-height:50vh}

/* ===== phone layout (WhatsApp Android style) ===== */
@media (max-width:900px){
  .app{grid-template-columns:1fr;grid-template-rows:1fr auto;background:var(--panel)}
  .rail{display:none}
  .list{border:0;grid-row:1}
  .topbar{padding-top:calc(10px + env(safe-area-inset-top))}
  .fab{bottom:16px}.fab.small{bottom:84px}
  .chat{position:fixed;inset:0;z-index:20;display:none}
  .app.chat-open .chat{display:flex}.app.chat-open .bottomnav{display:none}
  .chat.empty{display:none!important}
  .chat-top{padding-top:calc(8px + env(safe-area-inset-top));border:0}
  .back{display:grid}.msgs{padding:10px 12px}.msg{max-width:84%}
  .composer{background:transparent}
  .bottomnav{display:flex;grid-row:2;background:var(--panel);border-top:1px solid var(--line);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
  .bn-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12.5px;color:var(--muted);font-weight:500}
  .bn-btn .pill{width:58px;height:30px;border-radius:15px;display:grid;place-items:center;position:relative;color:var(--ic)}
  .bn-btn.active{color:var(--txt)}.bn-btn.active .pill{background:var(--chip-on);color:var(--chip-on-txt)}
  .bn-btn .dot{top:3px;right:12px}
}