/* HGI Staff Portal — brand tokens matching the approved prototype */
:root {
  --hgi-red: #A6192E;
  --hgi-red-dark: #7E1322;
  --hgi-ink: #14151A;
  --hgi-slate: #494B54;
  --hgi-hairline: #E4E3E1;
  --hgi-canvas: #F6F5F3;
  /* Department accents — muted, professional, distinct enough to scan at a glance without competing with the brand red */
  --hgi-dept-frontdesk: #A67C1E;
  --hgi-dept-housekeeping: #3D7A63;
  --hgi-dept-fnb: #B4552D;
  --hgi-dept-sales: #3C5A78;
}
#hgi-portal-root, .hgi-portal {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--hgi-ink);
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.55;
}
#hgi-portal-root *, .hgi-portal *, .hgi-modal-overlay, .hgi-modal-overlay * { box-sizing: border-box; }

/* ---------- Login screen ---------- */
.hgi-portal--login {
  display: flex; justify-content: center; padding: 48px 16px; background: var(--hgi-canvas);
}
.hgi-login-card {
  width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--hgi-hairline);
  border-radius: 10px; padding: 28px;
}
.hgi-login-brand { max-width: 340px; width: 100%; height: auto; margin: 0 auto 10px; display: block; }
.hgi-login-card h2 { margin: 0 0 2px; font-size: 18px; }
.hgi-login-title { color: var(--hgi-red); font-size: 22px; font-weight: 800; margin: 0 0 4px; text-align: center; }
.hgi-login-sub { color: var(--hgi-slate); font-size: 14px; margin: 0 0 20px; }
.hgi-login-card p.login-remember { font-size: 13px; }
.hgi-login-card input[type="text"],
.hgi-login-card input[type="email"],
.hgi-login-card input[type="password"] {
  width: 100%; padding: 9px 12px; border: 1px solid var(--hgi-hairline); border-radius: 6px;
  font-size: 14px; margin-top: 4px;
}
.hgi-login-card input[type="submit"] {
  width: 100%; background: var(--hgi-red); color: #fff; border: none; border-radius: 6px;
  font-weight: 600; padding: 10px 14px; margin-top: 12px; cursor: pointer; font-size: 14px;
}
.hgi-login-card input[type="submit"]:hover { background: var(--hgi-red-dark); }
.hgi-login-forgot { margin-top: 14px; font-size: 13px; }
.hgi-login-forgot a { color: var(--hgi-slate); }
.hgi-portal--message { padding: 32px; text-align: center; color: var(--hgi-slate); }
.hgi-loading { padding: 32px; text-align: center; color: var(--hgi-slate); }

