/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Local fonts — served without internet connection */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/Inter-Variable-latin-eeab71fd.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/DMSans-Variable-latin-fe3ac7ee.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/DMSans-Variable-italic-latin-4ac0368a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Font variables yang dipakai shadcn.css (.font-display pakai DM Sans, body pakai Inter) */
:root {
  --font-inter: 'Inter', system-ui, sans-serif;
  --font-dm-sans: 'DM Sans', system-ui, sans-serif;
}

 @layer base {
  :root {
    --background: 40 20% 98%;
    --foreground: 220 15% 15%;
    --card: 0 0% 100%;
    --card-foreground: 220 15% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 15% 15%;
    --primary: 220 15% 15%;
    --primary-foreground: 40 20% 98%;
    --secondary: 40 15% 95%;
    --secondary-foreground: 220 15% 15%;
    --muted: 40 10% 94%;
    --muted-foreground: 220 10% 46%;
    --accent: 38 50% 60%;
    --accent-foreground: 220 15% 15%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;
    --border: 40 10% 90%;
    --input: 40 10% 90%;
    --ring: 38 50% 60%;
    --chart-1: 38 50% 60%;
    --chart-2: 200 50% 50%;
    --chart-3: 160 40% 45%;
    --chart-4: 280 40% 55%;
    --chart-5: 340 50% 55%;
    --radius: 0.75rem;
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 220 15% 25%;
    --sidebar-primary: 220 15% 15%;
    --sidebar-primary-foreground: 40 20% 98%;
    --sidebar-accent: 40 15% 95%;
    --sidebar-accent-foreground: 220 15% 15%;
    --sidebar-border: 40 10% 90%;
    --sidebar-ring: 38 50% 60%;
    --success: 152 60% 40%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}


/* ─── Animations (from v0.app globals.css) ─── */

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes float-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes subtitleSlideIn {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes barPulse {
  0% { transform: scaleY(0.35); }
  100% { transform: scaleY(1); }
}

@keyframes dotBounce {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-5px); opacity: 1; }
}

.animate-pulse-ring {
  animation: pulse-ring 1.5s ease-out infinite;
}

.animate-pulse-slow {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-float {
  animation: float-up 3s ease-in-out infinite;
}

@keyframes highlight-edit {
  0% { transform: scale(1); filter: brightness(1); }
  25% { transform: scale(1.02); filter: brightness(1.2); }
  100% { transform: scale(1); filter: brightness(1); }
}

.animate-highlight-edit {
  animation: highlight-edit 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom checkbox */
input[type="checkbox"].checkbox-custom {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  border: 1.5px solid hsl(var(--border));
  background-color: hsl(var(--background));
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

input[type="checkbox"].checkbox-custom:hover {
  border-color: hsl(var(--primary) / 0.5);
}

input[type="checkbox"].checkbox-custom:checked {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 72%;
  background-repeat: no-repeat;
  background-position: center;
}

input[type="checkbox"].checkbox-custom:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.language-option:has(input:checked) {
  border-color: hsl(var(--primary) / 0.35);
  background-color: hsl(var(--primary) / 0.04);
}

/* User signin /users/sign_in */

/* ─── Toast notifications ─── */

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-0.75rem) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 10rem;
  }
  to {
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.96);
    max-height: 0;
  }
}

@keyframes toast-progress {
  from { width: 100%; }
  to { width: 0%; }
}

.toast-enter {
  animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-leave {
  animation: toast-out 0.3s ease-in forwards;
  overflow: hidden;
}

.toast-progress {
  animation: toast-progress 4.5s linear forwards;
}

/* ─── Mobile sidebar drawer ─── */

#sidebar-overlay {
  pointer-events: none;
}

#sidebar-overlay.is-open {
  pointer-events: auto;
  z-index: 1000;
}

#sidebar-backdrop {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#sidebar-overlay.is-open #sidebar-backdrop {
  opacity: 1;
}

#sidebar-drawer {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

#sidebar-overlay.is-open #sidebar-drawer {
  transform: translateX(0);
}

/* ─── Tourist menu drawer ─── */

#tourist-menu-overlay {
  pointer-events: none;
}

#tourist-menu-overlay.is-open {
  pointer-events: auto;
}

#tourist-menu-backdrop {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#tourist-menu-overlay.is-open #tourist-menu-backdrop {
  opacity: 1;
}

#tourist-menu-drawer {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

#tourist-menu-overlay.is-open #tourist-menu-drawer {
  transform: translateX(0);
}

