/* Miti Miwiri chatbot widget. Uses the template's colour tokens, with fallbacks. */
.mm-chat {
  --c-bg: var(--mm-white, #fff);
  --c-ink: var(--mm-ink, #2e2d1e);
  --c-soft: var(--mm-ink-soft, #5d5c47);
  --c-brand: var(--mm-forest, #24361a);
  --c-accent: var(--mm-leaf, #6e9a0e);
  --c-sand: var(--mm-sand, #f7f2e7);
  --c-line: var(--mm-line, rgba(46, 45, 30, .14));
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 1040;
  font-family: var(--mm-font-body, system-ui, sans-serif);
  color: var(--c-ink);
}
.mm-chat__fab {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 52px; padding: .7rem 1.15rem .7rem .95rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--c-brand); color: #fff;
  font: 600 .95rem/1 var(--mm-font-body, system-ui, sans-serif);
  box-shadow: var(--mm-shadow-lg, 0 18px 50px rgba(36, 54, 26, .18));
  transition: transform .2s ease, background-color .2s ease;
}
.mm-chat__fab:hover { background: var(--mm-forest-2, #2f4723); transform: translateY(-2px); }
.mm-chat__fab:focus-visible, .mm-chat button:focus-visible, .mm-chat a:focus-visible, .mm-chat__input:focus-visible {
  outline: 3px solid var(--mm-ochre, #d39a2b); outline-offset: 2px;
}
.mm-chat.is-open .mm-chat__fab { display: none; }

.mm-chat__panel {
  display: flex; flex-direction: column;
  width: min(390px, calc(100vw - 2rem));
  height: min(620px, calc(100dvh - 2rem));
  background: var(--c-bg);
  border-radius: var(--mm-radius-lg, 22px);
  box-shadow: var(--mm-shadow-lg, 0 18px 50px rgba(36, 54, 26, .18));
  overflow: hidden;
  animation: mm-chat-in .22s ease-out;
}
.mm-chat__panel[hidden] { display: none; }
@keyframes mm-chat-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.mm-chat__head {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem; background: var(--c-brand); color: #fff;
}
.mm-chat__avatar {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-accent); color: #fff;
}
.mm-chat__titles { flex: 1; min-width: 0; }
.mm-chat__title { margin: 0; font: 600 1.05rem/1.2 var(--mm-font-head, Georgia, serif); color: #fff; }
.mm-chat__subtitle { margin: .1rem 0 0; font-size: .78rem; opacity: .8; }
.mm-chat__close {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
}
.mm-chat__close:hover { background: rgba(255, 255, 255, .12); }

.mm-chat__log {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem; display: flex; flex-direction: column; gap: .7rem;
  background: var(--c-sand);
}
.mm-chat__msg {
  max-width: 88%; padding: .65rem .85rem; border-radius: 16px;
  font-size: .93rem; line-height: 1.5; overflow-wrap: anywhere;
}
.mm-chat__msg p { margin: 0; }
.mm-chat__msg p + p, .mm-chat__msg ul { margin-top: .4rem; }
.mm-chat__msg ul { margin-bottom: 0; padding-left: 1.1rem; }
.mm-chat__msg li + li { margin-top: .25rem; }
.mm-chat__msg--bot { align-self: flex-start; background: var(--c-bg); border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(36, 54, 26, .08); }
.mm-chat__msg--user { align-self: flex-end; background: var(--c-brand); color: #fff; border-bottom-right-radius: 4px; }
.mm-chat__msg.is-error { background: #fdecea; color: #7a1f14; }
.mm-chat__cite {
  display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .2rem;
  margin-left: .15rem; border-radius: 6px; vertical-align: .1em;
  background: var(--mm-leaf-100, #eef5dc); color: var(--mm-leaf-600, #557a08);
  font-size: .7rem; font-weight: 600; text-decoration: none;
}
.mm-chat__sources { margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--c-line); font-size: .8rem; color: var(--c-soft); }
.mm-chat__sources ol { margin: .2rem 0 0; padding-left: 1.1rem; }
.mm-chat__sources a { color: var(--mm-leaf-600, #557a08); }
.mm-chat__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.mm-chat__action {
  display: inline-block; padding: .45rem .8rem; border-radius: 999px;
  background: var(--mm-ochre, #d39a2b); color: var(--mm-forest, #24361a); font-weight: 600; font-size: .85rem; text-decoration: none;
}
.mm-chat__action:hover { background: var(--mm-ochre-600, #ad7a17); color: #fff; }

.mm-chat__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.mm-chat__chip {
  padding: .45rem .75rem; border: 1px solid var(--mm-leaf, #6e9a0e); border-radius: 999px;
  background: var(--c-bg); color: var(--mm-leaf-600, #557a08); font-size: .84rem; cursor: pointer; text-align: left;
}
.mm-chat__chip:hover { background: var(--mm-leaf-100, #eef5dc); }

.mm-chat__typing { display: inline-flex; gap: .3rem; padding: .85rem 1rem; }
.mm-chat__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-soft); opacity: .4; animation: mm-chat-dot 1s infinite; }
.mm-chat__typing i:nth-child(3) { animation-delay: .15s; }
.mm-chat__typing i:nth-child(4) { animation-delay: .3s; }
@keyframes mm-chat-dot { 50% { opacity: 1; transform: translateY(-3px); } }

.mm-chat__form { display: flex; align-items: flex-end; gap: .5rem; padding: .7rem .8rem; border-top: 1px solid var(--c-line); background: var(--c-bg); }
.mm-chat__input {
  flex: 1; min-width: 0; resize: none; max-height: 120px;
  padding: .6rem .8rem; border: 1px solid var(--c-line); border-radius: 12px;
  font: inherit; font-size: 16px; color: var(--c-ink); background: var(--c-bg);
}
.mm-chat__send {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--c-accent); color: #fff; cursor: pointer;
}
.mm-chat__send:hover { background: var(--mm-leaf-600, #557a08); }
.mm-chat__form.is-busy .mm-chat__send { opacity: .5; pointer-events: none; }
.mm-chat__privacy { margin: 0; padding: 0 .9rem .7rem; font-size: .72rem; line-height: 1.4; color: var(--c-soft); background: var(--c-bg); }
.mm-chat__privacy a { color: inherit; }

@media (max-width: 560px) {
  .mm-chat__fab-label { display: none; }
  .mm-chat__fab { padding: .85rem; min-height: 56px; }
  .mm-chat.is-open { inset: 0; }
  .mm-chat__panel { width: 100vw; height: 100dvh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-chat__panel, .mm-chat__typing i { animation: none; }
  .mm-chat__fab { transition: none; }
}