/* Ronah - the NACMU assistant. One stylesheet for every module and the website.
   Everything is namespaced .ari so it cannot collide with a module's own CSS. */

.ari {
  --ari-brand: #1d4ed8;
  --ari-brand-2: #7c3aed;
  --ari-bg: #ffffff;
  --ari-surface: #f5f7fb;
  --ari-surface-2: #eef2f8;
  --ari-text: #0f172a;
  --ari-muted: #5b6477;
  --ari-border: #e2e7f0;
  --ari-me: #1d4ed8;
  --ari-me-text: #ffffff;
  --ari-success: #047857;
  --ari-success-bg: #e7f7ef;
  --ari-warning: #a15c07;
  --ari-warning-bg: #fdf3e2;
  --ari-danger: #b42318;
  --ari-danger-bg: #fdecea;
  --ari-info: #1d4ed8;
  --ari-info-bg: #e8effe;
  --ari-shadow: 0 24px 60px -12px rgba(15, 23, 42, .35), 0 4px 14px rgba(15, 23, 42, .12);
  --ari-bottom: max(18px, env(safe-area-inset-bottom));
  --ari-right: max(18px, env(safe-area-inset-right));
  position: fixed;
  z-index: 2147482000;
  right: var(--ari-right);
  bottom: var(--ari-bottom);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ari-text);
  -webkit-font-smoothing: antialiased;
}
.ari *, .ari *::before, .ari *::after { box-sizing: border-box; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ari {
    --ari-bg: #111827; --ari-surface: #1a2332; --ari-surface-2: #223047; --ari-text: #e8edf5; --ari-muted: #9aa6b8;
    --ari-border: #2b3a52; --ari-me: #3b6cf0; --ari-success: #34d399; --ari-success-bg: #0f2e25; --ari-warning: #fbbf24;
    --ari-warning-bg: #33260c; --ari-danger: #f87171; --ari-danger-bg: #3a1616; --ari-info: #93b4ff; --ari-info-bg: #1b2a4a;
  }
}
:root[data-theme="dark"] .ari {
  --ari-bg: #111827; --ari-surface: #1a2332; --ari-surface-2: #223047; --ari-text: #e8edf5; --ari-muted: #9aa6b8;
  --ari-border: #2b3a52; --ari-me: #3b6cf0; --ari-success: #34d399; --ari-success-bg: #0f2e25; --ari-warning: #fbbf24;
  --ari-warning-bg: #33260c; --ari-danger: #f87171; --ari-danger-bg: #3a1616; --ari-info: #93b4ff; --ari-info-bg: #1b2a4a;
}

/* Sits above the platform dock and the sponsor portal's bottom bar. */
.ari--dock { --ari-bottom: calc(max(14px, env(safe-area-inset-bottom)) + 58px); }
@media (max-width: 768px) { .ari--sponsor { --ari-bottom: calc(max(14px, env(safe-area-inset-bottom)) + 78px); } }

/* ---------------------------------------------------------------- launcher */
/* The launcher is the Ronah mascot, standing on a round badge. */
.ari__launcher {
  position: relative; display: block; width: 80px; height: 96px; padding: 0; border: 0; border-radius: 0;
  cursor: pointer; background: none; -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease;
}
.ari__launcher::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 68px; height: 68px; margin-left: -34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #eef3ff 60%, #dfe8ff 100%);
  box-shadow: 0 0 0 3px var(--ari-brand-2), 0 12px 28px -6px rgba(29, 78, 216, .55), 0 2px 6px rgba(15, 23, 42, .2);
}
.ari__launcher:hover { transform: translateY(-3px); }
.ari__launcher:focus-visible { outline: none; }
.ari__launcher:focus-visible::before { box-shadow: 0 0 0 3px var(--ari-brand-2), 0 0 0 7px #93b4ff; }
.ari__launcher .ari-m { position: absolute; left: 50%; bottom: 4px; width: 80px; height: 96px; margin-left: -40px; overflow: visible; }
.ari__launcher::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 76px; height: 76px; margin-left: -38px; border-radius: 50%;
  border: 2px solid rgba(124, 58, 237, .45); animation: ari-ring 2.8s ease-out infinite; pointer-events: none;
}
/* Phones: a smaller Ronah mascot, which steps aside while the page is scrolled down so it
   never sits on top of what someone is reading, and comes back when they
   scroll up or stop (assistant.js sets .ari--tucked). */
