/* bc-bootstrap-skin.css -- Educare
   A Bootstrap 3 look and feel on top of Bootstrap 5: 14px type, the familiar blue,
   gradient + shadow depth on buttons, bold right-aligned form labels.  Adapted from
   the MyPlate skin.  Light and dark: the dark values of everything this file
   overrides are at the end.  Must load AFTER bootstrap.min.css -- the
   headers link it last so it also wins over plugin stylesheets.

   The second half is COMPATIBILITY: class names the Bootstrap 3 era code and the
   jQuery form-validator plugin still use, which Bootstrap 5 no longer styles. */

:root {
  --skin-primary:#337ab7;   --skin-primary-dark:#265a88;   --skin-primary-border:#245580;
  --skin-link:#337ab7;      --skin-link-hover:#23527c;
  --skin-nav-bg:#f5f5f5;    --skin-nav-text:#777777;       --skin-nav-active:#337ab7;
  --skin-cardhdr-top:#f5f5f5; --skin-cardhdr-bottom:#e8e8e8; --skin-cardhdr-border:#dddddd; --skin-cardhdr-text:#333333;
}

/* ============ type scale: back toward Bootstrap 3's 14px ============ */
body { font-size: 14px; line-height: 1.42857143; }
/* The fixed header covers the top of the page, so whatever the browser scrolls to -- a #section link, scrollIntoView(),
   a field that gets the focus -- has to stop BELOW it.  70px is the header's usual height plus some air;
   js/jquery_shortcuts.js measures the real header (taller when the menu wraps) and sets the exact value. */
html { scroll-padding-top: 70px; }
@media print { html { scroll-padding-top: 0; } }
.btn, .form-control, .form-select, .input-group-text, .nav-link, .dropdown-item, .table, table { font-size: 14px; }
.btn-sm, .form-control-sm, .form-select-sm { font-size: 12px; }
.btn-lg, .form-control-lg { font-size: 18px; }
h1, .h1 { font-size: 32px; }
h2, .h2 { font-size: 26px; }
h3, .h3 { font-size: 22px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 15px; }
h6, .h6 { font-size: 13px; }
.page-header h1 { font-size: 30px; }
h1 small, h2 small, h3 small { font-size: 65%; font-weight: 400; color: #777; }

/* iOS Safari zooms the page when a focused field is under 16px */
@media (pointer: coarse) {
  .form-control, .form-select, .form-control-sm, .form-select-sm, input, textarea, select { font-size: 16px; }
}

/* ============ links ============ */
a { color: var(--skin-link); text-decoration: none; }
a:not(.btn):not(.nav-link):not(.dropdown-item):hover, a:not(.btn):not(.nav-link):not(.dropdown-item):focus { color: var(--skin-link-hover); text-decoration: underline; }
/* a time that switches between "3 hours ago" and the exact time when clicked (bcdate::relativeTimeToggleHtml): the dotted line says so */
.relativeTimeToggle { cursor: pointer; white-space: nowrap; text-decoration: underline dotted; text-underline-offset: 3px; }
.relativeTimeToggle:hover { color: var(--skin-link-hover); }

/* ============ form focus: the soft Bootstrap 3 glow ============ */
.form-control:focus, .form-select:focus {
  border-color: var(--skin-primary);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.5);
}

/* ============ buttons: gradients + shadows ============ */
.btn {
  border-radius: 4px;
  padding: 6px 12px;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
  background-repeat: repeat-x;
}
.btn:active, .btn.active { box-shadow: inset 0 3px 5px rgba(0,0,0,.125); }
.btn-sm { padding: 5px 10px; border-radius: 3px; }
.btn-lg { padding: 10px 16px; border-radius: 6px; }

.btn-primary { background-color:var(--skin-primary-dark); background-image: linear-gradient(to bottom, var(--skin-primary) 0, var(--skin-primary-dark) 100%); border-color:var(--skin-primary-border); }
.btn-primary:hover, .btn-primary:focus { background-color:var(--skin-primary-dark); background-position:0 -15px; border-color:var(--skin-primary-border); }
.btn.btn-primary:active, .btn.btn-primary.active { background-color:var(--skin-primary-dark); background-image:none; border-color:var(--skin-primary-border); }

