/* The chats in the left panel (js/chatorg.js): Pinned, Projects, press and hold with ticks right in the panel, the
   menu beside a chat, the bar of actions at the foot, and a project or the archived chats opened over the list.
   Every rule starts from the panel itself (.drawer), so no other screen changes. */

/* ---------- rows ---------- */
.drawer .dchat .dck{display:none}
/* while ticking, a round tick sits at the start of every chat, centred on its line, and the title moves over for it */
.drawer.sel .dchat[data-tid]{position:relative;padding-inline-start:54px}
.drawer.sel .dchat .dck{display:grid;place-items:center;position:absolute;inset-inline-start:20px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;border:2px solid #BDBDBD;box-sizing:border-box;transition:background .15s,border-color .15s}
.drawer .dchat .dck svg{opacity:0;transform:scale(.5);transition:opacity .15s,transform .18s var(--ease)}
.drawer.sel .dchat.ck{background:var(--green-soft);border-radius:14px;margin-inline:8px;width:calc(100% - 16px);padding-inline:46px 12px}
.drawer.sel .dchat.ck .dck{inset-inline-start:12px}
/* two ticked chats one under the other keep a thin white line between them */
.drawer.sel .dchat.ck{box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 #fff}
/* in Arabic the tick sits on the right of every chat, an English title too (its row reads left to right) */
html[dir=rtl] .drawer.sel .dchat[data-tid]{padding-left:20px;padding-right:54px}
html[dir=rtl] .drawer.sel .dchat .dck{left:auto;right:20px}
html[dir=rtl] .drawer.sel .dchat.ck{padding-left:12px;padding-right:46px}
html[dir=rtl] .drawer.sel .dchat.ck .dck{right:12px}
.drawer.sel .dchat.ck:active{background:#DCEBE1}
.drawer.sel .dchat.ck .dck{background:var(--green);border-color:var(--green)}
.drawer.sel .dchat.ck .dck svg{opacity:1;transform:none}
.drawer .dchat .dtag{display:inline-flex;align-items:center;gap:4px;max-width:46%;overflow:hidden;text-overflow:ellipsis;vertical-align:1px;margin-inline-end:8px;padding:1px 8px 1px 7px;border-radius:10px;background:var(--green-soft);color:var(--green);font-size:12.5px;line-height:18px;font-weight:600}
.drawer .dchat .dtag svg{flex:none}

/* ---------- the drop downs: Pinned, Projects, Files (a row with its icon, how many, and the arrow) ---------- */
.drawer .dfold .dfnum{margin-inline-start:auto;font-size:14px;line-height:20px;font-weight:500;color:var(--ph)}
.drawer .dfold .dfnum + .chv{margin-inline-start:10px}
.drawer .dfsub{overflow:hidden;max-height:0;transition:max-height .28s var(--ease)}
.drawer .dfsub.open,.drawer .dfsub.sopen{max-height:none}
.drawer .dfsub:not(.open):not(.sopen){visibility:hidden}
/* inside one, the rows start where the words of the drop down's own row start */
.drawer .dfsub .dchat{padding-inline-start:64.9px}
.drawer .dfsub .dfx{display:flex;align-items:center;gap:10px;color:var(--ink)}
.drawer .dfsub .dfx > span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer .dfsub .dfx .dn{flex:none;font-size:14px;color:var(--ph)}
.drawer .dfsub .dpans{color:var(--green);font-weight:600}
.drawer .dfsub .dpnew{color:var(--green);font-weight:600;gap:8px}
.drawer .dfsub .dpnew svg{flex:none}
.drawer .dfsub .dpnew > span{flex:1}
.drawer .dfsub .dchat:last-child{margin-bottom:6px}
.drawer .dchat.dproj,.drawer .dchat.dpnew,.drawer [data-pnew],.drawer .dfold{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* while ticking, everything that is not a chat steps back */
.drawer.sel .dsearch{visibility:hidden}
.drawer.sel .dlist > .drow,.drawer.sel .dlist > .dgroup,.drawer.sel .dlist > [data-dash],.drawer.sel .dlist > .hair,.drawer.sel [data-corg] > .hair,
.drawer.sel [data-corg] .dsel,.drawer.sel .dfold,.drawer.sel .dfx,.drawer.sel .dchat.darch,.drawer.sel .dpnewchat{opacity:.32;pointer-events:none;transition:opacity .2s}
.drawer.sel .dme{visibility:hidden}
.drawer.sel .dlist,.drawer.sel .dplist{padding-bottom:calc(var(--sab) + 100px)}

/* ---------- the bar at the top while ticking: close, how many, Select all ---------- */
.drawer .dselhd{position:absolute;top:calc(var(--sat) + 14px);inset-inline:15.333px;height:47.667px;border-radius:24px;background:#F3F4F3;display:flex;align-items:center;gap:4px;padding-inline:4px 6px;z-index:7;opacity:0;visibility:hidden;transform:translate3d(0,-6px,0);transition:opacity .18s,transform .22s var(--ease),visibility 0s linear .22s}
.drawer.sel .dselhd{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .22s var(--ease),visibility 0s}
.drawer .dselhd .dsx{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.drawer .dselhd .dsx:active{background:#E4E6E4}
.drawer .dselhd .dsn{flex:1;min-width:0;font-size:16.5px;line-height:22px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-start:2px}
.drawer .dselhd .dsa{flex:none;padding:8px 10px;border-radius:14px;font-size:14.5px;line-height:20px;font-weight:600;color:var(--green);white-space:nowrap}
.drawer .dselhd .dsa:active{background:var(--green-soft)}

/* ---------- the bar at the foot: the same actions for every ticked chat ---------- */
.drawer .dselbar{position:absolute;inset-inline:10px;bottom:calc(var(--sab) + 12px);height:66px;padding:5px;border-radius:24px;background:#fff;box-shadow:0 8px 34px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.05);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;z-index:7;transform:translate3d(0,calc(100% + 26px + var(--sab)),0);visibility:hidden;transition:transform .26s var(--ease),visibility 0s linear .26s}
.drawer.sel .dselbar{transform:none;visibility:visible;transition:transform .26s var(--ease),visibility 0s}
.drawer .dselbar button{min-width:0;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;line-height:15px;font-weight:600;color:var(--ink);transition:background .15s,transform .12s,opacity .15s}
.drawer .dselbar button span{max-width:100%;padding-inline:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer .dselbar button:active{background:var(--row);transform:scale(.95)}
.drawer .dselbar button.red{color:var(--red)}
.drawer .dselbar button:disabled{opacity:.34;pointer-events:none}
html[lang=ar] .drawer .dselbar button{font-size:12.5px}

/* ---------- the menu beside a chat ---------- */
.drawer .dpop{position:absolute;inset-inline-end:12px;width:min(258px,calc(100% - 24px));padding:6px 0;border-radius:18px;background:#fff;box-shadow:0 14px 44px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.05);z-index:9;opacity:0;transform:scale(.94);transform-origin:top right;transition:opacity .14s,transform .18s var(--ease);pointer-events:none}
html[dir=rtl] .drawer .dpop{transform-origin:top left}
.drawer .dpop.up{transform-origin:bottom right}
html[dir=rtl] .drawer .dpop.up{transform-origin:bottom left}
.drawer .dpop.on{opacity:1;transform:none;pointer-events:auto}
.drawer .dpop button{display:flex;align-items:center;gap:16px;width:100%;height:50px;padding-inline:20px 16px;font-size:16.5px;line-height:22px;font-weight:500;color:var(--ink);text-align:start}
.drawer .dpop button svg{flex:none}
.drawer .dpop button span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer .dpop button:active{background:#F4F4F4}
.drawer .dpop button.red{color:var(--red)}
.drawer .dpop .dph{padding:8px 20px 4px;font-size:13px;line-height:18px;font-weight:600;color:var(--ph)}

/* ---------- a project, or the archived chats, over the list ---------- */
.drawer .dpanel{position:absolute;inset:0;z-index:5;background:#fff;display:flex;flex-direction:column;transform:translate3d(104%,0,0);visibility:hidden;transition:transform .28s var(--ease),visibility 0s linear .28s}
html[dir=rtl] .drawer .dpanel{transform:translate3d(-104%,0,0)}
.drawer .dpanel.on,html[dir=rtl] .drawer .dpanel.on{transform:none;visibility:visible;transition:transform .28s var(--ease),visibility 0s}
/* nothing of the panel shows outside it while it slides */
.drawer.corg{overflow:hidden}
/* the back key sits over the panel's icons and the name lines up with the rows' words */
.drawer .dphd{display:flex;align-items:center;gap:4px;height:47.667px;margin-top:calc(var(--sat) + 14px);margin-inline:17px 10px}
.drawer .dphd .dpb{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.drawer .dphd .dpb:active{background:#F1F1F1}
.drawer .dphd .dpt{flex:1;min-width:0}
.drawer .dphd .dptn{font-size:18px;line-height:23px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer .dphd .dpts{font-size:13px;line-height:17px;color:var(--ph);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer .dphd .dpts:empty{display:none}
.drawer .dplist{flex:1;overflow-y:auto;padding:12px 0 8px;overscroll-behavior:contain}
.drawer .dplist .dsec{padding-top:12px}
.drawer .dpempty{margin:14px 16px;padding:18px 18px;border-radius:18px;background:#F6F7F6;color:var(--sub);font-size:14.5px;line-height:21px;text-align:center}

/* a question over the panel (rename, delete, choose a project): the panel shades with the page */
.drawer.corg::after{content:"";position:absolute;inset:0;z-index:20;background:rgba(12,12,12,.32);opacity:0;pointer-events:none;transition:opacity .24s}
.drawer.corg:has(~ .sheet.on)::after{opacity:1;pointer-events:auto}

/* ---------- a chat in a project names it: on its new chat page and at the top of the chat ---------- */
.proj-tag{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:28px;padding:0 12px;border-radius:14px;background:var(--green-soft);color:var(--green);font-size:14px;line-height:18px;font-weight:600}
.proj-tag svg{flex:none}
.proj-tag > span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-row{display:flex;justify-content:center;margin:-8px 0 20px;padding:0 24px}
.home-hero.hello.in-proj .proj-tag{margin-bottom:16px}

/* ---------- Files: the newest files as small cards with their pictures and names, then All files ---------- */
.drawer .dfiles{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 20px 10px;scroll-snap-type:x proximity;scroll-padding-inline:20px;scrollbar-width:none}
.drawer .dfiles::-webkit-scrollbar{display:none}
.drawer .dfc{flex:none;width:76px;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:0;text-align:start;scroll-snap-align:start;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.drawer .dfc .ftb.mini{width:76px;border-radius:16px;transition:transform .12s}
.drawer .dfc:active .ftb,.drawer .dfc:active .dfa{transform:scale(.96)}
.drawer .dfc .dfn{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-size:12.5px;line-height:16px;font-weight:600;color:var(--ink)}
html[dir=rtl] .drawer .dfc .dfn{text-align:right}
.drawer .dfc.up .ftb{opacity:.62}
.drawer .dfc.fail .dfn{color:var(--red)}
.drawer .dfall .dfa{width:76px;height:76px;border-radius:16px;background:var(--green-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:transform .12s}
.drawer .dfall .dfa b{font-size:13px;line-height:16px;font-weight:700;color:var(--green)}
.drawer .dfsk{flex:none;width:76px;height:76px;border-radius:16px;background:#EEF0EE}

/* the cards of a project's files, and of all the files, in the panel */
.drawer .dpgrid{padding:0 16px}
.drawer .dpgrid .fgrid{margin-top:2px;gap:10px}
.drawer .dpgrid .fcd .fnm{font-size:14px;line-height:18px}
.drawer .dpnote{margin:10px 20px 4px;font-size:13px;line-height:18px;color:var(--ph)}
.drawer .dfadd{display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 32px);height:64px;margin:2px 16px 6px;border-radius:18px;border:1.5px solid #D3E2D8;background:#F6FAF7;color:var(--green);font-size:15px;line-height:20px;font-weight:600}
.drawer .dfadd:active{background:var(--green-soft)}

/* while ticking chats, the files step back too */
.drawer.sel .dfiles,.drawer.sel .dpgrid,.drawer.sel .dfadd,.drawer.sel .dpnote,.drawer.sel [data-fadd]{opacity:.32;pointer-events:none;transition:opacity .2s}

/* a card in Documents (and here) names the project a file is in */
.fcd .fproj{display:inline-flex;align-items:center;gap:4px;max-width:100%;margin-top:6px;padding:2px 8px 2px 7px;border-radius:10px;background:var(--green-soft);color:var(--green);font-size:12px;line-height:16px;font-weight:600}
.fcd .fproj svg{flex:none}
.fcd .fproj bdi{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* choosing files for a project: each with its picture, name and a tick */
.sheet.fpksheet .fpk .fpkr{display:flex;align-items:center;gap:12px}
.sheet.fpksheet .fpk .fpkr .ftb.mini{flex:none;width:48px;border-radius:12px}
.sheet.fpksheet .fpk .fpkr .tx{flex:1;min-width:0}
.sheet.fpksheet .fpk .fpkr .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet.fpksheet .fpkc{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid #BDBDBD;box-sizing:border-box;display:grid;place-items:center;transition:background .15s,border-color .15s}
.sheet.fpksheet .fpkc svg{opacity:0;transform:scale(.5);transition:opacity .15s,transform .18s var(--ease)}
.sheet.fpksheet .fpkr.on{background:var(--green-soft)}
.sheet.fpksheet .fpkr.on .fpkc{background:var(--green);border-color:var(--green)}
.sheet.fpksheet .fpkr.on .fpkc svg{opacity:1;transform:none}
.sheet.fpksheet .bp:disabled{opacity:.45}
.sheet.fpksheet .fpk .fpkr{padding-inline:12px 16px;min-height:68px}

/* a project's files: small cards three to a row */
.drawer .dpfiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;padding:2px 16px 4px}
.drawer .dpfiles .dfc{width:auto}
.drawer .dpfiles .dfc .ftb.mini{width:100%}
.drawer .dpfiles .dfsk{width:auto;height:auto;aspect-ratio:1/1}
/* a small card on its way shows how far it has gone */
.drawer .dfc .ftb.mini .fbar{display:block}

/* Files in its drop down: Add first, the newest files, then All files, starting where the words start */
.drawer .dfsub .dfiles{padding-inline:64.9px 20px;scroll-padding-inline:64.9px;padding-top:4px}
.drawer .dfadd2 .dfa{width:76px;height:76px;border-radius:16px;border:1.5px solid #D3E2D8;background:#F6FAF7;display:grid;place-items:center;box-sizing:border-box;transition:transform .12s}
.drawer .dfadd2 .dfn{color:var(--green)}
/* Recent chats: the newest five in the panel; the rest show only while searching, and in See all (14 Oct 2026) */
.drawer:not(.dq) [data-chats] .dchat.dxtra{display:none}
.drawer .dphd .dpsel{flex:none;height:44px;padding:0 12px;border-radius:22px;font-size:15px;font-weight:600;color:var(--green)}
.drawer .dphd .dpsel:active{background:var(--green-soft)}
.drawer.sel .dphd .dpsel{opacity:.32;pointer-events:none;transition:opacity .2s}
/* All chats, a page of its own (14 Oct 2026): a chat's icon, or its tick circle while ticking; the bar at the foot has two rows */
.v-allchats .ac-row .cs-c{display:none}
.v-allchats.ac-on .ac-row .cs-c{display:grid}
.v-allchats.ac-on .ac-row .ac-ic{display:none}
.v-allchats .ac-ic{display:grid;place-items:center}
.v-allchats .ac-proj{display:inline-flex;align-items:center;gap:4px;margin-inline-start:8px;color:var(--green);font-weight:600;max-width:60%;overflow:hidden;white-space:nowrap;vertical-align:bottom}
.v-allchats .ac-proj bdi{overflow:hidden;text-overflow:ellipsis}
.v-allchats .scroll.has-dock{padding-bottom:calc(var(--sab) + 180px)}
.v-allchats .ac-dock button:disabled{opacity:.35}
.v-allchats .ac-sec .lab{margin-top:22px}
/* All chats date-wise (15 Oct 2026): a quiet heading for each day with how many chats, staying under the top bar while its day scrolls */
.v-allchats .ac-day{position:sticky;top:8px;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;margin:26px 0 6px;padding-inline:18.667px 10px;background:var(--bg);box-shadow:0 -26px 0 var(--bg)}
.v-allchats .ac-dn{min-width:0;font-size:15px;line-height:22px;font-weight:600;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-allchats .ac-dc{flex:none;font-size:13px;line-height:18px;font-weight:600;color:var(--green);background:var(--green-soft);border-radius:999px;padding:3px 10px}
/* a heading pushed up by the next day slides under the white top fade, not over the bar's buttons */
.v-allchats .topfade{z-index:2;background:linear-gradient(rgba(255,255,255,1) calc(var(--sat) + 56px),rgba(255,255,255,0))}
.v-allchats .ac-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v-allchats .grp .ac-row.ac-f{border-top-left-radius:26px;border-top-right-radius:26px}
.v-allchats .grp .ac-row.ac-l{border-bottom-left-radius:26px;border-bottom-right-radius:26px}
/* the bar at the foot while ticking has six actions since Rename joined it (14 Oct 2026): two rows of three */
.drawer .dselbar{height:120px;grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;row-gap:2px}
.drawer .dselbar button{font-size:13px}
.drawer.sel .dlist,.drawer.sel .dplist{padding-bottom:calc(var(--sab) + 154px)}
.drawer .dfsub .dpnopin{color:var(--ph)}
.drawer .dmon .dfnum{margin-inline-start:auto;font-size:14px;line-height:20px;font-weight:500;color:var(--ph)}
.drawer .dmon .dfnum + .chv{margin-inline-start:10px}