/* ASK UNICIVERSE (2026-09-19): Ask UniciView's chat.css one to one; only the
   colours are Uniciverse (navy #002454 / gold #FACE72-#F8A500 / cream #FFF8E9). */
/* ===========================================================================
   ASK UNICIVIEW — the chat overlay
   Jose, 2026-08-28: "it will be an overlay page, not a new page because this
   Ask UniciView button is almost everywhere. You press X and it closes. The
   page should cover the entire screen on all 3 tiers, not a corner like other
   pages do. Colors on this page should be monochromatic and simple... white
   background easy to read and write. Chatting page partner, as simple as that."

   WHY THIS ONE FILE IGNORES THE FATHER SCALE, deliberately and on the record.
   Every other surface here is a fixed canvas (1920/1024/390) scaled as one
   piece, because every other surface is a COMPOSITION somebody designed and
   approved. This is not a composition, it is a tool: there is no artboard for
   it, its content is written by the visitor at runtime, and it has to fill the
   screen rather than sit letterboxed in the middle of it.

   So it follows the .mnav precedent instead (DEC-226): it lives OUTSIDE
   #viewport, is position:fixed, and therefore is never touched by the canvas
   transform. The page underneath keeps its tier untouched.

   Type is NOT scaled by tier either. A composition scales; reading does not.
   16px stays 16px at every width - and on the composer that is load-bearing,
   because iOS zooms the whole page when a focused input is under 16px.
   =========================================================================== */

