:root{
  /* DESIGN TOKENS — Apple-like minimal aesthetic with AA contrast (≥4.5:1) */
  
  /* Colors */
  --bg: #0b1020;           /* page background — deep midnight */
  --panel: #0f1529;        /* elevated panels — slightly lighter */
  --surface: #0f172a;      /* nav/footer/cards */
  --card: #111827;         /* legacy card fallback */
  --border: rgba(255,255,255,.08);
  --shadow: 0 6px 20px rgba(0,0,0,.25);

  /* Typography Colors (AA Compliant) */
  --text: #e7eaf0;         /* body text — 11.5:1 contrast on bg */
  --muted: #a7b0c2;        /* secondary text — 5.8:1 contrast on bg */
  --text-muted: #a7b0c2;   /* alias for compatibility */
  
  /* Brand Colors */
  --primary: #3b82f6;      /* primary blue — 4.6:1 on bg */
  --primary-600: #2563eb;  /* darker primary for hover */
  --success: #22c55e;      /* success green */
  --warning: #f59e0b;      /* warning amber */
  --danger: #ef4444;       /* danger red */

  /* Spacing & Borders */
  --radius-lg: 16px;       /* A1 spec: 16px */
  --radius: 10px;
  --radius-sm: 8px;
  --gap: 16px;
  --space: 8px;            /* A1 spec: base spacing unit */

  /* Typography Scale (8pt grid: 16, 24, 32, 40, 48) */
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --h1: clamp(32px, 4vw, 48px);    /* 48px max (8pt × 6) */
  --h2: clamp(24px, 3.2vw, 40px);  /* 40px max (8pt × 5) */
  --h3: clamp(20px, 2.4vw, 32px);  /* 32px max (8pt × 4) */
  --h4: 24px;                       /* 24px (8pt × 3) */
  --body: 16px;                     /* 16px minimum (8pt × 2) */
  --fs-body: 16px;                  /* A1 spec alias */
  --lh: 1.6;                        /* A1 spec: line-height */
  --body-lg: 18px;                  /* 18px large body */
  --body-sm: 14px;                  /* 14px small text */
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  /* Transitions (smooth 200ms standard) */
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base — Typography Foundation with AA Contrast */
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Ensure all text elements use readable colors */
div,span,p,li,td,th,label,strong{
  color:var(--text);
}
a{
  color:var(--primary);
  text-decoration:none;
  transition:color var(--transition);
}
a:hover{
  color:var(--primary-600);
  text-decoration:underline;
}

/* Typography Utilities — 8pt Grid Aligned */
h1,.h1,.heading-xl{
  font-size:var(--h1);
  font-weight:700;
  line-height:1.2;
  margin-bottom:24px;
  letter-spacing:-0.02em;
  color:var(--text);
}
h2,.h2,.heading-lg{
  font-size:var(--h2);
  font-weight:600;
  line-height:1.3;
  margin-bottom:16px;
  letter-spacing:-0.01em;
  color:var(--text);
}
h3,.h3,.heading-md{
  font-size:var(--h3);
  font-weight:600;
  line-height:1.4;
  margin-bottom:16px;
  color:var(--text);
}
h4,.h4,.heading-sm{
  font-size:var(--h4);
  font-weight:600;
  line-height:1.5;
  margin-bottom:8px;
  color:var(--text);
}
.body-lg{font-size:var(--body-lg);line-height:1.7;color:var(--text)}
.body{font-size:var(--body);line-height:1.6;color:var(--text)}
.body-sm{font-size:var(--body-sm);line-height:1.5;color:var(--text)}
.caption{font-size:12px;line-height:1.4;color:var(--muted)}
strong{color:var(--text);font-weight:600}
p{color:var(--text)}

/* Spacing Utilities */
.section-spacing{margin-bottom:4rem}
.section-spacing-sm{margin-bottom:3rem}
.card-spacing{padding:1.5rem}
.card-spacing-lg{padding:2rem}
.stack-sm > * + *{margin-top:0.5rem}
.stack > * + *{margin-top:1rem}
.stack-lg > * + *{margin-top:1.5rem}

/* Icon System */
.icon,.bi{vertical-align:text-bottom;line-height:1}
.icon-xs{font-size:0.75rem;width:12px;height:12px}
.icon-sm{font-size:0.875rem;width:14px;height:14px}
.icon-md{font-size:1rem;width:16px;height:16px}
.icon-lg{font-size:1.25rem;width:20px;height:20px}
.icon-xl{font-size:1.5rem;width:24px;height:24px}
.icon-2xl{font-size:2rem;width:32px;height:32px}
.icon-3xl{font-size:3rem;width:48px;height:48px}
.icon-inline{display:inline-flex;align-items:center;justify-content:center}
.icon-circle{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:2.5rem;height:2.5rem;background:rgba(255,255,255,.08)}
.icon-square{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius);width:2.5rem;height:2.5rem;background:rgba(255,255,255,.08)}
.icon-badge{position:relative}
.icon-badge::after{content:'';position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--card)}

