/* ==========================================================================
   Dashboard
   --------------------------------------------------------------------------
   Scoped to `.rd-dash`, set on the dashboard's own wrapper, so nothing here
   reaches other pages. Cards, charts and section headers follow the same
   tokens as the sidebar, header and counter.
   ========================================================================== */

.rd-dash {
  --rd-ground:     #EDF1F7;
  --rd-surface:    #FFFFFF;
  --rd-surface-2:  #F5F7FB;
  --rd-line:       #E4EAF2;
  --rd-line-soft:  #EDF1F7;
  --rd-text:       #101828;
  --rd-text-2:     #5A6779;
  --rd-text-3:     #8A94A6;
  --rd-brand:      var(--theme-700, #004EEB);
  --rd-brand-wash: color-mix(in srgb, var(--theme-700, #004EEB) 9%, #FFFFFF);
  --rd-radius:     14px;
  --rd-ease:       cubic-bezier(.4, 0, .2, 1);
  /* Figures use the dashboard's sans, which is loaded on every page. Plex Mono
     is only loaded on the POS screen, so here the cards fell back to the
     system monospace (Courier New on Windows), thin and hard to read. */
  --rd-num: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  background: var(--rd-ground);
}

/* ==========================================================================
   1. Opening band
   --------------------------------------------------------------------------
   It used to be a slab of the theme colour, which collided with the dark
   header. It is now part of the page: the greeting, a note saying what the
   page is showing and how current it is, and the two controls that change
   it, travelling together on the right. The three parts arrive in sequence
   rather than all at once.
   ========================================================================== */

.rd-dash .rd-open {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 16px 20px 18px !important;
  background: transparent !important;
  background-image: none !important;
}

.rd-dash .rd-open-lead {
  min-width: 0;
  flex: 1 1 340px;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: rd-open-rise .55s var(--rd-ease) both;
}
.rd-dash .rd-open-text { min-width: 0; }

.rd-dash .rd-open-title {
  margin: 0 !important;
  color: var(--rd-text) !important;
  font-size: 26px !important;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}

/* The note. One line: what the figures cover, and the day they cover. */
.rd-dash .rd-open-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 9px 0 0 !important;
  color: var(--rd-text-2);
  font-size: 13px;
  animation: rd-open-rise .55s .08s var(--rd-ease) both;
}
.rd-dash .rd-open-note-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-dash .rd-open-date {
  color: var(--rd-text-3);
  font-family: var(--rd-num);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.rd-dash .rd-open-date::before { content: "·"; margin-right: 10px; color: var(--rd-text-3); opacity: .6; }

@keyframes rd-open-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   The greeter
   --------------------------------------------------------------------------
   The RoofBot mascot, drawn in the business colour. Its timings are the ones
   it keeps in the roofbot project, so it moves the way it does over there:
   a 2.4s bob from its feet, a blink at 3.6s, a spark at 1.4s and a wave at
   1.8s. Being an SVG it stays sharp at any display density.
   ========================================================================== */

.rd-char {
  --rd-brand: var(--theme-700, #004EEB);
  --rd-ease:  cubic-bezier(.4, 0, .2, 1);

  width: 64px;
  height: 64px;
  flex: none;
  display: block;
  color: var(--rd-brand);
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--rd-brand) 30%, transparent));
  transform-origin: center bottom;
  animation: rd-char-bob 2.4s ease-in-out infinite;
  transition: filter .25s var(--rd-ease), transform .25s var(--rd-ease);
}
.rd-char svg { width: 100%; height: 100%; display: block; }

/* Eyes shut from their own centres, not the top of the drawing. */
.rd-char-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: rd-char-blink 3.6s ease-in-out infinite;
}

.rd-char-spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: rd-char-spark 1.4s ease-in-out infinite;
}

.rd-char-arm {
  transform-box: view-box;
  transform-origin: 89.4px 71.2px;
  animation: rd-char-wave 1.8s ease-in-out infinite;
}

