/* ==========================================================================
   ASK ABOUT THIS PRODUCT - the composer under the description and the chat it opens
   --------------------------------------------------------------------------
   Views/Product/_PdpAsk.cshtml draws the section, pdp-ask.js runs it. Google's AI Mode as the
   model: a pill with a hairline border to type or speak into, a thin streak of colour that runs
   once along that border the first time it comes into view, and a full chat over the page that
   answers - a small pill with a light orbiting its edge while it thinks, then the answer fading in.

   The answers are the AI's (PdpAskController / PdpAskService, from what the store knows of the
   product).
   ========================================================================== */

:root {
    --tc-ask-ink: #0C0C0C;
    --tc-ask-soft: #5F6368;
    --tc-ask-faint: #9AA0A6;
    --tc-ask-surface: #F1F3F4;
    --tc-ask-line: #E8EAED;
    --tc-ask-blue: #1A73E8;
    --tc-ask-border: #D5D8DC;
}

/* ---- the section ---------------------------------------------------------------------- */

.tc-ask {
    position: relative;
    margin: 0;
}

.tc-ask__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.tc-ask__spark {
    flex: none;
    width: 28px;
    height: 28px;
}

.tc-ask__title {
    margin: 0;
    padding: 0;
    font-size: var(--tc-fs-section, 17px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 1.6;
    color: var(--tc-ask-ink);
}

.tc-ask__sub {
    margin: 0;
    font-size: var(--tc-fs-caption, 12px);
    line-height: 1.7;
    color: var(--tc-ask-soft);
}

/* ready questions: one row above the composer, scrolled sideways - the same in the section, the
   sheet and the chat; a tap asks one */
.tc-ask__chips {
    display: flex;
    gap: 8px;
    margin: 0 -16px 12px;
    padding: 0 16px 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tc-ask__chips::-webkit-scrollbar {
    display: none;
}

.tc-ask__chip {
    flex: none;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--tc-ask-line);
    border-radius: 999px;
    background: #FFF;
    font: inherit;
    font-size: var(--tc-fs-caption, 12.5px);
    line-height: 20px;
    color: #3C4043;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.tc-ask__chip:hover {
    border-color: #DADCE0;
    background: #F8F9FA;
}

@media (min-width: 960px) {
    .tc-ask {
        max-width: 760px;
        margin-top: 32px;
    }

    .tc-ask__chips {
        flex-wrap: wrap;
        margin: 0 0 12px;
        padding: 0;
        overflow: visible;
    }

    /* the section under the description: a very light grey ground of its own, barely off the page's white, so it reads as a place to
       ask, not more text; the composer white on it, lifted a little, and the ready questions grey
       pills a shade darker than the ground */
    .tc-ask[data-tc-ask] {
        padding: 24px 24px 22px;
        border-radius: 20px;
        background: #FAFAFB;
    }

    .tc-ask[data-tc-ask] .tc-askc__bg {
        box-shadow: inset 0 0 0 1px #E3E3E8, 0 2px 8px rgba(12, 12, 12, .05);
    }

    .tc-ask[data-tc-ask] .tc-askc:focus-within .tc-askc__bg {
        box-shadow: inset 0 0 0 1px #C4C6CC, 0 2px 10px rgba(12, 12, 12, .08);
    }

    /* the ready questions: one row to the card's edges, scrolled sideways - the wheel and a drag move
       it along (pdp-ask.js sideways()); they fade out at the card's edges where the row runs on */
    .tc-ask[data-tc-ask] > .tc-ask__chips {
        flex-wrap: nowrap;
        margin: 0 -24px 14px;
        padding: 0 24px 2px;
        overflow-x: auto;
        scrollbar-width: none;
        user-select: none;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    }

    .tc-ask[data-tc-ask] > .tc-ask__chips.is-dragging,
    .tc-ask[data-tc-ask] > .tc-ask__chips.is-dragging .tc-ask__chip {
        cursor: grabbing;
    }

    .tc-ask[data-tc-ask] > .tc-ask__chips .tc-ask__chip {
        border-color: transparent;
        background: #E8E8EC;
        color: #303236;
    }

    .tc-ask[data-tc-ask] > .tc-ask__chips .tc-ask__chip:hover {
        border-color: transparent;
        background: #DEDEE3;
        color: #0C0C0C;
    }
}

/* phones: the composer at the end of each tab of the «مشخصات و بررسی کالا» sheet (_PdpmSheets). It
   keeps its place under the text, but shows only once the sheet has taken the whole screen: it
   rises in as the sheet goes up, and goes as it comes down (then pdp-ask.js runs its streak) */
.tc-sheet-ask {
    margin: 32px 0 calc(8px + env(safe-area-inset-bottom));
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.tc-sheet.is-full .tc-sheet-ask {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .35s ease .15s, transform .55s cubic-bezier(.25, .1, .15, 1) .1s, visibility 0s;
}

/* the sheet's line above its ready questions and composer */
.tc-sheet-ask__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 22px;
    color: var(--tc-ask-soft);
}

.tc-sheet-ask__hint svg {
    flex: none;
    width: 18px;
    height: 18px;
}

/* phones: the AI's spark at the far end of the brand row, under the photos (ProductTemplate.Simple). It
   opens the chat with the ready questions. Every five seconds it glints once, quietly: the star
   turns a quarter round as it swells a little, fills with Google's colours for a moment, and a
   small star winks beside it - then it is a plain outline again, like the icons around it. */
.tc-askspark {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: -8px 0 -8px -8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #3C4043;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tc-askspark:active {
    background: rgba(60, 64, 67, .08);
}

.tc-askspark svg {
    width: 22px;
    height: 22px;
    overflow: visible;
}

.tc-askspark__fill,
.tc-askspark__line {
    transform-box: fill-box;
    transform-origin: center;
    animation: tc-askspark-turn 5s cubic-bezier(.4, 0, .2, 1) infinite;
}

.tc-askspark__fill {
    opacity: 0;
    animation-name: tc-askspark-turn, tc-askspark-fill;
}

.tc-askspark__line {
    animation-name: tc-askspark-turn, tc-askspark-line;
}

.tc-askspark__twinkle {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: tc-askspark-twinkle 5s ease-out infinite;
}

/* the first glint a couple of seconds after the page shows, then every five */
.tc-askspark__fill,
.tc-askspark__line,
.tc-askspark__twinkle {
    animation-delay: -2s;
}

@keyframes tc-askspark-turn {
    0%, 78% { transform: rotate(0) scale(1); }
    87% { transform: rotate(45deg) scale(1.14); }
    96%, 100% { transform: rotate(90deg) scale(1); }
}

@keyframes tc-askspark-fill {
    0%, 78% { opacity: 0; }
    85%, 92% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes tc-askspark-line {
    0%, 78% { opacity: 1; }
    85%, 92% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes tc-askspark-twinkle {
    0%, 83% { opacity: 0; transform: scale(0) rotate(0); }
    89% { opacity: 1; transform: scale(1) rotate(45deg); }
    97%, 100% { opacity: 0; transform: scale(.3) rotate(90deg); }
}

/* the guide by the spark, the first times a customer meets it (pdp-ask.js): a small dark bubble
   above it, its tail pointing down at the spark; while it shows, the spark keeps its colours */
.tc-askspark {
    position: relative;
}

.tc-askcoach {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 2px;
    z-index: 5;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(32, 33, 36, .94);
    box-shadow: 0 6px 20px rgba(12, 12, 12, .18);
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: rgba(255, 255, 255, .86);
    white-space: nowrap;
    text-align: start;
    direction: rtl;
    pointer-events: auto;
    transform-origin: 16px 100%;
    animation: tc-askcoach-in .32s cubic-bezier(.2, .8, .2, 1) both;
}

.tc-askcoach b {
    font-weight: 700;
    color: #FFF;
}

/* the tail: a small turned square under the bubble, over the spark's centre */
.tc-askcoach::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 11px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 0 0 2px 0;
    background: inherit;
    transform: rotate(45deg);
}

.tc-askcoach.is-leaving {
    animation: tc-askcoach-out .2s ease-in both;
}

@keyframes tc-askcoach-in {
    from { opacity: 0; transform: translateY(6px) scale(.92); }
}

@keyframes tc-askcoach-out {
    to { opacity: 0; transform: translateY(4px) scale(.96); }
}

.tc-askspark.is-coached .tc-askspark__fill {
    animation: tc-askspark-turn 5s cubic-bezier(.4, 0, .2, 1) infinite;
    animation-delay: -2s;
    opacity: 1;
}

.tc-askspark.is-coached .tc-askspark__line {
    opacity: 0;
}

/* a wide screen: the same spark beside the SKU, with its name - «دستیار خرید» on its right, both in
   the AI's violet (the review summary's, pdp-ai-summary.css) - in a flat white pill with a faint violet
   hairline. Every seven seconds the star glints and, with it, the composer's streak runs once round
   the pill - its line only, softened, no glow (pdp-ask.js streak(); the
   .tc-askc__glow / __bg / __line layers are the composer's rules below). At the far end of the brand
   row over the title, 48px from the SKU (the theme's own space after it: product.less
   .km-product-brand .km-detail). Its guide above it. */
.tc-askspark.tc-askspark--desk {
    isolation: isolate;
    gap: 4px;
    width: auto;
    height: 32px;
    margin: -6px 0;
    padding: 0 12px 0 10px;
    border-radius: 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: #7F53EF;
    white-space: nowrap;
}

.tc-askspark.tc-askspark--desk:active {
    background: none;
}

.tc-askspark--desk .tc-askc__bg {
    box-shadow: inset 0 0 0 1px #E2DCF5;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.tc-askspark--desk:hover .tc-askc__bg,
.tc-askspark--desk:focus-visible .tc-askc__bg {
    background: #F8F5FF;
    box-shadow: inset 0 0 0 1px #D3C7F6;
}

.tc-askspark--desk .tc-askc__glow svg,
.tc-askspark--desk .tc-askc__line svg {
    width: 100%;
    height: 100%;
}

/* flat: the streak's line only, softened - no glow spilling round it */
.tc-askspark--desk .tc-askc__line {
    opacity: .7;
}

.tc-askspark--desk .tc-askc__glow {
    display: none;
}

.tc-askspark.tc-askspark--desk > svg {
    width: 20px;
    height: 20px;
}

/* its glint every seven seconds, not five (the streak keeps time with it) */
.tc-askspark--desk .tc-askspark__fill,
.tc-askspark--desk .tc-askspark__line,
.tc-askspark--desk .tc-askspark__twinkle,
.tc-askspark--desk.is-coached .tc-askspark__fill {
    animation-duration: 7s;
}

.tc-askspark--desk .tc-askcoach {
    left: 4px;
}

/* ---- the composer (the same one on the page and in the chat) ------------------------- */

.tc-askc {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 4px;
    min-height: 56px;
    margin: 0;
    padding: 8px 18px 8px 8px;
    border-radius: 28px;
    box-sizing: border-box;
}

/* the surface: white, with a hairline border (Google's composer) */
.tc-askc__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: #FFF;
    box-shadow: inset 0 0 0 1px var(--tc-ask-border);
    transition: box-shadow .2s ease;
}

.tc-askc:focus-within .tc-askc__bg {
    box-shadow: inset 0 0 0 1px #AEB3BA;
}

/* the streak: once, the first time the composer comes into view - a thin run of Google's colours
   that sets off along the top edge, turns round the far end and fades out along the bottom.
   Its line sits on the border (__line), a blurred copy of it under the surface (__glow) so the
   glow only spills outside. pdp-ask.js draws and moves both. */
.tc-askc__glow,
.tc-askc__line {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.tc-askc__glow {
    z-index: -2;
    filter: blur(5px);
    opacity: .6;
}

.tc-askc__line {
    z-index: 1;
}

.tc-askc__glow svg,
.tc-askc__line svg,
.tc-askthink__ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tc-askc__glow rect,
.tc-askc__line rect,
.tc-askthink__ring rect {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
}

.tc-askc__glow rect {
    stroke-width: 3;
}

/* the streak is many short dashes end to end: square ends, so they meet without bumps */
.tc-askc__glow rect,
.tc-askc__line rect {
    stroke-linecap: butt;
}


/* the text, and while recording the words heard so far and the voice's line */
.tc-askc__field {
    flex: 1 1 0;
    min-width: 0;
    align-self: center;
}

.tc-askc__input {
    display: block;
    width: 100%;
    max-height: 132px;
    margin: 0;
    padding: 8px 0;
    border: 0;
    outline: 0;
    background: none;
    resize: none;
    font: inherit;
    font-size: 15px;
    line-height: 24px;
    color: var(--tc-ask-ink);
    overflow-y: auto;
}

.tc-askc__input::placeholder {
    color: #80868B;
}

.tc-askc__live,
.tc-askc__wave {
    display: none;
}

.tc-askc__tools {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
}

.tc-askc__btn,
.tc-askc__send,
.tc-askc__stop {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tc-askc__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: none;
    color: #3C4043;
    transition: background-color .15s ease;
}

.tc-askc__btn:hover {
    background: rgba(60, 64, 67, .08);
}

.tc-askc__btn svg,
.tc-askc__send svg,
.tc-askc__stop svg {
    width: 22px;
    height: 22px;
}

/* send: a blue round that comes when there is something to send */
.tc-askc__send {
    height: 40px;
    border-radius: 50%;
    background: var(--tc-ask-blue);
    color: #FFF;
    transform: scale(.4);
    opacity: 0;
    width: 0;
    pointer-events: none;
    transition: transform .22s cubic-bezier(.34, 1.4, .64, 1), opacity .15s ease, width .22s ease;
}

.tc-askc.has-text .tc-askc__send,
.tc-askc.is-rec .tc-askc__send {
    width: 52px;
    border-radius: 999px;
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.tc-askc.is-busy .tc-askc__send {
    opacity: .4;
    pointer-events: none;
}

/* stop recording: a grey pill with a square, only while recording */
.tc-askc__stop {
    display: none;
    width: 52px;
    height: 40px;
    border-radius: 999px;
    background: #E3E5E8;
    color: #3C4043;
}

.tc-askc__stop svg {
    width: 16px;
    height: 16px;
}

/* tall: more than one line, or recording - the text takes the whole width and the buttons go
   under it, at the end (Google's box) */
.tc-askc.is-tall {
    border-radius: 24px;
    padding: 12px 18px 10px 10px;
}

.tc-askc.is-tall .tc-askc__field {
    flex-basis: 100%;
}

.tc-askc.is-tall .tc-askc__tools {
    margin-inline-start: auto;
}

/* recording (Google's box): what has been heard on top, the whole width; under it the voice's line
   and, at the end of the same row, stop and send. The field lets its parts into the box's rows. */
.tc-askc.is-rec {
    padding: 12px 18px 8px 8px;
}

.tc-askc.is-rec .tc-askc__field {
    display: contents;
}

.tc-askc.is-rec .tc-askc__input {
    display: none;
}

.tc-askc.is-rec .tc-askc__live {
    display: block;
    flex: 1 1 100%;
    min-height: 24px;
    max-height: 96px;
    padding: 0 0 4px;
    overflow-y: auto;
    font-size: 15px;
    line-height: 24px;
    color: var(--tc-ask-ink);
}

.tc-askc.is-rec .tc-askc__live:empty::before {
    content: attr(data-empty);
    color: var(--tc-ask-faint);
}

.tc-askc__live i {
    font-style: normal;
    color: var(--tc-ask-soft);
}

/* the voice's line: thin bars, the newest at the right, older ones moving left and fading out;
   a quiet moment is a row of dots */
.tc-askc.is-rec .tc-askc__wave {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    height: 40px;
    margin-inline-start: 10px;
    overflow: hidden;
    direction: ltr;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40%);
    mask-image: linear-gradient(to right, transparent, #000 40%);
}

.tc-askc__wave span {
    flex: none;
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: #BDC1C6;
    transition: height .08s linear;
}

.tc-askc__wave span.is-on {
    background: var(--tc-ask-blue);
}

/* stopped: the last words are still being written down */
.tc-askc.is-ending .tc-askc__wave {
    opacity: .35;
    transition: opacity .2s ease;
}

.tc-askc.is-rec .tc-askc__tools {
    margin-inline-start: 8px;
}

.tc-askc.is-rec .tc-askc__mic {
    display: none;
}

.tc-askc.is-rec .tc-askc__stop {
    display: inline-flex;
}

/* ---- the chat ------------------------------------------------------------------------- */

.tc-askchat {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.tc-askchat[hidden] {
    display: none;
}

.tc-askchat__scrim {
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 12, .42);
    animation: tc-ask-in-fade .25s ease both;
}

.tc-askchat__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #FFF;
    animation: tc-ask-in-up .34s cubic-bezier(.2, .8, .2, 1) both;
}

.tc-askchat.is-closing .tc-askchat__panel {
    animation: tc-ask-out-down .22s ease-in both;
}

.tc-askchat.is-closing .tc-askchat__scrim {
    animation: tc-ask-out-fade .22s ease-in both;
}

@keyframes tc-ask-in-fade { from { opacity: 0; } }
@keyframes tc-ask-out-fade { to { opacity: 0; } }
@keyframes tc-ask-in-up { from { transform: translateY(24px); opacity: 0; } }
@keyframes tc-ask-out-down { to { transform: translateY(24px); opacity: 0; } }

/* the grip line on the panel's head: only where the panel can be moved */
.tc-askchat__grip {
    display: none;
}

/* a wide screen: a panel over the page without darkening it - the product stays in view, the page
   scrolls and clicks beside it, and the chat waits there until it is closed (Amazon's Rufus, Gemini
   in Chrome). It opens in the bottom left corner and moves like a window of its own: dragged by its
   head (the grip line on top says so), kept whole on screen, found where it was left next time; a
   double click on the head puts it back (pdp-ask.js movable()) */
@media (min-width: 960px) {
    .tc-askchat {
        inset: auto auto 16px 16px;
        display: block;
        width: clamp(360px, 30vw, 420px);
        height: min(720px, calc(100vh - 32px));
    }

    .tc-askchat__head {
        position: relative;
        cursor: grab;
        user-select: none;
        touch-action: none;
    }

    .tc-askchat__grip {
        display: block;
        position: absolute;
        top: 6px;
        left: 50%;
        width: 36px;
        height: 4px;
        margin-left: -18px;
        border-radius: 2px;
        background: #DADCE0;
        transition: background-color .15s ease;
    }

    .tc-askchat__head:hover .tc-askchat__grip,
    .tc-askchat.is-dragging .tc-askchat__grip {
        background: #9AA0A6;
    }

    .tc-askchat.is-dragging,
    .tc-askchat.is-dragging .tc-askchat__head {
        cursor: grabbing;
        user-select: none;
    }

    .tc-askchat.is-dragging .tc-askchat__panel {
        box-shadow: 0 0 0 1px rgba(12, 12, 12, .08), 0 24px 64px rgba(12, 12, 12, .24), 0 4px 12px rgba(12, 12, 12, .08);
    }

    .tc-askchat__scrim {
        display: none;
    }

    .tc-askchat__panel {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 0 0 1px rgba(12, 12, 12, .06), 0 16px 48px rgba(12, 12, 12, .16), 0 2px 8px rgba(12, 12, 12, .06);
        animation-name: tc-ask-in-side;
    }

    .tc-askchat.is-closing .tc-askchat__panel {
        animation-name: tc-ask-out-side;
    }
}

/* the panel closed on a conversation: a pill in the corner that opens it again (pdp-ask.js chat.dock) -
   it comes in as the panel goes. Phones open the chat from the page's own buttons */
.tc-askdock {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 2147481999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    margin: 0;
    padding: 0 14px 0 18px;
    border: 0;
    border-radius: 22px;
    background: #FFF;
    box-shadow: 0 0 0 1px rgba(12, 12, 12, .06), 0 8px 24px rgba(12, 12, 12, .14);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #202124;
    white-space: nowrap;
    cursor: pointer;
    animation: tc-askdock-in .3s cubic-bezier(.2, .8, .2, 1) .16s both;
    transition: box-shadow .15s ease;
}

.tc-askdock:hover,
.tc-askdock:focus-visible {
    box-shadow: 0 0 0 1px rgba(12, 12, 12, .08), 0 12px 32px rgba(12, 12, 12, .2);
}

.tc-askdock svg {
    flex: none;
    width: 20px;
    height: 20px;
}

.tc-askdock[hidden] {
    display: none;
}

@keyframes tc-askdock-in { from { opacity: 0; transform: translateY(12px) scale(.92); } }

@media (max-width: 959.98px) {
    .tc-askdock {
        display: none;
    }
}

/* a mouse: a thin, quiet scrollbar down the chat, not the system's dark one */
@media (hover: hover) {
    .tc-askchat__log {
        scrollbar-width: thin;
        scrollbar-color: #DADCE0 transparent;
    }
}

@keyframes tc-ask-in-side { from { transform: translateX(-24px); opacity: 0; } }
@keyframes tc-ask-out-side { to { transform: translateX(-24px); opacity: 0; } }

.tc-askchat__head {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    padding: 8px 8px 4px;
}

.tc-askchat__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--tc-ask-ink);
}

.tc-askchat__brand svg {
    width: 24px;
    height: 24px;
}

.tc-askchat__close {
    grid-column: 3;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #3C4043;
    cursor: pointer;
}

.tc-askchat__close svg {
    width: 24px;
    height: 24px;
}

/* what is being asked about: the product, small */
.tc-askchat__ctx {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 16px 0;
    padding: 6px 6px 6px 14px;
    border: 1px solid var(--tc-ask-line);
    border-radius: 14px;
    align-self: flex-start;
    max-width: calc(100% - 32px);
    box-sizing: border-box;
}

.tc-askchat__ctx img {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--tc-ask-surface);
}

