/* MAFSU MITRA admissions widget.
   Namespaced under .mafsu-chat so it cannot touch the host website's styles.
   Palette is MAFSU's approved set; type is Noto Sans for UI with Tiro
   Devanagari Marathi reserved for the one display line, matching the main
   MITRA product's identity in both Latin and Devanagari. */

:root {
  --mafsu-green-900: #155b46;
  --mafsu-green-800: #2f7d62;
  --mafsu-green-100: #e8f2ec;
  --mafsu-saffron: #e59a2f;
  --mafsu-terracotta: #b86232;
  --mafsu-paper: #faf9f4;
  --mafsu-white: #ffffff;
  --mafsu-ink: #252a27;
  --mafsu-muted: #66716b;
  --mafsu-line: #d8e1db;
  --mafsu-danger: #9c432c;
  /* Expanding the panel animated the BOX and nothing inside it, so the frame
     glided while the padding, bubble width, heading size and card height all
     snapped - the words jumped while the container slid. One shared curve and
     duration makes it read as a single gesture instead of a box moving and
     its contents catching up. Slightly slower than the old .22s because the
     panel travels 280px and the eye needs to follow it. */
  --mafsu-resize: .30s cubic-bezier(.22,1,.36,1);
}

/* ---------- demo host page (not part of the widget) ---------- */
.demo-page { max-width: 720px; margin: 12vh auto; padding: 32px; color: #253029; font: 16px/1.65 "Noto Sans", sans-serif; }
.demo-page__eyebrow { color: #1f6247; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.demo-page h1 { max-width: 650px; margin: 8px 0 16px; font: 400 clamp(34px, 6vw, 64px)/1.05 "Tiro Devanagari Marathi", serif; }

/* ---------- root ---------- */
.mafsu-chat, .mafsu-chat * { box-sizing: border-box; }
.mafsu-chat {
  position: fixed; z-index: 2147483000;
  right: calc(22px + env(safe-area-inset-right, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  color: var(--mafsu-ink);
  font-family: "Noto Sans", "Noto Sans Devanagari", Arial, sans-serif;
  font-size: 14px; line-height: 1.5;
}
.mafsu-chat button, .mafsu-chat textarea, .mafsu-chat select { font: inherit; }
.mafsu-chat button { -webkit-tap-highlight-color: transparent; }
.mafsu-chat__sr-only { position: absolute!important; width: 1px!important; height: 1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; }
.mafsu-chat button:focus-visible, .mafsu-chat select:focus-visible, .mafsu-chat textarea:focus-visible { outline: 3px solid rgba(47,125,98,.32); outline-offset: 2px; }
/* ...but NOT the composer textarea. The composer container already shows focus
   with a green border and glow, so this outline drew a second rectangle inside
   the first - a box within a box, which is what it looks like. Accessibility is
   unaffected: :focus-within on the container is the visible indicator, and it
   is the element a sighted user perceives as "the field". */
.mafsu-chat__composer textarea:focus-visible { outline: 0; }

/* ---------- launcher ---------- */
.mafsu-chat__launcher {
  position: relative; display: grid; width: 60px; height: 60px; place-items: center;
  padding: 0; border: 3px solid #fff; border-radius: 50%;
  color: #fff; background: linear-gradient(150deg, #1d8b64, #10553e);
  box-shadow: 0 14px 34px rgba(12,82,57,.34), 0 0 0 1px rgba(13,93,67,.10);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease-out;
}
.mafsu-chat__launcher:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 18px 42px rgba(12,82,57,.40), 0 0 0 1px rgba(13,93,67,.10); }
.mafsu-chat__launcher-icon { display: grid; width: 40px; height: 40px; place-items: center; }
.mafsu-chat__launcher-icon svg { width: 27px; fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.mafsu-chat__launcher-icon .mafsu-chat__spark { fill: #fff; stroke-width: .6; }
.mafsu-chat__online { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: #25c55f; }
.mafsu-chat__online[data-health="checking"] { background: var(--mafsu-saffron); }
.mafsu-chat__online[data-health="offline"] { background: #c64b3c; }

/* One attention pulse when the greeting card appears, then never again. */
.mafsu-chat__launcher[data-nudging="true"]::after {
  position: absolute; inset: -3px; border: 2px solid rgba(37,197,95,.55); border-radius: 50%;
  content: ""; animation: mafsu-pulse 2.2s ease-out 3;
}

/* ---------- greeting card: the reason a student notices the widget ---------- */
.mafsu-chat__nudge {
  position: relative; display: none; width: min(310px, calc(100vw - 44px));
  padding: 14px 15px 13px; border: 1px solid #cfe0d6; border-radius: 18px 18px 6px 18px;
  background: #fff; box-shadow: 0 18px 44px rgba(17,83,58,.18), 0 3px 10px rgba(17,83,58,.07);
  text-align: left; cursor: pointer;
  animation: mafsu-nudge-in .42s cubic-bezier(.22,1,.36,1);
}
.mafsu-chat__nudge[data-visible="true"] { display: block; }
.mafsu-chat__nudge:hover { border-color: #9dc3ae; }
.mafsu-chat__nudge-title { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; color: var(--mafsu-ink); font-size: 14px; font-weight: 700; }
.mafsu-chat__nudge-title span { font-size: 15px; }
.mafsu-chat__nudge p { margin: 0; padding-right: 14px; color: #56655c; font-size: 12px; line-height: 1.5; }
.mafsu-chat__nudge-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 0; border: 0; color: var(--mafsu-green-800); background: none; font-size: 12px; font-weight: 700; cursor: pointer; }
.mafsu-chat__nudge-cta b { font-weight: 700; transition: transform .16s ease-out; }
.mafsu-chat__nudge:hover .mafsu-chat__nudge-cta b { transform: translateX(3px); }
.mafsu-chat__nudge-close {
  position: absolute; top: 7px; right: 7px; display: grid; width: 24px; height: 24px; place-items: center;
  border: 0; border-radius: 50%; color: #8c968f; background: transparent; font-size: 15px; line-height: 1; cursor: pointer;
}
.mafsu-chat__nudge-close:hover { color: var(--mafsu-ink); background: #eff3f0; }

/* ---------- panel ---------- */
.mafsu-chat__panel {
  display: flex; width: min(400px, calc(100vw - 32px)); height: min(660px, calc(100vh - 120px));
  height: min(660px, calc(100dvh - 120px));
  overflow: hidden; flex-direction: column;
  border: 1px solid #cfe0d6; border-radius: 22px; background: var(--mafsu-white);
  box-shadow: 0 28px 80px rgba(17,83,58,.20), 0 8px 24px rgba(17,83,58,.09);
  transform-origin: right bottom;
  animation: mafsu-panel-in .24s cubic-bezier(.22,1,.36,1);
  transition: width var(--mafsu-resize), height var(--mafsu-resize);
}
.mafsu-chat__panel[hidden] { display: none; }

/* ---------- header: one row, everything on it ---------- */
.mafsu-chat__header {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 13px;
  border-bottom: 1px solid #e4ebe7; background: #fff;
}
.mafsu-chat__seal { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 2px solid var(--mafsu-green-900); border-radius: 50%; background: #fff; }
.mafsu-chat__seal img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.mafsu-chat__identity { min-width: 0; flex: 1; }
.mafsu-chat__identity h2 { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--mafsu-ink); font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.mafsu-chat__identity h2 small { padding: 2px 5px; border-radius: 4px; color: #18724f; background: var(--mafsu-green-100); font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.mafsu-chat__kicker { display: flex; align-items: center; gap: 5px; margin: 1px 0 0; color: var(--mafsu-muted); font-size: 10px; font-weight: 500; }
.mafsu-chat__kicker span { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #1eb35b; box-shadow: 0 0 0 2.5px #dff4e6; }
.mafsu-chat__kicker span[data-health="checking"] { background: var(--mafsu-saffron); box-shadow: 0 0 0 2.5px #fbf0dc; }
.mafsu-chat__kicker span[data-health="offline"] { background: #c64b3c; box-shadow: 0 0 0 2.5px #f8e3df; }
.mafsu-chat__icon-button { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 9px; color: #56625d; background: transparent; cursor: pointer; transition: color .14s, background-color .14s; }
.mafsu-chat__icon-button:hover { color: var(--mafsu-ink); background: #f1f5f2; }
.mafsu-chat__icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.mafsu-chat__help-button { font-size: 15px; font-weight: 700; }
.mafsu-chat__expand { display: grid; }
.mafsu-chat__expand .mafsu-chat__collapse-icon { display: none; }

/* ---------- toolbar ---------- */
/* Shown only in Hindi/Marathi, right under the header - a translation-quality
   heads-up so an awkward or wrong-sounding phrase reads as an expected beta
   limitation rather than something alarming. Amber, not the red error tone
   below, since this is advisory, not a failure. */
.mafsu-chat__lang-notice { padding: 6px 14px; font-size: 11px; line-height: 1.4; color: #6b5416; background: #fff8e6; border-bottom: 1px solid #f0dfa6; }
.mafsu-chat__lang-notice[hidden] { display: none; }
.mafsu-chat__toolbar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #e4ebe7; background: #fcfdfc; }
/* Read-only: the student picks a programme from the welcome cards, or just
   names one in a question. This only reports which corpus is answering. */
.mafsu-chat__context { min-width: 0; margin: 0; overflow: hidden; padding: 5px 10px; border-radius: 999px; color: #27332e; background: var(--mafsu-green-100); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mafsu-chat__context[hidden] { display: none; }
.mafsu-chat__languages { display: flex; margin-left: auto; padding: 2px; border: 1px solid var(--mafsu-line); border-radius: 8px; background: #fff; }
.mafsu-chat__languages button { min-width: 30px; padding: 4px 6px; border: 0; border-radius: 6px; color: var(--mafsu-muted); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.mafsu-chat__languages button:hover { color: var(--mafsu-ink); }
.mafsu-chat__languages button[aria-pressed="true"] { color: #fff; background: var(--mafsu-green-800); }
.mafsu-chat__reset { flex: 0 0 auto; padding: 4px 2px; border: 0; color: #59665f; background: none; font-size: 11px; cursor: pointer; }
.mafsu-chat__reset:hover { color: var(--mafsu-green-800); text-decoration: underline; }

/* ---------- messages ---------- */
.mafsu-chat__messages { transition: padding var(--mafsu-resize); flex: 1; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 18px 16px 20px; background: #fbfcfa; scroll-behavior: smooth; }

.mafsu-chat__hello { margin: 0; color: #202a25; font-size: 15px; font-weight: 600; }
.mafsu-chat__welcome h3 { transition: font-size var(--mafsu-resize); margin: 1px 0 7px; color: #202a25; font-family: "Tiro Devanagari Marathi", "Noto Sans", serif; font-size: 27px; font-weight: 400; line-height: 1.18; letter-spacing: -.01em; }
.mafsu-chat__welcome h3 em { color: #168259; font-style: normal; }
.mafsu-chat__welcome > p:not(.mafsu-chat__hello):not(.mafsu-chat__explore-title) { max-width: 380px; margin: 0 0 16px; color: #59665f; font-size: 12.5px; line-height: 1.55; text-wrap: pretty; }
.mafsu-chat__explore-title { margin: 0 0 8px; color: #26322d; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.mafsu-chat__course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mafsu-chat__course-grid button { position: relative; display: block; min-width: 0; min-height: 104px; padding: 12px 8px 22px; border: 1px solid var(--mafsu-line); border-radius: 14px; color: var(--mafsu-ink); background: #fff; text-align: center; cursor: pointer; transition: border-color .16s ease-out, transform .16s ease-out, box-shadow .16s ease-out, background-color .16s ease-out, min-height var(--mafsu-resize); }
.mafsu-chat__course-grid button:nth-child(1) { border-color: #cce4d5; background: #f2f8f4; }
.mafsu-chat__course-grid button:nth-child(2) { border-color: #cbdff5; background: #f2f7fd; }
.mafsu-chat__course-grid button:nth-child(3) { border-color: #dfd1f0; background: #f8f4fc; }
.mafsu-chat__course-grid button:hover { background: #fff; box-shadow: 0 6px 16px rgba(22,75,53,.09); transform: translateY(-2px); }
.mafsu-chat__course-grid i { display: grid; width: 32px; height: 32px; place-items: center; margin: 0 auto 8px; border-radius: 50%; color: #fff; background: #15945f; font-size: 12px; font-style: normal; font-weight: 800; }
.mafsu-chat__course-grid button:nth-child(2) i { background: #348ce6; }
.mafsu-chat__course-grid button:nth-child(3) i { background: #9160ca; }
.mafsu-chat__course-grid strong, .mafsu-chat__course-grid span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mafsu-chat__course-grid strong { font-size: 12px; }
.mafsu-chat__course-grid span { margin-top: 2px; color: var(--mafsu-muted); font-size: 9.5px; }
.mafsu-chat__course-grid b { position: absolute; right: 9px; bottom: 6px; color: #15945f; font-size: 13px; font-weight: 500; transition: transform .16s ease-out; }
.mafsu-chat__course-grid button:nth-child(2) b { color: #348ce6; }
.mafsu-chat__course-grid button:nth-child(3) b { color: #9160ca; }
.mafsu-chat__course-grid button:hover b { transform: translateX(3px); }

.mafsu-chat__disclosure { margin: 14px 0 0; padding: 9px 11px; border-radius: 9px; background: var(--sunk, #eef2ef); color: #56655c; font-size: 10.5px; line-height: 1.5; }
.mafsu-chat__report { display: inline-flex; align-items: center; gap: 4px; margin: 3px 0 0 2px; padding: 2px 0; border: 0; background: none; color: #7a857e; font-size: 10px; cursor: pointer; }
.mafsu-chat__report:hover { color: var(--mafsu-terracotta); text-decoration: underline; }
.mafsu-chat__report[disabled] { color: #9aa39d; cursor: default; text-decoration: none; }
.mafsu-chat__quick-questions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.mafsu-chat__quick-questions button, .mafsu-chat__options button { transition: font-size var(--mafsu-resize), border-color .14s, background-color .14s; padding: 8px 13px; border: 1px solid var(--mafsu-line); border-radius: 999px; color: #287255; background: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .14s, background-color .14s; }
.mafsu-chat__quick-questions button:hover, .mafsu-chat__options button:hover { border-color: var(--mafsu-green-800); background: var(--mafsu-green-100); }
.mafsu-chat__options button:disabled { opacity: .55; cursor: default; }

.mafsu-chat__message { display: flex; margin: 0 0 12px; }
.mafsu-chat__message--user { justify-content: flex-end; }
.mafsu-chat__bubble { transition: max-width var(--mafsu-resize); max-width: 88%; padding: 11px 13px; border-radius: 16px 16px 16px 5px; color: var(--mafsu-ink); background: #eef5ef; white-space: pre-wrap; overflow-wrap: anywhere; }
.mafsu-chat__message--user .mafsu-chat__bubble { border-radius: 16px 16px 5px 16px; color: #fff; background: #28775a; }
/* The welcome screen carried two overlapping disclaimers - a grey block and a
   footer strip - so a student met a wall of caution before asking anything,
   and the programme cards got pushed down the panel. One quiet line in the
   footer now opens this, which has room to say the important things properly
   instead of compressing them into six lines of small print. */
.mafsu-chat__notice { display: block; width: 100%; padding: 7px 14px 11px; border: 0; background: transparent; color: #6b7671; font-size: 10.5px; line-height: 1.45; text-align: center; cursor: pointer; }
.mafsu-chat__notice b { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.mafsu-chat__notice:hover b { color: var(--mafsu-green-900); }

.mafsu-chat__about { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 18px; border-radius: inherit; background: rgba(24,42,35,.34); backdrop-filter: blur(2px); animation: mafsu-fade-in .18s ease-out; }
.mafsu-chat__about[hidden] { display: none; }
.mafsu-chat__about-card { position: relative; width: 100%; max-width: 330px; padding: 22px 20px 18px; border-radius: 16px; background: var(--mafsu-white); box-shadow: 0 18px 44px rgba(20,45,35,.24); animation: mafsu-message-in .24s cubic-bezier(.22,1,.36,1) both; }
.mafsu-chat__about-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 8px; color: #6b7671; background: transparent; font-size: 19px; line-height: 1; cursor: pointer; }
.mafsu-chat__about-close:hover { background: var(--mafsu-green-100); }
.mafsu-chat__about-tag { margin: 0 0 6px; color: var(--mafsu-green-800); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mafsu-chat__about-card h3 { margin: 0 0 12px; color: #202a25; font-family: "Tiro Devanagari Marathi", "Noto Sans", serif; font-size: 21px; font-weight: 400; line-height: 1.2; }
.mafsu-chat__about-list { margin: 0 0 16px; padding: 0; list-style: none; }
.mafsu-chat__about-list li { position: relative; margin-bottom: 9px; padding-left: 17px; color: #3b4741; font-size: 12.5px; line-height: 1.5; }
.mafsu-chat__about-list li::before { content: ""; position: absolute; top: .55em; left: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--mafsu-green-800); }
.mafsu-chat__about-ok { width: 100%; padding: 10px; border: 0; border-radius: 10px; color: #fff; background: var(--mafsu-green-900); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .14s; }
.mafsu-chat__about-ok:hover { background: #0f4a39; }
@keyframes mafsu-fade-in { from { opacity: 0; } }

/* A trailing request - "Tell me when you cancelled and I will tell you which
   row applies" - is an invitation, but buried at the end of an eight-line
   paragraph nobody acts on it. Lifted out, it reads as the next step. It
   focuses the composer rather than sending anything: the assistant is asking
   the student for a detail, not offering a question to ask back. */
.mafsu-chat__followup { margin: 9px 0 0; }
.mafsu-chat__followup-btn { display: flex; width: 100%; align-items: center; gap: 7px; max-width: 100%; padding: 8px 13px; border: 1px dashed rgba(21,91,70,.34); border-radius: 12px; color: var(--mafsu-green-900); background: rgba(232,242,236,.6); font-size: 11.5px; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; transition: border-color .14s, background-color .14s; }
.mafsu-chat__followup-btn::before { content: "\21B5"; flex: 0 0 auto; opacity: .7; font-weight: 400; }
.mafsu-chat__followup-btn:hover { border-color: var(--mafsu-green-800); border-style: solid; background: var(--mafsu-green-100); }

/* The honest waiting line, once the dots have stopped being reassuring. */
.mafsu-chat__still { margin: 7px 0 0; color: #6b7671; font-size: 11px; font-style: italic; animation: mafsu-fade-in .3s ease-out; }

/* Structured answers. The refund scale, document checklists and threshold
   comparisons all arrive as plain lines; rendered as one block every row
   weighed the same, so a student looking for their own case had to read all
   of them.

   No disc marker: the figure starting each row IS the marker, and a bullet
   beside it is redundant. Giving that figure its own column lets the eye run
   down 100 / 90 / 80 / 50 / 0 and stop at the row that applies. */
.mafsu-chat__bubble p { margin: 0 0 9px; }
.mafsu-chat__bubble p:last-child { margin-bottom: 0; }
.mafsu-chat__answer-list { margin: 2px 0 9px; padding: 0; list-style: none; }
.mafsu-chat__answer-list:last-child { margin-bottom: 0; }
.mafsu-chat__answer-list li { display: grid; grid-template-columns: 3.4em 1fr; gap: 0 10px; padding: 4px 0; border-top: 1px solid rgba(21,91,70,.10); }
.mafsu-chat__answer-list li:first-child { border-top: 0; }
/* An enumeration has no figure to put in a column, so it takes a plain marker
   and the full width instead of the two-column grid the refund scale uses. */
.mafsu-chat__answer-list--plain li { display: list-item; grid-template-columns: none; margin-left: 15px; padding: 3px 0; list-style: disc; }
.mafsu-chat__answer-list--plain li::marker { color: var(--mafsu-green-800); }
.mafsu-chat__answer-list li b { color: var(--mafsu-green-900); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.mafsu-chat__options { display: flex; flex-wrap: wrap; gap: 6px; margin: -3px 0 14px; }
.mafsu-chat__options button { padding: 7px 12px; }
.mafsu-chat__typing { display: inline-flex; gap: 4px; padding: 13px 15px; border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: 0 1px 3px rgba(18,50,36,.06); }
.mafsu-chat__typing i { width: 5px; height: 5px; border-radius: 50%; background: #7d8a82; animation: mafsu-dot 1s infinite ease-in-out; }
.mafsu-chat__typing i:nth-child(2) { animation-delay: .14s; }
.mafsu-chat__typing i:nth-child(3) { animation-delay: .28s; }

/* ---------- FAQ ---------- */
.mafsu-chat__faq { padding: 0 0 8px; }
.mafsu-chat__faq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mafsu-chat__faq h3 { margin: 0; font-size: 16px; font-weight: 700; }
.mafsu-chat__faq-close { border: 0; color: var(--mafsu-green-800); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.mafsu-chat__faq-close:hover { text-decoration: underline; }
.mafsu-chat__faq-list { display: grid; gap: 7px; }
.mafsu-chat__faq-list button { padding: 11px 13px; border: 1px solid var(--mafsu-line); border-radius: 12px; color: var(--mafsu-ink); background: #fff; font-size: 12px; text-align: left; cursor: pointer; }
.mafsu-chat__faq-list button:hover { border-color: #87ad99; background: var(--mafsu-green-100); }

/* ---------- composer ---------- */
.mafsu-chat__status { padding: 8px 14px; color: var(--mafsu-danger); border-top: 1px solid #efd1ca; background: #fff2ef; font-size: 11px; }
.mafsu-chat__composer { transition: margin var(--mafsu-resize); display: flex; align-items: flex-end; gap: 7px; margin: 10px 12px 6px; padding: 5px 5px 5px 12px; border: 1px solid #cfd9d2; border-radius: 18px; background: #fff; box-shadow: 0 3px 12px rgba(18,50,36,.06); transition: border-color .14s, box-shadow .14s; }
.mafsu-chat__composer:focus-within { border-color: #168259; box-shadow: 0 0 0 3px rgba(22,130,89,.10), 0 3px 12px rgba(18,50,36,.06); }
.mafsu-chat__compose-field { min-width: 0; flex: 1; }
.mafsu-chat__composer textarea { display: block; width: 100%; min-height: 34px; max-height: 148px; resize: none; padding: 8px 2px 3px; border: 0; outline: none; color: var(--mafsu-ink); background: #fff; font-size: 13.5px; line-height: 1.45; }
.mafsu-chat__composer textarea::placeholder { color: #7a857e; opacity: 1; }
.mafsu-chat__compose-meta { display: flex; min-height: 12px; align-items: center; justify-content: flex-end; padding: 0 2px 2px; color: #5c6862; font-size: 10px; line-height: 1.3; }
.mafsu-chat__compose-meta span:last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.mafsu-chat__compose-meta[data-near-limit="true"] span:last-child { color: var(--mafsu-danger); font-weight: 700; }
.mafsu-chat__composer button { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; color: #fff; background: #238d64; cursor: pointer; transition: background-color .14s; }
.mafsu-chat__composer button:hover { background: var(--mafsu-green-900); }
.mafsu-chat__composer .mafsu-chat__mic { width: 36px; height: 36px; color: var(--mafsu-muted); background: transparent; }
.mafsu-chat__composer .mafsu-chat__mic:hover { color: var(--mafsu-green-800); background: var(--mafsu-green-100); }
.mafsu-chat__composer .mafsu-chat__mic[aria-pressed="true"] { color: #fff; background: var(--mafsu-terracotta); }
.mafsu-chat__composer .mafsu-chat__mic:disabled { color: #9ba59e; background: transparent; cursor: not-allowed; }
.mafsu-chat__composer button:disabled { opacity: .5; cursor: wait; }
.mafsu-chat__composer svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.mafsu-chat__notice { margin: 0; padding: 0 15px 10px; color: var(--mafsu-muted); background: #fff; font-size: 10px; text-align: center; }
.mafsu-chat__notice span { margin-right: 3px; }

/* ---------- expanded: more room to read a long admission answer ---------- */
.mafsu-chat--wide .mafsu-chat__panel { width: min(680px, calc(100vw - 32px)); height: min(700px, calc(100vh - 120px)); }
.mafsu-chat--wide .mafsu-chat__expand .mafsu-chat__expand-icon { display: none; }
.mafsu-chat--wide .mafsu-chat__expand .mafsu-chat__collapse-icon { display: block; }
.mafsu-chat--wide .mafsu-chat__messages { padding: 22px 26px 24px; }
.mafsu-chat--wide .mafsu-chat__bubble { max-width: 76%; }
.mafsu-chat--wide .mafsu-chat__course-grid button { min-height: 112px; }
.mafsu-chat--wide .mafsu-chat__welcome h3 { font-size: 30px; }
.mafsu-chat--wide .mafsu-chat__composer { margin-inline: 22px; }
.mafsu-chat--wide .mafsu-chat__quick-questions button { font-size: 11.5px; }

/* ---------- motion ---------- */
/* Everything else in the panel moved except the messages: an answer simply
   existed one frame having not existed the previous one. That was tolerable
   when replies were a sentence; at 130-190 words a block that size appearing
   instantly reads as a jolt, and it lands right where the reader is looking.
   A short rise settles it into place and connects it to the typing dots it
   replaces. Deliberately brief - this repeats on every single turn, and
   anything showy would grate by the fifth question. */
.mafsu-chat__message { animation: mafsu-message-in .26s cubic-bezier(.22,1,.36,1) both; }
@keyframes mafsu-message-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes mafsu-panel-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes mafsu-nudge-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes mafsu-dot { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes mafsu-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

/* ---------- screens ----------
   Four sizes, each a real device situation rather than an arbitrary
   breakpoint: a desktop that can afford the wide mode, a tablet/small laptop
   that cannot, a phone where the panel becomes a full sheet, and a phone in
   landscape where height is the scarce dimension. */

/* Below ~720px the wide mode has nowhere to go, so stop offering it. */
@media (max-width: 719px) {
  .mafsu-chat__expand { display: none; }
  .mafsu-chat--wide .mafsu-chat__panel { width: min(400px, calc(100vw - 32px)); }
}

/* Phones: a full sheet, not a floating card. The launcher hides while it is
   open (the header's × closes it), so nothing sits on top of the composer. */
@media (max-width: 560px) {
  .mafsu-chat {
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    align-items: stretch;
  }
  .mafsu-chat__panel, .mafsu-chat--wide .mafsu-chat__panel {
    position: fixed;
    inset: max(8px, env(safe-area-inset-top, 0px)) 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px;
    width: auto; height: auto; border-radius: 18px;
  }
  .mafsu-chat--open .mafsu-chat__launcher, .mafsu-chat--open .mafsu-chat__nudge { display: none; }
  .mafsu-chat__nudge { width: auto; margin-left: auto; }
  .mafsu-chat__launcher { margin-left: auto; }
  /* "New chat" stays on phones: with the programme dropdown gone it is the
     only way back to the three programme cards. */
  .mafsu-chat__header { padding: 8px 8px 8px 12px; }
  .mafsu-chat__messages { padding: 16px 13px 18px; }
  .mafsu-chat__welcome h3 { font-size: 24px; }
  .mafsu-chat__bubble { max-width: 92%; }
  .mafsu-chat__composer { margin: 8px 10px 6px; }
  /* 16px is the threshold below which iOS Safari zooms the page on focus. */
  .mafsu-chat__composer textarea { font-size: 16px; }
  .mafsu-chat__icon-button { width: 36px; height: 36px; }
  .mafsu-chat__composer button { width: 42px; height: 42px; }
  .mafsu-chat__composer .mafsu-chat__mic { width: 40px; height: 40px; }
}

/* Narrow phones: the course cards keep their three columns - a student should
   still see all three programmes at once - but drop to name + arrow. */
@media (max-width: 379px) {
  .mafsu-chat__course-grid { gap: 6px; }
  .mafsu-chat__course-grid button { min-height: 88px; padding: 10px 4px 20px; }
  .mafsu-chat__course-grid span { display: none; }
  .mafsu-chat__course-grid i { width: 28px; height: 28px; margin-bottom: 6px; }
  .mafsu-chat__welcome h3 { font-size: 22px; }
  .mafsu-chat__quick-questions button { font-size: 10.5px; padding: 7px 11px; }
  .mafsu-chat__notice { font-size: 9px; }
}

/* Landscape phones and short windows: height is what is scarce. Trim the
   welcome, not the conversation. */
@media (max-height: 620px) {
  .mafsu-chat__panel { height: min(660px, calc(100vh - 96px)); height: min(660px, calc(100dvh - 96px)); }
  .mafsu-chat__hello { display: none; }
  .mafsu-chat__welcome h3 { margin-bottom: 5px; font-size: 21px; }
  .mafsu-chat__welcome > p:not(.mafsu-chat__hello):not(.mafsu-chat__explore-title) { margin-bottom: 11px; }
  .mafsu-chat__course-grid button { min-height: 84px; padding-bottom: 18px; }
  .mafsu-chat__notice { padding-bottom: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .mafsu-chat__panel, .mafsu-chat__nudge, .mafsu-chat__typing i, .mafsu-chat__message, .mafsu-chat__launcher[data-nudging="true"]::after { animation: none; }
  .mafsu-chat__panel, .mafsu-chat__launcher, .mafsu-chat__course-grid button,
  .mafsu-chat__messages, .mafsu-chat__bubble, .mafsu-chat__welcome h3,
  .mafsu-chat__composer, .mafsu-chat__quick-questions button { transition: none; }
  .mafsu-chat__messages { scroll-behavior: auto; }
}