@keyframes rd-char-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes rd-char-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.1); }
}
@keyframes rd-char-spark {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(.74); }
}
@keyframes rd-char-wave {
  0%, 55%, 100% { transform: rotate(0deg); }
  20%           { transform: rotate(-26deg); }
  40%           { transform: rotate(12deg); }
}
/* Passing over the greeting lifts it. */
.rd-dash .rd-dash .rd-open-lead:hover .rd-char {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 9px 14px color-mix(in srgb, var(--rd-brand) 40%, transparent));
}

/* ==========================================================================
   The two controls
   ========================================================================== */

.rd-dash .rd-open-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
  animation: rd-open-rise .55s .16s var(--rd-ease) both;
}
.rd-dash .rd-open-select { width: 232px; max-width: 100%; }
.rd-dash .rd-open-select .select2-container { width: 100% !important; }

.rd-dash #dashboard_date_filter {
  height: 40px;
  padding: 0 13px;
  border: 1px solid var(--rd-line);
  border-radius: 10px;
  background: var(--rd-surface) !important;
  color: var(--rd-text) !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .16s var(--rd-ease), color .16s var(--rd-ease), transform .16s var(--rd-ease), box-shadow .16s var(--rd-ease);
}
.rd-dash #dashboard_date_filter:hover {
  border-color: var(--rd-brand);
  color: var(--rd-brand) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -12px var(--rd-brand);
}
.rd-dash #dashboard_date_filter svg { transition: transform .2s var(--rd-ease); }
.rd-dash #dashboard_date_filter:hover .rd-open-caret { transform: translateY(2px); }

/* The location picker is a control on the page, not a form field in a slab. */
.rd-dash .select2-container--default .select2-selection--single {
  height: 40px !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: 10px !important;
  background: var(--rd-surface) !important;
  transition: border-color .16s var(--rd-ease), box-shadow .16s var(--rd-ease);
}
.rd-dash .select2-container--default .select2-selection--single:hover { border-color: var(--rd-brand); }
.rd-dash .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--rd-brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-brand) 14%, transparent);
}
.rd-dash .select2-container--default .select2-selection__rendered {
  padding-left: 13px !important;
  padding-right: 34px !important;
  color: var(--rd-text) !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 38px !important;
}
.rd-dash .select2-container--default .select2-selection__placeholder { color: var(--rd-text-3) !important; }

/* Bootstrap's triangle, replaced with the chevron the rest of the app uses. */
.rd-dash .select2-container--default .select2-selection__arrow {
  top: 0 !important;
  right: 6px !important;
  width: 28px !important;
  height: 38px !important;
}
.rd-dash .select2-container--default .select2-selection__arrow b {
  width: 14px !important;
  height: 14px !important;
  margin: -7px 0 0 -7px !important;
  border: 0 !important;
  background: var(--rd-text-3);
  -webkit-mask: var(--rd-caret) center / 14px 14px no-repeat;
  mask: var(--rd-caret) center / 14px 14px no-repeat;
  transition: transform .2s var(--rd-ease);
}
.rd-dash .select2-container--default.select2-container--open .select2-selection__arrow b { transform: rotate(180deg); }

