/* ==========================================================================
   PRODUCT PAGE - THE AI SUMMARY OF THE REVIEWS («خلاصه دیدگاه‌های خریدارها»)
   --------------------------------------------------------------------------
   Digikala's, measured on digikala.com (dkp-11801878):
     .tc-aisum-pill   «خلاصه دیدگاه‌ها» under the title: lavender, the violet sparkles. Desktop: in
                      the rating row (.tc-pdp-rate), it opens the reviews tab; phones: the same row
                      under the title, it opens #tc-sheet-aisum (ProductTemplate.Simple)
     .tc-aisum        the summary (_PdpAiSummary): a light blue bubble (iHerb's), its notch at the top right,
                      the paragraph, flat tinted chips (ringed tick: liked, ringed minus: disliked), the
                      disclaimer, then «آیا این خلاصه برایتان مفید بود؟» with two thumbs.
                      --inline  desktop, in the reviews after the buyers' photos, cut at four lines
                      --sheet   phones, the sheet's body; the text types itself in on the first open
   Behaviour: pdp-ai-summary.js. Type: the page's ladder (base.less --tc-fs-* / --tc-fw-*).
   ========================================================================== */

.tc-aisum,
.tc-aisum-pill,
.tc-sheet--aisum {
    --tc-ai-violet: #7F53EF;
    --tc-ai-bubble: #ECEDFF;
    --tc-ai-box: #E8F2FD;        /* the summary's own ground: iHerb's light blue */
    --tc-ai-pill: rgba(236, 237, 255, .7);
    --tc-ai-ink: #0C0C0C;
    --tc-ai-soft-ink: #424750;
    --tc-ai-muted: #81858B;
    --tc-ai-rule: #E0E0E2;
    --tc-ai-good: #2E9E54;
    --tc-ai-good-ground: #E3F4E8;
    --tc-ai-bad: #D9364C;
    --tc-ai-bad-ground: #FCE9EC;
}

/* --------------------------------------------------------------------------
   The pill under the title
   -------------------------------------------------------------------------- */