.tc-askchat__ctx span {
    min-width: 0;
    font-size: 13px;
    line-height: 20px;
    color: #3C4043;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-askchat__log {
    flex: 1;
    min-height: 0;
    padding: 20px 16px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* phones: no scrollbar strip down the side */
@media (hover: none) {
    .tc-askchat__log {
        scrollbar-width: none;
    }

    .tc-askchat__log::-webkit-scrollbar {
        display: none;
    }
}

.tc-askchat__foot {
    padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, #FFF 75%, rgba(255, 255, 255, 0));
}

/* ready questions above the chat's composer - there from the first question on; while an answer
   comes they wait, faded, and after it the AI's follow-ups take their place */
.tc-askchat__chips.tc-ask__chips {
    margin: 0 -16px 10px;
    animation: tc-ask-in-fade .3s ease backwards;
    transition: opacity .2s ease;
}

.tc-askchat__chips.is-waiting {
    opacity: .45;
    pointer-events: none;
}

/* a wide screen: they wrap inside the panel's edges, no row to scroll */
@media (min-width: 960px) {
    .tc-askchat__chips.tc-ask__chips {
        margin: 0 0 10px;
    }
}

.tc-askchat__chips[hidden] {
    display: none;
}

.tc-askchat__note {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    color: var(--tc-ask-faint);
}

/* opened from the spark on the photo, before any question: what the chat is for and the ready
   questions, each as wide as its words (YouTube's «Ask about this video») */
.tc-askwelcome {
    padding: 8px 0 0;
    animation: tc-ask-in-fade .3s ease both;
}

.tc-askwelcome__spark {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 0 12px;
}

.tc-askwelcome__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    color: var(--tc-ask-ink);
}