@media (max-width: 768px) {
  .ari__launcher { width: 58px; height: 70px; }
  .ari__launcher::before { width: 50px; height: 50px; margin-left: -25px; }
  .ari__launcher::after { width: 56px; height: 56px; margin-left: -28px; bottom: -3px; }
  .ari__launcher .ari-m { width: 58px; height: 70px; margin-left: -29px; bottom: 3px; }
  .ari__badge { top: 12px; }
  .ari__teaser { bottom: 78px; }
  .ari__panel { bottom: 80px; }
  .ari:not(.ari--open) .ari__launcher, .ari:not(.ari--open) .ari__teaser { transition: transform .3s ease, opacity .3s ease; }
  .ari--tucked:not(.ari--open) .ari__launcher, .ari--tucked:not(.ari--open) .ari__teaser {
    transform: translateX(calc(100% + var(--ari-right))); opacity: 0; pointer-events: none;
  }
}
.ari--open .ari__launcher::after, .ari--seen .ari__launcher::after { display: none; }
.ari__badge {
  position: absolute; top: 22px; right: 0; z-index: 1; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px var(--ari-bg);
}
.ari__badge[hidden] { display: none; }

.ari__teaser {
  position: absolute; right: 0; bottom: 104px; width: max-content; max-width: min(260px, calc(100vw - 40px));
  padding: 10px 34px 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--ari-bg); color: var(--ari-text);
  box-shadow: var(--ari-shadow); border: 1px solid var(--ari-border); cursor: pointer; font-size: 13.5px;
  animation: ari-pop .35s cubic-bezier(.2, .9, .3, 1.3);
}
.ari__teaser-close {
  position: absolute; top: 4px; right: 6px; width: 24px; height: 24px; border: 0; background: none; color: var(--ari-muted);
  cursor: pointer; font-size: 16px; line-height: 1;
}