/* Navigation — Icon Alignment & Smooth Transitions */
.navbar{
  background:var(--surface)!important;
  border-bottom:1px solid var(--border);
  padding-top:12px;
  padding-bottom:12px;
}
.navbar-brand{
  font-weight:600;
  font-size:1.125rem;
  display:flex;
  align-items:center;
  gap:8px;
}
.navbar-brand i{
  vertical-align:middle;
  line-height:1;
}
.nav-link{
  padding:8px 12px!important;
  border-radius:8px;
  transition:all var(--transition);
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-link:hover{
  background:rgba(255,255,255,.1);
  transform:translateY(-1px);
}
.nav-link i{
  opacity:.85;
  vertical-align:middle;
  line-height:1;
}
.navbar-nav .nav-item{
  margin:0 4px;
  display:flex;
  align-items:center;
}
.dropdown-menu{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:.5rem}
.dropdown-item{padding:.5rem 1rem;border-radius:8px;color:var(--text);display:flex;align-items:center;gap:.5rem}
.dropdown-item:hover{background:rgba(255,255,255,.08);color:var(--text)}
.dropdown-item i{opacity:.75;width:18px;text-align:center}
.dropdown-header{color:var(--text-muted);font-size:.75rem;font-weight:600;text-transform:uppercase;padding:.5rem 1rem}
.dropdown-divider{border-color:var(--border);margin:.5rem 0}
@media (max-width: 991px){
  .navbar-nav{padding:.5rem 0}
  .nav-item{margin:.25rem 0!important}
  .dropdown-menu{border:0;box-shadow:none;background:rgba(255,255,255,.05);margin-left:1rem}
}

/* Cards & Components — Smooth Transitions */
.footer{background:var(--surface)!important;border-top:1px solid var(--border)}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  transition:all var(--transition);
  color:var(--text)!important;
}
.card *{
  color:var(--text)!important;
}
.card .text-muted,
.card .small,
.card .caption{
  color:var(--muted)!important;
}
.card strong,
.card span,
.card div,
.card p,
.card li{
  color:var(--text)!important;
}
.card:hover{
  border-color:rgba(255,255,255,.12);
}
.card-header{background:transparent;border-bottom:1px solid var(--border);color:var(--text)!important}
.card-body{color:var(--text)!important}
.card-title{color:var(--text)!important}
.badge{
  border-radius:8px;
  transition:all var(--transition-fast);
}
.btn{
  border-radius:10px;
  font-weight:500;
  transition:all var(--transition);
  border:0;
}
.btn:hover{
  transform:translateY(-1px);
}
.btn:active{
  transform:translateY(0);
}
.btn-primary{
  background:var(--primary);
  color:#fff;
}
.btn-primary:hover{
  background:var(--primary-600);
  box-shadow:0 8px 24px rgba(59,130,246,.3);
}
.btn-outline-primary{
  border:1px solid var(--primary);
  color:var(--primary);
  background:transparent;
}
.btn-outline-primary:hover{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.btn-light{
  background:rgba(255,255,255,.95);
  color:#0b1020;
}
.btn-light:hover{
  background:#fff;
  box-shadow:0 4px 12px rgba(255,255,255,.2);
}

.text-muted,.small{color:var(--muted)!important}
.text-primary{color:var(--primary)!important}
.text-success{color:var(--success)!important}
.text-warning{color:var(--warning)!important}
.text-danger{color:var(--danger)!important}

.container-fluid.xwide{padding-left:clamp(16px,4vw,48px);padding-right:clamp(16px,4vw,48px)}

/* Progress bars */
.progress{height:16px;border-radius:999px;background:rgba(255,255,255,.08)}
.progress-bar{border-radius:999px}

/* Tiles */
.cm-kpi{padding:16px;border-radius:12px;border:1px solid var(--border);background:var(--card)}

/* Hero level banner */
.cm-hero{border:1px solid var(--border);border-radius:16px;padding:20px;background:linear-gradient( to bottom, rgba(255,255,255,.02), rgba(255,255,255,.00) );}

/* Nav pills for header shortcuts */
.cm-pills .btn{padding:.45rem .9rem;font-weight:600}

/* Icon alignment */
i.icon, .bi{vertical-align:text-bottom}

/* Forms & Inputs — Smooth Transitions & AA Contrast */
.form-control,.form-select,.form-check-input{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:all var(--transition);
}
.form-control:focus,.form-select:focus{
  background:var(--panel);
  color:var(--text);
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
  outline:0;
  transform:translateY(-1px);
}
.form-control::placeholder{
  color:var(--muted);
  opacity:.7;
}
.form-label{
  color:var(--text);
  font-weight:500;
  margin-bottom:8px;
  font-size:14px;
}
.form-text{
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}
.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}
.form-check-label{color:var(--text);margin-left:.5rem}
.input-group-text{background:var(--surface);color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius)}
.form-control.is-invalid,.form-select.is-invalid{border-color:var(--danger)}
.form-control.is-valid,.form-select.is-valid{border-color:var(--success)}
.invalid-feedback{color:var(--danger);font-size:.75rem;margin-top:.25rem}
.valid-feedback{color:var(--success);font-size:.75rem;margin-top:.25rem}