/* ─── Group chat info drawer (right edge) ─── */

#group-chat-info-overlay {
  pointer-events: none;
}

#group-chat-info-overlay.is-open {
  pointer-events: auto;
}

#group-chat-info-backdrop {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#group-chat-info-overlay.is-open #group-chat-info-backdrop {
  opacity: 1;
}

#group-chat-info-drawer {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

#group-chat-info-overlay.is-open #group-chat-info-drawer {
  transform: translateX(0);
}

/* dvh unit for iOS Safari — Tailwind v4 may not compile h-dvh if unused elsewhere */
.h-dvh { height: 100dvh; }

/* Prevent horizontal scroll/drag on iOS Safari */
html, body {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* Prevent iOS Safari auto-zoom on input focus (triggered when font-size < 16px) */
@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size: max(16px, 1em) !important;
  }
}

/* ─── Viewer.js toolbar — bigger buttons for easier tap ─── */
.viewer-toolbar > ul > li {
  width: 48px !important;
  height: 48px !important;
}
.viewer-toolbar > ul > li::before {
  margin: 14px !important;
  transform: scale(1.6);
  transform-origin: center;
}

.viewer-container > .viewer-download {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2015;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s;
}

.viewer-container > .viewer-download:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.viewer-container > .viewer-download::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

button.audio-playing {
  background-color: #eff6ff;
  animation: audio-pulse 0.8s ease-in-out infinite alternate;
}

button.audio-playing svg {
  color: #3b82f6;
  fill: currentColor;
}

@keyframes audio-pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.2); }
}

@keyframes stt-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%       { transform: translateY(-4px); opacity: 1; }
}

/* ── Scan line on input field while recording ── */
@keyframes input-scan {
  0%   { left: -30%; }
  100% { left: 110%; }
}

.input-listening {
  border-color: hsl(var(--primary) / 0.5) !important;
  background-color: hsl(var(--muted) / 0.6) !important;
  cursor: not-allowed !important;
  color: hsl(var(--muted-foreground)) !important;
}

.input-scan-line {
  position: absolute;
  bottom: 0;
  left: -30%;
  width: 30%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, hsl(var(--primary)), transparent);
  animation: input-scan 1.4s ease-in-out infinite;
  pointer-events: none;
}


/* Reply button — always visible */
.reply-btn {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.reply-btn:hover,
.msg-row:hover .reply-btn {
  opacity: 1;
}

/* Reaction */
.reaction-trigger-btn {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.reaction-trigger-btn:hover,
.msg-row:hover .reaction-trigger-btn {
  opacity: 1;
}
@media (hover: none) {
  .reaction-trigger-btn { display: none; }
}

.reaction-picker-popover {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem;
  border-radius: 9999px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 6px 20px hsl(var(--foreground) / 0.15);
  animation: reaction-pop-in 0.12s ease-out;
}

@keyframes reaction-pop-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.reaction-picker-item,
.reaction-picker-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.15rem;
  line-height: 1;
  border-radius: 9999px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.1s ease;
}

.reaction-picker-item:hover,
.reaction-picker-more:hover {
  background-color: hsl(var(--muted));
  transform: scale(1.15);
}

.reaction-picker-more {
  color: hsl(var(--muted-foreground));
  font-weight: 700;
}

.reaction-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0 0.25rem;
  margin-top: 5px;
}

.reaction-pills:empty {
  display: none;
}

.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.15rem 0.45rem;
  border-radius: 9999px;
  background: hsl(var(--muted));
  border: 1px solid transparent;
  cursor: pointer;
}

.reaction-pill-mine {
  background: hsl(var(--primary) / 0.12);
  border-color: hsl(var(--primary) / 0.4);
}

.reaction-pill-count {
  color: hsl(var(--muted-foreground));
  font-weight: 600;
}

.reaction-pill-more {
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
}

/* ── Rich input (contenteditable) ── */
.rich-input {
  min-height: 2.5rem;
  max-height: calc(1.4em * 6 + 1.25rem);
  overflow-y: auto;
  word-break: break-word;
  white-space: pre-wrap;
}