.tc-askwelcome__sub {
    margin: 4px 0 20px;
    font-size: 14px;
    line-height: 24px;
    color: var(--tc-ask-soft);
}

.tc-askwelcome__chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.tc-askwelcome__chips .tc-ask__chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 18px;
    border-color: #DADCE0;
    font-size: 14px;
    line-height: 20px;
    color: var(--tc-ask-ink);
    white-space: normal;
    text-align: start;
    animation: tc-ask-in-up .35s cubic-bezier(.2, .8, .2, 1) both;
}

.tc-askwelcome__chips .tc-ask__chip:nth-child(2) { animation-delay: .05s; }
.tc-askwelcome__chips .tc-ask__chip:nth-child(3) { animation-delay: .1s; }
.tc-askwelcome__chips .tc-ask__chip:nth-child(4) { animation-delay: .15s; }

.tc-askwelcome__chips svg {
    flex: none;
    width: 20px;
    height: 20px;
    color: #3C4043;
}

/* the question: a grey bubble at the start, two lines and a chevron when it is long */
.tc-askmsg--user {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 20px;
    animation: tc-ask-in-up .3s cubic-bezier(.2, .8, .2, 1) both;
}

.tc-askmsg__bubble {
    position: relative;
    max-width: 86%;
    padding: 12px 18px;
    border-radius: 22px 22px 22px 6px;
    background: var(--tc-ask-surface);
    font-size: 15px;
    line-height: 26px;
    color: var(--tc-ask-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* a question past five lines, folded to five (pdp-ask.js); the space under the text is a border of the
   bubble's colour, not padding, so the sixth line cannot show through it */
.tc-askmsg__bubble.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-bottom: 0;
    padding-inline-end: 40px;
    border-bottom: 12px solid var(--tc-ask-surface);
    cursor: pointer;
}

.tc-askmsg__bubble.is-clamped::after {
    content: "";
    position: absolute;
    inset-inline-end: 14px;
    bottom: 2px;
    width: 10px;
    height: 10px;
    border: solid var(--tc-ask-soft);
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
}

/* the answer */
.tc-askmsg--ai {
    margin: 0 0 28px;
    font-size: 15px;
    line-height: 28px;
    color: #202124;
}

.tc-askmsg--ai p {
    margin: 0 0 12px;
}

.tc-askmsg--ai ul {
    margin: 0 0 12px;
    padding-inline-start: 22px;
}

.tc-askmsg--ai li {
    margin: 0 0 6px;
}

.tc-askmsg--ai strong {
    font-weight: 700;
    color: var(--tc-ask-ink);
}

.tc-askmsg__muted {
    font-size: 13px;
    line-height: 22px;
    color: var(--tc-ask-soft);
}

/* the answer fades in as it arrives, a few words at a time, so the newest lines are still faint
   while the ones above them have settled (Google's AI Mode) */
.tc-askw {
    animation: tc-ask-word .7s ease-out both;
}

@keyframes tc-ask-word {
    from { opacity: 0; }
}

/* thinking: a small pill with a light orbiting its edge - first three dots, then what it is
   looking through (the product's photo, its specifications, its reviews). The light's colour
   drifts blue, purple, pink; pdp-ask.js draws and moves it. */
.tc-askthink {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin: 0 0 16px;
    padding: 0 16px;
    border-radius: 999px;
    box-sizing: border-box;
    white-space: nowrap;
    animation: tc-ask-in-fade .3s ease both;
}

.tc-askthink.is-leaving {
    animation: tc-ask-out-fade .18s ease-in both;
}

.tc-askthink__ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.tc-askthink__ring.is-glow {
    filter: blur(5px);
    opacity: .8;
}

.tc-askthink__body {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    animation: tc-ask-in-fade .25s ease both;
}

/* the dots: one after another swelling */
.tc-askdots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
}

