/* MGI – „Изберете профил“ (#ddWho): цветен панел в стила на гласовия асистент. Зарежда се след app.css; who.js добавя маркировката. */
#ddWho{--pf-c:#2E7BBF;--pf-d:#1C5B8C;--pf-s:#E6F1FB;--pf-b:#9CC4E6;--pf-g:linear-gradient(145deg,#3D8BD0,#1C5B8C)}
#ddWho[data-who="1"]{--pf-c:#1E9E5A;--pf-d:#167A45;--pf-s:#E3F5EB;--pf-b:#9FD6B8;--pf-g:linear-gradient(145deg,#2DB36C,#167A45)}
#ddWho[data-who="2"]{--pf-c:#E07A2E;--pf-d:#A8501A;--pf-s:#FFF1E5;--pf-b:#F2C29C;--pf-g:linear-gradient(145deg,#F08C3E,#C25E1C)}

/* the round button in the top bar takes the colour of the chosen profile */
#ddWho .dd-btn.pf-btn{background:var(--pf-s);color:var(--pf-d);border-color:var(--pf-b)}
#ddWho .dd-btn.pf-btn:hover,#ddWho .dd-btn.pf-btn[aria-expanded=true]{background:var(--pf-s);color:var(--pf-d);border-color:var(--pf-b);filter:brightness(.97);box-shadow:0 0 0 3px var(--pf-s)}

#ddWho .dd-panel.pf{padding:0!important;gap:0;overflow:hidden;border-radius:22px;width:min(380px,calc(100vw - 24px));min-width:0;max-width:calc(100vw - 24px);display:flex;flex-direction:column;font-family:var(--f-body,Inter,system-ui,sans-serif)}
#ddWho .dd-panel.pf:before{background:#FFFFFF}

/* header */
#ddWho .pf .pf-h{position:relative;display:flex;align-items:center;gap:14px;padding:18px 14px 16px 18px;margin:0;background:#FFFFFF;border-bottom:1px solid #EEF2F6;overflow:hidden;text-transform:none;letter-spacing:0;font-size:inherit;color:#14202B}
#ddWho .pf-h:before,#ddWho .pf-h:after{display:none}
#ddWho .pf-h:before{right:-30px;top:-40px;width:140px;height:140px;background:rgba(46,123,191,.10)}
#ddWho .pf-h:after{right:70px;bottom:-50px;width:90px;height:90px;background:rgba(224,122,46,.10)}
#ddWho .pf-av{position:relative;width:50px;height:50px;border-radius:16px;background:linear-gradient(145deg,#3D8BD0,#1C5B8C);color:#FFFFFF;display:grid;place-items:center;flex:none;box-shadow:0 12px 22px -10px rgba(28,91,140,.7)}
#ddWho .pf-av i{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;background:#1E9E5A;border:2.5px solid #FFFFFF;display:grid;place-items:center}
#ddWho .pf-ht{position:relative;flex:1;min-width:0;display:grid;gap:4px}
#ddWho .pf-ht b{font:700 1.1rem/1.2 Montserrat,var(--f-body,Inter),sans-serif;color:#14202B}
#ddWho .pf-ht span{font-size:.82rem;color:#33424F}
#ddWho .pf-tags{display:flex!important;flex-wrap:wrap;gap:6px;margin-top:2px}
#ddWho .pf-tags em{font:600 .7rem/1.5 var(--f-body,Inter),sans-serif;font-style:normal;padding:1px 9px;border-radius:999px;background:#FFFFFF;border:1px solid #C9DDF0;color:#1C5B8C}
#ddWho .pf-tags em:nth-child(2){border-color:#BFE3CF;color:#167A45}
#ddWho .pf-tags em:nth-child(3){border-color:#F3CFB2;color:#A8501A}
#ddWho .dd-panel.pf .pf-x{position:relative;align-self:flex-start;width:36px;height:36px;padding:0;border-radius:12px;border:1px solid #DCE6EF;background:#FFFFFF;color:#3B4A5A;display:grid;place-items:center;cursor:pointer;flex:none}
#ddWho .dd-panel.pf .pf-x:hover{background:#F3F7FB;color:#1C5B8C}
#ddWho .dd-panel.pf .pf-x:after{display:none}