/* secondary == the old Bootstrap 3 "default" button (light) */
.btn-secondary {
  color:#333; text-shadow:0 1px 0 #fff;
  background-color:#e0e0e0; background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%); border-color:#ccc;
}
.btn-secondary:hover, .btn-secondary:focus { color:#333; background-color:#e0e0e0; background-position:0 -15px; border-color:#adadad; }
/* needs (0,3,0) specificity to beat Bootstrap 5's own :active rule */
.btn.btn-secondary:active, .btn.btn-secondary.active { color:#333; background-color:#d4d4d4; background-image:none; border-color:#adadad; }
/* disabled: Bootstrap 5 switches the text to white, over our light gradient (unreadable) -- keep the dark text; Bootstrap's opacity dims it */
.btn.btn-secondary:disabled, .btn.btn-secondary.disabled { color:#333; background-color:#e0e0e0; border-color:#ccc; }

.btn-success { background-color:#419641; background-image: linear-gradient(to bottom,#5cb85c 0,#419641 100%); border-color:#3e8f3e; }
.btn-success:hover, .btn-success:focus { background-color:#419641; background-position:0 -15px; }
.btn.btn-success:active, .btn.btn-success.active { background-color:#419641; background-image:none; }
.btn-info { color:#fff; background-color:#2aabd2; background-image: linear-gradient(to bottom,#5bc0de 0,#2aabd2 100%); border-color:#28a4c9; }
.btn-info:hover, .btn-info:focus { color:#fff; background-color:#2aabd2; background-position:0 -15px; }
.btn.btn-info:active, .btn.btn-info.active { color:#fff; background-color:#2aabd2; background-image:none; }
.btn-warning { color:#fff; background-color:#eb9316; background-image: linear-gradient(to bottom,#f0ad4e 0,#eb9316 100%); border-color:#e38d13; }
.btn-warning:hover, .btn-warning:focus { color:#fff; background-color:#eb9316; background-position:0 -15px; }
.btn.btn-warning:active, .btn.btn-warning.active { color:#fff; background-color:#eb9316; background-image:none; }
.btn-danger { background-color:#c12e2a; background-image: linear-gradient(to bottom,#d9534f 0,#c12e2a 100%); border-color:#b92c28; }
.btn-danger:hover, .btn-danger:focus { background-color:#c12e2a; background-position:0 -15px; }
.btn.btn-danger:active, .btn.btn-danger.active { background-color:#c12e2a; background-image:none; }

.btn-link { color:var(--skin-link); text-shadow:none; box-shadow:none; background-image:none; }
.btn-link:hover, .btn-link:focus { color:var(--skin-link-hover); }

/* ============ cards (the old panels) ============ */
.card { box-shadow: 0 1px 1px rgba(0,0,0,.05); margin-bottom: 20px; }
.card-header {
  background-image: linear-gradient(to bottom, var(--skin-cardhdr-top) 0, var(--skin-cardhdr-bottom) 100%);
  border-bottom: 1px solid var(--skin-cardhdr-border);
  color: var(--skin-cardhdr-text);
  font-weight: 500;
}

/* ============ tabs: every .nav-tabs strip looks like tabs in a card header (2026-09-30, Michael: option D)
   The strip is the gray card-header bar; the chosen tab takes the page's color and opens onto what is under it,
   so a row of tabs never reads as a row of links.  Tabs inside a real .card-header (card-header-tabs) are
   Bootstrap's own version of the same look and are left alone. */
.nav-tabs:not(.card-header-tabs) {
  --bs-nav-tabs-border-color: var(--skin-cardhdr-border);
  --bs-nav-tabs-link-hover-border-color: var(--skin-cardhdr-border) var(--skin-cardhdr-border) var(--skin-cardhdr-border);
  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
  --bs-nav-tabs-link-active-color: var(--bs-body-color);
  --bs-nav-tabs-link-active-border-color: var(--skin-cardhdr-border) var(--skin-cardhdr-border) var(--bs-body-bg);
  padding: 8px 8px 0;
  background-image: linear-gradient(to bottom, var(--skin-cardhdr-top) 0, var(--skin-cardhdr-bottom) 100%);
  border: 1px solid var(--skin-cardhdr-border);
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  row-gap: 4px;
}

/* ============ navbar (the old navbar-default) ============ */
.navbar.bg-light { background-color: var(--skin-nav-bg) !important; border-bottom: 1px solid #e7e7e7; }
.navbar.bg-light .nav-link { color: var(--skin-nav-text); }
.navbar.bg-light .nav-link:hover, .navbar.bg-light .nav-link:focus, .navbar.bg-light .nav-link.active { color: var(--skin-nav-active); }
.navbar-brand { font-size: 18px; color: var(--skin-nav-text); }
/* the staff menus are long (Utilities has 25+ entries): scroll inside the menu, not the page */
.navbar .dropdown-menu { max-height: 80vh; overflow-y: auto; }
.dropdown-menu { box-shadow: 0 6px 12px rgba(0,0,0,.175); }
.dropdown-header { font-size: 12px; color: #777; }
.badge { box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }
/* (2026-10-05, Michael; MyPlate had the same fix) a button's text-shadow blurs the digits of a badge inside it */
.btn .badge { text-shadow: none; }

/* ============ tables: Bootstrap 3 cell padding, no forced white cell background ============ */
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: 8px; }
.table-sm > :not(caption) > * > * { padding: 5px; }

/* ============ forms: bold labels, right-aligned beside their field on wide screens ============ */
label { font-weight: 700; margin-bottom: 5px; }
.form-check-label { font-weight: 400; }
.col-form-label { padding-top: 7px; margin-bottom: 0; }
@media (min-width: 768px) {
  .row > label.col-form-label { text-align: right; }
}
.form-control-plaintext { padding-top: 7px; padding-bottom: 7px; margin-bottom: 0; }
/* (2026-10-05, Michael) a required field says so: a red asterisk after its label -- the label of a .form-group holding a required
   field, or a label right before one.  Every form that marks its fields "required" gets it, with nothing to add page by page. */
.form-group:has(input[required]:not([type=hidden]), select[required], textarea[required]) > label:not(.form-check-label)::after,
label:not(.form-check-label):has(+ input[required]:not([type=hidden]), + select[required], + textarea[required])::after,
label.required::after { content: " *"; color: #dc3545; font-weight: 700; }

/* =====================================================================
   COMPATIBILITY with Bootstrap 3 era markup and the jQuery form validator
   ===================================================================== */

/* .hidden was Bootstrap 3's display:none helper */
.hidden { display: none !important; }

/* <span class="input-group-btn"> wrappers: Bootstrap 5 wants the button as a direct
   child of .input-group; "contents" makes the wrapper disappear for layout */
.input-group-btn { display: contents; }

/* 1000hz bootstrap-validator toggles these on the closest .form-group */
.form-group.has-error .form-control, .form-group.has-error .form-select { border-color: #a94442; }
.form-group.has-error label, .form-group.has-error .form-text, .form-group.has-error .with-errors { color: #a94442; }
.form-group.has-success .form-control, .form-group.has-success .form-select { border-color: #3c763d; }
.btn.disabled, .btn:disabled { cursor: not-allowed; }

/* muted text: the Bootstrap 3 grey */
.text-muted { color: #777 !important; }

/* Bootstrap 3 printed the URL after every link; Bootstrap 5 does not -- keep it that way
   on pick lists, packing slips and receipts even if a plugin stylesheet tries */
@media print {
  a[href]:after { content: none !important; }
  .navbar, .footer { display: none !important; }
  body { margin-bottom: 0; }
  body > .container { padding-top: 0; }
}


/* =====================================================================
   DARK  (data-bs-theme="dark" on <html>: My Account -> Appearance, or the device's
   own setting for "Auto" and for visitors).  Bootstrap 5.3 recolors its own
   components; this block gives the dark value of what the skin overrides above,
   and of the few hard-coded light colors in page styles.  Printing is always light
   (the headers switch the theme back for the printer).
   ===================================================================== */
[data-bs-theme=dark] {
  --skin-primary:#3d8bd0;   --skin-primary-dark:#2e6da4;   --skin-primary-border:#2a6496;
  --skin-link:#6cb2eb;      --skin-link-hover:#9ccaf2;
  --skin-nav-bg:#2b3035;    --skin-nav-text:#c5c9cd;       --skin-nav-active:#ffffff;
  --skin-cardhdr-top:#343a40; --skin-cardhdr-bottom:#2b3035; --skin-cardhdr-border:#495057; --skin-cardhdr-text:#dee2e6;
}
[data-bs-theme=dark] .btn-secondary {
  color:#e9ecef; text-shadow:0 -1px 0 rgba(0,0,0,.3);
  background-color:#495057; background-image: linear-gradient(to bottom,#5c636a 0,#495057 100%); border-color:#3d4348;
}
[data-bs-theme=dark] .btn-secondary:hover, [data-bs-theme=dark] .btn-secondary:focus { color:#fff; background-color:#495057; background-position:0 -15px; border-color:#343a40; }
[data-bs-theme=dark] .btn.btn-secondary:active, [data-bs-theme=dark] .btn.btn-secondary.active { color:#fff; background-color:#3d4348; background-image:none; border-color:#343a40; }
[data-bs-theme=dark] .btn.btn-secondary:disabled, [data-bs-theme=dark] .btn.btn-secondary.disabled { color:#e9ecef; background-color:#495057; border-color:#3d4348; }
[data-bs-theme=dark] .navbar.bg-light { border-bottom-color:#495057; }
[data-bs-theme=dark] .navbar-brand { color: var(--skin-nav-text); }
[data-bs-theme=dark] .footer { background-color:#2b3035; }
[data-bs-theme=dark] .dropdown-header, [data-bs-theme=dark] h1 small, [data-bs-theme=dark] h2 small, [data-bs-theme=dark] h3 small { color:#9aa0a6; }
[data-bs-theme=dark] .text-muted { color:#9aa0a6 !important; }
[data-bs-theme=dark] .dropdown-menu { box-shadow: 0 6px 12px rgba(0,0,0,.6); }
[data-bs-theme=dark] .form-group.has-error .form-control, [data-bs-theme=dark] .form-group.has-error .form-select { border-color:#ea868f; }
[data-bs-theme=dark] .form-group.has-error label, [data-bs-theme=dark] .form-group.has-error .form-text, [data-bs-theme=dark] .form-group.has-error .with-errors { color:#ea868f; }
[data-bs-theme=dark] .form-group.has-success .form-control, [data-bs-theme=dark] .form-group.has-success .form-select { border-color:#75b798; }
/* the named colors pages use (header styles, bc-framework.css) */
[data-bs-theme=dark] .red, [data-bs-theme=dark] .redSmaller { color:#ff7b72; }
[data-bs-theme=dark] .green, [data-bs-theme=dark] .greenSmaller, [data-bs-theme=dark] .quarterDisplay { color:#5dd879; }
[data-bs-theme=dark] .blue { color:#6cb2eb; }
[data-bs-theme=dark] .grey, [data-bs-theme=dark] .hint, [data-bs-theme=dark] .silver { color:#9aa0a6; }
/* a signature is black ink: its pad stays paper-white */
[data-bs-theme=dark] .signature-pad--body canvas, [data-bs-theme=dark] canvas.signature-pad { background-color:#fff; }
/* an element that paints its own LIGHT background inline keeps dark text on it */
[data-bs-theme=dark] [style*="background-color:yellow"], [data-bs-theme=dark] [style*="background-color: yellow"],
[data-bs-theme=dark] [style*="background-color:white"], [data-bs-theme=dark] [style*="background-color: white"],
[data-bs-theme=dark] [style*="background-color:silver"], [data-bs-theme=dark] [style*="background:#fff"], [data-bs-theme=dark] [style*="background:#eee"],
[data-bs-theme=dark] [style*="background:#f5f5f5"], [data-bs-theme=dark] [style*="background:#feffff"],
[data-bs-theme=dark] [style*="background-color:#f"], [data-bs-theme=dark] [style*="background-color:#e"], [data-bs-theme=dark] [style*="background-color:#d"] { color:#212529; }
/* The HTML editor stays paper-white on purpose -- what it edits is an email, and email is light -- so everything in it
   keeps DARK text.  (Without this the page's light dark-mode text color was inherited onto the white sheet.) */
[data-bs-theme=dark] .jodit-container:not(.jodit_inline),
[data-bs-theme=dark] .jodit-container:not(.jodit_inline) .jodit-workplace,
[data-bs-theme=dark] .jodit-container:not(.jodit_inline) .jodit-wysiwyg,
[data-bs-theme=dark] .jodit-container .jodit-source,
[data-bs-theme=dark] .jodit-container .jodit-source textarea,
[data-bs-theme=dark] .jodit-container .jodit-source__mirror { color:#212529; background-color:#fff; }
[data-bs-theme=dark] .jodit-container .jodit-wysiwyg a { color:#337ab7; }
[data-bs-theme=dark] .jodit-container .jodit-placeholder { color:#6c757d; }
[data-bs-theme=dark] .jodit-popup, [data-bs-theme=dark] .jodit-dialog__panel { color:#212529; }
/* third-party widgets that stay light (select2) keep their own dark text */
[data-bs-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-bs-theme=dark] .select2-container--default .select2-results__option { color:#212529; }
[data-bs-theme=dark] .select2-container--default .select2-results__option--highlighted[aria-selected] { color:#fff; }
/* ... the multiple kind too (2026-09-28): the chosen items' chips and the box you type into were inheriting the page's light text
   color -- white on white, grey on grey.  The search box of a single select's dropdown had the same problem. */
[data-bs-theme=dark] .select2-container--default .select2-selection--multiple,
[data-bs-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice,
[data-bs-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice__display,
[data-bs-theme=dark] .select2-container--default .select2-search__field,
[data-bs-theme=dark] .select2-dropdown { color:#212529; }
[data-bs-theme=dark] .select2-container--default .select2-search__field { caret-color:#212529; }
[data-bs-theme=dark] .select2-container--default .select2-search--dropdown .select2-search__field { background-color:#fff; }
[data-bs-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color:#6c757d; }
[data-bs-theme=dark] .select2-container--default .select2-search__field::placeholder { color:#6c757d; }

/* ---- Smart Search (2.0): the box in the staff menu bar --------------------------------------------------------------- */
.smartSearch { position: relative; margin: 0 .5rem; }
.smartSearch input { width: 110px; transition: width .15s ease-in-out; }
.smartSearch input:focus { width: 260px; }
/* A laptop-width window (992-1199px) with every menu folder: "My Account" wrapped onto a second line, which made the fixed
   header taller than the room pages leave for it (their first line hid under it) and pushed Logout off the edge.  One line, tighter.
   (2026-10-12: up to 1399px -- the menu by module added Products, and at 1280 px a district with every module wrapped again.) */
@media (min-width: 992px) and (max-width: 1399.98px) {
  nav.fixed-top .navbar-nav .nav-link { white-space: nowrap; padding-left: .35rem; padding-right: .35rem; }
  nav.fixed-top .navbar-brand { margin-right: .5rem; }
  .smartSearch input { width: 76px; }
  .smartSearch input:focus { width: 200px; }
}
.smartSearchResults { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 1050; width: 440px; max-width: 92vw; max-height: 72vh; overflow-y: auto;
	background-color: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px 0; }
.smartSearchResults.show { display: block; }
.smartSearchGroup { padding: 8px 12px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.smartSearchItem { display: block; padding: 5px 12px; color: var(--bs-body-color); text-decoration: none !important; line-height: 1.25; }
.smartSearchItem:hover, .smartSearchItem.active { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.smartSearchItem.active { box-shadow: inset 3px 0 0 var(--skin-primary); }
.smartSearchLabel { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smartSearchDetail { display: block; font-size: 12px; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smartSearchNothing { padding: 10px 12px; color: var(--bs-secondary-color); }
@media (max-width: 991.98px) { /* the collapsed menu: the box takes the full width and the results sit under it */
	.smartSearch { margin: .5rem 0; flex-wrap: wrap; }   /* (the box and its results are a flex row on a wide screen: here the results go under it) */
	.smartSearch input, .smartSearch input:focus { width: 100%; }
	.smartSearchResults { position: static; flex: 0 0 100%; width: 100%; max-width: none; max-height: 50vh; margin-top: 6px; box-shadow: none; }
}

/* ---- Help (2.0) --------------------------------------------------------------------------------------------------------- */
/* a.helpLink = the small grey "?" or inline text link.  NEVER on a .btn: its colors fight the button's (it once gave a .btn-secondary
   white text on the light gradient).  A BUTTON that opens Help in the panel is class "btn btn-secondary helpButton" (no colors of its own). */
a.helpLink { color: var(--bs-secondary-color); text-decoration: none; margin-left: .25rem; font-weight: normal; }
a.helpLink:hover { color: var(--skin-primary); }
h1 a.helpLink, h2 a.helpLink, h3 a.helpLink { font-size: .6em; vertical-align: middle; }
.helpPanel { --bs-offcanvas-width: min(560px, 94vw); }
.helpContent { font-size: 15px; line-height: 1.55; max-width: 860px; }
.helpContent h2 { font-size: 22px; margin-top: 1.6em; padding-bottom: .2em; border-bottom: 1px solid var(--bs-border-color); }
.helpContent h3 { font-size: 17px; margin-top: 1.3em; }
.helpContent > h1:first-child { display: none; }  /* (the page and the panel print the title themselves) */
.helpContent table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.helpContent th, .helpContent td { border: 1px solid var(--bs-border-color); padding: 6px 8px; vertical-align: top; }
.helpContent th { background-color: var(--bs-tertiary-bg); }
.helpContent blockquote { border-left: 4px solid var(--skin-primary); margin: 1rem 0; padding: .4rem .9rem; background-color: var(--bs-tertiary-bg); }
.helpContent blockquote p:last-child { margin-bottom: 0; }
.helpContent code { color: var(--bs-body-color); background-color: var(--bs-tertiary-bg); padding: 1px 4px; border-radius: 3px; }
.helpContent .helpAnchor { visibility: hidden; margin-left: .35em; color: var(--bs-secondary-color); text-decoration: none; font-weight: normal; }
.helpContent h2:hover .helpAnchor, .helpContent h3:hover .helpAnchor { visibility: visible; }
.helpContent .helpTarget { background-color: rgba(255, 214, 10, .28); transition: background-color 2.5s ease-out; }
.helpAside { position: sticky; top: 80px; font-size: 13px; }
.helpAsideTitle { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); margin: .8rem 0 .3rem; }
.helpIndexTitle { font-weight: 600; }
@media print { .helpContent { max-width: none; font-size: 12pt; } .helpContent .helpAnchor { display: none; } }

/* ---- the Assistant (2026-09-29): its answer under Smart Search, and assistant.php ------------------------------------- */
.smartSearchAsk .bi-stars, .assistantPanelHeader .bi-stars { color: var(--skin-primary); }
.smartSearchResults.smartSearchAnswering { width: 580px; padding: 0; }
.assistantPanel { padding: 12px 14px; }
.assistantPanelHeader { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.assistantPanelQuestion { font-weight: 600; margin: 2px 0 8px; overflow-wrap: anywhere; }
.assistantPanelWorking { font-size: 13px; color: var(--bs-secondary-color); margin: 6px 0; }
.assistantPanelError { color: var(--bs-danger-text-emphasis); margin: 6px 0; }
.assistantPanelActions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.assistantPanelNote { font-size: 11.5px; color: var(--bs-secondary-color); margin-top: 10px; }
.assistantSteps { font-size: 12.5px; color: var(--bs-secondary-color); margin: 4px 0 8px; }
.assistantSteps summary { cursor: pointer; }
.assistantStep { display: flex; align-items: center; gap: 6px; padding: 2px 0; overflow-wrap: anywhere; }
.assistantStep .bi-check2 { color: var(--bs-success-text-emphasis); }
.assistantStep .bi-exclamation-triangle { color: var(--bs-warning-text-emphasis); }
.assistantStep .spinner-border-sm, .assistantPanelWorking .spinner-border-sm { width: .8rem; height: .8rem; border-width: .15em; }
.assistantAnswer { line-height: 1.5; overflow-wrap: anywhere; }
.assistantAnswer p:last-child, .assistantAnswer ul:last-child, .assistantAnswer ol:last-child { margin-bottom: 0; }
.assistantAnswer ul, .assistantAnswer ol { padding-left: 1.3rem; }
.assistantAnswer table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.assistantAnswer th, .assistantAnswer td { border: 1px solid var(--bs-border-color); padding: 4px 6px; vertical-align: top; }
.assistantAnswer code { color: var(--bs-body-color); background-color: var(--bs-tertiary-bg); padding: 1px 4px; border-radius: 3px; }
.assistantAnswer a.helpLink { color: var(--skin-link); margin-left: 0; }
/* assistant.php: the conversations, the conversation, "How I answered" */
.assistantHistoryItem { display: block; padding: 6px 10px; border-radius: 6px; color: var(--bs-body-color); text-decoration: none !important; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistantHistoryItem:hover { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.assistantHistoryItem.active { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; }
.assistantTurn { margin-bottom: 22px; }
.assistantYou { margin-left: auto; width: fit-content; max-width: 85%; background-color: var(--skin-primary-dark); color: #fff; padding: 9px 13px; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistantReply { margin-top: 10px; padding-left: 12px; border-left: 3px solid transparent; cursor: pointer; }
.assistantTurn.selected .assistantReply { border-left-color: var(--skin-primary); }
.assistantFeedback { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--bs-secondary-color); }
.assistantCompose { position: sticky; bottom: 0; z-index: 2; background-color: var(--bs-body-bg); padding: 10px 0 12px; border-top: 1px solid var(--bs-border-color); }
.assistantAside { position: sticky; top: 80px; font-size: 13px; }
.assistantAsideTitle { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); margin: .9rem 0 .3rem; }
.assistantAside li { margin-bottom: 4px; overflow-wrap: anywhere; }