/* THE FLOATING "LIVE AI sales rep" BUBBLE.
 *
 * ⚑ HIS DECISION, 15 Sep 2026. And the people who will tap it are farmers,
 * many aged 60 to 70, often outdoors on a phone in bright light. So: a large
 * target, real contrast, no thin grey text, and nothing that depends on
 * noticing a small icon.
 *
 * ⛔ IT MUST NOT SIT ON TOP OF ANYTHING HE NEEDS TO TAP - and on a phone that
 * is a live constraint, not a worry: a floating control in the bottom-right
 * corner is exactly what covers a form's submit button, which he hit on
 * 14 Sep 2026.
 *
 * ⚠ THIS PARAGRAPH USED TO SAY "on a phone it becomes a full-width bar at the
 * bottom". IT IS OUT OF DATE AND THE BAR IS NOT COMING BACK: he used it and
 * reversed it on 18 Sep (B78) - *"I actually want to change it on the phone to
 * an actual bubble and not just a bar at the bottom... the picture of the rep
 * itself with the words live AI sales rep, with that green flashing thing, all
 * in one bubble."* **The risk the bar was avoiding is real and is now handled
 * by the safe-area inset at the foot of this file instead.**
 *
 * ⛔⛔ AND SINCE B90 THERE IS ONE DESIGN AT EVERY WIDTH: a 145px round bubble,
 * the rep's face filling it, the words in a band across the bottom. The layout
 * is his, approved from a true-size mock-up -
 * sales/reference/B78-phone-bubble-APPROVED-layout.png. */

.cg-sales-bubble {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
    font-size: 1.0625rem;
}

/* ⛔ B57, HIS INSTRUCTION 17 Sep 2026: "make the bubble like 20% bigger".
   ⚠ IT WAS THE THIRD ASK IN ONE SENTENCE - with the flashing light and the
   support-page exclusion - and none of the three was written down at the time.
   The other two he chased; this one he had not noticed yet.
   ⚑ IT PRODUCED 67px, AND B90 THEN REPLACED THE PILL WITH A 145px CIRCLE. The
   instruction is not lost - it is more than doubled - but the number it set is
   no longer in this file, so the suite asserts 145px as the size AND as a floor
   well above his 67px. Do not let a later change take the circle below it. */

/* ⛔ B90: ONE ROUND BUBBLE, AT EVERY WIDTH. 145px measured off his approved
   drawing, which spans about 37% of the viewport on a 390px screen. An exact
   number, because it is a judgement he made by eye and a range around one is
   just room to undo it (rule 15).
   ⚠ B57's "20% bigger" is comfortably satisfied and then some - 145px against
   the 67px that instruction produced - so that ask is not lost here. */
.cg-sales-bubble__button {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 145px;
    height: 145px;
    padding: 0;
    gap: 0;
    border: 3px solid #12324f;
    border-radius: 50%;
    background: #fff;
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.cg-sales-bubble__button:hover,
.cg-sales-bubble__button:focus-visible {
    background: #1b4a72;
}

/* A visible focus ring, because some people drive this from the keyboard and a
   ring that only appears on hover is no ring at all. */
.cg-sales-bubble__button:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }

/* ⚑ B47, 17 Sep 2026. THE BUTTON IS AN <a> NOW, NOT A <button>, because the
   bubble opens the chat's own page instead of unfolding a panel. A theme's link
   styles would otherwise underline it and repaint it its own colour. */
.cg-sales-bubble--link .cg-sales-bubble__button,
.cg-sales-bubble--link .cg-sales-bubble__button:hover,
.cg-sales-bubble--link .cg-sales-bubble__button:focus,
.cg-sales-bubble--link .cg-sales-bubble__button:visited {
    text-decoration: none;
    color: #fff;
}

/* ⛔ B54, HIS INSTRUCTION 17 Sep 2026: "the green light on the bubble has to be
   flashing" - and he had asked once before, in the same breath as B53 and B57,
   and it was never written down.

   ⚑ THE OLD COMMENT SAID "Decoration only - the word LIVE is in the text, so
   nothing here is carried by colour alone." HALF OF THAT IS STILL TRUE AND IS
   THE HALF THAT MATTERS: the word LIVE stays in the text, because a flashing
   colour is exactly what a colour-blind or low-vision customer cannot read.
   ⚠ WHAT CHANGED IS THE OTHER HALF. It is no longer only decoration - it is now
   the thing that makes the bubble catch the eye at all, which is what he asked
   it to do. Do not restore "decoration only" without restoring the static dot
   with it. */
.cg-sales-bubble__dot {
    /* B90: sized for the band, not for a pill of 1.275rem text. */
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.3);
    animation: cgSalesPulse 1.6s ease-in-out infinite;
}

@keyframes cgSalesPulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.30); }
    50%      { opacity: .35; box-shadow: 0 0 0 8px rgba(46, 204, 113, 0.00); }
}

/* ⛔ AND IT STOPS FOR ANYBODY WHO HAS ASKED THEIR DEVICE TO STOP THINGS MOVING.
   A flashing element is a real problem for some people and switching it off for
   them costs nothing - the microphone's pulse on the chat page already does
   this, and one of the two doing it would be the same rule implemented twice
   and obeyed once (CLAUDE.md rule 11). */
@media (prefers-reduced-motion: reduce) {
    .cg-sales-bubble__dot { animation: none; }
}

.cg-sales-bubble__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.75rem);
    width: min(24rem, calc(100vw - 2rem));
    max-height: min(32rem, calc(100vh - 6rem));
    overflow-y: auto;
    padding: 0.75rem;
    border: 2px solid #12324f;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.cg-sales-bubble__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: #12324f;
}

.cg-sales-bubble__close {
    min-height: 44px;
    padding: 0.4rem 0.9rem;
    border: 2px solid #12324f;
    border-radius: 8px;
    background: #fff;
    color: #12324f;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

/* Dark mode is not guessed at: the page behind this is his own site, and a
   panel that inverts on its own would stop matching it. */


/* ⛔⛔ THE PANEL RULES ABOVE ARE DEAD AS OF 17 Sep 2026 (B47) AND ARE KEPT
   DELIBERATELY, not by accident. The bubble no longer contains the chat; it is
   a link to the chat's own page. His decision, after using the panel: "I was
   envisioning something similar in nature to the tech support chatbot, which
   lives on a separate, its own page."

   ⚠ THEY ARE KEPT BECAUSE A CACHED PAGE CAN STILL CARRY THE OLD MARKUP for as
   long as a visitor's browser holds it, and an unstyled half-open panel is a
   worse first impression than a stale one. Delete them once nobody can be
   holding a page older than this version - not before.

   ⛔ DO NOT "RESTORE" THE PANEL BY WIRING IT BACK UP. */


/* ⛔⛔ B55: THE SALES REP'S FACE, AS A HALF CIRCLE ON TOP OF THE BUBBLE.
 *
 * ⚑ HIS DESIGN, 17 Sep 2026, shown from his own screen: "add the picture of
 * this AI rep that the other Claude made for the tech support. I'm okay with the
 * same dude... add him like as a half circle. His picture is a half circle
 * above, right on top of the live AI sales rep bubble."
 *
 * ⛔ THE FILE IS THIS PLUGIN'S OWN COPY - `assets/cg-sales-rep.png`, resized
 * from 640px/411KB to 160px/38KB. It is NOT linked from the tech support
 * plugin: deactivating Support, or a later version moving that file, would
 * break the sales bubble on every page of the website, and the two products are
 * meant to share nothing but the equipment knowledge. A shared file path is a
 * dependency nobody wrote down.
 *
 * ⚠ AND THE SIZE MATTERS BECAUSE THIS LOADS ON EVERY PAGE VIEW, on farm
 * connections. 160px is twice the largest size it is ever drawn at, so it stays
 * sharp on a retina screen and costs a tenth of the original.
 *
 * ⛔ THE HONEST DISCLOSURE STAYS. The label still says LIVE AI sales rep, in
 * words. A face beside those words is a representative; the wording is what
 * stops it reading as a claim that a human is waiting. Do not soften the label
 * to make the picture sit more comfortably.
 */
/* ⛔⛔ B90, 18 Sep 2026: A FULL CIRCLE, AT EVERY WIDTH. THE HALF CIRCLE IS
 * RETIRED AND MUST NOT BE RESTORED ON EITHER SCREEN.
 *
 * ⚡ HIS REPORT: *"still wonky looking on the computer because as you can see
 * it's cut off the agent where it says AI and there's a little shield there -
 * that whole part at the bottom is cut off and it needs to be lifted up."*
 * sales/reference/B90-desktop-face-cut-off.jpg.
 *
 * ⚑ THE CAUSE WAS MINE, FROM EARLIER THE SAME DAY. B68 took the face from
 * 2.7rem to 8rem, the parent clipped it to a half circle, and a
 * `translateY(-0.6rem)` was added to pull his FACE into the visible half. That
 * pushed the bottom of the artwork - the shield and the "AI…" speech bubble,
 * which are part of the composition - down behind the pill. **The shape only
 * ever worked while it was too small to see: at 2.7rem a half circle read as a
 * head peeking over the pill; at 8rem it reads as a picture with its bottom
 * third chopped off.**
 *
 * ✅ HIS ANSWER, ASKED DIRECTLY - *"Should the computer just do the same - a
 * full circle instead of a half one on top of the pill?"* - was **"Yes"**, and
 * it reverses his own B55 design (*"add him like as a half circle"*). He made
 * that call after seeing it at full size. DO NOT RESTORE THE HALF CIRCLE.
 *
 * ⛔⛔ AND IT IS NOW ONE DESIGN RATHER THAN TWO. The phone layout he approved
 * from a true-size mock-up (sales/reference/B78-phone-bubble-APPROVED-layout.png)
 * IS the design, and it is now the base rather than an override. The old file
 * warned about exactly what that duplication cost: *"FIVE THINGS MOVE TOGETHER
 * AND THE PHONE BLOCK HOLDS A SECOND COPY OF ALL FIVE."* B90 is what happens
 * when one copy is changed and the other is not.
 *
 * ⚠ 145px AT EVERY WIDTH, AND THE TEXT STAYS 13px. It was drawn and approved at
 * 145px on a 390px screen precisely so the 13px was judged honestly. Scaling it
 * up for a desktop window would ship something he has not seen - the same trap
 * that note already names.
 *
 * ⚠ AND EVERY ONE OF THESE MUST SURVIVE, because they were each asked for
 * separately and three of them were lost once already: B54's flashing dot,
 * B57's 20%-bigger target (145px is far above it), B53's rule that the bubble
 * never appears on Support & Tutorials, and the fact that it stays a real <a>
 * that works with no JavaScript at all.
 */
.cg-sales-bubble__face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
}

.cg-sales-bubble__face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ⛔ NO SHIFT. The old -0.6rem existed only to drag his face out of a crop
       that no longer happens, and it is the line that cut off the shield. */
}

/* ⚠ --faced no longer needs to reserve room above the pill: there is no pill
   and nothing overhangs. Kept as a hook because the markup sets it and a theme
   may key off it. */
.cg-sales-bubble--faced { padding-top: 0; }
.cg-sales-bubble--faced .cg-sales-bubble__button { position: relative; }

/* ⛑ B78 + B90. THE LABEL IS THE BAND ACROSS THE BOTTOM OF THE CIRCLE, clipped
   by the circle itself - 36% of its height, which is what the approved mock-up
   was drawn at. It used to be a row of text inside a pill on a computer and the
   band only on a phone; B90 makes it one thing.
   ⛔ 13px IS THE APPROVED SIZE AND IT IS NOT A DESKTOP OVERSIGHT. He judged it
   at true phone size on purpose. Do not enlarge it to read better in a wide
   window - that ships a different thing from the one he approved. */
