/* =========================================================
   JAO Power Pages Theme (Unified, Bootstrap Icons)
   Version: 2.4 (contrast + chat typing indicator fix)
   Author: ChatGPT, for Mounir
   Summary:
   - Keeps your portal theme as-is
   - Chat: fixes invisible typing dots + improves contrast/hierarchy
   - Avoids global * selectors that break SVG/typing indicator
   ========================================================= */

/* ---------------------------------------------------------
   FONT LOADING
   --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* Bootstrap Icons (icon font). Prefer self-host; fall back to CDN. */
@font-face {
  font-family: "bootstrap-icons";
  src: url("/WebFiles/bootstrap-icons.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* ---------------------------------------------------------
   CSS VARIABLES (JAO Brand System)
   --------------------------------------------------------- */
:root {
  /* Brand */
  --jao-burgundy: #96004B;
  --jao-black: #000000;
  --jao-grey: #C3C8CD;

  /* Extended neutrals */
  --jao-dark-grey: #1f2937;
  --jao-medium-grey: #4b5563;
  --jao-light-grey: #6b7280;
  --jao-very-light-grey: #f3f4f6;
  --jao-border-grey: #e5e7eb;

  /* Stronger hierarchy (added) */
  --jao-border-strong: #cbd5e1;
  --jao-surface-0: #ffffff;
  --jao-surface-1: #f8fafc;
  --jao-surface-2: #eef2f7;

  /* Surfaces */
  --jao-bg: #ffffff;
  --jao-bg-muted: #f9fafb;

  /* Interaction */
  --jao-hover-light: rgba(150, 0, 75, 0.05);
  --jao-focus-ring: rgba(150, 0, 75, 0.20);

  /* Shadows */
  --jao-shadow-xs: 0 1px 2px rgba(0, 0, 0, .03);
  --jao-shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
  --jao-shadow-md: 0 4px 10px rgba(0, 0, 0, .10);
  --jao-shadow-lg: 0 10px 24px rgba(0, 0, 0, .12);

  /* Typography */
  --jao-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --jao-font-size: 14px;
  --jao-lh: 1.6;
}

/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */
html { font-size: var(--jao-font-size); }

body {
  font-family: var(--jao-font) !important;
  line-height: var(--jao-lh);
  color: var(--jao-dark-grey);
  background: var(--jao-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a {
  color: var(--jao-burgundy);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover,
a:focus {
  color: #7a003d;
  text-decoration: none;
  outline: none;
}

/* Headings */
h1, .h1 {
  font-weight: 600;
  color: var(--jao-black);
  font-size: 2rem;
  line-height: 1.3;
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--jao-burgundy);
}
h1.modal-title { border-bottom-color: #7a003d; }

h2, .h2 {
  font-weight: 500;
  color: var(--jao-black);
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 .875rem;
}
h3, .h3 {
  font-weight: 500;
  color: var(--jao-black);
  font-size: 1.25rem;
  margin: 0 0 .75rem;
}
h4, .h4 {
  font-weight: 500;
  color: var(--jao-dark-grey);
  font-size: 1.125rem;
  margin: 0 0 .75rem;
}
h5, .h5, h6, .h6 {
  font-weight: 500;
  color: var(--jao-medium-grey);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 .5rem;
}
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .875rem; }

p { margin: 0 0 1rem; }

/* ---------------------------------------------------------
   ICONS — Bootstrap Icons as the single source of truth
   --------------------------------------------------------- */
.bi {
  display: inline-block;
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  vertical-align: -.125em;
}
.glyphicon {
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}
.glyphicon:before { display: inline-block; }

/* Remaps */
.glyphicon-search:before { content: "\F52A"; }        /* bi-search */
.glyphicon-plus:before { content: "\F4FE"; }          /* bi-plus */
.glyphicon-option-horizontal:before { content: "\F5D4"; } /* bi-three-dots */
.glyphicon-chevron-up:before { content: "\F286"; }    /* bi-chevron-up */
.glyphicon-chevron-down:before { content: "\F282"; }  /* bi-chevron-down */

/* ---------------------------------------------------------
   NAVBAR / HEADER
   --------------------------------------------------------- */
.navbar {
  background: var(--jao-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: var(--jao-shadow-xs);
}
.navbar-default { background: var(--jao-bg) !important; border-color: transparent !important; }

.navbar-brand {
  height: 70px !important;
  padding: 15px !important;
  display: flex !important;
  align-items: center !important;
}
.navbar-brand img { max-height: 45px !important; width: auto !important; }

/* Menu links (BS3) */
.navbar-nav>li>a {
  font-family: var(--jao-font) !important;
  font-size: .9375rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .75px !important;
  color: var(--jao-dark-grey) !important;
  padding: 24px 16px !important;
}
.navbar-nav>li>a:hover,
.navbar-nav>.active>a,
.navbar-nav>.open>a {
  color: var(--jao-black) !important;
  background: transparent !important;
  border-bottom: 3px solid var(--jao-burgundy) !important;
}

/* Last nav item as CTA */
.navbar-nav>li:last-child>a {
  background: var(--jao-burgundy) !important;
  color: #fff !important;
  border-radius: 24px !important;
  margin: 16px 8px !important;
  padding: 10px 20px !important;
  border: none !important;
}
.navbar-nav>li:last-child>a:hover { background: #7a003d !important; }

/* Mobile */
.navbar-toggle { border-color: var(--jao-border-grey) !important; }
.navbar-toggle .icon-bar { background: var(--jao-dark-grey) !important; }

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */
.btn {
  font-family: var(--jao-font) !important;
  font-size: .9375rem !important;
  font-weight: 500 !important;
  padding: 10px 24px !important;
  border-radius: 24px !important;
  border: 2px solid transparent !important;
  transition: all .2s ease !important;
  box-shadow: none !important;
}
.btn-primary { background: var(--jao-burgundy) !important; color: #fff !important; }
.btn-primary:hover,
.btn-primary:focus { background: #7a003d !important; color: #fff !important; }

.btn-default, .btn-secondary {
  background: #fff !important;
  color: var(--jao-dark-grey) !important;
  border-color: var(--jao-border-grey) !important;
}
.btn-default:hover, .btn-secondary:hover {
  background: var(--jao-bg-muted) !important;
  color: var(--jao-black) !important;
}
.btn-link { color: var(--jao-burgundy) !important; font-weight: 500 !important; }

/* Icon buttons in grids */
.table .btn, .entity-list .btn {
  padding: 6px 16px !important;
  font-size: .875rem !important;
  border-radius: 20px !important;
}
.btn i, .btn .bi, .btn .glyphicon {
  margin: 0 !important;
  font-size: 14px !important;
  vertical-align: middle !important;
}
.btn i+span, .btn .bi+span, .btn .glyphicon+span { margin-left: 5px !important; }

/* ---------------------------------------------------------
   FORMS & ENTITY FORMS
   --------------------------------------------------------- */
.form-control,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="url"], input[type="number"], input[type="date"],
textarea, select {
  font-family: var(--jao-font) !important;
  font-size: .9375rem !important;
  padding: 10px 12px !important;
  border: 1px solid var(--jao-border-grey) !important;
  border-radius: 2px !important;
  background: var(--jao-bg) !important;
  color: var(--jao-black) !important;
  box-shadow: none !important;
  transition: all .2s ease !important;
}
.form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--jao-burgundy) !important;
  box-shadow: 0 0 0 3px var(--jao-focus-ring) !important;
  outline: none !important;
}
.form-group label, .control-label {
  font-size: .875rem !important;
  font-weight: 600 !important;
  color: var(--jao-black) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  margin-bottom: .5rem !important;
}
.entity-form {
  background: var(--jao-bg) !important;
  border: 1px solid var(--jao-border-grey) !important;
  border-radius: 0 !important;
  padding: 2rem !important;
}
.entity-form .form-group { margin-bottom: 1.75rem !important; }
.entity-form .tab-content { padding: 1.5rem 0 !important; }
.entity-form .form-section {
  margin-bottom: 2rem !important;
  padding-bottom: 2rem !important;
  border-bottom: 1px solid var(--jao-border-grey) !important;
}
.entity-form .form-section:last-child { border-bottom: none !important; }
.entity-form .section-title {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: var(--jao-black) !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: .5rem !important;
  border-bottom: 2px solid var(--jao-burgundy) !important;
}

/* Validation */
.field-validation-error {
  color: #dc2626 !important;
  font-size: .875rem !important;
  margin-top: .25rem !important;
  display: block !important;
}
.validation-summary-errors {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-left: 4px solid #dc2626 !important;
  border-radius: 0 !important;
  padding: 1rem !important;
  margin-bottom: 1.5rem !important;
}

/* ---------------------------------------------------------
   TABLES & ENTITY LISTS
   --------------------------------------------------------- */
.table { width: 100%; background: #fff; }
.table>thead>tr>th {
  color: var(--jao-black) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--jao-border-grey) !important;
  white-space: nowrap !important;
}
.table>tbody>tr>td, .table>thead>tr>th { padding: 10px 12px !important; }
.table tr:hover { background: var(--jao-hover-light) !important; }

.entity-list .view-grid { margin-top: 1rem !important; overflow-x: auto !important; }
.entity-list .actions { white-space: nowrap !important; }
.entity-list .actions .btn {
  margin-right: .5rem !important;
  margin-bottom: .25rem !important;
  padding: 6px 12px !important;
  font-size: .8125rem !important;
}
.view-search, .search-box { margin-bottom: 1rem !important; }
.view-search input, .search-box input { border-radius: 0 !important; }

/* DataTables sort icons — use Bootstrap Icons via codepoints */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  margin-left: 6px;
  opacity: .9;
}
table.dataTable thead .sorting:after { content: "\F283"; }       /* bi-chevron-expand */
table.dataTable thead .sorting_asc:after { content: "\F286"; }   /* bi-chevron-up */
table.dataTable thead .sorting_desc:after { content: "\F282"; }  /* bi-chevron-down */
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after { opacity: .4; }

/* Pagination (BS3) */
.pagination>li>a, .pagination>li>span {
  color: var(--jao-dark-grey) !important;
  border: 1px solid var(--jao-border-grey) !important;
  background: #fff !important;
  margin: 0 2px !important;
}
.pagination>.active>a, .pagination>.active>span {
  background: var(--jao-burgundy) !important;
  color: #fff !important;
  border-color: var(--jao-burgundy) !important;
}

/* ---------------------------------------------------------
   BREADCRUMBS
   --------------------------------------------------------- */
.breadcrumb {
  background: var(--jao-bg-muted) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 15px !important;
  margin-bottom: 1.5rem !important;
  border-left: 4px solid var(--jao-burgundy) !important;
}
.breadcrumb>li {
  color: var(--jao-medium-grey) !important;
  font-size: .875rem !important;
}
.breadcrumb>li+li:before {
  content: ">" !important;
  color: var(--jao-medium-grey) !important;
  padding: 0 8px !important;
}
.breadcrumb>li>a { color: var(--jao-burgundy) !important; font-weight: 500 !important; }
.breadcrumb>.active { color: var(--jao-black) !important; font-weight: 600 !important; }

/* ---------------------------------------------------------
   PORTLETS / PANELS / CARDS
   --------------------------------------------------------- */
.portlet, .panel, .card {
  background: #fff !important;
  border: 1px solid var(--jao-border-grey) !important;
  border-radius: 0 !important;
  margin-bottom: 1.5rem !important;
  box-shadow: var(--jao-shadow-xs) !important;
  overflow: hidden !important;
}
.portlet-header, .panel-heading, .card-header {
  background: var(--jao-bg-muted) !important;
  border-bottom: 2px solid var(--jao-burgundy) !important;
  padding: 1rem 1.25rem !important;
}
.portlet-title, .panel-title, .card-title {
  margin: 0 !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  color: var(--jao-black) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}
.portlet-body, .panel-body, .card-body { padding: 1.25rem !important; }

/* ---------------------------------------------------------
   TABS (BS3) + NAV PILLS
   --------------------------------------------------------- */
.nav-tabs {
  border-bottom: 2px solid var(--jao-border-grey) !important;
  margin-bottom: 1rem !important;
}
.nav-tabs>li>a {
  border: none !important;
  border-radius: 0 !important;
  color: var(--jao-medium-grey) !important;
  padding: 12px 20px !important;
  text-transform: uppercase !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  letter-spacing: .5px !important;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  color: var(--jao-burgundy) !important;
  background: #fff !important;
  border: none !important;
  border-bottom: 2px solid var(--jao-burgundy) !important;
}

/* ---------------------------------------------------------
   ALERTS
   --------------------------------------------------------- */
.alert {
  padding: 1rem 1.25rem !important;
  border-radius: 0 !important;
  border: 1px solid !important;
  border-left-width: 4px !important;
  margin-bottom: 1.5rem !important;
  font-size: .9375rem !important;
}
.alert-info { background: #f0f9ff !important; border-color: #0891b2 !important; color: #075985 !important; }
.alert-success { background: #f0fdf4 !important; border-color: #10b981 !important; color: #166534 !important; }
.alert-warning { background: #fffbeb !important; border-color: #f59e0b !important; color: #92400e !important; }
.alert-danger, .alert-error { background: #fef2f2 !important; border-color: #ef4444 !important; color: #991b1b !important; }

/* ---------------------------------------------------------
   MODALS
   --------------------------------------------------------- */
.modal-content {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: var(--jao-shadow-lg) !important;
}
.modal-header {
  background: var(--jao-burgundy) !important;
  color: #fff !important;
  border-bottom: none !important;
  padding: 1.25rem 1.5rem !important;
}
.modal-title {
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  letter-spacing: .5px !important;
  color: #fff !important;
}
.modal-body { padding: 2rem !important; }
.modal-footer {
  border-top: 1px solid var(--jao-border-grey) !important;
  padding: 1rem 1.5rem !important;
  background: var(--jao-bg-muted) !important;
}

/* ---------------------------------------------------------
   FOOTER (portal)
   --------------------------------------------------------- */
footer, .footer, .page-footer {
  background: var(--jao-bg-muted) !important;
  color: var(--jao-dark-grey) !important;
  padding: 3rem 0 2rem !important;
  margin-top: 0 !important;
  border-top: 1px solid var(--jao-border-grey) !important;
  position: relative;
}
footer::before, .footer::before, .page-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--jao-grey) 0%, var(--jao-burgundy) 50%, var(--jao-grey) 100%);
}

/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */
:focus { outline: none; }
a:focus:not(.footer__icon),
button:focus, .btn:focus,
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--jao-burgundy) !important;
  outline-offset: 2px !important;
}

/* Skip links */
.skip-to-content, .skip-to-main-content, .skip-navigation, .skiplink {
  position: absolute !important;
  left: -999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  background: var(--jao-burgundy) !important;
  color: #fff !important;
  padding: 0 !important;
  border-radius: 4px !important;
  z-index: 10000 !important;
  text-decoration: none !important;
}
.skip-to-content:focus, .skip-to-main-content:focus,
.skip-navigation:focus, .skiplink:focus {
  left: 8px !important; top: 8px !important;
  width: auto !important; height: auto !important;
  padding: 8px 12px !important;
  box-shadow: 0 0 0 3px var(--jao-focus-ring) !important;
}

/* High contrast */
@media (prefers-contrast: high) {
  .btn, .form-control, .table { border-width: 2px !important; }
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 991px) {
  .navbar-nav { margin: 0 !important; background: var(--jao-bg) !important; }
  .navbar-nav>li>a {
    padding: 15px 20px !important;
    border-bottom: 1px solid var(--jao-border-grey) !important;
    border-bottom-width: 1px !important;
  }
  .navbar-nav>li:last-child>a { margin: 15px 20px !important; }
}
@media (max-width: 768px) {
  h1, .h1 { font-size: 1.75rem !important; }
  h2, .h2 { font-size: 1.375rem !important; }
  .table th, .table td { padding: 8px 10px !important; font-size: .875rem !important; }
  .btn { padding: 8px 16px !important; font-size: .875rem !important; }
}
@media (max-width: 480px) {
  .navbar-brand img { max-height: 35px !important; }
  h1, .h1 { font-size: 1.5rem !important; }
  h2, .h2 { font-size: 1.25rem !important; }
}

/* ---------------------------------------------------------
   PRINT
   --------------------------------------------------------- */
@media print {
  .navbar, .footer, .breadcrumb, .pagination, .btn, .actions { display: none !important; }
  body { color: #000 !important; background: #fff !important; }
  a { color: #000 !important; text-decoration: underline !important; }
  .table { border: 1px solid #000 !important; }
  .table th, .table td { border: 1px solid #000 !important; padding: 8px !important; }
  h1, h2, h3 { page-break-after: avoid !important; }
  .panel, .card { page-break-inside: avoid !important; }
}

/* Minor style fixes */
/* Bootstrap overwrite for JAO */
.alert-success, div.message.success {
  background-color: #96004b !important;
  border-color: #7a003d !important;
  color: #fff !important;
}
#MessageLabel { color: #fff !important; }

.badge-primary {
  background-color: #96004b;
  padding: .7rem;
  border-radius: .2rem;
}
.badge-default {
  background-color: white;
  padding: .7rem;
  border-radius: .2rem;
  color: #96004b;
  border: .1rem solid #96004b;
}

.pagination>.active>a, .pagination>.active>a:focus { background-color: #96004b !important; }
.pagination>.active>a:hover { background-color: #7a003d !important; cursor: pointer; }

.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
  background-color: #96004b !important;
  color: #FFFFFF;
  text-decoration: none;
}

.input-group.pull-left.view-search.entitylist-search { display: inline-flex; align-items: center; }
input.query.form-control { width: 70%; margin-right: .3rem; }

.navbar-toggle .icon-bar { border: 2px solid #fff; }
.nav.navbar-nav.weblinks .dropdown-menu>li>a { padding: 3px 20px; }
.nav.navbar-nav.weblinks .dropdown-menu>li>a:hover { border-width: 0; }
.navbar-static-top.navbar .menu-bar>.navbar-nav>li.weblink:first-child {
  border-top-width: 0; border-bottom-width: 0; height: 72px;
}

/* Subscription toggle */
.pp-follow-toggle.btn-default {
  color: #96004b !important;
  border-radius: 2px;
  font-family: Arial;
  font-weight: 600;
  font-size: 14px;
  border-color: #96004b !important;
  padding: 6px 20px;
  width: fit-content;
  border-style: solid;
  border-width: 1.6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
}

.list-group.nav-profile>a.list-group-item.active {
  border-color: #7a003d;
  background-color: #96004b;
}

/* Hide "I have an existing account" button */
#mainContent .form-horizontal .form-group div.checkbox:has(#RedeemByLogin) { display: none; }

.attachment.alert.alert-block.clearfix { color: #7a003d !important; }
a.attachment-file { color: var(--jao-burgundy); }

.modal-header>button.form-close>span:first-child { color: white; }

/* =========================================================
   FOOTER (custom component)
   ========================================================= */

/* Tokens */
.jao-footer{
  --brand: var(--jao-burgundy, #96004B);
  --black: var(--jao-black, #000000);
  --grey-600: var(--jao-dark-grey, #1f2937);
  --grey-500: var(--jao-medium-grey, #4b5563);
  --grey-100: var(--jao-very-light-grey, #f3f4f6);
  --border: var(--jao-border-grey, #e5e7eb);
  --bg: var(--jao-bg, #ffffff);
  --hover: var(--jao-hover-light, rgba(150,0,75,.05));
  --focus: var(--jao-focus-ring, rgba(150,0,75,.2));
  --font: var(--jao-font, "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

/* Utility */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Base */
.jao-footer{background:var(--bg);color:var(--grey-600);font-family:var(--font);}
.jao-footer .container{max-width:1320px;margin-inline:auto;padding-inline:16px;}

/* Grid with named areas */
.jao-footer > .container.jao-footer__grid{
  display:grid;
  grid-template-areas:"brand" "cols";
  grid-template-columns:1fr;
  gap:28px;
  padding-block:32px 24px;
  text-align:left;
}
@media (min-width:960px){
  .jao-footer > .container.jao-footer__grid{
    grid-template-columns:360px 1fr;
    grid-template-areas:"brand cols";
    column-gap:56px;
    align-items:start;
  }
}
.jao-footer__brand{grid-area:brand;justify-self:start;text-align:left;}
.jao-footer__cols{grid-area:cols;}

/* Left column */
.jao-footer__logo{display:inline-block;line-height:0;margin-bottom:12px;}
.jao-footer__logo svg{display:block;max-width:100%;height:auto;}
.jao-footer__address p{margin:0;line-height:1.5;color:var(--black);font-size:1rem;}
.jao-footer__hairline{border:none;border-top:1px solid var(--border);margin:18px 0 12px;}

.jao-footer__follow-label{
  display:block;margin:0 0 10px;
  font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--brand);font-weight:700;
}
.jao-footer__social{list-style:none;display:flex;gap:10px;margin:0;padding:0;}
.jao-footer__social-btn{
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:8px;border:1px solid var(--border);
  background:#f8f8f8;color:var(--grey-600);
  text-decoration:none;transition:background .12s,color .12s,border-color .12s,transform .12s;
}
.jao-footer__social-btn:hover{background:var(--hover);color:var(--brand);border-color:var(--brand);}
.jao-footer__social-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus),0 0 0 1px var(--brand);}

/* Right columns */
.jao-footer__cols{display:grid;gap:16px 40px;grid-template-columns:repeat(2, minmax(180px,1fr));}
@media (min-width:760px){.jao-footer__cols{grid-template-columns:repeat(3, minmax(180px,1fr));}}
@media (min-width:960px){.jao-footer__cols{grid-template-columns:repeat(5, minmax(160px,1fr));}}

.jao-footer__title{
  margin:0 0 12px;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.04em;font-weight:700;color:#a8b0b8;
}

.jao-footer__col{list-style:none;margin:0;padding:0;}
.jao-footer__col a{
  display:inline-block;padding-block:8px;color:var(--grey-600);
  text-decoration:none;font-size:1rem;line-height:1.6;font-weight:500;
}
.jao-footer__col a:hover{color:var(--brand);text-decoration:underline;}
.jao-footer__col a:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus),0 0 0 1px var(--brand);border-radius:6px;}
.jao-footer__link--bold{font-weight:700;}
.jao-footer__col a.jao-footer__link--bold { font-weight: 700; }

/* =========================================================
   LOGIN BUTTONS
   ========================================================= */

/* ===== Classic Microsoft (login.microsoftonline.com) ===== */
form[action^="/Account/Login/ExternalLogin"]
button.btn[name="provider"][id*="login.microsoftonline.com"],
form[action^="/Account/Login/ExternalLogin"]
button.btn[name="provider"][value*="login.microsoftonline.com"] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 12px 22px 12px 52px !important;
  border-radius: 6px !important;

  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #D1D5DB !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  font-weight: 600 !important;
}

/* Microsoft 4-square logo (classic button) */
form[action^="/Account/Login/ExternalLogin"]
button.btn[name="provider"][id*="login.microsoftonline.com"]::before,
form[action^="/Account/Login/ExternalLogin"]
button.btn[name="provider"][value*="login.microsoftonline.com"]::before {
  content: "" !important;
  position: absolute !important;
  left: 18px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><rect x='0' y='0' width='9' height='9' fill='%23F25022'/><rect x='11' y='0' width='9' height='9' fill='%237FBA00'/><rect x='0' y='11' width='9' height='9' fill='%2300A4EF'/><rect x='11' y='11' width='9' height='9' fill='%23FFB900'/></svg>");
}

form[action^="/Account/Login/ExternalLogin"]
button.btn[name="provider"][id*="login.microsoftonline.com"]:hover,
form[action^="/Account/Login/ExternalLogin"]
button.btn[name="provider"][value*="login.microsoftonline.com"]:hover {
  background: #F9FAFB !important;
  border-color: #CBD5E1 !important;
}

form[action^="/Account/Login/ExternalLogin"]
button.btn[name="provider"][id*="login.microsoftonline.com"]:focus-visible,
form[action^="/Account/Login/ExternalLogin"]
button.btn[name="provider"][value*="login.microsoftonline.com"]:focus-visible {
  outline: 3px solid rgba(0,0,0,0.2) !important;
  outline-offset: 2px !important;
}

/* ===== JAO II External ID (ciamlogin.com) ===== */
form[action^="/Account/Login/ExternalLogin"]
button.btn[name="provider"][value^="https://JAOEntraExternalIDs.ciamlogin.com"] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;

  padding: 12px 22px 12px 52px !important; /* space for logo */
  border-radius: 6px !important;

  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #D1D5DB !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
}

/* Same Microsoft 4-square logo, but on the JAO II button */
form[action^="/Account/Login/ExternalLogin"]
button.btn[name="provider"][value^="https://JAOEntraExternalIDs.ciamlogin.com"]::before {
  content: "" !important;
  position: absolute !important;
  left: 18px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><rect x='0' y='0' width='9' height='9' fill='%23F25022'/><rect x='11' y='0' width='9' height='9' fill='%237FBA00'/><rect x='0' y='11' width='9' height='9' fill='%2300A4EF'/><rect x='11' y='11' width='9' height='9' fill='%23FFB900'/></svg>");
}

form[action^="/Account/Login/ExternalLogin"]
button.btn[name="provider"][value^="https://JAOEntraExternalIDs.ciamlogin.com"]:hover {
  background: #F9FAFB !important;
  border-color: #CBD5E1 !important;
}

form[action^="/Account/Login/ExternalLogin"]
button.btn[name="provider"][value^="https://JAOEntraExternalIDs.ciamlogin.com"]:focus-visible {
  outline: 3px solid rgba(0,0,0,0.2) !important;
  outline-offset: 2px !important;
}

/* =========================================================
   JAO Chatbot Theme (Power Pages, Copilot Studio embedded chat)
   - Full screen overlay
   - Contrast improvements
   - FIX: typing indicator dots visible
   - FIX: avoid global * selector breaking SVG
   ========================================================= */

/* ---------------- Shared design tokens ---------------- */
.pva-embedded-web-chat{
  --chat-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --chat-font-size: 0.90rem;
  --chat-line-height: 1.42;

  --brand: var(--jao-burgundy, #96004B);
  --brand-hover: #7a003d;

  --text-strong: #0f172a;
  --text-muted:  #6b7280;

  --surface-page: var(--jao-surface-0, #ffffff);
  --surface-bot:  var(--jao-surface-1, #f8fafc);
  --surface-card: #ffffff;
  --surface-muted: var(--jao-surface-2, #eef2f7);

  --border-soft:   var(--jao-border-grey, #e5e7eb);
  --border-strong: var(--jao-border-strong, #cbd5e1);

  --focus-ring: rgba(150,0,75,.25);

  --shadow-xs: var(--jao-shadow-xs, 0 1px 2px rgba(0,0,0,.03));
  --shadow-sm: var(--jao-shadow-sm, 0 1px 3px rgba(0,0,0,.06));
  --shadow-md: var(--jao-shadow-md, 0 4px 10px rgba(0,0,0,.10));
  --shadow-lg: var(--jao-shadow-lg, 0 10px 24px rgba(0,0,0,.12));

  --bubble-radius: 16px;
  --card-radius: 14px;
}

/* ---- Layout: full viewport overlay ---- */
:is(pva-embedded-web-chat, div.pva-embedded-web-chat)[data-minimized='false']{
  position: fixed !important;
  inset: 0 !important;
  width:100% !important;
  height:100vh !important;
  height:100svh !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
  z-index: 2147483647 !important;
  background: var(--surface-page) !important;
  padding-top: env(safe-area-inset-top,0);
  padding-bottom: env(safe-area-inset-bottom,0);
  padding-left: env(safe-area-inset-left,0);
  padding-right: env(safe-area-inset-right,0);
  overscroll-behavior: none;
}

/* Block page scroll while open */
html:has(pva-embedded-web-chat[data-minimized='false']),
body:has(pva-embedded-web-chat[data-minimized='false']){ overflow:hidden !important; }

/* Container grid */
:is(pva-embedded-web-chat, div.pva-embedded-web-chat)[data-minimized='false'] .pva-embedded-web-chat-window-container{
  position:absolute !important;
  inset:0 !important;
  display:grid !important;
  grid-template-rows:auto 1fr !important;
  min-height:0 !important;
}

/* Header pinned */
:is(pva-embedded-web-chat, div.pva-embedded-web-chat)[data-minimized='false']
  .pva-embedded-web-chat-header-container,
:is(pva-embedded-web-chat, div.pva-embedded-web-chat)[data-minimized='false'] [class*="header"]{
  grid-row:1 !important;
  position: sticky !important;
  top: env(safe-area-inset-top,0) !important;
  z-index:2 !important;
  background: var(--brand) !important;
  color:#fff !important;
  border-bottom:none !important;
}

/* Window */
:is(pva-embedded-web-chat, div.pva-embedded-web-chat)[data-minimized='false'] .pva-embedded-web-chat-window{
  grid-row:2 !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Transcript + composer */
:is(pva-embedded-web-chat, div.pva-embedded-web-chat)[data-minimized='false'] .webchat__stacked-layout{
  display:grid !important;
  grid-template-rows: 1fr auto !important;
  height:100% !important;
  min-height:0 !important;
}
:is(pva-embedded-web-chat, div.pva-embedded-web-chat)[data-minimized='false'] .webchat__basic-transcript{
  grid-row:1 !important;
  min-height:0 !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin:0 !important;
  padding:10px !important;
  background: var(--surface-page) !important;
}
:is(pva-embedded-web-chat, div.pva-embedded-web-chat)[data-minimized='false'] .webchat__send-box{ grid-row:2 !important; }

/* Hide floating launcher */
pva-embedded-web-chat .pva-embedded-web-chat-widget,
pva-embedded-web-chat .pva-embedded-web-chat-launcher,
div.pva-embedded-web-chat .pva-embedded-web-chat-widget,
div.pva-embedded-web-chat .pva-embedded-web-chat-launcher{ display:none !important; }

/* ---- Typography (SAFE: no global * to avoid breaking SVG) ---- */
.pva-embedded-web-chat{
  font-family: var(--chat-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.pva-embedded-web-chat :where(p, span, div, li, ul, ol, strong, b, em, label, small){
  font-family: var(--chat-font) !important;
  font-size: var(--chat-font-size) !important;
  line-height: var(--chat-line-height) !important;
  color: inherit;
}

/* Header title/buttons */
.pva-embedded-web-chat [class*="header"] .pva-embedded-web-chat-title{
  color:#fff !important;
  font-weight:600 !important;
  letter-spacing:.3px !important;
  font-size: calc(var(--chat-font-size) * 1.05) !important;
}
.pva-embedded-web-chat-header button,
.pva-embedded-web-chat-icon-button{ color:#fff !important; opacity:.95 !important; }
.pva-embedded-web-chat-header button:hover,
.pva-embedded-web-chat-icon-button:hover{ background: rgba(255,255,255,.08) !important; border-radius:6px !important; }

/* Rows / timestamps */
.pva-embedded-web-chat .webchat__row{ margin-bottom: 6px !important; }
.pva-embedded-web-chat .webchat__timestamp{ color: var(--text-muted) !important; font-size: calc(var(--chat-font-size) * .85) !important; }

/* Bubbles */
.pva-embedded-web-chat .webchat__bubble{ max-width: 86% !important; border-radius: var(--bubble-radius) !important; box-shadow: var(--shadow-xs) !important; }
.pva-embedded-web-chat .webchat__bubble__content{ padding: 10px 12px !important; }

/* BOT bubble */
.pva-embedded-web-chat .webchat__bubble--from-bot .webchat__bubble__content{
  background: var(--surface-bot) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-strong) !important;
}
/* USER bubble */
.pva-embedded-web-chat .webchat__bubble--from-user .webchat__bubble__content{
  background: var(--brand) !important;
  color: #fff !important;
}
.pva-embedded-web-chat .webchat__bubble--from-user .webchat__bubble__content *:not(svg):not(path){ color:#fff !important; }

/* Respect emphasis */
.pva-embedded-web-chat .webchat__bubble__content b,
.pva-embedded-web-chat .webchat__bubble__content strong,
.pva-embedded-web-chat .webchat__bubble .ac-container b,
.pva-embedded-web-chat .webchat__bubble .ac-container strong{ font-weight:700 !important; }
.pva-embedded-web-chat .webchat__bubble__content em,
.pva-embedded-web-chat .webchat__bubble .ac-container em,
.pva-embedded-web-chat .webchat__bubble__content i{ font-style:italic !important; }
.pva-embedded-web-chat .webchat__bubble__content u{ text-decoration:underline !important; }

/* Scroll-to-end */
.pva-embedded-web-chat .webchat__scrollToEndButton{
  background: var(--brand) !important;
  color:#fff !important;
  border-radius:999px !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Composer */
.pva-embedded-web-chat .webchat__send-box{
  background: var(--surface-page) !important;
  border-top: 1px solid var(--border-strong) !important;
}
.pva-embedded-web-chat .webchat__send-box-text-box__input,
.pva-embedded-web-chat .webchat__send-box-text-box__input::placeholder{
  font-family: var(--chat-font) !important;
  font-size: var(--chat-font-size) !important;
}
.pva-embedded-web-chat .webchat__send-box-text-box__input{
  background: var(--surface-muted) !important;
  color: var(--text-strong) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
}
.pva-embedded-web-chat .webchat__send-box-text-box__input:focus{
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  outline:none !important;
}

/* Suggested actions */
.pva-embedded-web-chat .webchat__suggested-actions .webchat__suggested-action{
  background: var(--surface-card) !important;
  color: var(--text-strong) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) !important;
  font-weight: 600 !important;
  font-size: calc(var(--chat-font-size) * .95) !important;
}
.pva-embedded-web-chat .webchat__suggested-actions .webchat__suggested-action:hover{
  background: var(--surface-muted) !important;
}

/* =========================================================
   TYPING INDICATOR — FIX (dots visible)
   ========================================================= */

/* Ensure container is visible */
.pva-embedded-web-chat .webchat__typing,
.pva-embedded-web-chat .webchat__typingIndicator,
.pva-embedded-web-chat .webchat__typing-indicator,
.pva-embedded-web-chat .webchat__typing__indicator{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: var(--surface-muted) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-strong) !important;
  opacity: 1 !important;
}

/* Restore SVG dots (if runtime uses SVG) */
.pva-embedded-web-chat .webchat__typing svg,
.pva-embedded-web-chat .webchat__typingIndicator svg,
.pva-embedded-web-chat .webchat__typing-indicator svg,
.pva-embedded-web-chat .webchat__typing__indicator svg{
  width: 24px !important;
  height: 8px !important;
  opacity: 1 !important;
}
.pva-embedded-web-chat .webchat__typing svg * ,
.pva-embedded-web-chat .webchat__typingIndicator svg * ,
.pva-embedded-web-chat .webchat__typing-indicator svg * ,
.pva-embedded-web-chat .webchat__typing__indicator svg *{
  fill: var(--brand) !important;
  stroke: var(--brand) !important;
  opacity: 1 !important;
}

/* Fallback animated dots if SVG disappears */
@keyframes jaoTypingDots{ 0%,80%,100%{opacity:.25;} 40%{opacity:1;} }
.pva-embedded-web-chat .webchat__typing::after,
.pva-embedded-web-chat .webchat__typingIndicator::after,
.pva-embedded-web-chat .webchat__typing-indicator::after,
.pva-embedded-web-chat .webchat__typing__indicator::after{
  content: "● ● ●";
  letter-spacing: 4px;
  color: var(--brand);
  font-size: 12px;
  line-height: 1;
  animation: jaoTypingDots 1.1s infinite ease-in-out;
}

/* =========================================================
   Adaptive Cards — contrast + hierarchy
   ========================================================= */
.pva-embedded-web-chat .webchat__bubble--from-bot .ac-container,
.pva-embedded-web-chat .webchat__bubble--from-bot .ac-adaptiveCard,
.pva-embedded-web-chat .webchat__bubble--from-bot .ac-card{
  background: var(--surface-card) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 12px !important;
  color: var(--text-strong) !important;
}
.pva-embedded-web-chat .webchat__bubble .ac-container .ac-textBlock,
.pva-embedded-web-chat .webchat__bubble .ac-container p,
.pva-embedded-web-chat .webchat__bubble .ac-container li{ color: inherit !important; margin: .15rem 0 .3rem !important; }
.pva-embedded-web-chat .webchat__bubble .ac-container ul,
.pva-embedded-web-chat .webchat__bubble .ac-container ol{ padding-left: 1rem !important; margin: .1rem 0 .3rem !important; }
.pva-embedded-web-chat .webchat__bubble .ac-container h1,
.pva-embedded-web-chat .webchat__bubble .ac-container h2,
.pva-embedded-web-chat .webchat__bubble .ac-container h3{ color: var(--text-strong) !important; margin: 0 0 .25rem !important; font-weight: 700 !important; }

/* Inputs in cards */
.pva-embedded-web-chat .webchat__bubble .ac-input,
.pva-embedded-web-chat .webchat__bubble .ac-textInput,
.pva-embedded-web-chat .webchat__bubble .ac-numberInput,
.pva-embedded-web-chat .webchat__bubble .ac-dateInput,
.pva-embedded-web-chat .webchat__bubble .ac-timeInput,
.pva-embedded-web-chat .webchat__bubble .ac-multichoiceInput,
.pva-embedded-web-chat .webchat__bubble .ac-choiceSetInput,
.pva-embedded-web-chat .webchat__bubble .ac-toggleInput{
  font-family: var(--chat-font) !important;
  font-size: calc(var(--chat-font-size) * .95) !important;
  color: var(--text-strong) !important;
  background: var(--surface-muted) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
}
.pva-embedded-web-chat .webchat__bubble .ac-input:focus,
.pva-embedded-web-chat .webchat__bubble .ac-textInput:focus,
.pva-embedded-web-chat .webchat__bubble .ac-numberInput:focus,
.pva-embedded-web-chat .webchat__bubble .ac-dateInput:focus,
.pva-embedded-web-chat .webchat__bubble .ac-timeInput:focus,
.pva-embedded-web-chat .webchat__bubble .ac-multichoiceInput:focus,
.pva-embedded-web-chat .webchat__bubble .ac-choiceSetInput select:focus{
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  outline:none !important;
}
.pva-embedded-web-chat .webchat__bubble .ac-choiceSetInput input[type="radio"],
.pva-embedded-web-chat .webchat__bubble .ac-choiceSetInput input[type="checkbox"]{ accent-color: var(--brand) !important; }
.pva-embedded-web-chat .webchat__bubble .ac-choiceSetInput label{ margin-left: .35rem !important; color: var(--text-strong) !important; }

/* Action buttons in cards */
.pva-embedded-web-chat .webchat__bubble .ac-actionSet,
.pva-embedded-web-chat .webchat__bubble .ac-actions{
  margin-top: .4rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .35rem !important;
}
.pva-embedded-web-chat .webchat__bubble .ac-pushButton,
.pva-embedded-web-chat .webchat__bubble .ac-actionSet button,
.pva-embedded-web-chat .webchat__bubble .ac-actions button{
  font-family: var(--chat-font) !important;
  font-weight: 600 !important;
  font-size: calc(var(--chat-font-size) * .95) !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-strong) !important;
  background: #fff !important;
  color: var(--text-strong) !important;
  transition: background .15s ease, border-color .15s ease !important;
}
.pva-embedded-web-chat .webchat__bubble .ac-actionSet button[type="submit"],
.pva-embedded-web-chat .webchat__bubble .ac-pushButton.ac-pushButton--primary,
.pva-embedded-web-chat .webchat__bubble .ac-actionSet button.ac-pushButton--primary,
.pva-embedded-web-chat .webchat__bubble .ac-actions button.ac-pushButton--primary{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.pva-embedded-web-chat .webchat__bubble .ac-pushButton:hover,
.pva-embedded-web-chat .webchat__bubble .ac-actionSet button:hover,
.pva-embedded-web-chat .webchat__bubble .ac-actions button:hover{
  background: var(--surface-muted) !important;
}
.pva-embedded-web-chat .webchat__bubble .ac-pushButton.ac-pushButton--primary:hover,
.pva-embedded-web-chat .webchat__bubble .ac-actionSet button.ac-pushButton--primary:hover,
.pva-embedded-web-chat .webchat__bubble .ac-actions button.ac-pushButton--primary:hover{
  background: var(--brand-hover) !important;
}

/* Adaptive Card option tiles — full-width */
.pva-embedded-web-chat .ac-container .ac-actionSet,
.pva-embedded-web-chat .ac-container .ac-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: .35rem !important;
  margin: .2rem 0 !important;
}
.pva-embedded-web-chat .ac-container .ac-pushButton:not(.ac-pushButton--primary),
.pva-embedded-web-chat .ac-container .ac-actionSet > button:not(.ac-pushButton--primary),
.pva-embedded-web-chat .ac-container .ac-actions > button:not(.ac-pushButton--primary) {
  width: 100% !important;
  min-height: 40px !important;
  padding: 10px 12px 10px 16px !important;
  background: #ffffff !important;
  color: var(--text-strong) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .55rem !important;
  text-align: left !important;
  font-weight: 600 !important;
  line-height: 1.28 !important;
  font-size: calc(var(--chat-font-size) * 0.95) !important;

  position: relative !important;
  transition: background .15s ease, border-color .15s ease !important;
}
.pva-embedded-web-chat .ac-container .ac-pushButton:not(.ac-pushButton--primary)::before,
.pva-embedded-web-chat .ac-container .ac-actionSet > button:not(.ac-pushButton--primary)::before,
.pva-embedded-web-chat .ac-container .ac-actions > button:not(.ac-pushButton--primary)::before {
  content: "";
  position: absolute;
  left: 8px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand), #7a003d);
  opacity: .9;
}
.pva-embedded-web-chat .ac-container .ac-pushButton:not(.ac-pushButton--primary)::after,
.pva-embedded-web-chat .ac-container .ac-actionSet > button:not(.ac-pushButton--primary)::after,
.pva-embedded-web-chat .ac-container .ac-actions > button:not(.ac-pushButton--primary)::after {
  content: "›";
  font-size: .95rem;
  line-height: 1;
  color: var(--brand);
  opacity: .55;
  margin-left: .25rem;
}
.pva-embedded-web-chat .ac-container .ac-pushButton:not(.ac-pushButton--primary):hover,
.pva-embedded-web-chat .ac-container .ac-actionSet > button:not(.ac-pushButton--primary):hover,
.pva-embedded-web-chat .ac-container .ac-actions > button:not(.ac-pushButton--primary):hover {
  background: var(--surface-muted) !important;
  border-color: var(--border-strong) !important;
}
.pva-embedded-web-chat .ac-container .ac-pushButton:not(.ac-pushButton--primary):focus-visible,
.pva-embedded-web-chat .ac-container .ac-actionSet > button:not(.ac-pushButton--primary):focus-visible,
.pva-embedded-web-chat .ac-container .ac-actions > button:not(.ac-pushButton--primary):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* Adaptive Card validation */
.pva-embedded-web-chat .webchat__bubble .ac-input-validation,
.pva-embedded-web-chat .webchat__bubble .ac-inlineError{
  color:#991b1b !important;
  background:#fef2f2 !important;
  border:1px solid #fecaca !important;
  border-left:4px solid #ef4444 !important;
  border-radius:6px !important;
  padding:.4rem .6rem !important;
  margin-top:.35rem !important;
}

/* Optional: hide chat while a specific portal modal is open */
:root:has(table[data-name="Knowledge Information"]) .pva-embedded-web-chat{ display:none !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .pva-embedded-web-chat-window, .pva-embedded-web-chat-launcher, .webchat__bubble, .webchat__suggested-action{ transition:none !important; }
}

/* Print */
@media print{
  .pva-embedded-web-chat, .pva-embedded-web-chat-window, .pva-embedded-web-chat-launcher{ display:none !important; }
}

/* === Header controls: Resize + Close ================================== */
.pva-embedded-web-chat [class*="header"] { position: relative !important; }

.pva-embedded-web-chat .jao-header-actions{
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  display: inline-flex !important;
  gap: 4px !important;
  align-items: center !important;
  z-index: 3 !important;
}

.pva-embedded-web-chat .jao-chat-btn{
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 6px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  line-height: 0 !important;
  cursor: pointer !important;
  color: #fff !important;
}
.pva-embedded-web-chat .jao-chat-btn:hover{ background: rgba(255,255,255,.08) !important; }
.pva-embedded-web-chat .jao-chat-btn:focus-visible{
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
}
.pva-embedded-web-chat .jao-chat-btn svg{
  width: 18px; height: 18px; display: block;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* === Half-screen docked mode (right side) ============================= */
:is(pva-embedded-web-chat, div.pva-embedded-web-chat)[data-minimized='false'][data-size='half']{
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
  width: min(760px, 50vw) !important;
  height: 100vh !important; height: 100dvh !important;
  border-left: 1px solid var(--border-strong) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--surface-page) !important;
}

/* Allow page scroll when docked half */
html:has(pva-embedded-web-chat[data-minimized='false'][data-size='half']),
body:has(pva-embedded-web-chat[data-minimized='false'][data-size='half']){
  overflow: auto !important;
}

/* On narrow screens, "half" becomes full */
@media (max-width: 960px){
  :is(pva-embedded-web-chat, div.pva-embedded-web-chat)[data-minimized='false'][data-size='half']{
    width: 100vw !important;
  }
}

/* =========================================================
   FORCE TYPING INDICATOR (3 DOTS) — HARD OVERRIDE (LAST WINS)
   Put this at the VERY END of your CSS
   ========================================================= */

/* Never let the typing indicator be hidden */
.pva-embedded-web-chat :is(
  .webchat__typing,
  .webchat__typingIndicator,
  .webchat__typing-indicator,
  .webchat__typing__indicator,
  [class*="typing"],
  [aria-label*="Typing"],
  [aria-label*="typing"]
){
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--brand, #96004B) !important;
  background: var(--surface-muted, #eef2f7) !important;
  border: 1px solid var(--border-strong, #cbd5e1) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  min-height: 28px !important;
  min-width: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2147483647 !important;
  position: relative !important;
  overflow: visible !important;
}

/* If WebChat renders SVG dots, force them visible and colored */
.pva-embedded-web-chat :is(
  .webchat__typing,
  .webchat__typingIndicator,
  .webchat__typing-indicator,
  .webchat__typing__indicator,
  [class*="typing"]
) svg{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 28px !important;
  height: 10px !important;
}
.pva-embedded-web-chat :is(
  .webchat__typing,
  .webchat__typingIndicator,
  .webchat__typing-indicator,
  .webchat__typing__indicator,
  [class*="typing"]
) svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* If WebChat uses spans/divs for dots, force them visible */
.pva-embedded-web-chat :is(
  .webchat__typing,
  .webchat__typingIndicator,
  .webchat__typing-indicator,
  .webchat__typing__indicator,
  [class*="typing"]
) :is(span, div){
  visibility: visible !important;
  opacity: 1 !important;
}

/* Universal fallback: always show 3 dots even if internals are empty */
@keyframes jaoForceDotsPulse { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.pva-embedded-web-chat :is(
  .webchat__typing,
  .webchat__typingIndicator,
  .webchat__typing-indicator,
  .webchat__typing__indicator,
  [class*="typing"]
)::after{
  content: "● ● ●" !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  letter-spacing: 4px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: var(--brand, #96004B) !important;
  animation: jaoForceDotsPulse 1.1s infinite ease-in-out !important;
}

/* Defensive: ensure nothing sets pseudo-element to none/empty */
.pva-embedded-web-chat :is(
  .webchat__typing,
  .webchat__typingIndicator,
  .webchat__typing-indicator,
  .webchat__typing__indicator,
  [class*="typing"]
)::before{
  content: "" !important;
  display: none !important;
}