.rd-dash { --rd-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'black\' stroke-width=\'2.4\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpath d=\'M6 9l6 6 6-6\'/%3E%3C/svg%3E"); }

@media (max-width: 767px) {
  .rd-dash .rd-open { padding: 12px 14px 14px !important; }
  .rd-dash .rd-open-title { font-size: 22px !important; }
  .rd-char { width: 50px; height: 50px; }
  .rd-dash .rd-open-tools { width: 100%; margin-left: 0; }
  .rd-dash .rd-open-select { width: 100%; }
  .rd-dash #dashboard_date_filter { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-dash .rd-open-lead,
  .rd-dash .rd-open-note,
  .rd-dash .rd-open-tools,
  .rd-char,
  .rd-char-eye,
  .rd-char-arm,
  .rd-char-spark { animation: none !important; }
}

/* ==========================================================================
   2. Figures
   --------------------------------------------------------------------------
   Eight cards in one row of four. Icon, then label, then the figure, reading
   top to bottom, so a glance down the row compares like with like.
   ========================================================================== */

.rd-dash .rd-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
@media (max-width: 1280px) { .rd-dash .rd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .rd-dash .rd-stats { grid-template-columns: minmax(0, 1fr); } }

.rd-dash .rd-stat {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 18px;
  overflow: hidden;
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: box-shadow .2s var(--rd-ease), transform .2s var(--rd-ease), border-color .2s var(--rd-ease);
}

/* A wash of the card's own tone in the corner, so the row reads as a set
   without eight saturated blocks competing. */
.rd-dash .rd-stat::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--rd-tone);
  opacity: .07;
  transition: opacity .2s var(--rd-ease), transform .2s var(--rd-ease);
}
.rd-dash .rd-stat:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--rd-tone) 35%, var(--rd-line));
  box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--rd-tone) 70%, transparent);
}
.rd-dash .rd-stat:hover::after { opacity: .12; transform: scale(1.08); }

.rd-dash .rd-stat-body {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* The icon sits opposite the text, so the figures line up down the left edge
   of the row and the marks down the right. */
.rd-dash .rd-stat-icon {
  position: relative;
  z-index: 1;
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--rd-tone) 12%, #FFFFFF);
  color: var(--rd-tone);
  transition: transform .2s var(--rd-ease);
}
.rd-dash .rd-stat-icon svg { width: 20px; height: 20px; }
.rd-dash .rd-stat:hover .rd-stat-icon { transform: scale(1.06) rotate(-4deg); }

.rd-dash .rd-stat-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--rd-text-2);
  font-size: 13.5px;
  font-weight: 600;
}
.rd-dash .rd-stat-label .fa-info-circle { color: var(--rd-text-3); font-size: 11px; }

