/* Sofia on the web - /sofia/, [mfa_sofia_chat].

   Shaped like the chat apps people already use: a scrolling log that grows
   upward from a composer pinned to the bottom. Everything here is scoped under
   .mfa-sofia-chat and built on the global tokens - no private colours, no
   private spacing scale. */

.mfa-sofia-chat {
  display: flex;
  flex-direction: column;
  /* The log scrolls, the composer does not. Sized against the viewport rather
     than the content so the composer sits where a thumb expects it on a phone
     instead of drifting down as the conversation grows.

     svh, not vh: mobile browsers shrink the visible viewport when the address
     bar is showing, and vh would put the composer under it. The vh line is the
     fallback for anything that does not know svh. */
  height: calc(100vh - 200px);
  height: calc(100svh - 200px);
  min-height: 420px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------- the log ---------------- */

.mfa-sofia-log {
  flex: 1 1 auto;
  /* min-height: 0 is what MAKES overflow-y work here. A column flex item
     defaults to min-height: auto, which refuses to shrink below its content -
     so the log grew instead of scrolling, and pushed the composer down. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--mfa-space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-4);
}

/* ---------------- the opening screen ---------------- */

.mfa-sofia-intro {
  margin: auto 0;
  text-align: center;
  padding: var(--mfa-space-3) var(--mfa-space-4);
}

.mfa-sofia-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--mfa-space-3);
  display: block;
}

.mfa-sofia-hi {
  font-size: 22px;
  font-weight: 800;
  color: var(--mfa-ink);
  margin: 0 0 6px;
  line-height: 1.3;
}

.mfa-sofia-sub {
  font-size: 15px;
  color: var(--mfa-muted);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 46ch;
}

.mfa-sofia-suggest {
  list-style: none;
  margin: var(--mfa-space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

/* A suggestion is a real control, so it sits on the 44px floor like every
   other one on the site. */
.mfa-sofia-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-pill);
  background: var(--mfa-white);
  color: var(--mfa-green-dark);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.mfa-sofia-chip:hover { background: var(--mfa-mint-bg); }

/* The solat planner's prayer lists, inside an answer bubble. The plan arrives
   as WhatsApp's own reply converted to HTML - see mfa_sofia_travel_md() - so
   this styles what that conversion produces and nothing else. */
.mfa-sofia-travel-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
}

.mfa-sofia-travel-list li {
  font-size: 15px;
  /* The times line up in a column, so the digits must not shift width. */
  font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
  .mfa-sofia-travel-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- messages ---------------- */

.mfa-sofia-msg {
  display: flex;
  gap: var(--mfa-space-3);
  max-width: 100%;
}

.mfa-sofia-msg--user { justify-content: flex-end; }

.mfa-sofia-bubble {
  padding: 12px 16px;
  border-radius: var(--mfa-radius-lg);
  font-size: 15px;
  line-height: 1.65;
  /* Somebody else's text, and long unbroken strings do turn up in questions -
     a URL, an id. Wrap rather than let it push the page sideways. */
  overflow-wrap: break-word;
  max-width: 86%;
}

/* AN ANSWER FILLS THE COLUMN; A QUESTION DOES NOT.
   Measured at 1280px: the welcome block and the composer are both 732px, while
   bot bubbles ranged from 58px for "Yes." to 630px - so every answer sat
   narrower than the page around it and no two were the same width. Answers
   here are lists of mosques and grids of prayer times, which read as content,
   and content should not resize itself to its own length.

   The member's OWN messages keep shrinking to fit and stay right-aligned: that
   is what every chat app does, and a three-word question rendered full width
   reads as a heading rather than something they said. */
.mfa-sofia-msg--bot { align-self: stretch; }

.mfa-sofia-msg--bot .mfa-sofia-bubble {
  /* flex rather than a percentage: it fills whatever the avatar leaves, without
     having to know the avatar's width and gap to line up with the composer. */
  flex: 1 1 auto;
  max-width: none;
}

/* A QUESTION IS QUIET; AN ANSWER IS THE CONTENT.
   This was solid --mfa-teal-dark with white text, which made the reader's own
   three-word question the loudest thing on screen - louder than the answer it
   was asking for. Every assistant people already use does the opposite: the
   question sits in a soft tint and the reply carries the page.

   --mfa-border as a FILL rather than a line. It is on the palette, it is a
   step darker than the mint the answers use (#e7efed against #f4faf9), so the
   two are still told apart at a glance, and --mfa-ink on it clears AA
   comfortably. No new colour was invented for this. */
.mfa-sofia-msg--user .mfa-sofia-bubble {
  background: var(--mfa-border);
  color: var(--mfa-ink);
  border-bottom-right-radius: var(--mfa-radius-sm);
}

/* THE ANSWER SITS FLAT ON THE PAGE - no fill, no radius, no padding.
   It is the content, and content does not need a container to say so. A
   tinted panel around every reply reads as "a message in a chat app"; the
   assistants people compare this to put the answer straight on the page and
   reserve the bubble for the question, which is the shorter of the two and
   the one that benefits from being marked.

   PADDING GOES TO ZERO, not just the background. Left at 12px 16px the text
   would sit indented from the composer below it for no visible reason - the
   inset only made sense while there was a panel to inset it from. The 16px
   gap between messages comes from the log's own `gap`, so nothing collapses. */
.mfa-sofia-msg--bot .mfa-sofia-bubble {
  background: transparent;
  color: var(--mfa-ink);
  border-radius: 0;
  padding: 0;
}

.mfa-sofia-bubble p { margin: 0 0 10px; }
.mfa-sofia-bubble p:last-child { margin-bottom: 0; }

.mfa-sofia-bubble a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.mfa-sofia-msg--bot .mfa-sofia-bubble a { color: var(--mfa-teal-dark); }


/* the three dots while she is thinking */
.mfa-sofia-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
}