/* ---------- Portal shell ---------- */
.hgi-app { display: flex; min-height: 480px; border: 1px solid var(--hgi-hairline); border-radius: 16px; overflow: hidden; background: var(--hgi-canvas); box-shadow: 0 1px 2px rgba(20,21,26,.04), 0 12px 32px rgba(20,21,26,.06); }
.hgi-sidebar { width: 250px; flex-shrink: 0; background: var(--hgi-red); border-right: 1px solid var(--hgi-hairline); display: flex; flex-direction: column; transition: width .15s ease; }
.hgi-app.hgi-nav-collapsed .hgi-sidebar { width: 14px; overflow: hidden; border-right-color: var(--hgi-hairline); cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .hgi-app.hgi-nav-collapsed .hgi-sidebar:hover {
    width: 250px; overflow: visible; position: relative; z-index: 60;
    box-shadow: 4px 0 16px rgba(0,0,0,.12);
  }
}
@media (hover: none), (pointer: coarse) {
  /* Touch devices (tablets included) don't have a reliable hover state,
     and the 14px collapsed strip is far too small to tap accurately —
     tapping it is wired up in JS to expand the nav outright instead of
     relying on a hover-peek, and it's widened here to a realistic touch
     target so that tap actually lands. */
  .hgi-app.hgi-nav-collapsed .hgi-sidebar { width: 28px; }
}
.hgi-nav-collapse-toggle { font-weight: 700; font-size: 15px; padding: 8px 12px; margin-left: auto; }
.hgi-sidebar-header { padding: 18px; border-bottom: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; gap: 10px; }
.hgi-sidebar-logo { width: 40px; height: auto; flex-shrink: 0; }
.hgi-sidebar-header .hgi-title { font-weight: 700; font-size: 16px; line-height: 1.25; color: #fff; }
.hgi-sidebar-header .hgi-sub { font-size: 13px; color: rgba(255,255,255,.8); }
.hgi-nav { flex: 1; padding: 10px 12px; }
.hgi-nav button {
  width: 100%; text-align: left; background: none; border: none;
  padding: 11px 16px; font-size: 15px; font-weight: 500; color: #fff; cursor: pointer;
  display: flex; align-items: center; gap: 8px; border-radius: 10px; margin-bottom: 2px; transition: background .12s;
}
.hgi-nav button:hover { background: rgba(255,255,255,.14); }
.hgi-nav button.active { color: var(--hgi-red-dark); background: #fff; font-weight: 700; }
.hgi-mobile-nav-list { display: flex; flex-direction: column; padding: 6px 4px; }
.hgi-mobile-nav-list button {
  width: 100%; text-align: left; background: none; border: none;
  padding: 12px 16px; font-size: 16px; font-weight: 500; color: var(--hgi-ink); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 10px; margin-bottom: 2px;
}
.hgi-mobile-nav-list button.active { color: var(--hgi-red); background: #FBE3E4; font-weight: 700; }
.hgi-nav-group-toggle {
  width: 100%; text-align: left; background: none; border: none; padding: 11px 16px; font-size: 15px;
  font-weight: 500; color: #fff; cursor: pointer; display: flex; align-items: center; gap: 8px;
  border-radius: 10px; margin-bottom: 2px; transition: background .12s;
}
.hgi-nav-group-toggle:hover { background: rgba(255,255,255,.14); }
.hgi-nav-group-toggle span:first-child { flex: 1; }
.hgi-nav-group-arrow { font-size: 15px; color: #fff; font-weight: 700; }
.hgi-nav-group-children { display: none; padding-left: 14px; }
.hgi-nav-group-children.open { display: block; }
.hgi-nav-group:hover .hgi-nav-group-children { display: block; }
.hgi-nav-group-children button { font-size: 14px; }
.hgi-shift-chip {
  padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
  cursor: grab; user-select: none; border: 1px solid rgba(0,0,0,.06);
}
.hgi-shift-chip:active { cursor: grabbing; }
.hgi-sidebar-footer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.2); }
.hgi-sidebar-footer .hgi-user { font-size: 15px; font-weight: 600; color: #fff; }
.hgi-sidebar-footer .hgi-role { font-size: 13px; color: rgba(255,255,255,.75); text-transform: capitalize; margin-bottom: 8px; }
.hgi-sidebar-footer a { font-size: 14px; font-weight: 600; color: #fff; text-decoration: underline; }
.hgi-main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hgi-main { flex: 1; min-width: 0; padding: 28px 28px 90px; overflow-x: auto; }
.hgi-trial-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 28px; background: #FCF3E0; border-bottom: 1px solid #EBD9AE; color: #6B4E10; font-size: 13px;
}
.hgi-trial-banner-urgent { background: #FBEEEF; border-bottom-color: #F2C2C8; color: var(--hgi-red-dark); }
.hgi-shell { max-width: 1900px; margin: 0 auto; }
.hgi-topbar-unified {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap;
  background: var(--hgi-canvas); border: 1px solid var(--hgi-hairline); border-radius: 16px;
  padding: 14px 22px; margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(20,21,26,.04), 0 8px 24px rgba(20,21,26,.05);
}
.hgi-topbar-brand { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
.hgi-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.hgi-topbar-title { font-size: 20px; font-weight: 800; color: var(--hgi-red); text-align: center; flex: 0 0 auto; }
.hgi-topbar-title img { height: 40px; width: auto; }
.hgi-topbar-right {
  display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
  flex-wrap: nowrap; justify-content: flex-end; overflow-x: auto; scrollbar-width: none;
}
.hgi-topbar-right::-webkit-scrollbar { display: none; }
.hgi-topbar-right button, .hgi-topbar-right a.hgi-btn { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.hgi-topbar-user { font-size: 13px; color: var(--hgi-ink); white-space: nowrap; }
.hgi-topbar-mobile-user { display: none; }
#hgi-property-selector { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; order: -1; }

@media (max-width: 1280px) {
  .hgi-topbar-right .hgi-btn-label { display: none; }
  .hgi-topbar-right button, .hgi-topbar-right a.hgi-btn { padding: 6px 8px; }
  .hgi-topbar-title img { height: 32px; }
}

/* ---------- Generic UI atoms ---------- */
.hgi-h1 { font-size: 26px; font-weight: 700; margin: 0 0 16px; }
.hgi-card { background: #fff; border: 1px solid var(--hgi-hairline); border-radius: 14px; box-shadow: 0 1px 2px rgba(20,21,26,.03), 0 4px 16px rgba(20,21,26,.04); }
.hgi-keys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
@media (max-width: 640px) { .hgi-keys-grid { grid-template-columns: 1fr; } }
.hgi-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.hgi-dash-card { border-radius: 14px; padding: 16px; }
@media (max-width: 640px) { .hgi-dash-grid { grid-template-columns: repeat(2, 1fr); } }
.hgi-card-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--hgi-hairline); font-weight: 700; font-size: 17px; }
.hgi-card-body { padding: 22px; }
.hgi-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hgi-hairline); }

/* ---------- Communication Log ---------- */
.hgi-comm-row {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--hgi-hairline);
  border-left: 3px solid transparent; cursor: pointer; transition: background .12s, border-left-color .12s;
}
.hgi-comm-row:last-child { border-bottom: none; }
.hgi-comm-row:hover { background: var(--hgi-canvas); }
.hgi-comm-row--unread { background: #FBEEEF; }
.hgi-comm-row--unread:hover { background: #F7E4E5; }
.hgi-comm-row--frontdesk { border-left-color: var(--hgi-dept-frontdesk); }
.hgi-comm-row--housekeeping { border-left-color: var(--hgi-dept-housekeeping); }
.hgi-comm-row--fnb { border-left-color: var(--hgi-dept-fnb); }
.hgi-comm-row--sales { border-left-color: var(--hgi-dept-sales); }
.hgi-comm-row--all { border-left-color: var(--hgi-hairline); }
.hgi-comm-row--private { border-left-color: var(--hgi-slate); }
.hgi-comm-avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--hgi-ink); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.hgi-comm-dept-tag {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 4px; color: #fff; margin-right: 6px; vertical-align: middle;
}
.hgi-comm-dept-tag--frontdesk { background: var(--hgi-dept-frontdesk); }
.hgi-comm-dept-tag--housekeeping { background: var(--hgi-dept-housekeeping); }
.hgi-comm-dept-tag--fnb { background: var(--hgi-dept-fnb); }
.hgi-comm-dept-tag--sales { background: var(--hgi-dept-sales); }
.hgi-comm-dept-tag--private { background: var(--hgi-slate); }
.hgi-comm-btn-short { display: none; }
.hgi-comm-thumb { transition: opacity .12s; }
.hgi-comm-thumb:hover { opacity: .85; }
@media (max-width: 980px) {
  .hgi-comm-btn-full { display: none; }
  .hgi-comm-btn-short { display: inline; }
}
.hgi-row:last-child { border-bottom: none; }
.hgi-row-tinted { border-bottom: none !important; border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; }
.hgi-sched-cell-remove {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; line-height: 14px;
  border-radius: 50%; border: 1px solid var(--hgi-hairline); background: #fff; color: var(--hgi-slate);
  font-size: 12px; padding: 0; cursor: pointer; opacity: 0; transition: opacity .12s;
}
td:hover > .hgi-sched-cell-remove { opacity: 1; }
.hgi-sched-cell-remove:hover { background: #FBE3E4; color: var(--hgi-red-dark); border-color: transparent; }
.hgi-work-card { border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.hgi-work-card-compact { padding: 8px 12px; max-width: 280px; }
.hgi-work-card-compact .hgi-work-card-name { font-size: 14px; margin-top: 0; }
.hgi-work-card-compact .hgi-work-card-time { font-size: 12px; margin-top: 1px; }
.hgi-work-card-compact .hgi-work-card-sub { font-size: 12px; }
.hgi-work-card:last-child { margin-bottom: 0; }
.hgi-work-card-time { font-weight: 700; font-size: 13px; opacity: .85; }
.hgi-work-card-name { font-weight: 800; font-size: 16px; margin-top: 2px; }
.hgi-work-card-sub { font-size: 13px; opacity: .85; margin-top: 1px; }
.hgi-row-tinted:last-child { margin-bottom: 0; }
.hgi-btn {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; font-size: 14px; font-weight: 600;
  padding: 9px 16px; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.hgi-btn:active { transform: translateY(1px); }
.hgi-btn-primary { background: var(--hgi-red); color: #fff; box-shadow: 0 2px 8px rgba(166,25,46,.25); }
.hgi-btn-primary:hover { background: var(--hgi-red-dark); }
.hgi-btn-secondary { background: #fff; color: var(--hgi-ink); border-color: var(--hgi-hairline); }
.hgi-btn-secondary:hover { background: var(--hgi-canvas); border-color: #d8d6d3; }
.hgi-btn-danger { background: #FBE3E4; color: var(--hgi-red-dark); }
.hgi-btn-danger:hover { background: #f6cdd0; }
.hgi-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .2px; background: #EEEDEB; text-transform: capitalize; }
.hgi-badge--scheduled-today { background: #EDE7F6; color: #4A2E8A; }
.hgi-badge-admin { background: #FBE3E4; color: var(--hgi-red-dark); }

/* ---------- Status filter tabs ---------- */
.hgi-status-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.hgi-status-tab {
  border: 1px solid var(--hgi-hairline); background: #fff; color: var(--hgi-slate);
  border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 6px; transition: all .12s;
}
.hgi-status-tab-count { background: rgba(0,0,0,.06); border-radius: 999px; padding: 1px 7px; font-size: 11px; }
.hgi-status-tab-all.active { background: var(--hgi-ink); color: #fff; border-color: var(--hgi-ink); }
.hgi-status-tab-all.active .hgi-status-tab-count { background: rgba(255,255,255,.2); }
.hgi-status-tab-pending.active { background: #FCEFD8; color: #8A5A11; border-color: #f0d9a8; }
.hgi-status-tab-approved.active { background: #E1F0E4; color: #276B41; border-color: #b9dcc2; }
.hgi-status-tab-denied.active { background: #FBE3E4; color: #7E1322; border-color: #f2c2c8; }
.hgi-status-tab-unread.active { background: var(--hgi-red); color: #fff; border-color: var(--hgi-red); }
.hgi-status-tab-unread.active .hgi-status-tab-count { background: rgba(255,255,255,.25); }
.hgi-status-tab-dashboard.active, .hgi-status-tab-plans.active { background: var(--hgi-ink); color: #fff; border-color: var(--hgi-ink); }
.hgi-field { display: block; margin-bottom: 12px; }
.hgi-field label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--hgi-slate); margin-bottom: 6px; }
.hgi-field input, .hgi-field select, .hgi-field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--hgi-hairline); border-radius: 6px; font-size: 16px;
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.hgi-field input:focus, .hgi-field select:focus, .hgi-field textarea:focus {
  outline: none; border-color: var(--hgi-red); box-shadow: 0 0 0 3px rgba(166,25,46,0.12);
}
.hgi-field input[type="checkbox"] { width: auto; accent-color: var(--hgi-red); }
input[type="checkbox"] { accent-color: var(--hgi-red); width: 16px; height: 16px; }
.hgi-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.hgi-modal-overlay {
  position: fixed; inset: 0; background: rgba(30,28,26,.5); display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 16px; animation: hgi-fade-in .12s ease-out;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--hgi-ink); font-size: 16px; line-height: 1.55;
}
@keyframes hgi-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hgi-pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.hgi-modal {
  background: #fff; border-radius: 12px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; overflow-x: hidden;
  box-shadow: 0 24px 64px rgba(30,28,26,.35), 0 2px 8px rgba(30,28,26,.1);
  animation: hgi-pop-in .16s cubic-bezier(.2,.9,.3,1.2);
}
.hgi-modal.wide { max-width: 640px; }
.hgi-modal.xwide { max-width: 920px; max-height: 94vh; }
.hgi-modal-header {
  display: flex; align-items: center; justify-content: space-between; padding: 18px 22px;
  border-bottom: 3px solid var(--hgi-red); font-weight: 700; font-size: 16px; position: sticky; top: 0; background: #fff; z-index: 1;
}
.hgi-modal-body { padding: 22px; }
.hgi-modal-close {
  background: var(--hgi-canvas); border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 16px;
  cursor: pointer; color: var(--hgi-slate); line-height: 1; transition: background .15s;
}
.hgi-modal-close:hover { background: var(--hgi-hairline); }
.hgi-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hgi-hairline); }
.hgi-empty { color: var(--hgi-slate); font-size: 13px; padding: 16px 0; text-align: center; }
.hgi-error { background: #FBE3E4; color: var(--hgi-red-dark); border-radius: 6px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
.hgi-muted { color: var(--hgi-slate); font-size: 14px; }

/* ---------- Full-bleed, distraction-free layout for the portal page ---------- */
/* Hides the theme's header/footer nav (site title, other page links) only on
   the page that actually contains the portal, and lets the app use the full
   page width instead of sitting in the theme's narrow blog-post column. */
body:has(.hgi-portal) header,
body:has(.hgi-portal) .site-header,
body:has(.hgi-portal) footer,
body:has(.hgi-portal) .site-footer {
  display: none !important;
}
body:has(.hgi-portal) .wp-site-blocks,
body:has(.hgi-portal) main,
body:has(.hgi-portal) .entry-content {
  max-width: 100% !important; padding: 0 !important; margin: 0 !important;
}
#hgi-portal-root {
  width: 100vw; max-width: 100vw; box-sizing: border-box;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 0 0 24px;
}
.hgi-app { min-height: 760px; }
.hgi-app-footer { max-width: 1900px; margin: 14px auto 0; text-align: center; font-size: 13px; color: var(--hgi-red); font-weight: 700; }

/* ---------- Hide the theme page title above the portal ---------- */
/* Targets any H1 on a page containing the portal, EXCEPT our own in-app
   section headers (which all use .hgi-h1). We now render our own "Staff
   Portal" label inline in the unified top bar, so the theme's separate
   title would just be a duplicate sitting in the wrong place. */
body:has(.hgi-portal) h1:not(.hgi-h1) {
  display: none !important;
}
/* Block themes often wrap the title in a narrower "constrained" column with
   its own max-width — override that too, or centering the text happens
   inside a column that isn't centered the same way the app below it is. */
body:has(.hgi-portal) main > .wp-block-group {
  max-width: none !important;
}
/* Collapse the theme's top spacing above the title/content. Confirmed from
   the actual page markup: this specific block theme puts an inline
   margin-top on <main> and an inline padding-top on the wp-block-group div
   that directly wraps the title — neither was caught by generic selectors,
   so they're targeted precisely here (kept alongside broader fallbacks for
   safety on other pages/themes). */
body:has(.hgi-portal) { margin-top: 0 !important; padding-top: 0 !important; overflow-x: hidden; }
body:has(.hgi-portal) main {
  margin-top: 0 !important;
}
body:has(.hgi-portal) main > .wp-block-group,
body:has(.hgi-portal) .wp-block-post-title {
  padding-top: 0 !important; margin-top: 0 !important;
}
body:has(.hgi-portal) .entry-header,
body:has(.hgi-portal) .wp-site-blocks,
body:has(.hgi-portal) #page,
body:has(.hgi-portal) #content,
body:has(.hgi-portal) #primary,
body:has(.hgi-portal) .site-content,
body:has(.hgi-portal) .content-area,
body:has(.hgi-portal) article {
  margin-top: 0 !important; padding-top: 0 !important;
}
body:has(.hgi-portal) h1:not(.hgi-h1) {
  margin-top: 0 !important; padding-top: 16px !important;
}

/* ---------- Mobile (phones / narrow tablets) ---------- */
.hgi-nav-toggle { display: none; }
.hgi-nav button[data-view] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hgi-nav-badge {
  background: #fff; color: var(--hgi-red); font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 999px; min-width: 18px; text-align: center;
}
.hgi-nav button.active .hgi-nav-badge { background: var(--hgi-red); color: #fff; }
.hgi-unread-dot {
  position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--hgi-red); border-radius: 10px; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--hgi-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff; line-height: 1;
  animation: hgi-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes hgi-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--hgi-red), 0 0 0 0 rgba(166, 25, 46, .55); }
  50% { box-shadow: 0 0 0 1px var(--hgi-red), 0 0 0 5px rgba(166, 25, 46, 0); }
}
#hgi-unread-dot-brand { top: -6px; left: 30px; right: auto; }

/* ---------- Bottom-right unread toast ---------- */
.hgi-toast {
  position: fixed; bottom: 24px; right: 24px; max-width: 340px; z-index: 10000;
  background: #fff; border-radius: 14px; border-left: 5px solid var(--hgi-red);
  box-shadow: 0 16px 40px rgba(20,21,26,.2), 0 2px 10px rgba(20,21,26,.08);
  padding: 18px 40px 18px 18px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  animation: hgi-toast-in .2s ease-out;
}
@keyframes hgi-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.hgi-toast-badge {
  display: inline-block; background: #FCEFD8; color: #8A5A11; font-weight: 800; font-size: 11px;
  letter-spacing: .6px; padding: 4px 11px; border-radius: 999px; margin-bottom: 10px;
}
.hgi-toast-msg { font-size: 15px; color: var(--hgi-ink); font-weight: 600; line-height: 1.4; }
.hgi-toast-close {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--hgi-hairline); background: #fff; color: var(--hgi-slate); cursor: pointer; font-size: 15px; line-height: 1;
}
.hgi-toast-close:hover { background: var(--hgi-canvas); }
@media (max-width: 560px) {
  .hgi-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

@media (max-width: 560px) {
  .hgi-topbar-unified { padding: 12px 14px; border-radius: 12px; flex-wrap: wrap; row-gap: 8px; }
  .hgi-nav-collapse-toggle { display: none; }
  .hgi-topbar-title {
    display: inline-flex !important; justify-content: flex-start !important;
    order: 1; flex: 0 0 auto;
  }
  .hgi-topbar-title img { height: 26px !important; }
  .hgi-topbar-mobile-user {
    display: flex !important; align-items: center; gap: 10px; font-size: 13px;
    order: 2; margin-left: auto;
  }
  .hgi-topbar-mobile-user a { color: var(--hgi-red); text-decoration: none; font-weight: 600; }
  .hgi-nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--hgi-hairline);
    background: #fff; font-size: 18px; cursor: pointer; flex-shrink: 0;
    order: 3;
  }
  .hgi-nav-collapse-toggle { order: 3; }
  .hgi-topbar-break { flex-basis: 100%; height: 0; order: 4; }
  .hgi-topbar-brand { order: 5; }
  .hgi-topbar-right { display: none; }
  .hgi-app { flex-direction: column; border-radius: 8px; min-height: 0; overflow: visible; }
  .hgi-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--hgi-hairline); position: relative; }
  .hgi-app.hgi-nav-collapsed .hgi-sidebar { width: 100%; overflow: visible; }
  .hgi-sidebar-header { padding: 14px; position: relative; }
  .hgi-nav { display: none !important; }
  .hgi-nav button {
    border-radius: 10px; padding: 12px 16px;
  }
  .hgi-nav button.active { background: #FBE3E4; }
  .hgi-sidebar-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
  .hgi-main { padding: 16px 16px 90px; }
  .hgi-h1 { font-size: 17px; }
  .hgi-grid-2 { grid-template-columns: 1fr; }
  .hgi-row { flex-wrap: wrap; }
  .hgi-modal-overlay { padding: 0; align-items: flex-end; }
  .hgi-modal, .hgi-modal.wide { max-width: 100%; width: 100%; border-radius: 14px 14px 0 0; max-height: 94vh; }
  .hgi-modal-actions .hgi-btn { flex: 1 1 auto; justify-content: center; }
  .hgi-cal-grid, .hgi-cal-grid-month { grid-template-columns: repeat(2, 1fr); }
  .hgi-cal-grid-day { max-width: 100%; }
}

/* ---------- Printing ---------- */
.hgi-print-sheet { display: none; }
@page { margin: 0; }
@media print {
  body * { visibility: hidden; height: 0 !important; overflow: hidden !important; }
  .hgi-print-sheet, .hgi-print-sheet * { visibility: visible; height: auto !important; overflow: visible !important; }
  .hgi-print-sheet, .hgi-print-sheet * {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact;
  }
  .hgi-print-sheet {
    display: block !important; position: absolute; top: 0; left: 0; width: 100%;
    padding: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #14151A; box-sizing: border-box;
  }
  .hgi-print-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; border-bottom: 4px solid #A6192E; padding-bottom: 6px; margin-bottom: 8px; }
  .hgi-print-header::before {
    content: ""; display: block; flex-basis: 100%; background-image: url(../images/groundcrew-logo.png);
    background-size: contain; background-repeat: no-repeat; background-position: center;
    width: 100%; height: 32px; margin-bottom: 6px;
  }
  .hgi-print-brand { font-weight: 700; font-size: 16px; }
  .hgi-print-title { color: #494B54; font-size: 13px; font-weight: 700; margin-top: 2px; }
  .hgi-print-meta { font-size: 14px; color: #14151A; text-align: right; }
  .hgi-print-table { width: 100%; border-collapse: collapse; font-size: 12px; border: 2px solid #000; }
  .hgi-print-table th { text-align: left; border-bottom: 2px solid #14151A; border-right: 1px solid #999; padding: 5px 10px 5px 6px; }
  .hgi-print-table th:last-child { border-right: none; }
  .hgi-print-table td { border-bottom: 1px solid #000; border-right: 1px solid #999; padding: 4px 8px 4px 6px; vertical-align: top; }
  .hgi-print-table td:last-child { border-right: none; }
  .hgi-print-page-break { page-break-after: always; break-after: page; }
  .hgi-print-empty { color: #494B54; text-align: center; padding: 16px 0; }
  .hgi-print-sched-table th, .hgi-print-sched-table td { text-align: center; border-right: 1px solid #000; }
  .hgi-print-sched-table tr { page-break-inside: avoid; }
  .hgi-print-sched-table th:first-child, .hgi-print-sched-table td:first-child { text-align: center; background: #F0EFEC; }
  .hgi-print-sched-table th { background: #E4E2DD; }
  .hgi-print-sched-table th:last-child, .hgi-print-sched-table td:last-child { border-right: none; }
  .hgi-print-sched-table tfoot td { border-top: 2px solid #14151A; border-bottom: none; }
  .hgi-print-sched-table tfoot td:first-child { background: #E4E2DD; }
  .hgi-print-emp-total { font-size: 11px; color: #494B54; font-weight: 600; }
  .hgi-print-emp-position { font-size: 11px; color: #494B54; }
  .hgi-print-sched-days-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
  .hgi-print-sched-day { break-inside: avoid; border: 1px solid #000; border-radius: 6px; overflow: hidden; }
  .hgi-print-sched-day-header { text-align: center; padding: 7px 5px; background: #F7F6F4; font-size: 12px; border-bottom: 2px solid #000; }
  .hgi-print-sched-weekday, .hgi-print-sched-date { font-weight: 800; color: #A6192E; }
  .hgi-print-sched-total { display: block; color: #14151A; font-weight: 700; margin-top: 1px; }
  .hgi-print-sched-cards { padding: 3px; }
  .hgi-print-sched-card { text-align: center; padding: 7px 5px; margin-bottom: 3px; border-radius: 3px; border: 1px solid #000; }
  .hgi-print-sched-card-time { font-weight: 800; font-size: 12px; }
  .hgi-print-sched-card-sub { font-size: 11px; color: #494B54; margin-top: 2px; }
}

/* Mirrors the .hgi-print-* visual styling above for on-screen preview —
   those rules only apply inside @media print, so without this, a preview
   modal showing the same markup on-screen would render completely
   unstyled (no table borders, no sizing) even though the real print
   output looks correct. Kept as a separate block rather than editing the
   print rules above, so nothing about actual printing changes. */
.hgi-preview-content .hgi-print-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; border-bottom: 4px solid #A6192E; padding-bottom: 6px; margin-bottom: 8px; }
.hgi-preview-content .hgi-print-header::before {
  content: ""; display: block; flex-basis: 100%; background-image: url(../images/groundcrew-logo.png);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  width: 100%; height: 32px; margin-bottom: 6px;
}
.hgi-preview-content .hgi-print-brand { font-weight: 700; font-size: 16px; }
.hgi-preview-content .hgi-print-title { color: #494B54; font-size: 13px; font-weight: 700; margin-top: 2px; }
.hgi-preview-content .hgi-print-meta { font-size: 14px; color: #14151A; text-align: right; }
.hgi-preview-content .hgi-print-table { width: 100%; border-collapse: collapse; font-size: 12px; border: 2px solid #000; }
.hgi-preview-content .hgi-print-table th { text-align: left; border-bottom: 2px solid #14151A; border-right: 1px solid #999; padding: 5px 10px 5px 6px; }
.hgi-preview-content .hgi-print-table th:last-child { border-right: none; }
.hgi-preview-content .hgi-print-table td { border-bottom: 1px solid #000; border-right: 1px solid #999; padding: 4px 8px 4px 6px; vertical-align: top; }
.hgi-preview-content .hgi-print-table td:last-child { border-right: none; }

/* ---------- Weekly Calendar ---------- */
.hgi-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.hgi-cal-grid-day { display: block; width: 100%; max-width: 420px; margin: 0 auto; box-sizing: border-box; }
.hgi-day-columns { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.hgi-day-columns .hgi-cal-grid-day { margin: 0; flex-shrink: 0; }
.hgi-cal-grid-day .hgi-cal-day { min-height: 260px; padding: 20px; width: 100%; box-sizing: border-box; }
.hgi-cal-grid-day .hgi-cal-date { font-size: 32px; }
.hgi-cal-grid-day .hgi-cal-chip { font-size: 13px; padding: 6px 10px; margin-bottom: 8px; }
.hgi-cal-day { background: #fff; border: 1px solid var(--hgi-hairline); border-radius: 8px; padding: 10px; min-height: 130px; }
.hgi-cal-today-cell { border-color: var(--hgi-red); border-width: 2px; }
.hgi-cal-weekday { font-size: 11px; text-transform: uppercase; color: var(--hgi-slate); font-weight: 600; }
.hgi-cal-date { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.hgi-cal-chip { font-size: 11px; font-weight: 600; padding: 3px 6px; border-radius: 6px; margin-bottom: 4px; background: #EEEDEB; }
.hgi-cal-chip-vacation { background: #E1F0E4; color: #276B41; }
.hgi-cal-chip-pto { background: #DCEAFB; color: #1D4E89; }
.hgi-cal-chip-timeoff { background: #EEEDEB; color: var(--hgi-ink); }
.hgi-cal-chip-att { background: #FCEFD8; color: #8A5A11; }
.hgi-cal-day-small { min-height: 90px; padding: 6px; }
.hgi-cal-day-small .hgi-cal-date { font-size: 14px; margin-bottom: 4px; }
.hgi-cal-day-small .hgi-cal-chip { font-size: 10px; padding: 2px 4px; }
.hgi-cal-day-blank { background: transparent; border: none; min-height: 90px; }
.hgi-cal-grid-month { grid-template-columns: repeat(7, 1fr); }

/* ---------- Time Off Request Form (preview + print share this) ---------- */
.hgi-formdoc-table { width: 100%; border-collapse: collapse; margin-bottom: 28px; }
.hgi-formdoc-table td { padding: 8px 10px; border-bottom: 1px solid var(--hgi-hairline); font-size: 14px; vertical-align: top; }
.hgi-formdoc-table td:first-child { font-weight: 600; width: 170px; color: var(--hgi-slate); }
.hgi-formdoc-policy { margin-bottom: 24px; }
.hgi-formdoc-policy p { font-size: 12px; line-height: 1.5; color: var(--hgi-slate); margin: 0 0 10px; }
.hgi-formdoc-sig-row { display: flex; gap: 24px; flex-wrap: wrap; }
.hgi-formdoc-sig { flex: 1; min-width: 180px; font-size: 12px; color: var(--hgi-slate); }
.hgi-formdoc-sig-line { border-bottom: 1px solid var(--hgi-ink); height: 44px; margin: 20px 0 6px; }
.hgi-formdoc-sig-date-line { border-bottom: 1px solid var(--hgi-ink); height: 44px; margin: 26px 0 6px; max-width: 160px; }
.hgi-formdoc-section { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; background: #F0EFEC; padding: 6px 10px; margin: 18px 0 10px; border-left: 4px solid var(--hgi-red); }
.hgi-formdoc-section:first-of-type { margin-top: 4px; }
.hgi-formdoc-hint { font-size: 11px; color: var(--hgi-slate); font-style: italic; margin: -6px 0 8px; }
.hgi-formdoc-reasons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 16px; margin-bottom: 10px; }
.hgi-formdoc-reason { font-size: 13px; display: flex; align-items: baseline; gap: 6px; }
.hgi-formdoc-block { font-size: 13px; line-height: 1.6; border: 1px solid var(--hgi-hairline); border-radius: 6px; padding: 10px; min-height: 50px; margin-bottom: 12px; white-space: pre-wrap; }
.hgi-formdoc-ack { font-size: 11.5px; line-height: 1.6; color: var(--hgi-slate); margin-bottom: 14px; }

.hgi-kb-rendered a { color: var(--hgi-red-dark); text-decoration: underline; }
.hgi-kb-rendered ul, .hgi-kb-rendered ol { margin: 4px 0 4px 20px; padding: 0; }
.hgi-kb-rendered p { margin: 0 0 6px; }
.hgi-kb-rendered img { max-width: 100%; border-radius: 6px; }
.hgi-kb-rendered table { border-collapse: collapse; margin: 8px 0; }
.hgi-kb-rendered table td, .hgi-kb-rendered table th { border: 1px solid var(--hgi-hairline); padding: 6px 10px; }

.hgi-fb-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.hgi-fb-metric { background: #fff; border: 1px solid var(--hgi-hairline); border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(20,21,26,.04); }
.hgi-fb-metric-label { font-size: 12px; color: var(--hgi-slate); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.hgi-fb-metric-value { font-size: 32px; font-weight: 800; color: var(--hgi-ink); margin-top: 4px; }
.hgi-fb-metric-value.hgi-fb-accent { color: var(--hgi-red); }
.hgi-fb-section-title { font-size: 18px; font-weight: 800; margin: 28px 0 14px; display: flex; align-items: center; gap: 8px; }
.hgi-fb-cards { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 14px; padding-bottom: 4px; }
.hgi-fb-card { flex: 0 0 260px; }
.hgi-fb-card { background: linear-gradient(135deg, #FFF9F0, #fff); border: 1px solid #F0E4C8; border-radius: 12px; padding: 16px; position: relative; }
.hgi-fb-card-stars { color: #E8A33D; font-size: 14px; letter-spacing: 2px; }
.hgi-fb-card-quote { font-size: 13.5px; font-style: italic; color: var(--hgi-ink); margin: 8px 0; line-height: 1.5; }
.hgi-fb-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--hgi-red); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.hgi-fb-card-emp { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.hgi-fb-dept-group { margin-bottom: 22px; }
.hgi-fb-dept-label { font-weight: 700; font-size: 13px; color: var(--hgi-slate); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.hgi-fb-severity { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.hgi-fb-severity-low { background: #E3F2E8; color: #1E6B3C; }
.hgi-fb-severity-medium { background: #FCEFD8; color: #8A5A00; }
.hgi-fb-severity-high { background: #FDE0D0; color: #A3401A; }
.hgi-fb-severity-critical { background: #FBE3E4; color: #7E1322; }
.hgi-fb-status { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.hgi-fb-status-open { background: #FBE3E4; color: #7E1322; }
.hgi-fb-status-in_progress { background: #FCEFD8; color: #8A5A00; }
.hgi-fb-status-closed { background: #EEEDEB; color: var(--hgi-slate); }
/* Kept for Walkthroughs, which independently borrows these two class names for its
   own (unrelated) status badge styling — Guest Feedback itself no longer uses them. */
.hgi-fb-status-under_investigation { background: #FCEFD8; color: #8A5A00; }
.hgi-fb-status-resolved { background: #E3F2E8; color: #1E6B3C; }
.hgi-fb-cat-bar-track { background: #EEEDEB; border-radius: 6px; height: 8px; width: 100%; overflow: hidden; }
.hgi-fb-cat-bar-fill { background: var(--hgi-red); height: 100%; border-radius: 6px; }
@keyframes hgi-confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(600deg); opacity: 0; }
}
.hgi-wo-pick-box { transition: transform .1s ease, box-shadow .1s ease; }
.hgi-wo-pick-box:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.hgi-wo-pick-box:active { transform: translateY(0); box-shadow: none; }

/* Chat widget — a persistent, floating, minimize/expand widget (like a
   real website chat), not a full page. Fixed to the viewport so it stays
   in the same spot regardless of scroll or which page is showing. */
#hgi-chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 500; font-family: inherit; }
.hgi-chat-bubble { width: 56px; height: 56px; border-radius: 50%; background: var(--hgi-ink); color: #fff; border: none; box-shadow: 0 4px 14px rgba(0,0,0,0.25); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 24px; position: relative; }
.hgi-chat-bubble:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.3); }
.hgi-chat-bubble-badge { position: absolute; top: -4px; right: -4px; background: #7E1322; color: #fff; border-radius: 10px; min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.hgi-chat-panel { position: relative; width: 420px; height: 500px; max-height: 74vh; background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.28); display: flex; flex-direction: column; overflow: hidden; }
.hgi-chat-panel-header { background: var(--hgi-ink); color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; flex-shrink: 0; cursor: grab; }
.hgi-chat-panel-header:active { cursor: grabbing; }
.hgi-chat-panel-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.hgi-chat-channel-list { flex: 1; overflow-y: auto; }
.hgi-chat-channel { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--hgi-hairline); }
.hgi-chat-channel:hover { background: #F0EFEA; }
.hgi-chat-channel-info { flex: 1; min-width: 0; }
.hgi-chat-channel-label { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hgi-chat-channel-preview { font-size: 11px; color: var(--hgi-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.hgi-chat-channel-badge { flex-shrink: 0; background: #7E1322; color: #fff; border-radius: 10px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.hgi-chat-messages { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.hgi-chat-bubble-row { display: flex; flex-direction: column; max-width: 88%; }
.hgi-chat-bubble-row.mine { align-self: flex-end; align-items: flex-end; }
.hgi-chat-bubble-row.theirs { align-self: flex-start; align-items: flex-start; }
.hgi-chat-bubble-row .hgi-chat-bubble { position: relative; width: max-content; max-width: 100%; min-width: 0; height: auto; display: inline-block; padding: 3px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.hgi-chat-bubble-row.mine .hgi-chat-bubble { background: #1A5FB4; color: #fff; border-bottom-right-radius: 3px; }
.hgi-chat-bubble-row.theirs .hgi-chat-bubble { background: #F4EEE3; color: #1A1A1A; border-bottom-left-radius: 3px; }
.hgi-chat-bubble-meta { font-size: 9px; color: var(--hgi-slate); margin-top: 2px; padding: 0 4px; }
.hgi-chat-compose { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--hgi-hairline); flex-shrink: 0; align-items: flex-end; }
.hgi-chat-attach-btn { background: none; border: none; font-size: 20px; cursor: pointer; padding: 4px 2px; line-height: 1; flex-shrink: 0; }
.hgi-chat-attach-btn:disabled { opacity: 0.4; cursor: default; }
.hgi-chat-pending-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; }
.hgi-chat-pending-attachments:not(:empty) { padding-top: 8px; }
.hgi-chat-pending-item { position: relative; }
.hgi-chat-pending-remove { position: absolute; top: -6px; right: -6px; background: #7E1322; color: #fff; border: none; border-radius: 50%; width: 16px; height: 16px; font-size: 10px; cursor: pointer; line-height: 1; }
.hgi-chat-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hgi-chat-delete-msg { position: absolute; top: -6px; right: -6px; background: #fff; border: 1px solid var(--hgi-hairline); border-radius: 50%; width: 20px; height: 20px; cursor: pointer; font-size: 10px; padding: 0; opacity: 0.5; display: flex; align-items: center; justify-content: center; }
.hgi-chat-delete-msg.mine { right: auto; left: -6px; }
.hgi-chat-delete-msg:hover { opacity: 1; }
.hgi-chat-delete-msg.hgi-chat-delete-msg-standalone { position: static; width: auto; height: auto; border: none; border-radius: 0; background: none; font-size: 11px; color: var(--hgi-slate); display: inline; padding: 2px 0; }
.hgi-chat-compose textarea { flex: 1; min-width: 0; resize: vertical; border: 1px solid var(--hgi-hairline); border-radius: 8px; padding: 7px 9px; font-size: 13px; font-family: inherit; max-height: 220px; overflow-y: auto; }

/* Toast alerts — the "just like real chat" incoming-message notice,
   stacked above the bubble so more than one can show at once. */
.hgi-chat-toast-stack { position: absolute; bottom: 66px; right: 0; display: flex; flex-direction: column-reverse; gap: 8px; align-items: flex-end; }
.hgi-chat-toast { width: 260px; background: #fff; border-radius: 10px; border-left: 4px solid #7E1322; box-shadow: 0 6px 20px rgba(0,0,0,0.22); padding: 10px 12px; cursor: pointer; animation: hgi-chat-toast-in 0.2s ease; }
.hgi-chat-toast:hover { transform: translateY(-1px); }
.hgi-chat-toast-out { animation: hgi-chat-toast-out 0.3s ease forwards; }
.hgi-chat-toast-label { font-weight: 700; font-size: 12px; margin-bottom: 2px; }
.hgi-chat-toast-preview { font-size: 12px; color: var(--hgi-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes hgi-chat-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hgi-chat-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(4px); } }

@media (max-width: 600px) {
  #hgi-chat-widget { right: 12px; bottom: 12px; }
  .hgi-chat-panel { width: calc(100vw - 24px); height: calc(100vh - 100px); max-height: none; }
  .hgi-chat-toast-stack { right: -8px; }
  .hgi-chat-toast { width: calc(100vw - 48px); }
}

/* Tax Reporting — thin divider lines between field rows for readability, matching the same treatment in Preview/Detailed Print */
.hgi-tax-field-grid > div { border-bottom: 1px solid var(--hgi-hairline); padding-bottom: 5px; padding-top: 1px; }
.hgi-tax-field-grid > div:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }