/* Virtual assistant and knowledge base (inc/knowledge.php). Banner language: navy glass, gold rule. */
.assist {
  --as-navy: #0a2c6b; --as-deep: #061b44; --as-gold: #f7c21b; --as-gold-ink: #8a5d00; --as-ink: #152235;
  --as-muted: #53627a; --as-line: #dde6f0; --as-paper: #f5f8fc; --as-ease: cubic-bezier(.2, .7, .2, 1);
  position: fixed; right: 20px; bottom: 20px; z-index: 80; font: 15px/1.5 Arial, "Helvetica Neue", sans-serif;
}
.assist-launch {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 8px; border: 0; border-radius: 999px; cursor: pointer;
  color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .01em;
  background: linear-gradient(140deg, #123f86, var(--as-deep)); box-shadow: 0 14px 34px rgba(6, 27, 68, .34), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .2s var(--as-ease), box-shadow .2s var(--as-ease);
}
.assist-launch:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(6, 27, 68, .4), inset 0 1px 0 rgba(255, 255, 255, .18); }
.assist-launch:focus-visible, .assist-panel :focus-visible { outline: 3px solid var(--as-gold); outline-offset: 2px; }
.assist-launch-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--as-gold); color: var(--as-navy); }
.assist-launch-icon .ic { --ic-acc: var(--as-navy); width: 22px; height: 22px; }
.assist.is-open .assist-launch { visibility: hidden; }