.mfa-sofia-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mfa-muted);
  animation: mfa-sofia-blink 1.2s infinite ease-in-out;
}

.mfa-sofia-typing span:nth-child(2) { animation-delay: 0.18s; }
.mfa-sofia-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes mfa-sofia-blink {
  0%, 60%, 100% { opacity: 0.25; }
  30%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mfa-sofia-typing span { animation: none; opacity: 0.5; }
}

.mfa-sofia-error {
  font-size: 14px;
  color: #a3341f;
  background: #fdf1ee;
  border-radius: var(--mfa-radius-sm);
  padding: 10px 14px;
  margin: 0;
}

/* ---------------- the composer ---------------- */

.mfa-sofia-composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: var(--mfa-space-2);
  padding: var(--mfa-space-3);
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-lg);
  background: var(--mfa-white);
  box-shadow: var(--mfa-shadow-card);
}

.mfa-sofia-input {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  resize: none;
  font-family: inherit;
  /* 16px is not a style choice: iOS Safari zooms the whole page when a focused
     field is smaller, and the page never zooms back out. */
  font-size: 16px;
  line-height: 1.5;
  color: var(--mfa-ink);
  background: transparent;
  max-height: 160px;
  padding: 8px 4px;
}

.mfa-sofia-input::placeholder { color: var(--mfa-muted); }

.mfa-sofia-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--mfa-teal-dark);
  color: var(--mfa-white);
  cursor: pointer;
}

.mfa-sofia-send svg { width: 18px; height: 18px; }
.mfa-sofia-send:disabled { opacity: 0.45; cursor: default; }

.mfa-sofia-foot {
  flex: 0 0 auto;
  margin: var(--mfa-space-2) 0 0;
  font-size: 12px;
  color: var(--mfa-muted);
  text-align: center;
}

/* ---------------- the gate ---------------- */

/* Replaces the composer rather than sitting above it: leaving a dead input on
   screen invites somebody to type into something that will not answer. */
.mfa-sofia-gate {
  flex: 0 0 auto;
  padding: var(--mfa-space-5);
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-lg);
  background: var(--mfa-mint-bg);
  text-align: center;
}

.mfa-sofia-gate-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mfa-ink);
  margin: 0 0 var(--mfa-space-4);
}