.rich-input:empty::before {
  content: attr(data-placeholder);
  color: hsl(var(--muted-foreground));
  pointer-events: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rich-input[contenteditable="false"] {
  cursor: not-allowed;
}

/* No-translate span highlight */
.rich-input span:not(.no-translate-mark) {
  background-color: transparent !important;
}

.no-translate-mark {
  border-bottom: 2px solid hsl(48 96% 40%);
  border-radius: 0;
  padding: 0 1px;
}

.no-translate-mark a {
  text-decoration-color: #3b82f6;
}

/* Di dalam input: background kuning + cursor pointer (bisa diklik untuk hapus) */
.rich-input .no-translate-mark {
  background-color: hsl(48 96% 53% / 0.35);
  border-radius: 2px;
  cursor: pointer;
}

.rich-input .no-translate-mark:hover {
  background-color: hsl(48 96% 53% / 0.55);
}

/* Mention chip — di dalam contenteditable input */
.mention-chip {
  display: inline-block;
  background-color: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  border-radius: 0.375rem;
  padding: 0 0.3rem;
  font-weight: 600;
  font-size: 0.875em;
  line-height: 1.5;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}

/* Mention highlight — di dalam pesan terrender */
.mention-highlight {
  color: hsl(var(--primary));
  font-weight: 600;
}

/* Ketika mention berada di dalam bubble guide (bg-primary), warna harus kontras */
[class*="bg-primary"] .mention-highlight,
.bg-primary .mention-highlight {
  color: hsl(var(--primary-foreground));
  background-color: hsl(var(--primary-foreground) / 0.2);
  border-radius: 0.25rem;
  padding: 0 0.2rem;
}

/* Mention dropdown */
.mention-dropdown {
  max-height: 14rem;
  overflow-y: auto;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  width: 14rem;
  z-index: 50;
}

.mention-item.active {
  background-color: hsl(var(--muted));
}

/* Emoji picker */
.emoji-picker {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 5%;  
  width: min(18rem, calc(100% - 1rem));
  max-height: 16rem;
  height: 16rem;
  z-index: 50;
  padding: 0.5rem;
  gap: 0.35rem;
}

.emoji-picker:not(.hidden) {
  display: flex;
  flex-direction: column;
}

@media (max-width: 640px) {
  .emoji-picker {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    transform: none;
    border-radius: 1rem 1rem 0 0;
    height: 45vh;
  }
}

/* Inline variant (caption modal): part of the normal layout, below the
   caption input, instead of floating over the preview/text. */
.emoji-picker--inline {
  position: static;
  width: 100%;
  height: 14rem;
  max-height: 14rem;
  margin-top: 0.5rem;
}

@media (max-width: 640px) {
  .emoji-picker--inline {
    position: static;
    width: 100%;
    max-width: 100%;
    height: 12rem;
    border-radius: 0.75rem;
  }
}

.emoji-picker-search input {
  width: 100%;
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.4);
  outline: none;
}

.emoji-picker-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  flex-shrink: 0;
}

.emoji-picker-tab {
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
}

.emoji-picker-tab.active {
  background-color: hsl(var(--muted));
}

.emoji-picker-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  align-content: start;
}

.emoji-picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.35rem 0;
  border-radius: 0.5rem;
  cursor: pointer;
  background: transparent;
  border: none;
}

.emoji-picker-item:hover {
  background-color: hsl(var(--muted));
}

.emoji-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  padding: 1rem 0;
}

/* Mention banner */
.mention-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background-color: color-mix(in srgb, hsl(var(--primary)) 10%, hsl(var(--background)));
  animation: mention-slide-in 0.2s ease-out;
}

@keyframes mention-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sheet-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sheet-slide-down {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}

@keyframes modal-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.receipt-modal-align { align-items: flex-end; }
@media (min-width: 640px) { .receipt-modal-align { align-items: center; } }

.receipt-sheet-enter {
  animation: sheet-slide-up 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.receipt-sheet-exit {
  animation: sheet-slide-down 0.25s ease-in forwards;
}

@media (min-width: 640px) {
  .receipt-sheet-enter {
    animation: modal-fade-in 0.2s ease-out forwards;
  }
  .receipt-sheet-exit {
    animation: modal-fade-out 0.15s ease-in forwards;
  }
}

/* Reaction Tabs */
.reaction-tabs {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding: 0.75rem 1rem 0.6rem;
  scrollbar-width: none;
}

.reaction-tabs::-webkit-scrollbar {
  display: none;
}

.reaction-tab {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border));
  background: transparent;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.reaction-tab.active {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.reaction-tab-mine {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.reaction-name-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.25rem;
  font-size: 0.875rem;
}

.reaction-name-row .reaction-name-emoji {
  font-size: 1rem;
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}


/* Original speech inline accordion */
.original-speech-inline .orig-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  padding: 0 !important;
}
.original-speech-inline.open .orig-body {
  max-height: 500px;
  padding: 0 !important;
}
.original-speech-inline .orig-chevron { transition: transform 0.2s ease; }
.original-speech-inline.open .orig-chevron { transform: rotate(180deg); }

