/* Cafe chat widget (spec 2026-10-18-pos-cafe-chat-widget-design.md; partials/cafe-chat.njk, js/cafe-chat.js).
   Loaded only on pages that set "cafeChat". Site tokens from styles.css :root; the Instagram
   gradient, pink and wash are the mockup's own colours and have no token to map to.
   One block that sizes itself to the space it gets (container query): side by side from ~640px,
   stacked below that, and a wide heading-left / chat-right layout when it is a full-width band. */
.cc {
  --ig: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  --ig-bar: linear-gradient(100deg, #833ab4, #d62976 45%, #fd5949 80%, #fa7e1e);
  --ig-pink: #e1306c; --ig-wash: #fdf0f5; --ig-ink: #a3214f;
  margin-block: 2rem; padding-block: 1.5rem 0; border-top: 1px solid var(--line);   /* same divider and rhythm as the web widget (.ww) */
}
.cc-in { container-type: inline-size; }
.cc .eyebrow { margin-block-end: .5rem; }
.cc-head h2 { margin: 0 0 .4rem; }
.cc-lede { margin: 0 0 1.4rem; color: var(--muted); }
.cc-grid { display: grid; gap: 1.6rem; justify-items: center; padding-top: .9rem; }   /* room for the Instagram badge that pokes above the chat */
@container (min-width: 640px) {
  .cc-grid { grid-template-columns: minmax(0, 1fr) 21.5rem; align-items: center; }
}
/* Wide (full-width band): heading and logos on the left, chat on the right, no empty middle */
@container (min-width: 900px) {
  .cc-wide { display: grid; grid-template-columns: minmax(0, 1fr) 21.5rem; grid-template-rows: auto 1fr; column-gap: 4rem; }
  .cc-head { grid-column: 1; align-self: end; }
  .cc-grid { display: contents; }
  .cc .cc-row { grid-column: 1; grid-row: 2; align-self: start; justify-content: start; grid-template-columns: repeat(5, 5.6rem); }
  .cc-dm { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- logos: rows of three, round like Instagram stories ---------- */
.cc-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 5.6rem); gap: 1rem 1.1rem; justify-content: center; }
.cc-item { position: relative; display: grid; justify-items: center; gap: .35rem; width: 5.6rem; }
.cc-logo { all: unset; cursor: pointer; display: block; }
.cc-logo:focus-visible .cc-ring { outline: 3px solid var(--cyan); outline-offset: 3px; }
.cc-ring { display: block; width: 4.6rem; height: 4.6rem; border-radius: 50%; padding: 3px; background: var(--line); transition: transform var(--t-3) var(--e-out), background var(--t-3) var(--e-out); }
.cc-logo:hover .cc-ring { transform: translateY(var(--lift)); }
.cc-item.on .cc-ring { background: var(--ig); transform: translateY(-3px) scale(1.06); }
.cc-nm { font: 600 .72rem/1.2 var(--font); color: var(--muted); text-align: center; text-decoration: none; transition: color var(--t-1) var(--e-out); }
.cc-item.on .cc-nm { color: var(--ink); }
.cc-nm:hover { color: var(--cyan-text); text-decoration: underline; }
.cc-item.on .cc-logo { cursor: alias; }
.cc-face { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--white); background: var(--bg, var(--white)); display: grid; place-items: center; overflow: hidden; }
.cc-face img { width: 78%; max-height: 78%; height: auto; object-fit: contain; display: block; }
/* The name under each circle is the Instagram link (new tab). Before cafe-chat.js runs the link
   also covers the whole tile, so with no JavaScript the circle itself opens Instagram. */
.cc-ig { position: relative; display: block; }
.cc-ig:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
.cc:not(.is-live) .cc-ig { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }

/* ---------- the chat window: Instagram colours, messenger details ---------- */
.cc-dm { position: relative; width: 100%; max-width: 21.5rem; border-radius: var(--radius-lg); background: var(--ig-wash); box-shadow: 0 0 0 2px rgba(225,48,108,.35), 0 18px 40px rgba(214,41,118,.25); }
.cc-badge { position: absolute; top: -1.2rem; left: -1.2rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--ig); box-shadow: 0 6px 16px rgba(214,41,118,.4); display: grid; place-items: center; z-index: 2; transition: transform var(--t-2) var(--e-out); }
.cc-badge:hover { transform: translateY(var(--lift-sm)); }
.cc-badge svg { width: 1.7rem; height: 1.7rem; }
.cc-bar { display: flex; align-items: center; gap: .55rem; padding: .65rem .9rem .65rem 2.4rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--ig-bar); color: var(--white); text-decoration: none; }
.cc-bar:hover b { text-decoration: underline; }
.cc-bar .cc-face { width: 2rem; height: 2rem; border-width: 2px; flex: none; }
.cc-id { min-width: 0; }
.cc-bar b { font: 700 .84rem/1.1 var(--head); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-st { font-size: .68rem; opacity: .92; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-dots { margin-left: auto; display: grid; gap: 3px; flex: none; }
.cc-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--white); }
.cc-wall { height: 27rem; padding: .6rem .75rem .4rem;   /* fits the longest ask + answer + cheeky + no (with the profile card and a long handle) + sign-off */ display: flex; flex-direction: column; gap: .4rem; justify-content: flex-end; overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23e1306c' stroke-opacity='.09' stroke-width='2'%3E%3Cpath d='M14 20h18v14a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8z'/%3E%3Cpath d='M32 24h4a4 4 0 0 1 0 8h-4'/%3E%3Cpath d='M74 12h22v30l-4-3-4 3-4-3-4 3-4-3-2 2z'/%3E%3Cpath d='M78 20h14M78 26h10'/%3E%3Cpath d='M20 84a22 22 0 0 1 30 0M26 90a13 13 0 0 1 18 0'/%3E%3Ccircle cx='35' cy='96' r='2'/%3E%3Crect x='72' y='76' width='28' height='20' rx='3'/%3E%3Cpath d='M78 96v6h16v-6'/%3E%3C/svg%3E"); }
.cc-day { align-self: center; margin-bottom: auto; padding: .15rem .6rem; border-radius: 999px; background: rgba(225,48,108,.12); color: var(--ig-ink); font: 700 .62rem var(--head); letter-spacing: .06em; }
.cc-bub { max-width: 86%; padding: .45rem .7rem; border-radius: 1rem; font: 400 .8rem/1.35 var(--font); animation: cc-pop var(--t-3) var(--e-soft) both; }
@keyframes cc-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.cc-bub.them { background: var(--white); color: var(--ink); align-self: flex-start; border-bottom-left-radius: .25rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.cc-bub.us { background: var(--blue); color: var(--white); align-self: flex-end; border-bottom-right-radius: .25rem; }
.cc-who { display: block; font: 700 .62rem var(--head); color: var(--cyan-light); margin-bottom: .1rem; }
.cc-card { display: flex; gap: .5rem; align-items: center; margin-top: .4rem; padding: .4rem .5rem; border-radius: .7rem; background: var(--ig-wash); text-decoration: none; color: var(--ink); }
.cc-card .cc-face { width: 2rem; height: 2rem; border-width: 0; box-shadow: 0 0 0 1px var(--line); flex: none; }
.cc-card b { font: 700 .74rem var(--head); display: block; }
.cc-card span span { font-size: .68rem; color: var(--ig-pink); font-weight: 700; }
.cc-typing { display: inline-flex; gap: 3px; padding: .55rem .7rem; border-radius: 1rem; animation: cc-pop var(--t-2) var(--e-soft) both; }
.cc-typing.them { background: var(--white); align-self: flex-start; }
.cc-typing.us { background: var(--blue); align-self: flex-end; }
.cc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ig-ink); opacity: .6; animation: cc-blink 1s infinite; }
.cc-typing.us i { background: var(--white); }
.cc-typing i:nth-child(2) { animation-delay: .15s; } .cc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cc-blink { 50% { opacity: .15; } }
.cc-input { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem .6rem; }
.cc-field { flex: 1; display: flex; align-items: center; gap: .45rem; padding: .45rem .7rem; background: var(--white); border-radius: 999px; font-size: .75rem; color: var(--muted); }
.cc-field svg { width: 1.05rem; height: 1.05rem; flex: none; }
.cc-send { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--ig-pink); display: grid; place-items: center; box-shadow: 0 4px 10px rgba(225,48,108,.35); }
.cc-send svg { width: .95rem; height: .95rem; }
@container (max-width: 400px) { .cc-row { grid-template-columns: repeat(3, 5rem); gap: .9rem .6rem; } .cc-logo { width: 5rem; } .cc-ring { width: 4.2rem; height: 4.2rem; } .cc-wall { height: 28rem; } }

/* Still mode (data-chat-still on the section): whole chat at once, no pop. */
.cc[data-chat-still] .cc-bub { animation: none; }

/* Phones: hidden, no space reserved (Wato, 2026-10-18). */
@media (max-width: 599.98px) { .cc { display: none; } }

/* The chat must not be covered by the site's floating character or its speech bubbles. The page body
   sits in its own layer, so the chat cannot out-rank the character; instead the character steps aside
   while the chat is on screen (cafe-chat.js toggles html.cc-on) and comes back when you scroll away. */
html.cc-on .wato-egg { opacity: 0 !important; pointer-events: none !important; transition: opacity var(--t-3) var(--e-out) !important; }