@media (max-width: 600px) {
  /* The site's fixed footer nav owns the bottom of a phone screen. Shorten the
     column rather than let the composer slide underneath it. */
  .mfa-sofia-chat {
    height: calc(100vh - 250px);
    height: calc(100svh - 250px);
    min-height: 360px;
  }

  .mfa-sofia-hi { font-size: 20px; }
  .mfa-sofia-bubble { max-width: 92%; font-size: 15px; }
  .mfa-sofia-suggest { flex-direction: column; align-items: stretch; }
  .mfa-sofia-chip { justify-content: center; }
}

/* ===================== the shell: rail + conversation ===================== */

/* The page template drops the site header and footer, so this owns the whole
   viewport. Two columns on a desktop, one column plus a drawer on a phone -
   the shape every chat app has settled on, because a conversation wants the
   screen and a menu only wants it occasionally. */
.mfa-sofia-page,
.mfa-sofia-page-main {
  margin: 0;
  background: var(--mfa-white);
}

/* THIS PAGE RENDERED IN TIMES until 2026-09-01, and the font was never the
   problem: the theme enqueues Lato unconditionally and --mfa-font resolves
   correctly. What was missing was a rule that USES it. The family is applied
   by the theme's `body.mfa-site` rule, and this template body carries
   `mfa-sofia-page` instead - the same way /member/ and /admin/ were caught.
   Measured in a browser: --mfa-font defined, Lato loaded, body computing
   "Times New Roman".

   DO NOT FIX THIS BY ADDING mfa-site. It pins padding-top: 65px !important as
   clearance for a fixed public header this page does not render, and sets a
   white background at the same specificity as the shell's own - which is a
   load-order coin toss. The shell states its own baseline instead, which is
   what CLAUDE.md already prescribes for the other two shells. */