/* ── Flatpickr — sesuaikan dengan design system ── */
.flatpickr-calendar {
  font-family: var(--font-inter);
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  background: hsl(var(--card));
}
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  fill: hsl(var(--foreground));
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: hsl(var(--muted-foreground));
  fill: hsl(var(--muted-foreground));
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: hsl(var(--foreground));
}
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: hsl(var(--foreground));
}
.flatpickr-day {
  color: hsl(var(--foreground));
  border-radius: 0.5rem;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: hsl(var(--secondary));
  border-color: hsl(var(--secondary));
}
.flatpickr-day.today {
  border-color: hsl(var(--primary) / 0.4);
}
.flatpickr-day.today:hover {
  background: hsl(var(--primary) / 0.08);
  border-color: hsl(var(--primary) / 0.4);
  color: hsl(var(--foreground));
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: hsl(var(--muted-foreground));
}
.flatpickr-time {
  border-top: 1px solid hsl(var(--border));
}
.flatpickr-time input {
  color: hsl(var(--foreground));
}
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
  background: hsl(var(--secondary));
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: hsl(var(--card));
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: hsl(var(--card));
}

/* MoM modal content styling */
.mom-modal-content h1, .mom-modal-content h2, .mom-modal-content h3 {
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.35rem;
  color: hsl(var(--foreground));
  line-height: 1.3;
}
.mom-modal-content h1 { font-size: 1rem; }
.mom-modal-content h2 { font-size: 0.9rem; }
.mom-modal-content h3 { font-size: 0.825rem; }
.mom-modal-content p { margin-bottom: 0.5rem; font-size: 0.8rem; line-height: 1.6; }
.mom-modal-content ul { padding-left: 1.25rem; margin-bottom: 0.75rem; list-style-type: disc; }
.mom-modal-content ul ul { list-style-type: circle; margin-bottom: 0.25rem; }
.mom-modal-content ol { padding-left: 1.25rem; margin-bottom: 0.75rem; list-style-type: decimal; }
.mom-modal-content li { font-size: 0.8rem; margin-bottom: 0.2rem; line-height: 1.5; }
.mom-modal-content strong { font-weight: 600; }
.mom-modal-content em { font-style: italic; }

/* Discord-style room switcher */
@media (min-width: 1024px) {
  .main-with-switcher { padding-left: calc(60px + 16rem); }
}
.switcher-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700;
  transition: background 0.2s, color 0.2s;
  border-radius: 10px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}
.switcher-icon:hover {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.switcher-icon[data-active] {
  border-radius: 14px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Waiting approval sidebar row */
.waiting-row {
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
  background: color-mix(in srgb, #fef3c7 40%, transparent);
  padding: 0.5rem;
}
.waiting-btn-approve {
  flex: 1; padding: 3px 0; font-size: 10px; font-weight: 600;
  border-radius: 6px; border: none; cursor: pointer;
  background: hsl(var(--success)); color: #fff;
  transition: opacity 0.15s;
}
.waiting-btn-approve:hover { opacity: 0.9; }
.waiting-btn-reject {
  flex: 1; padding: 3px 0; font-size: 10px; font-weight: 600;
  border-radius: 6px; border: none; cursor: pointer;
  background: hsl(var(--destructive)); color: #fff;
  transition: opacity 0.15s;
}
.waiting-btn-reject:hover { opacity: 0.9; }
@media (hover: none) {
  .msg-action-trigger { display: none !important; }
}

.msg-selected .rounded-2xl.overflow-hidden,
.msg-selected .guide-bubble {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

.waiting-lang-badge {
  font-size: 10px; background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  padding: 1px 6px; border-radius: 9999px; flex-shrink: 0;
}

/* ── DUMMY unread-notification badge (host/rooms#index) ───────────────── */
.dummy-notif-anchor {
  position: relative;
}
.dummy-notif-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 9999px;
  background: hsl(var(--destructive));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  border: 2px solid hsl(var(--card));
}
.dummy-notif-badge.is-hidden {
  display: none;
}

.support-unread-badge { background-color: #ef4444; }
.inbox-role-badge { flex-shrink: 0; font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 9999px; }
.inbox-role-badge--participant { background: #dbeafe; color: #1d4ed8; }
.inbox-role-badge--host { background: #ede9fe; color: #6d28d9; }