/* Round 32: MorePerson Asistan widget'ı.
   Tüm sınıflar "mpa-" önekiyle - sitenin mevcut Bootstrap/stil kurallarıyla
   çakışmaz. Site bilinçli olarak yalnızca açık temadadır (bkz. base.html
   "color-scheme: light only"); widget da açık renklerle sabitlenir.
   z-index: sabit navbar'ın (1020/1030) üstünde, Bootstrap offcanvas menü
   (1045) ve modallarının (ör. oturum zaman aşımı uyarısı, 1055) ALTINDA. */

.mpa-root {
  --mpa-navy: #0b3d91;
  --mpa-blue: #1e6fd9;
  --mpa-gold: #ffc94d;
  --mpa-bg: #f4f6f9;
  --mpa-text: #1f2937;
  --mpa-muted: #5b6475;
  --mpa-border: #dde3ec;
  --mpa-offset: 0px;
  position: fixed;
  right: 18px;
  bottom: calc(18px + var(--mpa-offset));
  z-index: 1035;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--mpa-text);
  line-height: 1.45;
}

.mpa-launcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--mpa-navy) 0%, var(--mpa-blue) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(11, 61, 145, 0.35);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mpa-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11, 61, 145, 0.42); }
.mpa-launcher:focus-visible { outline: 3px solid var(--mpa-gold); outline-offset: 2px; }
.mpa-launcher .bi { font-size: 1.15rem; }
.mpa-root.mpa-open .mpa-launcher { display: none; }

.mpa-panel {
  width: 384px;
  height: min(600px, calc(100vh - 36px - var(--mpa-offset)));
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(11, 30, 70, 0.28);
  overflow: hidden;
  border: 1px solid var(--mpa-border);
}
.mpa-panel[hidden] { display: none; }

