/* ============================================================
   chef_tip.css – Zero-Gotchas DOM Order + Premium Double-Layer Arrow
   ============================================================
   DOM AUTHORING RULE (identical for ALL four variants):
       Always write __text first, then <img>.
       CSS handles the visual reordering via order: -1 on the image.
   ============================================================ */
:root {
    --chef-text-width:  25ch;  
}

/* ─── WRAPPER ─────────────────────────────────────────────── */
.chef-disclaimer {
    display: flex !important;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
}

/* ─── SPEECH BUBBLE ───────────────────────────────────────── */
.chef-disclaimer__text {
    position: relative;
    width: fit-content;
    max-width: var(--chef-text-width);
    padding: 0.75rem 1rem;
    background: #fffdf0;
    border: 0.0625rem solid #d7ccc8;   /* ~1 px */
    border-radius: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #5d4037;
    display: flex;
    align-items: center;
    /* ✅ FIX AGENT: permette al testo di andare a capo */
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
    max-width: var(--chef-text-width); 
}
/* ─── JAPANESE TEXT OPTIMIZATION ─────────────────────────── */
.chef-disclaimer__text:lang(ja) {
    word-break: auto-phrase;
    line-break: normal;
}
/* ─── CHEF IMAGE ──────────────────────────────────────────── */
.chef-disclaimer__img {
    width: 6rem;
    height: auto;
    flex-shrink: 0;
}

/* ─── POSITION MODIFIERS ──────────────────────────────────── */

/* Right: bubble on left, chef on right — natural DOM order (__text → img) */
.chef-disclaimer--right {
    justify-content: flex-end;
}

/* Left: chef on left, bubble on right.
   DOM order is STILL __text → img (same as --right).
   order: -1 pushes the image to the visual left position.
   This applies to ALL --left variants, including --left --wide. */
.chef-disclaimer--left {
    justify-content: flex-start;
}

.chef-disclaimer--left .chef-disclaimer__img {
    order: -1;
}

/* ─── WIDE VARIANT (wide-but-wrappable) ────────────────── */
/* ✅ FIX AGENT: wide ma il testo può andare a capo quando zoomato */
.chef-disclaimer--wide .chef-disclaimer__text {
    max-width: min(60ch, 100%);
}

.chef-disclaimer--wide .chef-disclaimer__img {
    width: auto;
    max-height: 5rem;
    height: 100%;
}

/* ─── PREMIUM DOUBLE-LAYER ARROW ──────────────────────────── */
/*
   Two pseudo-elements stack to create a bordered triangle:
     ::before  outer layer  — border colour (#d7ccc8)  border-width: 0.5625rem
     ::after   inner layer  — fill colour  (#fffdf0)   border-width: 0.5rem
   The inner tip sits 0.1875 rem inside the outer tip, producing a
   clean ~3px border visible on all three sides of the triangle.
*/

/* Shared base */
.chef-disclaimer__text::before,
.chef-disclaimer__text::after {
    content: "";
    position: absolute;
    top: 50%;
    border-style: solid;
    border-color: transparent;
}

/* Outer arrow (border colour) */
.chef-disclaimer__text::before {
    border-width: 0.5625rem;    /* 9 px at 16 px root */
    margin-top: -0.5625rem;
}

/* Inner arrow (fill colour) — rendered on top of ::before */
.chef-disclaimer__text::after {
    border-width: 0.5rem;       /* 8 px at 16 px root */
    margin-top: -0.5rem;
}

/* RIGHT: arrow sits on the RIGHT edge of the bubble */
.chef-disclaimer--right .chef-disclaimer__text::before {
    right: -1.125rem;           /* 2 × 0.5625 rem */
    border-left-color: #d7ccc8;
}

.chef-disclaimer--right .chef-disclaimer__text::after {
    right: -0.9375rem;          /* outer_tip − 0.1875 rem inset */
    border-left-color: #fffdf0;
}

/* LEFT: arrow sits on the LEFT edge of the bubble */
.chef-disclaimer--left .chef-disclaimer__text::before {
    left: -1.125rem;
    border-right-color: #d7ccc8;
}

.chef-disclaimer--left .chef-disclaimer__text::after {
    left: -0.9375rem;
    border-right-color: #fffdf0;
}