.mfa-sofia-page {
  font-family: var(--mfa-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mfa-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mfa-sofia-shell {
  display: grid;
  /* 340px, not 300. At 300 the rail's 16px padding left 268px of content, so
     each of the two link columns got 131px - and "Business Directory" and
     "Website Directory" are just wide enough at 13px to wrap there, which
     makes a tidy grid look ragged. 308px of content gives 151px a column and
     clears the longest label with room to spare. Measured, not guessed. */
  grid-template-columns: 340px minmax(0, 1fr);
  /* HEIGHT, NOT MIN-HEIGHT. This was min-height, and min-height only says
     "at least a viewport" - the grid row was then free to grow with the
     conversation, so the whole document scrolled, the composer walked off the
     bottom of the screen and the rail's login block went with it. A chat app's
     frame is the viewport; only the log inside it scrolls. */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* ---------------- the rail ---------------- */

/* TIGHT ENOUGH TO FIT WITHOUT SCROLLING. Measured: the eight links, the logo
   and the account block came to 570px, so the rail scrolled on any window
   shorter than that - an ordinary laptop once browser chrome is counted. The
   spacing below brings it to roughly 470px, which clears a 13-inch screen.

   A SIDEBAR THAT SCROLLS HIDES ITS OWN ACCOUNT BLOCK, which sits at the bottom
   under margin-top:auto - so the one item somebody looks for by position was
   the first to disappear. */
.mfa-sofia-rail {
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-3);
  padding: var(--mfa-space-4);
  /* The rail is now inside a bounded row, and .mfa-sofia-railfoot pushes the
     account block to its bottom - so on a short window that block has to be
     reachable by scrolling the rail rather than the page. */
  overflow-y: auto;
  background: var(--mfa-mint-bg);
  border-right: 1px solid var(--mfa-border);
}

/* Desktop has no drawer to close - the rail is a column, not an overlay. */
.mfa-sofia-railclose { display: none; }

.mfa-sofia-brand { display: block; text-decoration: none; }

/* BM | EN in the rail. The site header's rules for it live in
   site-chrome-v1.css, which this page does not load, so the same look is
   stated here - a second copy on purpose, like the share button's. */
.mfa-sofia-rail .mfa-lang-switch {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--mfa-border, #e7efed);
  border-radius: 999px;
  overflow: hidden;
}
.mfa-sofia-rail a.mfa-lang-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #1f7d72;
  text-decoration: none;
}
.mfa-sofia-rail a.mfa-lang-opt:hover { background: #f4faf9; color: #0d4d47; }
.mfa-sofia-rail a.mfa-lang-opt.is-current { background: #1f7d72; color: #ffffff; }
.mfa-sofia-rail a.mfa-lang-opt:focus-visible { outline: 3px solid #1f7d72; outline-offset: -3px; }
/* HEIGHT IS EXPLICIT, and that is not styling - it is a bug fix.
   LiteSpeed lazy-loads this image by replacing src with a 1x1 transparent GIF
   until it scrolls in. With `height: auto` the browser sizes that placeholder
   from its 1:1 intrinsic ratio, so a 150x34 logo reserved a 150x150 SQUARE -
   116 wasted pixels at the top of the drawer, which is most of the 38px it was
   overflowing by - and then collapsed to 34px when the real file arrived,
   shifting everything under it. Measured, not guessed: naturalWidth was 1.

   A fixed height cannot be inflated by a placeholder and cannot shift. */
.mfa-sofia-logo  { display: block; height: 34px; width: auto; max-width: 150px; }

/* The wordmark is what replaces the logo if the image 404s - the URL is a
   guess at a filename and a broken image in the corner would read as a broken
   page. */
.mfa-sofia-wordmark {
  font-size: 20px;
  font-weight: 800;
  color: var(--mfa-green-dark);
}

/* A quiet section label. Uppercase and small, so it reads as a heading for the
   block under it without competing with the links themselves. */
.mfa-sofia-railtitle {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mfa-teal-dark);
}

.mfa-sofia-railchips { display: flex; flex-direction: column; gap: var(--mfa-space-2); }

.mfa-sofia-chiplist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* THE RAIL CHIP IS A DIFFERENT SHAPE FROM THE WELCOME CHIP, on purpose. In the
   welcome panel a chip is one of six things offered on an empty screen and can
   afford 44px and a pill. Here there are six of them in a column above the
   links and the account block, all of which have to fit one viewport - so this
   variant wraps its label instead of sitting on one line, and takes its height
   from the text. The 44px floor is restored in the drawer below, where the
   same markup is tapped rather than clicked. */
.mfa-sofia-chip--rail {
  display: block;
  width: 100%;
  min-height: 0;
  /* 5px top and bottom, down from 7. Six chips sit above the links and the
     account block, so four pixels each is twenty-four off the column - enough
     to stop the rail scrolling on a laptop. Height comes off the PADDING, not
     the 13px font, which is already the smallest comfortable size here. */
  padding: 5px 12px;
  border-radius: var(--mfa-radius-sm);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
}

.mfa-sofia-chip--rail:hover { border-color: var(--mfa-teal); }

/* TWO COLUMNS, so eight links cost four rows rather than eight. The rail has
   to hold the chips too now, and a single column pushed the account block -
   the whole point of the page - below the fold on a laptop. */
.mfa-sofia-railnav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 6px;
}


/* 36px HERE, 44px IN THE DRAWER. The 44px floor is a TOUCH target, and on a
   desktop this rail is a persistent sidebar driven by a mouse - so the floor is
   restored inside the max-width:860px block below, where the same markup
   becomes a drawer that is tapped. Height came off the PADDING, not the font:
   15px is already the smallest comfortable size for a nav label. */
.mfa-sofia-raillink {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 8px;
  border-radius: var(--mfa-radius-sm);
  /* 13px, down from 15px: at half the rail's width "Business Directory" and
     "Website Directory" are the longest labels and wrap to two lines at 15px,
     which makes a tidy grid ragged. Measured against those two, not guessed. */
  font-size: 13px;
  line-height: 1.25;
  color: var(--mfa-ink);
  text-decoration: none;
}

.mfa-sofia-raillink:hover { background: var(--mfa-white); }

.mfa-sofia-railfoot { margin-top: auto; }

.mfa-sofia-account {
  display: flex;
  flex-direction: column;
  min-height: 44px;
  justify-content: center;
  padding: 8px 12px;
  border-radius: var(--mfa-radius-sm);
  background: var(--mfa-white);
  text-decoration: none;
}

.mfa-sofia-account-name { font-size: 15px; font-weight: 700; color: var(--mfa-ink); }
.mfa-sofia-account-sub  { font-size: 12px; color: var(--mfa-muted); }

/* ---------------- the conversation column ---------------- */

/* Inside the shell the chat owns its column, so the viewport arithmetic the
   standalone version needed is gone - the shell's own bounded height gives it
   the height. height: 100% and not auto: auto let the column grow with the
   conversation, which is the whole bug above. */
/* THE GUTTER IS ON THE CHILDREN, NOT ON THIS COLUMN, and that is what puts
   the scrollbar where it belongs. A scrollbar sits at its own container's
   edge - so while the column carried the horizontal padding, the log scrolled
   inside it and the bar landed one gutter in from the screen, hard against
   the text with nothing between them.

   The log now runs the full width of the column and insets its own text, so
   the bar is flush to the side and the words keep their margin. Everything
   else in the column - the gate, the composer, the footnote - takes the same
   gutter as a margin so the whole thing still lines up. */
.mfa-sofia-shell .mfa-sofia-chat {
  height: 100%;
  min-height: 0;
  padding: var(--mfa-space-5) 0;
}

.mfa-sofia-shell .mfa-sofia-log {
  padding-left: var(--mfa-gutter);
  padding-right: var(--mfa-gutter);
}

/* margin-left/right rather than the `margin` shorthand: the shorthand would
   reset the vertical margins these already carry, which is the trap CLAUDE.md
   records against .mfa-stack. */
.mfa-sofia-shell .mfa-sofia-gate,
.mfa-sofia-shell .mfa-sofia-composer,
.mfa-sofia-shell .mfa-sofia-foot {
  margin-left: var(--mfa-gutter);
  margin-right: var(--mfa-gutter);
}

/* ---------------- lists inside an answer ---------------- */

.mfa-sofia-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mfa-sofia-list li { line-height: 1.5; }

.mfa-sofia-list a {
  font-weight: 700;
  color: var(--mfa-teal-dark);
  text-decoration: none;
}

.mfa-sofia-list a:hover { text-decoration: underline; }

.mfa-sofia-dim {
  display: block;
  font-size: 13px;
  color: var(--mfa-muted);
}

/* A whole widget dropped into a bubble - the prayer-times block. It brings its
   own styling; this only stops it fighting the bubble around it. */
.mfa-sofia-embed { margin: 0 0 10px; }
.mfa-sofia-embed > *:first-child { margin-top: 0; }
.mfa-sofia-embed > *:last-child  { margin-bottom: 0; }

/* The geolocation shortcode is carried over from the site header purely so the
   location cookies still get written. Nobody needs to look at it. */
.mfa-sofia-geo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------- the drawer, on a phone ---------------- */

.mfa-sofia-burger,
.mfa-sofia-scrim { display: none; }

@media (max-width: 860px) {
  .mfa-sofia-shell { grid-template-columns: minmax(0, 1fr); }

  /* Off-canvas rather than hidden: the menu is still reachable, it just stops
     spending a third of a phone screen on itself. */
  .mfa-sofia-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    /* 88vw / 340px, matching the desktop rail. At 300px the drawer had the
       same problem the sidebar did: 268px of content, 131px a column, and
       "Business Directory" wrapping to a second line - measured at 54px tall
       against 44px for the rest. Wider is also SHORTER here, because those
       wrapped rows were what pushed the drawer into a scroll. */
    width: 88vw;
    max-width: 340px;
    /* Raw values, not a token: global-v3.css defines no z-index scale, and
       var(--mfa-z-modal, 1000) would have looked correct while quietly
       carrying an invented name. Chosen to sit BELOW modal-v1.css's 100002
       so the login popup still covers the drawer rather than the reverse. */
    z-index: 90001;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    overflow-y: auto;
  }

  .mfa-sofia-shell.is-menu-open .mfa-sofia-rail { transform: translateX(0); }

  /* THE BURGER IS HIDDEN WHILE THE MENU IS OPEN. It is fixed at 90002, above
     the rail at 90001, so an open drawer had the burger printed across its own
     logo - and tapping that same burger was the only way out, which is not
     discoverable. */
  .mfa-sofia-shell.is-menu-open .mfa-sofia-burger { display: none; }

  .mfa-sofia-railclose {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The 44px touch floor - most of this traffic is phones arriving from
       WhatsApp, and a close control is tapped in a hurry. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mfa-ink);
    cursor: pointer;
  }

  .mfa-sofia-railclose svg { width: 22px; height: 22px; }
  .mfa-sofia-railclose:hover { background: var(--mfa-white); }

  /* Room for the close button, so the logo never slides under it. */
  /* 48px of clearance for the close button rather than 56, and 8px between
     blocks rather than 12. The drawer has to hold a logo, six chips, eight
     links and the account block on a screen that is already short. */
  /* padding-bottom 12 rather than the base 16: with five chips the drawer
     needed 642px against a 640px viewport - two pixels, which is the
     difference between fitting a 640px phone and not. */
  .mfa-sofia-rail { padding-top: 48px; padding-bottom: var(--mfa-space-3); gap: var(--mfa-space-2); }

  /* THE TOUCH FLOOR IS RESTORED HERE. Below 860px this rail is a drawer that
     gets tapped, not a sidebar that gets clicked, and 44px is the minimum
     target - most of this traffic is phones arriving from WhatsApp. The drawer
     scrolls on its own (overflow-y: auto above), so the extra height costs
     nothing here. */
  .mfa-sofia-raillink {
    /* The 44px floor stays - this is tapped, not clicked. Only the FONT and
       the side padding come down, and both were sized by measurement rather
       than taste: the drawer's grid gives each column 145.5px, and at 15px
       with 12px padding "Business Directory" needs 125px against 121px of
       room, so it wrapped. 14px needs 116px, and 8px padding raises the room
       to 129px - 13px of headroom instead of a coin toss. */
    min-height: 44px;
    padding: 8px;
    font-size: 14px;
  }

  /* Same reasoning for the rail chips: a drawer is tapped, so the floor
     applies here even though it does not on a desktop sidebar. */
  .mfa-sofia-chip--rail {
    min-height: 44px;
    padding: 11px 14px;
    font-size: 14px;
  }

  .mfa-sofia-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    position: fixed;
    top: 10px;
    left: 10px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    z-index: 90002;
    border: 1px solid var(--mfa-border);
    border-radius: var(--mfa-radius-sm);
    background: var(--mfa-white);
    cursor: pointer;
  }

  .mfa-sofia-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--mfa-ink);
  }

  .mfa-sofia-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 28, 0.45);
    z-index: 90000;
  }

  .mfa-sofia-shell.is-menu-open .mfa-sofia-scrim { display: block; }

  /* Clear the burger, which is fixed over the top-left corner. */
  .mfa-sofia-shell .mfa-sofia-chat { padding-top: 64px; }

  @media (prefers-reduced-motion: reduce) {
    .mfa-sofia-rail { transition: none; }
  }
}

