/* Zahy on phones: every app page loads this last, for screens up to 900px (media attribute on the link).
   Not the desktop squeezed down. The phone version has its own parts (mobile.js builds them):
   · a bottom tab bar (التصاميم · المونتاج · ＋ · الإعلانات · التقويم) instead of the sidebar,
   · a top bar with the account (its own sheet) and the section's history (the sidebar, shown as a sheet),
   · every menu and picker as a bottom sheet with a scrim, closed by a tap outside or a swipe down,
   · full-screen editors with a tool dock under the thumb, 16px fields (iOS never zooms), safe areas,
     and the app sized to the visible screen so the keyboard pushes the composer up.
   The designs (.dz) are never touched here. */
:root{
  --tab-h:58px; --sab:env(safe-area-inset-bottom,0px); --sat:env(safe-area-inset-top,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --scrim:rgba(12,12,22,.44); --sheet-r:24px; --m-ease:cubic-bezier(.32,.72,0,1);
  --head-h:56px;
}
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
body{-webkit-touch-callout:none}
:where(input,textarea,[contenteditable]){-webkit-touch-callout:default}

/* ---------- the frame: the visible screen, a column, the tab bar at its foot ---------- */
.app,.app.collapsed{position:fixed;left:0;right:0;top:var(--vvt,0px);height:var(--vvh,100dvh);display:flex;flex-direction:column;
  grid-template-columns:none;direction:rtl;padding-inline:var(--sar) var(--sal);transition:none}
.app>.main{flex:1 1 auto;min-height:0;width:100%;grid-column:auto;grid-row:auto}

/* ---------- bottom tab bar ---------- */
.m-tabbar{flex:none;position:relative;display:flex;align-items:flex-start;justify-content:space-around;height:calc(var(--tab-h) + var(--sab));
  padding:5px 4px var(--sab);background:#fff;border-top:1px solid var(--line);direction:rtl}
.m-tabbar a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding-top:2px;text-decoration:none;color:var(--stone);
  font-size:11px;font-weight:600;line-height:1.2;letter-spacing:-.005em}
.m-tabbar a i{width:58px;height:30px;border-radius:99px;display:grid;place-items:center;transition:background-color .2s,color .2s}
.m-tabbar a svg{width:23px;height:23px}
.m-tabbar a[aria-current="page"]{color:var(--ink)}
.m-tabbar a[aria-current="page"] i{background:var(--primary-soft);color:var(--primary)}
.m-tabbar a:active i{background:var(--soft-2)}
.m-tabbar .m-create{flex:none;align-self:center;width:50px;height:44px;margin:-2px 6px 0;border-radius:16px;border:0;background:var(--grad);color:#fff;display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 18px -8px rgba(114,50,242,.75);transition:transform .15s}
.m-tabbar .m-create:active{transform:scale(.94)}
.m-tabbar .m-create svg{width:24px;height:24px}
html.kb .m-tabbar{display:none}

/* ---------- top bars: the account at the start, the section's history at the end ---------- */
.chat-head,.canvas-head,.page-head{min-height:var(--head-h);height:auto;padding:6px 10px;gap:6px;background:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line)}
.app [data-side-open]{display:none!important}
.m-av{flex:none;width:36px;height:36px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:var(--grad);color:#fff;
  font:700 14px/1 var(--font-ui);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 2px 6px -2px rgba(114,50,242,.45)}
.m-av.guest{background:var(--soft);color:var(--stone);box-shadow:inset 0 0 0 1px var(--sand)}
.m-av{position:relative}
.m-av.dot::after{content:"";position:absolute;top:-1px;inset-inline-end:-1px;width:11px;height:11px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px #fff}
.m-av.guest svg{width:20px;height:20px}
.m-hist{flex:none;width:40px;height:40px;border-radius:12px;border:0;background:transparent;color:var(--ink-2);display:grid;place-items:center}
.m-hist:active{background:var(--press)}
.m-hist svg{width:22px;height:22px}
.page-head .m-hist,.chat-head .m-hist,.canvas-head .m-hist{margin-inline-start:auto}
.page-head h1{font-size:18px;font-weight:700;margin-inline-start:2px}
.m-brand{display:none;align-items:center;gap:8px;margin-inline:auto;font:700 15.5px/1 var(--font-brand);color:var(--ink);letter-spacing:-.01em}
.m-brand img{width:24px;height:24px}
.m-br{flex-basis:100%;height:0;order:5}

/* segmented switch (chat · results) in the top bar */
.mtabs{flex:1 1 auto;max-width:320px;margin-inline:auto;display:flex;gap:2px;padding:3px;border-radius:12px;background:#EFEFF2}
.mtabs button{flex:1 1 0;height:34px;padding:0 8px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.mtabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(18,18,28,.08),0 2px 8px -2px rgba(18,18,28,.12)}
.mtabs button span{font-weight:700;color:var(--primary);margin-inline-start:3px;font-variant-numeric:tabular-nums}
.mtabs+.m-hist{margin-inline-start:0}

/* ---------- the workspace (app.html) ---------- */
.chat-head .proj,.chat-head .beta,.chat-head .ttl,.canvas-head .c-title,#emptyLbl{display:none}
.main.blank .chat-head{background:transparent;border-bottom-color:transparent}
.main.blank .chat-head>.m-brand{display:flex}
.main.blank .chat-head>.m-av,.main.blank .chat-head>.m-hist{display:grid}
.main:not(.blank) .chat-head>.m-brand{display:none}
/* the results' header: the switch on top, the size tabs and «تحميل الكل» on a second row */
.canvas-head{flex-wrap:wrap;row-gap:0;padding-bottom:6px}
.canvas-head>.m-av{order:1}.canvas-head>.mtabs{order:2}.canvas-head>.m-hist{order:3}
.canvas-head>:not(.m-av):not(.mtabs):not(.m-hist):not(.m-br){order:6;margin-top:6px}
.canvas-head>.tabs{flex:1 1 0;min-width:0;padding:3px}
.canvas-head>.tabs button{height:32px;padding:0 11px}
.canvas-head .ch-end{gap:8px}
.canvas-head .ch-end:empty{display:none}
.canvas-head .zoom,.canvas-head .status:empty{display:none}
.canvas-head .status{font-size:12px;max-width:42vw;overflow:hidden;text-overflow:ellipsis}
.progress{width:64px}
/* «تحميل الكل» floats over the designs, above the tab bar */
#zipBtn{position:fixed;z-index:6;left:50%;bottom:calc(var(--tab-h) + var(--sab) + 14px);transform:translateX(-50%);height:46px;padding:0 20px;border-radius:99px;
  font-size:14.5px;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 14px 30px -10px rgba(76,30,190,.65)}
#zipBtn span{display:inline}
#zipBtn:disabled{opacity:0;pointer-events:none}
#zipBtn:active:not(:disabled){transform:translateX(-50%) scale(.97)}
html.kb #zipBtn{display:none}
.main[data-view="designs"] .stage{padding-bottom:84px}

/* the conversation */
.thread{padding:14px 14px 8px;gap:18px}
.msg.bot .av{display:none}
.msg.bot .bubble,.msg.user .bubble{font-size:15.5px;line-height:1.8}
.msg.user .body{max-width:88%}
.msg.user .bubble{border-radius:20px 20px 6px 20px;padding:10px 15px}
.card{border-radius:18px;padding:14px}
.quick{gap:8px}
.quick button{height:40px;padding:0 15px;font-size:14px}
.seg button{height:38px;padding:0 14px;font-size:14px}

/* the composer: under the thumb, 16px so iOS never zooms */
.dock{padding:8px 10px 10px}
.composer{border-radius:22px}
.composer .editor{font-size:16px;min-height:46px;max-height:150px;padding:12px 15px 2px;line-height:1.7}
.composer textarea{font-size:16px;min-height:46px;max-height:150px;padding:12px 15px 2px}
.c-row{padding:4px 6px 6px;gap:2px}
.c-btn{width:40px;height:40px;border-radius:12px}
.c-btn svg{width:20px;height:20px}
.c-pill{height:36px;padding:0 12px;font-size:13px}
.send{width:42px;height:42px;border-radius:14px}
.send svg{width:19px;height:19px}
.dock .hint{font-size:12px;margin-top:6px}
/* the settings row under the composer: one line of chips you can slide */
.dock>.settings{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;margin:8px -10px 0;padding:0 10px}
.dock>.settings::-webkit-scrollbar{display:none}
.dock>.settings .sp{display:none}
.set{flex:none;height:34px;padding:0 12px;border-radius:99px;background:var(--soft);color:var(--ink-2);font-size:12.5px}

/* blank workspace: the greeting in the middle, the starters and the composer at the bottom, near the thumb */
.main.blank::before{opacity:.38}
.main.blank .dock{justify-content:flex-end;align-items:stretch;padding:4px 12px 12px}
.main.blank .hero{order:0;margin:auto 0;padding:8px 6px 18px}
.main.blank .starters{order:1}
.main.blank .composer{order:2}
.main.blank .dock>.settings{order:3}
.main.blank .composer,.main.blank .dock>.settings,.main.blank .starters{width:100%}
.main.blank .hero,.main.blank .composer,.main.blank .dock>.settings,.main.blank .starters,.main.arrive .dock{animation-fill-mode:backwards}
.hero .mark{width:52px;height:52px;border-radius:16px;margin-bottom:16px}
.hero .mark img{width:28px}
.hero h1{font-size:27px}
.hero-sub{font-size:15px;max-width:330px}
.main.blank .composer{border-radius:24px}
.main.blank .composer .editor{min-height:64px;font-size:16px;padding:15px 16px 4px}
.main.blank .send{width:44px;height:44px;border-radius:15px}
.main.blank .starters{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:8px;margin:0 -12px 10px;padding:2px 12px 4px;scroll-snap-type:x proximity}
.main.blank .starters::-webkit-scrollbar{display:none}
.starters button,.starters button:nth-child(n+4){display:inline-flex;flex:none;height:40px;padding:0 15px;border-radius:14px;font-size:13.5px;scroll-snap-align:start;background:#fff}
.starters button:hover{transform:none}

/* the designs: two columns, one tap opens the design, ⋯ for the rest */
.stage{padding:12px 12px 28px}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
.tile{padding:5px;border-radius:16px}
.tile:hover{transform:none;box-shadow:0 0 0 1px rgba(20,20,26,.06),var(--sh-sm)}
.tile .pv{border-radius:12px}
.tile .meta{flex-wrap:nowrap!important;min-height:40px;padding:4px 2px 0 6px;gap:0}
.tile .meta b{flex:1 1 auto!important;flex-basis:auto!important;font-size:13px;padding:0 2px!important}
.tile .meta b small{display:none}
.tile .meta .fab,.tile .meta>[data-a]{display:none!important}
.m-more{flex:none;width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:var(--ink-2);display:grid;place-items:center}
.m-more:active{background:var(--press)}
.m-more svg{width:20px;height:20px}
.tile .pv .qa{top:8px;left:8px}

/* ---------- the design room: full screen, the tools under the thumb ---------- */
.modal{padding:0;top:var(--vvt,0px);height:var(--vvh,100dvh);bottom:auto;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.modal.open{display:block}
.ed{width:100%;height:100%;border-radius:0;box-shadow:none;animation:none;
  grid-template:auto minmax(0,1fr) auto auto/minmax(0,1fr);grid-template-areas:"top" "view" "ask" "dock";padding:var(--sat) 0 var(--sab)}
.ed-top{height:52px;padding:0 6px;gap:0}
.ed-top .ic{width:38px;height:38px}
#edMock,#edPanelBtn,.ed-top .sep{display:none}
.ed-top .btn{height:36px;padding:0 10px;border-radius:11px}
#edPub span,#edDl span{display:none}
#edPub,#edDl{width:38px;padding:0}
#edClose{margin-inline-start:6px;padding:0 14px;background:var(--ink);color:#fff}
.qa-chip{margin-inline-start:4px;height:28px}
.ed .view{padding:12px;background:var(--soft)}
.ed .view .hint{top:10px;font-size:12px;padding:0 16px}
.ed-ask{padding:8px 10px;gap:8px}
.ed-ask input{height:44px;font-size:16px}
.ed-ask button{width:44px;height:44px}
.m-eddock{grid-area:dock;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding:4px 6px 6px;background:#fff;border-top:1px solid var(--line)}
.m-eddock::-webkit-scrollbar{display:none}
.m-eddock button{flex:1 0 auto;min-width:60px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 6px 5px;border:0;border-radius:12px;background:none;
  color:var(--ink-2);font-size:11.5px;font-weight:600;white-space:nowrap}
.m-eddock button svg{width:22px;height:22px;color:var(--ink-2)}
.m-eddock button:active,.m-eddock button.on{background:var(--primary-soft);color:var(--primary-ink)}
.m-eddock button.on svg{color:var(--primary)}
.ed-tools{bottom:10px;max-width:calc(100% - 20px);border-radius:14px}
.ed-tools button{height:36px}
.tool-pop{bottom:64px;max-height:56%;border-radius:18px}
.tool-pop textarea{font-size:16px}
.ed-panel{position:absolute;inset:auto 0 0 0;z-index:12;max-height:74%;padding:4px 16px calc(14px + var(--sab));border:0;border-radius:var(--sheet-r) var(--sheet-r) 0 0;
  transform:translateY(102%);visibility:hidden;transition:transform .34s var(--m-ease),box-shadow .34s,visibility 0s .34s;box-shadow:0 0 0 100vmax rgba(12,12,22,0)}
.ed-panel.open{transform:none;visibility:visible;transition:transform .34s var(--m-ease),box-shadow .34s;box-shadow:0 0 0 100vmax var(--scrim),0 -12px 40px -14px rgba(0,0,0,.35)}
.ed-panel::before{content:"";display:block;width:38px;height:5px;border-radius:3px;background:#D5D5DB;margin:6px auto 4px}
.ed-panel summary{padding:14px 2px;font-size:15px}
.ed-panel select{height:44px;font-size:16px}
.phone{width:min(340px,92%)}

/* ---------- bottom sheets: the composer's menus, a conversation's menu, «انشر», the editor's panel ---------- */
.pop>.panel,.pop.down>.panel{position:fixed!important;inset:auto 0 0 0!important;top:auto!important;width:auto!important;min-width:0!important;max-width:none!important;
  max-height:min(80vh,calc(var(--vvh,100dvh) - 56px));overflow-y:auto;overscroll-behavior:contain;z-index:60;
  border-radius:var(--sheet-r) var(--sheet-r) 0 0;padding:4px 14px calc(16px + var(--sab));opacity:1;
  transform:translateY(102%);visibility:hidden;transform-origin:bottom center;
  transition:transform .34s var(--m-ease),box-shadow .34s,visibility 0s .34s;box-shadow:0 0 0 100vmax rgba(12,12,22,0)}
.pop.open>.panel{transform:none;visibility:visible;transition:transform .34s var(--m-ease),box-shadow .34s;box-shadow:0 0 0 100vmax var(--scrim),0 -12px 40px -14px rgba(0,0,0,.3)}
.h-menu,.h-menu.pub-menu{position:fixed!important;inset:auto 0 0 0!important;top:auto!important;left:0!important;width:auto!important;z-index:80;
  border-radius:var(--sheet-r) var(--sheet-r) 0 0;padding:4px 10px calc(14px + var(--sab));opacity:1;
  transform:translateY(102%);visibility:hidden;transition:transform .34s var(--m-ease),box-shadow .34s,visibility 0s .34s;box-shadow:0 0 0 100vmax rgba(12,12,22,0)}
.h-menu.open{transform:none;visibility:visible;transition:transform .34s var(--m-ease),box-shadow .34s;box-shadow:0 0 0 100vmax var(--scrim),0 -12px 40px -14px rgba(0,0,0,.3)}
/* the grabber on top, and an invisible shield behind the sheet so a tap outside only closes it (mobile.js) */
.pop>.panel::before,.h-menu::before,.m-sheet>.m-grab{content:"";display:block;flex:none;width:38px;height:5px;border-radius:3px;background:#D5D5DB;margin:8px auto 10px}
.pop>.panel::after,.h-menu::after,.ed-panel::after{content:"";position:fixed;inset:-100vmax;z-index:-1}
.pop:not(.open)>.panel::after,.h-menu:not(.open)::after,.ed-panel:not(.open)::after{display:none}
.mi{min-height:50px;height:auto;padding:0 12px;font-size:15.5px;border-radius:12px}
.mi>svg:first-child{width:20px;height:20px}
.pub-menu .mi{padding-block:12px}
.pub-menu .mi small{font-size:13px}
.add-list button{padding:10px 8px;gap:14px}
.add-list b{font-size:15px}
.add-list small{font-size:13px}
.composer .panel h6,.sc-list h6,.st-panel h6{font-size:13px;margin:6px 4px 10px}
.sc-list button{height:38px;padding:0 14px;font-size:14px}
.pop .opt{padding:12px 10px}
.pop .opt .t b{font-size:15px}
.fmt button{padding:11px 0;font-size:13.5px}
.cr-rec button{padding:12px}
.cr-more select{height:44px;font-size:16px}
.sz-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sz .step button{width:28px;height:28px}
.sz-packs button{height:34px;padding:0 13px;font-size:13px}
.sz-foot .btn{height:42px;padding:0 22px}
/* the sheet's "done" stays under the thumb while the sizes scroll */
.pop>.panel.sz-panel{padding-bottom:0}
.sz-panel .sz-foot{position:sticky;bottom:0;z-index:2;margin:12px -14px 0;padding:12px 16px calc(12px + var(--sab));background:#fff;border-top:1px solid var(--line)}

/* the section's history: the sidebar, shown as a sheet (the new + search buttons on top, then the list) */
.side,.app.collapsed .side{position:fixed;inset:auto 0 0 0;width:auto;height:auto;max-height:min(84vh,calc(var(--vvh,100dvh) - 40px));z-index:45;
  border:0;border-radius:var(--sheet-r) var(--sheet-r) 0 0;background:#fff;padding:0 4px var(--sab);overflow:hidden;
  transform:translateY(102%);visibility:hidden;transition:transform .34s var(--m-ease),visibility 0s .34s;box-shadow:none}
.app.side-open .side{transform:none;visibility:visible;transition:transform .34s var(--m-ease);box-shadow:0 -20px 50px -20px rgba(0,0,0,.35)}
.app.side-open::after{background:var(--scrim);-webkit-backdrop-filter:none;backdrop-filter:none}
.side::before{content:"";display:block;flex:none;width:38px;height:5px;border-radius:3px;background:#D5D5DB;margin:8px auto 6px}
.side .side-top,.side .nav-sep,.side .acct,.side>.grip,.side .side-nav>:not(.primary):not(#searchBtn){display:none!important}
.side .side-nav,.app.collapsed .side-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 10px 6px}
.side .row,.side .row.primary,.app.collapsed .side .row{height:46px;width:auto;margin:0;padding:0 14px;justify-content:center;border-radius:14px;font-size:14.5px;
  background:var(--soft);box-shadow:none;font-weight:600;color:var(--ink)}
.side .row.primary{background:var(--primary-soft);color:var(--primary-ink)}
.side .row svg{width:19px;height:19px}
.side .row .kbd-k,.side .row .tip{display:none!important}
.side .lbl{display:inline!important}
.side-sec,.app.collapsed .side-sec{display:flex!important;padding:2px 6px 8px}
.side-sec .sec-h{font-size:13px;padding:10px 8px 6px}
.h-item{min-height:50px;padding:6px 10px;font-size:15px;border-radius:14px}
.h-item .dots{display:grid;width:36px;height:36px}
.h-item .ct{font-size:12px}
.h-group{font-size:12.5px;padding:14px 10px 6px}
.hsearch{height:44px;font-size:16px}
.h-empty{font-size:14px;padding:10px;line-height:1.7}

/* the settings / usage / what's-new sheet and the brand drawer */
.sheet{place-items:end stretch;padding:0;background:var(--scrim);-webkit-backdrop-filter:none;backdrop-filter:none}
.sheet .box{width:100%;max-height:calc(var(--vvh,100dvh) - 24px);border-radius:var(--sheet-r) var(--sheet-r) 0 0;padding-bottom:var(--sab);animation:mSheetUp .38s var(--m-ease) both}
.sheet header{min-height:56px}
.auth-box{width:100%}
.sheet .stat{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sheet .stat b{font-size:20px}
#brandDrawer{top:var(--vvt,0px);bottom:auto;height:var(--vvh,100dvh);right:0;width:100%;border:0}
#brandDrawer footer{padding-bottom:calc(14px + var(--sab))}
#brandDrawer .body{padding:16px}
@keyframes mSheetUp{from{transform:translateY(100%)}to{transform:none}}

/* ---------- montage and ads (the shared chat page) ---------- */
.chat-main .chat-head .ttl{display:none}
.chat-main .canvas-head{flex-wrap:wrap}
.chat-main .canvas-head .ch-end{margin-inline-start:0;flex:1 1 100%;justify-content:flex-end}
.c-file{height:46px}
.c-file .x{width:26px;height:26px}

/* ---------- pages with a plain header (calendar, settings, examples) ---------- */
.page-head{flex-wrap:wrap}
.page-body{background:var(--app)}
/* calendar: the date and the arrows on top, the views as one switch, «بوست جديد» as a floating button */
.cal-head{row-gap:8px}
.cal-head .nav-grp{order:2;flex:1 1 0;min-width:0;gap:4px}
.cal-head .end{order:6;flex:1 1 100%;margin:0}
.cal-head .views{flex:1;background:#EFEFF2;border-radius:12px;padding:3px}
.cal-head .views button{height:34px;font-size:13.5px}
.cal-head #newAd{display:none}
.cal-head #newPost{position:fixed;z-index:20;inset-inline-start:auto;left:calc(16px + var(--sal));bottom:calc(var(--tab-h) + var(--sab) + 16px);width:auto;height:52px;padding:0 18px 0 16px;gap:8px;
  border-radius:17px;background:var(--grad);font-size:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 14px 28px -12px rgba(114,50,242,.8)}
.cal-head #newPost span{display:inline}
.cal-head #newPost svg{width:20px;height:20px}
html.kb .cal-head #newPost,.cal-page:has(#toolbar[hidden]) #newPost{display:none}
.cal-head .m-av{order:1}
.ag,.d-wrap{padding-bottom:96px}
/* settings: the section tabs as one sliding row under the title */
.page-head>nav#tabs{order:6;flex:1 1 100%;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:2px -10px -6px;padding:0 10px}
.page-head>nav#tabs::-webkit-scrollbar{display:none}
.page-head>nav#tabs a{flex:none;height:42px;display:inline-flex;align-items:center;padding:0 12px;font-size:14.5px}

/* ---------- sheets mobile.js builds: new, account, a design's actions, ready to save, install ---------- */
.m-scrim{position:fixed;inset:0;z-index:84;background:var(--scrim);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;-webkit-tap-highlight-color:transparent}
.m-scrim.on{opacity:1;visibility:visible;transition:opacity .3s}
.m-sheet{position:fixed;inset:auto 0 0 0;z-index:85;display:flex;flex-direction:column;max-height:calc(var(--vvh,100dvh) - 32px);overflow:hidden;direction:rtl;
  background:#fff;border-radius:var(--sheet-r) var(--sheet-r) 0 0;padding:0 0 calc(10px + var(--sab));box-shadow:0 -20px 50px -20px rgba(0,0,0,.35);
  transform:translateY(102%);visibility:hidden;transition:transform .36s var(--m-ease),visibility 0s .36s}
.m-sheet.open{transform:none;visibility:visible;transition:transform .36s var(--m-ease)}
.m-sheet>.m-grab{margin-bottom:4px}
.m-sh{display:flex;align-items:center;gap:10px;padding:2px 18px 12px}
.m-sh b{flex:1;font-size:17px;font-weight:700}
.m-sh small{display:block;font-size:13px;font-weight:400;color:var(--stone);margin-top:2px}
.m-x{width:34px;height:34px;border-radius:50%;border:0;background:var(--soft);color:var(--ink-2);display:grid;place-items:center;flex:none}
.m-x svg{width:16px;height:16px}
.m-body{overflow-y:auto;overscroll-behavior:contain;padding:0 14px 6px}
/* "new": big cards, two per row */
.m-new{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-new a,.m-new button{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:118px;padding:14px;border-radius:18px;border:0;text-align:start;text-decoration:none;
  color:var(--ink);background:var(--app);box-shadow:inset 0 0 0 1px var(--line)}
.m-new a:active,.m-new button:active{background:var(--soft-2)}
.m-new i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center}
.m-new i svg{width:22px;height:22px}
.m-new b{font-size:15px;font-weight:700;line-height:1.35}
.m-new small{display:block;font-size:12.5px;color:var(--stone);line-height:1.5;margin-top:2px}
.m-new .wide{grid-column:1/-1;flex-direction:row;align-items:center;min-height:0}
.m-new i{color:#35198F;background:linear-gradient(180deg,#FFFFFF,#F6F5F9);box-shadow:inset 0 0 0 1px rgba(20,20,22,.085),inset 0 1px 0 #fff,0 6px 14px -9px rgba(30,20,70,.28)}
/* account: who, then grouped rows */
.m-prof{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:14px;border-radius:18px;background:var(--app);box-shadow:inset 0 0 0 1px var(--line)}
.m-prof .av{width:48px;height:48px;font-size:19px}
.m-prof .who{flex:1;min-width:0;display:grid;gap:1px}
.m-prof .who b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-prof .who small{font-size:13px;color:var(--stone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-cred{flex:none;font-size:12.5px;font-weight:700;color:var(--primary-ink);background:var(--primary-soft);border-radius:99px;padding:5px 11px;font-variant-numeric:tabular-nums}
.m-prof .btn{flex:none}
.m-list{display:grid;margin:0 0 12px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.m-row{display:flex;align-items:center;gap:13px;min-height:52px;padding:0 14px;border:0;background:none;width:100%;text-align:start;text-decoration:none;color:var(--ink);font-size:15.5px;font-weight:500}
.m-row+.m-row{box-shadow:inset 0 1px 0 var(--line)}
.m-row:active{background:var(--soft)}
.m-row>svg:first-child{width:21px;height:21px;color:var(--stone);flex:none}
.m-row>span{flex:1;min-width:0}
.m-row>span small{display:block;font-size:12.5px;color:var(--stone);font-weight:400}
.m-row .go{width:16px;height:16px;color:var(--ghost);flex:none}
.m-row.danger,.m-row.danger>svg:first-child{color:var(--bad)}
.m-row.hl>svg:first-child{color:var(--primary)}
/* a design's actions */
.m-acts{display:grid;gap:2px}
/* ready to save */
.m-ready{display:grid;gap:14px;justify-items:center;text-align:center;padding:4px 4px 2px}
.m-ready .pic{max-width:62%;max-height:38vh;border-radius:14px;box-shadow:0 0 0 1px var(--line),0 18px 36px -18px rgba(0,0,0,.45);display:block}
.m-ready .file{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}
.m-ready .file svg{width:34px;height:34px}
.m-ready p{margin:0;font-size:14px;color:var(--stone);line-height:1.7}
.m-ready .acts{display:grid;gap:8px;width:100%}
.m-ready .btn{height:50px;border-radius:15px;font-size:15.5px;width:100%}
/* install */
.m-steps{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:10px;counter-reset:s}
.m-steps li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--app);font-size:15px;line-height:1.6;counter-increment:s}
.m-steps li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:700;font-size:13px}
.m-steps svg{width:20px;height:20px;vertical-align:-4px;color:var(--info)}

/* ---------- touch everywhere ---------- */
.ic-btn{width:40px;height:40px}
.btn{height:42px}
.btn.sm{height:36px}
.btn.lg{height:48px}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not(.asset input),textarea,select{font-size:16px!important}
.field input,.field select{height:46px}
.toast{bottom:calc(var(--tab-h) + var(--sab) + 14px);max-width:calc(100vw - 32px);border-radius:14px}
html.kb .toast,body.ed-on .toast{bottom:calc(16px + var(--sab))}
html .sp-veil{padding:0;align-items:stretch;top:var(--vvt,0px);height:var(--vvh,100dvh);bottom:auto}
html .sp-card{width:100%;height:100%;max-height:none;border-radius:0;padding-bottom:var(--sab)}
@media (hover:none){.tile:hover,.starters button:hover,.start-nudge:hover,.ex-card:hover{transform:none}}
/* touch screens show their own overlay scrollbars: the desktop's styled bars stay off */
@media (pointer:coarse){*{scrollbar-width:none}::-webkit-scrollbar{display:none}}

/* ---------- examples: two compact cards a row ---------- */
.ex-wrap{padding:16px 12px 28px}
.ex-intro{margin:0 4px 16px}
.ex-intro h2{font-size:21px}
.ex-intro p{font-size:14.5px}
.ex-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ex-card{border-radius:18px}
.ex-card .stage{height:132px}
.ex-card .s{bottom:-26px;border-radius:7px}
.ex-card .s2{bottom:-16px}
.ex-card .body{padding:12px 12px 14px}
.ex-card h3{font-size:15px}
.ex-card p{font-size:12.5px;margin-bottom:10px;line-height:1.55}
.ex-card q{display:none}
.ex-card .go{font-size:13px}
@media (prefers-reduced-motion:reduce){.m-sheet,.side,.pop>.panel,.h-menu,.ed-panel{transition:none!important}}

/* ---------- chat cards on a phone: every button sits where the thumb expects it ---------- */
/* a question with several answers: the hint under the title, the choices as an even grid, «تمام» full width under them */
.card.ask{gap:12px}
.ask-opts{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.ask-opts.rich{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.ask-o{min-height:44px;justify-content:flex-start;padding:8px 12px;font-size:14px;border-radius:12px;text-align:start}
.ask-opts.rich .ask-o{min-height:58px;align-items:flex-start}
.ask-o small{font-size:12px}
.ask-multi{flex-direction:column-reverse;align-items:stretch;gap:8px}
.ask-multi small{text-align:center;font-size:12.5px}
.ask-multi .btn{width:100%;height:46px;border-radius:13px;font-size:15px}
.ask-other{height:46px;border-radius:13px}
.ask-other input{font-size:16px!important}
.ask-other button{width:38px;height:38px}
/* a card's actions: side by side when they fit, each a real tap target, never hanging off an edge */
.card .acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.card .acts>*{width:100%;min-width:0;height:44px;justify-content:center}
.quick{display:flex;flex-wrap:wrap}
.quick button{max-width:100%;white-space:normal;line-height:1.35;height:auto;min-height:40px;padding:8px 14px;text-align:start}
.bc-foot{gap:6px;padding:12px}
.bc-foot>.btn{flex:1 1 auto}
.plan-foot{padding:12px 14px calc(12px + var(--sab))}
.plan-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.plan-acts>*{width:100%;height:46px;justify-content:center}
.pv-h,.lbl-row,.meter-h{flex-wrap:wrap}
.cf-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cf-acts>*{width:100%}
/* the montage player and the ads dialogs: full width, buttons along the bottom */
dialog.player{width:100vw;max-width:100vw;height:var(--vvh,100dvh);max-height:none;margin:0;border-radius:0;padding:0}
.pl-foot{flex-wrap:wrap;padding:10px 12px calc(10px + var(--sab))}
.pl-foot b{flex:1 1 100%}
.pl-foot .btn{flex:1 1 0}
dialog.confirm,dialog.posts-dlg{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:var(--sheet-r) var(--sheet-r) 0 0;padding-bottom:var(--sab)}

/* ---------- calendar on a phone: the week's columns line up under their days, nothing runs off the side ---------- */
/* a scrollbar inside the grid would make the body narrower than the header above it: the bars stay hidden
   (touch and the wheel still scroll), so every column keeps the same width as its day */
.w-scroll,.m-grid{scrollbar-width:none;overflow-x:hidden}
.w-scroll::-webkit-scrollbar,.m-grid::-webkit-scrollbar{display:none}
.w-wrap{--gut:40px;max-width:100%;overflow:hidden}
.w-head,.w-all,.w-grid{max-width:100%}
.w-all{overflow:hidden}
.w-corner{display:grid;place-items:center;min-width:0;overflow:hidden;padding:0 2px;font-size:9.5px;font-weight:700;line-height:1.15;text-align:center;color:var(--stone);white-space:normal}
.w-all .wk-ads{min-width:0;overflow:hidden}
/* a month's ad bars stay inside their week: clipped at its edges, cut short with an ellipsis */
.wk{overflow:hidden}
.wk-ads{overflow:hidden}
.adbar{min-width:0;max-width:100%;overflow:hidden;height:18px;border-radius:5px}
.adbar span{min-width:0}
.m-head span{font-size:11.5px}
.cal-page .toolbar{max-width:100%;overflow:hidden}