.cg-support-gateway{--cg-blue:#0786c8;--cg-blue-dark:#075f94;--cg-ink:#173247;--cg-soft:#eef8fd;--cg-border:#d8eaf4;--cg-green:#2e7d32;font-family:inherit;color:var(--cg-ink);max-width:1180px;width:100%;margin:28px auto;scroll-margin-top:24px}.cg-support-gateway *{box-sizing:border-box}.cg-support-gateway__panel{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:34px;align-items:center;background:linear-gradient(135deg,#fff 0%,#f7fcff 58%,#eaf7fd 100%);border:1px solid var(--cg-border);border-radius:24px;padding:38px;box-shadow:0 14px 34px rgba(20,72,103,.10)}.cg-support-gateway__eyebrow{font-size:14px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--cg-blue-dark);margin-bottom:10px}.cg-support-gateway h2{margin:0 0 12px;font-size:clamp(34px,4vw,52px);line-height:1.05;color:#12354d}.cg-support-gateway__lead{font-size:clamp(20px,2.1vw,25px);line-height:1.4;margin:0 0 12px;color:#284e67}.cg-support-gateway__sub{font-size:18px;line-height:1.6;margin:0 0 24px;color:#4b687a;max-width:760px}.cg-support-gateway__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.cg-support-gateway__button{appearance:none;border:0;border-radius:999px;padding:15px 26px;background:var(--cg-blue);color:#fff;font-weight:800;font-size:18px;cursor:pointer;box-shadow:0 8px 18px rgba(7,134,200,.20);transition:transform .15s ease,background .15s ease}.cg-support-gateway__button:hover,.cg-support-gateway__button:focus{transform:translateY(-1px);background:var(--cg-blue-dark);color:#fff}.cg-support-gateway__button--secondary{background:#fff;color:var(--cg-blue-dark);border:1px solid #b9dceb;box-shadow:none}.cg-support-gateway__button--large{min-height:54px;padding:15px 30px}.cg-support-gateway__reassure{font-size:15px;line-height:1.45;color:#5f7787;max-width:420px}.cg-support-gateway__visual{display:flex;justify-content:center}.cg-ai-rep{width:min(100%,330px);background:#fff;border:1px solid var(--cg-border);border-radius:22px;padding:22px;box-shadow:0 12px 28px rgba(22,72,102,.10);text-align:center}.cg-ai-rep__art{width:210px;height:210px;margin:0 auto 12px;display:block;object-fit:contain}.cg-ai-rep__name{font-size:21px;font-weight:800;color:#173d56;margin:4px 0}.cg-ai-rep__badge{display:inline-block;padding:6px 11px;border-radius:999px;background:#e8f5fb;color:#096998;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.cg-ai-rep__small{font-size:14px;line-height:1.45;color:#6b7e8a;margin-top:9px}.cg-support-gateway__preview{margin-top:12px;font-size:13px;color:#7b6a2d;background:#fff8db;border:1px solid #f0dfa0;border-radius:8px;padding:8px 10px;display:inline-block} .cg-support-workspace[hidden]{display:none!important}.cg-support-workspace{margin-top:22px;background:#fff;border:2px solid #cde5f1;border-radius:26px;box-shadow:0 20px 48px rgba(18,60,86,.14);overflow:hidden;min-height:620px;scroll-margin-top:20px}.cg-support-workspace__header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 30px;background:linear-gradient(135deg,#0b78b4,#075f94);color:#fff}.cg-support-workspace__identity{display:flex;align-items:center;gap:16px}.cg-support-workspace__avatar{width:58px;height:58px;border-radius:18px;background:#fff;color:#075f94;display:grid;place-items:center;font-size:20px;font-weight:900;box-shadow:0 6px 18px rgba(0,0,0,.12)}.cg-support-workspace__eyebrow{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.85}.cg-support-workspace h3{margin:2px 0 4px;font-size:28px;line-height:1.15;color:#fff}.cg-support-workspace__status{font-size:14px;opacity:.92;display:flex;align-items:center;gap:7px}.cg-support-workspace__status span{width:9px;height:9px;border-radius:50%;background:#8ee49a;box-shadow:0 0 0 4px rgba(142,228,154,.18)}.cg-support-workspace__close{border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:11px 18px;font-size:15px;font-weight:800;cursor:pointer}.cg-support-workspace__close:hover{background:rgba(255,255,255,.2)}.cg-support-workspace__body{padding:34px clamp(22px,5vw,64px) 42px;max-width:980px;width:100%;margin:0 auto}.cg-support-workspace__footer{padding:16px 28px;border-top:1px solid #e5eef3;background:#f8fbfd;color:#647b8a;font-size:13px;text-align:center}.cg-support-step[hidden]{display:none!important}.cg-support-step{font-size:18px;color:#3c5a6d}.cg-support-step h4{margin:0 0 8px;font-size:clamp(25px,3vw,34px);line-height:1.15;color:#153b54}.cg-support-step p{font-size:18px;line-height:1.6;color:#536d7d}.cg-support-step__intro{display:flex;gap:18px;align-items:flex-start;margin-bottom:26px}.cg-support-step__number{flex:0 0 48px;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#eaf7fd;color:#075f94;font-weight:900;font-size:22px;border:1px solid #cde7f4}.cg-support-form{max-width:760px}.cg-support-form label{display:block;font-size:17px;font-weight:800;color:#294d65;margin:18px 0 8px}.cg-support-form input,.cg-support-form textarea{width:100%;border:2px solid #bcd8e7;border-radius:12px;padding:15px 16px;font:inherit;font-size:18px;line-height:1.35;background:#fff;min-height:54px}.cg-support-form input:focus,.cg-support-form textarea:focus{outline:3px solid rgba(7,134,200,.14);border-color:var(--cg-blue)}.cg-support-form textarea{min-height:140px;resize:vertical}.cg-support-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.cg-support-form__help{font-size:14px!important;color:#708491!important;margin-top:8px!important}.cg-support-form__help--roomy{margin-top:24px!important}.cg-support-code{max-width:260px;font-size:28px!important;letter-spacing:.15em;text-align:center;font-weight:800}.cg-support-notice{border-radius:12px;padding:14px 16px;margin:0 0 24px;font-size:16px;line-height:1.5}.cg-support-notice--info{background:#eef8fd;color:#24536e}.cg-support-notice--success{background:#edf8ee;color:#2c6531}.cg-support-notice--error{background:#fff0f0;color:#8a2b2b}.cg-support-loading{opacity:.65;pointer-events:none}.cg-support-linkbutton{border:0;background:transparent;padding:0;color:var(--cg-blue-dark);text-decoration:underline;cursor:pointer;font:inherit;font-weight:700}.cg-support-ready{padding:18px;border-radius:14px;background:#edf8ee;border:1px solid #cce7cf;font-size:17px;line-height:1.55}.cg-support-ready strong{color:#225c28}.cg-support-ready--large{padding:22px;font-size:19px}.cg-support-schedule{padding:20px;border-radius:14px;background:#f4faff;border:1px solid #d6eaf5;font-size:17px;line-height:1.55;margin-bottom:22px}.cg-support-schedule__earliest{font-weight:800;color:#1d5778}.cg-support-conversation-placeholder{display:flex;gap:20px;align-items:flex-start;margin-top:26px;padding:26px;border-radius:16px;border:1px dashed #a9d6ea;background:#f8fcfe}.cg-support-conversation-placeholder__icon{width:58px;height:58px;flex:0 0 58px;border-radius:18px;display:grid;place-items:center;background:#0786c8;color:#fff;font-size:20px;font-weight:900}.cg-support-conversation-placeholder h4{font-size:25px;margin:0 0 8px}.cg-support-conversation-placeholder p{margin:0} .cg-support-launcher{position:fixed;right:22px;bottom:22px;z-index:99990;border:0;border-radius:999px;background:#0786c8;color:#fff;display:flex;align-items:center;gap:10px;padding:10px 17px 10px 10px;box-shadow:0 12px 30px rgba(7,78,120,.30);font:inherit;font-weight:800;font-size:16px;cursor:pointer;transition:transform .15s ease,background .15s ease}.cg-support-launcher:hover,.cg-support-launcher:focus{background:#075f94;color:#fff;transform:translateY(-1px)}.cg-support-launcher__icon{width:42px;height:42px;border-radius:50%;background:#fff;color:#075f94;display:grid;place-items:center;font-weight:900;font-size:14px}.cg-support-launcher__text{white-space:nowrap} @media(max-width:760px){.cg-support-gateway{width:100%;margin:18px auto}.cg-support-gateway__panel{grid-template-columns:1fr;padding:24px 20px;border-radius:18px}.cg-support-gateway__visual{order:-1}.cg-ai-rep{width:100%;max-width:280px}.cg-support-gateway__sub{font-size:17px}.cg-support-workspace{border-radius:0;margin-left:-16px;margin-right:-16px;min-height:100svh}.cg-support-workspace__header{padding:18px 16px;align-items:flex-start}.cg-support-workspace__avatar{width:48px;height:48px;border-radius:14px}.cg-support-workspace h3{font-size:23px}.cg-support-workspace__close{padding:9px 12px;font-size:13px}.cg-support-workspace__body{padding:26px 18px 36px}.cg-support-step__intro{gap:12px}.cg-support-step__number{width:42px;height:42px;flex-basis:42px}.cg-support-form__row{grid-template-columns:1fr}.cg-support-form input,.cg-support-form textarea{font-size:18px}.cg-support-launcher{right:14px;bottom:14px;padding-right:14px}.cg-support-launcher__text{font-size:15px}} /* v0.12 actual AI troubleshooting conversation */ .cg-support-chat{margin-top:24px;border:1px solid #d5e7f0;border-radius:18px;background:#f8fcfe;overflow:hidden}.cg-support-chat__messages{min-height:260px;max-height:520px;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:18px;background:#fff}.cg-support-chat__message{max-width:82%;display:flex;flex-direction:column;gap:6px}.cg-support-chat__message--assistant{align-self:flex-start}.cg-support-chat__message--user{align-self:flex-end;align-items:flex-end}.cg-support-chat__label{font-size:13px;font-weight:800;color:#658091}.cg-support-chat__bubble{white-space:pre-wrap;font-size:18px;line-height:1.55;padding:15px 17px;border-radius:16px;background:#eaf7fd;color:#244a61;border:1px solid #cfe6f2}.cg-support-chat__message--user .cg-support-chat__bubble{background:#087fbd;color:#fff;border-color:#087fbd}.cg-support-chat__composer{padding:22px;background:#f4f9fc;border-top:1px solid #d5e7f0}.cg-support-chat__composer label{display:block;font-size:17px;font-weight:800;color:#294d65;margin:0 0 9px}.cg-support-chat__composer textarea{width:100%;min-height:120px;border:2px solid #bcd8e7;border-radius:12px;padding:15px 16px;font:inherit;font-size:18px;line-height:1.45;resize:vertical;background:#fff}.cg-support-chat__composer textarea:focus{outline:3px solid rgba(7,134,200,.14);border-color:#0786c8}.cg-support-chat__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px} .cg-support-chat__handoff{margin-top:14px;padding:16px;border:2px solid #9fcfe3;border-radius:16px;background:#f8fcfe;text-align:center}.cg-support-chat__handoff-code{display:flex;justify-content:center}.cg-support-chat__handoff-code svg{width:min(230px,60vw);height:auto}.cg-support-chat__handoff-status{margin-top:10px;font-size:16px;line-height:1.45;color:#3c5a6d} .cg-support-chat__step{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}.cg-support-chat__step-button{appearance:none;flex:1 1 200px;min-height:64px;padding:16px 20px;border-radius:14px;font:inherit;font-size:19px;font-weight:800;cursor:pointer;border:2px solid transparent;text-align:center}.cg-support-chat__step-button--done{background:#2e7d32;color:#fff;border-color:#2e7d32}.cg-support-chat__step-button--done:hover,.cg-support-chat__step-button--done:focus{background:#245e28;border-color:#245e28}.cg-support-chat__step-button--failed{background:#fff;color:#8a2b2b;border-color:#d8a3a3}.cg-support-chat__step-button--failed:hover,.cg-support-chat__step-button--failed:focus{background:#fff2f2;border-color:#b96a6a} @media(max-width:760px){.cg-support-chat__step-button{flex:1 1 100%;min-height:68px;font-size:19px}} @media(max-width:760px){.cg-support-chat__messages{min-height:320px;max-height:58svh;padding:18px 14px}.cg-support-chat__message{max-width:94%}.cg-support-chat__bubble{font-size:18px}.cg-support-chat__composer{padding:18px 14px}.cg-support-chat__actions .cg-support-gateway__button{width:100%;justify-content:center}.cg-support-chat__composer textarea{min-height:135px}} /* v0.13 customer screenshot/photo attachments */ .cg-support-chat__attachments{margin-top:12px;border:2px dashed #b9d9e8;border-radius:14px;padding:14px;background:#fbfdff;transition:border-color .15s ease,background .15s ease}.cg-support-chat__attachments--dragging{border-color:#0786c8;background:#eef8fd}.cg-support-chat__file-input{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;clip-path:inset(50%)!important}.cg-support-chat__attachment-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.cg-support-chat__attach-button{appearance:none;border:1px solid #9fcfe3;background:#fff;color:#075f94;border-radius:999px;padding:10px 15px;font:inherit;font-size:15px;font-weight:800;cursor:pointer}.cg-support-chat__attach-button:hover,.cg-support-chat__attach-button:focus{background:#edf8fd;border-color:#0786c8;outline:none}.cg-support-chat__attachment-tip{font-size:14px;line-height:1.45;color:#526f80}.cg-support-chat__drop-hint{font-size:13px;color:#708491;margin-top:9px}.cg-support-chat__attachment-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:12px}.cg-support-chat__preview-item{position:relative;display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:10px;border:1px solid #d4e7f0;border-radius:12px;background:#fff;padding:8px;min-width:0}.cg-support-chat__preview-item img{width:64px;height:52px;object-fit:cover;border-radius:8px;border:1px solid #dce9ef;background:#f4f7f9}.cg-support-chat__preview-meta{min-width:0}.cg-support-chat__preview-name{font-size:13px;font-weight:800;color:#294d65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cg-support-chat__preview-size{font-size:12px;color:#708491;margin-top:3px}.cg-support-chat__preview-remove{width:30px;height:30px;border-radius:50%;border:0;background:#eef4f7;color:#34576d;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center}.cg-support-chat__preview-remove:hover,.cg-support-chat__preview-remove:focus{background:#ffecec;color:#8a2b2b}.cg-support-chat__keyboard-help{margin-top:10px;font-size:13px;color:#6f8491}.cg-support-chat__message-images{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:8px;max-width:460px}.cg-support-chat__message-image{border-radius:12px;overflow:hidden;border:1px solid #cfe2eb;background:#fff}.cg-support-chat__message-image img{display:block;width:100%;height:auto;max-height:260px;object-fit:contain;background:#fff}.cg-support-chat__message--user .cg-support-chat__message-images{justify-content:end} @media(max-width:760px){.cg-support-chat__attachment-tools{align-items:flex-start;flex-direction:column}.cg-support-chat__attach-button{width:100%;text-align:center}.cg-support-chat__attachment-preview{grid-template-columns:1fr}.cg-support-chat__message-images{grid-template-columns:1fr;max-width:min(78vw,320px)}.cg-support-chat__drop-hint{display:none}} /* v0.14 simplified live screen capture + gated human escalation */ .cg-support-screen-tools{margin-top:14px;padding:16px;border:2px solid #a9d8ec;border-radius:16px;background:#eef9fe}.cg-support-screen-button{width:100%;display:flex;align-items:center;gap:14px;text-align:left;border:0;border-radius:14px;background:#087fbd;color:#fff;padding:16px 18px;cursor:pointer;font:inherit;box-shadow:0 8px 18px rgba(7,134,200,.18)}.cg-support-screen-button:hover,.cg-support-screen-button:focus{background:#075f94;outline:3px solid rgba(7,134,200,.18)}.cg-support-screen-button:disabled{opacity:.6;cursor:wait}.cg-support-screen-button__icon{flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:#fff;color:#075f94;display:grid;place-items:center;font-size:25px;font-weight:900}.cg-support-screen-button strong{display:block;font-size:19px;line-height:1.2}.cg-support-screen-button small{display:block;margin-top:5px;font-size:14px;line-height:1.4;font-weight:500;opacity:.95}.cg-support-screen-status{margin-top:10px;font-size:14px;font-weight:800;color:#285f3b}.cg-support-screen-stop{margin-top:8px;font-size:13px}.cg-support-chat__attachments{margin-top:10px}.cg-support-human-escalation{margin-top:16px;padding:16px;border:1px solid #d8e4ea;border-radius:14px;background:#fffdf5;color:#3c5564;display:grid;gap:9px}.cg-support-human-escalation strong{font-size:17px;color:#294d65}.cg-support-human-escalation span{font-size:14px;line-height:1.5}.cg-support-human-escalation .cg-support-gateway__button{justify-self:start}.cg-support-human-escalation[hidden]{display:none!important} @media(max-width:760px){.cg-support-screen-button{padding:15px}.cg-support-screen-button__icon{width:44px;height:44px;flex-basis:44px}.cg-support-screen-button strong{font-size:18px}.cg-support-screen-button small{font-size:13px}.cg-support-human-escalation .cg-support-gateway__button{width:100%;justify-self:stretch}} /* v0.15 session recovery: screenshots are not persisted; show a privacy-safe marker after reload. */ .cg-support-chat__restored-image{display:inline-flex;align-items:center;gap:7px;margin-top:2px;padding:9px 12px;border-radius:10px;border:1px dashed #b8d5e4;background:#f5fafc;color:#567386;font-size:14px;font-weight:700}.cg-support-chat__message--user .cg-support-chat__restored-image{background:#eef7fb;color:#315d76} /* v0.15.1 professional AI representative + in-chat thinking state */ .cg-support-chat__thinking{animation:cgThinkingIn .2s ease-out} .cg-support-chat__thinking-bubble{display:inline-flex;align-items:center;gap:10px;min-width:185px;padding:14px 17px;border-radius:16px;background:linear-gradient(135deg,#eef9ff,#e5f5fd);border:1px solid #c9e5f3;color:#24536e;box-shadow:0 5px 16px rgba(7,95,148,.08)} .cg-support-chat__thinking-orb{position:relative;width:24px;height:24px;flex:0 0 24px;border-radius:50%;border:3px solid rgba(7,134,200,.18);border-top-color:#0786c8;animation:cgThinkingSpin .85s linear infinite} .cg-support-chat__thinking-orb span{position:absolute;inset:5px;border-radius:50%;background:#0786c8;opacity:.18;animation:cgThinkingPulse 1.2s ease-in-out infinite} .cg-support-chat__thinking-text{font-size:17px;font-weight:800;letter-spacing:.01em} .cg-support-chat__thinking-dots{display:inline-flex;align-items:center;gap:4px;margin-left:1px} .cg-support-chat__thinking-dots i{display:block;width:6px;height:6px;border-radius:50%;background:#0786c8;animation:cgThinkingDot 1.15s ease-in-out infinite} .cg-support-chat__thinking-dots i:nth-child(2){animation-delay:.16s} .cg-support-chat__thinking-dots i:nth-child(3){animation-delay:.32s} /* G63, v0.29.0. THE MESSAGE BOX USED TO GO DEAD TO THE MOUSE WHILE THE AI WAS ANSWERING, WITH NOTHING ON SCREEN TO SAY WHY. His words, 11 Sep 2026: "It didn't let me paste the sentences into the box immediately. I had to wait a bit." The textarea and Send carried pointer-events:none, so a customer could not click in, could not paste, and could not press Send with the mouse. The box simply stopped responding. ⚠ AND IT WAS MOUSE-ONLY: Enter still submits through a keydown handler on the textarea, because keyboard events are not blocked - which is how five messages got in on 10 Sep, and why testing this by PASTING looked like a pass when nothing had been exercised at all. ⛔ IT ALSO CONTRADICTED G60. The queue's whole promise is "type away, we will hold it and send it when the answer lands", and this stylesheet told the mouse the opposite. SO THE TEXTAREA AND SEND STAY FULLY LIVE. Typing, pasting and pressing Send all work mid-turn; the queue holds the message and says so. ⚠ THE PICTURE BUTTONS ARE DELIBERATELY STILL BLOCKED. A photo mid-turn goes through the phone-photo bridge, which is a proven flow with its own aiIsAnswering() check, and G63 is about typing. Do not widen this without testing that bridge. */ .cg-support-chat__composer--waiting [data-cg-screen-button],.cg-support-chat__composer--waiting [data-cg-attach-button]{opacity:.58;pointer-events:none} @keyframes cgThinkingSpin{to{transform:rotate(360deg)}} @keyframes cgThinkingPulse{0%,100%{transform:scale(.75);opacity:.14}50%{transform:scale(1.15);opacity:.35}} @keyframes cgThinkingDot{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:1}} @keyframes cgThinkingIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.cg-support-chat__thinking,.cg-support-chat__thinking-orb,.cg-support-chat__thinking-orb span,.cg-support-chat__thinking-dots i{animation:none!important}} /* v0.15.2 device-aware support controls */ .cg-support-mobile-image-tools{display:grid;grid-template-columns:1fr 1fr;gap:12px} .cg-support-mobile-image-button{appearance:none;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;border:2px solid #9fcfe3;background:#fff;color:#294d65;border-radius:16px;padding:16px 12px;font:inherit;cursor:pointer;min-height:142px;min-width:0} .cg-support-mobile-image-button:hover,.cg-support-mobile-image-button:focus{background:#edf8fd;border-color:#0786c8;outline:3px solid rgba(7,134,200,.14)} .cg-support-mobile-image-button__icon{flex:none;width:46px;height:46px;border-radius:12px;background:#e8f6fc;display:grid;place-items:center;font-size:25px} .cg-support-mobile-image-button strong{display:block;font-size:17px;line-height:1.25;color:#075f94} .cg-support-mobile-image-button small{display:block;margin-top:4px;font-size:13px;line-height:1.4;font-weight:500;color:#526f80} .cg-support-device--mobile [data-cg-desktop-only]{display:none!important} .cg-support-device--desktop [data-cg-mobile-only]{display:none!important} @media(max-width:760px){.cg-support-mobile-image-button{min-height:146px}.cg-support-mobile-image-button strong{font-size:17px}.cg-support-mobile-image-button small{font-size:13px}.cg-support-chat__actions .cg-support-gateway__button{min-height:54px}} /* Two cubes still need to breathe on the narrowest phones. */ @media(max-width:380px){.cg-support-mobile-image-tools{gap:9px}.cg-support-mobile-image-button{padding:14px 8px;min-height:150px}.cg-support-mobile-image-button strong{font-size:16px}.cg-support-mobile-image-button small{font-size:12px}} .cg-support-chat__composer--waiting [data-cg-camera-button],.cg-support-chat__composer--waiting [data-cg-mobile-picker-button]{opacity:.58;pointer-events:none} /* v0.15.2.2 Round 1 mobile usability corrections */ .cg-support-chat__message-entry{position:relative} .cg-support-chat__send{display:none} .cg-support-device--mobile .cg-support-chat__message-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end} .cg-support-device--mobile .cg-support-chat__composer textarea{min-height:64px;max-height:156px;resize:none} .cg-support-device--mobile .cg-support-chat__send{display:inline-flex!important;align-items:center;justify-content:center;min-width:82px;min-height:54px;border:0;border-radius:14px;padding:0 16px;background:#0786c8;color:#fff;font:inherit;font-size:16px;font-weight:900;letter-spacing:.02em;cursor:pointer;box-shadow:0 5px 14px rgba(7,134,200,.16)} .cg-support-device--mobile .cg-support-chat__send:focus{outline:3px solid rgba(7,134,200,.22);outline-offset:2px} .cg-support-device--mobile .cg-support-chat__send:disabled{opacity:.58;cursor:not-allowed} .cg-support-device--mobile .cg-support-chat__actions{display:none!important} .cg-support-device--iphone-chrome [data-cg-camera-button] small{font-weight:600;color:#3c657d} @media(max-width:430px){.cg-support-device--mobile .cg-support-chat__message-entry{grid-template-columns:minmax(0,1fr) 76px;gap:8px}.cg-support-device--mobile .cg-support-chat__send{min-width:76px;padding:0 10px}} .cg-support-camera-notice{grid-column:1/-1;border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.45;text-align:left}.cg-support-camera-notice--info{background:#eef8fd;color:#24536e}.cg-support-camera-notice--success{background:#edf8ee;color:#2c6531}.cg-support-camera-notice--error{background:#fff0f0;color:#8a2b2b;border:1px solid #f0caca} /* v0.15.3.7 composer: attached pictures live inside the message box, and Send matches its height. */ .cg-support-chat__entry-box{position:relative;display:block;border:2px solid #bcd8e7;border-radius:12px;background:#fff;overflow:hidden} .cg-support-chat__entry-box:focus-within{border-color:#0786c8;box-shadow:0 0 0 3px rgba(7,134,200,.14)} .cg-support-chat__composer .cg-support-chat__entry-box textarea{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;display:block;width:100%} .cg-support-chat__composer .cg-support-chat__entry-box textarea:focus{outline:none!important;border:0!important;box-shadow:none!important} .cg-support-chat__entry-box .cg-support-chat__attachment-preview{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;grid-template-columns:none;margin:0;padding:14px 14px 2px} .cg-support-chat__entry-box .cg-support-chat__attachment-preview[hidden]{display:none!important} .cg-support-chat__entry-box .cg-support-chat__preview-item{position:relative;display:block;grid-template-columns:none;gap:0;padding:0;border:1px solid #cfe2ec;border-radius:10px;background:#fff;overflow:visible;min-width:0} .cg-support-chat__entry-box .cg-support-chat__preview-item img{display:block;width:76px;height:76px;object-fit:cover;border:0;border-radius:9px;background:#f4f7f9} .cg-support-chat__entry-box .cg-support-chat__preview-remove{position:absolute;top:-9px;right:-9px;width:28px;height:28px;min-width:28px;padding:0;border-radius:50%;border:2px solid #fff;background:#33586e;color:#fff;font-size:18px;font-weight:700;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.3)} .cg-support-chat__entry-box .cg-support-chat__preview-remove:hover,.cg-support-chat__entry-box .cg-support-chat__preview-remove:focus{background:#a3271f;color:#fff;outline:3px solid rgba(163,39,31,.25)} .cg-support-device--mobile .cg-support-chat__message-entry{align-items:stretch} .cg-support-device--mobile .cg-support-chat__send{align-self:center;height:100%;max-height:200px} @media(max-width:430px){.cg-support-chat__entry-box .cg-support-chat__attachment-preview{gap:12px;padding:12px 12px 2px}.cg-support-chat__entry-box .cg-support-chat__preview-item img{width:68px;height:68px}} /* v0.15.3.8 thinking indicator: larger, uses the Country Guard agent, and stays alive on a long wait. */ .cg-support-chat__thinking-bubble{gap:14px;min-width:0;padding:14px 20px 14px 14px;align-items:center} .cg-support-chat__thinking-avatar{position:relative;flex:0 0 54px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #cfe6f2;overflow:visible;box-shadow:0 4px 12px rgba(7,95,148,.14)} .cg-support-chat__thinking-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block} .cg-support-chat__thinking-avatar--orb{background:#eaf7fd} .cg-support-chat__thinking-avatar--orb::after{content:"";position:absolute;inset:8px;border-radius:50%;border:3px solid rgba(7,134,200,.2);border-top-color:#0786c8;animation:cgThinkingSpin .85s linear infinite} .cg-support-chat__thinking-halo{position:absolute;inset:-7px;border-radius:50%;border:3px solid rgba(7,134,200,.55);animation:cgThinkingHalo 1.8s ease-out infinite;pointer-events:none} .cg-support-chat__thinking-copy{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0} .cg-support-chat__thinking-text{font-size:18px;font-weight:800;line-height:1.35} .cg-support-chat__thinking-dots i{width:7px;height:7px} @keyframes cgThinkingHalo{0%{transform:scale(.86);opacity:.75}70%{transform:scale(1.22);opacity:0}100%{transform:scale(1.22);opacity:0}} @media(max-width:760px){.cg-support-chat__thinking-bubble{width:100%;padding:13px 15px 13px 13px;gap:12px}.cg-support-chat__thinking-avatar{flex:0 0 48px;width:48px;height:48px}.cg-support-chat__thinking-text{font-size:17px}} @media(prefers-reduced-motion:reduce){.cg-support-chat__thinking-halo,.cg-support-chat__thinking-avatar--orb::after{animation:none!important}.cg-support-chat__thinking-halo{opacity:.4}} /* v0.15.3.10 retry panel: a failed message is visibly held, not lost. */ .cg-support-chat__retry{display:grid;gap:9px;margin:0 0 16px;padding:16px 18px;border:2px solid #e8c37a;border-radius:14px;background:#fffaf0;color:#5b4412} .cg-support-chat__retry[hidden]{display:none!important} .cg-support-chat__retry strong{font-size:18px;line-height:1.3;color:#7a5a12} .cg-support-chat__retry span{font-size:16px;line-height:1.5} .cg-support-chat__retry .cg-support-gateway__button{justify-self:start} @media(max-width:760px){.cg-support-chat__retry{padding:14px}.cg-support-chat__retry .cg-support-gateway__button{width:100%;justify-content:center}} /* v0.16.0 End Support Session: discreet, but a real shutdown when confirmed. */ .cg-support-chat__session-end{margin-top:18px;padding-top:14px;border-top:1px solid #dbe8ef} /* G44, v0.27.0. "the end session should be more prominent at the bottom and marked in red because it's really hidden right now. So it needs to just take a little bit more real estate and be a little bit more noticeable and marked in red. Same location." - owner, 10 Sep 2026. It was 15px grey (#5e7c8d) underlined text that only turned red on HOVER, which a customer never sees until they have already found it. Four things he asked for: bigger, more noticeable, RED AT REST, SAME PLACE. ⛔ AND ONE HE DID NOT. This is NOT a large primary button. Every large button on this screen is something the customer is being encouraged to press, and ending the session is not - ajax_end_session is a genuine shutdown that destroys the conversation and the photographs. FINDABLE, NOT INVITING: the audience is 60 to 70 and a big red button beside the message box gets pressed by accident. The confirm panel behind it is what makes that safe and stays. */ /* G57, v0.28.0. THREE TIMES BIGGER, AND IT IS THE OWNER'S OWN INSTRUCTION. He looked at G44's result on the live site and said: "It is rate red and slightly bigger, but I would still make it bigger. We are dealing with old folks here. Like, increase it in size by triple." G44 took it from a 15px grey underlined link to 17px red with a border. He can see that change and it is not enough. ⚠ THIS PARTLY OVERRIDES A CAUTION IN G44'S ROW THAT WAS CLAUDE'S WORDING, NOT HIS - "do not turn it into a large primary button... findable, not inviting", written on the risk that a 60-to-70 year old presses a destructive control by accident. HIS INSTRUCTION WINS. ⛔ Do not argue it back down to 17px on the strength of a note Claude wrote. WHAT MAKES THE SIZE AFFORDABLE, and it is the whole reason this is safe: ajax_end_session is guarded by the confirm panel below - "End this support session?" with YES, END MY SESSION and NO, KEEP HELPING ME. An accidental press costs one click to undo. ⛔ NEVER remove that panel, and NEVER make the destructive answer the default. STILL HIS, AND UNCHANGED FROM G44: same location, at the bottom. Do not move it. It stays outlined rather than filled - that is about colour, not size, and the tripling he asked for is in the size. */ .cg-support-chat__end-link{appearance:none;background:none;display:inline-flex;align-items:center;justify-content:center;text-align:center;border:2px solid #d9b4b0;padding:11px 20px;font:inherit;font-size:17px;font-weight:800;color:#a3271f;text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:10px} /* ⚠ G57 APPLIES TO THE END SUPPORT SESSION BUTTON ONLY, AND THAT MATTERS. Four controls share .cg-support-chat__end-link: this one, the QR panel's Cancel, the phone-handoff panel's Cancel, and the confirm panel's "No, keep helping me". Tripling the class would have blown all four up - including two Cancels that are not what he was looking at. The size is scoped by [data-cg-end-session], which is only ever on the real control. */ .cg-support-chat__end-link[data-cg-end-session]{border-width:3px;padding:20px 34px;font-size:28px;line-height:1.2;text-underline-offset:4px;border-radius:14px;min-height:76px} .cg-support-chat__end-link:hover,.cg-support-chat__end-link:focus{color:#7e1d17;border-color:#a3271f;background:#fdf2f1;outline:none;text-decoration-thickness:2px} .cg-support-chat__end-link[hidden]{display:none!important} .cg-support-chat__end-confirm{display:grid;gap:10px;margin-top:10px;padding:16px 18px;border:2px solid #d8b9b5;border-radius:14px;background:#fff8f7;color:#5b3a36} .cg-support-chat__end-confirm[hidden]{display:none!important} .cg-support-chat__end-confirm strong{font-size:18px;line-height:1.3;color:#8a2b2b} .cg-support-chat__end-confirm span{font-size:16px;line-height:1.5} .cg-support-chat__end-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:2px} @media(max-width:760px){.cg-support-chat__end-confirm{padding:14px}.cg-support-chat__end-actions{gap:10px}.cg-support-chat__end-actions .cg-support-gateway__button{width:100%;justify-content:center}/* G44: the mobile rule keeps the same shape, just a little tighter. */ /* G57: still tripled on a phone, just without the wide side padding, and it takes the full width so it is never a small target in a corner. */ .cg-support-chat__end-link{padding:12px 18px} .cg-support-chat__end-link[data-cg-end-session]{padding:18px 20px;font-size:24px;min-height:68px;width:100%}} /* v0.16.5 thinking bubble: keep the dots on the text line and stop the bubble changing height when the wording updates. A height change inside the scrolling transcript left repaint ghosting on iOS Safari. */ .cg-support-chat__thinking-bubble{max-width:100%;min-height:78px;align-items:center;transform:translateZ(0);isolation:isolate} .cg-support-chat__thinking-copy{display:block;min-width:0;flex:1 1 auto} .cg-support-chat__thinking-text{display:inline} .cg-support-chat__thinking-dots{display:inline-flex;vertical-align:baseline;margin-left:8px;white-space:nowrap} @media(max-width:760px){.cg-support-chat__thinking-bubble{min-height:72px}} @media(prefers-reduced-motion:reduce){.cg-support-chat__thinking{animation:none!important}} /* v0.16.5 phone bridge: desktop QR panel. */ .cg-support-phone-bridge{margin-top:14px;padding-top:14px;border-top:1px dashed #cfe2ec;display:flex;flex-wrap:wrap;align-items:center;gap:12px} .cg-support-phone-bridge__panel{flex:1 1 100%;margin-top:6px;padding:18px;border:2px solid #a9d8ec;border-radius:16px;background:#f5fbfe;display:grid;justify-items:center;gap:12px;text-align:center} .cg-support-phone-bridge__panel[hidden]{display:none!important} .cg-support-phone-bridge__steps{display:grid;gap:6px;max-width:420px} .cg-support-phone-bridge__steps strong{font-size:18px;color:#123a52} .cg-support-phone-bridge__steps span{font-size:15px;line-height:1.5;color:#4a6a7d} .cg-support-phone-bridge__code{width:224px;height:224px;padding:10px;background:#fff;border:1px solid #cfe2eb;border-radius:12px;display:grid;place-items:center} .cg-support-phone-bridge__code svg{width:100%;height:100%;display:block} .cg-support-phone-bridge__status{font-size:15px;font-weight:800;color:#285f3b} /* v0.17.0 approved visual cards. Markers are placed from stored anchor coordinates; the model never supplies a position or any markup. */ .cg-support-card{position:relative;margin:10px 0 16px;padding:0 84px 0 0;max-width:324px}/* ⛔⛔ P15, v0.38.0. THE BUTTON HANGS SIDEWAYS NOW, NOT DOWNWARDS, AND THE PADDING IS THE ROOM IT HANGS INTO. HIS WORDS, rejecting P14 on 11 Sep 2026: "It has to still be on the image, but not blocking it... half of the tap to enlarge on the image and half on the right side." ⛔ WHY P14 WAS WRONG, and the arithmetic behind it was RIGHT - it answered the wrong question. P14 hung the button DOWNWARDS because sideways "costs 75px of picture" against 16px downwards. True, and irrelevant: the 75px does not come out of the PICTURE, it comes out of the empty chat beside it, exactly as the 16px did. What downwards actually cost was THE CAPTION, which the button then sat on top of. He saw that immediately. ⚑ THE METHOD LESSON, recorded because it cost a whole install cycle: a correct calculation aimed at the wrong quantity is more convincing than a guess, and therefore more expensive. 84px of right padding is half the button (~150px wide, so ~75px) plus a little slack for a wider font, and the max-width grows by the same 84px. ⛔ THE FRAME STAYS 240px: 240 was HIS OWN measurement by eye ("half of the size of this one") and it is not being quietly shrunk to make room for a control. ⛔ DO NOT PUT THE ROOM ON THE FRAME AND DO NOT REMOVE THE max-width INCREASE - they go together, and without the second the chat bubble clips the overhang straight back off. */ .cg-support-card__frame img{max-height:200px;object-fit:contain;background:#fff} /* P14, v0.36.0. `position:relative` is GONE from here. The only absolutely positioned children this frame ever had were the marker dots - removed with C5 in v0.35.0 - and the zoom button, which now belongs to the card so it can hang outside. ⚑ EQUIVALENT MUTANT, RECORDED RATHER THAN TESTED - standing rule 16(c). Putting position:relative back here changes NOTHING while the button is a sibling of this frame: there is nothing left inside it to position. It was mutated and the suite stayed green, and that is the correct result, not a missing test - writing one would assert an implementation detail and block a correct change later. ⛔ It only starts to matter if the button is moved back INSIDE the frame, and that move is caught on its own, in tests/pdefects_run.js. */ .cg-support-card__frame{display:block;border:1px solid #cfe2eb;border-radius:14px;overflow:hidden;background:#fff} .cg-support-card__frame img{display:block;width:100%;height:auto} /* ⛔ P14, v0.36.0. THE BUTTON HANGS HALF OUT OF THE PICTURE INSTEAD OF SITTING ON TOP OF IT. His words, 12 Sep 2026, looking at a paired card: "put the tap to enlarge thing a little more to the side so that it's not blocking a lot of the image, like, not fully next to it because then it won't be understood, but kinda, like, more half outside of the image." ⚑ THE "NOT FULLY OUTSIDE" HALF IS THE REQUIREMENT, NOT A DETAIL - he said why in the same breath: fully detached and it stops reading as belonging to that picture. So it straddles the bottom-right corner, still overlapping. ⛔ WHY IT MOVED FROM THE FRAME TO THE CARD: the frame carries overflow:hidden, which is what keeps the picture's corners rounded, and it clipped anything that poked out. The frame goes on clipping the PICTURE; the button is now positioned against the card, which has the room. That is what the padding and margin above are for - without them the chat bubble clips it instead. ⚑ It helps most where he noticed it: on a paired card an inset button sits over the JOIN between the two pictures, which is the worst place for it. */ /* ⛔ P15, v0.38.0. THE STAGE IS WHAT THE BUTTON IS POSITIONED AGAINST, and it exists for one reason: the FRAME carries overflow:hidden (that is what keeps the picture corners rounded) so anything positioned inside it is clipped, while the CARD is the wrong box because it also contains the caption - anchoring to the card would put the button level with the caption, which is precisely the fault he rejected. The stage wraps the frame ONLY. ⛔ DO NOT COLLAPSE THE STAGE BACK INTO THE CARD OR THE FRAME. */ .cg-support-card__stage{position:relative;display:block} /* translateX(50%) is what makes the split EXACTLY half regardless of how wide the text renders. A fixed pixel offset would drift with the font and quietly become two-thirds on somebody's machine. `right:0` puts the button's right edge on the picture's right edge; the transform then pushes exactly half of it out. */ .cg-support-card__zoom{position:absolute;right:0;bottom:10px;transform:translateX(50%);z-index:2;appearance:none;border:0;border-radius:999px;padding:7px 13px;background:rgba(18,58,82,.86);color:#fff;font:inherit;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap} .cg-support-card__zoom:hover,.cg-support-card__zoom:focus{background:#0786c8;outline:none} .cg-support-card__caption{margin:8px 2px 0;font-size:15px;line-height:1.5;color:#33566b} .cg-support-card-viewer{position:fixed;inset:0;z-index:99999;background:rgba(12,28,40,.9);display:flex;align-items:center;justify-content:center;padding:20px} .cg-support-card-viewer img{max-width:100%;max-height:86vh;border-radius:12px;background:#fff} /* P12, v0.35.0. The enlarged view now shows every picture on the card, because the button used to open only the first of a pair. Side by side on a computer, one above the other when the screen is narrow - the same choice the card itself makes, for the same reason: two halves of a phone-shaped screenshot are too small to read. */ .cg-support-card-viewer--paired{gap:16px;flex-wrap:wrap} .cg-support-card-viewer--paired img{max-width:calc(50% - 8px);max-height:80vh} @media(max-width:640px){.cg-support-card-viewer--paired img{max-width:100%;max-height:40vh}} .cg-support-card-viewer__close{position:absolute;top:16px;right:16px;appearance:none;border:0;border-radius:999px;padding:11px 20px;background:#fff;color:#123a52;font:inherit;font-size:16px;font-weight:800;cursor:pointer} @media(max-width:760px){.cg-support-card{max-width:100%}} /* v0.17.1 desktop tools: three equal cubes side by side, QR inside the middle one. */ .cg-support-desktop-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch} .cg-support-desktop-tools[hidden]{display:none!important} .cg-support-tool-cube{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 14px;border:2px solid #a9d8ec;border-radius:16px;background:#f7fcfe;text-align:center;min-width:0} .cg-support-tool-cube--phone{border-color:#8ecbe6} .cg-support-tool-cube__button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:100%;min-height:104px;padding:14px 12px;border:0;border-radius:13px;background:#087fbd;color:#fff;font:inherit;cursor:pointer;box-shadow:0 6px 15px rgba(7,134,200,.18)} .cg-support-tool-cube__button:hover,.cg-support-tool-cube__button:focus{background:#075f94;outline:3px solid rgba(7,134,200,.2)} .cg-support-tool-cube__button:disabled{opacity:.6;cursor:wait} .cg-support-tool-cube__button strong{display:block;font-size:17px;line-height:1.25} .cg-support-tool-cube__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff;color:#075f94;font-size:22px;font-weight:900} .cg-support-tool-cube__help{margin:0;font-size:14px;line-height:1.45;color:#4a6a7d} /* ⛔⛔ G129, v0.51.0. THE QR IS PART OF ITS CARD, NOT A SEPARATE SQUARE UNDER IT. His design, 15 Sep 2026: "the QR code shouldn't appear as like a separate square underneath the square where it says send a picture from my phone, but actually it should expand the square itself with the bluish background. So basically that whole square for the send a picture from my phone is expanded. And underneath that is like within the expanded part is the QR code, but it's not separate." ⇒ THE PANEL HAS NO BACKGROUND, NO BORDER AND NO CORNERS OF ITS OWN HERE. It is pulled out to the card's edges with negative margins so the card's own bluish fill runs straight through it, and the card simply gets taller. That is the phone and the base case, where cards are stacked and growing disturbs nothing. The DESKTOP case cannot grow the card - see G120 below - and gets the same look a different way. ⛔ BOTH QR PANELS SHARE THIS RULE, which is why it is written against the shared class rather than against either panel (standing rule 11). He was asked and answered: "Yes both." */ .cg-support-tool-cube .cg-support-phone-bridge__panel{width:calc(100% + 28px); margin:12px -14px -16px;padding:2px 14px 16px;border:0;border-radius:0; background:none;box-shadow:none;display:grid;justify-items:center;gap:9px;flex:none} .cg-support-tool-cube .cg-support-phone-bridge__code{width:100%;max-width:196px;height:auto;aspect-ratio:1/1;padding:8px} .cg-support-tool-cube .cg-support-phone-bridge__status{font-size:14px} /* v0.17.2 Send moves beside the message box on desktop too, matching the phone. The distant second Send button below the picture cubes is gone. */ .cg-support-device--desktop .cg-support-chat__message-entry{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:12px;align-items:stretch} .cg-support-device--desktop .cg-support-chat__send{display:inline-flex!important;align-items:center;justify-content:center;align-self:center;height:100%;max-height:220px;min-height:72px;border:0;border-radius:14px;padding:0 16px;background:#0786c8;color:#fff;font:inherit;font-size:17px;font-weight:900;letter-spacing:.02em;cursor:pointer;box-shadow:0 5px 14px rgba(7,134,200,.16)} .cg-support-device--desktop .cg-support-chat__send:hover,.cg-support-device--desktop .cg-support-chat__send:focus{background:#075f94;outline:3px solid rgba(7,134,200,.22);outline-offset:2px} .cg-support-device--desktop .cg-support-chat__send:disabled{opacity:.58;cursor:not-allowed} @media(max-width:620px){.cg-support-device--desktop .cg-support-chat__message-entry{grid-template-columns:minmax(0,1fr) 96px;gap:9px}} /* v0.17.8 - the human-support panel sits under the message box and announces itself once, and the scheduling screen explains its own rule. */ .cg-support-human-escalation{display:grid;gap:9px;justify-items:start;margin:14px 0 4px;padding:16px 18px;border:2px solid #e0b463;border-radius:16px;background:#fffaf0;color:#5f4a24} .cg-support-human-escalation[hidden]{display:none!important} .cg-support-human-escalation strong{font-size:19px;line-height:1.25;color:#7a5700} .cg-support-human-escalation span{font-size:16px;line-height:1.5} .cg-support-human-escalation .cg-support-gateway__button{background:#b3781a;box-shadow:0 6px 16px rgba(179,120,26,.22)} .cg-support-human-escalation .cg-support-gateway__button:hover,.cg-support-human-escalation .cg-support-gateway__button:focus{background:#8a5c12} /* G34, 10 Sep 2026. Two halves, one panel. Exactly one is ever shown: it asks until a request has been raised, then it confirms. Same yellow box either way - the owner asked for the panel to stay and the button to go. */ /* G39, 10 Sep 2026. The rating rides in the SAME box as the summary offer, above it, in the same layout as the End Session panel the owner already approved. One box, not two cards - two stacked cards each carrying buttons is where a customer of 70 stops reading. The rule under it separates the two questions without making a second card of them. */ .cg-support-summary__rating{display:grid;gap:10px;justify-items:start;width:100%;margin:0 0 16px;padding:0 0 16px;border-bottom:2px solid rgba(7,134,200,.18)} .cg-support-summary__rating[hidden]{display:none!important} .cg-support-summary__rating>strong{font-size:20px;line-height:1.25;color:#12466a} .cg-support-summary__rating>span{font-size:15px;line-height:1.5;color:#3c5564} .cg-support-summary__rating .cg-support-end-rating__buttons{display:flex;flex-wrap:wrap;gap:12px;width:100%} .cg-support-summary__rating .cg-support-end-rating__buttons .cg-support-gateway__button{flex:1 1 140px;min-height:56px;font-size:19px} .cg-support-summary__rating .cg-support-end-rating__more{width:100%} .cg-support-summary__rating .cg-support-end-rating__thanks{width:100%} .cg-support-human-escalation__ask,.cg-support-human-escalation__sent{display:grid;gap:9px;justify-items:start;width:100%} .cg-support-human-escalation__ask[hidden],.cg-support-human-escalation__sent[hidden]{display:none!important} .cg-support-human-escalation__sent strong{font-size:19px;line-height:1.25;color:#7a5700} .cg-support-human-escalation__sent span{font-size:16px;line-height:1.5} .cg-support-human-escalation--new{animation:cg-support-attention 1.1s ease-in-out 3} @keyframes cg-support-attention{0%,100%{box-shadow:0 0 0 0 rgba(179,120,26,0)}50%{box-shadow:0 0 0 7px rgba(179,120,26,.20)}} @media(prefers-reduced-motion:reduce){.cg-support-human-escalation--new{animation:none;box-shadow:0 0 0 5px rgba(179,120,26,.22)}} .cg-support-schedule__rule{margin:0 0 18px;padding:16px 18px;border:1px solid #cfe2ec;border-left:5px solid #0786c8;border-radius:12px;background:#f4faff;font-size:17px;line-height:1.55;color:#2c5468;display:grid;gap:6px} .cg-support-schedule__rule strong{font-size:19px;color:#12466a} .cg-support-schedule__warning{margin:10px 0 0;padding:12px 14px;border-radius:12px;background:#fff0f0;border:1px solid #f0caca;color:#8a2b2b;font-size:16px;line-height:1.5} .cg-support-schedule__warning[hidden]{display:none!important} @media(max-width:760px){.cg-support-human-escalation{padding:15px 14px}.cg-support-human-escalation strong{font-size:18px}.cg-support-schedule__rule{padding:14px}} /* v0.17.9 - End Support Session belongs to the whole workspace, not only the chat, so a customer on the scheduling screen is never trapped in a session. */ .cg-support-session-end{margin:0 auto;padding:16px clamp(22px,5vw,64px) 26px;max-width:980px;width:100%} .cg-support-session-end[hidden]{display:none!important} .cg-support-session-end .cg-support-chat__end-confirm{max-width:640px} /* ⛔ C5 COMPLETED, v0.35.0. THE .cg-support-card__marker RULES THAT STOOD HERE ARE GONE - the circle, its label, and the four label positions (above, below, left, right). Nothing draws a marker any more: the server stopped sending coordinates and the renderer stopped reading them in the same version. Circles are part of the approved picture itself, by the owner's decision of 5 Sep 2026. DO NOT REINSTATE. The wording of the rule they served, kept because it is still the design: a marker label sits where the picture's own entry says, so it never parks on text the customer is trying to read. */ /* v0.21.0 - two layout changes asked for by the owner, 6 Sep 2026. 1. The website's own top bar folds away while the chatbot is open, and comes back when the pointer goes to the top of the screen. It is the theme's bar, not this plugin's, so it is only ever moved - never restyled and never removed - and it is always put back when the chatbot closes. 2. The chatbot itself is wider. The empty space each side is halved. */ .cg-support-header-collapsed{transition:transform .18s ease} @media(min-width:900px){ /* v0.21.3: fully out of the way, and out of the page flow entirely, so it leaves no empty white band where it used to sit. It was sticky with a 10px sliver showing; the MENU handle is the thing to aim at now, so the sliver was only clutter. v0.21.4: top stays at 0 WHILE FOLDED. Pushing it down 32px to clear the admin bar and then moving it up by its own height left 32px of its bottom edge back on screen - which is exactly the strip the owner kept seeing. The admin-bar offset belongs on the open state only. */ /* v0.21.5: the gap is MEASURED, not guessed. --cg-admin-offset is set from the real admin bar height when the bar is collapsed, and removed again on restore. Any margin the theme puts above its own header is zeroed too, or the menu drops down hanging in mid-air instead of sitting flush. */ .cg-support-header-collapsed{position:fixed;top:0;left:0;right:0;z-index:900;margin-top:0;transform:translateY(-100%)} .cg-support-header-collapsed:hover, .cg-support-header-collapsed:focus-within, .cg-support-header-collapsed.cg-support-header-collapsed--peek{top:var(--cg-admin-offset,0px);transform:translateY(0)} /* v0.21.6: the 32px band, MEASURED with the owner's console diagnostic on 6 Sep 2026 rather than guessed at a fifth time. The wrapper itself was never wrong: header#masthead measured top = 32, exactly the admin bar's height, and measuredHeaderTopMinusExpected = 0. Inside it, the theme's own sticky bar (div.ast-primary-header-bar.ast-sticky-active) carries an INLINE top: 32px written by Astra's sticky-header script, and it measured top = 64. Because the wrapper carries a transform it is the containing block for its fixed children, so the theme's 32px is added to the wrapper's 32px instead of replacing it. The wrapper's background is transparent and the bar's is white, so the 32px between them showed the page through - the strip in the owner's two screenshots. The bar's offset is already handled by the wrapper, so inside a collapsed header it must be zero. !important because Astra's value is an inline style with no priority, and it is rewritten on every scroll event. The rule is scoped to .cg-support-header-collapsed, so it stops applying the moment the chatbot puts the header back. The two optional Astra bars are listed for the same reason; neither is enabled on this site, and top has no effect on them unless they are positioned. */ .cg-support-header-collapsed .ast-primary-header-bar, .cg-support-header-collapsed .ast-above-header-bar, .cg-support-header-collapsed .ast-below-header-bar{top:0!important} } /* Break out of whatever the theme wraps the page in, so the chat can be as wide as the screen sensibly allows. Desktop only - the phone layout is already full width and is not touched. */ @media(min-width:900px){ .cg-support-gateway{width:min(96vw,1640px);max-width:none;margin-left:50%;transform:translateX(-50%)} .cg-support-workspace__body{max-width:1440px} .cg-support-chat__messages{max-height:60vh} } /* v0.21.1 - two changes asked for by the owner, 6 Sep 2026. 1. A visible handle for the folded-away menu, so nobody has to discover it. 2. Four equal tools in one row, the handoff among them. */ /* The handle. The plugin's own element, fixed to the top of the screen - the theme's bar is still never written into. */ .cg-support-header-peek{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:99998;display:flex;align-items:center;gap:8px;padding:6px 18px 8px;border:1px solid #cde5f1;border-top:0;border-radius:0 0 14px 14px;background:#fff;color:#075f94;font:inherit;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1;cursor:pointer;box-shadow:0 6px 16px rgba(18,60,86,.16)} .cg-support-header-peek:hover,.cg-support-header-peek:focus{background:#eaf7fd;color:#0b5c8c} .cg-support-header-peek__chevron{font-size:12px;line-height:1} .cg-support-header-peek[hidden]{display:none!important} @media(max-width:899px){.cg-support-header-peek{display:none!important}} /* Four across, equal, with the help text lined up whatever its length. */ @media(min-width:900px){ .cg-support-tool-cube{justify-content:flex-start;height:100%} .cg-support-tool-cube__button{min-height:96px} .cg-support-tool-cube__help{margin-top:auto} } @media(max-width:1100px){ .cg-support-desktop-tools{grid-template-columns:repeat(2,minmax(0,1fr))} } /* v0.21.2. WordPress pins its own admin bar to the very top of the screen at a z-index nothing sensible should fight, so the handle and the sliver of the folded menu were both sitting behind it. A customer never has that bar, but the owner tests as an administrator and must be able to see this working. WordPress puts .admin-bar on the body only when the bar is actually there. */ body.admin-bar .cg-support-header-peek{top:32px} @media screen and (max-width:782px){body.admin-bar .cg-support-header-peek{top:46px}} /* G4, v0.22.0 - take these steps with you. Print leads, email second: a barn with no cell signal is common on a farm, and paper does not go flat. */ .cg-support-chat__errand{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:14px 0 4px} .cg-support-chat__errand-button{appearance:none;border:2px solid var(--cg-blue,#0786c8);background:var(--cg-blue,#0786c8);color:#fff;border-radius:12px;padding:14px 22px;font:inherit;font-size:17px;font-weight:800;cursor:pointer;min-height:52px} .cg-support-chat__errand-button:hover,.cg-support-chat__errand-button:focus{background:var(--cg-blue-dark,#075f94);border-color:var(--cg-blue-dark,#075f94);color:#fff} .cg-support-chat__errand-button[disabled]{opacity:.6;cursor:default} .cg-support-chat__errand-button--secondary{background:#fff;color:var(--cg-blue-dark,#075f94)} .cg-support-chat__errand-button--secondary:hover,.cg-support-chat__errand-button--secondary:focus{background:#eef8fd;color:var(--cg-blue-dark,#075f94)} .cg-support-chat__errand-status{flex-basis:100%;font-size:15px;color:#4b687a} /* Printing puts ONE message on the paper - the steps they are taking out to the equipment - not the whole conversation, and none of the website around it. */ @media print{ body.cg-support-printing *{visibility:hidden!important} body.cg-support-printing .cg-support-chat__message--printing, body.cg-support-printing .cg-support-chat__message--printing *{visibility:visible!important} body.cg-support-printing .cg-support-chat__message--printing{position:absolute;left:0;top:0;width:100%;padding:0;font-size:15pt;line-height:1.5;color:#000} body.cg-support-printing .cg-support-chat__message--printing .cg-support-chat__label, body.cg-support-printing .cg-support-chat__message--printing .cg-support-chat__errand{display:none!important} body.cg-support-printing .cg-support-chat__message--printing img{max-width:60%!important;height:auto} } /* G13, v0.22.1 - which address the code is going to, before it goes. The address is the thing to read, so it is the biggest thing on screen. */ .cg-support-confirm-email[hidden]{display:none!important} .cg-support-confirm-email{padding:22px;border-radius:14px;background:#f4faff;border:1px solid #d6eaf5;margin-bottom:22px} .cg-support-confirm-email__lead{margin:0 0 6px;font-size:17px;color:#4b687a} .cg-support-confirm-email__address{margin:0 0 18px;font-size:clamp(22px,3vw,30px);font-weight:800;color:#12354d;word-break:break-all} /* C3, v0.22.1 - two pictures on one card, "smaller when paired". Side by side on a computer, stacked on a phone, where side by side would make each one too small to read. */ /* ⛔ P12, v0.35.0. A PAIRED CARD IS WIDER THAN A SINGLE ONE, and this is arithmetic rather than taste. P3 took the card to 240px on the owner's own measurement, which is right for ONE picture. Split in two that leaves about 115px each, while the TAP TO ENLARGE button is about 150px - so the control was physically wider than either picture it sat on, which is what he saw. ⛔ SINGLE CARDS STAY AT 240px. That passed live and is not being reopened. The class is set in renderVisualCards() rather than with :has(), which would silently do nothing on an older browser and leave the pictures squeezed. */ .cg-support-card--paired{max-width:464px}/* P15, v0.38.0: 380px of picture plus the same 84px of side room as the single card. WAS 388px under P14, which only needed 8px because the button hung downwards. */ .cg-support-card__frame--paired{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap} .cg-support-card__frame--paired img{flex:1 1 calc(50% - 5px);min-width:0;width:auto;max-width:calc(50% - 5px);max-height:200px} @media(max-width:640px){ .cg-support-card__frame--paired img{flex-basis:100%;max-width:100%} } /* G4 second half, v0.22.4 - the end-of-call summary offer. Hidden until the assistant has actually written one, so nobody is offered something that does not exist. */ .cg-support-summary[hidden]{display:none!important} .cg-support-summary{margin:0 0 18px;padding:20px;border-radius:14px;background:#f4faff;border:1px solid #d6eaf5} .cg-support-summary__lead{margin:0 0 14px;font-size:18px;line-height:1.5;color:#284e67} .cg-support-summary__status{margin-top:10px;font-size:15px;color:#4b687a} /* --------------------------------------------------------------------------- G3 / G20 / G24, v0.22.6. Voice input, on a computer only. G24: the owner removed this from phones and tablets on 7 Sep 2026 after trying it on his iPhone and iPad - every small-screen keyboard already has a dictation key, and the people who want to talk to their phone already use it. The script never reveals the button or the notice off a desktop, so all the mobile rules that used to live here are gone rather than merely unused. G20: the word and the microphone are bigger. THE BUTTON IS NOT. That was asked for precisely, and the point is legibility at arm's length for a customer in their seventies, not a larger control. ------------------------------------------------------------------------ */ .cg-support-voice-notice{margin:0 0 12px;padding:14px 16px;border:2px solid #0786c8;border-left-width:8px;border-radius:12px;background:#eaf6fd;color:#0a3f5e} .cg-support-voice-notice strong{display:block;font-size:18px;font-weight:900;line-height:1.4} .cg-support-chat__mic{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:2px solid #0786c8;border-radius:14px;background:#fff;color:#075f94;font:inherit;font-weight:900;letter-spacing:.02em;cursor:pointer;padding:0 8px} .cg-support-chat__mic[hidden]{display:none!important} .cg-support-chat__mic-icon{width:34px;height:34px;display:block;flex:none} .cg-support-chat__mic-label{font-size:18px;line-height:1} .cg-support-chat__mic:hover,.cg-support-chat__mic:focus{background:#eaf6fd;outline:3px solid rgba(7,134,200,.22);outline-offset:2px} .cg-support-chat__mic:disabled{opacity:.58;cursor:not-allowed} /* Listening. The word changes as well as the colour - a colour on its own is easy to miss, and some of these customers are colour blind. */ .cg-support-chat__mic.is-listening{background:#b3261e;border-color:#b3261e;color:#fff;animation:cg-mic-pulse 1.4s ease-in-out infinite} @keyframes cg-mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(179,38,30,.45)}50%{box-shadow:0 0 0 10px rgba(179,38,30,0)}} @media(prefers-reduced-motion:reduce){.cg-support-chat__mic.is-listening{animation:none}} .cg-support-chat__mic-status{margin:8px 0 0;font-size:16px;font-weight:700;color:#0a3f5e} .cg-support-chat__mic-status[hidden]{display:none!important} /* The button keeps the width it had; only its contents grew. */ .cg-support-device--desktop .cg-support-chat__message-entry.has-mic{grid-template-columns:minmax(0,1fr) 104px 132px} .cg-support-device--desktop .cg-support-chat__message-entry.has-mic .cg-support-chat__mic{align-self:center;height:100%;max-height:220px;min-height:72px} @media(max-width:620px){.cg-support-device--desktop .cg-support-chat__message-entry.has-mic{grid-template-columns:minmax(0,1fr) 92px 96px;gap:9px}.cg-support-chat__mic-label{font-size:16px}.cg-support-chat__mic-icon{width:28px;height:28px}} /* --------------------------------------------------------------------------- G27, v0.22.7. The summary offer, at the end of a conversation and nowhere else. The quiet always-on line from v0.22.6 is gone - it was still too early, and the owner found it offering a summary on a restored job before he had said a word. There is now one appearance and it is the card, shown only when the call has actually ended. Two places wear it: in the chat when the assistant finishes, and in the End Support Session panel when the customer says they are leaving. The second depends on nothing the model remembers, and it is what stops this becoming a dead end again. ------------------------------------------------------------------------ */ .cg-support-summary{margin:0 0 14px;padding:16px;border:2px solid #0786c8;border-radius:12px;background:#eaf6fd} .cg-support-summary[hidden]{display:none!important} .cg-support-summary__lead{margin:0 0 10px;font-size:18px;font-weight:800;line-height:1.4;color:#0a3f5e} .cg-support-summary__button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 20px;border:0;border-radius:14px;background:#0786c8;color:#fff;font:inherit;font-size:17px;font-weight:900;letter-spacing:.02em;cursor:pointer;box-shadow:0 5px 14px rgba(7,134,200,.16)} .cg-support-summary__button:hover,.cg-support-summary__button:focus{background:#075f94;color:#fff;outline:3px solid rgba(7,134,200,.22);outline-offset:2px} .cg-support-summary__button:disabled{opacity:.58;cursor:not-allowed} .cg-support-summary__status{margin-top:8px;font-size:15px;font-weight:700;color:#0a3f5e} /* The same offer, made where the customer said they were leaving. It sits above the end buttons because the summary has to be sent before the conversation is destroyed. */ .cg-support-end-summary{margin:0 0 14px;padding:16px;border:2px solid #0786c8;border-radius:12px;background:#fff;text-align:left} .cg-support-end-summary[hidden]{display:none!important} .cg-support-end-summary strong{display:block;font-size:18px;font-weight:900;line-height:1.4;color:#0a3f5e;margin-bottom:6px} .cg-support-end-summary span{display:block;font-size:16px;line-height:1.5;color:#0a3f5e;margin-bottom:12px} /* --------------------------------------------------------------------------- G25, v0.22.6. "This is much easier on a computer." Shown on a phone or a tablet, before the customer types their problem out. The tools a real fix needs run on Windows and a Mac and nowhere else, so starting on a phone means reaching a step they cannot perform after telling the whole story. Deliberately loud, and deliberately dismissible. It is advice, not a wall. ------------------------------------------------------------------------ */ .cg-support-device-advice{margin:0 0 16px;padding:16px 18px;border:3px solid #b3261e;border-radius:14px;background:#fdeceb;color:#5c1512} .cg-support-device-advice[hidden]{display:none!important} .cg-support-device-advice strong{display:block;font-size:22px;font-weight:900;line-height:1.3;margin-bottom:8px} .cg-support-device-advice p{margin:0 0 12px;font-size:17px;line-height:1.5} .cg-support-device-advice__dismiss{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border:2px solid #5c1512;border-radius:14px;background:#fff;color:#5c1512;font:inherit;font-size:17px;font-weight:900;cursor:pointer} .cg-support-device-advice__dismiss:hover,.cg-support-device-advice__dismiss:focus{background:#5c1512;color:#fff;outline:3px solid rgba(179,38,30,.25);outline-offset:2px} @media(max-width:430px){.cg-support-device-advice{padding:14px}.cg-support-device-advice strong{font-size:20px}.cg-support-device-advice p{font-size:16px}} /* --------------------------------------------------------------------------- G28, v0.22.7. The way out, shown when a lookup finds nothing. Until now every answer on this screen was identical so that nobody could discover which addresses belong to customers. The owner hit the cost of that himself - told a code had been sent for an address on no file, waiting for something that could not arrive - and decided the protection was not worth it here. So the screen now says plainly what happened, and this block puts the next step directly under the box he just typed into. ------------------------------------------------------------------------ */ .cg-support-lookup-failed{margin:14px 0 0;padding:16px 18px;border:2px solid #b3261e;border-radius:12px;background:#fdeceb;color:#5c1512} .cg-support-lookup-failed[hidden]{display:none!important} .cg-support-lookup-failed strong{display:block;font-size:19px;font-weight:900;line-height:1.3;margin-bottom:8px} .cg-support-lookup-failed p{margin:0 0 12px;font-size:16px;line-height:1.5} /* G33, 10 Sep 2026. THE END-OF-CALL QUESTION, AND IT HAS TO BE UNMISSABLE. The owner: "It has to be always asked at the end and in a way that it's very visible to see it, and not just ignore it or kinda miss it." It is skippable by his decision - a forced answer produces yes-clicks that mean nothing - so everything here is doing the work that a forced choice would otherwise do. The audience is farmers, many 60 to 70, on a screen they use rarely. Large targets, high contrast, and it sits above the summary offer because the summary is a convenience and this is the data he called critical. */ .cg-support-end-rating{ border:3px solid #1d4ed8; border-radius:10px; background:#eff6ff; padding:18px 18px 16px; margin:0 0 16px; } .cg-support-end-rating>strong{ display:block; font-size:20px; line-height:1.3; margin-bottom:6px; color:#0b1f4d; } .cg-support-end-rating>span{ display:block; font-size:15px; color:#33415c; margin-bottom:14px; } .cg-support-end-rating__buttons{ display:flex; gap:12px; flex-wrap:wrap; } /* Two equal halves, so neither answer is the easier one to press. A yes that is bigger than the no would quietly buy better numbers and worse information. */ .cg-support-end-rating__buttons .cg-support-gateway__button{ flex:1 1 140px; min-height:56px; font-size:19px; } /* G54, v0.27.0. THESE TWO WERE MISSING FROM A LIST OF TWENTY-THREE. The owner saw the "tell us what we could have done better" box ALREADY OPEN before he had pressed Yes or No. Both blocks are written with the `hidden` attribute, and every other block in this file that relies on `hidden` also carries an explicit display:none!important rule - twenty-three of them. That convention exists because a plain [hidden] is not reliable inside the page's own theme, and these two classes were simply never added to it. Do not remove these rules on the grounds that `hidden` should be enough. */ .cg-support-end-rating__more[hidden]{display:none!important} .cg-support-end-rating__thanks[hidden]{display:none!important} .cg-support-end-rating__more{margin-top:14px;} .cg-support-end-rating__more label{ display:block; font-size:15px; margin-bottom:6px; color:#33415c; } .cg-support-end-rating__more textarea{ width:100%; font-size:16px; /* 16px or iOS zooms the whole page on focus. */ padding:10px; border:2px solid #c3ccdb; border-radius:8px; } .cg-support-end-rating__thanks{ margin-top:12px; font-size:16px; font-weight:600; color:#14532d; } /* ⛔⛔ G119, v0.51.0. REVERTED. THE LAUNCHER IS BACK UNDER THE CHAT, WHERE v0.48.0 HAD IT, AND IT IS PLAIN .cg-support-chat__end-link AGAIN (lines 165 and 172) - a big red link, nothing special. There is no .cg-support-chat__end-launch rule any more and there must not be one. His instruction, 15 Sep 2026: "It already was perfect the way it was before several versions ago. When it was underneath the chat and nice and red. Then you fucked it up on your own decision. And now we just keep fixing it. I just want it back the way it was several versions ago. When it was at the bottom. Nice big red button." ⛔ WHAT WENT: an absolutely-positioned cube in the left margin at >=900px with a clamped width and a measured offset, a 10px three-line label, and a full-width fallback under the typing box on phones. It is all in the v0.50.1 history if it is ever wanted again. ⛔ DO NOT REBUILD IT FROM THIS COMMENT. ⚠ THREE LINES FROM THAT WORK ARE DELIBERATELY KEPT, AND IT IS THE ONE JUDGEMENT CALL IN THE REVERT. overflow:visible replaced the overflow:hidden that had clipped the margin button off the screen. The button no longer needs it - but the G120 tool panels are position:absolute and drop BELOW their cube, and G129 makes a cube grow downwards when it opens. Restoring the clip would risk cutting those off at the chat box's edge: the same invisible-element fault that cost v0.50.0 a whole version, and the browser test would not catch it unless it asked what is painted. The clip's only job was the 18px corners and the two child rules hand those straight back, so keeping it visible changes nothing a customer can see. ⛔ RE-INTRODUCING overflow:hidden HERE MEANS RE-MEASURING THE QR PANEL AT THE BOTTOM OF THE CHAT WITH elementFromPoint(), not just looking at it. */ .cg-support-chat{overflow:visible} .cg-support-chat__messages{border-radius:17px 17px 0 0} .cg-support-chat__composer{border-radius:0 0 17px 17px} /* ⛔⛔ G120, v0.50.0. ONLY THE TOOL THAT WAS OPENED GROWS. He found it opening the QR: "all of the other functions got longer as well. Is there a way to make only that specific square get longer while keeping the other ones the same?" THE CAUSE WAS TWO LINES PULLING TOGETHER: the row is display:grid with align-items:stretch, and .cg-support-tool-cube carried height:100%. Between them every cube was forced to the height of the tallest. ⛔ BOTH HAD TO CHANGE - changing one and leaving the other does nothing visible, which is exactly the shape of a half-fix that gets reported as "still broken". ⚠ AND THE CLOSED STATE WAS CHECKED BEFORE SHIPPING, because sizing to content could have left four ragged boxes in ordinary use, which would be a worse screen than the fault: the cubes keep a min-height so the row stays level with nothing open, and only a cube with a panel inside it grows past it. ⚑ TWO PANELS DO THIS, NOT ONE (standing rule 11): the handoff QR under TAKE THIS CONVERSATION WITH YOU and the phone-bridge QR under SEND A PICTURE FROM MY PHONE. The fix is on the ROW, so it covers both by construction. */ @media(min-width:900px){ /* ⛔⛔ THE FIRST BUILD OF THIS FIX WAS WRONG AND IS RECORDED SO IT IS NOT TRIED AGAIN. Sizing the cubes to their own content - align-items:start plus height:auto - did stop the stretching, and left the row RAGGED with nothing open: measured 232 / 203 / 224 / 203 at 1600x900, because the four help lines are different lengths. That is a worse screen than the fault, and it is exactly the risk written into G120's row before a line was built. ⇒ THE ROW KEEPS ITS EQUAL HEIGHTS. What changes is the PANEL: an open QR is lifted out of the flow, so it cannot push its own cube taller and the other three have nothing to match. Nothing moves at all. ⚑ ONE RULE COVERS BOTH PANELS BY CONSTRUCTION (standing rule 11) - the handoff QR and the phone-bridge QR share .cg-support-phone-bridge__panel, so there is no second place to forget. */ .cg-support-tool-cube{position:relative} /* ⛔⛔ G129 AND G120 PULL IN OPPOSITE DIRECTIONS HERE, AND THIS IS WHERE THEY ARE RECONCILED. G129 wants the card to LOOK like it grew; G120 forbids it from ACTUALLY growing, because a taller card makes the row re-stretch and he confirmed that fixed. So the panel stays out of the flow and is painted with the card's own fill and border instead: same background, same 2px edge, no top border, and only the bottom corners rounded. The card squares off its own bottom corners while open (--open, set by setToolPanelOpen in the JS) and the panel covers the 2px bottom border it leaves behind, so the join is invisible and the two read as one card. ⛔ left/right are -2px, not 0: absolute offsets resolve against the PADDING box, so 0 would inset the panel by the card's own border and leave a step. ⛔ #8ecbe6 is .cg-support-tool-cube--phone's border colour, not the plain cube's #a9d8ec. Only --phone cubes carry a QR. If a panel is ever added to a plain cube, this rule needs splitting - it will look a shade wrong, not broken, which is the kind of thing nobody notices for a month. ⛔ MEASURE ALL FOUR CARD HEIGHTS OPEN AND CLOSED BEFORE CALLING THIS DONE. G120's first build passed by eye and left the row ragged at 232/203/224/203. */ .cg-support-tool-cube--open{border-bottom-left-radius:0;border-bottom-right-radius:0} .cg-support-tool-cube .cg-support-phone-bridge__panel{position:absolute; left:-2px;right:-2px;top:100%;z-index:4;width:auto;margin:0; padding:2px 14px 16px;background:#f7fcfe;border:2px solid #8ecbe6;border-top:0; border-radius:0 0 16px 16px;box-shadow:0 14px 26px rgba(18,60,86,.14)} }