/*
 * 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.
 */
button {
  cursor: pointer;
}

.zendesk-iframe-container {
  z-index: 50;
  right: env(safe-area-inset-right);
  bottom: env(safe-area-inset-bottom);
  width: 80px;
  height: 80px;
  overflow: visible;
  opacity: 0;
}

.zendesk-iframe-container.zendesk-iframe-container--open {
  z-index: 9999;
  width: min(400px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)));
  height: min(600px, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  overflow: hidden;
}

.zendesk-iframe-container.zendesk-iframe-container--ready {
  opacity: 1;
}

/* Flatpickr is loaded after the application stylesheet; the extra calendar
   selector keeps these tokenized product defaults more specific without
   runtime style injection or priority overrides. */
.flatpickr-calendar.flatpickr-calendar {
  margin-top: 15px;
  transform: translateY(5px);
  border-radius: 16px;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input,
.flatpickr-calendar .flatpickr-day {
  font-size: 15px;
}

.flatpickr-calendar .flatpickr-day {
  border-radius: 50%;
}

.flatpickr-calendar .flatpickr-time .flatpickr-minute {
  pointer-events: none;
  opacity: 0.6;
  background-color: hsl(var(--muted));
  cursor: not-allowed;
}

.flatpickr-calendar .flatpickr-time .flatpickr-time-separator + .numInputWrapper .arrowUp,
.flatpickr-calendar .flatpickr-time .flatpickr-time-separator + .numInputWrapper .arrowDown {
  display: none;
}

[data-date-range-picker] {
  position: relative;
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

[data-date-range-picker].picker-outlined {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.1);
}

#picker-connection-line {
  position: absolute;
  bottom: -1px;
  z-index: 10;
  height: 2px;
  background-color: hsl(var(--primary));
  opacity: 0;
  transition:
    left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease-in-out;
}

/* Round checkbox for login page
   Note: --button-dark-blue is defined in app/assets/tailwind/application.css */
input[type="checkbox"].checkbox-round {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid hsl(var(--button-dark-blue));
  border-radius: 50%;
  background-color: hsl(var(--background));
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

input[type="checkbox"].checkbox-round:checked {
  border-color: hsl(var(--button-dark-blue));
}

input[type="checkbox"].checkbox-round:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  background-color: hsl(var(--button-dark-blue));
  border-radius: 50%;
}

input[type="checkbox"].checkbox-round:focus {
  outline: none;
}

input[type="checkbox"].checkbox-round:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.3);
}

/* Custom Scrollbar - Hide by default, show on hover */
/* For containers with overflow-y-auto or overflow-y-scroll */
[class*="overflow-y-auto"]::-webkit-scrollbar,
[class*="overflow-y-scroll"]::-webkit-scrollbar {
  width: 6px;
}

[class*="overflow-y-auto"]::-webkit-scrollbar-track,
[class*="overflow-y-scroll"]::-webkit-scrollbar-track {
  background: transparent;
}

[class*="overflow-y-auto"]::-webkit-scrollbar-thumb,
[class*="overflow-y-scroll"]::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 4px;
}

[class*="overflow-y-auto"]:hover::-webkit-scrollbar-thumb,
[class*="overflow-y-scroll"]:hover::-webkit-scrollbar-thumb {
  background-color: hsl(var(--foreground) / 0.2);
}

[class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover,
[class*="overflow-y-scroll"]::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--foreground) / 0.3);
}

/* Fix draft agent layout - prevent breaking at specific widths while maintaining full width */
.agents-list-card .group.relative {
  position: relative;
  width: 100%;
  min-height: 80px;
}

/* 保持 flex container 全寬度，但為絕對定位按鈕預留視覺空間 */
.agents-list-card .group.relative .flex.items-start {
  width: 100%;
  position: relative;
}

.agents-list-card .group.relative .agent-item {
  width: 100%;
  padding-right: 2.5rem; /* 為刪除按鈕預留足夠空間 */
  box-sizing: border-box;
}

.agents-list-card .absolute.top-3.right-3 {
  top: 0.75rem;
  right: 0.75rem;
  position: absolute;
  z-index: 10;
  flex-shrink: 0;
}

