/* 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%}
.conn-empty{gap:10px;max-width:520px;margin:0 auto;color:var(--ink)}.conn-empty h3{margin:0;font-size:18px}.conn-empty .btn{min-height:44px}.conn-steps{text-align:start;margin:6px 0 0;padding-inline-start:20px;display:grid;gap:8px;color:var(--mut);line-height:1.55}.conn-steps b{color:var(--ink)}
.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:44px;padding:0 6px} /* w91p: sign-in/sign-up switch link is a 44 px touch target */
}

/* 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}}

/* w91n (1 Nov): the meeting reminder used to sit at the top corner and cover Dark mode/Wallet/Account and the calendar's Month/Week/Day/Export for a few seconds. It now rises from the bottom corner of the mail area (the docked assistant already narrows that area), over the reading pane, and covers no header control. Week-view events use the same darker text mix as month events (4.26:1 before). */
.ym-rem{top:auto;bottom:16px}
@media (max-width:760px){html.r4.r4-mail .ym-rem{bottom:84px;inset-inline:12px;max-width:none}}
.evb{color:color-mix(in srgb,var(--c) 58%,#000)}

/* w91p (1 Nov): inbox rows show the whole first line of the subject and preview — up to two lines each instead of a one-line ellipsis (Compact view keeps one line per conversation, by choice) */
body:not(.ymm-compact) .mail #items .it .sn,body:not(.ymm-compact) .mail #items .it .sub{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:clip!important;overflow-wrap:anywhere}
/* w158-mail-firstvisit (task dce37054): at 360–380 px the Settings / Calendar / Contacts header had one 44 px button too many, so the command search entry was dropped in 5 of 6 loads; outside the Mail view the folders button (it only goes back to Mail, like the Mail tab beside it) leaves the phone header, so every button fits at full size */
@media (max-width:380px){html body #hdr.top[data-w158v]:not([data-w158v="mail"])>button[data-menu]{display:none!important}}
/* w161-mail-polish (task 78f0b9df): (1) a select's bottom sheet on a phone stays on the screen's bottom edge (a shared clamp could set its bottom to auto and push it below the screen) and, inside the compose window, sits just above the compose footer so Send, Attach, Save draft and Discard stay visible and usable while it is open; (2) the sign-in card is highlighted when «New message» leads to it; (3) at 380 px and below the header title gets a size that fits «Inbox» whole (it was cut to «Inb…» signed-out in English at 360) */
html body .yosel-pop.sheet{bottom:var(--w161-sb,0px)!important}
html body .yosel-scrim{bottom:var(--w161-sb,0px)}
html.w161-sb body .yosel-pop.sheet{max-height:min(70vh,calc(100vh - var(--w161-sb,0px) - 16px));border-radius:18px;box-shadow:0 -10px 32px rgba(46,33,128,.22)}
.w158-si.w161-hl{border-radius:16px;animation:w161hl 1.8s ease-out}
@keyframes w161hl{0%{box-shadow:0 0 0 0 rgba(108,76,224,.5)}35%{box-shadow:0 0 0 10px rgba(108,76,224,.16)}100%{box-shadow:0 0 0 0 rgba(108,76,224,0)}}
@media (prefers-reduced-motion:reduce){.w158-si.w161-hl{animation:none;outline:2px solid #6c4ce0;outline-offset:4px}}
@media (max-width:380px){html.r4.r4-mail body #hdr.top>.r4-tt{font-size:19px}}
/* w166-mail-desktop-compose (task 42d73432): a header menu placed below the ribbon points at its button, which shows as pressed; Send with no recipient marks the To field */
.menu.w166-tail{transform-origin:var(--w166-cx,50%) 0;animation:w166drop .14s ease-out}
.menu.w166-tail{border-color:rgba(108,76,224,.35)}
.menu.w166-tail::before{content:"";position:absolute;top:-8px;left:calc(var(--w166-cx,50%) - 7px);width:14px;height:14px;background:inherit;border-left:1px solid rgba(108,76,224,.35);border-top:1px solid rgba(108,76,224,.35);border-top-left-radius:3px;transform:rotate(45deg);pointer-events:none}
@keyframes w166drop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
html body .w166-open{background:rgba(108,76,224,.14)!important;box-shadow:inset 0 0 0 1px rgba(108,76,224,.35)}
.cdlg .chipin.w166-bad{box-shadow:inset 0 0 0 2px #c62828;border-radius:8px}
@media (prefers-reduced-motion:reduce){.menu.w166-tail{animation:none}}
/* w172-mail-desktop-reader (task 526b794a): reading side on desktop vs Outlook web — the three panes are bounded by the window, so the message list and the reading pane scroll on their own (the last messages, the end of a long message and its reply buttons were out of reach); columns follow Mail's own width (docked assistant); reading-toolbar buttons keep a ≥32 px target and wrap instead of shrinking to 18 px; a narrow reading pane uses a smaller subject; long recipient lines fold to two lines; header tabs icon-only when names do not fit */
@media (min-width:821px){
 body:not(.ymm-pb) .mail{grid-template-rows:minmax(0,1fr)}
 body:not(.ymm-pb) .mail>.list{min-height:0;overflow:hidden}
 body:not(.ymm-pb) .mail>.list>.items{min-height:0}
 body:not(.ymm-pb) .mail>.rail,body:not(.ymm-pb) .mail>.read{min-height:0}
 html.w172-mw1100 body:not(.ymm-pb):not(.ymm-compact) .mail{grid-template-columns:220px 330px minmax(0,1fr)}
 html.w172-mw980 body:not(.ymm-pb):not(.ymm-compact) .mail{grid-template-columns:200px 300px minmax(0,1fr)}
 html.w172-mw980 body.ymm-compact .mail{grid-template-columns:200px minmax(0,1fr)}
 .read{container:w172rd/inline-size}
 .rtool{flex-wrap:wrap;row-gap:2px}
 .rtool>.btn.icon{flex:0 0 auto;min-width:32px}
 .rtool>.btn[data-ai]{flex:0 0 auto;white-space:nowrap}
 .msg .mh .r2.w172-rc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
 .msg .mh .r2.w172-rc.w172-rc-open{display:block;-webkit-line-clamp:unset;overflow:visible}
 .w172-rcb{display:inline-flex;align-items:center;min-height:28px;margin:2px 0 0;padding:2px 8px;margin-inline-start:-8px;border:0;border-radius:8px;background:none;color:#5b3fc4;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
 .w172-rcb:hover{background:rgba(108,76,224,.08)}
 .w172-rcb:focus-visible{outline:2px solid #6c4ce0;outline-offset:1px}
 html.w172-tico #hdr nav.tabs button>span{display:none}
 html.w172-tico #hdr nav.tabs button{padding-inline:12px}
}
@container w172rd (max-width:560px){.rp .subj{font-size:18px;line-height:1.3}}
html.dark .w172-rcb,html.r3.dark .w172-rcb{color:#b9a8ff}
/* w172 (after the review): in a narrow message list (assistant docked) a meeting title in «Your upcoming meetings» wraps to two lines instead of being cut to «…» */
@media (min-width:821px){.ymm-et b{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:20px}}

/* r14 (nov7r14): CLS — on desktop the assistant's quick chips painted first and were then replaced by ai-plus's examples card (#yoc:has(.aip-pex)), which pushed the chat log by ~190 px (0.033 of mail-1280's 0.087). The examples card is the one set of examples on an empty chat, so the chips no longer paint there. */
@media (min-width:761px){#yoc:not(.yoc-started) .yoc-sugg{display:none!important}}
/* r14: reserve the Outlook ribbon's 56 px above the mail panes until mail-modes.js inserts it (it then sits before .mail, which is no longer :first-child) */
@media (min-width:821px){html:not(.ymm-no-ol) #view:has(> .mail:first-child){padding-top:56px}} /* padding on #view, not a margin on .mail: a margin collapsed through #view and moved #view itself when the ribbon arrived */

/* nov7r15: the assistant panel element sits beside <body> inside <html>; where <html> is a flex box (measured in Safari/WebKit at 390) <body> shrank to its content and left an empty 64 px strip; body now fills the width */
html[data-yo-app]>body{flex:1 1 auto;min-width:0}

/* r18: From hint line (mailbox kind + full address) under the From box */
.cfh{margin:0;padding:2px 0 6px;padding-inline-start:62px;font-size:12.5px;line-height:1.45;color:var(--mut);overflow-wrap:anywhere;border-bottom:1px solid var(--line)}.cfh:empty{display:none}
.cf:has(+.cfh:not(:empty)){border-bottom:0}

/* r23 perf: rows off screen skip style/layout/paint — with ~600 loaded messages, opening one went from 112–144 ms to ~56 ms to the next frame */
#items > .it{content-visibility:auto;contain-intrinsic-size:auto 72px}
/* r23: visible frame on the reading pane (message body) when reached by keyboard */
html.yo-kbd iframe.yo-iffocus{outline:3px solid #5b3fd6!important;outline-offset:-3px!important;border-radius:6px}
html.dark.yo-kbd iframe.yo-iffocus{outline-color:#b7a6ff!important}
@media (forced-colors:active){html.yo-kbd iframe.yo-iffocus{outline-color:Highlight!important}}
/* r23 chip: a short tag like «داخل الجهة» keeps its whole width; the snippet shrinks instead (was cut to ~21px of 66) */
#items .it .r3 .chip{flex:0 0 auto;max-width:50%}

/* nov8r24 threads: thread bar (count + expand/collapse all) and keyboard-focusable message headers */
#read .thbar{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:0 2px}
#read .thbar .sp{flex:1}
#read .msg .mh{cursor:pointer;border-radius:10px}
#read .msg .mh:focus-visible{outline:3px solid #6a2fb0;outline-offset:2px}
#read .msg:not(.open) .mh .prev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#read .msg .mh-t{all:unset;cursor:pointer;border-radius:6px;font:inherit;color:inherit}
#read .msg .mh-t:focus-visible{outline:3px solid #6a2fb0;outline-offset:2px}
#read .msg:not(.open) .mh .r2,#read .msg:not(.open) .mh .hij{display:none}
#read .msg:not(.open) .mh{padding-block:6px}
#read .thmore{display:flex;align-items:center;gap:10px;width:100%;margin:2px 0;padding:8px 12px;border:1px dashed var(--line,#d9d2e6);border-radius:10px;background:transparent;color:var(--mut,#5b5470);font:inherit;font-size:13px;cursor:pointer;text-align:start}#read .thmore:hover{background:var(--p1,#f3eefb)}#read .thmore:focus-visible{outline:3px solid #6a2fb0;outline-offset:2px}#read .thmore-n{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--p1,#efe7fb);color:var(--p8,#4c1d95);font-weight:700}