/* MGI – „Имейли на отделите“ (#ddMail): тесен панел под иконката, в стила на „Изберете профил“. Зарежда се след app.css; mail.js добавя маркировката. */
#ddMail .dd-panel.pm{--pm-line:#E1E8EF}
html body .topbar #ddMail>.dd-panel.pm.pm:not([hidden]){display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:0!important;gap:0!important;font-family:var(--f-body,Inter,system-ui,sans-serif)}
html body .topbar #ddMail>.dd-panel.pm.pm>*{grid-column:auto!important;grid-row:auto!important;flex-shrink:0!important}

/* header */
html body .topbar #ddMail>.dd-panel.pm.pm>.pm-h{position:relative;display:flex!important;align-items:center;gap:12px;padding:16px 14px 14px 16px;margin:0!important;border-bottom:1px solid #EEF2F6;background:#FFFFFF;text-transform:none;letter-spacing:0;font-size:inherit;color:#14202B;border-radius:21px 21px 0 0}
#ddMail .pm-av{position:relative;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#3D8BD0,#1C5B8C);color:#FFFFFF;display:grid;place-items:center;flex:none;box-shadow:0 10px 18px -10px rgba(28,91,140,.7)}
#ddMail .pm-av i{position:absolute;right:-4px;bottom:-4px;width:12px;height:12px;border-radius:50%;background:#1E9E5A;border:2.5px solid #FFFFFF}
#ddMail .pm-ht{flex:1;min-width:0;display:grid;gap:2px}
#ddMail .pm-ht b{font:700 1rem/1.2 Montserrat,var(--f-body,Inter),sans-serif;color:#14202B}
#ddMail .pm-ht span{font-size:.78rem;color:#33424F}
#ddMail .dd-panel.pm .pm-x{width:32px;height:32px;padding:0;border-radius:10px;border:1px solid #DCE6EF;background:#FFFFFF;color:#3B4A5A;display:grid;place-items:center;cursor:pointer;flex:none;align-self:flex-start}
#ddMail .dd-panel.pm .pm-x:hover{background:#F3F7FB;color:#1C5B8C}
#ddMail .dd-panel.pm>.mp-sub{display:none!important}

/* the departments */
html body .topbar #ddMail>.dd-panel.pm.pm>.mp-list{display:grid!important;gap:8px;padding:16px 16px 18px;margin:0!important;border-bottom:1px solid #EEF2F6}
html body .topbar #ddMail .pm .mp-it{display:flex!important;align-items:center;gap:11px!important;padding:9px 10px!important;border-radius:15px!important;border:1px solid var(--pm-line)!important;background:#FFFFFF!important;cursor:pointer;transition:border-color .15s,box-shadow .15s}
html body .topbar #ddMail .pm .mp-it:hover{border-color:#B9D6EF!important;background:#FAFCFE!important}
html body .topbar #ddMail .pm .mp-it[aria-pressed=true]{background:linear-gradient(135deg,#FFFFFF,#E6F1FB)!important;border:1.5px solid #9CC4E6!important;box-shadow:0 12px 24px -18px #1C5B8C}
#ddMail .pm-di{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
#ddMail .pm-di.c-b{background:#E6F1FB;color:#1C5B8C}#ddMail .pm-di.c-g{background:#E3F5EB;color:#167A45}#ddMail .pm-di.c-o{background:#FFF1E5;color:#A8501A}#ddMail .pm-di.c-p{background:#F1EAFB;color:#5E3399}#ddMail .pm-di.c-t{background:#E2F5F6;color:#127380}#ddMail .pm-di.c-r{background:#FDECEA;color:#B42318}#ddMail .pm-di.c-y{background:#FFF6DA;color:#8A5A00}
#ddMail .mp-it[aria-pressed=true] .pm-di{background:linear-gradient(145deg,#3D8BD0,#1C5B8C);color:#FFFFFF;box-shadow:0 8px 16px -9px #1C5B8C}
#ddMail .pm .mp-t{flex:1;min-width:0;display:grid;gap:0}
#ddMail .pm .mp-t b,#ddMail .pm .mp-it[aria-pressed=true] .mp-t b{font-size:.85rem;line-height:1.3;color:#14202B}
#ddMail .pm .mp-e{font:500 .75rem var(--f-mono,ui-monospace,Menlo,Consolas,monospace);color:#5A6875;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .topbar #ddMail .pm .mp-cp{width:30px;height:30px;border-radius:9px;border:1px solid var(--pm-line);background:#FFFFFF;color:#3E6E96;display:grid;place-items:center;flex:none;padding:0}
html body .topbar #ddMail .pm .mp-cp:hover{border-color:#9CC4E6;color:#1C5B8C;background:#F4F9FE}

/* write to the chosen department */
html body .topbar #ddMail>.dd-panel.pm.pm>.pm-st{display:flex!important;align-items:center;gap:10px;margin:16px 16px 10px!important;font:600 .72rem var(--f-body,Inter),sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#5A6875}
#ddMail .pm-st i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;background:linear-gradient(145deg,#FFFFFF,#E6F1FB);border:1px solid #9CC4E6;color:#2E7BBF;box-shadow:0 6px 14px -10px #1C5B8C}
#ddMail .pm-st em{font-style:normal;color:#1C5B8C}
html body .topbar #ddMail>.dd-panel.pm.pm>.mp-form{display:grid!important;gap:9px!important;margin:0 16px 16px!important;padding:12px!important;border:1px solid var(--pm-line)!important;border-radius:16px!important;background:#FFFFFF!important}
#ddMail .pm .mp-row,#ddMail .pm .mp-hint{display:none!important}
html body .topbar #ddMail .pm .mp-form input:not([type=checkbox]),html body .topbar #ddMail .pm .mp-form textarea{width:100%;box-sizing:border-box;min-height:42px;border:1px solid #D3DEE8!important;border-radius:12px!important;padding:10px 12px;font:inherit;font-size:.88rem;background:#FFFFFF}
html body .topbar #ddMail .pm .mp-form textarea{min-height:74px;resize:vertical}
#ddMail .pm .mp-ok{display:flex;gap:9px;align-items:flex-start;font-size:.78rem;line-height:1.4;color:#33424F}
#ddMail .pm .mp-ok a{color:#1C5B8C;font-weight:600}
#ddMail .pm .mp-acts{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
html body .topbar #ddMail .pm .mp-acts .btn{display:inline-flex;align-items:center;gap:7px;height:40px!important;padding:0 18px!important;border-radius:11px!important;background:linear-gradient(145deg,#3D8BD0,#1C5B8C)!important;color:#FFFFFF!important;border:0!important;font-weight:600;box-shadow:0 10px 20px -12px rgba(28,91,140,.8)}
html body .topbar #ddMail .pm .mp-acts .btn:hover{filter:brightness(1.07)}
#ddMail .pm .mp-acts .link{font-weight:600;color:#1C5B8C}

/* computer and tablet: right under the envelope button, the arrow pointing at it */
@media (min-width:761px){
  html body .topbar #ddMail>.dd-panel.pm.pm:not([hidden]){position:fixed!important;inset:auto!important;left:var(--pm-l,auto)!important;top:var(--pm-t,64px)!important;right:auto!important;bottom:auto!important;width:400px!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;border-radius:22px!important;background:#FFFFFF!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 #ddMail>.dd-panel.pm.pm:not([hidden]).pm-scroll{max-height:var(--pm-mh)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain}
  html body .topbar #ddMail>.dd-panel.pm.pm:not([hidden]):before{content:""!important;display:block!important;position:absolute!important;top:-8px!important;left:var(--pm-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}
  #ddMail .dd-panel.pm>.dd-xw,#ddMail .dd-panel.pm>.mhs-h{display:none!important}
  #ddMail .pm .mp-acts{flex-wrap:nowrap}
}

/* phone: the sheet has its own title bar with a back button */
@media (max-width:760px){
  html body .topbar #ddMail>.dd-panel.pm.pm>.pm-h{display:none!important}
  html body .topbar #ddMail>.dd-panel.pm.pm>.mp-list{padding:4px 16px 18px!important;gap:10px!important}
  html body .topbar #ddMail .pm .mp-it{padding:11px 12px!important}
  #ddMail .pm-di{width:40px;height:40px}
  html body .topbar #ddMail .pm .mp-cp{width:38px;height:38px;border-radius:11px}
  html body .topbar #ddMail>.dd-panel.pm.pm>.mp-form{margin:0 16px 16px!important}
  html body .topbar #ddMail .pm .mp-acts .btn{height:46px!important;flex:1;justify-content:center}
  #ddMail .pm .mp-acts{flex-direction:column;align-items:stretch;text-align:center}
}
@media (hover:none){
  html body .topbar #ddMail .pm .mp-it:hover:not([aria-pressed=true]){border-color:var(--pm-line)!important;background:#FFFFFF!important}
}