/* ------------------------------------------------------------------- panel */
.ari__panel {
  position: absolute; right: 0; bottom: 106px; width: min(400px, calc(100vw - 32px)); height: min(640px, calc(100vh - 140px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--ari-bg);
  border: 1px solid var(--ari-border); box-shadow: var(--ari-shadow);
  transform-origin: bottom right; animation: ari-open .28s cubic-bezier(.2, .9, .3, 1.1);
}
.ari__panel[hidden] { display: none; }
.ari--wide .ari__panel { width: min(720px, calc(100vw - 32px)); height: min(820px, calc(100vh - 140px)); }

.ari__head {
  display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 16px; color: #fff;
  background: linear-gradient(120deg, var(--ari-brand), var(--ari-brand-2));
}
.ari__avatar {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ffffff, #e6edff); box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}
.ari__avatar .ari-m { width: 42px; height: 40px; margin-top: 4px; overflow: visible; }

/* ------------------------------------------------------------------ mascot */
.ari-m text { font: 800 9px/1 system-ui, sans-serif; fill: var(--ari-brand-2); }
.ari-m__shadow { fill: rgba(15, 23, 42, .18); transform-box: view-box; transform-origin: 50px 114px; }
.ari-m__body { transform-box: view-box; transform-origin: 50px 110px; animation: ari-breathe 3.4s ease-in-out infinite; }
.ari-m__head { transform-box: view-box; transform-origin: 50px 46px; transition: transform .35s ease; }
.ari-m__arm-r { transform-box: view-box; transform-origin: 63px 58px; animation: ari-sway 4s ease-in-out infinite; }
.ari-m__arm-l { transform-box: view-box; transform-origin: 37px 58px; transition: transform .35s ease; }
.ari-m__eyes { transform-box: view-box; transform-origin: 50px 30.5px; transition: transform .08s ease; }
.ari-m__pupils { transition: transform .15s ease-out; }
.ari-m__brows { transform-box: view-box; transition: transform .25s ease; }
.ari-m__talk, .ari-m__o, .ari-m__shut, .ari-m__think, .ari-m__zzz, .ari-m__heart, .ari-m__waves { opacity: 0; transition: opacity .2s ease; }
.ari-m__think circle { fill: #fff; stroke: var(--ari-brand-2); stroke-width: 1.1; }
.ari-m__heart { fill: #ef4444; transform-box: view-box; transform-origin: 80px 12px; }
.ari-m__waves { stroke: var(--ari-brand-2); stroke-width: 1.8; }
.ari--blink .ari-m__eyes { transform: scaleY(.1); }

/* wave: a hello (on hover, when a hint appears, and when the chat closes) */
.ari[data-mood="wave"] .ari-m__arm-r { animation: ari-wave .5s ease-in-out infinite alternate; }
.ari[data-mood="wave"] .ari-m__head { transform: rotate(-4deg); }
/* happy: a jump and a heart (when the chat opens) */
.ari[data-mood="happy"] .ari-m__body { animation: ari-jump .55s cubic-bezier(.3, .7, .4, 1.4) 2; }
.ari[data-mood="happy"] .ari-m__shadow { animation: ari-shadow .55s ease 2; }
.ari[data-mood="happy"] .ari-m__arm-r { animation: ari-wave .28s ease-in-out infinite alternate; }
.ari[data-mood="happy"] .ari-m__arm-l { transform: rotate(40deg); }
.ari[data-mood="happy"] .ari-m__heart { opacity: 1; animation: ari-heart 1.1s ease-out forwards; }
/* think: eyes up, a small "o", thought bubbles, hand to chin (while an answer is on its way) */
.ari[data-mood="think"] .ari-m__smile { opacity: 0; }
.ari[data-mood="think"] .ari-m__o { opacity: 1; }
.ari[data-mood="think"] .ari-m__think { opacity: 1; }
.ari[data-mood="think"] .ari-m__think circle { animation: ari-bubble 1.2s ease-in-out infinite; }
.ari[data-mood="think"] .ari-m__think circle:nth-child(2) { animation-delay: .2s; }
.ari[data-mood="think"] .ari-m__think circle:nth-child(3) { animation-delay: .4s; }
.ari[data-mood="think"] .ari-m__pupils { transform: translate(1.3px, -1.7px) !important; }
.ari[data-mood="think"] .ari-m__head { transform: rotate(6deg); }
.ari[data-mood="think"] .ari-m__arm-r { animation: none; transform: rotate(-58deg) translate(-3px, 4px); }
/* talk: the mouth moves (while he answers) */
.ari[data-mood="talk"] .ari-m__smile { opacity: 0; }
.ari[data-mood="talk"] .ari-m__talk { opacity: 1; transform-box: fill-box; transform-origin: center; animation: ari-talk .18s ease-in-out infinite alternate; }
.ari[data-mood="talk"] .ari-m__body { animation-duration: 1.6s; }
/* listen: head tilted, sound waves (while the person types or speaks) */
.ari[data-mood="listen"] .ari-m__head { transform: rotate(-8deg); }
.ari[data-mood="listen"] .ari-m__waves { opacity: 1; animation: ari-bubble .9s ease-in-out infinite; }
.ari[data-mood="listen"] .ari-m__brows { transform: translateY(-1.2px); }
/* oops: surprised (when something went wrong) */
.ari[data-mood="oops"] .ari-m__smile { opacity: 0; }
.ari[data-mood="oops"] .ari-m__o { opacity: 1; }
.ari[data-mood="oops"] .ari-m__brows { transform: translateY(-2px); }
.ari[data-mood="oops"] .ari-m__eyes { transform: scale(1.12); }
.ari[data-mood="oops"] .ari-m__arm-l { transform: rotate(35deg); }
/* sleep: eyes shut, zzz, slow breathing (after a while with nobody around) */
.ari[data-mood="sleep"] .ari-m__eyes { opacity: 0; }
.ari[data-mood="sleep"] .ari-m__shut { opacity: 1; }
.ari[data-mood="sleep"] .ari-m__smile { opacity: 0; }
.ari[data-mood="sleep"] .ari-m__o { opacity: .8; }
.ari[data-mood="sleep"] .ari-m__zzz { opacity: 1; animation: ari-zzz 2.4s ease-in-out infinite; }
.ari[data-mood="sleep"] .ari-m__head { transform: rotate(10deg) translateY(1px); }
.ari[data-mood="sleep"] .ari-m__arm-r { animation: none; transform: rotate(-70deg) translate(-2px, 8px); }
.ari[data-mood="sleep"] .ari-m__body { animation-duration: 5s; }

@keyframes ari-breathe { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-1px) scaleY(1.012); } }
@keyframes ari-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg); } }
@keyframes ari-wave { from { transform: rotate(-14deg); } to { transform: rotate(18deg); } }
@keyframes ari-jump { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-11px); } }
@keyframes ari-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 45% { transform: scaleX(.7); opacity: .5; } }
@keyframes ari-heart { 0% { transform: translateY(6px) scale(.4); opacity: 0; } 30% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { transform: translateY(-8px) scale(1); opacity: 0; } }
@keyframes ari-bubble { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes ari-talk { from { transform: scaleY(.35); } to { transform: scaleY(1.1); } }
@keyframes ari-zzz { 0% { transform: translateY(2px); opacity: .3; } 50% { opacity: 1; } 100% { transform: translateY(-3px); opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .ari-m *, .ari-m__body, .ari-m__arm-r, .ari[data-mood] .ari-m__body, .ari[data-mood] .ari-m__arm-r { animation: none !important; }
}
.ari__who { flex: 1; min-width: 0; }
.ari__name { font-weight: 700; font-size: 15px; letter-spacing: .2px; }
.ari__status { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .9; }
.ari__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }
.ari__tool {
  display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: #fff; opacity: .85;
}
.ari__tool:hover, .ari__tool[aria-pressed="true"] { background: rgba(255, 255, 255, .16); opacity: 1; }
.ari__tool:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.ari__tool svg { width: 18px; height: 18px; }

.ari__log {
  position: relative; flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 12px;
  background: var(--ari-surface); scroll-behavior: smooth; overscroll-behavior: contain;
}
.ari__msg { display: flex; gap: 8px; max-width: 100%; animation: ari-in .25s ease-out; }
.ari__msg--me { justify-content: flex-end; }
.ari__bubble {
  max-width: 88%; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: var(--ari-bg);
  border: 1px solid var(--ari-border); overflow-wrap: anywhere;
}
.ari__msg--me .ari__bubble { border-radius: 16px 16px 4px 16px; background: var(--ari-me); color: var(--ari-me-text); border-color: transparent; }
.ari__msg--wide .ari__bubble { max-width: 100%; width: 100%; }
.ari__bubble p { margin: 0 0 .5em; }
.ari__bubble p:last-child { margin-bottom: 0; }
.ari__bubble ul { margin: .3em 0 .5em; padding-left: 1.15em; }
.ari__bubble a { color: var(--ari-info); font-weight: 600; }
.ari__msg--me .ari__bubble a { color: #fff; }
.ari__bubble a.ari__row { color: inherit; font-weight: inherit; }
.ari__bubble a.ari__btn { color: var(--ari-text); font-weight: 600; }
.ari__bubble a.ari__btn--primary { color: #fff; }
.ari__bubble code { padding: 1px 5px; border-radius: 5px; background: var(--ari-surface-2); font-size: 12.5px; }
.ari__meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--ari-muted); }
.ari__ai {
  padding: 1px 7px; border-radius: 999px; background: linear-gradient(120deg, rgba(29, 78, 216, .12), rgba(124, 58, 237, .16));
  color: var(--ari-brand-2); font-weight: 700; letter-spacing: .3px;
}

/* ------------------------------------------------------------------- cards */
.ari__card { margin-top: 10px; }
.ari__card-title { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ari-muted); }
.ari__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
.ari__stat { padding: 9px 10px; border-radius: 12px; background: var(--ari-surface); border: 1px solid var(--ari-border); }
.ari__stat-value { font-size: 17px; font-weight: 800; line-height: 1.2; }
.ari__stat-label { font-size: 11.5px; color: var(--ari-muted); }
.ari__stat--success .ari__stat-value { color: var(--ari-success); }
.ari__stat--danger .ari__stat-value { color: var(--ari-danger); }
.ari__stat--warning .ari__stat-value { color: var(--ari-warning); }