.mpa-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 12px 16px;
  background: linear-gradient(135deg, var(--mpa-navy) 0%, var(--mpa-blue) 100%);
  color: #fff;
}
.mpa-title { font-weight: 700; font-size: 1rem; }
.mpa-subtitle { font-size: 0.78rem; color: #dce8ff; }
.mpa-header-actions { display: flex; gap: 4px; }
.mpa-icon-btn {
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mpa-icon-btn:hover { background: rgba(255, 255, 255, 0.26); }
.mpa-icon-btn:focus-visible { outline: 2px solid var(--mpa-gold); outline-offset: 1px; }

.mpa-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 12px 6px 12px;
  background: var(--mpa-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.mpa-msg { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.mpa-msg-user { align-items: flex-end; }
.mpa-bubble {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 0.9rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.mpa-msg-user .mpa-bubble { background: var(--mpa-navy); color: #fff; border-bottom-right-radius: 4px; }
.mpa-msg-bot .mpa-bubble { background: #fff; color: var(--mpa-text); border: 1px solid var(--mpa-border); border-bottom-left-radius: 4px; }
.mpa-note { font-size: 0.8rem; color: var(--mpa-muted); padding: 0 4px; white-space: pre-line; }
.mpa-error .mpa-bubble { border-color: #f1c2c2; background: #fff6f6; }

.mpa-criteria { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 2px; }
.mpa-criteria-title { font-size: 0.75rem; color: var(--mpa-muted); width: 100%; }
.mpa-pill {
  font-size: 0.75rem;
  background: #e8f0fe;
  color: var(--mpa-navy);
  border-radius: 999px;
  padding: 3px 9px;
  font-weight: 600;
}

.mpa-jobs { background: #fff; border: 1px solid var(--mpa-border); border-radius: 12px; overflow: hidden; }
.mpa-jobs-head { padding: 9px 12px; border-bottom: 1px solid var(--mpa-border); }
.mpa-jobs-title { font-weight: 700; font-size: 0.85rem; color: var(--mpa-navy); }
.mpa-jobs-sub { font-size: 0.72rem; color: var(--mpa-muted); }
.mpa-job {
  display: block;
  padding: 9px 12px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #eef1f6;
}
.mpa-job:hover, .mpa-job:focus-visible { background: #f5f8fe; color: inherit; outline: none; }
.mpa-job-title { font-weight: 600; font-size: 0.87rem; color: #102a5c; }
.mpa-job-meta { font-size: 0.75rem; color: var(--mpa-muted); margin-top: 2px; }
.mpa-job-badges { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.mpa-badge {
  font-size: 0.68rem;
  background: #fff4d6;
  color: #7a5800;
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 600;
}
.mpa-badge-muted { background: #eef1f6; color: var(--mpa-muted); }
.mpa-more {
  display: block;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mpa-blue);
  text-decoration: none;
}
.mpa-more:hover { text-decoration: underline; }

.mpa-links { display: flex; flex-wrap: wrap; gap: 6px; }
.mpa-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 11px;
  border-radius: 9px;
  text-decoration: none;
  border: 1px solid var(--mpa-border);
  background: #fff;
  color: var(--mpa-navy);
}
.mpa-link:hover { border-color: var(--mpa-blue); color: var(--mpa-blue); }
.mpa-link-primary { background: var(--mpa-navy); border-color: var(--mpa-navy); color: #fff; }
.mpa-link-primary:hover { background: #092f70; color: #fff; }

.mpa-typing .mpa-bubble { display: inline-flex; gap: 4px; align-items: center; }
.mpa-dot { width: 6px; height: 6px; border-radius: 50%; background: #9aa6bb; animation: mpaBlink 1.2s infinite ease-in-out; }
.mpa-dot:nth-child(2) { animation-delay: .15s; }
.mpa-dot:nth-child(3) { animation-delay: .3s; }
@keyframes mpaBlink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

.mpa-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 12px 2px 12px;
  background: #fff;
  border-top: 1px solid var(--mpa-border);
}
.mpa-chips:empty { display: none; }
.mpa-chip {
  border: 1px solid #c9d7ef;
  background: #f5f8fe;
  color: var(--mpa-navy);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.78rem;
  cursor: pointer;
}
.mpa-chip:hover { background: #e8f0fe; }
.mpa-chip:focus-visible { outline: 2px solid var(--mpa-blue); outline-offset: 1px; }

.mpa-form { display: flex; gap: 8px; padding: 10px 12px; background: #fff; }
.mpa-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--mpa-border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.9rem;
  color: var(--mpa-text);
  background: #fff;
}
.mpa-input:focus { outline: none; border-color: var(--mpa-blue); box-shadow: 0 0 0 3px rgba(30, 111, 217, 0.15); }
.mpa-send {
  border: 0;
  border-radius: 10px;
  width: 42px;
  background: var(--mpa-navy);
  color: #fff;
  cursor: pointer;
}
.mpa-send[disabled] { opacity: .55; cursor: default; }
.mpa-send:focus-visible { outline: 2px solid var(--mpa-gold); outline-offset: 2px; }

.mpa-footnote { font-size: 0.68rem; color: var(--mpa-muted); padding: 0 12px 10px 12px; background: #fff; }
.mpa-footnote a { color: var(--mpa-muted); }

@media (max-width: 575.98px) {
  .mpa-root { right: 12px; bottom: calc(12px + var(--mpa-offset)); }
  .mpa-root.mpa-open { right: 8px; left: 8px; bottom: calc(8px + var(--mpa-offset)); }
  .mpa-launcher { padding: 14px; }
  .mpa-launcher-text { display: none; }
  .mpa-panel { width: 100%; height: min(82vh, calc(100vh - 16px - var(--mpa-offset))); }
}

@media print {
  .mpa-root { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mpa-launcher, .mpa-messages { transition: none; scroll-behavior: auto; }
  .mpa-dot { animation: none; }
}

/* Widget, ikon fontu (CDN) veya Bootstrap CSS yüklenemese bile tam
   çalışsın diye kendi ikonlarını (satır içi SVG) ve ekran okuyucu
   sınıfını kendisi taşır. */
.mpa-svg { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; flex: 0 0 auto; }
.mpa-send .mpa-svg { width: 1.2em; height: 1.2em; }
.mpa-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.mpa-send { display: inline-flex; align-items: center; justify-content: center; }

/* Sabit (floating) buton, sayfanın EN ALTINDAKİ içeriği (son tablo
   satırları, altbilgi) kalıcı olarak örtmesin diye sayfa sonuna boşluk. */
body.mpa-has-widget { padding-bottom: 76px; }