/* WA Platform console stylesheet - split out of admin.html on 2026-09-02 (same rules, own file) */ /* Heebo self-hosted (audit 2026-09-02): one variable woff2 per subset from our own origin - no third-party round trip before the first paint, cached by the service worker for the installed app */ @font-face{font-family:"Heebo";font-style:normal;font-weight:400 900;font-display:swap;src:url("/fonts/heebo-hebrew.woff2") format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F} @font-face{font-family:"Heebo";font-style:normal;font-weight:400 900;font-display:swap;src:url("/fonts/heebo-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Heebo";font-style:normal;font-weight:400 900;font-display:swap;src:url("/fonts/heebo-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{ --bg:#faf9f5;--panel:#ffffff;--panel2:#f5f3ec;--ink:#2d2a26;--muted:#6d665b; /* 4.9:1 on the page ground - the old #8a8378 was 3.7:1, below AA for small text */ --teal:#12a150;--teal-strong:#0f9048;--teal-soft:#e7f6ec; --line:#e8e5de;--line-soft:#f0eee7;--red:#c0492f; --amber:#b26a00;--amber-soft:#fbf1de; --bubble-in:#ffffff;--bubble-ai:#e7f6ec; --shadow:0 1px 2px rgba(45,42,38,.04),0 2px 8px rgba(45,42,38,.05); --focus:0 0 0 3px rgba(18,161,80,.18) } *{box-sizing:border-box} /* one visible focus ring for keyboard users (audit 2026-09-02) - mouse clicks keep the clean look */ button:focus-visible,a:focus-visible,[tabindex]:focus-visible,.tab:focus-visible{outline:2px solid var(--teal);outline-offset:2px} body{margin:0;background:#efeae2 url("/img/wa-wall.svg") fixed;background-size:380px 380px;color:var(--ink);font-family:"Heebo","Segoe UI",-apple-system,Roboto,Arial,sans-serif;height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5} header{display:flex;align-items:center;gap:11px;padding:13px 22px;background:var(--panel);border-bottom:1px solid var(--line)} header .logo{width:30px;height:30px;border-radius:9px;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:900;font-size:.95rem;box-shadow:var(--shadow)} header h1{font-size:.98rem;margin:0;font-weight:700;letter-spacing:-.01em;color:var(--ink)} header .env{color:var(--muted);font-size:.78rem;margin-inline-start:auto} .gate{margin:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 24px 18px;width:360px;box-shadow:0 8px 30px rgba(45,42,38,.08);text-align:center;max-height:calc(100dvh - 24px);overflow-y:auto} .gate .logo{width:40px;height:40px;border-radius:12px;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:900;font-size:1.3rem;margin:0 auto 8px} .gate h2{margin:0 0 4px;font-size:1.25rem;font-weight:700;letter-spacing:-.01em} .gate .sub{color:var(--muted);font-size:.85rem;margin:0 0 12px} .gate label{text-align:start} label{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin:16px 0 6px;letter-spacing:0} .help{font-size:.78rem;color:var(--muted);margin:-2px 0 6px;line-height:1.5} input,textarea,select{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:10px 13px;font:inherit;font-size:.92rem;transition:border-color .15s,box-shadow .15s} input:hover,textarea:hover,select:hover{border-color:#d9d5cb} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--teal);box-shadow:var(--focus)} input::placeholder,textarea::placeholder{color:#b6afa2} textarea{min-height:130px;resize:vertical;line-height:1.55} select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8378' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px} html[dir] select,body select{background-position:right 13px center} button{border:0;border-radius:10px;background:var(--teal);color:#fff;font-weight:600;padding:10px 18px;cursor:pointer;font:inherit;font-size:.9rem;transition:background .15s,box-shadow .15s;box-shadow:var(--shadow)} button:hover{background:var(--teal-strong)} button.sec{background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:none} button.sec:hover{background:var(--panel2);border-color:#d9d5cb} button:disabled{opacity:.5;cursor:default} .main{flex:1;display:grid;grid-template-columns:270px 1fr;grid-template-rows:minmax(0,1fr);min-height:0} .side{background:var(--panel);border-inline-end:1px solid var(--line);overflow:auto;padding:16px 12px} .side h3{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:4px 8px 12px} .tenant{padding:11px 12px;border-radius:11px;cursor:pointer;margin-bottom:4px;border:1px solid transparent;transition:background .12s,border-color .12s} .tenant:hover{background:var(--panel2)} .tenant.active{background:var(--teal-soft);border-color:rgba(18,161,80,.25)} .tenant b{display:block;font-size:.92rem;font-weight:600;color:var(--ink)} .tenant span{font-size:.76rem;color:var(--muted)} .content{overflow:auto;min-height:0;padding:0;background:var(--bg)} .tabs{display:flex;gap:2px;padding:14px 16px 0;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5;overflow-x:auto;scrollbar-width:none} .tab{padding:9px 10px;cursor:pointer;color:var(--muted);font-weight:600;font-size:.8rem;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s,border-color .12s;white-space:nowrap} .tab:hover{color:var(--ink)} .tab.active{color:var(--teal-strong);border-bottom-color:var(--teal)} /* two-level navigation (audit 2026-09-02): six groups on top, the group's screens as chips below */ .tabs{display:block;padding:10px 16px 0} .gtabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none} .gtabs::-webkit-scrollbar{display:none} .gtabs .tab{display:inline-flex;align-items:center;gap:5px} .gtabs .tab.adm{color:#8a6d1a} .gtabs .tab.adm.active{color:#8a6d1a;border-bottom-color:#c9a84c} .subtabs{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0 8px;align-items:center} .subtabs .glbl{display:none;font-size:.74rem;font-weight:800;color:var(--muted);margin-inline-end:4px} .subtab{font-size:.78rem;font-weight:700;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;box-shadow:none;min-height:0} .subtab:hover{color:var(--ink);border-color:#d9d5cb;background:var(--panel)} .subtab.active,.subtab.active:hover{background:var(--teal);color:#fff;border-color:var(--teal)} .subtab.active .tab-ub{background:#fff;color:var(--teal-strong)} @media(min-width:901px){.mobile-only{display:none!important}} /* bot-setup accordion + sticky save bar */ details.acc>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;margin:0} details.acc>summary::-webkit-details-marker{display:none} details.acc>summary::after{content:'⌄';margin-inline-start:auto;font-size:1.05rem;color:var(--muted);transition:transform .15s} details.acc[open]>summary::after{transform:rotate(180deg)} details.acc[open]>summary{margin-bottom:4px} /* nested accordions inside a setup card (auto-fill from site, files & links) */ .subacc{margin:10px 0;border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--panel2)} .subacc>summary{cursor:pointer;font-weight:700;font-size:.86rem;color:var(--teal-strong);list-style:none;display:flex;align-items:center;gap:6px} .subacc>summary::-webkit-details-marker{display:none} .subacc>summary::after{content:'⌄';margin-inline-start:auto;color:var(--muted);transition:transform .15s} .subacc[open]>summary::after{transform:rotate(180deg)} .subacc[open]>summary{margin-bottom:6px} #cfgSaveBar{position:sticky;bottom:0;z-index:4;background:var(--bg);padding:10px 0;margin-top:8px;display:flex;align-items:center;gap:14px;border-top:1px solid var(--line)} #waProfileBody .pane{padding:4px 0 0;max-width:none} #waProfileBody .pane>h3:first-child{margin-top:8px} @media(max-width:900px){ /* owner 2026-09-06 19:05: the save bar no longer floats over the screen on phones/tablets - it sits at the end of the form */ body.authed:not(.chat-open) #cfgSaveBar{position:static;left:auto;right:auto;bottom:auto;margin:8px 0 0;padding:14px 0 4px;background:var(--bg);border-top:1px solid var(--line);box-shadow:none;z-index:auto} body.authed:not(.chat-open) .pane:has(#cfgSaveBar){padding-bottom:18px} } /* mobile bottom bar - the four things a business owner opens all day; "עוד" = the drawer's screens list */ #bnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:58;background:var(--panel);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;box-shadow:0 -6px 20px rgba(17,27,33,.08)} #bnav button{position:relative;background:none;border:0;box-shadow:none;color:var(--muted);font-size:.68rem;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 12px;min-height:0!important;border-radius:10px;width:auto} #bnav button span.ic{font-size:1.25rem;line-height:1} #bnav button.active{color:var(--teal-strong)} #bnav .tab-ub{position:absolute;top:0;inset-inline-start:calc(50% + 4px)} .wa-toast{bottom:26px} @media(max-width:900px){ body.authed:not(.chat-open) #bnav{display:flex} body.authed:not(.chat-open) .content{padding-bottom:64px} body.authed:not(.chat-open) .inbox{height:calc(100dvh - 232px)} body.authed:not(.chat-open) .wa-toast{bottom:calc(84px + env(safe-area-inset-bottom))} .gtabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px} .gtabs .tab{font-size:.78rem;padding:6px 9px;flex:none;white-space:nowrap} .subtabs{padding:6px 0 6px} .subtabs .glbl{display:none} .tabs{padding:6px 10px 0} .tabs.nosub{display:block} } .pane{padding:28px 24px;max-width:760px} .pane.hide{display:none} .pane>h3, .sec-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--muted);margin:30px 0 4px;padding:0} .pane>h3:first-child{margin-top:4px} .pill{display:inline-block;font-size:.7rem;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--panel2);color:var(--muted);border:1px solid var(--line)} .pill.ok,.pill.approved{background:var(--teal-soft);color:var(--teal-strong);border-color:rgba(18,161,80,.2)} .pill.pending{background:var(--amber-soft);color:var(--amber);border-color:rgba(178,106,0,.2)} .pill.err,.pill.rejected{background:#fbecea;color:var(--red);border-color:rgba(192,73,47,.2)} .status{font-size:.85rem;margin-top:12px;min-height:1.2em} .ok{color:var(--teal-strong);font-weight:600} .err{color:var(--red);font-weight:600} .row{display:flex;gap:10px} .row>*{flex:1} .muted{color:var(--muted);font-size:.9rem} .pane p.muted{line-height:1.6} /* card sections inside panes */ .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);margin-top:10px} /* ===== connections tab - channel cards ===== */ .chgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-bottom:24px;align-items:stretch} /* 215 = four channel cards fit the 930px pane instead of 3 + one orphan */ .chcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column} .chcard.conn{border-color:rgba(18,161,80,.45)} .chcard.conn .chcard-h{background:linear-gradient(180deg,rgba(18,161,80,.10),rgba(18,161,80,.02))} .chset{margin-top:6px;border-top:1px dashed var(--line-soft);padding-top:8px} .chset>summary{cursor:pointer;font-size:.78rem;font-weight:700;color:var(--teal);list-style:none;display:flex;align-items:center;gap:6px;user-select:none} .chset>summary::-webkit-details-marker{display:none} .chset>summary::after{content:'⌄';margin-inline-start:auto;transition:transform .15s;font-size:.9rem} .chset[open]>summary::after{transform:rotate(180deg)} .chset>*:not(summary){margin-top:8px} .chcard-h{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,#fcfbf8,transparent)} .chcard-ico{width:42px;height:42px;border-radius:12px;background:var(--panel2);border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;gap:5px;flex:none} .chcard-ico.duo{width:60px} .chcard-t{min-width:0;flex:1} .chcard-t b{display:block;font-size:.95rem;line-height:1.25} .chcard-t span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.73rem;color:var(--muted);overflow:hidden;line-height:1.35} .chcard-h .pill{flex:none} .chcard-b{padding:13px 16px 15px;flex:1;display:flex;flex-direction:column;min-width:0} .chcard-b .help{margin:0 0 8px} .chcard-foot{margin-top:auto;padding-top:10px} /* sub-panel inside a channel card (comment moderation etc.) */ .chsub{border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-top:12px;background:#fcfbf8} .chsub-h{display:flex;align-items:center;gap:8px} .chsub-h b{font-size:.86rem} /* connected FB page row */ .fbpage{border:1px solid var(--line);border-radius:13px;padding:11px 13px;margin-top:10px;background:var(--panel)} .fbpage-top{display:flex;align-items:center;gap:10px;min-width:0} .fbpage-av{width:34px;height:34px;border-radius:50%;background:var(--panel2);border:1px solid var(--line-soft);display:grid;place-items:center;flex:none} .fbpage-info{min-width:0;flex:1} .fbpage-info b{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fbpage-info span{display:flex;align-items:center;gap:4px;font-size:.72rem;color:var(--muted)} .fbpage-ctl{display:flex;align-items:center;gap:2px 10px;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-soft)} /* toggle switch (RTL: knob rests at the inline-start = right, slides left when on) */ .tglbtn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;box-shadow:none;padding:5px 7px;color:var(--ink);font-size:.78rem;font-weight:600;cursor:pointer;border-radius:9px} .tglbtn:hover{background:var(--panel2)} .tglbtn .tgl{width:33px;height:19px;border-radius:99px;background:#d5d1c8;position:relative;transition:background .18s;flex:none} .tglbtn .tgl i{position:absolute;top:2px;inset-inline-start:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.25)} .tglbtn.on .tgl{background:var(--teal)} .tglbtn.on .tgl i{transform:translateX(-14px)} .tglbtn.dim{opacity:.55} button.sec.mini{font-size:.72rem;padding:4px 10px} /* business-system integration cards laid out as tiles per category */ .intgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:10px} .intgrid>[data-iname]{min-width:0;display:flex;flex-direction:column} .intgrid .card{margin-top:0;flex:1} .intgrid>[data-iname].ifull{grid-column:1/-1} @media (max-width:760px){ .chcard.wide{grid-column:auto} } /* inbox - the list column is wide enough for 5+ channel chips AND unread badges (desktop) */ .inbox{display:grid;grid-template-columns:340px 1fr;gap:0;height:calc(100vh - 118px);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow);margin-top:2px} .convlist{border-inline-end:1px solid var(--line);overflow:auto;background:var(--panel)} /* channel switcher: single scrollable row - any number of channels fits without wrapping */ #chfilters{display:flex;flex-wrap:wrap;gap:5px;margin:0 8px 8px;padding-bottom:2px} #chfilters::-webkit-scrollbar{display:none} #chfilters button{flex:none;display:inline-flex;align-items:center;gap:4px} .chip-ub{background:#25d366;color:#fff;border-radius:99px;font-size:.62rem;font-weight:800;min-width:15px;padding:1px 4px;line-height:1.4;text-align:center} .tab-ub{display:inline-grid;place-items:center;background:#25d366;color:#fff;border-radius:99px;font-size:.62rem;font-weight:800;min-width:16px;height:16px;padding:0 4px;margin-inline-start:5px;line-height:1;vertical-align:middle} .conv{position:relative;padding:12px 16px;padding-inline-end:62px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .12s} /* unanswered rows: tinted band + bold text + green count (owner 2026-09-02 "האייקון לא ברור") */ /* admin-only marker (owner 2026-09-02): anything the client never sees carries this tag */ .adm-tag{display:inline-flex;align-items:center;gap:3px;font-size:.62rem;font-weight:800;line-height:1.5;padding:1px 7px;border-radius:99px;background:#fff3d6;color:#7a4b00;border:1px solid #f0c060;vertical-align:middle;margin-inline-start:6px;white-space:nowrap} .tab .adm-tag,.glbl .adm-tag,.navitem .adm-tag{font-size:.56rem;padding:0 5px;margin-inline-start:4px} /* admin cost/profit report tables (usage tab) */ .tblwrap{overflow-x:auto;margin-top:10px} table.rep{width:100%;border-collapse:collapse;font-size:.86rem} table.rep th{text-align:start;font-size:.74rem;color:var(--muted);font-weight:800;padding:6px 8px;border-bottom:1px solid var(--line)} table.rep td{padding:7px 8px;border-bottom:1px solid var(--line-soft);vertical-align:top} table.rep .num{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap} table.rep tr.tot td{font-weight:800;background:var(--panel2)} table.rep td.muted{font-size:.78rem} .conv.unread{background:#f1faf4;box-shadow:inset 3px 0 0 #25d366} .conv:hover{background:var(--panel2)} .conv.active{background:var(--teal-soft)} .conv b{font-size:.9rem;font-weight:600;color:var(--ink)} .conv p{margin:3px 0 0;font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* WhatsApp-style meta column at the TOP-LEFT corner (RTL console, physical left on purpose - direction:ltr on the time span would flip inset-inline-end, so use left): last-message time on top, green unread count under it */ .conv .tm{position:absolute;top:12px;left:14px;font-size:.67rem;color:var(--muted);direction:ltr;line-height:1} .conv .ub{position:absolute;top:28px;left:14px;min-width:21px;height:21px;border-radius:99px;background:#25d366;color:#fff;font-size:.74rem;font-weight:800;display:grid;place-items:center;padding:0 5px;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.12)} .conv.unread .tm{color:var(--teal-strong);font-weight:700} .conv.unread b{font-weight:800} .conv.unread p{color:var(--ink);font-weight:600} /* WhatsApp-Web-style row menu: a chevron fades in on hover over the time (desktop only - on mobile these actions live in the bot bar inside the open chat) */ .conv .cmb{position:absolute;top:4px;left:8px;width:24px;height:24px;border-radius:50%;border:0;background:var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.14);color:var(--muted);font-size:.8rem;line-height:1;padding:0;display:none;place-items:center;cursor:pointer} @media (min-width:901px){ .conv:hover .cmb{display:grid} .conv:hover .tm{opacity:0} } .cmenu-it{display:flex;align-items:center;gap:8px;width:100%;text-align:start;background:none;border:0;box-shadow:none;color:var(--ink);font-size:.86rem;font-weight:600;padding:9px 12px;border-radius:8px;cursor:pointer} .cmenu-it:hover{background:var(--panel2)} /* archive entry row + archive-view header (WhatsApp: a pinned row above the chat list) */ .archrow{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line-soft);cursor:pointer;font-size:.85rem;font-weight:700;color:var(--muted);user-select:none} .archrow:hover{background:var(--panel2)} .archrow .cnt{margin-inline-start:auto;font-size:.72rem;font-weight:600;color:var(--muted)} /* 24h-window gate: free-text is locked until the customer writes - templates only */ #tplgate{padding:10px 16px;border-top:1px solid var(--line);background:var(--amber-soft);color:#6b4a10;font-size:.82rem;line-height:1.8} .cmp-ico{width:38px;height:38px;min-width:38px;border-radius:50%;position:relative;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0} .cmp-ico:hover{background:var(--panel2)} .cmp-ico.cap-off{opacity:.38;cursor:not-allowed} /* the channel's API can't take it - tooltip says why (owner 2026-09-26) */ #msgmenu .emo-b:hover{background:var(--panel2,#f2eeea)} .cmp-ico.rec{background:#ff3b30;animation:recblink 1.2s infinite;position:relative;z-index:7} .compose{position:relative} .recwave{position:absolute;top:6px;bottom:6px;right:8px;left:96px;background:#fff;border-radius:99px;display:none;align-items:center;gap:2.5px;padding:0 16px;z-index:6;box-shadow:0 1px 4px rgba(0,0,0,.12)} .recwave.on{display:flex} .recwave i{flex:1;max-width:5px;height:15%;border-radius:99px;background:#00a884;transition:height .08s} .recwave .recdot{width:10px;height:10px;border-radius:50%;background:#ff3b30;animation:blink 1s infinite;flex:none;margin-inline-end:6px} .recwave .rectime{font-size:.8rem;font-weight:700;color:#3b4a54;flex:none;margin-inline-end:8px} .cmp-ico.rec svg path{stroke:#fff} @keyframes recblink{50%{opacity:.6}} .thread{overflow-y:auto;overflow-x:hidden;padding:20px;display:flex;flex-direction:column;gap:8px;background:#efeae2 url('/img/wa-wall.svg');background-size:340px} /* mixed-language chats: LTR emails/messages align naturally inside their bubble without ever breaking the RTL layout around them */ .msg{unicode-bidi:plaintext} .msg .ali{display:inline-block;padding-inline-start:6px} /* overflow-wrap:anywhere + min-width:0 are load-bearing: an email reply with long English lines/URLs grew the bubble past the viewport and got clipped on phones (2026-08-15) */ .msg{max-width:75%;min-width:0;padding:9px 14px;border-radius:16px;font-size:.92rem;line-height:1.45;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;box-shadow:0 1px 1px rgba(45,42,38,.05)} .msg.in{background:#fff;border:0;align-self:flex-start;border-radius:10px;border-top-right-radius:2px;box-shadow:0 1px .5px rgba(0,0,0,.14)} .msg.ai{background:#d9fdd3;align-self:flex-end;border-radius:10px;border-top-left-radius:2px;color:#111b21;box-shadow:0 1px .5px rgba(0,0,0,.14)} .msg.typing{color:var(--muted);font-style:italic;background:var(--panel2);border:1px solid var(--line)} .typing .dots span{animation:blink 1.2s infinite} .typing .dots span:nth-child(2){animation-delay:.2s} .typing .dots span:nth-child(3){animation-delay:.4s} @keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}} @media (prefers-reduced-motion:reduce){.typing .dots span{animation:none}} .empty{color:var(--muted);padding:40px 30px;text-align:center;font-size:.9rem} .threadcol{display:flex;flex-direction:column;min-height:0} .threadcol .thread{flex:1} .compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--panel);align-items:flex-end} .compose input{flex:1} .compose button{flex:none} /* WhatsApp-style composer: grows with the text (up to ~5 lines, then scrolls) so what you type is ALWAYS visible. Enter = new line; sending is ONLY via the send button (owner 2026-08-26). */ /* min-width:0 is critical: a textarea's intrinsic min-content width blocks flex shrinking, which pushed the send button off-screen on narrow phones (owner report 2026-08-14) */ .compose textarea{flex:1;min-width:0;min-height:42px;max-height:134px;resize:none;overflow-y:auto;line-height:1.5;padding:10px 13px;border-radius:20px;font-size:.92rem} .compose{max-width:100%;box-sizing:border-box} /* phone composer (owner 2026-09-02: "תיבת טקסט ההקלדה קטנה מאוד"): WhatsApp-style [+] [text] [mic] [send] - the draft / quick-replies / attach / template buttons fold into the + menu */ #cmpPlus{display:none} @media(max-width:720px){ .compose{gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom))} .compose .cmp-ico{width:36px;height:36px;min-width:36px} .compose .cmp-ico.mob-fold{display:none!important} #cmpPlus{display:grid} .compose #replySend{padding:9px 14px;font-size:.88rem;min-height:40px} .compose textarea{min-height:40px;padding:9px 12px;font-size:16px} /* placeholders fit the phone: smaller than the typed text (16px stays, so no zoom on focus) and cut with … (owner 2026-09-30) */ .compose input,.compose textarea{font-size:16px} .compose input::placeholder,.compose textarea::placeholder{font-size:14px;text-overflow:ellipsis} } /* ✨ draft in progress: the button pulses until the text lands (owner 2026-09-02) */ .cmp-ico.thinking{animation:aiPulse 1s ease-in-out infinite;background:rgba(18,161,80,.14)} @keyframes aiPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.55}} @media(prefers-reduced-motion:reduce){.cmp-ico.thinking{animation:none}} .msg .who{display:block;font-size:.62rem;opacity:.7;margin-bottom:3px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} /* WhatsApp-style time + ticks, bottom-left of the bubble (RTL page) */ .msgmeta{display:flex;direction:ltr;justify-content:flex-start;align-items:center;gap:4px;font-size:.63rem;color:#667781;margin-top:3px;line-height:1;user-select:none} .msg.in .msgmeta{color:#8a8378} .tk{letter-spacing:-2.5px;font-weight:600} .tk.read{color:#53bdeb} .tk.fail{color:#c0492f;letter-spacing:0;font-weight:900} /* a reply that never reached the customer: a red, always-visible line with the reason + retry (audit 2026-09-26 #23) */ .msgfail{margin-top:6px;padding:6px 9px;border-radius:8px;background:#fbecea;border:1px solid rgba(192,73,47,.3);color:#8f2d18;font-size:.76rem;line-height:1.5;white-space:normal} .msgfail .linkbtn{font-size:.74rem;padding:2px 8px;color:#8f2d18} /* --- WhatsApp-style message actions (reactions, reply, pin, tag, forward) --- */ .msg{position:relative} /* ALWAYS-visible round action button on every bubble (user feedback 2026-08-12: the old hover-only chevron was invisible until you touched the message - undiscoverable). The whole bubble is also clickable / long-pressable / right-clickable to open the same menu. */ .msgcaret{position:absolute;top:4px;inset-inline-end:5px;width:28px;height:26px;border:0;border-radius:13px;background:rgba(17,27,33,.08);cursor:pointer;color:#54656f;font-size:17px;line-height:24px;font-weight:700;opacity:.62;transition:opacity .12s,background .12s,transform .1s;padding:0;box-shadow:none} .msg.ai .msgcaret{background:rgba(11,80,42,.1);color:#1f7a4d} .msg:hover .msgcaret,.msgcaret:focus{opacity:1;background:rgba(17,27,33,.15);transform:scale(1.08)} .msg{cursor:pointer;padding-inline-end:38px} /* room for the button - content never hides under it */ .msg.typing{cursor:default;padding-inline-end:14px} .msg .who{padding-inline-end:0} /* touch devices: long-press opens OUR menu - suppress native text-selection/callout on bubbles */ @media(hover:none){ .msgcaret{opacity:.75} .msg{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} } /* quoted reply block inside a bubble */ .qreply{border-inline-start:3px solid var(--teal,#12a150);background:rgba(0,0,0,.05);border-radius:5px;padding:4px 8px;margin-bottom:5px;font-size:.82rem;color:#4a5a52;cursor:pointer;max-height:56px;overflow:hidden} .msg.ai .qreply{background:rgba(0,0,0,.06)} .qreply b{display:block;font-size:.7rem;color:var(--teal,#12a150);margin-bottom:1px} .fwd{font-size:.7rem;color:#8a8378;font-style:italic;margin-bottom:3px;display:flex;align-items:center;gap:3px} /* reaction pill hanging off the bubble corner */ .mrx{position:absolute;bottom:-11px;inset-inline-end:8px;background:#fff;border:1px solid var(--line,#e9e6de);border-radius:12px;padding:1px 5px;font-size:.8rem;box-shadow:0 1px 3px rgba(0,0,0,.16);display:flex;gap:1px;line-height:1.3;z-index:1} .mrx.mine{inset-inline-end:auto;inset-inline-start:8px} .mtags{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px} .mtag{font-size:.66rem;background:rgba(18,161,80,.12);color:#0b6b43;border-radius:20px;padding:1px 8px;font-weight:600} .mstar{color:#e8a500} .mnote{font-size:.72rem;color:#7a6f00;background:#fff8db;border:1px solid #f0e2a0;border-radius:6px;padding:3px 7px;margin-top:4px} /* per-message action menu popup */ #msgmenu{position:fixed;z-index:400;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.2);padding:6px;min-width:186px;direction:rtl;animation:mmIn .13s ease} @keyframes mmIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}} #msgmenu .rxrow{display:flex;gap:2px;padding:3px 4px 7px;border-bottom:1px solid var(--line-soft,#eee);margin-bottom:4px;justify-content:space-between} #msgmenu .rxrow button{width:34px;height:34px;border:0;background:none;border-radius:50%;cursor:pointer;font-size:19px;padding:0;transition:background .12s,transform .1s} #msgmenu .rxrow button:hover{background:var(--panel2,#f2eeea);transform:scale(1.15)} #msgmenu .mi{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;text-align:right;padding:9px 11px;border-radius:8px;cursor:pointer;font:inherit;font-size:.86rem;color:var(--ink);box-shadow:none} #msgmenu .mi:hover{background:var(--panel2,#f2eeea)} #msgmenu .mi.danger{color:#c0492f} #msgmenu .mi span.ico{width:18px;text-align:center;flex:none} /* mobile: bigger touch targets in the menu (finger-sized, per WCAG ~44px) */ @media(hover:none){ #msgmenu{min-width:220px} #msgmenu .mi{padding:12px 13px;font-size:.95rem} #msgmenu .rxrow button{width:40px;height:40px;font-size:22px} } /* pinned bar at the top of the thread */ /* hard one-line clamp (owner bug 2026-08-16: a pinned message stretched vertically down the screen) - whatever the content is, the bar is a single 40px-max strip */ .pinbar{position:sticky;top:0;z-index:2;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:-8px 0 6px;display:flex;align-items:center;flex-wrap:nowrap;gap:9px;box-shadow:0 2px 8px rgba(0,0,0,.06);cursor:pointer;font-size:.83rem;max-height:40px;overflow:hidden;width:100%;align-self:stretch} .pinbar .pintxt{flex:1 1 0;min-width:0;max-width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#3b4a42;unicode-bidi:plaintext} .pinbar .pinx{flex:none;background:none;border:0;cursor:pointer;color:var(--muted);font-size:15px;padding:2px 6px;width:auto;box-shadow:none} /* reply preview above the composer */ #replybar{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--panel2,#f2eeea);border-top:1px solid var(--line);border-inline-start:4px solid var(--teal,#12a150)} #replybar .rb-t{flex:1;min-width:0;font-size:.83rem} #replybar .rb-t b{display:block;color:var(--teal,#12a150);font-size:.72rem} #replybar .rb-t .rb-c{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4a5a52} #replybar .rb-x{flex:none;background:none;border:0;cursor:pointer;color:var(--muted);font-size:18px;padding:4px 8px;width:auto;box-shadow:none} .botbar{padding:11px 16px;border-bottom:1px solid var(--line);font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel2)} /* mobile: the botbar is ONE slim line (status + פעולות popup) - never a 3-row wall */ @media(max-width:720px){.botbar{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;padding:7px 12px;font-size:.8rem}} .botbar b{color:var(--ink)} .prspin{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--teal);border-radius:50%;display:inline-block;animation:prspin .8s linear infinite;flex:none} @keyframes prspin{to{transform:rotate(360deg)}} .linkbtn{background:var(--panel);border:1px solid var(--line);color:var(--teal-strong);border-radius:8px;padding:5px 11px;cursor:pointer;font:inherit;font-size:.78rem;font-weight:600;transition:border-color .12s,background .12s} .linkbtn:hover{border-color:var(--teal);background:var(--teal-soft)} .kv{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:.92rem} .kv span{color:var(--muted)} .kv b{color:var(--ink);font-weight:600} .hintbox{background:var(--teal-soft);border:1px solid rgba(18,161,80,.18);border-radius:12px;padding:14px 16px;font-size:.86rem;line-height:1.65;color:#2f5a41} .hintbox code, .pane code{background:var(--panel2);border:1px solid var(--line);padding:1px 6px;border-radius:5px;font-size:.85em} .hintbox code{background:#fff;border-color:rgba(18,161,80,.2)} input[type=file]{padding:8px 10px;font-size:.85rem} input[type=file]::file-selector-button{border:1px solid var(--line);background:var(--panel2);border-radius:7px;padding:5px 11px;margin-inline-end:10px;font:inherit;font-size:.82rem;font-weight:600;color:var(--ink);cursor:pointer} input[type=checkbox]{accent-color:var(--teal);width:auto} .tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:12px} .tbl th{background:var(--panel2);text-align:start;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--line)} .tbl td{padding:11px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink);vertical-align:top} .tbl tr:last-child td{border-bottom:0} .tbl tr:nth-child(even) td{background:#fcfbf8} @media (max-width:760px){ header{padding:12px 12px;gap:7px;max-width:100vw} header h1{font-size:.9rem} /* mobile: the business name must not be crushed - logout moves into the settings menu, icon buttons tighten, the name keeps its ellipsis but gets real room */ #signout{display:none!important} #bellBtn,#supBtn,#tourHdrBtn{padding:6px;margin-inline-start:2px;flex:none} #abiz{font-size:.9rem} /* NOTHING in the header may be pushed off-screen (owner screenshot 2026-08-15: the quota chip got clipped by the page-wide overflow guard). The title shrinks with an ellipsis; the chip and icon buttons never shrink or overflow. */ /* Mobile header fit is GUARANTEED, not negotiated: the base #quota-chip rule appears LATER in the stylesheet and silently beat this override twice (equal specificity → source order wins) - hence !important. The title is hidden (the business name in #abiz is the identity); every icon tightens; the chip always renders whole. */ body.authed header>a:first-of-type{display:none} /* the business name is redundant up top on mobile (owner request 2026-08-15) - the drawer and tab context already say where you are; the freed space keeps icons roomy */ #abiz{display:none!important} header>a:first-of-type{min-width:0;overflow:hidden;flex:0 1 auto} header h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} header .env{display:none} header{gap:5px!important;padding-left:8px!important;padding-right:8px!important} #quota-chip{flex:none!important;font-size:.68rem!important;padding:3px 8px!important;margin-inline-start:2px!important} #asstBtn{font-size:1.22rem!important} #bellBtn,#asstBtn,#supBtn,#tourHdrBtn{padding:4px!important;margin-inline-start:0!important;height:34px!important} .main{grid-template-columns:1fr} .side{border-inline-end:none;border-bottom:1px solid var(--line);max-height:160px} .tabs{overflow-x:auto;white-space:nowrap;padding:12px 16px 0;-webkit-overflow-scrolling:touch} .pane{max-width:100%;padding:20px 16px} .inbox{grid-template-columns:1fr;height:auto;border-radius:12px} .convlist{border-inline-end:none;border-bottom:1px solid var(--line);max-height:180px} .threadcol .thread{min-height:46vh} .row{flex-direction:column} .gate{width:calc(100% - 32px)} } hr{border:0;border-top:1px solid var(--line);margin:24px 0} /* custom-subscription dial (same as homepage) */ .dialwrap{max-width:560px;margin:0 auto;text-align:center} .dial{position:relative;width:min(240px,64vw);aspect-ratio:1/1;margin-inline:auto;touch-action:none;cursor:grab;user-select:none;outline:none} .dial:active{cursor:grabbing} .dial svg{width:100%;height:100%;display:block} .dial-knob{position:absolute;width:28px;height:28px;border-radius:50%;background:#fff;border:4px solid #00a884;box-shadow:0 3px 10px rgba(0,0,0,.25);left:50%;top:50%;pointer-events:none} .dial-center{position:absolute;inset:24%;border-radius:50%;background:#fff;box-shadow:0 6px 22px rgba(45,42,38,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none} .dial-center b{font-size:1.7rem;font-weight:800;color:#0f766e;line-height:1} .dial-center span{font-size:.7rem;color:var(--muted);font-weight:600} .dial-btns{display:flex;justify-content:center;gap:66px;margin-top:-22px;position:relative;z-index:2} .dial-btns button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:1.4rem;font-weight:700;color:#0f766e;cursor:pointer;box-shadow:var(--shadow);padding:0} .dial-btns button:hover{background:var(--panel2)} .dial-rec{max-width:420px;margin:18px auto 0;background:#fff;border:2px solid var(--teal);border-radius:15px;padding:15px 18px} .dial-rec b{font-size:1rem;font-weight:800;display:block} .dial-rec .dr-sub{color:var(--muted);font-size:.84rem;margin:4px 0 10px;display:block} /* in-place drawer sub-menu (like the inbox master/detail: forward into the screens list, back out) */ .side-nav{display:none} .side.nav-open #tenants,.side.nav-open>h3,.side.nav-open #navOpenBtn{display:none} .side.nav-open .side-nav{display:block;animation:snIn .18s ease;max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:20px} /* logout lives in the drawer header, far-left (owner 2026-09-07: a bottom row hid whenever a group was open) */ .side-nav .navhead .nav-logout-top{margin-inline-start:auto;width:auto;min-height:0;background:transparent;border:1px solid var(--rail-line,var(--line));color:#f28b82;border-radius:8px;padding:5px 10px;font:inherit;font-size:.76rem;font-weight:700;line-height:1.3;cursor:pointer;box-shadow:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .side-nav .navhead .nav-logout-top:active{background:rgba(242,139,130,.12)} @keyframes snIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}} .side-nav .navhead{display:flex;align-items:center;gap:10px;font-weight:800;margin:2px 0 12px;font-size:1.02rem} .side-nav .navback{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);box-shadow:none;font-size:1.15rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;padding:0} .side-nav .navback:active{background:rgba(15,118,110,.1)} .side-nav .navitem{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:11px;cursor:pointer;font-weight:600;font-size:.83rem;line-height:1.5} .side-nav .navitem:hover{background:rgba(15,118,110,.08)} .side-nav .navitem.active{background:var(--teal);color:#fff} /* grouped drawer menu: headers first, screens fold under them (owner 2026-09-02) */ .side-nav details.navgrp{margin:2px 0} .side-nav .navgrp-head{list-style:none;display:flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem;padding:9px 12px} .side-nav .navgrp-head::-webkit-details-marker{display:none} .side-nav .navgrp-chev{margin-inline-start:auto;font-size:1rem;opacity:.55;transition:transform .15s} .side-nav details.navgrp[open] .navgrp-chev{transform:rotate(180deg)} .side-nav .navgrp-one{font-weight:800;font-size:.9rem;padding:9px 12px} .side-nav .navitem.sub{padding-inline-start:30px;font-weight:500;font-size:.86rem} @media (prefers-reduced-motion: reduce){ .side.nav-open .side-nav{animation:none} } /* Desktop: the TOP tab bar never hides tabs - it wraps to a second row instead of the invisible-scrollbar cut (owner 2026-08-16: "המדריך נמצא בצד שמאל מוסתר"). */ @media (min-width:901px){ .tabs{flex-wrap:wrap;overflow-x:visible;row-gap:2px} } /* ===== APP SHELL - WhatsApp-native app experience (drawer, app-bar, responsive) ===== */ :root{--appbar:#0f766e} body{height:100dvh} body:not(.authed) header{display:none} /* login screen keeps only the marketing top-nav */ /* the marketing top-nav is FIXED - without top padding it overlaps the gate card and clips the logo (seen on mobile 2026-08-09) */ body:not(.authed){padding-top:calc(60px + env(safe-area-inset-top))} body:not(.authed) .gate{max-height:calc(100dvh - 84px - env(safe-area-inset-top))} header{background:var(--appbar);border-bottom:0;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));gap:10px} header h1{color:#fff} header .env{color:rgba(255,255,255,.72)} #signout{color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.35)} #signout:hover{background:rgba(255,255,255,.12)} /* sizing lives in CSS (NOT inline style) so the mobile override below can actually win - the old inline font/padding beat the media query and the chip kept clipping (2026-08-15) */ #quota-chip{background:#fff;margin-inline-start:10px;font-size:.78rem;font-weight:800;border-radius:999px;padding:5px 13px;text-decoration:none;border:1px solid transparent;white-space:nowrap;flex:none} #menuBtn{display:none;background:none;border:0;box-shadow:none;padding:8px;margin-inline-start:-6px;border-radius:10px;cursor:pointer} #menuBtn:hover{background:rgba(255,255,255,.14)} #menuBtn:active{background:rgba(255,255,255,.22)} #abiz{display:none;color:#fff;font-weight:800;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1} /* signature: business list = WhatsApp chat list */ .tenant{display:flex;align-items:center;gap:11px;padding:10px} .t-av{width:42px;height:42px;border-radius:50%;background:var(--teal-soft);color:var(--teal-strong);display:grid;place-items:center;font-weight:800;font-size:1.05rem;flex:none;transition:background .15s,color .15s} .tenant.active .t-av{background:var(--teal);color:#fff} .t-info{flex:1;min-width:0} .t-info b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* the status pill (מנותק / לא מחובר) wraps under the number instead of being clipped by the narrow sidebar (owner 2026-09-26) */ .t-info>span{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;white-space:nowrap} .t-info>span .pill{margin:0} .side-head{display:none} #scrim{position:fixed;inset:0;background:rgba(17,27,33,.5);z-index:55;opacity:0;pointer-events:none;transition:opacity .22s} body.drawer-open #scrim{opacity:1;pointer-events:auto} .tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .tabs::-webkit-scrollbar{display:none} .tab{-webkit-tap-highlight-color:transparent;white-space:nowrap;border-bottom-width:3px} ::selection{background:rgba(18,161,80,.28)} @media (min-width:901px){ .main{grid-template-columns:300px 1fr} } @media (max-width:900px){ /* Hard guarantee: NOTHING pushes the page wider than the phone screen. Wide content (tables, long ids, LTR emails) must scroll inside its own container, never the page. */ html,body{max-width:100vw;overflow-x:hidden} .pane,.card{max-width:100%;min-width:0} header{position:sticky;top:0;z-index:50} header h1,header .env{display:none} #menuBtn{display:block} #abiz{display:block} .main{grid-template-columns:1fr} .side{position:fixed;top:0;bottom:0;left:auto;right:0;width:min(86vw,340px);max-height:none;z-index:60;transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);border-inline-end:0;border-bottom:0;padding:0;display:flex;flex-direction:column} body.drawer-open .side{transform:none;box-shadow:-18px 0 44px rgba(0,0,0,.28)} .side-head{display:flex;align-items:center;gap:10px;background:var(--appbar);color:#fff;padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top));font-weight:800;font-size:1rem;flex:none} .side-head .x{margin-inline-start:auto;background:none;border:0;box-shadow:none;color:#fff;font-size:1.15rem;cursor:pointer;padding:6px 8px} .side-nav{padding:8px} .side h3{display:none} #tenants{overflow:auto;flex:1;padding:8px} .tbl{display:block;overflow-x:auto} input,textarea,select{font-size:16px} /* prevents iOS focus-zoom */ .pane{padding:16px 14px} /* key-value rows (billing, addons, usage, profile - the whole console): on phones the value+button block is one NON-BREAKING unit that drops to its own line under the label instead of squeezing beside it ("+40% לתשלום החודשי" wrapped mid-phrase, buttons floated ugly - user screenshots 2026-08-12). Short rows still fit on one line untouched. */ .kv{flex-wrap:wrap;gap:4px 10px} .kv>span:first-child{flex:1 1 190px;min-width:0} .kv>b{display:flex;align-items:center;gap:8px;white-space:nowrap;margin-inline-start:auto;flex:none;max-width:100%} .kv>b button{flex:none} .card{padding:16px 14px} .card .sec-title{margin-top:0} .pane button:not(.cmp-ico):not(.linkbtn),.gate button{min-height:44px} /* master/detail needs a SINGLE column - the base 260px+1fr left an empty gap where the hidden thread was (broke at 760-900px = split-screen / half a monitor). List fills the column; tapping a conversation (body.chat-open) swaps it for the full-width thread. */ .inbox{grid-template-columns:1fr;height:calc(100dvh - 168px);min-height:380px} .threadcol .thread{min-height:0} .compose{padding-bottom:calc(12px + env(safe-area-inset-bottom))} /* WhatsApp master/detail: the LIST fills the screen; tapping a conversation opens the chat FULL-SCREEN (tabs hidden, chat-top with back). Exactly the app the user knows. */ .convlist{max-height:none;border-bottom:0;height:100%} .inbox .threadcol{display:none} body.chat-open .inbox .convlist{display:none} body.chat-open .inbox .threadcol{display:flex} body.chat-open .tabs{display:none} body.chat-open #firstrun{display:none} body.chat-open .inbox{height:calc(100dvh - 54px - env(safe-area-inset-top));margin:0;border:0;border-radius:0;min-height:0} /* Scroll containment (owner 2026-08-16: dragging on the composer/thread nudged the whole page a little, plus a horizontal wiggle inside the chat). The page behind an open chat is LOCKED solid; scrolling exists only inside the thread, vertically, with no chaining. */ /* BOTH axes: overscroll-behavior:none also kills the ~10px vertical rubber-band / pull-to-refresh preview when dragging on non-scrollable areas like the composer (owner video 2026-08-16 19:35, second 14 - x-only left the vertical elastic alive) */ html,body{overflow-x:hidden;overscroll-behavior:none;max-width:100vw} .thread{overscroll-behavior:contain;touch-action:pan-y} .convlist{overscroll-behavior:contain} .compose textarea{overscroll-behavior:contain} .compose,.chat-top,.botbar{touch-action:none} /* dragging on the bars must move NOTHING */ .compose textarea{touch-action:pan-y} /* its own internal scroll stays usable */ body.chat-open{position:fixed;inset:0;width:100%;overflow:hidden} .threadcol{min-width:0;overflow-x:hidden} } .chat-top{display:none} @media (max-width:900px){ .chat-top{display:flex;align-items:center;gap:8px;background:var(--appbar);color:#fff;padding:9px 10px;font-weight:800;font-size:.98rem;flex:none} .chat-top button{background:none;border:0;box-shadow:none;color:#fff;padding:6px;cursor:pointer;min-height:0;display:grid;place-items:center} .chat-top button:active{background:rgba(255,255,255,.18);border-radius:50%} .chat-top b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} } @media (prefers-reduced-motion:reduce){ .side,#scrim{transition:none} } /* ===== Notifications: push-style banner + bell center ===== */ #topNotice{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:99998;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:12px 40px 12px 14px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 18px 50px rgba(17,27,33,.22);width:min(440px,calc(100vw - 28px));animation:tnIn .38s cubic-bezier(.2,.9,.25,1.15);cursor:pointer;direction:rtl} #topNotice .tn-ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:1.05rem;flex:none} #topNotice.ok .tn-ico{background:var(--teal-soft)} #topNotice.info .tn-ico{background:var(--teal-soft)} #topNotice.warn .tn-ico{background:var(--amber-soft)} #topNotice.err .tn-ico{background:#fbecea} #topNotice .tn-tx{min-width:0} #topNotice .tn-tx b{display:block;font-size:.92rem} #topNotice .tn-tx span{display:block;font-size:.84rem;color:var(--muted);line-height:1.55;margin-top:2px} #topNotice .tn-x{position:absolute;top:9px;inset-inline-end:11px;font-weight:900;color:var(--muted);padding:5px;cursor:pointer} /* persistent connection-down strip (owner 2026-08-23): visible until reconnect OR the X */ #connStrip{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:99997;background:#fef3f2;border:1.5px solid #f0b3ad;color:#7a271a;border-radius:14px;padding:11px 38px 11px 14px;display:flex;gap:11px;align-items:center;box-shadow:0 14px 40px rgba(122,39,26,.25);width:min(520px,calc(100vw - 28px));direction:rtl} #connStrip .cs-tx{min-width:0;flex:1} #connStrip .cs-tx b{display:block;font-size:.9rem} #connStrip .cs-tx span{display:block;font-size:.8rem;color:#9a4a3f;line-height:1.5;margin-top:1px} #connStrip .cs-go{flex:none;background:#b42318;color:#fff;border:0;border-radius:10px;padding:8px 14px;font-size:.82rem;font-weight:700;cursor:pointer} #connStrip .cs-x{position:absolute;top:8px;inset-inline-end:10px;font-weight:900;color:#9a4a3f;padding:5px;cursor:pointer} @keyframes tnIn{from{opacity:0;transform:translate(-50%,-16px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}} /* bell + robot share one box model so they sit on the SAME line (owner screenshot 2026-08-15: the emoji baseline dropped the robot below the bell svg) */ #bellBtn,#asstBtn,#supBtn,#tourHdrBtn{position:relative;background:none;border:0;box-shadow:none;padding:8px;border-radius:10px;cursor:pointer;margin-inline-start:6px;place-items:center;height:38px;line-height:1} #bellBtn:hover,#asstBtn:hover,#supBtn:hover,#tourHdrBtn:hover{background:rgba(255,255,255,.14)} /* the count badge floats on the bell's CORNER, never on top of the icon itself (owner report 2026-08-15: "ההתראות מופיעות ממש עליו") - the appbar-colored border lifts it */ #bellBadge{display:none;position:absolute;top:-3px;inset-inline-end:-3px;min-width:18px;height:18px;border-radius:9px;background:#ff3b30;color:#fff;font-size:.62rem;font-weight:800;place-items:center;padding:0 3px;border:2px solid var(--appbar,#0f766e);text-align:center} /* own keyframes: tnIn is for the CENTERED banner (translateX -50%) - reusing it on the side-anchored panel made it open shifted and then snap into place */ @keyframes bpIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}} #bellPanel{position:fixed;top:calc(54px + env(safe-area-inset-top));inset-inline-end:10px;z-index:99997;background:#fff;border-radius:16px;border:1px solid var(--line);box-shadow:0 22px 60px rgba(17,27,33,.28);width:min(360px,calc(100vw - 20px));max-height:min(68vh,460px);display:flex;flex-direction:column;overflow:hidden;animation:bpIn .22s cubic-bezier(.2,.9,.3,1.05);transform-origin:top;direction:rtl} #bellPanel .bp-head{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);font-weight:800;font-size:.92rem} #bellPanel .bp-clear{margin-inline-start:auto;background:none;border:0;box-shadow:none;color:var(--teal-strong);font-size:.8rem;font-weight:700;cursor:pointer;padding:4px 8px} #bellPanel .bp-list{overflow:auto;flex:1} #bellPanel .bp-row{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line-soft);cursor:pointer;align-items:flex-start} #bellPanel .bp-row:hover{background:var(--panel2)} #bellPanel .bp-row.unread{background:#f2fbf5} #bellPanel .bp-ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--teal-soft);font-size:.95rem} #bellPanel .bp-row.warn .bp-ico{background:var(--amber-soft)} #bellPanel .bp-row.err .bp-ico{background:#fbecea} #bellPanel .bp-tx{min-width:0} #bellPanel .bp-tx b{display:block;font-size:.87rem} #bellPanel .bp-tx span{display:block;font-size:.8rem;color:var(--muted);line-height:1.5;margin-top:1px} #bellPanel .bp-time{margin-inline-start:auto;font-size:.7rem;color:var(--muted);flex:none;padding-top:3px} #bellPanel .bp-dots{flex:none;background:none;border:0;box-shadow:none;color:var(--muted);font-size:1rem;font-weight:800;padding:2px 7px;border-radius:8px;cursor:pointer;align-self:flex-start} #bellPanel .bp-dots:hover{background:var(--panel2);color:var(--ink)} /* push enable button: loading ring + active state */ .spinring{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spr .7s linear infinite;vertical-align:-2px;margin-inline-end:7px} @keyframes spr{to{transform:rotate(360deg)}} #pushOnBtn.on{background:var(--teal-soft,#e7f5ec);color:var(--teal-strong,#0f9048);border:1.5px solid rgba(18,161,80,.45);box-shadow:none;cursor:default} #bellPanel .bp-empty{padding:38px 20px;text-align:center;color:var(--muted);font-size:.86rem} @media (prefers-reduced-motion:reduce){ #topNotice,#bellPanel{animation:none} } @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* analytics product-cost table (owner 2026-09-03): 8 columns must fit the pane on desktop; phones keep product · store cost · manual cost · sold - SKU / price / margin / period-COGS are secondary and would push the key columns behind a swipe. The manual-cost input keeps 16px on phones (iOS focus-zoom). */ #anProdTbl .tbl th,#anProdTbl .tbl td{padding:9px 9px} #anProdTbl .tbl th{white-space:normal;line-height:1.25} #anProdTbl .tbl input{font-size:.82rem} @media (max-width:700px){ .anp-sec{display:none!important} #anProdTbl .tbl td:first-child>div{min-width:108px} #anProdTbl .tbl th{font-size:.62rem;letter-spacing:0} #anProdTbl .tbl th,#anProdTbl .tbl td{padding:8px 5px} #anProdTbl .tbl td img{display:none} #anProdTbl .tbl input{width:70px!important;font-size:16px;padding:6px 5px} } /* Brand loader (owner 2026-09-03): the bubble+bolt mark breathing inside a spinning ring. .wload = centred in a freshly opened tab; .wload-overlay = laid over the current content during a soft refresh (the page never blanks); .wload-mini = small ring beside in-card "טוען…" texts. */ #pane{position:relative} .wload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:64px 0 48px} .wload-mark{position:relative;width:72px;height:72px} .wload-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(18,161,80,0) 0 55%,rgba(18,161,80,.35) 78%,#12a150 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));animation:wspin 1s linear infinite} .wload-core{position:absolute;inset:11px;display:block;animation:wbreathe 1.4s ease-in-out infinite;filter:drop-shadow(0 6px 14px rgba(18,161,80,.28))} .wload-core svg{width:100%;height:100%;display:block} .wload-msg{font-size:.82rem;color:var(--muted)} .wload-overlay{position:absolute;inset:0;z-index:4;background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);display:flex;align-items:flex-start;justify-content:center;animation:wfade .18s ease-out} .wload-overlay .wload{position:sticky;top:120px;padding:0} .wload-mini{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid rgba(18,161,80,.22);border-top-color:#12a150;vertical-align:-2px;animation:wspin .8s linear infinite} @keyframes wspin{to{transform:rotate(360deg)}} @keyframes wbreathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.88);opacity:.78}} @keyframes wfade{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){.wload-ring,.wload-core,.wload-mini{animation:none}} /* analytics shipping-by-method table (owner 2026-09-03): method names wrap, numbers never; phones drop the customer-paid column (.anp-sec) */ #anShip .tbl th,#anShip .tbl td{padding:9px 9px;white-space:nowrap} #anShip .tbl td:first-child{white-space:normal;min-width:180px} #anShip .tbl th{white-space:normal;line-height:1.25} #anShip .tbl input{font-size:.82rem} @media (max-width:700px){ #anShip .tbl td:first-child{min-width:118px} #anShip .tbl th{font-size:.62rem;letter-spacing:0} #anShip .tbl th,#anShip .tbl td{padding:8px 5px} #anShip .tbl input{width:66px!important;font-size:16px;padding:6px 5px} } /* analytics chips + accordion (owner 2026-09-03): every section is a
card; chips at the top open/close and jump */ .an-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 4px} .an-chip{padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:.8rem;font-weight:600;cursor:pointer;color:inherit;font-family:inherit;line-height:1.3} .an-chip.on{background:var(--teal);color:#fff;border-color:var(--teal)} .an-chip-all{color:var(--teal);font-weight:800;border-style:dashed} .an-sec{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);margin-top:10px} .an-sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 18px;font-weight:700;user-select:none} .an-sec>summary::-webkit-details-marker{display:none} .an-sec>summary .an-sum{margin-inline-start:auto;font-weight:500;color:var(--muted);font-size:.8rem;white-space:nowrap} .an-sec>summary::after{content:'⌄';font-size:1.1rem;color:var(--muted);transition:transform .15s;margin-inline-start:6px;line-height:1} .an-sec[open]>summary::after{transform:rotate(180deg)} .an-sec>.an-body{padding:0 18px 18px} .an-sec .card{border:0;box-shadow:none;padding:0;margin:0;background:transparent} .an-sec .card>.sec-title:first-child,.an-sec .card>div:first-child>.sec-title{display:none} .pane .an-sec .card button:not(.cmp-ico):not(.linkbtn){min-height:0} @media (max-width:700px){ .an-sec>summary{padding:12px 14px;flex-wrap:wrap;gap:6px 10px} .an-sec>summary .an-sum{white-space:normal;font-size:.74rem;flex-basis:100%;margin-inline-start:0} .an-sec>.an-body{padding:0 14px 14px} .pane .an-sec .card button:not(.cmp-ico):not(.linkbtn){min-height:44px} } /* real connector logos (owner 2026-09-03): /img/conn/ - connections tab cards, analytics source strip + revenue table */ .conn-ic{display:inline-block;vertical-align:-5px;border-radius:6px;object-fit:contain;margin-inline-end:6px;background:#fff;flex:none} .conn-ic-card{margin-inline-end:0;border-radius:8px;padding:2px;border:1px solid var(--line-soft,#eee)} .an-srcstrip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 5px;border:1px solid var(--line);border-radius:999px;background:var(--panel)} .an-srcstrip .conn-ic{margin-inline-end:0;vertical-align:0} /* manual shipping profile (no shop): tier rows stay on one line on phones */ @media (max-width:700px){ #anShipFields input[type=number]{width:66px!important} } /* connections tab: floating "+" (add a system with an API key) + the custom-API card (owner 2026-09-03) */ .int-fab{position:fixed;left:22px;right:auto;bottom:26px;z-index:70;width:54px;height:54px;border-radius:50%;border:0;background:var(--teal);color:#fff;font-size:30px;line-height:1;font-weight:400;cursor:pointer;box-shadow:0 8px 22px rgba(18,161,80,.38);display:grid;place-items:center;padding:0;transition:transform .12s,box-shadow .12s} .int-fab:hover{transform:translateY(-1px) scale(1.04);box-shadow:0 10px 26px rgba(18,161,80,.45)} .int-fab:active{transform:scale(.96)} @media (max-width:700px){ .int-fab{left:16px;right:auto;bottom:calc(84px + env(safe-area-inset-bottom));width:50px;height:50px;font-size:28px} /* the admin's 🛠️ report button shares the left corner - it steps up while the + is on screen */ body:has(.int-fab) #techFab{bottom:calc(146px + env(safe-area-inset-bottom))!important} body.chat-open .int-fab{display:none} .int-add button{width:100%} } /* assistant: threads behind a ☰ drawer inside the panel; the strip shows the current thread's name with no