/* the three profiles */
#ddWho .pf-list{display:grid;gap:10px;padding:14px 16px 0}
#ddWho .dd-panel.pf .pf-card{--k:#2E7BBF;--kd:#1C5B8C;--ks:#E6F1FB;--kb:#9CC4E6;--kg:linear-gradient(145deg,#3D8BD0,#1C5B8C);display:flex;align-items:center;gap:14px;width:100%;padding:13px 15px;border-radius:18px;background:#FFFFFF;border:1px solid #E1E8EF;cursor:pointer;text-align:left;transition:transform .15s,box-shadow .15s,border-color .15s}
#ddWho .dd-panel.pf .pf-card.pf-k1{--k:#1E9E5A;--kd:#167A45;--ks:#E3F5EB;--kb:#9FD6B8;--kg:linear-gradient(145deg,#2DB36C,#167A45)}
#ddWho .dd-panel.pf .pf-card.pf-k2{--k:#E07A2E;--kd:#A8501A;--ks:#FFF1E5;--kb:#F2C29C;--kg:linear-gradient(145deg,#F08C3E,#C25E1C)}
#ddWho .dd-panel.pf .pf-card:hover,#ddWho .dd-panel.pf .pf-card:focus-visible{transform:translateY(-1px);box-shadow:0 12px 24px -18px rgba(16,40,70,.55);background:#FFFFFF;outline:none;border-color:var(--kb)}
#ddWho .dd-panel.pf .pf-card[aria-checked=true]{background:linear-gradient(135deg,#FFFFFF,var(--ks));border:1.5px solid var(--kb);box-shadow:0 12px 24px -18px var(--kd)}
#ddWho .dd-panel.pf .pf-card:after{display:none}
#ddWho .dd-panel.pf .pf-card .dd-ico{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;flex:none;background:var(--ks);color:var(--kd)}
#ddWho .dd-panel.pf .pf-card .dd-ico svg{width:23px;height:23px}
#ddWho .dd-panel.pf .pf-card:hover .dd-ico{background:var(--ks);color:var(--kd)}
#ddWho .dd-panel.pf .pf-card[aria-checked=true] .dd-ico{background:var(--kg);color:#FFFFFF;box-shadow:0 10px 20px -10px var(--kd)}
#ddWho .dd-panel.pf .pf-card .dd-txt{flex:1;min-width:0;display:grid;gap:3px}
#ddWho .dd-panel.pf .pf-card .dd-txt b,#ddWho .dd-panel.pf .pf-card[aria-checked=true] .dd-txt b{font-size:.95rem;color:#14202B;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#ddWho .dd-panel.pf .pf-card .dd-txt>span{font-size:.82rem;color:#5A6875;line-height:1.4;font-weight:400}
#ddWho .pf-tag{padding:1px 8px;border-radius:999px;font:600 .7rem/1.5 var(--f-body,Inter),sans-serif;background:var(--ks);color:var(--kd)}
#ddWho .pf-dot{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;background:#FFFFFF;border:2px solid #C9D6E2;box-sizing:border-box}
#ddWho .pf-dot svg{display:none}
#ddWho .pf-card[aria-checked=true] .pf-dot{background:var(--k);border-color:var(--k)}
#ddWho .pf-card[aria-checked=true] .pf-dot svg{display:block}