/* Prayer times inside a bubble - a two-column list, times right-aligned so
   they read as a column rather than as prose. */
.mfa-sofia-times {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
}

.mfa-sofia-times li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--mfa-radius-sm);
  background: var(--mfa-white);
}

.mfa-sofia-tname { font-size: 13px; color: var(--mfa-muted); }
.mfa-sofia-tval  { font-size: 15px; font-weight: 800; color: var(--mfa-ink); font-variant-numeric: tabular-nums; }

@media (max-width: 420px) {
  .mfa-sofia-times { grid-template-columns: minmax(0, 1fr); }
}

/* ===================== answers inside a reply ===================== */

/* A choice Sofia already knows the answers to is offered, never typed - the
   same rule the WhatsApp flows hold to. These sit inside a bot bubble, so
   they take their own smaller shape rather than the welcome chip's pill. */
.mfa-sofia-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mfa-space-2);
  margin: var(--mfa-space-3) 0 0;
}

.mfa-sofia-chip--inline {
  min-height: 40px;
  padding: 9px 16px;
  font-size: 14px;
  background: var(--mfa-white);
  border-color: var(--mfa-teal);
  color: var(--mfa-teal-dark);
}

.mfa-sofia-chip--inline:hover {
  background: var(--mfa-mint-bg);
}

