/* ============================================================
   Mitwa — customer feedback chat (/feedback)
   Built from the designer's Figma (file "mitwa.ai_website"):
     desktop chat 574:2494, desktop thanks 574:2519 (1512 x 982)
     phone chat 574:2097 / 2119 / 2143, phone thanks 574:2176 (393 x 852)
   Sizes and positions are the Figma values (and the designer's SVG exports).
   Not drawn in Figma, made from the site's own styles (agreed 2 Nov):
     AI "typing" dots, error lines and "Try again" (the careers form's
     error colour and link style), the message fade-in (the site's Fade).
   ============================================================ */
:root {
  --f-display: 'Syncopate', sans-serif;
  --f-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.19, 1, .22, 1);          /* the site's Fade */
  --box-ease: cubic-bezier(.4, 0, .2, 1);        /* the box growing: an even ease, no snap at the start (3 Nov) */
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; }
html:has(body.fb) { overflow: hidden; overscroll-behavior: none; }
body.fb { overflow: hidden; overscroll-behavior: none; color: #fff; font-family: var(--f-body); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }

/* ------------------------------------------------------------- chat */
/* Fixed to the visible part of the screen (feedback.js sets --vvh / --vvt from the iPhone's visualViewport) */
.fb-chat { position: fixed; left: 0; right: 0; top: 0; height: var(--vvh, 100dvh); transform: translate3d(0, var(--vvt, 0px), 0);
  overflow: hidden; --pill-h: 116px; --pill-b: 46px; }
/* Phones: slide with the keyboard instead of jumping (the user's video, 3 Nov) */
@media (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .fb-chat { transition: height .3s cubic-bezier(.25, .8, .25, 1); }
}

.fb-glows { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fb-glow { position: absolute; display: block; max-width: none; }
.fb-chat .g1 { left: calc(50% - 610.8px); top: -26.8px; width: 927.2px; height: 692.3px; }
.fb-chat .g2 { left: calc(50% - 229.8px); top: 146.2px; width: 927.2px; height: 692.3px; }

.fb-title { position: absolute; z-index: 3; top: 74px; left: 50%; margin: 0; transform: translateX(-50%);
  font: 400 25.657px/1.3 var(--f-display); color: #fff; white-space: nowrap; }

/* Older messages fade under the title once the chat scrolls (Figma 574:2174: black, fading over the last 86px). */
.fb-fade { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 196px; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 0, #000 86.25px); }
.fb-fade.on { opacity: 1; transition: none; }   /* on at once (text must never show over the title), off gently */

.fb-list { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: calc(var(--pill-b) + var(--pill-h));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 220.4px 0 108px; }
.fb-list::-webkit-scrollbar { display: none; }
.fb-col { position: relative; display: flex; flex-direction: column; width: min(1512px, 100%); margin: 0 auto; }

/* AI: plain text, the small orb beside the latest one only */
.fb-msg { position: relative; }
.fb-msg + .fb-msg { margin-top: 51px; }
.fb-ai { --ml: 154.5px; --mw: 505px; align-self: flex-start; margin-left: var(--ml); max-width: min(var(--mw), calc(100% - var(--ml) - 24px));
  font: 400 22px/1.3 var(--f-body); color: #fff; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-ai p { margin: 0; }
.fb-ai.greet { --ml: 169px; --mw: 476px; }   /* the fixed greeting: Figma 574:2497 (replies: 574:2501) */
/* The orb's place is fixed (88px from the left); desktop: beside the last line, phone: beside the middle */
.fb-orb { position: absolute; left: calc(88px - var(--ml)); bottom: 0; width: 28.454px; height: 28.454px; pointer-events: none; }
.fb-orb img { position: absolute; inset: -38.33%; width: 176.66%; height: 176.66%; display: block; max-width: none; }
.fb-orb { transition: opacity .3s ease; }
.fb-orb.past { opacity: .35; }   /* older AI messages (designer, 3 Nov: 50%, then 35%) */

/* The person: glass bubble on the right */
.fb-user { align-self: flex-end; margin-right: 83px; max-width: min(906px, calc(100% - 83px - 154.5px)); padding: 24.5px 36.5px; border-radius: 66.799px;
  background: rgba(65, 65, 65, .15); -webkit-backdrop-filter: blur(7.902px); backdrop-filter: blur(7.902px);
  font: 400 22px/normal var(--f-body); letter-spacing: -0.44px; text-align: right; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-user p { margin: 0; opacity: .68; }
/* Gradient border (Figma stroke: #C1C1C1 45% -> white 59% -> #999 10% at 97%), at 50% opacity (designer, 3 Nov: 25%, then 50%) */
.fb-user::before, .fb-pill::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2.348px; pointer-events: none; opacity: .5;
  background: linear-gradient(90deg, rgba(193, 193, 193, .449) 0%, #fff 57.14%, rgba(153, 153, 153, .1) 96.83%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* AI typing (site style): three soft dots on one text line */
.fb-dots { display: flex; align-items: center; gap: 7px; height: 28.6px; }
.fb-dots i { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .25; animation: fb-dot 1.2s ease-in-out infinite; }
.fb-dots i:nth-child(2) { animation-delay: .2s; }
.fb-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes fb-dot { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Errors (site style: the careers form's message colour and link button) */
.fb-err { align-self: flex-start; margin-left: 154.5px; max-width: min(505px, calc(100% - 154.5px - 24px)); font: 400 13px/1.5 var(--f-body); color: #ff5c5c; }
.fb-err p { margin: 0; }
.fb-retry { appearance: none; margin-top: 6px; padding: 8px 0; border: 0; background: none; color: #fff; cursor: pointer;
  font: 500 12px var(--f-body); letter-spacing: -0.02em; text-transform: uppercase; }
.fb-retry span { margin-left: 8px; font-size: 14px; }
.fb-retry:hover { opacity: .7; }

/* Fade-in for new messages and the thank-you (the site's Fade: blur 20px, slide up, 1.2s) */
.fb-in { animation: fb-in 1.2s var(--ease) both; }
@keyframes fb-in { from { filter: blur(20px); transform: translate3d(0, 100%, 0); } to { filter: blur(0); transform: translate3d(0, 0, 0); } }

/* --------------------------------------------------------- input pill */
.fb-input { position: absolute; z-index: 4; left: 50%; bottom: var(--pill-b); width: min(1014px, calc(100% - 48px)); margin: 0; transform: translateX(-50%); }
.fb-pill { position: relative; display: flow-root; min-height: 116px; border-radius: 90.787px;
  background: linear-gradient(90deg, rgba(65, 65, 65, .15), rgba(167, 167, 167, .15) 50%, rgba(65, 65, 65, .15));
  -webkit-backdrop-filter: blur(6.641px); backdrop-filter: blur(6.641px); }
.fb-pill::before { padding: 1.974px; }
.fb-pill textarea { display: block; width: 100%; height: 116px; margin: 0; padding: 44.58px 120px 44.58px 92px; border: 0; outline: 0; resize: none; overflow-y: hidden;
  background: none; color: #fff; caret-color: #fff; font: 500 22px/1.22 var(--f-body); letter-spacing: -0.66px; scrollbar-width: none; }
.fb-pill textarea::-webkit-scrollbar { display: none; }
/* Two lines or more (the designer's reference, 2 Nov): the text gets its own full-width row and the send
   button moves to a row underneath; the box grows upwards, 5 lines at most, then scrolls. */
/* The whole box animates its height (set by feedback.js), so it never overshoots when the layout switches (user's recording, 3 Nov) */
.fb-pill { transition: height .25s var(--box-ease), border-radius .25s var(--box-ease); }
/* Taller box: the bubbles' corner (Figma 574:2517) instead of the pill's, so the send button sits inside the curve (designer, 3 Nov) */
.fb-pill.multi { border-radius: 66.799px; }
/* the same 36px / 109.42px spacing as margins on the text (padding on the box would stop it animating from its old height;
   display: flow-root on the box keeps these margins inside it) */
.fb-pill.multi textarea { padding: 0 92px; margin: 36px 0 109.42px; }
.fb-measure { position: absolute !important; visibility: hidden; pointer-events: none; height: 0 !important; overflow: hidden !important; transition: none !important; }
.fb-list { transition: bottom .25s var(--box-ease); }
.fb-pill:focus-within { outline: none; }
.fb-ph { position: absolute; left: 92px; top: 44.58px; pointer-events: none; white-space: nowrap;
  font: 500 22px/1.22 var(--f-body); letter-spacing: -0.66px; color: transparent;
  background: linear-gradient(102.53deg, #fff 1.4088%, #999 85.582%); -webkit-background-clip: text; background-clip: text; }
.fb-ph.off { display: none; }
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fb-send { position: absolute; right: 16.2px; bottom: 14.58px; width: 86.84px; height: 86.84px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.fb-send img { position: absolute; display: block; max-width: none; pointer-events: none; }
.fb-send .s-fill { left: 0; top: 0; width: 85.754px; height: 85.754px; }
.fb-send .s-glow { left: -11.576px; top: -11.576px; width: 109.996px; height: 109.996px; }
.fb-send .s-ring { left: 0; top: 0; width: 86.84px; height: 86.84px; }
.fb-send .s-ring, .fb-send .s-glow { opacity: 1; }   /* the button's ring and glow at full strength, as in Figma (designer, 3 Nov) */
.fb-send .s-arrow { position: absolute; left: 26.05px; top: 26.05px; width: 37.63px; height: 37.63px; }
.fb-send .s-arrow > span { position: absolute; inset: 0; transform: rotate(-90deg) scaleY(-1); }
.fb-send .a-blur { left: -2.619px; top: -2.167px; width: 44.133px; height: 44.133px; }
.fb-send .a-sharp { left: 0; top: 0; width: 37.63px; height: 37.63px; }

/* ------------------------------------------------------------- thanks */
.fb-thanks { position: fixed; inset: 0; overflow: hidden; background: #000; }
.fb-thanks .t1 { left: calc(50% - 371.7px); top: calc(50% - 330.7px); width: 709.6px; height: 529.9px; }
.fb-thanks .t2 { left: calc(50% - 338.4px); top: calc(50% - 279.3px); width: 709.6px; height: 529.9px; }
/* The orb in the animation is 240px of its 600px canvas: 249.2px canvas = the design's 99.7px orb */
.fb-lottie { position: absolute; left: calc(50% - 124.6px); top: calc(50% - 59.15px - 124.6px); width: 249.2px; height: 249.2px; }   /* centred (designer, 3 Nov; Figma had it 9.7px left) */
.fb-lottie svg { display: block; }
.fb-thanks-text { position: absolute; top: calc(50% + 24.47px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6.042px; text-align: center; white-space: nowrap; }
.fb-big { position: relative; margin: 0; font: 700 49.512px/1 var(--f-display); letter-spacing: -2.9707px; color: transparent;
  background: linear-gradient(180.08deg, rgba(255, 255, 255, .6) 20.335%, rgba(255, 255, 255, 0) 99.637%); -webkit-background-clip: text; background-clip: text; }
.fb-big-blur { position: absolute; top: 1.81px; left: 50%; transform: translateX(-50%); filter: blur(3.095px); }
.fb-sub { margin: 0; font: 300 22px/normal var(--f-body); color: #fff; }

/* ---------------------------------------------------- phone (393 frame) */
@media (max-width: 767px) {
  .fb-chat { --pill-h: 59px; --pill-b: calc(17px + env(safe-area-inset-bottom)); }
  .fb-chat .g1 { left: calc(50% - 222.9px); top: 4.5px; width: 469.8px; height: 350.8px; }
  .fb-chat .g2 { left: calc(50% - 229.9px); top: 209.6px; width: 469.8px; height: 350.8px; }
  .fb-title { top: 69px; font-size: 13px; }   /* 12px higher than Figma's 81px (designer, 3 Nov: 10–15px up) */
  .fb-fade { height: 187px; }
  .fb-list { padding: 155.3px 0 68px; }
  .fb-msg + .fb-msg { margin-top: 30px; }
  .fb-ai { --ml: 58.5px; --mw: 267.9px; max-width: min(var(--mw), calc(100% - var(--ml) - 16px)); }   /* AI replies end where the greeting ends (63 + 263.4px; designer, 3 Nov) */
  .fb-ai.greet { --ml: 63px; --mw: 263.4px; }   /* Figma 574:2154: 214px at 13px, scaled to 16px so the lines break as designed */
  .fb-err { margin-left: 58.5px; max-width: min(259px, calc(100% - 58.5px - 16px)); }
  .fb-ai { font-size: 16px; }   /* 16px on phones (designer, 3 Nov; Figma 13px) */
  .fb-orb { left: calc(28px - var(--ml)); top: 50%; bottom: auto; width: 17.28px; height: 17.28px; transform: translateY(-50%); }
  .fb-user { margin-right: 14px; max-width: min(287px, calc(100% - 28px)); padding: 16.9px 23px; border-radius: 28.444px;
    -webkit-backdrop-filter: blur(3.365px); backdrop-filter: blur(3.365px); font-size: 16px; letter-spacing: -0.32px; }
  .fb-user::before, .fb-pill::before { padding: 1px; }
  .fb-dots { gap: 4px; height: 20.8px; }
  .fb-dots i { width: 4px; height: 4px; }

  .fb-input { width: min(374px, calc(100% - 19px)); }
  .fb-pill { min-height: 59px; border-radius: 46px; -webkit-backdrop-filter: blur(3.365px); backdrop-filter: blur(3.365px); }
  /* 16px on phones (agreed 2 Nov): smaller text makes iPhones zoom into the box */
  .fb-pill textarea { height: 59px; padding: 19.74px 60px 19.74px 24px; font-size: 16px; letter-spacing: -0.48px; }
  .fb-ph { left: 0; right: 0; top: 19.74px; text-align: center; font-size: 16px; letter-spacing: -0.48px; }
  .fb-pill.multi { border-radius: 28.444px; }
  .fb-pill.multi textarea { padding: 0 24px; margin: 14px 0 55.5px; }
  .fb-send { right: 7px; bottom: 7.5px; width: 44px; height: 44px; }
  .fb-send .s-fill { width: 43.45px; height: 43.45px; }
  .fb-send .s-glow { left: -5.867px; top: -5.867px; width: 55.733px; height: 55.733px; }
  .fb-send .s-ring { width: 44px; height: 44px; }
  .fb-send .s-arrow { left: 13.2px; top: 13.2px; width: 19.067px; height: 19.067px; }
  .fb-send .a-blur { left: -1.327px; top: -1.098px; width: 22.361px; height: 22.361px; }
  .fb-send .a-sharp { width: 19.067px; height: 19.067px; }

  .fb-thanks .t1 { left: calc(50% - 251.9px); top: calc(50% - 240.4px); width: 469.8px; height: 350.8px; }
  .fb-thanks .t2 { left: calc(50% - 229.9px); top: calc(50% - 206.4px); width: 469.8px; height: 350.8px; }
  .fb-lottie { left: calc(50% + 0.5px - 82.5px); top: calc(50% - 33px - 82.5px); width: 165px; height: 165px; }
  .fb-thanks-text { top: calc(50% + 51.2px); gap: 3.87px; }
  .fb-big { font-size: 32.79px; letter-spacing: -1.967px; }
  .fb-big-blur { top: 1.2px; filter: blur(2.05px); }
  .fb-sub { font-size: 12.29px; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-in { animation: none; }
  .fb-pill textarea, .fb-list, .fb-pill { transition: none; }
  .fb-dots i { animation: none; opacity: .6; }
  .fb-fade { transition: none; }
}