/* Form Groups */
.form-group{margin-bottom:1.5rem}
.form-floating > label{color:var(--text-muted)}
.form-floating > .form-control:focus ~ label,.form-floating > .form-control:not(:placeholder-shown) ~ label{color:var(--primary)}

/* Tables */
.table{color:var(--text);border-color:var(--border);margin-bottom:0}
.table thead{background:var(--surface);border-bottom:2px solid var(--border)}
.table thead th{font-weight:600;font-size:.875rem;text-transform:uppercase;letter-spacing:.5px;padding:.875rem;border:none;color:var(--text)}
.table tbody td{padding:.875rem;border-bottom:1px solid var(--border);border-top:none;vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table-hover tbody tr{transition:background .15s}
.table-hover tbody tr:hover{background:rgba(255,255,255,.03);cursor:pointer}
.table-striped tbody tr:nth-of-type(odd){background:rgba(255,255,255,.02)}
.table-sm thead th,.table-sm tbody td{padding:.5rem}
.table-responsive{border-radius:var(--radius-lg);overflow:hidden}

/* List Groups */
.list-group-item{background:var(--card);color:var(--text);border-color:var(--border);padding:.875rem 1.25rem;transition:background .15s}
.list-group-item:hover{background:rgba(255,255,255,.03)}
.list-group-item.active{background:var(--primary);border-color:var(--primary);color:#fff}
.list-group-item-action:hover,.list-group-item-action:focus{background:rgba(255,255,255,.05);color:var(--text)}

/* Utilities */
.shadow-elev{box-shadow:var(--shadow)}
.round-lg{border-radius:var(--radius-lg)}
.round{border-radius:var(--radius)}
.round-sm{border-radius:var(--radius-sm)}
.border-subtle{border:1px solid var(--border)}
.text-quiet{color:var(--text-muted)}
.maxw-1200{max-width:1200px;margin:auto}
.maxw-1400{max-width:1400px;margin:0 auto}

/* Alerts & Toasts */
.alert{border-radius:var(--radius);border:1px solid;padding:1rem 1.25rem;margin-bottom:1rem;display:flex;align-items:start;gap:.75rem}
.alert-primary{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.3);color:var(--primary)}
.alert-success{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:var(--success)}
.alert-warning{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3);color:var(--warning)}
.alert-danger{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:var(--danger)}
.alert-info{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.3);color:var(--primary)}
.alert-dismissible .btn-close{background:none;opacity:.6;filter:invert(1)}
.alert-dismissible .btn-close:hover{opacity:1}
.alert-heading{font-size:1.125rem;font-weight:600;margin-bottom:.5rem}

/* Toast Notifications */
.toast{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,0,0,.4);color:var(--text);max-width:350px}
.toast-header{background:transparent;border-bottom:1px solid var(--border);color:var(--text);padding:.75rem 1rem}
.toast-body{padding:1rem}
.toast-container{position:fixed;z-index:1090;padding:1rem}