/* The Maps instructions. Numbered because they are a sequence somebody is
   following on another app while reading this one, so the position in the
   list is the information. */
.mfa-sofia-steps {
  margin: var(--mfa-space-2) 0 var(--mfa-space-3);
  padding-left: 22px;
}

.mfa-sofia-steps li { margin: 0 0 4px; }

@media (max-width: 600px) {
  /* Thumb-sized in the one place these are tapped rather than clicked. */
  .mfa-sofia-chip--inline { min-height: 44px; }
}

/* ============ short screens: the welcome must not scroll ============ */

/* A PHONE'S REAL ESTATE IS NOT ITS SCREEN. At 375x812 the welcome block fits
   exactly (524px of content in 612px of log) - which is why this looked fine
   in testing and wrong on a handset: browser chrome takes 150-200px, and the
   log is sized `100svh - 200px`, so the six chips ran under the composer and
   the log grew a scrollbar.

   The chips themselves CANNOT shrink: they are tapped, so 44px is the floor,
   and six of them plus gaps is 294px that has to stay. So the space comes from
   everything around them - and on the shortest screens the avatar goes, since
   Sofia's face is also in the answer bubbles and is the one part of this block
   that carries no instruction. */
@media (max-height: 730px) {
  .mfa-sofia-intro { padding-top: var(--mfa-space-2); padding-bottom: var(--mfa-space-2); }
  .mfa-sofia-avatar { width: 48px; height: 48px; margin-bottom: var(--mfa-space-2); }
  .mfa-sofia-hi { font-size: 20px; }
  .mfa-sofia-sub { font-size: 14px; }
  .mfa-sofia-suggest { margin-top: var(--mfa-space-2); }
}

