/* 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; }

/* ============ 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); }

/* ============ 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; }

/* =====================================================================
   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. */
@media (min-width: 992px) and (max-width: 1199.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 { 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; }
a.helpLink.btn { color: var(--bs-btn-color); 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; }