/* ==========================================================================
   custom-style.css — RISE's designated "load last" stylesheet
   --------------------------------------------------------------------------
   MyABR (Sept 2026): the brand theme now lives in
     assets/css/myabr/myabr-theme.css   (tokens + every shared component)
   loaded straight after this file from includes/custom_head.php.

   What remains below is carried over from the previous build and only
   reads colours through variables (the --fj-* names are aliases defined in
   myabr-theme.css that point at MyABR tokens):
     - datepicker / calendar / gantt / kanban highlight colours
     - status badge fixes (.badge-success / .badge-danger were missing
       from core CSS)
     - styles for legacy coworking screens (.fj-*) that are no longer in
       any menu - see HANDOFF.md "Legacy coworking routes"
     - Copilot staff chat widget
   The old Fairway sidebar, font import (Google Fonts) and colour system
   were removed; do not reintroduce raw brand hex values here.
   ========================================================================== */

   2. LINKS, PRIMARY BUTTONS, UTILITY TEXT/BG CLASSES
   ---------------------------------------------------------------------- */
a,
a:hover,
.help-category-box .anchor,
.badge.badge-light a:hover,
.badge.badge-light a:active,
.badge.badge-light a:focus {
  color: var(--fj-accent) !important;
}

.btn-primary {
  background-color: var(--fj-accent) !important;
  border-color: var(--fj-accent) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--fj-accent-hover) !important;
  border-color: var(--fj-accent-hover) !important;
}

.btn-info {
  background: var(--fj-accent) !important;
  border: 1px solid var(--fj-accent) !important;
  color: #fff !important;
}
.btn-info:hover,
.btn-info:active,
.btn-info:focus {
  background: var(--fj-accent-hover) !important;
  border-color: var(--fj-accent-hover) !important;
}

.bg-primary,
.bg-info,
.bg-dark-success,
#pwa-install-message-iphone {
  background-color: var(--fj-accent) !important;
}
.text-primary,
.text-info {
  color: var(--fj-accent) !important;
}
/* MyABR: removed a stale override from the original theme conversion -
   .bg-success / .app-alert.alert-success were being forced to render in
   the brand's primary blue (--fj-accent resolves to --myabr-primary) via
   a rule left over from before MyABR's own colours existed. This had
   higher CSS specificity (two classes) than myabr-theme.css's own
   .alert-success rule (one class), so every "success" notification -
   the most common one a customer sees, e.g. "Draft saved." - rendered
   blue instead of green. Reproduced directly: a real save-draft success
   toast showed class="alert-success" but a computed background of
   rgb(53, 99, 243), the brand's blue, not green. Removed entirely - the
   correct green success colour is already defined once, correctly, in
   myabr-theme.css and no longer needs to be overridden. */
.color-sky,
.color-plum {
  color: var(--fj-gray) !important;
}

/* ----------------------------------------------------------------------
   3. FORM CONTROLS, CHECKBOXES, FOCUS STATES
   ---------------------------------------------------------------------- */
.form-check-input:checked {
  background-color: var(--fj-accent) !important;
  border-color: var(--fj-accent) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--fj-accent) !important;
  box-shadow: 0 0 0 0.15rem rgba(31, 77, 61, 0.15) !important;
}

/* ----------------------------------------------------------------------
   4. DROPDOWNS / AUTOCOMPLETE / EDITOR HIGHLIGHTS / LISTS / KANBAN /
      CHAT / TABLES / TIMELINE
   ---------------------------------------------------------------------- */