.rd-dash .rd-stat-value {
  position: relative;
  z-index: 1;
  min-height: 32px;
  color: var(--rd-text);
  font-family: var(--rd-num);
  font-size: 26px;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.rd-dash .rd-stat--brand   { --rd-tone: var(--rd-brand); }
.rd-dash .rd-stat--success { --rd-tone: #12B76A; }
.rd-dash .rd-stat--warning { --rd-tone: #F79009; }
.rd-dash .rd-stat--danger  { --rd-tone: #F04438; }

/* ==========================================================================
   2b. Panels holding charts and tables
   ========================================================================== */

.rd-dash .tw-rounded-xl.tw-bg-white,
.rd-dash .tw-bg-white.tw-shadow-sm {
  border-radius: var(--rd-radius) !important;
  background: var(--rd-surface) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
  --tw-ring-color: var(--rd-line) !important;
  transition: box-shadow .18s var(--rd-ease), transform .18s var(--rd-ease);
}
.rd-dash .tw-rounded-xl.tw-bg-white:hover { box-shadow: 0 14px 30px -18px rgba(16, 24, 40, .3) !important; }

.rd-dash h3 {
  color: var(--rd-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}
.rd-dash h3 .fa-info-circle { color: var(--rd-text-3) !important; font-size: 12px; }

/* The outlined circle beside a panel title. */
.rd-dash .tw-border-2.tw-rounded-full {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: 11px !important;
  background: var(--rd-surface-2);
}

/* ==========================================================================
   3. Charts
   ========================================================================== */

/* The chart already sits in a panel; the placeholder frame around it made a
   card inside a card. */
.rd-dash .tw-border-dashed {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.rd-dash .tw-border-dashed p { font-style: normal !important; }

.rd-dash .highcharts-background { fill: transparent; }
.rd-dash text { font-family: "IBM Plex Sans", system-ui, sans-serif !important; }

/* ==========================================================================
   4. Table panels
   --------------------------------------------------------------------------
   The markup wraps each table in negative margins, which pushed the table out
   past the rounded corners of its own card. These contain it, then quiet the
   controls so the data leads.
   ========================================================================== */

/* Header: title on the left, its location picker on the right, a rule under. */
.rd-dash .tw-flow-root { margin-top: 0 !important; }

.rd-dash .tw-flex-1.tw-min-w-0 > div:last-child .select2-container,
.rd-dash .tw-flex-1.tw-min-w-0 > div:last-child select {
  display: block;
  max-width: 260px;
  margin-left: auto;
}

/* Contain the table: one scroller, no bleed. */
.rd-dash .tw-flow-root > div {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  overflow-x: auto;
  border-top: 1px solid var(--rd-line);
}
.rd-dash .tw-flow-root > div > div {
  display: block !important;
  min-width: 100% !important;
  padding: 0 !important;
}

/* The card is the frame, so the table drops its own. */
.rd-dash .table-bordered {
  border: 0 !important;
  border-radius: 0 !important;
}
/* On a scrolling table the head is its own element sized to the table, so the
   tint goes there; otherwise the band stops short of the card's edge. */
.rd-dash .dataTables_scrollHead,
.rd-dash .dataTables_scrollHeadInner,
.rd-dash .dataTables_scrollHeadInner > table {
  width: 100% !important;
  background: var(--rd-surface-2);
}
.rd-dash .dataTables_scrollHead { border-bottom: 1px solid var(--rd-line); }

.rd-dash .table > thead > tr > th {
  padding-left: 0;
  background: transparent !important;
  border-bottom: 1px solid var(--rd-line) !important;
}
.rd-dash .dataTables_scrollHead .table > thead > tr > th { border-bottom: 0 !important; }
.rd-dash .table > thead > tr > th + th { padding-left: 14px; }
.rd-dash .table > tbody > tr > td { padding-left: 0; }
.rd-dash .table > tbody > tr > td + td { padding-left: 14px; }

/* Nothing to show is a quiet line, not an empty bordered box. */
.rd-dash .dataTables_empty {
  padding: 34px 14px !important;
  color: var(--rd-text-3) !important;
  font-size: 13px;
  text-align: center;
}

/* Exports are secondary to the figures they sit above. */
.rd-dash .dt-buttons { margin: 12px 0 2px; }
/* DataTables renders these as anchors with .btn here, not .dt-button. */
.rd-dash .dt-buttons > a,
.rd-dash .dt-buttons > button,
.rd-dash .dt-buttons .dt-button,
.rd-dash .dt-buttons .btn {
  height: 30px !important;
  margin: 0 5px 5px 0 !important;
  padding: 0 9px !important;
  color: var(--rd-text-3) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}
.rd-dash .dt-buttons > a:hover,
.rd-dash .dt-buttons > button:hover,
.rd-dash .dt-buttons .dt-button:hover,
.rd-dash .dt-buttons .btn:hover { color: var(--rd-brand) !important; font-weight: 600 !important; }

.rd-dash .dataTables_wrapper .dataTables_info { padding-top: 10px; font-size: 11.5px; }
.rd-dash .dataTables_wrapper .dataTables_paginate { padding-top: 6px; }
.rd-dash .dataTables_wrapper .dataTables_paginate li.paginate_button > a {
  min-width: 32px;
  height: 32px;
  padding: 0 11px;
  font-size: 12px;
}
.rd-dash .dataTables_wrapper .dataTables_length select,
.rd-dash .dataTables_wrapper .dataTables_filter input { height: 32px; font-size: 12.5px; }
.rd-dash .dataTables_wrapper .dataTables_filter input { min-width: 180px; }

/* The row DataTables lays its controls out in. */
.rd-dash .dataTables_wrapper .row.margin-bottom-20 {
  margin: 0 0 6px !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.rd-dash .dataTables_wrapper .row.margin-bottom-20 > [class*="col-"] {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}
.rd-dash .dataTables_wrapper .row.margin-bottom-20 > [class*="col-sm-3"] { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .rd-dash * { transition: none !important; }
}

/* ==========================================================================
   Assistant launcher
   --------------------------------------------------------------------------
   The mascot in the bottom corner of every page. The assistant is not built
   yet, so it says so on hover and on press rather than opening anything.

   It has to read as the one live thing on a page full of figures without
   becoming the loudest: a slow beacon, a light travelling the rim, and a
   sparkle that catches now and then. Everything speeds up under the cursor.
   ========================================================================== */

.rd-ai {
  --rd-ai-surface: #FFFFFF;
  --rd-ai-line:    #E4EAF2;
  --rd-ai-text:    #101828;
  --rd-ai-ink:     #0B1220;
  --rd-ai-brand:   var(--theme-700, #004EEB);
  --rd-ai-ease:    cubic-bezier(.4, 0, .2, 1);

  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1035;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  animation: rd-ai-in .7s .6s cubic-bezier(.34, 1.56, .64, 1) both;
}

.rd-ai-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 17px 7px 8px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(135deg, #FFFFFF 0%, color-mix(in srgb, var(--rd-ai-brand) 6%, #FFFFFF) 100%);
  box-shadow:
    0 2px 6px -2px rgba(16, 24, 40, .2),
    0 18px 34px -16px color-mix(in srgb, var(--rd-ai-brand) 60%, transparent);
  color: var(--rd-ai-text);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s var(--rd-ai-ease), box-shadow .25s var(--rd-ai-ease);
}

/* The rim: a light running around the edge, drawn as a ring rather than a
   fill so the face of the button stays white. */
@property --rd-ai-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.rd-ai-btn::before {
  content: "";
  --rd-ai-angle: 0deg;
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--rd-ai-angle),
    color-mix(in srgb, var(--rd-ai-brand) 18%, transparent) 0deg,
    var(--rd-ai-brand) 70deg,
    color-mix(in srgb, var(--rd-ai-brand) 18%, transparent) 150deg,
    color-mix(in srgb, var(--rd-ai-brand) 18%, transparent) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: rd-ai-rim 4.5s linear infinite;
}

/* The beacon: one ring leaving the button every few seconds. */
.rd-ai-halo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--rd-ai-brand);
  opacity: 0;
  pointer-events: none;
  animation: rd-ai-beacon 3.6s var(--rd-ai-ease) infinite;
}

.rd-ai .rd-ai-bot {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--rd-ai-brand) 34%, transparent));
  transition: transform .25s var(--rd-ai-ease);
}

.rd-ai-label {
  background: linear-gradient(92deg, var(--rd-ai-text) 0%, var(--rd-ai-brand) 55%, var(--rd-ai-text) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: rd-ai-shimmer 6s var(--rd-ai-ease) infinite;
}

.rd-ai-spark {
  position: absolute;
  top: 4px;
  left: 30px;
  width: 13px;
  height: 13px;
  fill: var(--rd-ai-brand);
  pointer-events: none;
  transform-origin: center;
  animation: rd-ai-twinkle 3.2s var(--rd-ai-ease) infinite;
}

/* Under the cursor everything quickens and the button lifts. */
.rd-ai-btn:hover,
.rd-ai-btn:focus-visible {
  outline: none;
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 2px 6px -2px rgba(16, 24, 40, .22),
    0 26px 46px -18px color-mix(in srgb, var(--rd-ai-brand) 80%, transparent);
}
.rd-ai-btn:hover::before,
.rd-ai-btn:focus-visible::before { animation-duration: 1.6s; }
.rd-ai-btn:hover .rd-ai-bot { transform: scale(1.08) rotate(-4deg); }
.rd-ai-btn:hover .rd-ai-label { animation-duration: 2.4s; }
.rd-ai-btn:hover .rd-ai-spark { animation-duration: 1.2s; }
.rd-ai-btn:active { transform: translateY(-1px) scale(.99); }

/* The note. Hover or press raises it; it is the only thing the button does. */
.rd-ai-note {
  position: absolute;
  right: 4px;
  bottom: calc(100% + 10px);
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--rd-ai-ink);
  box-shadow: 0 14px 28px -14px rgba(11, 18, 32, .7);
  color: #E8EDF6;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  pointer-events: none;
  transition: opacity .2s var(--rd-ai-ease), transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.rd-ai-note::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 100%;
  border: 6px solid transparent;
  border-top-color: var(--rd-ai-ink);
}
.rd-ai:hover .rd-ai-note,
.rd-ai-btn:focus-visible ~ .rd-ai-note,
.rd-ai.is-told .rd-ai-note {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Pressing it nudges the mascot, so the press is felt as well as read. */
.rd-ai.is-told .rd-ai-bot { animation: rd-ai-nudge .5s var(--rd-ai-ease); }

@keyframes rd-ai-in {
  from { opacity: 0; transform: translateY(20px) scale(.86); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rd-ai-rim {
  to { --rd-ai-angle: 360deg; }
}
@keyframes rd-ai-beacon {
  0%       { opacity: .5; transform: scale(1); }
  60%, 100% { opacity: 0;  transform: scale(1.22); }
}
@keyframes rd-ai-shimmer {
  0%, 100% { background-position: 120% 0; }
  50%      { background-position: -20% 0; }
}
@keyframes rd-ai-twinkle {
  0%, 62%, 100% { opacity: .35; transform: scale(.7) rotate(0deg); }
  74%           { opacity: 1;   transform: scale(1.15) rotate(35deg); }
  86%           { opacity: .5;  transform: scale(.85) rotate(60deg); }
}
@keyframes rd-ai-nudge {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-11deg) scale(1.06); }
  65%      { transform: rotate(7deg) scale(1.03); }
}

/* Scroll-to-top lands in the same corner, so it steps up over the launcher. */
body:not(.pos-rd) .scrolltop .scroll { bottom: 88px; }

/* A form with a bar riding the bottom of the page would have the launcher
   sitting on its Save button, so the launcher steps up over the bar. */
body:has(.rd-form-bar) .rd-ai { bottom: 96px; }
body:has(.rd-form-bar) .scrolltop .scroll { bottom: 162px; }

/* On a phone the label costs more room than it earns. */
@media (max-width: 767px) {
  .rd-ai { right: 14px; bottom: 14px; }
  .rd-ai-label { display: none; }
  .rd-ai-spark { left: 28px; top: 2px; }
  .rd-ai-btn { padding: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-ai,
  .rd-ai .rd-ai-bot,
  .rd-ai-btn::before,
  .rd-ai-halo,
  .rd-ai-label,
  .rd-ai-spark { animation: none !important; }
  .rd-ai-btn:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Assistant sheet

   Down the right edge, floor to ceiling: a conversation grows, and a small
   card had every answer scrolling almost straight away.
--------------------------------------------------------------------------- */
.rd-ai-scrim {
  position: fixed;
  inset: 0;
  z-index: 1035;
  background: rgba(11, 18, 32, .42);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1), visibility .3s;
}
body.rd-ai-open .rd-ai-scrim { opacity: 1; visibility: visible; }

.rd-ai-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: #FFFFFF;
  box-shadow: -28px 0 70px rgba(11, 18, 32, .20);
  transform: translateX(100%);
  transition: transform .36s cubic-bezier(.32, .72, 0, 1);
  will-change: transform;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.rd-ai-open .rd-ai-panel { transform: translateX(0); }
.rd-ai-panel[hidden] { display: none; }

/* ---- header ---- */
.rd-ai-head {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  padding: 15px 12px 15px 16px;
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .20), transparent 60%),
    linear-gradient(135deg, var(--theme-900, #00359E), var(--theme-700, #004EEB));
}
.rd-ai-head-bot { display: block; width: 34px; height: 34px; margin-right: 11px; flex: none; }
.rd-ai-head-bot svg { width: 100%; height: 100%; }
.rd-ai-titles { flex: 1; min-width: 0; line-height: 1.3; }
.rd-ai-title { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.rd-ai-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  opacity: .78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-ai-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: #12B76A;
  box-shadow: 0 0 0 0 rgba(18, 183, 106, .7);
  animation: rd-ai-live 2.2s ease-out infinite;
}
@keyframes rd-ai-live {
  0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, .7); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(18, 183, 106, 0); }
}

.rd-ai-hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(255, 255, 255, .13);
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: background .15s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1);
}
.rd-ai-hbtn + .rd-ai-hbtn { margin-left: 5px; }
.rd-ai-hbtn svg { width: 16px; height: 16px; }
.rd-ai-hbtn:hover { background: rgba(255, 255, 255, .26); }
.rd-ai-hbtn:active { transform: scale(.92); }
.rd-ai-hbtn.is-on { background: #fff; color: var(--theme-700, #004EEB); }
.rd-ai-hbtn:disabled { opacity: .35; cursor: not-allowed; }

/* ---- conversation ---- */
.rd-ai-log {
  flex: 1;
  min-height: 0;
  padding: 18px 16px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(#F7F9FC, #F1F4FA);
  scroll-behavior: smooth;
}
.rd-ai-log::-webkit-scrollbar { width: 9px; }
.rd-ai-log::-webkit-scrollbar-thumb { background: #CFD8E6; border: 3px solid transparent; background-clip: content-box; border-radius: 99px; }
.rd-ai-log::-webkit-scrollbar-thumb:hover { background: #B6C2D4; background-clip: content-box; }

.rd-ai-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
  margin-bottom: 8px;
  animation: rd-ai-rise .34s cubic-bezier(.32, .72, 0, 1) both;
}
.rd-ai-row--user { justify-content: flex-end; }
@keyframes rd-ai-rise {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* A face on the answers, so a wall of text reads as a conversation. */
.rd-ai-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-bottom: 18px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--theme-700, #004EEB), var(--theme-900, #00359E));
  color: #fff;
}
.rd-ai-av svg { width: 16px; height: 16px; }

.rd-ai-stack { display: flex; flex-direction: column; min-width: 0; max-width: 82%; }
.rd-ai-row--user .rd-ai-stack { align-items: flex-end; }

.rd-ai-msg {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.rd-ai-msg--user {
  background: linear-gradient(135deg, var(--theme-700, #004EEB), var(--theme-800, #0040C1));
  color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--theme-700, #004EEB) 26%, transparent);
}
.rd-ai-msg--assistant {
  background: #FFFFFF;
  color: #101828;
  border: 1px solid #E7ECF4;
  border-bottom-left-radius: 6px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* Under an answer whose full list is a PDF. */
.rd-ai-download {
  align-self: flex-start;
  margin-top: 6px;
  padding: 6px 12px;
  border: 1px solid var(--theme-700, #004EEB);
  border-radius: 10px;
  background: #fff;
  color: var(--theme-700, #004EEB);
  font-size: 12.5px;
  font-weight: 600;
}
.rd-ai-download::before { content: '\2193  '; }
.rd-ai-download:hover, .rd-ai-download:focus { background: var(--theme-700, #004EEB); color: #fff; text-decoration: none; }

.rd-ai-time {
  margin: 3px 6px 0;
  color: #98A2B3;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

/* ---- empty state ---- */
.rd-ai-hint {
  margin: auto 0;
  padding: 10px 4px 24px;
  text-align: center;
  animation: rd-ai-rise .4s cubic-bezier(.32, .72, 0, 1) both;
}
.rd-ai-hint-bot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--theme-700, #004EEB), var(--theme-900, #00359E));
  color: #fff;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--theme-700, #004EEB) 26%, transparent);
}
.rd-ai-hint-bot svg { width: 27px; height: 27px; }
.rd-ai-hint b { display: block; margin-bottom: 14px; color: #101828; font-size: 14px; font-weight: 600; }

.rd-ai-chips { display: flex; flex-direction: column; gap: 8px; }
.rd-ai-chip {
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #E7ECF4;
  border-radius: 12px;
  color: #344054;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}
.rd-ai-chip:hover {
  border-color: var(--theme-700, #004EEB);
  color: var(--theme-700, #004EEB);
  transform: translateX(3px);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .06);
}
.rd-ai-chip:active { transform: translateX(1px) scale(.99); }

/* Waiting: three dots rather than the word "thinking". */
.rd-ai-dots { display: inline-flex; gap: 4px; padding: 4px 2px; }
.rd-ai-dots i {
  width: 6px;
  height: 6px;
  background: #98A2B3;
  border-radius: 50%;
  animation: rd-ai-bounce 1.1s ease-in-out infinite;
}
.rd-ai-dots i:nth-child(2) { animation-delay: .16s; }
.rd-ai-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes rd-ai-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ---- composer ---- */
.rd-ai-form {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 12px 14px 14px;
  border-top: 1px solid #E7ECF4;
  background: #FFFFFF;
}
.rd-ai-field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.rd-ai-input {
  width: 100%;
  height: 44px;
  padding: 0 48px 0 16px;
  background: #F5F7FB;
  border: 1px solid #E7ECF4;
  border-radius: 14px;
  font: inherit;
  font-size: 13.5px;
  color: #101828;
  outline: none;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1), background .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}
.rd-ai-input::placeholder { color: #98A2B3; }
.rd-ai-input:focus {
  border-color: var(--theme-700, #004EEB);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-700, #004EEB) 12%, transparent);
}

/* The send sits inside the field, the way a message box reads. */
.rd-ai-send {
  position: absolute;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--theme-700, #004EEB);
  color: #fff;
  cursor: pointer;
  transition: background .15s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1);
}
.rd-ai-send svg { width: 16px; height: 16px; }
.rd-ai-send:hover { background: var(--theme-800, #0040C1); }
.rd-ai-send:active { transform: scale(.9); }

.rd-ai-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #E7ECF4;
  border-radius: 14px;
  background: #fff;
  color: #5A6779;
  cursor: pointer;
  transition: background .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1);
}
.rd-ai-mic svg { width: 18px; height: 18px; }
.rd-ai-mic:hover { background: #F5F7FB; color: #101828; }
.rd-ai-mic:active { transform: scale(.93); }
.rd-ai-mic:disabled { opacity: .35; cursor: not-allowed; }
.rd-ai-mic.is-live {
  background: #FEF3F2;
  border-color: #FDA29B;
  color: #B42318;
  animation: rd-ai-pulse 1.5s ease-in-out infinite;
}
@keyframes rd-ai-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, .30); }
  50% { box-shadow: 0 0 0 8px rgba(180, 35, 24, 0); }
}

/* The launcher steps aside while the sheet is open. */
body.rd-ai-open .rd-ai-btn {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.9);
  transition: opacity .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1);
}

@media (max-width: 560px) {
  .rd-ai-panel { width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-ai-panel, .rd-ai-row, .rd-ai-scrim, .rd-ai-hint { transition: none; animation: none; }
  .rd-ai-dots i, .rd-ai-dot { animation: none; }
}

/* ---- the mic is open: say so, and get out of the way of the words ---- */
.rd-ai-form.is-listening .rd-ai-input {
  border-color: #FDA29B;
  background: #FFFBFA;
  padding-right: 78px;          /* room for the bars beside the send button */
  box-shadow: 0 0 0 4px rgba(180, 35, 24, .10);
}

.rd-ai-wave {
  position: absolute;
  right: 46px;
  display: none;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  pointer-events: none;
}
.rd-ai-form.is-listening .rd-ai-wave { display: flex; }
.rd-ai-wave i {
  width: 3px;
  height: 100%;
  background: #B42318;
  border-radius: 99px;
  transform-origin: bottom;
  animation: rd-ai-wave 900ms ease-in-out infinite;
}
.rd-ai-wave i:nth-child(2) { animation-delay: 120ms; }
.rd-ai-wave i:nth-child(3) { animation-delay: 240ms; }
.rd-ai-wave i:nth-child(4) { animation-delay: 360ms; }
@keyframes rd-ai-wave {
  0%, 100% { transform: scaleY(.28); opacity: .55; }
  50% { transform: scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-ai-wave i { animation: none; transform: scaleY(.6); }
}