/* Modals */
.modal-content{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 24px 64px rgba(0,0,0,.5)}
.modal-header{background:transparent;border-bottom:1px solid var(--border);padding:1.25rem 1.5rem}
.modal-title{color:var(--text);font-weight:600}
.modal-body{padding:1.5rem;color:var(--text)}
.modal-footer{background:transparent;border-top:1px solid var(--border);padding:1rem 1.5rem}
.modal-backdrop{background-color:#000}

/* Accordions */
.accordion{border-radius:var(--radius-lg);overflow:hidden}
.accordion-item{background:var(--card);border:1px solid var(--border);margin-bottom:.5rem;border-radius:var(--radius)}
.accordion-button{background:var(--card);color:var(--text);padding:1rem 1.25rem;font-weight:500;border:none}
.accordion-button:not(.collapsed){background:rgba(255,255,255,.03);color:var(--text);box-shadow:none}
.accordion-button:focus{box-shadow:none;border-color:var(--border)}
.accordion-button::after{filter:invert(1)}
.accordion-body{padding:1.25rem;color:var(--text);border-top:1px solid var(--border)}

/* Pagination */
.pagination{gap:.25rem}
.page-link{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:.5rem .75rem;transition:all .15s}
.page-link:hover{background:rgba(255,255,255,.05);color:var(--text);border-color:var(--border)}
.page-link:focus{box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.page-item.active .page-link{background:var(--primary);border-color:var(--primary);color:#fff}
.page-item.disabled .page-link{background:var(--surface);color:var(--text-muted);opacity:.5}

/* Mobile Polish & Sticky CTAs */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);padding:1rem;z-index:1000;box-shadow:0 -8px 24px rgba(0,0,0,.3)}
.sticky-cta-mobile{display:none}
@media (max-width: 768px){
  .sticky-cta-mobile{display:block}
  .sticky-cta-desktop{display:none}
}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:.75rem 0;z-index:1020;box-shadow:0 -4px 12px rgba(0,0,0,.2)}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem 1rem;color:var(--text-muted);text-decoration:none;transition:color .15s;min-width:60px}
.bottom-nav-item:hover,.bottom-nav-item.active{color:var(--primary)}
.bottom-nav-item i{font-size:1.25rem}
.bottom-nav-item span{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.fab-button{position:fixed;bottom:1.5rem;right:1.5rem;width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;border:none;box-shadow:0 8px 24px rgba(59,130,246,.4);display:flex;align-items:center;justify-content:center;font-size:1.5rem;z-index:1010;transition:all .2s}
.fab-button:hover{transform:scale(1.1);box-shadow:0 12px 32px rgba(59,130,246,.5)}
.fab-button:active{transform:scale(.95)}

/* Mobile Touch Targets */
.touch-target{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.touch-friendly{padding:.75rem 1rem;font-size:1rem}

/* Mobile Spacing */
.mobile-spacing{padding-bottom:5rem}
.mobile-spacing-nav{padding-bottom:7rem}

/* Pull-to-Refresh Hint */
.ptr-hint{position:fixed;top:0;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.5rem 1rem;font-size:.875rem;z-index:1030;opacity:0;transition:opacity .2s;pointer-events:none}
.ptr-hint.show{opacity:1}

/* Mobile Card Spacing */
@media (max-width: 768px){
  .card{margin-bottom:1rem}
  .container{padding-left:1rem;padding-right:1rem}
  .section-spacing{margin-bottom:3rem}
  .section-spacing-sm{margin-bottom:2rem}
}

/* Swipeable Cards */
.swipeable-card{position:relative;transition:transform .2s;cursor:grab}
.swipeable-card:active{cursor:grabbing}

/* Mobile-Optimized Buttons */
@media (max-width: 768px){
  .btn{padding:.75rem 1.25rem;font-size:1rem}
  .btn-lg{padding:1rem 1.5rem;font-size:1.125rem}
  .btn-sm{padding:.5rem 1rem;font-size:.875rem}
}

/* Light mode (optional) */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f7fb; --surface:#fff;
    --card:#fff; --border:rgba(0,0,0,.08);
    --text:#0b1220; --text-muted:#5b6577;
  }
}

/* A3: Global AI Copilot Launcher (Floating Action Button) */
.copilot-fab{
  position:fixed;
  bottom:2rem;
  right:2rem;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  border:none;
  box-shadow:0 8px 24px rgba(59,130,246,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  z-index:1050;
  cursor:pointer;
  transition:all var(--transition);
}
.copilot-fab:hover{
  transform:scale(1.1);
  box-shadow:0 12px 32px rgba(59,130,246,.5);
  background:var(--primary-600);
}
.copilot-fab:active{
  transform:scale(.95);
}
.copilot-fab[aria-expanded="true"]{
  transform:rotate(90deg);
}

/* A3: Copilot Slide-Over Panel */
.copilot-panel{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:1100;
  display:none;
  transition:all var(--transition);
}
.copilot-panel.active{
  display:block;
}

/* Overlay (darkens background) */
.copilot-panel-overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,.6);
  opacity:0;
  transition:opacity var(--transition);
}
.copilot-panel.active .copilot-panel-overlay{
  opacity:1;
}