.ari__list { display: flex; flex-direction: column; border: 1px solid var(--ari-border); border-radius: 12px; overflow: hidden; }
.ari__row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; border-top: 1px solid var(--ari-border);
  background: var(--ari-bg); color: inherit; text-align: left; text-decoration: none; font: inherit;
}
.ari__row:first-child { border-top: 0; }
a.ari__row, button.ari__row { cursor: pointer; }
a.ari__row:hover, button.ari__row:hover { background: var(--ari-surface); }
.ari__row-main { flex: 1; min-width: 0; }
.ari__row-title { font-weight: 600; line-height: 1.35; }
.ari__row-sub { font-size: 12px; color: var(--ari-muted); line-height: 1.35; }
.ari__row-go { flex: none; color: var(--ari-muted); }
.ari__pill { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--ari-surface-2); color: var(--ari-muted); }
.ari__pill--success { background: var(--ari-success-bg); color: var(--ari-success); }
.ari__pill--warning { background: var(--ari-warning-bg); color: var(--ari-warning); }
.ari__pill--danger { background: var(--ari-danger-bg); color: var(--ari-danger); }
.ari__pill--info { background: var(--ari-info-bg); color: var(--ari-info); }

.ari__people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ari__person { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--ari-bg); border: 1px solid var(--ari-border); }
.ari__person-photo { position: relative; aspect-ratio: 4 / 3; background: var(--ari-surface-2); overflow: hidden; cursor: pointer; border: 0; padding: 0; }
.ari__person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.ari__person-photo:hover img { transform: scale(1.05); }
.ari__urgent { position: absolute; top: 6px; left: 6px; padding: 1px 7px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 700; }
.ari__person-body { padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ari__person-name { font-weight: 700; }
.ari__person-sub, .ari__person-note { font-size: 11.5px; color: var(--ari-muted); line-height: 1.35; }
.ari__person .ari__btn { margin-top: auto; }

.ari__links { display: flex; flex-wrap: wrap; gap: 6px; }
.ari__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border-radius: 10px;
  border: 1px solid var(--ari-border); background: var(--ari-bg); color: var(--ari-text); font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; text-decoration: none; line-height: 1.3;
}
.ari__btn:hover { background: var(--ari-surface); }
.ari__btn--primary { border-color: transparent; background: linear-gradient(120deg, var(--ari-brand), var(--ari-brand-2)); color: #fff; }
.ari__btn--primary:hover { filter: brightness(1.07); background: linear-gradient(120deg, var(--ari-brand), var(--ari-brand-2)); }
.ari__btn[disabled] { opacity: .6; cursor: progress; }

.ari__form { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 14px; background: var(--ari-surface); border: 1px solid var(--ari-border); }
.ari__form-title { font-weight: 700; }
.ari__field { display: flex; flex-direction: column; gap: 3px; }
.ari__field label { font-size: 12px; font-weight: 600; color: var(--ari-muted); }
.ari__field input, .ari__field select, .ari__field textarea {
  width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--ari-border); background: var(--ari-bg);
  color: var(--ari-text); font: inherit; font-size: 13.5px;
}
.ari__field textarea { min-height: 72px; resize: vertical; }
.ari__field input:focus, .ari__field select:focus, .ari__field textarea:focus { outline: 2px solid rgba(29, 78, 216, .35); border-color: var(--ari-brand); }
.ari__check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ari__check input { width: 16px; height: 16px; }
.ari__form-note { font-size: 11.5px; color: var(--ari-muted); }
.ari__form-error { font-size: 12.5px; color: var(--ari-danger); }
.ari__form--done { opacity: .65; pointer-events: none; }

