/* Yamama Mail */
html,body{height:100%}
body{background:var(--bg)}
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;padding:8px 16px;background:rgba(250,248,253,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);height:58px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:17px}
.brand .logo{width:34px;height:34px;border-radius:11px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff}
.tabs{display:flex;gap:4px;background:var(--p1);padding:4px;border-radius:12px;margin-inline-start:10px}
.tabs button{border:0;background:none;padding:6px 14px;border-radius:9px;font-weight:700;cursor:pointer;color:var(--ink2);display:flex;gap:6px;align-items:center;min-height:34px;font:inherit;font-weight:700}
.tabs button[aria-selected=true]{background:#fff;color:var(--p8);box-shadow:0 1px 3px rgba(36,9,63,.12)}
.sp{flex:1}.only-m{display:none}.ltr{direction:ltr;unicode-bidi:isolate}
.ic.xs{width:13px;height:13px}.ic.on{color:#c27a12;fill:#f2c14e}
.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.chip.sample{background:#fff4dc;color:#7a4b00}.chip.warn{background:#fff1e0;color:#8a4a00}.chip.ok{background:#e3f5ec;color:#1f6b47}
.ok{color:var(--ok)}.warn{color:var(--warn)}
/* mail layout */
.mail{display:grid;grid-template-columns:248px minmax(300px,400px) 1fr;height:calc(100dvh - 58px);overflow:hidden}
.rail{padding:14px 12px;border-inline-end:1px solid var(--line);overflow:auto;display:flex;flex-direction:column;gap:10px;background:#fcfbfe}
.accsel{display:flex;flex-direction:column;gap:4px}.accsel select{min-height:38px;border:1px solid var(--line);border-radius:10px;padding:0 8px;background:#fff;font:inherit;font-size:14px}
.folders{display:flex;flex-direction:column;gap:2px}
.fi{display:flex;align-items:center;gap:10px;border:0;background:none;padding:8px 10px;border-radius:10px;cursor:pointer;font:inherit;font-size:14.5px;color:var(--ink);text-align:start;min-height:40px}
.fi span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fi b{font-size:12px;background:var(--p2);color:var(--p8);padding:1px 8px;border-radius:999px}
.fi:hover{background:var(--p1)}.fi.on{background:var(--p2);color:var(--p8);font-weight:700}
.fhead{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 0;font-size:12px;font-weight:700;color:var(--mut)}
.conn{display:flex;gap:6px;align-items:flex-start;margin-top:auto}
.scrim{display:none}
.list{display:flex;flex-direction:column;border-inline-end:1px solid var(--line);min-width:0;background:#fff}
.lhead{padding:12px 12px 8px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.search{position:relative;display:flex}.search input{width:100%;min-height:40px;border:1px solid var(--line);border-radius:12px;padding:0 38px;background:var(--p1);font:inherit;font-size:15px;outline:none}.search input:focus{background:#fff;border-color:var(--p5);box-shadow:0 0 0 3px var(--p2)}
.search .si{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--mut);display:flex}
.lbar{display:flex;align-items:center;gap:6px}.lbar h2{margin:0;font-size:17px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.fc{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 12px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;min-height:30px;color:var(--ink2)}.fc.on{background:var(--p8);border-color:var(--p8);color:#fff}
.bulk{display:flex;align-items:center;gap:2px;background:var(--p1);border-radius:10px;padding:2px 8px;font-size:13px}
.items{overflow:auto;flex:1}
.it{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:start;padding:11px 12px;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
.it:hover{background:#fbf9fe}.it.on{background:var(--p1)}.it.on::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--grad)}
.it .ck{display:flex;align-items:center;height:36px}.it .ck input{width:17px;height:17px;accent-color:var(--p6)}
.av{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;background:linear-gradient(135deg,hsl(calc(var(--h) * 1deg) 45% 32%),hsl(calc(var(--h) * 1deg + 40deg) 50% 27%)) /* w25: lightness 46/38 → 32/27, white letters ≥4.75:1 for every hue (was 2.46 min) */;flex:none;font-size:15px}
.ib{min-width:0}.ib>div{display:flex;align-items:center;gap:6px;min-width:0}
.who{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.it.unread .who,.it.unread .sub{font-weight:800;color:var(--ink)}
.it.unread::after{content:'';position:absolute;top:18px;inset-inline-end:8px;width:8px;height:8px;border-radius:50%;background:var(--p6)}
.when{font-size:12px;color:var(--mut);white-space:nowrap}.cnt{font-size:11px;background:var(--p1);color:var(--p8);border-radius:999px;padding:0 6px}
.sub{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)}
.sn{font-size:13px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.r3 .chip{font-size:11px;padding:0 7px}
.star{border:0;background:none;color:var(--line);cursor:pointer;padding:4px;margin-top:14px;border-radius:8px;display:flex}.star:hover{color:var(--mut)}.star.on{color:#c27a12}.star.on .ic{fill:#f2c14e}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--mut);padding:40px 16px;text-align:center}.empty .ic{width:34px;height:34px;color:var(--p3)}.empty.big{height:100%}
.sk{height:62px;margin:10px 12px;border-radius:12px;background:linear-gradient(90deg,var(--p1),#fff,var(--p1));background-size:200% 100%;animation:sk 1.2s infinite}.sk.tall{height:320px}@keyframes sk{to{background-position:-200% 0}}
/* reading */
.read{overflow:auto;min-width:0;background:var(--bg)}
.rp{padding:12px 22px 30px;max-width:980px;margin:0 auto}
.rtool{display:flex;align-items:center;gap:2px;position:sticky;top:0;background:var(--bg);padding:4px 0;z-index:2}
.rtool .btn.on{color:#c27a12}.rtool .btn.on .ic{fill:#f2c14e}
.subj{font-size:22px;margin:8px 0 12px;line-height:1.35}
.msgs{display:flex;flex-direction:column;gap:10px}
.msg{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);overflow:hidden}
.mh{display:flex;gap:10px;padding:12px 14px;cursor:pointer;align-items:flex-start}.mw{flex:1;min-width:0}.mw .r1{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.mw .r2{margin-top:2px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}.msg.open .prev{display:none}.msg:not(.open) .mb{display:none}.prev{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mb{padding:0 14px 14px;padding-inline-start:60px}.mb iframe{width:100%;border:0;min-height:60px;display:block}
.imgb{margin-bottom:8px}
.atts,.catts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.att{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:13px;color:var(--ink);text-decoration:none;background:#fff;max-width:100%}
.att span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}.att i{font-style:normal;color:var(--mut);font-size:12px}.att.off{opacity:.75}.att button{border:0;background:none;cursor:pointer;font-size:16px;color:var(--mut);padding:0 2px}.att.up{opacity:.7}
.replybar{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ai-out{font-size:15px;line-height:1.7}.ai-out h3{margin:4px 0 8px;font-size:16px}.ai-wait{display:flex;gap:8px;align-items:center;color:var(--mut);padding:8px 0}
.tasks{display:flex;flex-direction:column;gap:6px;margin:10px 0}.task{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px}.task i{margin-inline-start:auto;font-style:normal;color:var(--mut);font-size:12px}
/* compose */
.dlg.wide.cdlg{max-width:760px;width:calc(100vw - 32px)}
.compose{display:flex;flex-direction:column;gap:6px}.chd h2{margin:0 0 4px;font-size:18px;padding-inline-end:36px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);min-height:42px}.cl{font-size:13px;color:var(--mut);min-width:54px}
.cf select,.cf>input{flex:1;border:0;min-height:40px;font:inherit;font-size:15px;outline:none;background:transparent;min-width:0}
.chipin{flex:1;display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:4px 0;min-width:0;cursor:text}.chipin input{flex:1;min-width:120px;border:0;outline:none;font:inherit;font-size:15px;min-height:32px;background:transparent;direction:ltr}
.chipin.bad{animation:shake .3s}@keyframes shake{25%{transform:translateX(4px)}75%{transform:translateX(-4px)}}
.ch{display:inline-flex;align-items:center;gap:4px;background:var(--p1);color:var(--p8);border-radius:999px;padding:2px 4px 2px 10px;font-size:13px;max-width:100%}[dir=rtl] .ch{padding:2px 10px 2px 4px}.ch button{border:0;background:none;cursor:pointer;color:var(--p6);font-size:15px;line-height:1;width:20px;height:20px;border-radius:50%}
.ccrow{display:flex;justify-content:flex-end}
.tb{display:flex;flex-wrap:wrap;gap:2px;align-items:center;padding:4px 0;border-bottom:1px solid var(--line)}.tb select{min-height:32px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;background:#fff}.tb input[type=color]{width:32px;height:30px;border:0;background:none;padding:0;cursor:pointer}
.ed{min-height:220px;max-height:46vh;overflow:auto;padding:10px 2px;outline:none;font-size:15px;line-height:1.7}.ed blockquote{margin:6px 0;padding-inline-start:12px;border-inline-start:3px solid var(--p2);color:var(--ink2)}.ed .sig{color:var(--ink2)}
.sig-ed{min-height:80px;border:1px solid var(--line);border-radius:11px;padding:8px 12px;background:#fff;font-weight:400}
.cfoot{display:flex;align-items:center;gap:6px;padding-top:8px;flex-wrap:wrap}
/* calendar */
.cal,.contacts,.settings{max-width:1180px;margin:0 auto;padding:14px 18px 40px}
.ctool{display:flex;align-items:center;gap:6px;margin-bottom:12px;flex-wrap:wrap}.ctool h2,.ctool h3{margin:0 6px;font-size:19px}
.seg{display:flex;gap:2px;background:var(--p1);padding:3px;border-radius:10px}.seg button{border:0;background:none;padding:5px 12px;border-radius:8px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink2);min-height:32px}.seg button[aria-selected=true]{background:#fff;color:var(--p8);box-shadow:0 1px 3px rgba(36,9,63,.12)}
.mgrid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.wd{padding:8px;font-size:12px;font-weight:700;color:var(--mut);text-align:center;border-bottom:1px solid var(--line);background:#fcfbfe}
.md{min-height:104px;border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line);padding:4px;display:flex;flex-direction:column;gap:2px;cursor:pointer;min-width:0}.md:nth-child(7n+7){border-inline-end:0}.md:hover{background:#fbf9fe}.md.out{background:#fcfbfe}.md.out .dn{color:var(--p3)}
.dn{font-size:12px;font-weight:700;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%}.md.today .dn{background:var(--grad);color:#fff}
.ev{border:0;text-align:start;font:inherit;font-size:12px;background:color-mix(in srgb,var(--c) 14%,#fff);color:color-mix(in srgb,var(--c) 80%,#000);border-inline-start:3px solid var(--c);border-radius:6px;padding:2px 6px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-height:22px}.ev i{font-style:normal;opacity:.8;margin-inline-end:4px}
.more{font-size:11px;color:var(--mut);padding:0 4px}
.tgrid{display:grid;grid-template-columns:56px repeat(var(--days),1fr);background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.th{padding:8px;text-align:center;font-size:13px;border-bottom:1px solid var(--line);cursor:pointer;color:var(--ink2)}.th b{font-size:16px}.th.today b{color:#fff;background:var(--grad);border-radius:50%;padding:2px 7px}
.ad{border-bottom:1px solid var(--line);padding:3px;font-size:11px;color:var(--mut);display:flex;flex-direction:column;gap:2px;min-height:30px}
.hours{grid-column:1}.hr{font-size:11px;color:var(--mut);text-align:center;border-bottom:1px solid var(--line);box-sizing:border-box;padding-top:2px}
.col{position:relative;border-inline-start:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0,transparent 47px,var(--line) 47px,var(--line) 48px);grid-row:3}
.hours{grid-row:3}
.evb{position:absolute;inset-inline:3px;border:0;text-align:start;font:inherit;background:color-mix(in srgb,var(--c) 16%,#fff);border-inline-start:3px solid var(--c);border-radius:8px;padding:3px 6px;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;font-size:12px;color:color-mix(in srgb,var(--c) 80%,#000)}.evb i{font-style:normal;opacity:.85}
.now{position:absolute;inset-inline:0;height:2px;background:var(--p6)}.now::before{content:'';position:absolute;inset-inline-start:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--p6)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}.row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;font-size:14px;margin-bottom:12px}
.switch input[type=checkbox]{appearance:none;width:42px;height:24px;border-radius:12px;background:var(--line);position:relative;cursor:pointer;transition:.2s;flex:none}.switch input[type=checkbox]::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}.switch input:checked{background:var(--p6)}.switch input:checked::after{inset-inline-start:21px}
.colors{display:flex;gap:8px;margin:4px 0 8px}.colors label{width:28px;height:28px;border-radius:50%;background:var(--c);cursor:pointer;display:flex;align-items:center;justify-content:center}.colors input{appearance:none;width:12px;height:12px;border-radius:50%;margin:0}.colors input:checked{background:#fff}
.dlg .acts .sp{flex:1}
/* contacts + settings */
.clist{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:10px}
.crow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}.crow:last-child{border-bottom:0}.cb{flex:1;min-width:0;display:flex;flex-direction:column}.cb b{display:flex;align-items:center;gap:6px}
.sugh{font-size:14px;color:var(--mut);margin:18px 2px 0}
.settings h2{margin:4px 0 12px}.stabs{margin-bottom:14px;width:max-content;max-width:100%;overflow-x:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-bottom:14px}
.card{padding:16px}.acard .ah{display:flex;gap:10px;align-items:center;margin-bottom:12px}.acard .ah>div{display:flex;flex-direction:column;min-width:0}.acard .ah b{overflow:hidden;text-overflow:ellipsis}
.acts-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.conn-card h3{margin:0 0 6px}.presets{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
details summary{cursor:pointer;margin:4px 0 10px;color:var(--ink2);font-weight:700}
.rules{display:flex;flex-direction:column;gap:6px}.rrow{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;flex-wrap:wrap}.rrow>div{display:flex;flex-direction:column;min-width:0}
@media (max-width:1100px){.mail{grid-template-columns:220px 330px 1fr}}
@media (max-width:820px){
  .top{padding:6px 10px;gap:6px}.brand span{display:none}.tabs{margin-inline-start:0}.tabs button{padding:6px 10px}.tabs button span{display:none}.only-m{display:inline-flex}
  .mail{grid-template-columns:1fr;position:relative}
  .rail{position:fixed;top:58px;bottom:0;inset-inline-start:0;width:min(300px,84vw);z-index:40;transform:translateX(105%);transition:transform .2s;box-shadow:var(--sh)}[dir=ltr] .rail{transform:translateX(-105%)}
  .mail.rail-open .rail{transform:none}.mail.rail-open .scrim{display:block;position:fixed;inset:58px 0 0;background:rgba(36,9,63,.25);z-index:39}
  .mail.m-list .read{display:none}.mail.m-read .list{display:none}
  .rp{padding:6px 12px 24px}.subj{font-size:19px}.mb{padding-inline-start:14px}
  .md{min-height:70px}.ev{font-size:10.5px;padding:1px 4px}.ev i{display:none}
  .cal,.contacts,.settings{padding:10px 10px 30px}.row3{grid-template-columns:1fr 1fr}.row3 .fld:first-child{grid-column:1/-1}
  .cards{grid-template-columns:1fr}.dlg.wide.cdlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0}
  .ed{max-height:none;min-height:180px}.ctool .btn span{display:none}.ctool h2{font-size:16px}
  .tgrid{grid-template-columns:44px repeat(var(--days),1fr)}.th{font-size:11px;padding:6px 2px}.evb{font-size:10.5px;padding:2px 3px}
}

.fab{display:none}
@media (max-width:820px){.mail.m-list .fab{display:flex;position:fixed;inset-inline-end:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:30;align-items:center;gap:8px;height:52px;padding:0 20px;border:0;border-radius:18px;background:var(--grad);color:#fff;font:inherit;font-weight:700;box-shadow:0 12px 28px -10px rgba(59,19,102,.6);cursor:pointer}.mail.m-list .fab .ic{width:20px;height:20px}.mail.rail-open .fab{display:none}}
.chipin input::-webkit-calendar-picker-indicator{display:none!important;opacity:0}
#yo-toast{pointer-events:none}

/* polish r2: phone tap targets >=36px, toast above the compose FAB */
@media (max-width:820px){
 #toast,.toast,body .toast.on{bottom:calc(96px + env(safe-area-inset-bottom))!important}
 .star{min-width:36px;min-height:36px;padding:6px;margin-top:8px;align-items:center;justify-content:center}
 .it .ck input{-webkit-appearance:none;appearance:none;width:36px;height:36px;margin:-9px;border-radius:10px;cursor:pointer;background:center/19px 19px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='18' height='18' rx='4' fill='%23fff' stroke='%23b9b0c9' stroke-width='1.6'/%3E%3C/svg%3E")}
 .it .ck input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='18' height='18' rx='4' fill='%236b2fb3'/%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
 .it .ck input:focus-visible{outline:2px solid var(--p6);outline-offset:-6px}
 .fc{min-height:36px;padding:6px 14px}
 [data-view]{min-height:36px!important;height:auto!important}
 [data-wal],[data-newf],[data-refresh]{min-height:36px!important;height:36px!important;min-width:36px!important}
 a[data-connect]{display:inline-flex;align-items:center;min-height:36px;padding:0 6px}
 .brand{min-width:36px;min-height:36px}
 .dlg [data-x],.dlg-back [data-x]{min-width:36px!important;min-height:36px!important}
 a[data-sw]{display:inline-flex;align-items:center;min-height:36px;padding:0 4px}
}

/* AI inbox triage */
.tri{display:flex;flex-direction:column;gap:14px;max-height:60vh;overflow:auto;margin:6px 0 10px}
.tri-g h3{display:flex;align-items:center;gap:6px;font-size:14px;margin:0 0 6px}
.tri-n{margin-inline-start:auto;font-size:12px;font-weight:600;padding:1px 9px;border-radius:999px;background:var(--brand-soft,#efe9fb);color:var(--brand,#6d4bd8)}
.tri-urgent h3{color:#b42318}.tri-reply h3{color:var(--brand,#6d4bd8)}
.tri-it{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:start;padding:9px 11px;margin:0 0 6px;border:1px solid var(--line,#e7e3f0);border-radius:10px;background:var(--card,#fff);cursor:pointer;transition:transform .18s ease,background-color .18s ease;min-height:44px}
.tri-it:hover{background:var(--hover,#f7f4fd)}.tri-it:active{transform:scale(.99)}
.tri-it b{font-size:14px;font-weight:600}.tri-it span{font-size:12.5px;opacity:.75}
.tri-btn.busy{opacity:.6}
@media (prefers-reduced-motion:reduce){.tri-it{transition:none}}

/* undo send */
.undo-send{position:fixed;bottom:22px;inset-inline-start:50%;transform:translate(-50%,12px);opacity:0;z-index:90;display:flex;align-items:center;gap:12px;background:#16181f;color:#fff;border-radius:14px;padding:10px 10px 10px 16px;box-shadow:0 10px 30px rgba(0,0,0,.22);font:600 14px/1.3 inherit;transition:opacity .2s ease,transform .2s ease}
[dir=rtl] .undo-send{transform:translate(50%,12px);padding:10px 16px 10px 10px}
.undo-send.on{opacity:1;transform:translate(-50%,0)}[dir=rtl] .undo-send.on{transform:translate(50%,0)}
.undo-send .btn{background:#fff;color:#16181f;border:0;border-radius:10px;padding:7px 14px;font-weight:700;min-height:36px}
.undo-send .us-ring{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:usr .9s linear infinite}
@keyframes usr{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.undo-send .us-ring{animation:none}}
.keys{display:grid;gap:6px;margin-top:8px}.krow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 10px;border-radius:10px;background:var(--bg2,#f5f6f8)}.krow kbd{font:600 12px ui-monospace,monospace;background:#fff;border:1px solid #dfe2e8;border-bottom-width:2px;border-radius:7px;padding:3px 8px;white-space:nowrap}
.rsvp{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 12px;padding:12px 14px;border:1px solid var(--line,#e3e6ec);border-radius:14px;background:var(--bg2,#f7f8fa)}.rsvp .rv-t{display:flex;align-items:center;gap:10px;flex:1 1 220px}.rsvp .rv-t small{display:block;color:var(--muted,#6b7280);margin-top:2px}.rsvp .rv-b{display:flex;gap:8px;flex-wrap:wrap}
.ym-rem{position:fixed;top:16px;inset-inline-end:16px;z-index:95;display:flex;align-items:center;gap:12px;max-width:min(360px,calc(100vw - 32px));background:var(--card,#fff);border:1px solid var(--line,#e3e6ec);border-radius:14px;padding:12px 10px 12px 14px;box-shadow:0 12px 30px rgba(20,22,30,.14);opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease}.ym-rem.on{opacity:1;transform:none}.ym-rem div{flex:1}.ym-rem small{display:block;color:var(--muted,#6b7280);margin-top:2px}

/* R5 */
.r5f{display:flex;flex-direction:column;gap:6px}.r5f>span{font-size:13px;color:var(--mut,#5b5b70)}
.r5chips{display:flex;flex-wrap:wrap;gap:6px}.r5c{position:relative;cursor:pointer}.r5c input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.r5c span{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid #dcdce6;background:#fff;font-size:13px;transition:background .18s,border-color .18s,color .18s}
.r5c input:checked+span{background:#6d28d9;border-color:#6d28d9;color:#fff}.r5c input:focus-visible+span{outline:2px solid #6d28d9;outline-offset:2px}
.r5fb-wrap{display:flex;flex-direction:column;gap:8px}.r5fb{border:1px solid #e6e6ef;border-radius:14px;padding:10px;background:#fafafe;animation:r5in .22s ease}
.r5grid{display:flex;flex-direction:column;gap:8px;padding-top:16px;position:relative}.r5hrs{position:relative;height:14px;margin-inline-start:96px;font-size:11px;color:#8a8aa0}.r5hrs span{position:absolute;transform:translateX(-50%)}[dir=rtl] .r5hrs span{transform:translateX(50%)}
.r5row{display:flex;align-items:center;gap:8px}.r5row b{width:88px;flex:none;font-size:12.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis}.r5row b small{display:block;font-weight:400;font-size:10.5px;color:#8a8aa0}
.r5track{position:relative;flex:1;height:26px;border-radius:8px;background:repeating-linear-gradient(90deg,#fff 0 calc(20% - 1px),#ececf4 calc(20% - 1px) 20%);border:1px solid #e6e6ef;overflow:hidden}
.r5busy{position:absolute;top:3px;bottom:3px;border-radius:5px;background:#6d28d9;opacity:.85}.r5sel{position:absolute;top:0;bottom:0;border:2px solid #0f9d58;border-radius:7px;background:rgba(15,157,88,.12)}
.r5sug{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}.evrec{opacity:.75}
#r5rem{position:fixed;z-index:120;inset-inline-end:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 24px))}
.r5card{display:flex;align-items:center;gap:10px;background:#1d1d29;color:#fff;border-radius:16px;padding:10px 10px 10px 14px;box-shadow:0 12px 32px rgba(0,0,0,.25);animation:r5in .25s ease}
.r5card div{flex:1;min-width:0}.r5card b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.r5card small{opacity:.8;font-size:12px}.r5card .btn{background:#fff;color:#1d1d29;border:0}.r5card .btn.ghost{background:transparent;color:#fff}
.r5bell{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#6d28d9;flex:none}
@keyframes r5in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:820px){#r5rem{inset-inline:12px;bottom:84px;max-width:none}.r5row b{width:72px}.r5hrs{margin-inline-start:80px}}
.r5lgd{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.r5lgd span{margin-inline-start:auto}.r5lg{display:inline-block;width:14px;height:10px;border-radius:3px;background:#6d28d9}.r5lgs{background:rgba(15,157,88,.12);border:2px solid #0f9d58;margin-inline-start:8px}

/* R6 read receipts */
.rrtog{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--mut);cursor:pointer;user-select:none;transition:background .18s,border-color .18s,color .18s}
.rrtog .rrbox{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line);display:grid;place-items:center;transition:background .18s,border-color .18s}
.rrtog .rrbox .ic{opacity:0;width:11px;height:11px;color:#fff;transition:opacity .18s}
.rrtog:has(input:checked){background:var(--p1);border-color:var(--p3);color:var(--p8)}
.rrtog:has(input:checked) .rrbox{background:var(--p6);border-color:var(--p6)}
.rrtog:has(input:checked) .rrbox .ic{opacity:1}
.rrchip .ic{width:12px;height:12px}
.rrdot{display:inline-flex;align-items:center;gap:3px;margin-inline-start:6px;font-size:11px;font-weight:700;color:var(--mut);flex:none}
.rrdot.on{color:var(--p6)}.rrdot .ic{width:12px;height:12px}
@media (max-width:600px){.rrtog{padding:0 8px}.rrtog span:last-child{font-size:12px}}
@media (max-width:820px){.mail.m-list .items{padding-bottom:calc(150px + env(safe-area-inset-bottom))}}

/* r8: phone — the message list is the scroller (grid row bounded), bottom padding clears the assistant + compose buttons */
@media (max-width:820px){.mail.m-list{grid-template-rows:minmax(0,1fr)}.mail.m-list>.list{min-height:0;max-height:100%;overflow:hidden}.mail.m-list .items{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:calc(168px + env(safe-area-inset-bottom))}}

/* r9: phone list — FABs live in their own bottom band: the list scroll area ends above it, compose on one side, assistant on the other; nothing is ever under a button */
@media (max-width:820px){.mail.m-list>.list{padding-bottom:calc(86px + env(safe-area-inset-bottom));box-sizing:border-box}.mail.m-list .items{padding-bottom:12px}.mail.m-list .fab{inset-inline-end:auto;inset-inline-start:16px}html.yoc-m-mail.yoc-phone:has(.mail.m-list:not(.rail-open)){--yoc-fab-b:calc(18px + env(safe-area-inset-bottom))!important}}

/* r10: phone touch targets >=44px everywhere (header, drawer, list toolbar, rows, reader, compose) */
@media (max-width:820px){
 .top button,.top .btn,.top a,.top select{min-height:44px;min-width:44px;box-sizing:border-box}
 .top{min-height:56px}
 .rail button,.rail a,.rail .btn{min-height:44px}
 .list button,.list .btn,.list select,.list input:not([type=checkbox]),.read button,.read .btn,.read a.btn{min-height:44px;min-width:44px;box-sizing:border-box}
 .star{min-width:44px;min-height:44px;margin-top:2px}
 .it .ck input{width:44px;height:44px;margin:-13px}
 .compose button,.compose .btn,.compose select,.compose input[name=subject],.compose label.btn{min-height:44px;min-width:44px;box-sizing:border-box}
 .ch button{min-width:44px;min-height:44px;margin:-10px -12px -10px -8px;background:transparent}
 .dlg .x,.dlg [data-x]{min-width:44px;min-height:44px}
 .cal button,.cal .btn,.contacts button,.contacts .btn,.settings button,.settings .btn,.settings select,.settings input,.contacts input,.cal select{min-height:44px;min-width:44px;box-sizing:border-box}
 .rrtog{min-height:44px}
}
@media (max-width:820px){nav.tabs button,.top .btn,#acct button,.lbar button,.lbar .btn,.mx-tabs button{min-height:44px!important;min-width:44px!important;box-sizing:border-box}}

/* r10c: phone header fits one row at 360-412 with 44px targets (logo hidden on phone, compact gaps), compose targets 44px, compose button always on top and tappable */
@media (max-width:820px){
 .top{flex-wrap:nowrap!important;gap:4px!important;padding:6px 8px!important;min-height:56px}
 .top a.brand{display:none!important}
 .top nav.tabs{gap:0;flex:none}
 .top nav.tabs button{padding:0!important;width:44px;justify-content:center}
 #acct{flex-wrap:nowrap!important;gap:4px!important;flex:none}
 #acct .btn.sm.soft{padding:0 8px!important}
 .mail.m-list .fab{z-index:61!important}
 .dlg .btn.icon.x,.dlg [data-x]{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
 .compose .cf select,.compose .tb select,.compose .chipin input,.compose input[name=subject]{min-height:44px!important;height:44px!important;box-sizing:border-box}
 .compose .chipin{min-height:44px;align-items:center}
 .compose .mx-caret{min-width:44px!important}
}
@media (max-width:374px){#acct .btn.sm.soft{display:none!important}}

/* r1017p: phone — reading pane never scrolls sideways; toolbar wraps; nothing clipped */
@media (max-width:820px){
 html,body{overflow-x:hidden;max-width:100%}
 .read{overflow-x:hidden!important;overflow-y:auto;overscroll-behavior-x:none}
 .rp{max-width:100%;min-width:0;box-sizing:border-box}
 .rtool{flex-wrap:wrap;row-gap:4px;column-gap:2px;max-width:100%;min-width:0;justify-content:flex-start}
 .rtool .sp{flex:1 1 0;min-width:0}
 .rtool .btn{min-width:40px;min-height:40px;flex:0 0 auto}
 .rtool [data-ai]{width:auto;padding-inline:10px;white-space:nowrap}
 .subj{overflow-wrap:anywhere;word-break:normal}
 .msgs,.msg,.mb,.mh{min-width:0;max-width:100%}
 .mb{overflow-wrap:anywhere}
 .mb img,.mb video,.mb iframe{max-width:100%!important;height:auto}
 .mb table{display:block;max-width:100%;overflow-x:auto}
 .mb pre,.mb code{white-space:pre-wrap;overflow-wrap:anywhere}
 .replybar{flex-wrap:wrap;gap:6px}
 .replybar .btn{min-height:40px}
}

/* r1017q: phone tap targets >= 40px, faded calendar days readable (strict crawl v6 findings) */
.md.out .dn{color:#6b5f80}
@media (max-width:820px){
 .it .ck{min-width:40px;min-height:40px;justify-content:center}
 .it .ck input{margin:2px}
 .btn.icon{min-width:40px;min-height:40px}
 .btn.sm{min-height:40px}
 details summary{min-height:40px;display:flex;align-items:center}
}

/* r1017r: strict crawl v6 — contrast >= 4.5 on calendar events and the points chip */
.ev{color:color-mix(in srgb,var(--c) 58%,#000)}
.ev i{color:inherit}
[data-wal] span,.btn.soft[data-wal]{color:#3b1f6e}

/* c5: tablet (600–820px) — folders stay on screen as a side column instead of an off-screen drawer */
@media (min-width:600px) and (max-width:820px){
 .mail{grid-template-columns:clamp(176px,26vw,210px) minmax(0,1fr)}
 .mail>.rail{position:relative;top:auto;bottom:auto;inset-inline-start:auto;width:auto;transform:none!important;box-shadow:none;z-index:auto;transition:none;min-width:0;overflow-y:auto}
 .mail>.scrim,.mail.rail-open>.scrim{display:none!important}
 #hdr [data-menu]{display:none!important}
 .mail>.list,.mail>.read{min-width:0}
 .mail.m-list .fab{display:none!important} /* the rail's own «رسالة جديدة» is on screen */
}

/* r8 d45360ad: clear 2 px focus ring on the mail search box and the folder/account picker */
.search input:focus-visible,.search input:focus{outline:2px solid #4b3fb0;outline-offset:1px}
.accsel select:focus-visible,.accsel select:focus{outline:2px solid #4b3fb0;outline-offset:2px;border-color:#4b3fb0}

/* r12 subj: no cut subjects on phones */@media (max-width:480px){.sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:clip;line-height:1.35}}

/* ===== view modes (c0c03746) ===== */
.ymm-sw{gap:6px;border:1px solid var(--line);border-radius:10px;padding:5px 10px;font-weight:600;color:var(--ink2);white-space:nowrap}
.ymm-sw .ic{width:16px;height:16px}
.ymm-pick{position:fixed;z-index:80;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px -12px rgba(36,9,63,.35);padding:10px;display:flex;flex-direction:column;gap:6px;animation:ymmIn .14s ease-out}
@keyframes ymmIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ymm-pt{font-weight:700;padding:4px 6px 2px}
.ymm-pn{margin:2px 6px 2px;font-size:11.5px;color:var(--mut)}
.ymm-mo{display:flex;gap:12px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;text-align:start;font:inherit;cursor:pointer;color:var(--ink)}
.ymm-mo:hover{border-color:var(--p3)}.ymm-mo.on{border-color:var(--acc);background:var(--p1)}
.ymm-mo:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.ymm-mo>.ic{color:var(--acc);flex:none}
.ymm-mt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.ymm-mt small{color:var(--mut);font-size:12px;line-height:1.5}
.ymm-pv{flex:none;width:58px;height:42px;border:1px solid var(--line);border-radius:8px;background:#fff;display:grid;gap:3px;padding:4px;box-sizing:border-box}
.ymm-pv i{display:block;border-radius:3px;background:var(--p2)}
.ymm-pv-outlook{grid-template-columns:10px 16px 1fr}.ymm-pv-outlook i:nth-child(3){background:var(--p1);border:1px solid var(--p2)}
.ymm-pv-meet{grid-template-rows:12px 1fr;grid-template-columns:1fr 1fr}.ymm-pv-meet i:first-child{grid-column:1/-1;background:var(--acc)}.ymm-pv-meet i:nth-child(3){background:var(--p1)}
.ymm-pv-compact{grid-template-rows:repeat(3,1fr)}.ymm-pv-compact i{height:6px;align-self:center}
/* Outlook ribbon */
.ymm-rib{display:flex;align-items:stretch;gap:2px;padding:6px 12px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;height:56px;box-sizing:border-box}
.ymm-rib::-webkit-scrollbar{display:none}
.ymm-g{display:flex;gap:2px;padding-inline-end:8px;margin-inline-end:6px;border-inline-end:1px solid var(--line)}.ymm-g:last-child{border:0}
.ymm-rb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:58px;border:0;background:transparent;border-radius:9px;font:inherit;font-size:11.5px;color:var(--ink2);cursor:pointer;padding:3px 6px;white-space:nowrap}
.ymm-rb:hover{background:var(--p1);color:var(--ink)}.ymm-rb:focus-visible{outline:2px solid var(--acc)}
.ymm-rb .ic{width:18px;height:18px}
.ymm-rb.pri{background:var(--acc);color:#fff;min-width:84px}.ymm-rb.pri:hover{background:var(--p7);color:#fff}
.ymm-g.ai .ymm-rb .ic{color:var(--acc)}
body.ymm-outlook .mail{height:calc(100dvh - 58px - 56px)}
body.ymm-outlook.ymm-pb .mail{grid-template-columns:248px 1fr;grid-template-rows:minmax(0,42%) minmax(0,58%)}
body.ymm-outlook.ymm-pb .mail .rail{grid-row:1/3}
body.ymm-outlook.ymm-pb .mail .list{border-bottom:1px solid var(--line);overflow:auto}
/* meeting type badges */
.ymk{display:inline-flex;align-items:center;font-size:11px;font-weight:700;border-radius:6px;padding:1px 6px;margin-inline-end:4px;background:var(--p1);color:var(--p7)}
.ymk-invite{background:#e7f0ff;color:#1d4ed8}.ymk-agenda{background:#fff4e0;color:#9a5b00}.ymk-recording{background:#ffe9ec;color:#b42318}.ymk-summary{background:#e6f6ee;color:#11734b}
/* Yamama Meet mode */
.ymm-hub{padding:12px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--p1),#fff);display:flex;flex-direction:column;gap:10px}
.ymm-hh{display:flex;align-items:center;justify-content:space-between;gap:8px}.ymm-hh b{display:flex;align-items:center;gap:6px}
.ymm-ev{display:flex;flex-direction:column;gap:6px}
.ymm-e{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.ymm-e.live{border-color:var(--ok);box-shadow:0 0 0 2px rgba(31,138,91,.12)}
.ymm-et{flex:1;min-width:0;display:flex;flex-direction:column}.ymm-et b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ymm-et small{color:var(--mut);font-size:12px}
.ymm-sk{height:44px;border-radius:12px;background:linear-gradient(90deg,#f2eef8,#faf8fd,#f2eef8);background-size:200% 100%;animation:ymmSk 1.2s infinite}
@keyframes ymmSk{to{background-position:-200% 0}}
.ymm-none{margin:0}
.ymm-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.ymm-chips::-webkit-scrollbar{display:none}
.ymm-chips button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 11px;font:inherit;font-size:12.5px;white-space:nowrap;cursor:pointer;color:var(--ink2)}
.ymm-chips button b{color:var(--mut);font-weight:600;margin-inline-start:2px}
.ymm-chips button.on{background:var(--acc);border-color:var(--acc);color:#fff}.ymm-chips button.on b{color:#fff}
.ymm-empty{padding:16px;text-align:center}
.it[hidden]{display:none!important}
/* compact conversations */
body.ymm-compact .mail{grid-template-columns:220px 1fr}
body.ymm-compact .mail .it{grid-template-columns:auto 1fr auto;padding:7px 12px;align-items:center}
body.ymm-compact .mail .it .av{display:none}
body.ymm-compact .mail .it .ib{display:flex;align-items:center;gap:10px;min-width:0}
body.ymm-compact .mail .it .r1{flex:0 0 190px;min-width:0}
body.ymm-compact .mail .it .r2{flex:0 1 auto;min-width:0;max-width:45%}
body.ymm-compact .mail .it .r3{flex:1;min-width:0;opacity:.8}
body.ymm-compact .mail .it .r1,body.ymm-compact .mail .it .r2,body.ymm-compact .mail .it .r3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
body.ymm-compact .mail.m-list .read{display:none}
body.ymm-compact .mail.m-read .list{display:none}
body.ymm-compact .mail.m-read .rp .only-m{display:inline-flex}
/* smart compose */
.ymm-sc{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--p2);background:var(--p1);color:var(--p7);border-radius:8px;padding:3px 8px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;margin-inline-start:auto}
.ymm-sc.busy{opacity:.6;cursor:progress}
.ymm-ghost{color:#9a90ad;cursor:pointer}
.ymm-gt{display:inline-block;margin-inline-start:6px;font-size:10.5px;background:var(--p1);color:var(--p7);border-radius:5px;padding:0 5px;vertical-align:middle}
.ymm-pre{white-space:pre-wrap;max-height:40vh;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;font-size:13px}
@media (max-width:820px){
 .ymm-sw span{display:none}.ymm-sw{padding:6px}
 .ymm-rib{height:52px;padding:4px 8px}.ymm-rb{min-width:50px;font-size:10.5px}.ymm-rb.pri{min-width:64px}
 body.ymm-outlook .mail{height:calc(100dvh - 58px - 52px)}
 body.ymm-outlook .ymm-rib~.mail .rail{top:110px}
 body.ymm-outlook.ymm-pb .mail{grid-template-columns:1fr;grid-template-rows:none}
 body.ymm-compact .mail{grid-template-columns:1fr}
 body.ymm-compact .mail .it .r1{flex-basis:96px}
 body.ymm-compact .mail .it .r3{display:none}
 body.ymm-compact .mail .it .r2{max-width:none;flex:1}
}

body.ymm-meet .mx-tabs{display:none}

@media (min-width:821px){.ymm-rb{min-width:48px;padding:3px 4px;font-size:11px}.ymm-g{padding-inline-end:5px;margin-inline-end:4px}.ymm-rb.pri{min-width:76px}}

/* d6e49d60 a11y */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[data-attl]:focus-visible{outline:2px solid var(--pri,#0b6b5c);outline-offset:2px}

/* aa51f532: phone polish — no off-screen header toggle, readable ribbon labels */
@media (max-width:820px){.top .yox-aitg:not(.yox-aitg-fl),header .yox-aitg:not(.yox-aitg-fl){display:none!important}.ymm-rib span,.ymm-rib .ymm-rb{font-size:12px!important}}
@media (max-width:820px){body.ymm-compact .mail .it .r1{flex:0 0 47%!important}.ymm-chips{flex-wrap:wrap;overflow-x:visible;row-gap:6px}.ymm-chips button{font-size:13px}}
html.yoc-phone:not(.yoc-collapsed) .mail .fab{display:none!important}
/* aa51f532 320: top bar fits on 320px phones */@media (max-width:374px){.top{gap:2px!important;padding-inline:4px!important}html header#hdr.top nav.tabs,.top nav.tabs{min-width:0!important;flex:0 1 auto!important;overflow-x:auto!important;scrollbar-width:none}.top nav.tabs::-webkit-scrollbar{display:none}.top>.acct{flex:0 0 auto}html .top>button,html .top .btn.icon,html .top nav.tabs button,html .top .ymm-sw,html #acct .av{width:36px!important;min-width:36px!important;padding-inline:0!important}}
/* aa51f532 compact: sender name keeps its room on phones */@media (max-width:820px){body.ymm-compact .mail .it .r1{display:flex!important;align-items:center;gap:4px}body.ymm-compact .mail .it .r1 .who{flex:1 1 0;min-width:4.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body.ymm-compact .mail .it .r1 .cnt,body.ymm-compact .mail .it .r1 .when{flex:0 0 auto}body.ymm-compact .mail .it .r1 .when{font-size:12px}}

/* 6e2ebe1d phone toolbar: one row that fits, the rest in «المزيد» */@media (max-width:820px){.ymm-rib.ymm-ph{display:flex;overflow:visible!important;position:relative;gap:2px;padding:4px 8px;height:auto;min-height:52px;z-index:25}.ymm-ph .ymm-row{display:flex;gap:2px;flex:1 1 auto;min-width:0;overflow:hidden;align-items:stretch}.ymm-ph .ymm-rb{flex:0 0 auto;min-width:48px;min-height:44px;padding:3px 5px}.ymm-ph .ymm-mb{flex:0 0 auto;margin-inline-start:auto}.ymm-ph .ymm-mb[aria-expanded=true]{background:var(--p1);color:var(--ink)}.ymm-ph .ymm-mb[hidden]{display:none}.ymm-more{position:absolute;top:calc(100% + 4px);inset-inline:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -16px rgba(30,20,60,.35);padding:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:4px;z-index:70;max-height:60vh;overflow-y:auto}.ymm-more[hidden]{display:none!important}.ymm-more .ymm-rb{min-width:0;width:100%;min-height:58px;white-space:normal;text-align:center;line-height:1.25;font-size:12.5px!important}.ymm-more .ymm-rb.pri{color:#fff}}
/* 6e2ebe1d 320 tabs: all three tabs fit (every top control 36px wide, 44px tall) */@media (max-width:374px){html body #hdr.top{gap:2px!important;padding-inline:4px!important}html body #hdr.top nav.tabs{flex:0 0 auto!important;min-width:0!important;overflow:visible!important}html body #hdr.top nav.tabs button,html body #hdr.top>.btn.icon,html body #hdr.top>.y365-sw,html body #hdr.top>.ymm-sw,html body #hdr.top #acct .av{width:36px!important;min-width:36px!important;padding:0!important;justify-content:center}}
/* 6e2ebe1d compact on phones: sender on its own line with the time, subject under it */@media (max-width:820px){body.ymm-compact .mail .it .ib{flex-direction:column!important;align-items:stretch!important;gap:2px!important}body.ymm-compact .mail .it .r1{flex:0 0 auto!important;width:100%;max-width:none!important}body.ymm-compact .mail .it .r1 .who{flex:1 1 auto;min-width:0;font-weight:700}body.ymm-compact .mail .it .r2{flex:0 0 auto!important;width:100%;max-width:none!important}body.ymm-compact .mail .it .r2 .sub{display:block!important;-webkit-line-clamp:unset!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}body.ymm-compact .mail .it{padding-block:8px}}