.select2-results .select2-highlighted,
.awesomplete ul li[aria-selected="true"],
.tox .tox-collection--list .tox-collection__item--active,
.list-group-item.active,
.atwho-view .cur,
.note-hint-group .active,
.note-hint-item:hover,
.note-hint-popover .popover-content .note-hint-group .note-hint-item.active,
.note-hint-popover .popover-content .note-hint-group .note-hint-item:hover,
.selection-handler-dropdown-btn.active,
.sub-task-filter-kanban-active,
.sub-task-filter-active,
.dataTable:not(.js-selection-mode) tbody tr.active td,
.dataTable:not(.js-selection-mode) tbody tr.active:hover td,
table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected {
  background: var(--fj-accent) !important;
  background-color: var(--fj-accent) !important;
  color: #fff !important;
}
.selection-handler-dropdown-btn.active:active,
.selection-handler-dropdown-btn.active:focus {
  background-color: var(--fj-accent-hover) !important;
}
.kanban-item:hover,
.kanban-item:active,
.kanban-item:focus,
.atwho-view .cur,
.message-row.unread strong,
.message-row.unread span,
.circle-done,
.unread-comments-of-tasks i {
  color: var(--fj-accent) !important;
}
.chat-me .chat-msg {
  background-color: var(--fj-accent) !important;
}
.notepad-title,
.unread,
.comment-highlight {
  border-color: var(--fj-accent) !important;
}
.avatar.primary-contact img {
  border-color: var(--fj-accent) !important;
}
.nav-pills li .active,
.nav-pills li.active {
  color: var(--fj-accent) !important;
}
.post-dropzone.dz-drag-hover {
  border-color: var(--fj-accent) !important;
}
.timeline-images span.more {
  border-left-color: var(--fj-gray) !important;
}
.bold-file-icon {
  color: var(--fj-gray) !important;
  fill: var(--fj-gray) !important;
}
.bold-folder-icon {
  color: var(--fj-gray-light) !important;
  fill: var(--fj-gray-light) !important;
}

/* ----------------------------------------------------------------------
   5. LOADERS / SPINNERS
   ---------------------------------------------------------------------- */
.circle-loader,
.spinning-btn.spinning:before {
  border-top-color: var(--fj-accent) !important;
  border-right-color: var(--fj-accent) !important;
}
.app-loader .loading,
.table-loader .loading,
.inline-loader {
  border-color: var(--fj-accent) !important;
}

/* ----------------------------------------------------------------------
   6. DATEPICKER / CALENDAR WIDGET (highlighted + range + active states)
   ---------------------------------------------------------------------- */
.datepicker table tr td.highlighted,
.datepicker table tr td.highlighted.disabled,
.datepicker table tr td.highlighted.disabled:active,
.datepicker table tr td.range.highlighted,
.datepicker table tr td.range.highlighted.disabled,
.datepicker table tr td.range.highlighted.disabled:active {
  background: var(--fj-accent-soft) !important;
  background-color: var(--fj-accent-soft) !important;
  border-color: var(--myabr-primary-soft-2) !important;
  color: var(--fj-ink) !important;
}
.datepicker table tr td.highlighted:hover,
.datepicker table tr td.highlighted:focus,
.datepicker table tr td.highlighted.focus,
.datepicker table tr td.highlighted:active,
.datepicker table tr td.highlighted.active,
.datepicker table tr td.highlighted.focused,
.datepicker table tr td.range.highlighted:hover,
.datepicker table tr td.range.highlighted:focus,
.datepicker table tr td.range.highlighted.focus,
.datepicker table tr td.range.highlighted:active,
.datepicker table tr td.range.highlighted.active,
.datepicker table tr td.range.highlighted.focused {
  background: var(--myabr-primary-soft-2) !important;
  background-color: var(--myabr-primary-soft-2) !important;
  border-color: var(--myabr-primary-soft-2) !important;
}
.datepicker table tr td.active,
.datepicker table tr td.active.highlighted,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
  background-color: var(--fj-accent) !important;
  border-color: var(--fj-accent) !important;
  color: #fff !important;
}
.datepicker table tr td.active:hover,
.datepicker table tr td.active:focus,
.datepicker table tr td.active:active,
.datepicker table tr td.active.active,
.datepicker table tr td span.active:focus,
.datepicker table tr td span.active:active {
  background-color: var(--fj-accent-hover) !important;
  border-color: var(--fj-accent-hover) !important;
}
/* "today" marker - a warm gold tint, distinct from both the accent green
   (selected date) and the highlighted range, so all three read clearly */
.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.range.today,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:active {
  background: var(--fj-gold-soft) !important;
  background-color: var(--fj-gold-soft) !important;
  border-color: var(--myabr-warning-dot) !important;
  color: var(--fj-ink) !important;
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:focus,
.datepicker table tr td.today.focus,
.datepicker table tr td.today:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today.focused,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:focus,
.datepicker table tr td.range.today.focus,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today.active {
  background: var(--myabr-warning-soft) !important;
  background-color: var(--myabr-warning-soft) !important;
  border-color: var(--myabr-warning-dot) !important;
}

/* ----------------------------------------------------------------------
   7. WARNING / ORANGE FAMILY -> the warm gold accent (kept distinct from
      the green "primary" so there is still some visual hierarchy)
   ---------------------------------------------------------------------- */
.btn-warning {
  background: var(--fj-gold) !important;
  border-color: var(--fj-gold) !important;
  color: #fff !important;
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus {
  background: var(--myabr-warning) !important;
  border-color: var(--myabr-warning) !important;
}
.bg-orange {
  background-color: var(--fj-gold) !important;
}
/* MyABR: .app-alert.alert-warning intentionally no longer forced to a
   solid gold here - same reason as the removed .alert-success override
   above. myabr-theme.css's own .alert-warning rule (soft amber
   background, not a solid block colour) now applies uncontested. */
.text-warning,
.star-icon,
.star-icon:hover,
.star-btn,
.icon-fill-warning {
  color: var(--fj-gold) !important;
  fill: var(--fj-gold) !important;
}

/* ----------------------------------------------------------------------
   8. FULLCALENDAR (projects/events calendar) — it exposes real CSS
      custom properties, so this is a clean override, no !important war.
   ---------------------------------------------------------------------- */
:root {
  --fc-button-bg-color: var(--myabr-primary);
  --fc-button-border-color: var(--myabr-primary);
  --fc-button-hover-bg-color: var(--myabr-primary-hover);
  --fc-button-hover-border-color: var(--myabr-primary-hover);
  --fc-button-active-bg-color: var(--myabr-primary-hover);
  --fc-button-active-border-color: var(--myabr-primary-hover);
  --fc-event-bg-color: var(--myabr-primary);
  --fc-event-border-color: var(--myabr-primary);
  --fc-today-bg-color: rgba(184, 135, 61, 0.1);
  --fc-now-indicator-color: #f5325c; /* kept red - it's a live "now" marker, reads as a status */
  --fc-highlight-color: rgba(31, 77, 61, 0.1);
}

/* ----------------------------------------------------------------------
   9. GANTT CHART (project timeline) — SVG fill/stroke, not background-color
   ---------------------------------------------------------------------- */
.gantt .bar-progress,
.gantt-container .popup-wrapper .title {
  fill: var(--fj-accent) !important;
  border-bottom-color: var(--fj-accent) !important;
}
.gantt .bar-wrapper:hover .bar-progress,
.gantt .bar-wrapper.active .bar-progress {
  fill: var(--fj-accent-hover) !important;
}
.gantt .today-highlight {
  fill: var(--fj-gold-soft) !important;
}

/* ----------------------------------------------------------------------
   9b. RICH TEXT EDITOR (Summernote) — drag-drop overlay + check icon
   ---------------------------------------------------------------------- */
.note-editor .note-dropzone {
  color: var(--myabr-muted) !important;
}
.note-editor .note-dropzone.hover {
  color: var(--fj-accent) !important;
}
.note-editor.note-frame .note-status-output .text-primary,
.note-editor.note-airframe .note-status-output .text-primary {
  color: var(--fj-accent) !important;
}
.note-popover .popover-content .note-dropdown-menu.note-check a i,
.note-editor .note-toolbar .note-dropdown-menu.note-check a i {
  color: var(--fj-accent) !important;
}

/* ----------------------------------------------------------------------
   10. DASHBOARD CARDS — the Overview metric tiles are clickable; give
       them a real interactive feel (subtle lift + accent border on
       hover) so that's obvious before anyone even clicks.
   ---------------------------------------------------------------------- */
a.fj-metric-card {
  display: block;
  color: inherit !important;
  text-decoration: none !important;
  transition: transform 150ms ease-in-out, box-shadow 150ms ease-in-out, border-color 150ms ease-in-out;
  border: 1px solid transparent;
}
a.fj-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(22, 33, 28, 0.08);
  border-color: var(--fj-accent);
}

/* ----------------------------------------------------------------------
   11. TOP BAR "show theme color changer" swatches — hide the built-in
      colored swatch picker so nobody accidentally re-introduces color.
      (Leave this commented out if you'd rather keep the picker visible.)
   ---------------------------------------------------------------------- */
/* .change-theme-color-list { display: none !important; } */

/* ======================================================================
   12. OVERVIEW DASHBOARD — premium analytics layout
   ----------------------------------------------------------------------
   Only touches the dashboard's own content (everything scoped under
   .fj-dashboard, which wraps admin_dashboard/index.php's page-content).
   The sidebar/topbar are untouched by anything in this section.
   ====================================================================== */

.fj-dashboard {
  --fj-card-border: var(--myabr-neutral-soft);
  --fj-card-shadow: 0 1px 3px rgba(22, 33, 28, 0.05), 0 1px 2px rgba(22, 33, 28, 0.04);
}

/* ---- Header ---- */
.fj-dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.fj-dash-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fj-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--fj-card-border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--fj-ink);
}
.fj-date-pill i {
  width: 14px;
  height: 14px;
  color: var(--fj-accent);
}
.fj-brand-tag {
  font-size: 14px;
  font-weight: 600;
  color: var(--fj-accent);
  text-align: right;
  line-height: 1.3;
}
.fj-brand-tag small {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--fj-gray);
}