/* --------------------------------------------------------- typing, chips */
.ari__typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; }
.ari__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ari-muted); animation: ari-bounce 1.2s infinite ease-in-out; }
.ari__typing i:nth-child(2) { animation-delay: .15s; }
.ari__typing i:nth-child(3) { animation-delay: .3s; }
.ari__typing-note { margin-left: 8px; font-size: 12px; color: var(--ari-muted); }

.ari__chips { display: flex; gap: 6px; padding: 8px 12px 2px; overflow-x: auto; scrollbar-width: none; background: var(--ari-bg); }
.ari__chips::-webkit-scrollbar { display: none; }
.ari__chip {
  flex: none; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--ari-border); background: var(--ari-bg);
  color: var(--ari-brand); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ari__chip:hover { background: var(--ari-info-bg); border-color: transparent; }

/* ---------------------------------------------------------------- composer */
.ari__composer { display: flex; align-items: flex-end; gap: 6px; padding: 10px 10px 12px; background: var(--ari-bg); border-top: 1px solid var(--ari-border); }
.ari__input {
  flex: 1; min-height: 42px; max-height: 140px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--ari-border);
  background: var(--ari-surface); color: var(--ari-text); font: inherit; resize: none; line-height: 1.4;
}
.ari__input:focus { outline: 2px solid rgba(29, 78, 216, .3); border-color: var(--ari-brand); background: var(--ari-bg); }
.ari__icon-btn {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 13px; cursor: pointer;
  background: var(--ari-surface-2); color: var(--ari-muted);
}
.ari__icon-btn svg { width: 19px; height: 19px; }
.ari__icon-btn:hover { color: var(--ari-text); }
.ari__icon-btn--send { background: linear-gradient(135deg, var(--ari-brand), var(--ari-brand-2)); color: #fff; }
.ari__icon-btn--send:hover { color: #fff; filter: brightness(1.08); }
.ari__icon-btn--live { background: #ef4444; color: #fff; animation: ari-pulse 1.2s infinite; }
.ari__foot { padding: 0 12px 8px; font-size: 10.5px; color: var(--ari-muted); text-align: center; background: var(--ari-bg); }
.ari__foot kbd { font: inherit; padding: 0 4px; border: 1px solid var(--ari-border); border-radius: 4px; }

.ari__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ phones */
@media (max-width: 520px) {
  .ari--open { right: 0; bottom: 0; left: 0; top: 0; }
  .ari--open .ari__launcher { display: none; }
  .ari--open .ari__panel, .ari--wide .ari__panel { position: fixed; inset: 0; width: 100%; height: 100%; border-radius: 0; border: 0; bottom: 0; }
  .ari__head { padding-top: max(14px, env(safe-area-inset-top)); }
  .ari__composer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

@media print { .ari { display: none !important; } }

@keyframes ari-open { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ari-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ari-pop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ari-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes ari-ring { 0% { transform: scale(.95); opacity: .9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes ari-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); } 50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } }
@media (prefers-reduced-motion: reduce) {
  .ari *, .ari *::before, .ari *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}