.chat {
  /* Monochrome, and that is the whole palette. The only colour on this
     surface is the logo, which is why it reads as a brand mark instead of
     decoration. */
  --c-bg:    #ebe3d3;
  --c-ink:   #0b1b33;   /* body text                                        */
  --c-mut:   #6b6558;   /* timestamps, hints, the assistant's name          */
  --c-line:  #d8ccb3;   /* hairlines                                        */
  --c-bub:   #dfd3b8;   /* the visitor's own message                        */
  --c-field: #f4eee2;   /* composer well                                    */

  --c-col:   720px;     /* reading column - long lines are what make a chat
                           tiring, and the screen being 1920 does not mean a
                           sentence should be                               */
  --c-pad:   24px;

  position: fixed;
  inset: 0;
  z-index: 10000;       /* over everything: the toast sits at 9999          */
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.chat[hidden] { display: none; }

/* ============================ DARK ========================================
   ONE set of tokens, redefined. Nothing below this line in the file knows
   which mode it is in - if a colour had been written literally anywhere, dark
   mode would be a second stylesheet instead of nine lines.

   The class sits on <html> so the pill and the corner warning follow the same
   choice: to a visitor they are all one widget. */
.chat-dark .chat {
  --c-bg:    #06142b;
  --c-ink:   #f3eee2;
  --c-mut:   #a99f86;
  --c-line:  #1e3252;
  --c-bub:   #102a50;
  --c-field: #0a1c3a;
}
.chat-dark .chat__send { background: linear-gradient(0deg,#F8A500 6.3%,#FACE72 95%); color: #000; }
.chat-dark .chat__ava, .chat-dark .chat__from img, .chat-dark .chat__pill img {
  /* The mark is black artwork, and these three sit on a DISC - so on a dark
     bar the disc turns light and the artwork stays as drawn.
     The opening HERO is the opposite case: no disc, nothing behind it, so it
     inverts instead (see .chat__hero). Same mark, two correct answers,
     because the question is what is behind it. */
  background: #ececec;
}
.chat-dark .chat__askbox { box-shadow: 0 12px 34px rgba(0,0,0,.5); }
.chat-dark .chat__ask { background: rgba(23,24,26,.72); }
.chat-dark .chat__askok { background: #ececec; color: #17181a; }
/* The BELL follows the theme; the PILL does not. A status light that changed
   colour with the theme would stop being a status light. */
.chat-dark .chat__bell {
  background: #17181a; color: #ececec; border-color: #2c2e31;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
}
.chat-dark .chat__bellk { background: #ececec; color: #17181a; }
.chat-dark .chat__bellx:hover { background: #26282b; color: #ececec; }

/* ===================== DOCKED — the corner panel ==========================
   Jose: "a tier for the chat window that will be in the bottom right quadrant
   of the page... similar to those chat bot windows we see in other webpages."

   The geometry is the easy half. The important half is in js: docking DROPS
   THE SCROLL LOCK and the modal role, because the whole point is to give the
   page back. A small window floating over a page you cannot scroll is the
   worst of both worlds.

   Desktop and tablet only - on a 390px phone, a docked panel IS the screen. */
.chat--docked {
  inset: auto 20px 20px auto;
  width: 396px;
  height: min(620px, calc(100vh - 40px));
  border: 1px solid var(--c-line);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.20);
  overflow: hidden;                 /* so the header corners actually round  */
  --c-col: 100%;                    /* no reading column inside 396px        */
  --c-pad: 16px;
}
.chat-dark .chat--docked { box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.chat--docked .chat__bar { padding-top: 12px; }
.chat--docked .chat__inner { padding-top: 16px; gap: 18px; }
.chat--docked .chat__hello h2 { font-size: 18px; }
.chat--docked .chat__bubble { max-width: 92%; }
.chat--docked .chat__form { padding: 12px var(--c-pad); }
.chat--docked .chat__hint { padding: 0 var(--c-pad) 10px; font-size: 11px; }
/* The in-chat dialogue must not overflow a 396px panel. */
.chat--docked .chat__askbox { max-width: 300px; margin: 0 14px; padding: 18px; }

.tier-tablet .chat--docked { width: 360px; height: min(560px, calc(100vh - 36px)); }

/* ------------------------------------------------- the header icon buttons */
.chat__ico {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none;
  color: var(--c-mut);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background .12s, color .12s;
}
.chat__ico:hover { background: var(--c-bub); color: var(--c-ink); }
.chat__ico:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.chat__i { width: 18px; height: 18px; display: block; }
/* Each button holds both icons and CSS picks one: swapping innerHTML on click
   drops the focus ring mid-press. */
.chat__i--b { display: none; }
.chat-dark .chat__theme .chat__i--a { display: none; }
.chat-dark .chat__theme .chat__i--b { display: block; }
.chat--docked .chat__dock .chat__i--a { display: none; }
.chat--docked .chat__dock .chat__i--b { display: block; }
/* No corner to dock into on a phone. */
.tier-phone .chat__dock { display: none; }

/* Nothing behind it may scroll while it is open. Set by js on <html>. */
.chat-open, .chat-open body { overflow: hidden; }

/* --------------------------------------------------------------- the bar */
.chat__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--c-pad);
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
}
.chat__ava {
  /* Jose, 2026-08-29: "I think 20% is the sweet spot." Written as base x 1.2 rather than a typed
     38.4px, so the instruction stays readable next to the number - and so the
     phone tier below only has to restate its BASE and inherits the same
     proportion instead of someone re-doing the arithmetic (DEC-228). */
  --ava-base: 32px;
  width: calc(var(--ava-base) * 1.2);
  height: calc(var(--ava-base) * 1.2);
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 50%;
  background: var(--c-bub);
  padding: 4px;
}
.chat__who { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.chat__sub { font-size: 12px; color: var(--c-mut); font-weight: 400; }
.chat__spacer { flex: 1 1 auto; }

.chat__x {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: none;
  color: var(--c-mut);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  /* -webkit-appearance so iOS does not paint its own button chrome. */
  -webkit-appearance: none; appearance: none;
  transition: background .12s, color .12s;
}
.chat__x:hover  { background: var(--c-bub); color: var(--c-ink); }
.chat__x:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* --------------------------------------------------------------- the log */
.chat__log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;   /* no scroll-chaining to the page behind  */
  -webkit-overflow-scrolling: touch;
}
.chat__inner {
  max-width: var(--c-col);
  margin: 0 auto;
  padding: 24px var(--c-pad) 8px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* A message. The visitor gets a bubble; UniciView does not - same asymmetry
   every good assistant UI uses, because the assistant's text is the content
   of the page and the visitor's is a quotation of what they said. */
.chat__m { display: flex; flex-direction: column; max-width: 100%; }
.chat__m--you { align-items: flex-end; }

.chat__bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--c-bub);
  white-space: pre-wrap;           /* their newlines survive               */
  overflow-wrap: anywhere;         /* a pasted URL cannot widen the column */
}
/* The assistant's message is now real blocks, not pre-wrapped text, so it can
   give somebody STEPS as steps. Jose: "we always have to consider those who
   like a more bullet style when giving steps." */
.chat__body { overflow-wrap: anywhere; }
.chat__body > :first-child { margin-top: 0; }
.chat__body > :last-child { margin-bottom: 0; }
.chat__body p { margin: 0 0 12px; }
/* A bold-only line was reaching to be a heading; let it be one. */
.chat__body .chat__h {
  margin: 18px 0 8px; font-weight: 600; letter-spacing: -0.01em;
}
.chat__body ul, .chat__body ol { margin: 0 0 12px; padding-left: 22px; }
/* THE MARKER GOES ON THE <li>, NOT THE LIST. The site's reset sets
   `list-style: none` directly on li, and a rule on the child beats a value
   inherited from its parent - so styling only the ol/ul produced a numbered
   list with no numbers. It looked like an indent bug in the screenshot; it was
   a cascade one, and only measuring listStyleType on the LI said so. */
.chat__body li { margin: 0 0 6px; padding-left: 2px; }
.chat__body ul > li { list-style-type: disc; }
.chat__body ol > li { list-style-type: decimal; }
.chat__body li::marker { color: var(--c-mut); }
.chat__body strong { font-weight: 600; }

/* ===== THE GATE, AND THE BAN — both said INSIDE the chat ==================
   Jose, 2026-08-29: "he can open it up but directly INSIDE THE CHAT, please
   register or sign in and you put both buttons... below the text with the eye
   we just did." And for a banned account: "the message please contact the
   email will be inside the chat and the prompt field will be disabled."

   Both replace a modal that used to sit OVER the chat. A card in the log is
   better for the same reason in both cases: the person is already looking
   there, and a message in the conversation is part of the conversation rather
   than an interruption of it. Neither is red - nothing has gone wrong with the
   site, and red is kept for things that broke (DEC-233). */
.chat__gate, .chat__banned {
  align-self: center;
  width: 100%; max-width: 460px;
  margin-top: 4px;
  padding: 22px 24px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-bg);
  text-align: center;
}
.chat__gatet, .chat__bannedt {
  margin: 0 0 8px; font-size: 16px; font-weight: 700;
  line-height: 1.35; letter-spacing: -0.01em; color: var(--c-ink);
}
.chat__gateb, .chat__bannedb {
  margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--c-mut);
}
.chat__bannedb:last-of-type { margin-bottom: 18px; }
.chat__bannedb a { color: var(--c-ink); font-weight: 600; }

/* THE APPEAL. Mr. Tamer's third card asks a question, so it needs somewhere to
   answer - left-aligned inside a centred card, because prose you are writing
   is read left to right even when the invitation above it is centred. */
.chat__appeall {
  display: block; text-align: left;
  margin: 2px 0 6px; font-size: 13px; font-weight: 600; color: var(--c-ink);
}
.chat__appealin {
  display: block; width: 100%; box-sizing: border-box;
  margin: 0 0 14px; padding: 10px 12px;
  border: 1px solid var(--c-line); border-radius: 10px;
  background: var(--c-field); color: var(--c-ink);
  font-family: inherit; font-size: 16px;   /* 16 or iOS zooms the page */
  line-height: 1.5; resize: vertical; min-height: 88px;
}
.chat__appealin:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 1px; }
/* Invalid is a CONTOUR, never a colour word and never a browser dialogue
   (DEC-224). Two pixels, drawn as border + ring so nothing shifts. */