/* Pagination Button Styles */
.pagination-disabled {
  color: hsl(var(--muted-foreground));
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination-enabled {
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.pagination-enabled:hover {
  color: hsl(var(--foreground));
}

/* Shared pagination */
/* Active page button */
.pagination-button-active {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Inactive page button - matches design with border and gray text */
.pagination-button-inactive {
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
}

/* Enabled navigation buttons */
.pagination-nav-enabled {
  color: hsl(var(--foreground));
  cursor: pointer;
}

/* Disabled navigation buttons */
.pagination-nav-disabled {
  color: hsl(var(--foreground));
  opacity: 0.5;
  cursor: not-allowed;
}

/* Base navigation button styles */
.pagination-nav-button {
  transition: opacity 0.2s ease-in-out;
}

/* Base pagination button styles */
.pagination-button {
  transition: all 0.2s ease-in-out;
  border: 1px solid transparent;
}

/* Hover effects */
.pagination-button-inactive:hover:not(:disabled) {
  border-color: hsl(var(--primary));
}

.pagination-nav-enabled:hover {
  opacity: 0.8;
}

/* Settings / System sidebar frame layout: vertical on mobile, horizontal on desktop */
.sidebar-frame-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
}

body:has(#settings_frame) [data-page-content] {
  padding-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .sidebar-frame-layout {
    flex-direction: row;
    height: calc(100vh - 130px);
    padding-top: 0;
    padding-bottom: 0;
  }

  #settings_frame.sidebar-frame-layout {
    height: calc(100vh - 48px);
  }

  #system_frame.sidebar-frame-layout {
    height: calc(100vh - 48px);
  }

  body:has([data-top-banner-container]) #settings_frame.sidebar-frame-layout {
    height: calc(100vh - 122px);
  }

  body:has([data-top-banner-container]) #system_frame.sidebar-frame-layout {
    height: calc(100vh - 122px);
  }
}

/* Conversations layout column gap */
.conversations-layout {
  gap: 1rem;
}

/* Conversations main content area responsive heights.
   notification_banner_controller.js swaps between these two class names as single strings. */
.conversations-height-default {
  height: calc(100vh - 140px);
}
@media (min-width: 1024px) {
  .conversations-height-default {
    height: calc(100vh - 116px);
  }
}
.conversations-height-banner {
  height: calc(100vh - 204px);
}
@media (min-width: 1024px) {
  .conversations-height-banner {
    height: calc(100vh - 208px);
  }
}

/* Performance page - 一般標籤 and AI 標籤 sections should be 50-50 on large screens */
@media (min-width: 1024px) {
  .flex.gap-6.mb-8 > .flex-1 {
    flex: 1 1 50%;
    width: 50%;
  }
}

/* Fix empty state height and spacing - test without media query */
#chat-area.flex.items-center.justify-center {
  max-height: none;
  padding: 2rem;
}

[data-mobile-sidebar-target="trigger"] {
  top: calc(env(safe-area-inset-top) + 1rem);
  left: calc(env(safe-area-inset-left) + 1rem);
}

[data-mobile-sidebar-target="sheet"] {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-toasts {
  top: max(env(safe-area-inset-top), 1rem);
}

.safe-area-flash {
  top: max(env(safe-area-inset-top), 2rem);
  max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 2rem);
}

.safe-area-bottom-sheet {
  padding-bottom: max(env(safe-area-inset-bottom), 1rem);
}

.safe-area-main,
.safe-area-devise {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

.safe-area-main.safe-area-main--masquerading {
  padding-top: calc(4rem + env(safe-area-inset-top));
}


/* Animation for new message notification button */
@keyframes bounce-once {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-bounce-once {
  animation: bounce-once 0.5s ease-in-out;
}

/* ========================================
   PREVIEW WIDGET STYLES
   ======================================== */

.preview-widget {
  width: min(400px, 100%);
  height: min(650px, 100dvh);
}

.ai-review-panel {
  width: min(400px, 100%);
  height: min(650px, 100dvh);
}

/* md+ 時 body 有 24px padding（md:p-6），高度要扣掉上下 padding 才不會把頁面撐出垂直捲動、切掉面板頂部 */
@media (min-width: 768px) {
  .preview-widget,
  .ai-review-panel {
    height: min(650px, calc(100dvh - 3rem));
  }
}

/* turbo_stream_from 渲染的自訂元素沒有預設樣式（display:inline），
   在 preview 的 flex body 會變成隱形 flex item、多吃一個 gap 寬度 */
turbo-cable-stream-source {
  display: none;
}

/* Hide empty state automatically when any round card is appended */
.ai-review-panel:has(.ai-review-round) [data-ai-review-empty] {
  display: none;
}

/* Show Ticket/Conversation ID block only when at least one round card exists */
.ai-review-panel [data-ai-review-ids] {
  display: none;
}

.ai-review-panel:has(.ai-review-round) [data-ai-review-ids] {
  display: block;
}

/* Social OAuth modals align with the Lovable compact authorization flow. */
.social-oauth-waiting-modal,
.social-oauth-selection-modal {
  width: calc(100% - 2rem);
  border-radius: 16px;
}

.social-oauth-waiting-modal {
  max-width: 448px;
}

.social-oauth-selection-modal {
  max-width: 448px;
}

.social-oauth-selection-checkbox {
  accent-color: hsl(var(--color-toggle-active));
}

.social-oauth-waiting-modal > button.absolute,
.social-oauth-selection-modal > button.absolute {
  top: 23px;
  right: 1.5rem;
}

@media (min-width: 640px) {
  .social-oauth-waiting-modal,
  .social-oauth-selection-modal {
    width: 100%;
  }

  .social-oauth-selection-modal {
    max-width: 560px;
    padding: 2rem;
  }

  .social-oauth-selection-modal > button.absolute {
    top: 31px;
    right: 2rem;
  }
}