@media (max-height: 650px) {
  .mfa-sofia-avatar { display: none; }
  .mfa-sofia-sub { display: none; }
}

/* ============ the mobile header's label ============ */

/* Desktop has the rail's logo permanently on screen, so this would be a second
   wordmark six inches from the first. */
.mfa-sofia-mobiletitle { display: none; }

@media (max-width: 860px) {
  .mfa-sofia-mobiletitle {
    display: inline-flex;
    align-items: center;
    position: fixed;
    top: 10px;
    right: 10px;
    /* Matches the burger's own box so the two read as one bar rather than as
       two things that happen to be at the same height. */
    height: 44px;
    padding: 0 12px;
    z-index: 90000;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--mfa-green-dark);
    text-decoration: none;
    /* BELOW the drawer (90001) on purpose: an open menu should cover it, the
       way it already covers everything else behind it. The burger sits above
       at 90002 and hides itself when the menu opens. */
  }

  .mfa-sofia-mobiletitle span { margin: 0 5px; opacity: 0.55; }

  /* Out of the way while the drawer is open - the drawer carries the real
     logo, and two wordmarks stacked over each other reads as a glitch. */
  .mfa-sofia-shell.is-menu-open .mfa-sofia-mobiletitle { display: none; }
}

@media (max-width: 400px) {
  /* On the narrowest phones the burger and this would meet in the middle. */
  .mfa-sofia-mobiletitle { font-size: 14px; padding: 0 8px; }
}

/* ============ share, beside the account button ============ */

.mfa-sofia-footrow {
  display: flex;
  align-items: stretch;
  gap: var(--mfa-space-2);
}

/* The account button takes the room; share takes a square. */
.mfa-sofia-footrow > .mfa-btn,
.mfa-sofia-footrow > .mfa-sofia-account { flex: 1 1 auto; min-width: 0; }

.mfa-sofia-sharebtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Square, and on the 44px touch floor - it is tapped in the drawer. Width
     matches height so it reads as a companion to the button beside it rather
     than a second, smaller button. */
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-pill);
  background: var(--mfa-white);
  color: var(--mfa-teal-dark);
  cursor: pointer;
}

.mfa-sofia-sharebtn svg { width: 19px; height: 19px; }

.mfa-sofia-sharebtn:hover {
  border-color: var(--mfa-teal);
  background: var(--mfa-mint-bg);
}

.mfa-sofia-sharebtn:focus-visible {
  outline: 2px solid var(--mfa-teal);
  outline-offset: 2px;
}

/* EMPTY UNTIL IT HAS SOMETHING TO SAY. Only the clipboard fallback fills it -
   where navigator.share exists the OS sheet is the feedback - so it must take
   no height while empty, or it would push the drawer over its budget for a
   message most people never see. */
.mfa-sofia-sharetoast {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--mfa-teal-dark);
  overflow-wrap: anywhere;
}

.mfa-sofia-sharetoast:empty { display: none; }