.chat__appealin.is-bad { border-color: #d92d20; box-shadow: inset 0 0 0 1px #d92d20; }
.chat__appealerr {
  margin: -8px 0 12px; text-align: left;
  font-size: 13px; line-height: 1.45; color: #d92d20;
}
.chat__appealbtn { min-height: 44px; padding: 0 26px; border-radius: 999px;
                   font-size: 15px; font-weight: 500; }
.chat__appealbtn:disabled { background: #c9cfdb; color: #f4f6fa; cursor: not-allowed; }

/* The SAME pair as the Smart Campaign dialogue, mirrored the same way, so a
   visitor meets one button pair on this site rather than two that merely
   resemble each other. The gradient tokens come from site.css. */
.chat__gatea { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.chat__gateup, .chat__gatein {
  min-height: 44px; padding: 0 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 500; color: #fff;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.chat__gateup { background: var(--grad); color: #000; }
.chat__gatein { background: var(--grad-rev); }
.chat__gateup:hover, .chat__gatein:hover {
  transform: translateY(-2px); box-shadow: 0 10px 26px rgba(248,165,0,.35);
  filter: saturate(1.08);
}
.chat__gateup:active, .chat__gatein:active { transform: translateY(0); }
.chat__gateup:focus-visible, .chat__gatein:focus-visible {
  outline: 2px solid var(--c-ink); outline-offset: 3px;
}

/* A shut composer must LOOK shut, or it reads as a page that broke (DEC-236). */
.chat__in:disabled { background: transparent; color: var(--c-mut); cursor: not-allowed; }
.chat__well:has(.chat__in:disabled) { opacity: .55; }

/* ============== ACTION BUTTONS — "go here", with a button =================
   Tamer's challenge. They sit UNDER the message, never inside the prose: a
   link buried in a sentence is a thing you might miss, and the whole point is
   that the next step is unmissable.

   Real anchors with real hrefs - middle-click, open-in-new-tab and the status
   bar all behave, and a visitor can see where it goes before pressing it. */
.chat__go {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
}
/* THE SITE'S OWN BUTTON, not a chat button. Jose: "make it same colour style
   as the page's button. This will give users an impression it is the UniciView
   page button."

   That is the right instinct and it is stronger than a style preference: the
   whole point of these is that the assistant is handing over the SAME action
   the page offers. If the label is the page's words (it is - the destinations
   are read off the site) and the button looks like the page's button, then
   "go here -> Start My Campaign" is one thing said once. A differently styled
   button would quietly say "this is the chatbot's version of it".

   --grad and --radius are the site's own tokens; they are not repeated here,
   so a rebrand reaches these without anybody remembering they exist. */
.chat__gob {
  display: inline-flex; align-items: center; gap: .4em;
  padding: 11px 18px;
  border: 0; border-radius: var(--radius, 15px);
  background: var(--grad, linear-gradient(0deg,#F8A500 6.3%,#FACE72 95%));
  color: #000;
  font-size: 14px; font-weight: 500; line-height: 1.21;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.chat__gob:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(61,46,251,.32);
  filter: saturate(1.08);
}
.chat__gob:active { transform: translateY(0); }
.chat__gob:focus-visible { outline: 2px solid #F8A500; outline-offset: 3px; }
.chat__gob svg { width: 13px; height: 13px; display: block; }
/* A second and third suggestion are alternatives, not equals - only the first
   carries the site's gradient, so the recommendation stays legible as one. */
.chat__gob ~ .chat__gob {
  background: none; color: var(--c-ink);
  border: 1px solid var(--c-line);
  padding: 10px 17px;
}
.chat__gob ~ .chat__gob:hover {
  border-color: var(--c-ink); box-shadow: none; filter: none;
}
.chat--docked .chat__gob { font-size: 13px; padding: 8px 12px; }

/* THE MINIMISED PILL. Jose: "if a chat is already open and running, if user
   closes chat a small minimized pill to the right bottom corner (this is more
   cache and stylized)."

   Only for a signed-in visitor with a live conversation - for anyone else
   closing WIPES, so a pill offering to reopen would be offering nothing. */
/* GREEN, AND BIGGER. Jose: "the pill is white and gets lost with the page
   colour palette. Make it bigger and greenish so the user's eyes will always
   tell him hey you have a chat here."

   Green is the right colour for a reason beyond contrast: this site's whole
   palette is blue and violet, so green is the one hue that belongs to nothing
   else on the page and therefore reads as a STATUS rather than as decoration.
   It also does not spend red, which stays reserved for things that went wrong
   (DEC-233) - a waiting conversation is good news. */
.chat__pill {
  position: fixed; right: 24px; bottom: 24px; z-index: 9998;
  display: flex; align-items: center; gap: 8px;
  /* THE PILL'S HEIGHT IS NOW A STATED FACT, not the accident of whatever the
     disc and the padding happened to add up to - because the disc is derived
     FROM it. --pillgap is the one distance Jose named, "barely 3 to 4 px"
     between the white circle and the green edge, and it is the left inset and
     the top and bottom inset at once: the disc is centred, so setting the
     height and the gap fixes all three.

     The right padding is 17 rather than 22, and the flex gap 8 rather than 11.
     That is not a design change, it is arithmetic: the disc grew 16px and the
     left inset shrank 8, so 8px has to come out of the two lengths in here
     that carry no meaning, or the pill gets wider - and the one thing Jose
     asked for is that it does not. */
  --pillh: 54px;
  --pillgap: 4px;
  height: var(--pillh);
  /* 20, not 17: the pill has THREE flex children - the disc, the label and the
     status dot - so the gap is applied TWICE and trimming it 11->8 gave back 6px,
     not 3. Caught by the measurement, not by the arithmetic. */
  padding: 0 20px 0 var(--pillgap);
  border: 0; border-radius: 999px;
  background: linear-gradient(0deg, #F8A500 6.3%, #FACE72 95%);
  color: #000;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 15px; font-weight: 600; line-height: 1;
  letter-spacing: -0.01em;
  /* A green glow as well as a shadow: on a pale lilac page a neutral shadow
     disappears, and the halo is what makes it findable at a glance. */
  box-shadow: 0 10px 30px rgba(248,165,0,.38), 0 2px 8px rgba(0,0,0,.35), inset 0 0 0 1px #FFF8E9;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  animation: chat-pill-in .2s ease-out;
}
@keyframes chat-pill-in { from { opacity:0; transform:translateY(10px) scale(.96); }
                          to   { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .chat__pill { animation: none; } }
.chat__pill:hover { box-shadow: 0 14px 38px rgba(248,165,0,.55), 0 2px 8px rgba(0,0,0,.35), inset 0 0 0 1px #FFF8E9; }
.chat__pill:focus-visible { outline: 3px solid #FACE72; outline-offset: 3px; }
/* The mark is black artwork, so it keeps its own white disc on the green -
   inverting it would turn the brand into a negative. */
.chat__pill img { width: calc(var(--pillh) - 2 * var(--pillgap));
                  height: calc(var(--pillh) - 2 * var(--pillgap));
                  object-fit: contain;
                  border-radius: 50%; background: #002454; padding: 4px; }
/* A quiet dot that BREATHES - the conversation is alive and waiting, not
   urgent. A red badge would shout; a slow pulse just says "still here".
   Jose: "you can put an animation that the chat is there." */
.chat__pilld {
  width: 8px; height: 8px; border-radius: 50%; background: #16c75e;
  box-shadow: 0 0 6px rgba(22,199,94,.9);            /* green = online (Jose, 2026-09-19) */
  animation: chat-pulse 2.4s ease-in-out infinite;
}
@keyframes chat-pulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1); }
}
/* One soft ring on the avatar, on the same slow beat. */
.chat__pill img { animation: chat-halo 2.4s ease-in-out infinite; }
@keyframes chat-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: 0 0 0 4px rgba(0,36,84,.25); }
}
@media (prefers-reduced-motion: reduce) {
  .chat__pilld, .chat__pill img { animation: none; }
  .chat__pilld { opacity: .8; }
}

/* ---- the pill across the tiers ------------------------------------------
   A pill is a desktop shape. It does not survive being shrunk, so it changes
   FORM rather than size on the smaller tiers. */

/* Tablet: same pill, tucked in, and a touch target that clears 44px. */
.tier-tablet .chat__pill {
  right: 16px; bottom: 16px;
  --pillh: 48px;
  padding: 0 19px 0 var(--pillgap);   /* two gaps, same as desktop */
  gap: 8px;
  font-size: 15px;
}
/* No img rule here any more: the disc follows --pillh on its own. 40px. */

/* Phone: the word goes and it becomes a round button - there is no room for a
   label beside a fixed bottom nav, and a circle is what a thumb expects in
   that corner. It sits ABOVE the purple nav (DEC-226: --mnav-h is measured,
   never guessed) and clears the home indicator. */
.tier-phone .chat__pill {
  right: 14px;
  bottom: calc(var(--mnav-h, 55px) + 16px + env(safe-area-inset-bottom, 0px));
  width: 60px; --pillh: 60px;
  padding: 0; gap: 0;
  justify-content: center;
  border-radius: 50%;
}
.tier-phone .chat__pill span:not(.chat__pilld) { display: none; }
/* ON THE SAME LINE, always. The label grew from "UniciView" to "Ask
   UniciView" on 2026-08-29; a flex item is allowed to wrap, and a pill that
   breaks onto two lines stops being a pill. */
.chat__pillw { white-space: nowrap; }
/* The phone circle is 60px and the disc is now 52 of it, so the eye reads at
   arm's length instead of floating in a green field. Nothing about the button
   itself changes - it is the same 60px target a thumb already knows. */
.tier-phone .chat__pill img { padding: 4px; }
/* The dot moves to the corner of the circle, where a badge belongs. */
.tier-phone .chat__pilld {
  position: absolute; top: 5px; right: 5px;
  width: 10px; height: 10px;
  box-shadow: 0 0 0 2px #F8A500, 0 0 6px rgba(22,199,94,.9);
}
.chat__from {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 6px;
  font-size: 12px; font-weight: 600; color: var(--c-mut);
}
.chat__from img { width: 18px; height: 18px; object-fit: contain; }

/* Waiting. Three dots, because a spinner promises speed and this does not. */
.chat__dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.chat__dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-mut); opacity: .35;
  animation: chat-dot 1.2s infinite ease-in-out;
}
.chat__dots i:nth-child(2) { animation-delay: .15s; }
.chat__dots i:nth-child(3) { animation-delay: .30s; }
@keyframes chat-dot { 0%,60%,100% { opacity:.25; transform:translateY(0); }
                      30%         { opacity:.9;  transform:translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .chat__dots i { animation: none; opacity: .5; }
}

/* The opening line, before anybody has said anything.

   CENTRED — the mark and the words on ONE axis (Jose, 2026-08-29, choosing it
   against the alternatives: "C — both centred — matches Tamer's reference
   exactly"). The greeting is the only centred block in the chat, and that is
   the point: everything after it is conversation, which is read left to right,
   turn by turn. This is the thing you arrive at. */
.chat__hello { padding: 8px 0 4px; text-align: center; }

/* THE MARK ABOVE THE TEXT (Mr. Tamer, 2026-08-29, pointing at the Rishi
   assistant as the pattern). Centred over the greeting, on every tier -
   full overlay, docked, tablet and phone.

   ON THE DARK THEME IT INVERTS. The artwork is black with white knocked out
   of the globe, so on a near-black background it all but disappears. One
   filter turns it into exactly what Mr. Tamer described - a white eye - and
   the globe's continents invert with it, which is what makes it read as a
   proper negative rather than a smudge. A second white PNG would have been a
   second file to keep in step with the first (DEC-243). */
.chat__hero {
  --hero: 64px;
  display: block;
  width: var(--hero); height: var(--hero);
  margin: 0 auto 18px;
  object-fit: contain;
}
.chat-dark .chat__hero { filter: none; }
/* A docked panel is 396px wide and its whole job is to stay out of the way. */
.chat--docked .chat__hero { --hero: 44px; margin-bottom: 14px; }
.chat__hello h2 {
  margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
}
/* Body colour, not the muted grey it used to be: Mr. Tamer's opening is the
   assistant introducing itself, and it reads as black in his design. --c-ink
   rather than #000 so the dark theme still inverts (it is #ececec there). */
.chat__hello p { margin: 0 0 10px; color: var(--c-ink); }
.chat__hello p:last-child { margin-bottom: 0; }
.chat__hello strong { font-weight: 700; }

/* A closed conversation: said plainly, in the log, so it is not a surprise. */
.chat__note {
  align-self: center; max-width: 90%;
  padding: 8px 14px; border: 1px solid var(--c-line); border-radius: 999px;
  font-size: 13px; color: var(--c-mut); text-align: center;
}

/* The one-minute warning. Amber-ish grey rather than red: nothing has gone
   wrong, something is about to end (DEC-233 - red is for things that broke). */
.chat__note--warn { border-color: #d8d8d8; background: #fafafa; color: #4a4a4a; }

/* The closing warning. OUR dialogue, never window.confirm (DEC-224): it sits
   inside the overlay, it is dismissible only by its own button, and the button
   does what it says - it keeps the chat alive. */
.chat__ask {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  z-index: 5;
}
.chat__askbox {
  max-width: 320px; margin: 0 20px;
  padding: 22px 24px 18px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0,0,0,.13);
  text-align: center;
}
.chat__askt { margin: 0 0 6px; font-size: 16px; font-weight: 600;
               letter-spacing: -0.01em; }
.chat__askb { margin: 0 0 18px; font-size: 14px; line-height: 1.5;
              color: var(--c-mut); }
/* The quiet way out. It must be reachable and must NOT compete with the
   primary - a second heavy button turns a choice into a coin toss. */
.chat__askno {
  display: block; margin: 10px auto 0;
  border: 0; background: none;
  font: inherit; font-size: 13px; color: var(--c-mut);
  text-decoration: underline; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.chat__askno:hover { color: var(--c-ink); }
.chat__askno:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.chat__askok {
  display: inline-block;
  padding: 9px 18px;
  border: 0; border-radius: 999px;
  background: var(--c-ink); color: #fff;
  font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.chat__askok:hover { opacity: .85; }
.chat__askok:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* THE PAGE-LEVEL WARNING — for when the overlay is shut and they are reading
   the site. It lives on <body>, not inside .chat, so it survives the overlay
   being hidden; top-centre and fixed, like the site's toast, but neutral
   rather than red because nothing has gone wrong (DEC-233). */
.chat__bell {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 10001;                     /* above the overlay itself            */
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 24px);
  padding: 10px 10px 10px 16px;
  border: 1px solid #e2e2e2; border-radius: 999px;
  background: #fff; color: #1a1a1a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 1.3;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
  animation: chat-bell-in .22s ease-out;
}
@keyframes chat-bell-in { from { opacity:0; transform:translate(-50%,-8px); }
                          to   { opacity:1; transform:translate(-50%,0); } }
@media (prefers-reduced-motion: reduce) { .chat__bell { animation: none; } }

.chat__bellt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__bellk {
  flex: 0 0 auto;
  padding: 7px 14px; border: 0; border-radius: 999px;
  background: #1a1a1a; color: #fff;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.chat__bellk:hover { opacity: .85; }
.chat__bellx {
  flex: 0 0 auto;
  width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 50%; background: none;
  color: #6f6f6f; font-size: 18px; line-height: 1; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.chat__bellx:hover { background: #f4f4f4; color: #1a1a1a; }
.chat__bellk:focus-visible, .chat__bellx:focus-visible {
  outline: 2px solid #1a1a1a; outline-offset: 2px;
}
/* A phone has no room for a nowrap line plus two buttons on one row. */
.tier-phone .chat__bell {
  left: 12px; right: 12px; transform: none; max-width: none;
  border-radius: 16px; flex-wrap: wrap;
}
.tier-phone .chat__bellt { white-space: normal; flex: 1 1 100%; }

/* ---------------------------------------------------------- the composer */
.chat__foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.chat__form {
  max-width: var(--c-col);
  margin: 0 auto;
  padding: 14px var(--c-pad);
  display: flex; align-items: flex-end; gap: 10px;
}
.chat__well {
  flex: 1 1 auto;
  display: flex; align-items: flex-end;
  border: 1px solid var(--c-line);
  border-radius: 22px;
  background: var(--c-field);
  padding: 6px 6px 6px 16px;
  transition: border-color .12s;
}
.chat__well:focus-within { border-color: #bdbdbd; }

.chat__in {
  flex: 1 1 auto;
  border: 0; background: none; resize: none;
  font: inherit;
  font-size: 16px;                 /* NOT smaller: iOS zooms below 16       */
  line-height: 1.5;
  color: var(--c-ink);
  padding: 7px 0;
  max-height: 168px;               /* ~7 lines, then it scrolls             */
  overflow-y: auto;
}
.chat__in:focus { outline: none; }
.chat__in::placeholder { color: #a6a6a6; }

.chat__send {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--c-ink); color: #fff;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: opacity .12s;
}
.chat__send svg { width: 16px; height: 16px; display: block; }
/* Disabled must LOOK disabled, not just refuse (DEC-224). */
.chat__send:disabled { opacity: .28; cursor: default; }
.chat__send:not(:disabled):hover { opacity: .85; }
.chat__send:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

.chat__hint {
  max-width: var(--c-col);
  margin: 0 auto;
  padding: 0 var(--c-pad) 12px;
  font-size: 11.5px; color: var(--c-mut); text-align: center;
}

/* ============================ tiers =======================================
   The overlay is fluid, but the TIER still decides how much room the chrome
   takes. A phone gives its width to the words; a desktop can afford air. */

.tier-tablet .chat { --c-pad: 28px; --c-col: 680px; }

.tier-phone .chat {
  --c-pad: 16px;
  --c-col: 100%;
}
.tier-phone .chat__inner { padding-top: 18px; gap: 18px; }
.tier-phone .chat__bubble { max-width: 88%; }
.tier-phone .chat__hello h2 { font-size: 19px; }
.tier-phone .chat__form { padding: 10px var(--c-pad); }
/* The phone restates only its BASE; the 20% above applies here too, so the
   mark keeps the same relationship to the text at every tier. */
.tier-phone .chat__ava { --ava-base: 28px; }
.tier-phone .chat__hero { --hero: 56px; margin-bottom: 16px; }

/* The phone's purple bottom nav is fixed at z-index 150. This overlay is at
   10000 and covers the whole screen, so the bar is BEHIND it - which is right:
   while the chat is open there is nowhere else to navigate to, and the X is
   the way out. Nothing to do here; it is written down because "why is the nav
   gone" is the obvious question the first time somebody opens this on a phone.
   ======================================================================== */

/* ===========================================================================
   THE CAMPAIGN CONVERSATION — a dialogue, not a tool
   ---------------------------------------------------------------------------
   Jose, 2026-09-11: "for each campaign same rules, each campaign a scope but a
   different FIXED CHAT WINDOW IN THE CENTER of the screen on the 3 tiers. No
   maximize no light and dark. Same design as the original but without those. A
   dialogue chat that a user can close or cancel and same size as the docked
   global chat."

   IT REUSES .chat AND EVERY MESSAGE CLASS ABOVE. "Same design as the original"
   is a promise kept by sharing the CSS rather than by copying it: bubbles,
   avatars, the composer, the thinking dots and the note all come from the rules
   already in this file, so a change to the chat's look reaches both.

   WHAT IT OVERRIDES is only what makes the chat a TOOL: full-bleed inset, the
   dock geometry, and the dark theme. Those belong to a surface somebody lives
   in. This one is opened to finish one job and then closed.

   AND IT SCALES WITH THE CANVAS (Jose: "let it fit the real phone width canvas
   INSIDE the father scale"). The global chat deliberately ignores the Father
   Scale because it is not a composition. This IS one - it is a dialogue, and it
   joins the same phone-tier zoom family as every other dialogue on the site, at
   the canvas's own 366px.
   =========================================================================== */
.cchat {
  position: fixed; inset: 0; z-index: 10002;   /* above the pill, below nothing */
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: rgba(12,16,32,.52);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.cchat[hidden] { display: none; }
html.cchat-on, html.cchat-on body { overflow: hidden; }

/* The box IS a .chat, so it inherits the tokens and every message rule - but
   position and size are its own. Same 396px as the docked panel, which is what
   Jose asked it to match. */
.cchat__box.chat {
  /* TWENTY PER CENT BIGGER, AS ONE PIECE (Jose, 2026-09-11: "take the entire
     campaign chat box and increase its entire size 20% more... But all in all.
     global scale so you dont mess up inner css elements").

     `zoom` on the box, not a pass over the paddings and font sizes inside it.
     Growing it by hand would mean touching a dozen values that belong to the
     chat and are shared with the global one - and the day any of them changed,
     this surface would quietly stop matching. One number scales the whole
     composition and nothing inside it knows.

     THE HEIGHT IS DIVIDED BY IT. `vh` is resolved against the viewport and THEN
     scaled, so `100vh` inside a 1.2 zoom is 120% of the screen - a box that
     grows itself off the bottom. Dividing first is what keeps the ceiling a
     real ceiling. */
  --cc-zoom: 1.2;
  zoom: var(--cc-zoom);
  position: relative; inset: auto;
  width: 396px; max-width: 100%;
  height: min(620px, calc((100vh - 48px) / var(--cc-zoom)));
  border: 1px solid var(--c-line);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(8,12,30,.34);
  overflow: hidden;                  /* so the header corners actually round */
  --c-col: 100%;                     /* no reading column inside 396px       */
  --c-pad: 16px;
}
/* The gradient hairline the plan dialogue wears, so the two read as the same
   family of surface. */
.cchat__box.chat::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--grad, linear-gradient(0deg,#F8A500 6.3%,#FACE72 95%));
}
.cchat__bar { padding-top: 14px; }
.cchat__who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cchat__who b { font-size: 15px; font-weight: 600; line-height: 1.2; }
.cchat__sub {
  font-size: 12px; color: var(--c-mut);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cchat__x { margin-left: auto; }
.cchat__log { flex: 1 1 auto; }
.cchat__hint { padding: 0 var(--c-pad) 12px; font-size: 11px; }
.cchat__done { margin-top: 4px; }

/* NO DARK MODE HERE, deliberately (Jose: "no light and dark"). The chat's dark
   tokens are scoped to `.chat-dark .chat`, and this box is a .chat - so without
   this it would follow a preference set in a different surface for a different
   purpose. A dialogue that changes colour because of something you did in
   another window is a dialogue that looks broken. */
.chat-dark .cchat__box.chat {
  --c-bg: #ffffff; --c-ink: #1a1a1a; --c-mut: #6f6f6f;
  --c-line: #e8e8e8; --c-bub: #f4f4f4; --c-field: #fcfcfc;
}
.chat-dark .cchat__box .chat__send { background: #1a1a1a; color: #ffffff; }

.tier-tablet .cchat__box.chat {
  --cc-zoom: 1.2;
  width: 380px; height: min(580px, calc((100vh - 44px) / var(--cc-zoom)));
}
/* THE PHONE CANVAS, INSIDE THE FATHER SCALE. 366px is the 390 canvas less its
   two 12px gutters - the same number every other dialogue here uses, so this
   one cannot drift from them. */
/* THE PHONE DOES NOT GET THE EXTRA 20%, and that is not an oversight. It is
   already AT the canvas width - 366 of the 390 Jose specified - so a further
   1.2 would push it past the edges of the screen it is meant to sit inside.
   The Father Scale is the size here; there is no room above it. */
.tier-phone .cchat__box.chat {
  --cc-zoom: var(--tier-scale, 1);
  width: 366px; max-width: 366px;
  height: min(560px, calc((100vh - 40px) / var(--cc-zoom)));
}

/* A BIGGER CLOSE (Jose, 2026-09-11: "the X close should be bigger").

   The header icons are 34px because the global chat has THREE of them in a row
   and they have to share the bar. This window has exactly one control, so the
   reason for making it small does not apply here - and it is the only way out
   of a dialogue, which is the last control that should be hard to hit. The
   glyph is a text character rather than an SVG, so the size lives in
   font-size; line-height is pinned to 1 so it stays centred in its box. */
.cchat__x {
  width: 42px; height: 42px;
  font-size: 26px; line-height: 1; font-weight: 400;
  color: var(--c-ink);
}
.cchat__x:hover { background: var(--c-bub); }
.tier-phone .cchat__x { width: 44px; height: 44px; font-size: 27px; }

/* The composer sits in its own foot, as it does in the chat, so the hint line
   below it belongs to the same block rather than floating under the form. */
.cchat__foot { flex: 0 0 auto; }

/* UNICIVERSE: the gold emblem sits on a BLACK disc wherever it is small - the
   pill, the header and beside each answer (Jose, 2026-09-19: "a black BG for the
   avatar in the thumbnail"). Both themes; overrides the light discs above. */
.chat__pill img, .chat__ava, .chat__from img,
.chat-dark .chat__pill img, .chat-dark .chat__ava, .chat-dark .chat__from img { background: #220042; }   /* Jose's purple (HeartRefinedBG.png), so the gold reads */
.chat__from img { border-radius: 50%; padding: 2px; box-sizing: border-box; }

/* UNICIVERSE: the greeting's emblem 1.5x (Jose, 2026-09-19) - every tier;
   docked another 1.5x on top ("DOCKED MODE only. The full screen stays as is"). */
.chat__hero { --hero: 96px; }
.chat--docked .chat__hero { --hero: 99px; }
.tier-phone .chat__hero { --hero: 84px; }

/* UNICIVERSE: CLEAR THE FOOTER (Jose, 2026-09-19: "The docked Junior is hiding the
   elements of the footer to the right ... raise it up so we see all footer
   elements. Do the same for the pill"). site.js sets --foot-lift to how much of
   the footer is on screen right now: 0 anywhere above it, up to the footer's
   full height at the very bottom - so the dock and the pill only rise when there
   is a footer to clear, and sit back down when there is not. */
.chat__pill { bottom: calc(24px + var(--foot-lift, 0px)); transition: bottom .18s ease-out; }
.chat--docked { bottom: calc(20px + var(--foot-lift, 0px));
  height: min(620px, calc(100vh - 40px - var(--foot-lift, 0px))); transition: bottom .18s ease-out, height .18s ease-out; }