/* ---- KPI cards ---- */
a.fj-kpi-card {
  display: block;
  background: #fff;
  border: 1px solid var(--fj-card-border);
  border-radius: 10px;
  box-shadow: var(--fj-card-shadow);
  padding: 16px 18px;
  color: inherit !important;
  text-decoration: none !important;
  transition: transform 150ms ease-in-out, box-shadow 150ms ease-in-out, border-color 150ms ease-in-out;
  height: 100%;
}
a.fj-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(22, 33, 28, 0.1);
  border-color: var(--fj-accent);
}
.fj-kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--fj-accent-soft);
  color: var(--fj-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.fj-kpi-label {
  font-size: 12px;
}
.fj-kpi-value {
  font-size: 24px;
  font-weight: 600;
}
.fj-kpi-value.fj-kpi-danger {
  color: #f5325c;
}
.fj-kpi-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--fj-gray);
  margin-left: 4px;
}
.fj-trend {
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}
.fj-trend-label {
  font-weight: 400;
  margin-left: 2px;
}
.fj-trend-up {
  color: var(--fj-accent);
}
.fj-trend-down {
  color: #f5325c;
}
.fj-trend-flat {
  color: var(--fj-gray);
}

/* ---- Panels (charts, funnel, schedule, attention) ---- */
.fj-panel {
  background: #fff;
  border: 1px solid var(--fj-card-border);
  border-radius: 10px;
  box-shadow: var(--fj-card-shadow);
  padding: 18px 20px;
  height: 100%;
}
.fj-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.fj-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fj-ink);
}
.fj-panel-subtitle {
  font-size: 12px;
  margin-top: 2px;
}
.fj-period-pill {
  font-size: 11px;
  color: var(--fj-gray);
  background: var(--myabr-surface-2);
  border: 1px solid var(--fj-card-border);
  border-radius: 6px;
  padding: 3px 10px;
  white-space: nowrap;
}
.fj-chart-wrap {
  position: relative;
}
.fj-empty-state {
  font-size: 13px;
  padding: 30px 0;
  text-align: center;
}

/* ---- Donut center label ---- */
.fj-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.fj-donut-percent {
  font-size: 22px;
  font-weight: 700;
  color: var(--fj-ink);
  line-height: 1.1;
}
.fj-donut-caption {
  font-size: 11px;
}
.fj-utilisation-legend {
  margin-top: 14px;
}
.fj-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
}
.fj-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fj-accent);
  flex-shrink: 0;
}
.fj-legend-label {
  flex: 1;
  color: var(--fj-ink);
}
.fj-legend-fraction {
  white-space: nowrap;
}
.fj-legend-percent {
  font-weight: 600;
  width: 38px;
  text-align: right;
}

/* ---- Lead Funnel ---- */
.fj-funnel {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.fj-funnel-stage {
  flex: 1;
  min-width: 70px;
  background: var(--myabr-surface-2);
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
}
.fj-funnel-stage-label {
  font-size: 11px;
}
.fj-funnel-stage-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--fj-ink);
}
.fj-funnel-stage-pct {
  font-size: 11px;
}
.fj-funnel-arrow {
  color: var(--fj-gray-light);
  font-size: 16px;
  flex-shrink: 0;
}

/* ---- Today's Schedule ---- */
.fj-view-all {
  font-size: 12px;
  color: var(--fj-accent) !important;
}
.fj-schedule-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--fj-card-border);
  font-size: 13px;
}
.fj-schedule-row:last-child {
  border-bottom: none;
}
.fj-schedule-time {
  width: 66px;
  flex-shrink: 0;
  color: var(--fj-gray);
  font-size: 12px;
}
.fj-schedule-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fj-schedule-dot-tour {
  background: var(--fj-gold);
}
.fj-schedule-dot-booking {
  background: var(--fj-accent);
}
.fj-schedule-text {
  flex: 1;
  min-width: 0;
}
.fj-schedule-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.fj-schedule-badge-tour {
  background: var(--fj-gold-soft);
  color: var(--fj-gold);
}
.fj-schedule-badge-booking {
  background: var(--fj-accent-soft);
  color: var(--fj-accent);
}

