/*
  Mabwe AI — modern chat UI theme.
  Single-accent design system (Zimbabwe green) with the full flag palette reserved for the brand
  mark only, in the spirit of DESIGN.md's "one accent color carries every interactive element"
  principle. Typography follows DESIGN.md's weight-ladder guidance (300/400/600/700, 500
  deliberately absent) and tight letter-spacing at display sizes, applied to Google Sans (loaded via
  Google Fonts in index.php / chat/index.php) with Inter/system-ui as fallbacks for the brief window
  before the webfont loads (or if the Google Fonts request fails). Layout language borrows from
  modern chat UIs: neutral canvas, borderless assistant messages with an avatar, bubbled user
  messages, a floating pill composer.
*/

:root {
  --mb-font: "Google Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Flag brand colors — used only for the brand mark / thin accent stripe, not as UI chrome */
  --mb-flag-green: #006633;
  --mb-flag-gold: #ffcc00;
  --mb-flag-red: #dc241f;
  --mb-flag-black: #000000;

  /* Single accent (Apple DESIGN.md principle: one color carries every interactive element) */
  --mb-accent: #006633;
  --mb-accent-hover: #00522a;
  --mb-accent-soft: rgba(0, 102, 51, 0.08);
  --mb-accent-soft-strong: rgba(0, 102, 51, 0.14);
  --mb-on-accent: #ffffff;

  /* Neutral surfaces (light) */
  --mb-canvas: #ffffff;
  --mb-surface: #f7f7f8;
  --mb-surface-2: #ececf1;
  --mb-border: #e5e5e7;
  --mb-ink: #0d0d0d;
  --mb-ink-muted: #6e6e80;
  --mb-ink-faint: #8e8ea0;
  --mb-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);

  --mb-radius-sm: 8px;
  --mb-radius-md: 12px;
  --mb-radius-lg: 18px;
  --mb-radius-pill: 999px;
}

:root.dark {
  --mb-accent: #17a668;
  --mb-accent-hover: #14c17a;
  --mb-accent-soft: rgba(23, 166, 104, 0.16);
  --mb-accent-soft-strong: rgba(23, 166, 104, 0.24);
  --mb-on-accent: #04150c;

  --mb-canvas: #212121;
  --mb-surface: #171717;
  --mb-surface-2: #2f2f2f;
  --mb-border: #3a3a3a;
  --mb-ink: #ececec;
  --mb-ink-muted: #b4b4b4;
  --mb-ink-faint: #8e8ea0;
  --mb-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.mb-app,
.mb-app input,
.mb-app textarea,
.mb-app button {
  font-family: var(--mb-font);
}

/* Typography scale (Inter, weight ladder 300/400/600/700 — 500 is deliberately never used) */
.mb-text-display {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--mb-ink);
}
.mb-text-subtitle {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mb-ink-muted);
}
.mb-text-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--mb-ink);
}
.mb-text-body {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--mb-ink);
}
.mb-text-caption {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--mb-ink-faint);
}
.mb-text-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mb-ink-faint);
}

/* App shell */
.mb-app {
  background: var(--mb-canvas);
  color: var(--mb-ink);
}

/* Brand mark — the one place the full flag palette appears */
.mb-brand-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--mb-radius-pill);
  background: var(--mb-flag-green);
  border: 2px solid var(--mb-flag-gold);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.mb-brand-badge::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mb-flag-red);
  border: 1.5px solid var(--mb-canvas);
}
.mb-brand-badge--lg {
  width: 64px;
  height: 64px;
  font-size: 26px;
  border-width: 3px;
}
.mb-brand-badge--lg::after {
  width: 14px;
  height: 14px;
}

/* Thin flag-thread accent stripe */
.mb-flag-stripe {
  height: 3px;
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--mb-flag-green) 0%,
    var(--mb-flag-green) 33%,
    var(--mb-flag-gold) 33%,
    var(--mb-flag-gold) 66%,
    var(--mb-flag-red) 66%,
    var(--mb-flag-red) 100%
  );
  flex-shrink: 0;
}

/* Top bar — sits inside the template's fixed-height .header row, so it fills 100% rather than
   declaring its own height/border (avoids a doubled border against .header's own bottom border). */
.mb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  padding: 0 16px;
  background: var(--mb-canvas);
  flex-shrink: 0;
}
.mb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--mb-radius-pill);
  background: transparent;
  color: var(--mb-ink-muted);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mb-icon-btn:hover {
  background: var(--mb-surface-2);
  color: var(--mb-ink);
}

.mb-btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--mb-radius-pill);
  background: var(--mb-accent);
  color: var(--mb-on-accent);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.mb-btn-pill:hover {
  background: var(--mb-accent-hover);
}
.mb-btn-pill:active {
  transform: scale(0.97);
}
.mb-btn-pill-ghost {
  background: transparent;
  color: var(--mb-ink);
  border: 1px solid var(--mb-border);
}
.mb-btn-pill-ghost:hover {
  background: var(--mb-surface-2);
}