/* Panel Content (slide-over from right) */
.copilot-panel-content{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:100%;
  max-width:480px;
  background:var(--panel);
  box-shadow:-8px 0 32px rgba(0,0,0,.5);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform var(--transition);
}
.copilot-panel.active .copilot-panel-content{
  transform:translateX(0);
}

/* Panel Header */
.copilot-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.copilot-panel-header h2{
  color:var(--text);
  margin:0;
}

/* Close Button */
.copilot-close-btn{
  background:transparent;
  border:none;
  color:var(--text);
  font-size:1.25rem;
  padding:0.5rem;
  cursor:pointer;
  border-radius:var(--radius-sm);
  transition:all var(--transition-fast);
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
}
.copilot-close-btn:hover{
  background:rgba(255,255,255,.1);
}

/* Panel Body */
.copilot-panel-body{
  flex:1;
  overflow-y:auto;
  padding:1.5rem;
}

/* D1: Mic Button */
.copilot-mic-btn{
  background:transparent;
  border:none;
  color:#1a73e8;
  cursor:pointer;
  padding:0.5rem;
  border-radius:4px;
  transition:background 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.copilot-mic-btn:hover{
  background:rgba(26,115,232,0.1);
}
.copilot-mic-btn.recording{
  color:#dc3545;
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100% { opacity:1; }
  50% { opacity:0.5; }
}

/* D1: Voice Recording Indicator */
.voice-recording-indicator{
  margin-bottom:0.5rem;
}
.voice-recording-indicator .spinner-grow{
  width:1rem;
  height:1rem;
}

/* Mobile: Full-Screen */
@media (max-width: 768px){
  .copilot-panel-content{
    max-width:100%;
    width:100%;
  }
  
  .copilot-fab{
    bottom:1.5rem;
    right:1.5rem;
  }
}

/* Accessibility: Reduce Motion */
@media (prefers-reduced-motion: reduce){
  .copilot-fab,
  .copilot-panel-overlay,
  .copilot-panel-content,
  .copilot-close-btn{
    transition:none;
  }
}

/* B2: Copilot Chat Interface Styles */
.copilot-panel-body{
  display:flex;
  flex-direction:column;
  padding:0;
}

.copilot-messages{
  flex:1;
  overflow-y:auto;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.copilot-welcome{
  text-align:center;
  padding:3rem 1rem;
  color:var(--muted);
}

.copilot-message{
  display:flex;
  gap:0.75rem;
  max-width:85%;
  animation:slideUp 0.2s ease;
}

.copilot-message.user{
  align-self:flex-end;
  flex-direction:row-reverse;
}

.copilot-message.assistant{
  align-self:flex-start;
}

.copilot-message-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:1rem;
}

.copilot-message.user .copilot-message-avatar{
  background:var(--primary);
  color:white;
}

.copilot-message.assistant .copilot-message-avatar{
  background:rgba(59,130,246,0.2);
  color:var(--primary);
}

.copilot-message-content{
  background:var(--surface);
  padding:0.75rem 1rem;
  border-radius:12px;
  color:var(--text);
  line-height:1.5;
}

.copilot-message.user .copilot-message-content{
  background:var(--primary);
  color:white;
}

.copilot-input-container{
  border-top:1px solid var(--border);
  padding:1rem 1.5rem;
  background:var(--surface);
}

.copilot-form{
  display:flex;
  gap:0.75rem;
  align-items:flex-end;
}

.copilot-textarea{
  flex:1;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:0.75rem 1rem;
  color:var(--text);
  font-size:0.9375rem;
  resize:none;
  max-height:120px;
  font-family:inherit;
  transition:border-color var(--transition-fast);
}

.copilot-textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(59,130,246,0.1);
}

.copilot-textarea::placeholder{
  color:var(--muted);
}

.copilot-submit-btn{
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--primary);
  border:none;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all var(--transition-fast);
  flex-shrink:0;
}

.copilot-submit-btn:hover:not(:disabled){
  background:var(--primary-600);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(59,130,246,0.3);
}

.copilot-submit-btn:active:not(:disabled){
  transform:translateY(0);
}