/* quick links of the chosen profile */
#ddWho .pf .who-acts.pf-acts{display:grid;gap:12px;margin:10px 16px 14px;padding:14px;border-radius:18px;background:#FFFFFF;border:1px solid #E1E8EF}
#ddWho .pf-at{display:flex;align-items:flex-start;gap:10px}
#ddWho .pf-at>i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;background:#EEF4FA;color:#1C5B8C}
#ddWho .pf-at b{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:#5A6875}
#ddWho .pf-acts .who-note{margin:2px 0 0;font-size:.82rem;color:#33424F;line-height:1.4}
#ddWho .pf-acts>.va-ex-t{display:none}
#ddWho .pf-acts .who-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#ddWho .pf-acts .who-links a.msg-act{display:flex;align-items:center;gap:10px;min-height:48px;box-sizing:border-box;padding:8px 10px;border-radius:14px;background:#FFFFFF;border:1px solid #E1E8EF;text-decoration:none;color:#22303C;font:600 .8rem/1.25 var(--f-body,Inter),sans-serif;transition:transform .15s,box-shadow .15s,border-color .15s;white-space:normal}
#ddWho .pf-acts .who-links a.msg-act:after{display:none;content:none}
#ddWho .pf-acts .who-links a.msg-act:hover{transform:translateY(-1px);box-shadow:0 10px 20px -16px rgba(16,40,70,.6);border-color:#B9D6EF;color:#1C5B8C}
#ddWho .pf-li{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}
#ddWho .pf-li.c-blue{background:#E6F1FB;color:#1C5B8C}
#ddWho .pf-li.c-green{background:#E3F5EB;color:#167A45}
#ddWho .pf-li.c-orange{background:#FFF1E5;color:#A8501A}
#ddWho .pf-li.c-purple{background:#F1EAFB;color:#5E3399}
#ddWho .pf-li.c-teal{background:#E2F5F6;color:#127380}
#ddWho .pf-lt{flex:1;min-width:0}
#ddWho .pf-ar{flex:none;color:#8A99A8}