/* Sidebar */
.mb-sidebar {
  background: var(--mb-surface);
  color: var(--mb-ink);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mb-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
}
.mb-sidebar-section {
  padding: 0 16px;
}
.mb-divider {
  height: 1px;
  background: var(--mb-border);
  margin: 14px 16px;
  border: none;
}
.mb-lang-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--mb-radius-pill);
  font-size: 12px;
  font-weight: 600;
}
.mb-lang-chip--en {
  background: var(--mb-accent-soft);
  color: var(--mb-accent);
}
.mb-lang-chip--sn {
  background: rgba(255, 204, 0, 0.18);
  color: #8a6800;
}
:root.dark .mb-lang-chip--sn {
  color: #ffcc00;
}
.mb-lang-chip--nd {
  background: rgba(220, 36, 31, 0.1);
  color: var(--mb-flag-red);
}
.mb-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--mb-radius-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--mb-ink);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.mb-nav-link:hover {
  background: var(--mb-surface-2);
}
.mb-nav-link--active {
  background: var(--mb-accent-soft-strong);
  color: var(--mb-accent);
}

/* Welcome / empty state */
.mb-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px 24px;
  gap: 8px;
}
.mb-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 640px;
  margin: 20px auto 0;
  padding: 0 20px;
}
@media (min-width: 700px) {
  .mb-suggestion-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.mb-suggestion-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  padding: 14px;
  border-radius: var(--mb-radius-lg);
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.mb-suggestion-card:hover {
  box-shadow: var(--mb-shadow-soft);
  border-color: transparent;
}
.mb-suggestion-card:active {
  transform: scale(0.98);
}
.mb-suggestion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--mb-radius-sm);
  flex-shrink: 0;
}
.mb-suggestion-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mb-ink);
  line-height: 1.3;
}
.mb-suggestion-desc {
  font-size: 12.5px;
  color: var(--mb-ink-muted);
  line-height: 1.4;
}

/* Chat messages */
.mb-msg-row {
  display: flex;
  gap: 12px;
  padding: 4px 0;
  max-width: 720px;
  margin: 0 auto;
}
.mb-msg-row--user {
  justify-content: flex-end;
}
.mb-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--mb-radius-pill);
  background: var(--mb-accent);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.mb-bubble-user {
  max-width: 70%;
  background: var(--mb-surface-2);
  color: var(--mb-ink);
  border-radius: var(--mb-radius-lg);
  border-bottom-right-radius: 4px;
  padding: 10px 14px;
}
.mb-bubble-assistant {
  max-width: 78%;
  color: var(--mb-ink);
  padding-top: 2px;
}
.mb-msg-time {
  font-size: 11px;
  color: var(--mb-ink-faint);
  margin-top: 4px;
}

/* Composer */
.mb-composer-wrap {
  padding: 12px 16px 18px;
  background: var(--mb-canvas);
  flex-shrink: 0;
}
.mb-composer-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--mb-canvas);
  border: 1px solid var(--mb-border);
  border-radius: 26px;
  padding: 8px 8px 8px 18px;
  box-shadow: var(--mb-shadow-soft);
}
.mb-composer-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  color: var(--mb-ink);
  font-size: 15px;
  font-family: var(--mb-font);
  line-height: 1.5;
  max-height: 160px;
  padding: 6px 0;
}
.mb-composer-input::placeholder {
  color: var(--mb-ink-faint);
}
.mb-composer-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--mb-radius-pill);
  background: var(--mb-accent);
  color: var(--mb-on-accent);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.mb-composer-send:hover {
  background: var(--mb-accent-hover);
}
.mb-composer-send:active {
  transform: scale(0.93);
}
.mb-composer-hint {
  max-width: 720px;
  margin: 8px auto 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--mb-ink-faint);
}

/* Chip row (starter prompts, shown above composer only in empty state) */
.mb-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 720px;
  margin: 0 auto 12px;
  padding: 0 16px;
}
.mb-chip {
  padding: 7px 14px;
  border-radius: var(--mb-radius-pill);
  border: 1px solid var(--mb-border);
  background: var(--mb-canvas);
  color: var(--mb-ink);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.mb-chip:hover {
  background: var(--mb-surface-2);
}

/* Sidebar drawer overlay panel (light/dark aware) */
.mb-drawer-panel {
  background: var(--mb-canvas);
}

/* Markdown content, restyled to be quiet/neutral like the rest of the theme */
.markdown-body {
  font-family: var(--mb-font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--mb-ink);
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 1em 0 0.4em 0;
  color: var(--mb-ink);
}
.markdown-body h1 {
  font-size: 1.3em;
}
.markdown-body h2 {
  font-size: 1.15em;
}
.markdown-body h3 {
  font-size: 1.05em;
}
.markdown-body p {
  margin: 0.6em 0;
}
.markdown-body a {
  color: var(--mb-accent);
  text-decoration: underline;
}
.markdown-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  color: var(--mb-flag-red);
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--mb-surface-2);
}
.markdown-body pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--mb-ink);
  color: #f5f5f5;
  padding: 12px 14px;
  border-radius: var(--mb-radius-md);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
}
.markdown-body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
.markdown-body ul,
.markdown-body ol {
  padding-left: 1.3em;
  margin: 0.6em 0;
}
.markdown-body li {
  margin: 0.3em 0;
}