.copilot-submit-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

.copilot-typing{
  display:flex;
  gap:0.3rem;
  padding:1rem;
}

.copilot-typing-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--primary);
  animation:typing 1.4s infinite;
}

.copilot-typing-dot:nth-child(2){
  animation-delay:0.2s;
}

.copilot-typing-dot:nth-child(3){
  animation-delay:0.4s;
}

@keyframes typing{
  0%, 60%, 100%{
    opacity:0.3;
    transform:translateY(0);
  }
  30%{
    opacity:1;
    transform:translateY(-8px);
  }
}

@keyframes slideUp{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ========================================================================
   DEPLOYMENT FIX - Copilot Panel High Contrast & Layout Fixes
   ======================================================================== */

/* Copilot Panel - High Contrast Fix for Better Readability */
.copilot-panel,
.copilot-sidebar,
.ai-copilot-panel,
#copilot-sidebar {
  background: #1a1f36 !important; /* Lighter than bg for contrast */
  border-left: 1px solid rgba(255,255,255,.15) !important;
  color: #ffffff !important; /* Pure white text for maximum contrast */
}

.copilot-panel *,
.copilot-sidebar *,
.ai-copilot-panel *,
#copilot-sidebar * {
  color: #ffffff !important; /* Ensure all child elements have white text */
}

.copilot-panel .text-muted,
.copilot-sidebar .text-muted,
.ai-copilot-panel .text-muted,
#copilot-sidebar .text-muted {
  color: #b8c4d8 !important; /* Lighter muted text for better contrast */
}

.copilot-panel h1, .copilot-panel h2, .copilot-panel h3,
.copilot-panel h4, .copilot-panel h5, .copilot-panel h6,
.copilot-sidebar h1, .copilot-sidebar h2, .copilot-sidebar h3,
.copilot-sidebar h4, .copilot-sidebar h5, .copilot-sidebar h6,
.ai-copilot-panel h1, .ai-copilot-panel h2, .ai-copilot-panel h3,
.ai-copilot-panel h4, .ai-copilot-panel h5, .ai-copilot-panel h6,
#copilot-sidebar h1, #copilot-sidebar h2, #copilot-sidebar h3,
#copilot-sidebar h4, #copilot-sidebar h5, #copilot-sidebar h6 {
  color: #ffffff !important; /* White headings */
}

.copilot-panel .btn-primary,
.copilot-sidebar .btn-primary,
.ai-copilot-panel .btn-primary,
#copilot-sidebar .btn-primary {
  background: #4a90ff !important; /* Brighter blue for better visibility */
  color: #ffffff !important;
  border: none !important;
}

.copilot-panel .btn-primary:hover,
.copilot-sidebar .btn-primary:hover,
.ai-copilot-panel .btn-primary:hover,
#copilot-sidebar .btn-primary:hover {
  background: #5ba0ff !important;
}

/* Copilot Messages Better Contrast */
.copilot-messages .message {
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}

/* ========================================================================
   DEPLOYMENT FIX - Layout Fixes for Text Wrapping and Overflow
   ======================================================================== */

/* Fix text truncation and overflow issues */
.leaderboard-row,
.referral-row,
.table td,
.table th,
.card-text {
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
}

/* Fix fixed width containers */
.container,
.container-fluid,
.card-body,
.table-responsive {
  overflow-x: auto !important;
  max-width: 100% !important;
}

/* Prevent text truncation everywhere */
.text-truncate {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
}

/* Leaderboard specific fixes */
.leaderboard-table td,
.leaderboard-table th,
table.leaderboard td,
table.leaderboard th {
  padding: 0.75rem !important;
  vertical-align: middle !important;
  min-width: auto !important;
  word-break: break-word !important;
}

.leaderboard-name,
.leaderboard-username {
  max-width: 200px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Referral page specific fixes */
.referral-card,
.referral-stats,
.referral-link,
.referral-code {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

/* Fix long URLs and codes */
.referral-link-text,
.share-link,
code,
pre {
  word-break: break-all !important;
  overflow-wrap: break-word !important;
  white-space: pre-wrap !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .table {
    font-size: 0.875rem !important;
  }
  
  .table td, .table th {
    padding: 0.5rem !important;
  }
  
  .card-body {
    padding: 1rem !important;
  }
  
  /* Stack elements on mobile */
  .leaderboard-row,
  .referral-row {
    flex-direction: column !important;
  }
  
  .leaderboard-name,
  .leaderboard-username {
    max-width: 100% !important;
  }
}