.cg-sales-bubble__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 0;
    background: rgba(18, 50, 79, 0.94);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.01em;
}
.cg-sales-bubble__line { display: inline-flex; align-items: center; gap: 0.28rem; }

/* ⛔⛔ DELETED 18 Sep 2026 AND DELIBERATELY NOT REPLACED - a 600px block used to
   sit here trimming the half-circle face to 2.3rem. It described a bubble that
   no longer exists: below 40rem the face now FILLS a round bubble (B78), and
   600px sits INSIDE 40rem, so these rules would have won and quietly restored
   the old half circle on every phone. ⚠ A stale media query is the hardest kind
   of dead code to see, because it only wakes up at one screen width. */

/* ⛔⛔ ON A PHONE IT IS A ROUND BUBBLE IN THE BOTTOM-RIGHT CORNER.
 *
 * ⚠ THIS BLOCK LIVES AT THE END OF THE FILE ON PURPOSE. It overrides the face,
 * the label and the button, and every one of those is defined BELOW where the
 * phone rules used to sit - so there they lost the cascade and the phone kept
 * the desktop half-circle. Measured in a real browser, not assumed.
 *
 * ⛔ THIS REVERSES B15 AND THE REVERSAL IS DELIBERATE. DO NOT RESTORE THE BAR.
 * The full-width bar was chosen on purpose, so a floating control could not
 * overlap the page - the note that used to sit here said exactly that, and he
 * had hit the overlap problem on 14 Sep. ⇒ HE USED THE BAR AND DECIDED
 * OTHERWISE, 18 Sep 2026: "I actually want to change it on the phone to an
 * actual bubble and not just a bar at the bottom... the picture of the rep
 * itself with the words live AI sales rep, with that green flashing thing, all
 * in one bubble."
 *
 * ✅ HIS DRAWING IS THE SPECIFICATION AND IT IS IN THE REPOSITORY:
 * sales/reference/B78-phone-bubble-APPROVED-layout.png, which he approved from
 * a mock-up rendered at TRUE PHONE SIZE - 145px on a 390px screen - precisely
 * so the 13px text was judged honestly. ⚠ DO NOT QUIETLY ENLARGE THE TEXT to
 * make it read better in a desktop window; that would ship a different thing
 * from the one he approved.
 *
 * ⚠ AND THE OLD RISK COMES BACK WITH THE CIRCLE, so this file's opening rule
 * still governs: IT MUST NOT SIT ON TOP OF ANYTHING HE NEEDS TO TAP. Bottom
 * right is where a phone's own browser controls live, so the inset respects
 * the safe area rather than assuming 1rem is enough. */
@media (max-width: 40rem) {
    /* ⛔⛔ WHAT IS LEFT HERE IS ONLY WHAT GENUINELY DIFFERS ON A PHONE, AND THAT
       IS THE POINT OF B90. This block used to hold a SECOND COPY of the face,
       the label, the button and the dot - and the old comment above it said so
       in capitals: *"FIVE THINGS MOVE TOGETHER AND THE PHONE BLOCK HOLDS A
       SECOND COPY OF ALL FIVE."* B90 is exactly what that duplication cost: the
       phone copy was made a full circle and the desktop copy was not.
       ⇒ ONE DESIGN, DEFINED ONCE. Do not move shared rules back in here. */

    /* ⚠ THE ONE REAL DIFFERENCE. Bottom right is where a phone's own browser
       controls live, so the inset respects the safe area rather than assuming
       1rem clears them. This file's opening rule still governs: the bubble must
       not sit on top of anything he needs to tap. */
    .cg-sales-bubble {
        right: 1rem;
        left: auto;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        display: block;
        padding: 0;
        background: transparent;
    }

    /* The dead panel, if a cached page still carries its markup. */
    .cg-sales-bubble__panel {
        position: fixed;
        inset: 0;
        width: auto;
        max-height: none;
        border: 0;
        border-radius: 0;
        padding: 1rem;
    }
}