/* ---- Attention Required ---- */
.fj-attention-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--fj-card-border);
  font-size: 13px;
}
.fj-attention-row:last-child {
  border-bottom: none;
}
.fj-attention-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fj-attention-icon i {
  width: 14px;
  height: 14px;
}
.fj-attention-icon-danger {
  background: #fde5ea;
  color: #f5325c;
}
.fj-attention-icon-neutral {
  background: #f0f0f0;
  color: var(--fj-gray);
}
.fj-attention-icon-info {
  background: var(--fj-accent-soft);
  color: var(--fj-accent);
}
.fj-attention-text {
  flex: 1;
  min-width: 0;
}
.fj-attention-subtext {
  font-size: 12px;
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .fj-dash-header-right {
    width: 100%;
    justify-content: space-between;
  }
  .fj-funnel {
    flex-direction: column;
    align-items: stretch;
  }
  .fj-funnel-arrow {
    align-self: center;
    transform: rotate(90deg);
  }
}

/* ======================================================================
   13. STATUS BADGES — .badge-success / .badge-danger
   ----------------------------------------------------------------------
   Neither of these classes exists anywhere in app.all.css - only the
   bare .badge (padding/font-size, no color) and .badge-light are
   defined there. Every "Active"/"Overdue" style badge across the member
   and admin screens that uses class="badge badge-success" or
   "badge badge-danger" has been rendering as invisible white text on a
   transparent background - found while building screenshots for the
   client documentation. Matches the same pattern .badge-light already
   uses (background-color + color, no border), and the same green/red
   used for status everywhere else in this stylesheet.
   ====================================================================== */
.badge-success {
  background-color: var(--fj-accent);
  color: #fff;
}
.badge-danger {
  background-color: #f5325c;
  color: #fff;
}

/* ======================================================================
   14. COPILOT CHAT WIDGET
   ----------------------------------------------------------------------
   Styles the floating launcher + panel injected by
   includes/custom_head.php. Scoped entirely under .fj-copilot-* so it
   can't collide with anything else on the page; sits above everything
   via a high z-index since it's meant to be reachable from any screen.
   ====================================================================== */

.fj-copilot-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--fj-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(22, 33, 28, 0.25);
  cursor: pointer;
  z-index: 2147483000;
  transition: transform 150ms ease-in-out, background 150ms ease-in-out;
}
.fj-copilot-launcher:hover {
  background: var(--fj-accent-hover);
  transform: translateY(-2px);
}

.fj-copilot-panel {
  position: fixed;
  right: 24px;
  bottom: 88px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 500px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(22, 33, 28, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
  z-index: 2147483000;
  font-family: "Inter", -apple-system, sans-serif;
}
.fj-copilot-panel.fj-copilot-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.fj-copilot-header {
  background: var(--fj-sidebar);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.fj-copilot-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.fj-copilot-close:hover {
  color: #fff;
}

.fj-copilot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--myabr-bg);
}

.fj-copilot-msg {
  max-width: 84%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.fj-copilot-msg-assistant {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--myabr-neutral-soft);
  color: var(--fj-ink);
  border-bottom-left-radius: 3px;
}
.fj-copilot-msg-user {
  align-self: flex-end;
  background: var(--fj-accent);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.fj-copilot-msg-error {
  align-self: flex-start;
  background: #fde5ea;
  color: #a02540;
  border-bottom-left-radius: 3px;
}
.fj-copilot-msg-thinking {
  color: var(--myabr-muted);
  font-style: italic;
}

.fj-copilot-input-row {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--myabr-neutral-soft);
  background: #fff;
}
.fj-copilot-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--myabr-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  max-height: 120px;
  min-height: 36px;
  color: var(--fj-ink);
}
.fj-copilot-input:focus {
  outline: none;
  border-color: var(--fj-accent);
}
.fj-copilot-send {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: var(--fj-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease-in-out;
}
.fj-copilot-send:hover {
  background: var(--fj-accent-hover);
}
.fj-copilot-send:disabled {
  background: #cfcfcf;
  cursor: default;
}

@media (max-width: 480px) {
  .fj-copilot-panel {
    right: 16px;
    left: 16px;
    width: auto;
    bottom: 80px;
  }
  .fj-copilot-launcher {
    right: 16px;
    bottom: 16px;
  }
}