/* „Аз съм“ in the phone menu: the icon in the colour of the chosen profile */
.mx-b[data-for="#ddWho"] svg{color:#1C5B8C}
.mx-b[data-for="#ddWho"][data-who="1"] svg{color:#167A45}
.mx-b[data-for="#ddWho"][data-who="2"] svg{color:#A8501A}

/* footer */
#ddWho .pf-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 18px 16px;border-top:1px solid #EEF2F6;background:#FFFFFF}
#ddWho .pf-foot>span{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:#5A6875}
#ddWho .dd-panel.pf .pf-login{display:inline-flex;align-items:center;gap:6px;width:auto;min-height:38px;padding:0 15px;border-radius:11px;border:0;background:linear-gradient(145deg,#3D8BD0,#1C5B8C);color:#FFFFFF;font:600 .8rem var(--f-body,Inter),sans-serif;cursor:pointer;box-shadow:0 10px 20px -12px rgba(28,91,140,.8)}
#ddWho .dd-panel.pf .pf-login:hover{filter:brightness(1.07);background:linear-gradient(145deg,#3D8BD0,#1C5B8C);color:#FFFFFF}
#ddWho .dd-panel.pf .pf-login:after{display:none}

/* phone: the panel is a sheet from below (app.css); bigger targets, the login button full width */
/* computer and tablet: a compact panel right under the round button, with a small arrow pointing at it – like the voice assistant */
@media (min-width:761px){
  html body .topbar #ddWho>.dd-panel.pf.pf:not([hidden]){position:fixed!important;inset:auto!important;left:var(--pf-l,auto)!important;top:var(--pf-t,64px)!important;right:auto!important;bottom:auto!important;width:380px!important;min-width:0!important;max-width:calc(100vw - 24px)!important;max-height:none!important;overflow:visible!important;transform:none!important;margin:0!important;border:1px solid #D3E0EC!important;box-shadow:0 30px 70px -28px rgba(16,40,70,.45),0 2px 6px rgba(16,40,70,.06)!important;z-index:140!important}
  html body .topbar #ddWho>.dd-panel.pf.pf:not([hidden]).pf-scroll{max-height:var(--pf-mh)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain}
  html body .topbar #ddWho>.dd-panel.pf.pf:not([hidden]):before{content:""!important;display:block!important;position:absolute!important;top:-8px!important;left:var(--pf-cx,50%)!important;right:auto!important;margin-left:-8px!important;width:16px!important;height:16px!important;background:#FFFFFF!important;border-left:1px solid #D3E0EC!important;border-top:1px solid #D3E0EC!important;transform:rotate(45deg)!important;border-radius:3px 0 0!important;z-index:2}
  #ddWho .pf .pf-h{gap:12px;padding:14px 12px 12px 14px;border-radius:21px 21px 0 0}
  #ddWho .pf-h:after{display:none}
  #ddWho .dd-panel.pf>.dd-xw{display:none!important}
  #ddWho .pf-av{width:42px;height:42px;border-radius:13px}
  #ddWho .pf-av svg{width:20px;height:20px}
  #ddWho .pf-av i{width:16px;height:16px;border-width:2px}
  #ddWho .pf-ht{gap:3px}
  #ddWho .pf-ht b{font-size:1rem}
  #ddWho .pf-ht span{font-size:.75rem}
  #ddWho .pf-tags{display:none!important}
  #ddWho .dd-panel.pf .pf-x{width:32px;height:32px;border-radius:10px}
  #ddWho .pf-list{gap:8px;padding:12px 12px 4px}
  #ddWho .dd-panel.pf .pf-card{gap:11px;padding:9px 11px;border-radius:15px}
  #ddWho .dd-panel.pf .pf-card .dd-ico{width:38px;height:38px;border-radius:12px}
  #ddWho .dd-panel.pf .pf-card .dd-ico svg{width:19px;height:19px}
  #ddWho .dd-panel.pf .pf-card .dd-txt b,#ddWho .dd-panel.pf .pf-card[aria-checked=true] .dd-txt b{font-size:.875rem;gap:6px}
  #ddWho .dd-panel.pf .pf-card .dd-txt>span{font-size:.75rem;line-height:1.35}
  #ddWho .pf-tag{font-size:.625rem;padding:1px 7px}
  #ddWho .pf-dot{width:20px;height:20px}
  #ddWho .pf-dot svg{width:11px;height:11px}
  #ddWho .pf .who-acts.pf-acts{gap:9px;margin:8px 12px 12px;padding:11px;border-radius:16px}
  #ddWho .pf-at{align-items:center;gap:8px}
  #ddWho .pf-at>i{width:24px;height:24px;border-radius:8px}
  #ddWho .pf-at>i svg{width:13px;height:13px}
  #ddWho .pf-at b{font-size:.69rem}
  #ddWho .pf-acts .who-note{display:none}
  #ddWho .pf-acts .who-links{grid-template-columns:minmax(0,1fr);gap:6px}
  #ddWho .pf-acts .who-links a.msg-act{min-height:40px;padding:5px 10px 5px 6px;border-radius:12px;font-size:.8125rem}
  #ddWho .pf-acts .who-links a.msg-act:hover{transform:none;box-shadow:none;background:#FAFCFE}
  #ddWho .pf-li{width:28px;height:28px;border-radius:9px}
  #ddWho .pf-li svg{width:15px;height:15px}
  #ddWho .pf-foot{gap:8px;padding:10px 14px 12px;border-radius:0 0 21px 21px;flex-wrap:nowrap}
  #ddWho .pf-foot>span{font-size:.6875rem}
  #ddWho .pf-foot>span svg{display:none}
  #ddWho .dd-panel.pf .pf-login{min-height:32px;padding:0 12px;border-radius:10px;font-size:.75rem;white-space:nowrap;flex:none}
  #ddWho .dd-panel.pf .pf-card:hover,#ddWho .dd-panel.pf .pf-card:focus-visible{transform:none}
}
@media (max-width:1024px){
  #ddWho .dd-panel.pf{width:auto;max-width:none;padding-bottom:env(safe-area-inset-bottom)!important}
}
@media (max-width:760px){
  /* the phone sheet already has its own title bar with a back button: the coloured band keeps only the line and the tags */
  #ddWho .dd-panel.pf>.pf-h{padding:12px 16px!important;border-radius:16px!important;margin:12px 14px 0!important;border:1px solid #DCE6EF!important;min-height:0!important}
  #ddWho .pf-av,#ddWho .pf-ht>b,#ddWho .dd-panel.pf .pf-x{display:none}
}
@media (max-width:640px){
  #ddWho .pf-list{padding:12px 14px 0;gap:9px}
  #ddWho .dd-panel.pf .pf-card{min-height:72px;padding:11px 13px;gap:12px}
  #ddWho .dd-panel.pf .pf-card .dd-ico{width:44px;height:44px;border-radius:14px}
  #ddWho .pf .who-acts.pf-acts{margin:10px 14px 12px;padding:12px}
  #ddWho .pf-acts .who-note{display:none}
  #ddWho .pf-ar{display:none}
  #ddWho .pf-foot{flex-direction:column-reverse;align-items:stretch;padding:12px 16px 4px}
  #ddWho .pf-foot>span{justify-content:center}
  #ddWho .dd-panel.pf .pf-login{justify-content:center;min-height:46px;font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){#ddWho .pf-card,#ddWho .pf-acts a{transition:none!important;transform:none!important}}

/* more room: the profiles, a line, then „Бързо до“ with its title outside the box (approved 8.11.2026) */
@media (min-width:761px){
  html body .topbar #ddWho>.dd-panel.pf.pf:not([hidden]){width:400px!important}
  #ddWho .pf .pf-h{padding:16px 14px 14px 16px}
  #ddWho .pf-list{gap:10px;padding:16px 16px 18px}
  #ddWho .dd-panel.pf .pf-card{padding:11px 12px}
  #ddWho .pf .who-acts.pf-acts{margin:0 16px 16px;padding:14px;gap:12px;position:relative}
  #ddWho .pf-list{border-bottom:1px solid #EEF2F6;margin-bottom:16px}
  #ddWho .pf-acts .who-links{gap:8px}
  #ddWho .pf-acts .who-links a.msg-act{min-height:44px;padding:6px 12px 6px 7px}
  #ddWho .pf-li{width:30px;height:30px}
  #ddWho .pf-foot{padding:12px 16px 14px}
}
@media (max-width:760px){
  #ddWho .pf-list{gap:10px;padding:14px 14px 18px;border-bottom:1px solid #EEF2F6;margin-bottom:16px}
  #ddWho .pf .who-acts.pf-acts{margin:0 14px 14px}
  #ddWho .pf-acts .who-links{gap:10px}
}
#ddWho .pf .who-acts.pf-acts{background:transparent!important;border:0!important;padding:0!important;gap:10px!important}
#ddWho .pf-acts .who-links{background:#FFFFFF;border:1px solid #E1E8EF;border-radius:16px;padding:12px}
#ddWho .pf-at{padding:0 2px}
#ddWho .pf-at{align-items:center!important;gap:10px!important}
#ddWho .pf-at>i{width:30px!important;height:30px!important;border-radius:10px!important;background:linear-gradient(145deg,#FFFFFF,var(--pf-s))!important;border:1px solid var(--pf-b)!important;color:var(--pf-c)!important;box-shadow:0 6px 14px -10px var(--pf-d)!important}
#ddWho .pf-at>i svg{width:15px!important;height:15px!important}
#ddWho .pf-at b{font-size:.72rem!important;color:#5A6875!important}
#ddWho .pf-at b .pf-who{color:var(--pf-d)}
@media (max-width:760px){
  #ddWho .dd-panel.pf>.pf-h{display:none!important}
  #ddWho .pf-list{padding:4px 0 18px!important;gap:10px!important}
  #ddWho .pf .who-acts.pf-acts{margin-left:16px!important;margin-right:16px!important}
  #ddWho .dd-panel.pf .pf-card{min-height:0!important;padding:12px 14px!important;gap:12px!important}
  #ddWho .dd-panel.pf .pf-card .dd-ico{width:44px!important;height:44px!important}
  #ddWho .dd-panel.pf .pf-card .dd-txt>span{font-size:.8rem!important}
  #ddWho .pf .who-acts.pf-acts{margin:0 16px 16px!important}
  #ddWho .pf-acts .who-links{grid-template-columns:minmax(0,1fr)!important;gap:8px!important;padding:10px!important}
  #ddWho .pf-acts .who-links a.msg-act{min-height:48px!important;font-size:.9rem!important}
  #ddWho .pf-ar{display:block!important}
  #ddWho .pf-foot{padding:14px 16px 6px!important}
}
@media (hover:none){
  #ddWho .dd-panel.pf .pf-card:hover:not([aria-checked=true]){border-color:#E1E8EF!important;box-shadow:none!important}
}
/* the panel scrolls as a whole: its parts never squeeze */
#ddWho .dd-panel.pf>*{flex-shrink:0}