.tc-askdots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5F6368;
    animation: tc-ask-dot 1.1s ease-in-out infinite;
}

.tc-askdots i:nth-child(2) { animation-delay: .15s; }
.tc-askdots i:nth-child(3) { animation-delay: .3s; }

@keyframes tc-ask-dot {
    0%, 60%, 100% { transform: scale(.7); opacity: .5; }
    30% { transform: scale(1); opacity: 1; }
}

.tc-askthink__label {
    font-size: 14px;
    line-height: 20px;
    color: #202124;
}

/* what it is reading: small rounds over one another */
.tc-asksrc {
    display: inline-flex;
    align-items: center;
}

.tc-asksrc > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #FFF;
    box-sizing: border-box;
    animation: tc-ask-src .3s cubic-bezier(.34, 1.4, .64, 1) both;
}

.tc-asksrc > * + * {
    margin-inline-start: -5px;
}

.tc-asksrc > :nth-child(2) { animation-delay: .12s; }
.tc-asksrc > :nth-child(3) { animation-delay: .24s; }

.tc-asksrc img {
    object-fit: cover;
    background: var(--tc-ask-surface);
}

.tc-asksrc svg {
    width: 12px;
    height: 12px;
}

.tc-asksrc .is-specs {
    background: #E8F0FE;
    color: #1A73E8;
}