.assist-panel {
  position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(400px, calc(100vw - 40px)); height: min(640px, calc(100vh - 110px));
  overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 30px 70px rgba(6, 27, 68, .32), 0 0 0 1px rgba(10, 44, 107, .08);
  animation: assist-in .22s var(--as-ease);
}
.assist-panel[hidden] { display: none; }
@keyframes assist-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.assist-head {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 16px 18px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #123f86 0%, var(--as-navy) 45%, var(--as-deep) 100%);
}
.assist-head::before { content: ""; position: absolute; inset: -40% -10% auto 45%; height: 180%; transform: skewX(-24deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .09) 55%, rgba(255, 255, 255, 0)); pointer-events: none; }
.assist-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--as-gold), #ffe07a 60%, #2b9bd4); }
.assist-avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.assist-head h2 { margin: 0; font: 700 19px/1.2 Georgia, "Times New Roman", serif; letter-spacing: 0; color: #fff; }
.assist-head h2::after { content: "."; color: var(--as-gold); }
.assist-head p { margin: 2px 0 0; color: #c9d8ee; font-size: 13px; }
.assist-close { position: relative; z-index: 1; margin-left: auto; width: 38px; height: 38px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.assist-close:hover { background: rgba(255, 255, 255, .2); }

.assist-log { position: relative; flex: 1; overflow-y: auto; padding: 18px 16px 8px; background: var(--as-paper); overscroll-behavior: contain; }
.assist-log:focus { outline: none; }
.assist-msg { max-width: 92%; margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; color: var(--as-ink); background: #fff; box-shadow: 0 1px 0 var(--as-line), 0 4px 14px rgba(10, 44, 107, .05); overflow-wrap: anywhere; }
.assist-msg p { margin: 0 0 8px; }
.assist-msg p:last-child, .assist-msg > :last-child { margin-bottom: 0; }
.assist-msg a { color: #0b5cad; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.assist-msg--bot { border-top-left-radius: 6px; }
.assist-msg--user { margin-left: auto; border-top-right-radius: 6px; color: #fff; background: var(--as-navy); box-shadow: none; }
.assist-msg--answer { border-left: 4px solid var(--as-gold); }
.assist-msg--ok { border-left: 4px solid #238553; }
.assist-msg--form { max-width: 100%; }
.assist-q { font: 700 16px/1.3 Georgia, "Times New Roman", serif; color: var(--as-navy); }
.assist-a { color: #34435a; }
.assist-a p { margin: 0 0 8px; }
.assist-a ul, .assist-a ol { margin: 0 0 8px; padding-left: 20px; }
.assist-more { display: inline-block; margin-top: 4px; }
.assist-sub { margin: 12px 0 6px !important; color: var(--as-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.assist-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.assist-chips button, .assist-actions button, .assist-actions a, .assist-feedback button {
  padding: 8px 12px; border: 1px solid #c8d6e8; border-radius: 999px; background: #fff; color: var(--as-navy); font: 700 13px/1.3 Arial, sans-serif; text-align: left; cursor: pointer; text-decoration: none;
}
.assist-chips button:hover, .assist-actions button:hover, .assist-actions a:hover, .assist-feedback button:hover { border-color: var(--as-navy); background: #eef4fb; }
.assist-chips--inline { margin: 0; }
.assist-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.assist-actions button:first-child { border-color: transparent; background: var(--as-gold); }
.assist-actions a { color: var(--as-navy) !important; }
.assist-links { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.assist-links a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--as-line); border-radius: 10px; text-decoration: none; }
.assist-links a:hover { border-color: #9fb7d6; background: #f6f9fd; }
.assist-links strong { color: var(--as-navy); font-size: 14px; }
.assist-links span { flex: none; color: var(--as-muted); font-size: 12px; font-weight: 400; }
.assist-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--as-line); color: var(--as-muted); font-size: 13px; }
.assist-feedback button { padding: 5px 12px; }

.assist-ticket label { display: grid; gap: 4px; margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--as-ink); }
.assist-ticket input, .assist-ticket textarea { width: 100%; padding: 10px 12px; border: 1px solid #c8d6e8; border-radius: 10px; background: #fff; font: 15px/1.4 Arial, sans-serif; color: var(--as-ink); box-sizing: border-box; }
.assist-ticket textarea { resize: vertical; }
.assist-ticket button { width: 100%; min-height: 44px; border: 0; border-radius: 999px; background: var(--as-gold); color: var(--as-navy); font-weight: 800; cursor: pointer; }
.assist-ticket button:disabled { opacity: .7; cursor: progress; }
.assist-ticket-note { margin-top: 8px !important; color: var(--as-muted); font-size: 12px; }
.assist .form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.assist-typing { display: inline-flex; gap: 5px; padding: 4px 2px; }
.assist-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8aa3c4; animation: assist-dot 1s infinite ease-in-out; }
.assist-typing i:nth-child(2) { animation-delay: .15s; } .assist-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes assist-dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

.assist-ask { display: flex; gap: 8px; padding: 12px 12px 6px; border-top: 1px solid var(--as-line); background: #fff; }
.assist-ask input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid #c8d6e8; border-radius: 999px; background: var(--as-paper); color: var(--as-ink); font: 15px Arial, sans-serif; }
.assist-ask input:focus { border-color: var(--as-navy); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(247, 194, 27, .45); }
.assist-ask button { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--as-navy); color: #fff; cursor: pointer; }
.assist-ask button .ic { --ic-acc: var(--as-gold); width: 20px; height: 20px; }
.assist-note { margin: 0; padding: 4px 16px 12px; background: #fff; color: var(--as-muted); font-size: 11.5px; line-height: 1.45; text-align: center; }

@media (max-width: 560px) {
  .assist { right: 14px; bottom: 14px; }
  .assist-launch { min-height: 52px; padding: 0 6px; }
  .assist-launch-label { display: none; }
  .assist.is-open { inset: 0; }
  .assist-panel { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .assist-panel, .assist-typing i { animation: none; } .assist-launch { transition: none; } }
@media print { .assist { display: none; } }

/* ---------------------------------------------------------------- Knowledge base page */
.kb-intro h2 { margin-top: 0 !important; }
.kb-toolbar { display: grid; gap: 14px; margin: 0 0 8px; }
.kb-search { margin: 0 !important; }
.kb-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-filters button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid #c8d6e8; border-radius: 999px; background: #fff; color: #0a2c6b; font: 700 14px/1.2 Arial, sans-serif; cursor: pointer; }
.kb-filters button span { padding: 1px 7px; border-radius: 999px; background: #eef4fb; font-size: 12px; }
.kb-filters button.is-active { border-color: #0a2c6b; background: #0a2c6b; color: #fff; }
.kb-filters button.is-active span { background: #f7c21b; color: #0a2c6b; }
.kb-count { margin: 6px 0 0 !important; color: #53627a !important; font-size: 14px; }
.kb-group { margin-top: 34px; }
.kb-group[hidden] { display: none; }
.kb-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.kb-group-head h3 { margin: 0 !important; font-size: 24px; }
.kb-group-head a { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #0b5cad; font-size: 14px; font-weight: 800; }
.kb-group-head a .ic { width: 16px; height: 16px; }
.kb .faq details[hidden] { display: none; }
.kb-answer { padding: 0 20px 18px; color: #53627a; line-height: 1.65; font-size: 16px; }
.kb-answer p { margin: 0 0 10px; padding: 0 !important; }
.kb-answer a { color: #0b4f99; font-weight: 700; text-decoration: underline; }
.kb-empty { margin-top: 24px; }
.kb-ask { padding: 0; border: 0; background: none; color: #0b4f99; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.kb-help { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 44px; padding: 24px 26px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #123f86, #0a2c6b 50%, #061b44); box-shadow: inset 0 -4px 0 #f7c21b; }
.kb-help > div { flex: 1 1 260px; }
.kb-help strong { display: block; font: 700 22px/1.25 Georgia, "Times New Roman", serif; }
.kb-help p { margin: 6px 0 0 !important; color: #d3e0f2 !important; font-size: 15px; }
.kb-help .bh-btn { border: 0; cursor: pointer; }
