/* ===========================================================================
   Fetti's chat box (C120, 2026-10-04) - the owner's pick from the samples board
   (claude.ai/artifact/RtGY3QNc6s8JLduKTt73Mk): Twilight by default, the other three as themes a
   visitor can switch to from inside the box; tiny sakura drops; gradient edges; collapses to a
   launcher and expands to a larger window. Shown only when Fetti can answer (fetti-chat.js).
   =========================================================================== */

.fc { --g1: #8FB6E8; --g2: #C9B3EC; --head-ink: #1E2440; --bubble: #F0EEFB; --bubble-ink: #1E2440; --me: #5B4FA3; --me-ink: #FFFFFF;
  --petal: #F1BFD0; --glow: rgba(143, 182, 232, .35); --fc-card: var(--paper-raised, #FFFFFF); --fc-ink: var(--ink, #17252B); --fc-rule: var(--rule-strong, #BCC2D8);
  position: fixed; left: clamp(.6rem, 2vw, 1.4rem); bottom: clamp(.6rem, 2vw, 1.4rem); z-index: 30; font-family: inherit; }
.fc.t-sakura { --g1: #E2A2B1; --g2: #F6C9A8; --head-ink: #3A1720; --bubble: #FCEFF2; --bubble-ink: #3A1720; --me: #274A78; --petal: #F3B8C6; --glow: rgba(226, 162, 177, .35); }
.fc.t-ai     { --g1: #274A78; --g2: #E2A2B1; --head-ink: #FFFFFF; --bubble: #EEF3FB; --bubble-ink: #17252B; --me: #274A78; --petal: #E9B3C1; --glow: rgba(39, 74, 120, .28); }
.fc.t-matcha { --g1: #8DBF8B; --g2: #F3E3B0; --head-ink: #1F3A1E; --bubble: #EEF6EA; --bubble-ink: #1F3A1E; --me: #3E6B3B; --petal: #F4C2CF; --glow: rgba(141, 191, 139, .35); }

/* the launcher, when collapsed */
.fc-launch { display: flex; align-items: center; gap: .5rem; padding: .35rem 1rem .35rem .35rem; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(120deg, var(--g1), var(--g2)); color: var(--head-ink); font: inherit; font-weight: 700; font-size: 1rem;
  box-shadow: 0 10px 26px var(--glow); }
.fc-launch .fc-avatar { width: 40px; height: 40px; }
.fc.open .fc-launch { display: none; }

/* the window */
.fc-win { display: none; width: min(380px, calc(100vw - 2rem)); height: min(560px, calc(100vh - 3rem)); border-radius: 22px; padding: 3px;
  background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 14px 34px var(--glow); }
.fc.open .fc-win { display: block; }
.fc.big .fc-win { width: min(560px, calc(100vw - 2rem)); height: min(760px, calc(100vh - 3rem)); }
.fc-in { position: relative; height: 100%; border-radius: 19px; background: var(--fc-card); overflow: hidden; display: grid; grid-template-rows: auto auto auto 1fr auto; }
.fc-head { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem .6rem .8rem; background: linear-gradient(120deg, var(--g1), var(--g2)); color: var(--head-ink); }
.fc-who { display: grid; line-height: 1.2; flex: 1; min-width: 0; }
.fc-who b { font-size: 1.05rem; }
.fc-who small { font-size: .78rem; opacity: .85; }
.fc-avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .75); display: grid; place-items: end center; overflow: hidden; flex: none; }
.fc-avatar .fetti { --fetti-size: 38px; margin-bottom: -6px; }
.fc-tool { width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .35); color: var(--head-ink); font: 700 1rem/1 inherit; display: grid; place-items: center; }
.fc-tool:hover { background: rgba(255, 255, 255, .6); }