.tc-asksrc .is-reviews {
    background: #FEF3E0;
    color: #E37400;
}

@keyframes tc-ask-src {
    from { transform: scale(.4); opacity: 0; }
}


/* under a finished answer: copy, good, bad */
.tc-askmsg__actions {
    display: flex;
    gap: 4px;
    margin: 4px -8px 0;
    animation: tc-ask-in-fade .4s ease both;
}

.tc-askmsg__actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--tc-ask-soft);
    cursor: pointer;
}

.tc-askmsg__actions button:hover {
    background: rgba(60, 64, 67, .08);
}

.tc-askmsg__actions button.is-on {
    color: var(--tc-ask-blue);
}

.tc-askmsg__actions svg {
    width: 20px;
    height: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .tc-askthink,
    .tc-askthink__body,
    .tc-askdots i,
    .tc-asksrc > *,
    .tc-askw,
    .tc-askchat__panel,
    .tc-askchat__scrim,
    .tc-askmsg--user,
    .tc-askwelcome,
    .tc-askwelcome__chips .tc-ask__chip {
        animation: none !important;
    }

    .tc-sheet-ask,
    .tc-sheet.is-full .tc-sheet-ask {
        transform: none;
        transition: none;
    }

    /* the glint keeps its colour coming and going - no turn, no swell, no small star */
    .tc-askspark__fill {
        animation: tc-askspark-fill 5s ease infinite -2s !important;
    }

    .tc-askspark__line {
        animation: tc-askspark-line 5s ease infinite -2s !important;
    }

    .tc-askspark.is-coached .tc-askspark__fill,
    .tc-askspark.is-coached .tc-askspark__line {
        animation: none !important;
    }

    .tc-askspark--desk .tc-askspark__fill,
    .tc-askspark--desk .tc-askspark__line {
        animation-duration: 7s !important;
    }

    .tc-askspark__twinkle {
        animation: none !important;
    }

    .tc-askcoach,
    .tc-askcoach.is-leaving,
    .tc-askdock {
        animation: none !important;
    }
}