/* Apsara Boutique — shared Telegram mini-app design tokens (Apple-minimalist luxury)
   Fonts are loaded by each HTML entry (avoid double-fetch when staff remaps to Lotus). */
:root {
  --apsara-primary:        #B8924A;
  --apsara-primary-dark:   #9A7038;
  --apsara-primary-light:  rgba(184, 146, 74, 0.12);
  --apsara-primary-glow:   rgba(184, 146, 74, 0.22);
  --apsara-bg:             #000000;
  --apsara-bg-card:        #161616;
  --apsara-bg-elevated:    #1E1E1E;
  --apsara-text:           #F2F2F2;
  --apsara-text-muted:     #888888;
  --apsara-text-faint:     #555555;
  --apsara-ivory:          #F5EFE6;
  --apsara-border:         rgba(255, 255, 255, 0.07);
  --apsara-border-gold:    rgba(184, 146, 74, 0.22);
  --apsara-font-heading:   'Cormorant Garamond', Georgia, serif;
  --apsara-font-body:      'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --apsara-font-card-title: var(--apsara-font-body);
  --apsara-radius:         16px;
  --apsara-radius-sm:      10px;
  --apsara-radius-pill:    999px;
  --apsara-shadow:         0 8px 32px rgba(0, 0, 0, 0.4);
  --apsara-ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --apsara-transition:     0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --apsara-chat:           #48A894;
  --apsara-chat-dark:      #3A8A78;
  --apsara-chat-light:     rgba(72, 168, 148, 0.14);
  --apsara-chat-glow:      rgba(72, 168, 148, 0.28);
}

/* Chat accent — logo + chat screen only (hotel chrome stays gold) */


/* Typographic wordmark — matches website navbar logo */
.apsara-wordmark {
  font-family: var(--apsara-font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--apsara-ivory);
}

.apsara-wordmark--gold {
  color: var(--apsara-primary);
}

.onboard-hero-overlay .apsara-wordmark {
  font-size: 1.35rem;
}

.login-brand .apsara-wordmark {
  font-size: 1.25rem;
  margin-bottom: 6px;
}

.dash-header .apsara-wordmark {
  font-size: 1.05rem;
}

/* Primary row label on list/card surfaces — room numbers, guest names (sans, gold) */
.apsara-card-title {
  font-family: var(--apsara-font-card-title);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--apsara-primary);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* Date/time inputs — light picker icons on dark surfaces */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.92;
  cursor: pointer;
}

/* Bridge: mini-app-shell uses --lotus-* tokens */
:root {
  --lotus-primary: var(--apsara-primary);
  --lotus-primary-dark: var(--apsara-primary-dark);
  --lotus-primary-light: var(--apsara-primary-light);
  --lotus-primary-glow: var(--apsara-primary-glow);
  --lotus-bg: var(--apsara-bg);
  --lotus-bg-card: var(--apsara-bg-card);
  --lotus-bg-elevated: var(--apsara-bg-elevated);
  --lotus-text: var(--apsara-text);
  --lotus-text-muted: var(--apsara-text-muted);
  --lotus-text-faint: var(--apsara-text-faint);
  --lotus-ivory: var(--apsara-ivory);
  --lotus-border: var(--apsara-border);
  --lotus-border-gold: var(--apsara-border-gold);
  --lotus-font-heading: var(--apsara-font-heading);
  --lotus-font-body: var(--apsara-font-body);
  --lotus-font-card-title: var(--apsara-font-card-title);
  --lotus-radius: var(--apsara-radius);
  --lotus-radius-sm: var(--apsara-radius-sm);
  --lotus-radius-pill: var(--apsara-radius-pill);
  --lotus-shadow: var(--apsara-shadow);
  --lotus-ease: var(--apsara-ease);
  --lotus-transition: var(--apsara-transition);
  --lotus-chat: var(--apsara-chat);
  --lotus-chat-dark: var(--apsara-chat-dark);
  --lotus-chat-light: var(--apsara-chat-light);
  --lotus-chat-glow: var(--apsara-chat-glow);
}

.nav-chat-primary .chat-circle {
  background: var(--apsara-primary) !important;
  box-shadow: 0 4px 12px var(--apsara-primary-glow) !important;
}
.nav-chat-primary.active .chat-circle {
  background: var(--apsara-primary) !important;
  box-shadow: 0 4px 14px var(--apsara-primary-glow) !important;
}
.nav-chat-primary .nav-badge {
  background: var(--apsara-primary) !important;
}
body.is-live-chat .nav-chat-primary .chat-circle,
body.is-live-chat .nav-chat-primary.active .chat-circle {
  background: var(--apsara-chat) !important;
  box-shadow: 0 4px 12px var(--apsara-chat-glow) !important;
}
body.is-live-chat .nav-chat-primary .nav-badge {
  background: var(--apsara-chat) !important;
}

#screen-messages.messages-mode-live {
  --apsara-primary:       var(--apsara-chat);
  --apsara-primary-dark:  var(--apsara-chat-dark);
  --apsara-primary-light: var(--apsara-chat-light);
  --apsara-primary-glow:  var(--apsara-chat-glow);
  --apsara-border-gold:   rgba(72, 168, 148, 0.30);
  --lotus-primary:        var(--apsara-chat);
  --lotus-primary-dark:   var(--apsara-chat-dark);
  --lotus-primary-light:  var(--apsara-chat-light);
  --lotus-primary-glow:   var(--apsara-chat-glow);
  --lotus-border-gold:    rgba(72, 168, 148, 0.30);
}

#screen-messages.messages-mode-live .messages-header {
  background: linear-gradient(135deg, rgba(16, 36, 32, 0.98) 0%, rgba(8, 18, 16, 0.95) 100%);
  border-bottom-color: rgba(72, 168, 148, 0.22);
}
#screen-messages.messages-mode-live .messages-footer {
  border-top-color: rgba(72, 168, 148, 0.22);
}
#screen-messages.messages-mode-live .msg-bubble.msg-guest {
  background: rgba(72, 168, 148, 0.12);
  border-color: rgba(72, 168, 148, 0.32);
}
#screen-messages.messages-mode-live .msg-dept,
#screen-messages.messages-mode-live .msg-dept-name {
  color: #6fd4c0;
}