/*
 * 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-float {
  animation: float-up 3s ease-in-out infinite;
}

/* 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);
}

/* 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;
}

/* ── Listening dots next to label ── */
@keyframes listening-dot {
  0%, 80%, 100% { transform: translateY(0);    opacity: 0.3; }
  40%            { transform: translateY(-4px); opacity: 1;   }
}

.listening-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}

.listening-dots span {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: hsl(var(--primary));
  animation: listening-dot 1.2s ease-in-out infinite;
}

.listening-dots span:nth-child(2) { animation-delay: 200ms; }
.listening-dots span:nth-child(3) { animation-delay: 400ms; }


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

/* ── 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;
}

.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;
}

/* 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));
}

/* Mention banner */
.mention-banner {
  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;
  }
}


/* 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: border-radius 0.2s, background 0.2s, color 0.2s;
  border-radius: 10px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}
.switcher-icon:hover,
.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; }
.waiting-lang-badge {
  font-size: 10px; background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  padding: 1px 6px; border-radius: 9999px; flex-shrink: 0;
}