/* the theme toggle, inside the box */
.fc-themes { display: none; gap: .5rem; padding: .5rem .8rem; border-bottom: 1px solid var(--fc-rule); background: var(--fc-card); flex-wrap: wrap; }
.fc.themes .fc-themes { display: flex; }
.fc-swatch { display: flex; align-items: center; gap: .4rem; border: 2px solid var(--fc-rule); border-radius: 999px; padding: .2rem .6rem .2rem .25rem; cursor: pointer;
  background: var(--fc-card); color: var(--fc-ink); font: inherit; font-size: .8rem; font-weight: 600; }
.fc-swatch i { width: 18px; height: 18px; border-radius: 50%; display: block; }
.fc-swatch[aria-pressed="true"] { border-color: var(--me); }

.fc-log { position: relative; overflow-y: auto; padding: .9rem; display: grid; gap: .6rem; align-content: start; }
.fc-msg { position: relative; z-index: 1; max-width: 84%; padding: .55rem .75rem; border-radius: 16px; font-size: .95rem; font-weight: 600; white-space: pre-line; overflow-wrap: anywhere; }
.fc-msg.f { background: var(--bubble); color: var(--bubble-ink); border-bottom-left-radius: 6px; justify-self: start; }
.fc-msg.u { background: var(--me); color: var(--me-ink); border-bottom-right-radius: 6px; justify-self: end; }
.fc-msg a { color: inherit; }
.fc-note { position: relative; z-index: 1; margin: 0; font-size: .78rem; color: var(--bubble-ink); opacity: .75; }
.fc-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .4rem; }
.fc-chips button { font: inherit; font-size: .82rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--g1); background: var(--fc-card); color: var(--bubble-ink); }
.fc-form { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid var(--fc-rule); background: var(--fc-card); position: relative; z-index: 1; }
.fc-form input { flex: 1; min-width: 0; font: inherit; font-size: .95rem; padding: .55rem .8rem; border-radius: 999px; border: 2px solid var(--field-edge, #7E86A3); color: var(--fc-ink); background: var(--fc-card); }
.fc-form input:focus { outline: none; border-color: var(--g1); }
.fc-form button { font: inherit; font-weight: 700; padding: 0 1rem; border: 0; border-radius: 999px; cursor: pointer; color: var(--head-ink); background: linear-gradient(120deg, var(--g1), var(--g2)); }
.fc :focus-visible { outline: 3px solid var(--me); outline-offset: 2px; }

/* tiny sakura drops, behind the conversation */
.fc-petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.fc-petals i { position: absolute; top: -12px; width: 8px; height: 6px; background: var(--petal); border-radius: 80% 0 80% 0; opacity: .7; animation: fc-fall linear infinite; }
@keyframes fc-fall { 0% { transform: translate(0, -10px) rotate(0); } 50% { transform: translate(14px, 260px) rotate(160deg); } 100% { transform: translate(-6px, 560px) rotate(320deg); } }
@media (prefers-reduced-motion: reduce) { .fc-petals i { animation: none; } }

@media (max-width: 620px) {
  .fc { left: .5rem; bottom: .5rem; }
  .fc.open .fc-win, .fc.big .fc-win { width: calc(100vw - 1rem); height: calc(100vh - 1rem); }
}

/* ---------------------------------------------------------------------------
   Opened from Fetti in the corner (C131): no launcher of its own; the box sits above her on
   the right, and on a phone it fills the screen.
   --------------------------------------------------------------------------- */
.fc.docked { left: auto; right: clamp(.6rem, 2vw, 1.4rem); bottom: 168px; z-index: 36; }
.fc.docked:not(.open) { display: none; }
.fd[data-chatting] .fetti-bubble { display: none; }

/* the gear: "Talk to me in" and "What should I call you?", moved in from the corner */
.fc-settings { display: none; gap: .6rem; padding: .6rem .8rem; border-bottom: 1px solid var(--fc-rule); background: var(--fc-card); color: var(--fc-ink); }
.fc.settings .fc-settings { display: grid; }
.fc-settings .fd-label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .25rem; }
.fc-settings .fd-select { width: 100%; }

/* "Leave your email and a person will reply" */
.fc-person { position: relative; z-index: 1; margin: .3rem 0; padding: .6rem .7rem; border-radius: 14px; border: 1px dashed var(--fc-rule); background: var(--fc-card); display: grid; gap: .45rem; }
.fc-person p { margin: 0; font-size: .88rem; color: var(--fc-ink); }
.fc-person-row { display: flex; gap: .4rem; }
.fc-person-row input { flex: 1; min-width: 0; font: inherit; font-size: .9rem; padding: .45rem .6rem; border-radius: 10px; border: 1px solid var(--field-edge, #7E86A3); }
.fc-person-row button { font: inherit; font-weight: 700; font-size: .85rem; padding: .45rem .8rem; border-radius: 10px; border: 0; cursor: pointer; background: var(--me); color: var(--me-ink, #fff); }
.fc-msg a { color: inherit; font-weight: 700; text-decoration: underline; }

@media (max-width: 620px) {
  .fc.docked { right: .5rem; left: .5rem; bottom: .5rem; }
}

/* The same glowing, looping edge and corner sakura as Fetti's speech bubble (owner, 2026-10-06). */
@keyframes fc-edge { to { background-position: 300% 0; } }
@keyframes fc-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
.fc-win {
  position: relative;
  background: linear-gradient(120deg, var(--g1), var(--g2), #F6C9A8, var(--g1)) 0 0 / 300% 100%;
  animation: fc-edge 9s linear infinite;
  box-shadow: 0 0 22px var(--glow), 0 14px 34px var(--glow);
}
.fc-win::before {
  content: '';
  position: absolute;
  top: -12px;
  right: -8px;
  width: 44px;
  height: 36px;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 28'%3E%3Cpath fill='%23F3B8C6' d='M8 6c4-5 10-2 8 4-5 3-9 1-8-4z'/%3E%3Cpath fill='%23F8D3DD' d='M20 14c4-4 10-1 8 5-5 3-9 0-8-5z'/%3E%3Cpath fill='%23EFA6BA' d='M4 18c3-4 8-2 6 3-4 2-7 0-6-3z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: fc-sway 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .fc-win, .fc-win::before { animation: none; } }

/* The gear and the colours are a choice, not a place to live (owner, 2026-10-07: on a phone they showed as a sliver and could
   not be read). Each opens as a sheet over the conversation, directly under the header, with its own Done button, and the
   chat is there again the moment it is closed. fetti-chat.js sets --fc-head to the header's height. */
.fc-settings, .fc-themes {
  position: absolute; left: 0; right: 0; top: var(--fc-head, 58px); z-index: 6;
  max-height: calc(100% - var(--fc-head, 58px) - 8px); overflow-y: auto;
  box-shadow: 0 14px 24px rgba(23, 37, 43, .22);
}
.fc.settings .fc-settings { display: grid; }
.fc-themes { gap: .6rem; padding: .8rem; }
.fc-swatch { min-height: 44px; font-size: .9rem; padding: .3rem .8rem .3rem .3rem; }
.fc-done {
  justify-self: end; min-height: 44px; padding: 0 1.2rem; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--head-ink); background: linear-gradient(120deg, var(--g1), var(--g2));
}
.fc-settings select, .fc-settings input { min-height: 44px; font-size: 1rem; }

/* On a phone the chat is a sheet from the bottom, not the whole screen: the page stays visible above it, and the header
   always fits (dvh is the height that is actually visible, with the browser's own bars counted out). */
@media (max-width: 620px) {
  .fc.open .fc-win { width: calc(100vw - 1rem); height: min(72dvh, 560px); }
  .fc.big .fc-win { width: calc(100vw - 1rem); height: calc(100dvh - 1rem); }
}
.fc-done { order: 99; }