.tc-aisum-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 16px;
    background: var(--tc-ai-pill);
    font-family: inherit;
    font-size: var(--tc-fs-caption, 12px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 20px;
    color: var(--tc-ai-soft-ink);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tc-aisum-pill:hover,
.tc-aisum-pill:focus-visible {
    background: var(--tc-ai-bubble);
    color: var(--tc-ai-ink);
    text-decoration: none;
}

.tc-aisum-pill__icon {
    flex: none;
    color: var(--tc-ai-violet);
}

/* --------------------------------------------------------------------------
   The head: the sparkle tile, the title and «تولید شده با هوش مصنوعی»
   -------------------------------------------------------------------------- */

.tc-aisum__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tc-aisum__tile {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px 12px 12px 4px;
    background: linear-gradient(135deg, #4F8DFF 0%, #7F53EF 70%, #A35CF2 100%);
    box-shadow: 0 2px 6px rgba(127, 83, 239, .25);
}

.tc-aisum__heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tc-aisum .tc-aisum__title,
.tc-sheet--aisum .tc-aisum__title {
    margin: 0;
    padding: 0;
    font-size: var(--tc-fs-h3, 15px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 1.7;
    color: var(--tc-ai-ink);
}

.tc-aisum__sub {
    font-size: var(--tc-fs-caption, 12px);
    font-weight: var(--tc-fw-label, 600);
    line-height: 1.6;
    color: var(--tc-ai-muted);
}

/* in the sheet the close button keeps to the far side */
.tc-sheet--aisum .tc-sheet__head {
    justify-content: flex-start;
    min-height: 64px;
    padding-top: 4px;
}

.tc-sheet--aisum .tc-sheet__close {
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   The bubble
   -------------------------------------------------------------------------- */

.tc-aisum {
    font-family: IRANYekanX, tahoma, sans-serif;
    direction: rtl;
    text-align: right;
}

.tc-aisum__bubble {
    position: relative;
    margin-top: 16px;
    padding: 16px;
    border-radius: 16px;
    background: var(--tc-ai-box);
}

/* the notch at the top right, pointing up at the tile */
.tc-aisum__bubble::before {
    content: "";
    position: absolute;
    top: -13px;
    right: 22px;
    width: 22px;
    height: 14px;
    background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath fill='%23E8F2FD' d='M0 14C9 13 15 8 17 0c1 6 2.5 10.5 5 14Z'/%3E%3C/svg%3E");
    pointer-events: none;
}

.tc-aisum--sheet .tc-aisum__bubble {
    margin-top: 12px;
}

.tc-aisum__text {
    margin: 0;
    font-size: var(--tc-fs-small, 14px);
    font-weight: var(--tc-fw-text, 400);
    line-height: 2.1;
    color: var(--tc-ai-ink);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* desktop: four lines, then «مشاهده بیشتر» (pdp-ai-summary.js shows it only when the text is longer) */
.tc-aisum--inline .tc-aisum__text.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.tc-aisum__more {
    display: inline-block;
    margin: 6px 0 0;
    padding: 0 0 2px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: none;
    font-family: inherit;
    font-size: var(--tc-fs-caption, 12px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 1.8;
    color: var(--tc-ai-ink);
    cursor: pointer;
}

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

/* the chips and the disclaimer; while the sheet's text types itself in they wait, then fade in */
.tc-aisum__after {
    margin-top: 16px;
    transition: opacity .35s ease;
}

.tc-aisum.is-typing .tc-aisum__after {
    opacity: 0;
}

.tc-aisum.is-typing .tc-aisum__text::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-right: 2px;
    vertical-align: -2px;
    background: var(--tc-ai-violet);
    animation: tc-aisum-caret .8s steps(1) infinite;
}

@keyframes tc-aisum-caret {
    50% { opacity: 0; }
}

.tc-aisum__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

/* flat: a tinted ground, no border, the ink dark and only the fine ringed icon in the colour */
.tc-aisum__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    margin: 0;
    padding: 0 12px 0 12px;
    border: 0;
    border-radius: 14px;
    font-size: var(--tc-fs-caption, 12px);
    font-weight: var(--tc-fw-label, 600);
    line-height: 20px;
    color: #23262B;
    white-space: nowrap;
}

.tc-aisum__chip svg {
    flex: none;
}

.tc-aisum__chip--pro {
    background: var(--tc-ai-good-ground);
}

.tc-aisum__chip--pro svg {
    color: var(--tc-ai-good);
}

.tc-aisum__chip--con {
    background: var(--tc-ai-bad-ground);
}

.tc-aisum__chip--con svg {
    color: var(--tc-ai-bad);
}

.tc-aisum__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tc-aisum__note {
    margin: 0;
    font-size: var(--tc-fs-caption, 12px);
    font-weight: var(--tc-fw-text, 400);
    line-height: 1.8;
    color: var(--tc-ai-muted);
}

/* --------------------------------------------------------------------------
   «آیا این خلاصه برایتان مفید بود؟»
   -------------------------------------------------------------------------- */

.tc-aisum__vote {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.tc-aisum__ask {
    font-size: var(--tc-fs-small, 14px);
    font-weight: var(--tc-fw-text, 400);
    line-height: 1.8;
    color: var(--tc-ai-ink);
}

.tc-aisum__thumbs {
    display: flex;
    gap: 20px;
}

.tc-aisum--sheet .tc-aisum__thumbs {
    margin-right: auto;
}

.tc-aisum__thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #F0F0F1;
    color: #333;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.tc-aisum__thumb:hover {
    background: #E4E5E7;
}

.tc-aisum__thumb[aria-pressed="true"] {
    background: var(--tc-ai-bubble);
    color: var(--tc-ai-violet);
}

.tc-aisum__thumb[aria-pressed="true"] svg {
    fill: currentColor;
    fill-opacity: .18;
}

.tc-aisum__thumb:focus-visible,
.tc-aisum__more:focus-visible,
.tc-aisum-pill:focus-visible {
    outline: 2px solid var(--tc-ai-violet);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Desktop: in the reviews, between the buyers' photos and the sort bar
   -------------------------------------------------------------------------- */

.tc-aisum--inline {
    margin: 0 0 24px;
    padding: 24px 0;
    border-top: 1px solid #F0F0F1;
    border-bottom: 1px solid #F0F0F1;
}

/* the photos above end with their own rule */
.tc-rl-gallery + .tc-aisum--inline {
    border-top: 0;
    padding-top: 8px;
}

.tc-aisum--inline .tc-aisum__bubble {
    padding: 20px 24px;
}

/* phones: the sheet's text a step finer, as Digikala's (12px on 25.8) - on the phone's own ladder */
.tc-aisum--sheet .tc-aisum__text {
    font-size: var(--tc-fs-body, 13px);
    line-height: 2.05;
}

.tc-aisum--sheet .tc-aisum__ask {
    font-size: var(--tc-fs-small, 12.5px);
}

.tc-aisum--sheet .tc-aisum__vote {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: reduce) {
    .tc-aisum__after,
    .tc-aisum__thumb {
        transition: none;
    }

    .tc-aisum.is-typing .tc-aisum__text::after {
        animation: none;
    }
}