/* Phone/tablet presentation only. Native commands and message contents are retained. */
@media screen and (max-width:768px) {
 html body.ok-app:has(#layout-menu){--ok-accent:#ffdb4d;--ok-text:#252630;--ok-shell:#f5f6f7;--ok-selected:#eceef1;background:#fff!important;color:#252630!important;font-family:Arial,Helvetica,sans-serif;-webkit-text-size-adjust:100%}
 html body.ok-app:has(#layout-menu) #layout{height:100vh;height:100dvh;min-height:0;width:100%;max-width:100%;padding:0!important;gap:0;background:#fff!important;overflow:hidden}
 html body.ok-app:has(#layout-menu) #layout>:is(#layout-list,#layout-sidebar,#layout-content){min-width:0!important;max-width:100%!important;width:100%!important;border:0!important;border-radius:0!important;min-height:0;background:#fff!important}
 html body.ok-app:has(#layout-menu) #layout>:is(#layout-list,#layout-sidebar,#layout-content):not(.hidden){display:flex!important;flex-direction:column}
 html body.ok-app:has(#layout-menu) #layout>.hidden{display:none!important}
 html body.ok-app:has(#layout-menu) #layout>div>.header{height:58px!important;min-height:58px!important;flex:0 0 58px!important;padding:0 8px!important;gap:0;align-items:center;background:#fff!important;border-bottom:0!important;color:#252630}
 html body.ok-app:has(#layout-menu) #layout>div>.header>.header-title{position:static!important;display:block!important;flex:1;min-width:0;font:600 19px/26px Arial!important;text-align:left!important;margin:0 6px!important;padding:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#252630!important}
 html body.ok-app:has(#layout-menu) #layout>div>.header>a.button{flex:0 0 44px!important;width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;border-radius:12px!important;color:#5d6069!important}
 html body.ok-app:has(#layout-menu) #layout>div>.header>a.button:before{font-size:20px!important;line-height:44px!important;width:44px!important;height:44px!important;margin:0!important}
 html body.ok-app:has(#layout-menu) #messagelist-header>.back-sidebar-button{order:-2}
 html body.ok-app:has(#layout-menu) #messagelist-header>.back-sidebar-button:before{content:'\f0c9'}
 html body.ok-app:has(#layout-menu) #messagelist-header>.task-menu-button{order:5}
 html body.ok-app:has(#layout-menu) #messagelist-header>.task-menu-button:before{content:'О';font:600 19px/32px Arial!important;width:32px!important;height:32px!important;margin:6px!important;background:#ff7347;border-radius:50%;color:white}
 html body.ok-app:has(#layout-menu) #messagelist-header>.toolbar-list-button{display:none!important}
 html body.ok-app:has(#layout-menu) #layout>div>.header>#toolbar-menu.popupmenu{display:none!important}
 html body.ok-app:has(#layout-menu) #ok-search-top{flex:0 0 60px;height:60px;min-height:60px;padding:0 16px 12px;background:#fff}
 html body.ok-app:has(#layout-menu) #ok-search-top .searchbar{height:46px;min-height:46px;border:0!important;border-radius:14px;background:#f2f3f5!important;box-shadow:none!important;padding:0 12px;align-items:center}
 html body.ok-app:has(#layout-menu) #ok-search-top input{height:44px!important;font:16px/22px Arial!important;padding:0 8px!important;min-width:0}
 html body.ok-app:has(#layout-menu) #ok-search-top .searchbar a{min-width:36px;min-height:44px;line-height:44px}
 html body.ok-app:has(#layout-menu) #messagelist-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 0 88px;background:#fff}
 html body.ok-app:has(#layout-menu) #messagelist{display:block;width:100%;table-layout:auto;border:0}
 html body.ok-app:has(#layout-menu) #messagelist thead{display:none}
 html body.ok-app:has(#layout-menu) #messagelist tbody{display:block;width:100%}
 html body.ok-app:has(#layout-menu) #messagelist tr.message{display:flex;position:relative;height:auto!important;min-height:86px;width:100%;border-bottom:1px solid #eef0f2;align-items:stretch}
 html body.ok-app:has(#layout-menu) #messagelist tr.message>td{height:auto!important;min-height:0!important;border:0!important;background:transparent!important;box-sizing:border-box}
 html body.ok-app:has(#layout-menu) #messagelist:not(.withselection) td.selection{display:none!important}
 html body.ok-app:has(#layout-menu) #messagelist.withselection td.selection{display:flex!important;align-items:center;justify-content:center;flex:0 0 44px;width:44px!important;padding:0!important}
 html body.ok-app:has(#layout-menu) #messagelist td.selection input{height:22px!important;width:22px!important;border-radius:6px!important}
 html body.ok-app:has(#layout-menu) #messagelist tr.message td.subject{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:24px minmax(22px,auto);align-content:center;align-items:center;column-gap:8px;row-gap:4px;flex:1;min-width:0;width:auto;padding:14px 16px 14px 72px!important;overflow:hidden}
 html body.ok-app:has(#layout-menu) #messagelist td.subject span.fromto{display:block!important;grid-column:1;grid-row:1;width:auto!important;max-width:100%!important;min-width:0;font:15px/22px Arial!important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#252630!important;padding:0!important}
 html body.ok-app:has(#layout-menu) #messagelist .fromto>.adr{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 html body.ok-app:has(#layout-menu) #messagelist .ok-avatar{position:absolute;left:16px;top:20px;width:40px;height:40px;line-height:40px;font-size:15px;display:flex;align-items:center;justify-content:center}
 html body.ok-app:has(#layout-menu) #messagelist.withselection .ok-avatar{left:60px}
 html body.ok-app:has(#layout-menu) #messagelist.withselection .msgicon.status{left:105px}
 html body.ok-app:has(#layout-menu) #messagelist td.subject span.date{grid-column:2;grid-row:1;max-width:98px;width:auto!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;padding:0!important;font:11px/20px Arial!important;color:#9598a1!important}
 html body.ok-app:has(#layout-menu) #messagelist td.subject span.subject{grid-column:1/3;grid-row:2;display:flex!important;align-items:center;min-width:0;width:100%;font:14px/22px Arial!important;line-height:22px!important;overflow:hidden}
 html body.ok-app:has(#layout-menu) #messagelist td.subject span.subject>a{font:inherit!important;line-height:22px!important;color:#626570!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 html body.ok-app:has(#layout-menu) #messagelist tr.unread :is(.fromto,.subject>a){font-weight:600!important;color:#252630!important}
 html body.ok-app:has(#layout-menu) #messagelist .msgicon.status{position:absolute;left:61px;top:25px;width:6px!important;min-width:6px!important;height:6px!important}
 html body.ok-app:has(#layout-menu) #messagelist td.flags{display:flex!important;align-items:flex-end;justify-content:center;position:absolute;right:12px;bottom:12px;width:auto;max-width:none;gap:4px;padding:0!important;line-height:18px;pointer-events:auto}
 html body.ok-app:has(#layout-menu) #messagelist td.flags .flag{display:none}
 html body.ok-app:has(#layout-menu) #messagelist tr.message.flagged{background:#fff2f4}
 html body.ok-app:has(#layout-menu) #messagelist tr.message.selected{background:#fff6d5}
 html body.ok-app:has(#layout-menu) #messagelist tr.message.selected td{background:transparent!important}
 html body.ok-app:has(#layout-menu) .pagenav{height:44px;min-height:44px;flex:0 0 44px;background:#fafafb!important;border-top:1px solid #eeeff2;color:#8d909a;font-size:12px;padding-bottom:env(safe-area-inset-bottom)}
 html body.ok-app:has(#layout-menu) .pagenav a{min-width:40px;min-height:40px;color:#6c707b}
 html body.ok-app:has(#layout-menu) .floating-action-buttons{position:absolute;right:16px;bottom:calc(60px + env(safe-area-inset-bottom));z-index:3}
 html body.ok-app:has(#layout-menu) .floating-action-buttons a.button{display:flex!important;align-items:center;justify-content:center;gap:10px;width:auto!important;min-width:138px;height:52px!important;margin:0!important;padding:0 20px!important;border-radius:18px!important;background:#ffdb4d!important;color:#242630!important;box-shadow:0 5px 18px #20263319;opacity:1!important}
 html body.ok-app:has(#layout-menu) .floating-action-buttons a.button:before{font-size:19px!important;float:none!important;margin:0!important;width:20px!important;height:24px!important;line-height:24px!important}
 html body.ok-app:has(#layout-menu) .floating-action-buttons a.compose:after{content:'Написать';font:600 15px Arial}
 html body.ok-app:has(#layout-menu) .floating-action-buttons .inner{display:none!important}
 /* Folder screen: real hierarchy and account, with comfortable touch rows. */
 html body.ok-app:has(#layout-menu) #layout-sidebar{background:#f7f8fa!important}
 html body.ok-app:has(#layout-menu) #layout-sidebar>.header{background:#f7f8fa!important}
 html body.ok-app:has(#layout-menu) #okraina-account{display:block!important;padding:0 20px 16px;color:#92959e;font:14px/20px Arial}
 html body.ok-app:has(#layout-menu) #okraina-folder-actions{padding:2px 16px 14px;gap:10px}
 html body.ok-app:has(#layout-menu) #okraina-folder-actions .okraina-compose{height:46px;min-height:46px;font-size:15px;border-radius:14px}
 html body.ok-app:has(#layout-menu) #okraina-folder-actions .okraina-compose>.inner{line-height:46px;font-size:15px}
 html body.ok-app:has(#layout-menu) #okraina-folder-actions .okraina-refresh{height:46px;width:46px;flex-basis:46px;display:flex;align-items:center;justify-content:center;border-radius:14px}
 html body.ok-app:has(#layout-menu) #folderlist-content{flex:1;min-height:0;overflow:auto;padding-bottom:env(safe-area-inset-bottom)}
 html body.ok-app:has(#layout-menu) #mailboxlist{padding:0 12px 20px}
 html body.ok-app:has(#layout-menu) #mailboxlist li>a{height:46px!important;min-height:46px!important;line-height:46px!important;font-size:15px!important;border-radius:12px!important;padding-right:12px}
 html body.ok-app:has(#layout-menu) #mailboxlist li.inbox>a{padding-left:14px}
 html body.ok-app:has(#layout-menu) #mailboxlist .treetoggle{height:46px;line-height:46px;width:36px;font-size:14px}
 html body.ok-app:has(#layout-menu) #mailboxlist .unreadcount{font-size:13px;line-height:46px;padding:0 4px}
 html body.ok-app:has(#layout-menu) .ok-my-folders{height:48px;margin-top:8px}
 html body.ok-app:has(#layout-menu) .ok-folders-toggle{height:44px;font-size:15px;padding-left:14px;color:#727681}
 html body.ok-app:has(#layout-menu) .ok-folders-plus{width:44px;height:44px}
 /* Restore native vertical popup menus instead of desktop horizontal toolbars. */
 html body.ok-app:has(#layout-menu) .popover{border:0!important;border-radius:20px!important;box-shadow:0 12px 48px #19202b26;background:#fff;color:#252630}
 html body.ok-app:has(#layout-menu) .popover-body #toolbar-menu{display:block!important;height:auto!important;width:100%!important;max-width:100%;margin:0!important;padding:4px 8px 12px}
 html body.ok-app:has(#layout-menu) .popover-body #toolbar-menu>li{display:block!important;width:100%!important;height:auto!important}
 html body.ok-app:has(#layout-menu) .popover-body #toolbar-menu>li>a,html body.ok-app:has(#layout-menu) .popover-body #toolbar-menu .dropbutton>a{display:flex!important;align-items:center;width:100%!important;height:48px!important;min-height:48px!important;padding:0 14px!important;font:15px/48px Arial!important;color:#353944;gap:12px}
 html body.ok-app:has(#layout-menu) .popover-body #toolbar-menu>li>a>.inner{font:15px/48px Arial!important;display:block!important}
 html body.ok-app:has(#layout-menu) .popover-body #toolbar-menu a:before{height:24px!important;line-height:24px!important;width:24px!important;flex:0 0 24px!important;margin:0!important;float:none!important}
 html body.ok-app:has(#layout-menu) .popover-body #toolbar-menu a:after{height:24px!important;line-height:24px!important;margin:0 0 0 auto!important}
 html body.ok-app:has(#layout-menu) .popover-header{background:#f8f9fa;color:#252630;border-color:#eeeff2}
 html body.ok-app:has(#layout-menu) .popover .listing a{min-height:46px;font-size:15px;color:#353944}
 html body.ok-app:has(#layout-menu) #layout-menu.popover{width:calc(100% - 32px)!important;min-width:0!important;max-width:340px!important;left:16px!important;top:16px!important;bottom:auto!important;height:auto!important;max-height:calc(100dvh - 32px);overflow:auto;padding-bottom:12px}
 html body.ok-app:has(#layout-menu) #layout-menu.popover .popover-header{justify-content:flex-start!important;padding:0 16px!important}
 html body.ok-app:has(#layout-menu) #layout-menu.popover .popover-header:after{order:-1;margin-right:auto}
 html body.ok-app:has(#layout-menu) #layout-menu.popover .popover-header>a{flex:0 0 44px!important;width:44px!important}
 html body.ok-app:has(#layout-menu) #layout-menu.popover #taskmenu{padding:0 8px!important}
 html body.ok-app:has(#layout-menu) #layout-menu.popover #taskmenu a{position:relative!important;bottom:auto!important;display:flex!important;align-items:center!important;gap:16px;width:100%!important;min-width:0!important;height:50px!important;padding:0 16px!important;line-height:50px!important;color:#353944!important;border-radius:12px}
 html body.ok-app:has(#layout-menu) #layout-menu.popover #taskmenu a:before{flex:0 0 28px!important;display:block!important;margin:0!important;font-size:19px!important}
 html body.ok-app:has(#layout-menu) #layout-menu.popover #taskmenu a>.inner{position:static!important;clip-path:none!important;width:auto!important;height:auto!important;display:block!important;overflow:visible!important;font:15px/24px Arial!important}
 html body.ok-app:has(#layout-menu) #layout-menu.popover #taskmenu .special-buttons{position:static!important;display:block;border-top:1px solid #e9ebef;margin-top:8px;padding-top:8px}
 html body.ok-app:has(#layout-menu) #layout-menu.popover #taskmenu a.ok-disk-service{justify-content:flex-start!important}
 html body.ok-app:has(#layout-menu) #layout-menu.popover #taskmenu a.ok-disk-service svg{position:static;transform:none;flex:0 0 28px;width:28px;height:23px}
 /* Reading: short top bar, subject/sender card, attachment chips, bottom reply. */
 html body.ok-app.action-show:has(#layout-menu) #layout-content>.header>.header-title{font-size:17px!important}
 html body.ok-app.action-show:has(#layout-menu) #layout-content>.content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:#fff}
 html body.ok-app.action-show:has(#layout-menu) #message-header{padding:12px 20px 20px!important;border-bottom:1px solid #eef0f3}
 html body.ok-app.action-show:has(#layout-menu) #message-header .subject{font:600 23px/30px Arial!important;margin:0 0 24px!important;overflow-wrap:anywhere;color:#252630}
 html body.ok-app.action-show:has(#layout-menu) #message-header .header{display:flex;gap:12px;align-items:flex-start}
 html body.ok-app.action-show:has(#layout-menu) #message-header .contactphoto{width:40px!important;height:40px!important;flex:0 0 40px;margin:0!important}
 html body.ok-app.action-show:has(#layout-menu) #message-header .header-content{min-width:0;max-width:100%;font:14px/22px Arial;color:#737783}
 html body.ok-app.action-show:has(#layout-menu) #message-header .header-summary{font:14px/22px Arial!important}
 html body.ok-app.action-show:has(#layout-menu) #message-header .header-links{font:13px/24px Arial;margin-top:5px}
 html body.ok-app.action-show:has(#layout-menu) #message-content{padding:20px!important}
 html body.ok-app.action-show:has(#layout-menu) #message-content>.rightcol{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
 html body.ok-app.action-show:has(#layout-menu) #messagebody .pre{font:15px/1.65 Arial,Helvetica,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}
 html body.ok-app.action-show:has(#layout-menu) .attachmentslist{display:flex;flex-wrap:wrap;gap:8px}
 html body.ok-app.action-show:has(#layout-menu) .attachmentslist li{min-height:52px;max-width:100%;margin:0;padding:12px;border:0;border-radius:12px;background:#f2f3f6}
 html body.ok-app.action-show:has(#layout-menu) .attachmentslist a{line-height:26px;min-height:26px;font-size:14px}
 #ok-mobile-reply{display:flex;gap:10px;flex:0 0 auto;padding:12px 16px max(12px,env(safe-area-inset-bottom));border-top:1px solid #eef0f2;background:#fff}
 #ok-mobile-reply button{min-height:46px;flex:1;border:0;border-radius:14px;background:#f0f1f4;color:#333640;font:600 15px Arial;cursor:pointer}
 #ok-mobile-reply button:first-child{background:#ffdb4d;color:#242630}
 #ok-mobile-reply button:disabled{opacity:.4}
 /* Composer: full-width, 16px input text, top Send, spacious editor. */
 html body.ok-app.action-compose:has(#layout-menu) #layout-content>.header{border-bottom:1px solid #eeeff2!important}
 html body.ok-app.action-compose:has(#layout-menu) #layout-content>.header>.task-menu-button{display:none!important}
 html body.ok-app.action-compose:has(#layout-menu) .ok-compose-close{display:block!important;position:static!important;flex:0 0 44px;width:44px;height:44px;line-height:42px;font-size:28px;border-radius:12px;color:#606470}
 html body.ok-app.action-compose:has(#layout-menu) #layout-content>.header>.header-title{font-size:17px!important}
 html body.ok-app.action-compose:has(#layout-menu) .ok-mobile-send{display:block!important;min-width:0!important;width:auto!important;height:40px!important;padding:0 12px!important;font:600 13px/40px Arial!important;background:#ffdb4d!important;color:#252630!important;border:0!important;border-radius:12px!important}
 html body.ok-app.action-compose:has(#layout-menu) .ok-mobile-send:before{display:none!important}
 html body.ok-app.action-compose:has(#layout-menu) #compose-content>form{padding:0 16px!important;min-height:0;overflow:auto;overscroll-behavior:contain}
 html body.ok-app.action-compose:has(#layout-menu) #compose-headers{margin:0 0 10px}
 html body.ok-app.action-compose:has(#layout-menu) .compose-headers>.form-group{min-height:54px;flex:0 0 auto}
 html body.ok-app.action-compose:has(#layout-menu) .compose-headers>.form-group>label{font:15px/24px Arial!important;flex-basis:54px;max-width:54px;padding:12px 0!important;color:#9296a0}
 html body.ok-app.action-compose:has(#layout-menu) .compose-headers :is(input,.form-control,.recipient-input){font:16px/24px Arial!important;min-height:48px!important}
 html body.ok-app.action-compose:has(#layout-menu) .compose-headers .input-group-text{min-width:38px;min-height:44px;align-items:center;justify-content:center;padding:0 8px}
 html body.ok-app.action-compose:has(#layout-menu) #compose_to .input-group-append:has(a[href='#add-header']){display:none}
 html body.ok-app.action-compose:has(#layout-menu) #ok-compose-headers-toggle{position:static!important;align-self:flex-end;order:4;height:40px;min-height:40px;font:13px Arial;color:#868a94;padding:8px 0}
 html body.ok-app.action-compose:has(#layout-menu) #composebodycontainer{min-height:180px;flex:1}
 html body.ok-app.action-compose:has(#layout-menu) #composebody{font:16px/1.6 Arial!important;min-height:180px;padding:12px 0!important}
 html body.ok-app.action-compose:has(#layout-menu) #composebodycontainer .tox-tinymce{min-height:210px!important}
 html body.ok-app.action-compose:has(#layout-menu) .tox .tox-toolbar__group{margin:2px 0;padding:0 2px}
 html body.ok-app.action-compose:has(#layout-menu) .tox .tox-tbtn{height:36px;min-width:34px}
 html body.ok-app.action-compose:has(#layout-menu) #compose-content>.formbuttons{min-height:60px;flex:0 0 auto;padding:8px 12px max(8px,env(safe-area-inset-bottom))!important;border-top:1px solid #eef0f2;gap:6px;flex-wrap:nowrap!important;overflow-x:auto}
 html body.ok-app.action-compose:has(#layout-menu) #messagetoolbar{flex:1;align-items:center;gap:5px;overflow:visible}
 html body.ok-app.action-compose:has(#layout-menu) #messagetoolbar ul{min-width:max-content;height:44px}
 html body.ok-app.action-compose:has(#layout-menu) #messagetoolbar a{height:44px!important;width:44px!important;min-width:44px!important;padding:10px!important;border-radius:12px;background:#f5f6f8}
 html body.ok-app.action-compose:has(#layout-menu) #messagetoolbar .attach{display:flex!important}
 html body.ok-app.action-compose:has(#layout-menu) #messagetoolbar li:has(.attach){display:block!important}
 html body.ok-app.action-compose:has(#layout-menu) #composestatusbar{display:none!important}
 html body.ok-app:has(#layout-menu) #ok-compose-options{top:auto;left:0;right:0;bottom:0;width:100%;max-width:100%;max-height:90dvh;border-radius:22px 22px 0 0;box-shadow:0 -12px 70px #232b3e38}
 html body.ok-app:has(#layout-menu) #ok-compose-options>.header{min-height:62px;padding:0 20px}
 html body.ok-app:has(#layout-menu) #ok-compose-options>.scroller{padding:16px 20px max(20px,env(safe-area-inset-bottom))}
 html body.ok-app:has(#layout-menu) #ok-compose-options .ok-options-close{height:44px;width:44px}
 html body.ok-app:has(#layout-menu) #ok-compose-options .form-group{margin-bottom:18px}
 html body.ok-app:has(#layout-menu) #ok-compose-options :is(input,select){font-size:16px;min-height:40px}
 html body.ok-app:is(.task-settings,.task-addressbook):has(#layout-menu) .listing :is(li>a,td){min-height:48px;font-size:16px;line-height:26px;padding-top:12px;padding-bottom:12px}
 html body.ok-app:is(.task-settings,.task-addressbook):has(#layout-menu) .searchbar input{font-size:16px}
 html body.ok-app:is(.task-settings,.task-addressbook):has(#layout-menu) .formcontent{padding:16px!important}
 html body.ok-app:is(.task-settings,.task-addressbook):has(#layout-menu) .formbuttons{padding:12px 16px!important}
 html body.ok-app:has(#layout-menu) #ok-native-tooltip{display:none!important}
 html body.ok-app:has(#layout-menu) :is(button,a,input,textarea,select){-webkit-tap-highlight-color:transparent}
 html body.ok-app:has(#layout-menu) :is(button,a):active{filter:brightness(.97)}
}
@media screen and (min-width:481px) and (max-width:768px){
 html body.ok-app:has(#layout-menu) #layout>:is(#layout-list,#layout-sidebar,#layout-content):not(.hidden){flex:1!important;width:auto!important;max-width:none!important}
}
/* Matched against the live Yandex /touch UI at 390x844 on 2026-10-13.
   The desktop layout and native mail commands remain independent. */
.ok-mobile-day,.ok-mobile-time,.ok-mobile-account-avatar,#ok-mobile-folder-services,.ok-mobile-search,.ok-mobile-compose,.ok-mobile-compose-options,.ok-mobile-attach{display:none}
@media screen and (max-width:768px){
 html body.ok-app:has(#layout-menu) #layout>div>.header{height:48px!important;min-height:48px!important;flex-basis:48px!important;padding:0 0!important;border-bottom:1px solid #e4e4e4!important}
 html body.ok-app:has(#layout-menu) #layout>div>.header>.header-title{font:400 16px/24px Arial!important;margin:0 12px 0 24px!important}
 html body.ok-app:has(#layout-menu) #layout>div>.header>a.button{flex-basis:44px!important;width:44px!important;color:#171717!important}
 html body.ok-app:has(#layout-menu) #messagelist-header>.task-menu-button,html body.ok-app:has(#layout-menu) #messagelist-header>.refresh{display:none!important}
 html body.ok-app:has(#layout-menu) #messagelist-header>.toolbar-menu-button{order:2;flex-basis:40px!important;width:40px!important}
 html body.ok-app:has(#layout-menu) :is(.ok-mobile-search,.ok-mobile-compose){display:block;order:3;width:40px;height:44px;flex:0 0 40px;border:0;background:transparent;color:#171717;padding:0;cursor:pointer}
 html body.ok-app:has(#layout-menu) .ok-mobile-compose{order:4}
 html body.ok-app:has(#layout-menu) .ok-mobile-search{display:flex;align-items:center;justify-content:center}
 html body.ok-app:has(#layout-menu) .ok-mobile-search:before{display:none!important}
 html body.ok-app:has(#layout-menu) :is(.ok-mobile-search,.ok-mobile-compose):before{font:20px/44px Icons;content:'\f002'}
 html body.ok-app:has(#layout-menu) .ok-mobile-compose:before{content:'\f044'}
 html body.ok-app:has(#layout-menu) #ok-search-top{display:none;flex-basis:56px;min-height:56px;height:56px;padding:5px 12px}
 html body.ok-app.ok-mobile-search-open:has(#layout-menu) #ok-search-top{display:block}
 html body.ok-app.task-mail:has(#layout-menu) .floating-action-buttons{display:none!important}
 html body.ok-app:not(.task-mail):has(#layout-menu) .floating-action-buttons a.button{min-width:52px;width:52px!important;padding:0!important}
 html body.ok-app:has(#layout-menu) #messagelist-content{padding-bottom:0}
 html body.ok-app:has(#layout-menu) #messagelist .ok-mobile-day{display:block;background:#f5f5f7;height:40px;width:100%}
 html body.ok-app:has(#layout-menu) #messagelist .ok-mobile-day td{display:block;width:100%!important;border:0;padding:12px!important;color:#8a8a8a;font:600 14px/16px Arial!important;background:transparent}
 html body.ok-app:has(#layout-menu) #messagelist tr.message{min-height:86px;border:0}
 html body.ok-app:has(#layout-menu) #messagelist tr.message td.subject{padding:12px 12px 20px 68px!important;grid-template-rows:20px auto;row-gap:0;align-content:start}
 html body.ok-app:has(#layout-menu) #messagelist td.subject :is(span.fromto,span.subject){font:14px/20px Arial!important;color:#222!important}
 html body.ok-app:has(#layout-menu) #messagelist td.subject span.subject>a{color:#333!important;font:14px/20px Arial!important;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 html body.ok-app:has(#layout-menu) #messagelist td.subject span.subject>a>span{font:inherit!important;line-height:20px!important}
 html body.ok-app:has(#layout-menu) #messagelist .ok-avatar{left:12px;top:12px;width:44px;height:44px;font:18px Arial}
 html body.ok-app:has(#layout-menu) #messagelist td.subject span.date{font:12px/20px Arial!important;color:#888!important}
 html body.ok-app:has(#layout-menu) #messagelist .ok-full-date{display:none}
 html body.ok-app:has(#layout-menu) #messagelist .ok-mobile-time{display:inline}
 html body.ok-app:has(#layout-menu) #messagelist .msgicon.status{left:28px;top:65px;width:12px!important;height:12px!important;min-width:12px!important;border:1px solid #bfc2c6;border-radius:50%;cursor:pointer}
 html body.ok-app:has(#layout-menu) #messagelist .msgicon.status:before{content:''!important}
 html body.ok-app:has(#layout-menu) #messagelist .msgicon.status.unread{background:#ffda50;border-color:#ffda50}
 html body.ok-app:has(#layout-menu) #messagelist.withselection .ok-avatar{left:56px}
 html body.ok-app:has(#layout-menu) #messagelist.withselection .msgicon.status{left:72px}
 html body.ok-app:has(#layout-menu) .pagenav{height:36px;min-height:36px;flex-basis:36px}
 html body.ok-app:has(#layout-menu) .pagenav a{min-height:36px}
 /* Dark blue folder drawer, as in Yandex mobile; user hierarchy is untouched. */
 html body.ok-app.task-mail:has(#layout-menu) #layout>#layout-sidebar{background:#2d374f!important;color:#e1e5ed!important}
 html body.ok-app.task-mail:has(#layout-menu) #layout-sidebar>.header{background:#2d374f!important;border:0!important;color:#e1e5ed!important}
 html body.ok-app.task-mail:has(#layout-menu) #layout-sidebar>.header>.header-title{color:#e1e5ed!important}
 html body.ok-app.task-mail:has(#layout-menu) #layout-sidebar>.header>a.button{color:#dce2ec!important}
 html body.ok-app.task-mail:has(#layout-menu) #okraina-folder-actions{display:none!important}
 html body.ok-app.task-mail:has(#layout-menu) #okraina-account{display:flex!important;flex-direction:column;align-items:center;gap:12px;padding:10px 12px 22px;color:#e0e4ed;font:14px/20px Arial}
 .ok-mobile-account-avatar{display:flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;background:#ee4550;color:#fff;border:3px solid #2d374f;outline:1px solid #dfc853;font:24px Arial}
 html body.ok-app.task-mail:has(#layout-menu) #mailboxlist{padding:0 8px 16px}
 html body.ok-app.task-mail:has(#layout-menu) #mailboxlist li>a{height:44px!important;min-height:44px!important;line-height:44px!important;color:#e4e7ed!important;font-size:16px!important;border:0!important;border-radius:24px!important;background:transparent}
 html body.ok-app.task-mail:has(#layout-menu) #mailboxlist li{border:0!important}
 html body.ok-app.task-mail:has(#layout-menu) #mailboxlist ul{border:0!important}
 html body.ok-app.task-mail:has(#layout-menu) #folderlist-content{scrollbar-width:thin;scrollbar-color:#66728a #2d374f}
 html body.ok-app.task-mail:has(#layout-menu) #folderlist-content::-webkit-scrollbar{width:5px;background:#2d374f}
 html body.ok-app.task-mail:has(#layout-menu) #folderlist-content::-webkit-scrollbar-thumb{background:#66728a;border-radius:5px}
 html body.ok-app.task-mail:has(#layout-menu) #mailboxlist li.selected>a{background:#414b64!important;color:#fff!important}
 html body.ok-app.task-mail:has(#layout-menu) #mailboxlist li>a:hover{background:#3b465f!important;color:#fff!important}
 html body.ok-app.task-mail:has(#layout-menu) #mailboxlist :is(.treetoggle,.unreadcount){color:#bdc5d6!important;line-height:44px;height:44px}
 html body.ok-app.task-mail:has(#layout-menu) .ok-my-folders{border:0;color:#aeb7ca}
 html body.ok-app.task-mail:has(#layout-menu) .ok-folders-toggle{color:#aeb7ca;font-size:14px}
 html body.ok-app.task-mail:has(#layout-menu) .ok-folders-plus{color:#c5cdde}
 #ok-mobile-folder-services{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:12px 16px max(12px,env(safe-area-inset-bottom));border-top:1px solid #46516a;background:#2d374f}
 #ok-mobile-folder-services :is(a,button){min-height:44px;padding:10px;color:#e5e9f0;background:#414b64;border:0;border-radius:12px;font:14px Arial;text-decoration:none}
 html body.ok-app.action-show:has(#layout-menu) #message-header{padding:0 0 14px!important}
 html body.ok-app.action-show:has(#layout-menu) #layout-content>.content{padding:0!important}
 html body.ok-app.action-show:has(#layout-menu) #message-header .subject{font:400 18px/23px Arial!important;padding:16px 12px!important;background:#f5f4f3;margin:0 0 18px!important}
 html body.ok-app.action-show:has(#layout-menu) #message-header>.header{padding:0 12px}
 html body.ok-app.action-show:has(#layout-menu) #message-content{padding:18px 12px!important}
 /* Composer toolbar stays at the top, with native options/attachment commands. */
 html body.ok-app.action-compose:has(#layout-menu) #layout-content>.header{justify-content:flex-end;gap:8px;padding:0 10px 0 0!important}
 html body.ok-app.action-compose:has(#layout-menu) #layout-content>.header>.header-title{display:none!important}
 html body.ok-app.action-compose:has(#layout-menu) .ok-compose-close{margin-right:auto;width:44px;color:#111;font:26px/44px Arial}
 html body.ok-app.action-compose:has(#layout-menu) .ok-mobile-send{height:36px!important;padding:0 22px!important;font:600 13px/36px Arial!important;border-radius:22px!important}
 html body.ok-app.action-compose:has(#layout-menu) :is(.ok-mobile-compose-options,.ok-mobile-attach){display:block;flex:0 0 36px;width:36px;height:36px;padding:0;border:1px solid #eee;border-radius:50%;background:#fff;color:#333}
 html body.ok-app.action-compose:has(#layout-menu) :is(.ok-mobile-compose-options,.ok-mobile-attach):before{font:900 18px/34px Icons;content:'\f1de'}
 html body.ok-app.action-compose:has(#layout-menu) .ok-mobile-attach:before{content:'\f0c6'}
 html body.ok-app.action-compose:has(#layout-menu) .compose-headers>.form-group{min-height:42px;border-bottom:0}
 html body.ok-app.action-compose:has(#layout-menu) .compose-headers>.form-group>label{font:14px/22px Arial!important;flex-basis:52px;max-width:52px;padding:10px 0!important;color:#999}
 html body.ok-app.action-compose:has(#layout-menu) .compose-headers :is(input,.form-control,.recipient-input){min-height:40px!important}
 html body.ok-app.action-compose:has(#layout-menu) #compose_to{min-height:42px}
 html body.ok-app.action-compose:has(#layout-menu) #ok-compose-headers-toggle{height:30px;min-height:30px;font:12px Arial}
 html body.ok-app.action-compose:has(#layout-menu) #compose-content>.formbuttons{min-height:48px;padding:4px 12px max(4px,env(safe-area-inset-bottom))!important;flex-basis:48px}
 html body.ok-app.action-compose:has(#layout-menu) #messagetoolbar .attach{display:none!important}
 html body.ok-app.action-compose:has(#layout-menu) #messagetoolbar a{height:36px!important;min-height:36px!important;padding:7px!important;background:transparent}
}
@media screen and (max-width:480px){
 html body.ok-app.ok-mobile-folder-open:has(#layout-menu) #layout-list.hidden{display:flex!important;flex-direction:column;position:absolute;inset:0;width:100%!important;filter:brightness(.6);pointer-events:none}
 html body.ok-app.task-mail.ok-mobile-folder-open:has(#layout-menu) #layout>#layout-sidebar:not(.hidden){position:absolute;inset:0 auto 0 0;width:82%!important;max-width:320px!important;z-index:10;box-shadow:16px 0 60px #17203944}
}
@media screen and (min-width:769px){#ok-mobile-reply{display:none!important}}

/* Mobile finish v8: light Yandex-like drawer, clearer rows and a real Disk card.
   Keep this block last so it is the single mobile visual contract. */
@media screen and (max-width:768px){
 html,html body.ok-app:has(#layout-menu){background:#fff!important;color:#252630!important;overflow:hidden}
 html body.ok-app:has(#layout-menu) #layout-list{background:#fff!important}
 html body.ok-app:has(#layout-menu) #layout-list>.header{background:#fff!important;box-shadow:0 1px 0 #eceef1!important;z-index:2}
 html body.ok-app:has(#layout-menu) #messagelist-content{background:#fff!important;overflow:auto!important;-webkit-overflow-scrolling:touch}
 html body.ok-app:has(#layout-menu) #messagelist tbody{background:#fff!important}
 html body.ok-app:has(#layout-menu) #messagelist tr.message{min-height:78px!important;background:#fff!important;border-bottom:1px solid #eceef1!important;cursor:pointer;transition:background-color .12s ease}
 html body.ok-app:has(#layout-menu) #messagelist tr.message:active{background:#f7f8fa!important}
 html body.ok-app:has(#layout-menu) #messagelist tr.message.unread{background:#fffdf0!important}
 html body.ok-app:has(#layout-menu) #messagelist tr.message.flagged{background:#fff4f5!important}
 html body.ok-app:has(#layout-menu) #messagelist tr.message.selected{background:#fff2b8!important}
 html body.ok-app:has(#layout-menu) #messagelist tr.message td.subject{padding:11px 14px 11px 68px!important;grid-template-rows:21px minmax(22px,auto)!important;row-gap:2px!important}
 html body.ok-app:has(#layout-menu) #messagelist td.subject span.fromto{font:600 15px/21px Arial,Helvetica,sans-serif!important;color:#252630!important}
 html body.ok-app:has(#layout-menu) #messagelist tr:not(.unread) td.subject span.fromto{font-weight:400!important}
 html body.ok-app:has(#layout-menu) #messagelist td.subject span.subject{font:14px/21px Arial,Helvetica,sans-serif!important;min-height:21px!important;color:#60646f!important}
 html body.ok-app:has(#layout-menu) #messagelist td.subject span.subject>a{font:inherit!important;line-height:21px!important;color:inherit!important}
 html body.ok-app:has(#layout-menu) #messagelist .ok-avatar{left:12px!important;top:17px!important;width:42px!important;height:42px!important;border-radius:50%;box-shadow:0 0 0 1px #e9eaed;}
 html body.ok-app:has(#layout-menu) #messagelist td.subject span.date{font:12px/21px Arial,Helvetica,sans-serif!important;color:#92959d!important}
 html body.ok-app:has(#layout-menu) #messagelist .msgicon.status{left:28px!important;top:53px!important;width:9px!important;height:9px!important;min-width:9px!important;border:2px solid #fff!important;box-shadow:0 0 0 1px #d6d9df;}
 html body.ok-app:has(#layout-menu) #messagelist .msgicon.status.unread{background:#ffcf35!important;box-shadow:0 0 0 1px #e5b000}
 html body.ok-app:has(#layout-menu) #messagelist tr.ok-mobile-day{min-height:32px!important;height:32px!important;background:#f6f7f9!important;cursor:default}
 html body.ok-app:has(#layout-menu) #messagelist tr.ok-mobile-day td{height:32px!important;min-height:32px!important;padding:8px 14px!important;color:#858992!important;font:600 12px/16px Arial!important;text-transform:none}
 html body.ok-app:has(#layout-menu) .ok-mobile-backdrop{display:none;position:fixed;inset:0;z-index:8;border:0;background:#20252e66;cursor:pointer}
 html body.ok-app.ok-mobile-folder-open:has(#layout-menu) .ok-mobile-backdrop{display:block}
 /* The drawer follows Yandex's light mobile hierarchy; the data remains native. */
 html body.ok-app.task-mail:has(#layout-menu) #layout>#layout-sidebar{background:#fff!important;color:#252630!important;box-shadow:12px 0 34px #1720391c}
 html body.ok-app.task-mail:has(#layout-menu) #layout-sidebar>.header{background:#fff!important;border-bottom:1px solid #eceef1!important;color:#252630!important}
 html body.ok-app.task-mail:has(#layout-menu) #layout-sidebar>.header>.header-title{color:#252630!important}
 html body.ok-app.task-mail:has(#layout-menu) #layout-sidebar>.header>a.button{color:#252630!important}
 html body.ok-app.task-mail:has(#layout-menu) #okraina-account{color:#858992!important}
 html body.ok-app.task-mail:has(#layout-menu) .ok-mobile-account-avatar{background:#ff6b45!important;border-color:#fff!important;outline:1px solid #ffb29e!important;color:#fff!important}
 html body.ok-app.task-mail:has(#layout-menu) #mailboxlist li>a{color:#343740!important;background:transparent!important;border-radius:12px!important}
 html body.ok-app.task-mail:has(#layout-menu) #mailboxlist li.selected>a{background:#f0f1f3!important;color:#252630!important;font-weight:600}
 html body.ok-app.task-mail:has(#layout-menu) #mailboxlist li>a:hover,html body.ok-app.task-mail:has(#layout-menu) #mailboxlist li>a:active{background:#f6f7f8!important;color:#252630!important}
 html body.ok-app.task-mail:has(#layout-menu) #mailboxlist :is(.treetoggle,.unreadcount){color:#92959d!important}
 html body.ok-app.task-mail:has(#layout-menu) .ok-my-folders{color:#858992!important;border-color:#eceef1!important}
 html body.ok-app.task-mail:has(#layout-menu) .ok-folders-toggle{color:#858992!important}
 html body.ok-app.task-mail:has(#layout-menu) .ok-folders-plus{color:#60646f!important}
 html body.ok-app.task-mail:has(#layout-menu) #ok-mobile-folder-services{gap:8px;padding:12px 12px max(12px,env(safe-area-inset-bottom));border-top:1px solid #eceef1;background:#fff}
 html body.ok-app.task-mail:has(#layout-menu) #ok-mobile-folder-services .ok-mobile-disk{display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:58px;padding:9px 12px;border-radius:14px;background:#fff1ed;color:#252630!important;text-decoration:none}
 html body.ok-app.task-mail:has(#layout-menu) #ok-mobile-folder-services .ok-mobile-disk svg{flex:0 0 30px;width:30px;height:24px;fill:none;stroke:#252630;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
 html body.ok-app.task-mail:has(#layout-menu) #ok-mobile-folder-services .ok-service-copy{display:flex;flex-direction:column;min-width:0;line-height:18px}
 html body.ok-app.task-mail:has(#layout-menu) #ok-mobile-folder-services .ok-service-copy strong{font:600 14px/18px Arial!important;color:#252630}
 html body.ok-app.task-mail:has(#layout-menu) #ok-mobile-folder-services .ok-service-copy small{font:12px/17px Arial!important;color:#858992;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 html body.ok-app.task-mail:has(#layout-menu) #ok-mobile-folder-services .ok-mobile-services{flex:0 0 auto;min-height:42px;padding:0 13px;border:1px solid #e2e4e8;border-radius:12px;background:#fff;color:#60646f;font:14px Arial}
 html body.ok-app.task-mail:has(#layout-menu) #layout-sidebar:not(.hidden){z-index:10}
 html body.ok-app:has(#layout-menu) :is(a,button,[role="button"]){cursor:pointer}
 html body.ok-app:has(#layout-menu) :is(a,button,[role="button"]):focus-visible{outline:2px solid #4c8bf5;outline-offset:2px}
 html body.ok-app:has(#layout-menu) .pagenav{background:#fff!important}
 /* Reading view keeps Yandex's compact subject band and leaves one-hand reply actions visible. */
 html body.ok-app.action-show:has(#layout-menu) #message-header .subject{background:#f6f7f9!important;border-bottom:1px solid #eceef1!important;font-size:18px!important;line-height:24px!important;padding:14px 14px!important}
 html body.ok-app.action-show:has(#layout-menu) #message-content{padding:18px 14px!important}
 html body.ok-app.action-show:has(#layout-menu) #messagebody .pre{font-size:15px!important;line-height:1.6!important}
 html body.ok-app.action-compose:has(#layout-menu) #layout-content>.header{background:#fff!important}
}
@media screen and (max-width:360px){
 html body.ok-app:has(#layout-menu) #messagelist tr.message td.subject{padding-left:62px!important;padding-right:10px!important}
 html body.ok-app:has(#layout-menu) #messagelist .ok-avatar{left:8px!important}
 html body.ok-app:has(#layout-menu) #messagelist .msgicon.status{left:24px!important}
 html body.ok-app.task-mail:has(#layout-menu) #layout>#layout-sidebar:not(.hidden){width:88%!important}
 html body.ok-app.action-compose:has(#layout-menu) .ok-mobile-send{padding:0 14px!important}
}