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

/* 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: rgba(0, 0, 0, 0.2);
}

[class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover,
[class*="overflow-y-scroll"]::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 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: #D1D5DB !important;
  cursor: not-allowed !important;
}

.pagination-enabled {
  color: #9CA3AF !important;
  cursor: pointer !important;
}

.pagination-enabled:hover {
  color: #6B7280 !important;
}

/* Shared pagination */
/* Active page button - matches Primary/Default (#6B96EC) from Figma */
.pagination-button-active {
  background-color: #6B96EC;
  color: white;
}

/* Inactive page button - matches design with border and gray text */
.pagination-button-inactive {
  background-color: white;
  border: 1px solid #E5E5E5;
  /* Neutral/200 */
  color: #6A7282;
  /* Gray/500 */
}

/* Enabled navigation buttons */
.pagination-nav-enabled {
  color: #314158;
  /* Slate/700 */
  cursor: pointer;
}

/* Disabled navigation buttons */
.pagination-nav-disabled {
  color: #314158;
  /* Slate/700 */
  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: #6B96EC;
}

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

/* Conversations layout spacing for large screens */
.conversations-layout {
  gap: 1rem;
}

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

/* Knowledge Base 已上傳檔案布局修正 - 防止 badge 被檔案名稱擠壓 */
/* 覆蓋固定高度，允許內容自動調整高度 */
.uploaded-files[style*="height: 76px"] {
  height: auto !important;
  min-height: 76px;
}

.uploaded-files .flex.items-center.justify-between {
  gap: 1rem;
  align-items: flex-start;
  min-height: 68px; /* 保持最小高度 = 76px - padding(8px) */
}

.uploaded-files .flex.items-center.space-x-3 {
  flex: 1;
  min-width: 0;
  align-items: flex-start;
}

.uploaded-files .flex.items-center.space-x-3 .space-y-1 {
  min-width: 0;
  flex: 1;
}

.uploaded-files .flex.items-center.space-x-3 .text-\[16px\] {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
}

.uploaded-files .flex.items-center.space-x-2 {
  flex-shrink: 0;
  min-width: fit-content;
  align-self: flex-start;
  margin-top: 0.25rem;
}


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

.conversations-empty-state {
  padding: 2rem !important;
}


/* ========================================
   RESPONSIVE DESIGN STYLES (1080px and below)
   ======================================== */

/* Compact layout for small screens (1080px and below) */
@media (max-width: 1199px) {
  /* ========================================
     AGENTS PAGE RESPONSIVE STYLES
     ======================================== */

  /* Agents Header */
  .agents-header {
    margin-bottom: 0.75rem !important;
  }

  .agents-header h1 {
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
  }

  .agents-header .button-group {
    gap: 0.5rem !important;
  }

  .agents-header button,
  .agents-header a {
    height: 1.75rem !important;
    padding: 0 0.5rem !important;
    font-size: 0.625rem !important;
    line-height: 1rem !important;
    border-radius: 0.75rem !important;
  }

  .agents-header button svg,
  .agents-header a svg {
    width: 0.75rem !important;
    height: 0.75rem !important;
    margin-right: 0.25rem !important;
  }

  /* Agents Grid Layout */
  .agents-grid {
    gap: 0.5rem !important;
  }

  /* Agents List Card */
  .agents-list-card {
    border-radius: 1rem !important;
  }

  .agents-list-card .p-6 {
    padding: 1rem !important;
  }

  .agents-list-card h2 {
    font-size: 1rem !important;
    line-height: 1.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .agents-list-card > div > p {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    margin-bottom: 0.75rem !important;
  }

  .agents-list-card .agent-item {
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    border-radius: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Change header layout to vertical for mobile */
  .agents-list-card .agent-item > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* Handle different structure for ready agents */
  .agents-list-card .agent-item .flex.items-center.mb-2 {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .agents-list-card .agent-avatar {
    width: 1.5rem !important;
    height: 1.5rem !important;
    flex-shrink: 0 !important;
    margin-bottom: 0.25rem !important;
  }

  .agents-list-card .agent-name {
    font-size: 0.625rem !important;
    line-height: 0.875rem !important;
    margin-left: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  .agents-list-card .status-badge {
    font-size: 0.625rem !important;
    line-height: 0.875rem !important;
    padding: 0.125rem 0.375rem !important;
    height: 1.25rem !important;
    border-radius: 0.625rem !important;
  }

  .agents-list-card .status-badge svg {
    width: 0.625rem !important;
    height: 0.625rem !important;
    margin-right: 0.25rem !important;
  }

  /* Agents Detail Container */
  .agents-detail-container {
    min-height: 320px !important;
    padding: 1rem !important;
    border-radius: 0.75rem !important;
  }

  .agents-detail-container > div {
    padding: 0.5rem !important;
  }

  .agents-detail-container svg.w-12 {
    width: 2rem !important;
    height: 2rem !important;
    margin-bottom: 0.75rem !important;
  }

  .agents-detail-container h2 {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .agents-detail-container > div > p {
    font-size: 0.625rem !important;
    line-height: 0.875rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Agents Option Cards */
  .agents-detail-container .option-card {
    padding: 0.75rem !important;
    border-radius: 0.5rem !important;
    width: 100% !important;
    max-width: 200px !important;
  }

  .agents-detail-container .option-card h3 {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    margin-bottom: 0.125rem !important;
  }

  .agents-detail-container .option-card p {
    font-size: 0.5rem !important;
    line-height: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  .agents-detail-container .option-card .space-y-2 {
    gap: 0.25rem !important;
  }

  .agents-detail-container .option-card .flex {
    font-size: 0.5rem !important;
    line-height: 0.75rem !important;
  }

  .agents-detail-container .option-card svg {
    width: 0.625rem !important;
    height: 0.625rem !important;
    margin-right: 0.25rem !important;
  }

  .agents-detail-container .option-card button,
  .agents-detail-container .option-card a {
    height: 1.5rem !important;
    font-size: 0.625rem !important;
    line-height: 0.875rem !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.75rem !important;
  }

  .agents-detail-container .option-card .absolute {
    font-size: 0.375rem !important;
    line-height: 0.5rem !important;
    padding: 0.125rem 0.25rem !important;
    top: -0.5rem !important;
    right: 0.5rem !important;
  }

  /* Two column layout for option cards */
  .agents-detail-container .flex.flex-col {
    flex-direction: row !important;
    gap: 0.5rem !important;
  }

  /* Hide timestamps on small screens but keep delete buttons */
  .agent-timestamp {
    display: none !important;
  }


  /* Smaller delete buttons on mobile */
  .agents-list-card .absolute.top-3.right-3 {
    top: 0.625rem !important;
    right: 0.25rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    padding: 0.125rem !important;
    opacity: 1 !important; /* 確保在小螢幕上可見 */
  }

  .agents-list-card .absolute.top-3.right-3 svg {
    width: 0.75rem !important;
    height: 0.75rem !important;
  }

  /* Agents Form Container */
  .agents-form-container {
    border-radius: 0.75rem !important;
    padding: 1rem !important;
  }

  /* ========================================
     CONVERSATIONS PAGE RESPONSIVE STYLES
     ======================================== */

  /* Conversations Page Header */
  .conversations-container {
    margin-bottom: 0.75rem !important;
  }

  .conversations-header h1 {
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
  }

  /* Main Layout Container */
  .conversations-main-content {
    min-height: 400px !important;
    height: auto !important;
  }

  .conversations-main-content.h-\[calc\(100vh-12rem\)\] {
    height: auto !important;
  }

  .conversations-layout {
    flex-direction: row !important;
    gap: 0.5rem !important;
    align-items: flex-start !important;
  }

  /* Conversation List Container */
  .w-\[320px\].conversations-list-container,
  div.conversations-list-container[class*="w-[320px]"],
  .conversations-layout .w-\[320px\],
  body .conversations-list-container.w-\[320px\],
  div.w-\[320px\].h-full.bg-white.rounded-3xl.border.border-gray-200.flex.flex-col.conversations-list-container {
    width: 200px !important;
    max-width: 200px !important;
    min-width: 200px !important;
    height: 400px !important;
    max-height: 400px !important;
    border-radius: 1.5rem !important;
  }

  .conversations-list-container {
    border-radius: 0.75rem !important;
    min-height: 400px !important;
    height: auto !important;
    align-self: flex-start !important;
  }

  /* Conversation List Content Styling */
  .conversations-list-container .px-4 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .conversations-list-container .py-4 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .conversations-list-container .px-3 {
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
  }

  .conversations-list-container .py-3 {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
  }

  /* Conversation Item Styling */
  .conversations-list-container .px-3.py-3 {
    padding: 0.5rem !important;
  }

  .conversations-list-container .w-10 {
    width: 2rem !important;
    height: 2rem !important;
  }

  .conversations-list-container .w-3 {
    width: 0.75rem !important;
    height: 0.75rem !important;
  }

  .conversations-list-container .max-w-\[140px\] {
    max-width: 100px !important;
  }

  .conversations-list-container .px-2 {
    padding: 0.25rem 0.375rem !important;
  }

  .conversations-list-container .px-2\.5 {
    padding: 0.25rem 0.5rem !important;
  }

  .conversations-list-container .py-1 {
    padding-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
  }

  .conversations-list-container .py-2\.5 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .conversations-list-container .gap-3 {
    gap: 0.5rem !important;
  }

  .conversations-list-container .gap-2 {
    gap: 0.375rem !important;
  }

  .conversations-list-container .gap-1 {
    gap: 0.25rem !important;
  }

  .conversations-list-container .mb-1 {
    margin-bottom: 0.25rem !important;
  }

  .conversations-list-container .px-3.py-1\.5 {
    padding: 0.25rem 0.5rem !important;
  }

  /* Chat Container Layout */
  .conversations-chat-container {
    margin-left: 0.25rem !important;
  }

  /* Chat Room Container */
  #chat-area .flex.gap-4.w-full.h-full > .flex-1 {
    height: 400px !important;
    max-height: 400px !important;
  }

  /* Chat Area Layout */
  #chat-area .flex.gap-4.w-full.h-full {
    gap: 0.75rem !important;
    flex-wrap: nowrap !important;
  }

  #chat-area .flex.gap-4.w-full.h-full.p-4 {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    padding: 1rem !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  /* Chat room wider than data panel */
  #chat-area .flex-1:first-child {
    flex: 1.5 !important;
    width: 60% !important;
  }

  /* Chat Message Width Optimization */
  #messages-container [class*="max-w-[50%]"],
  #messages-container div[class*="max-w-[50%]"] {
    max-width: 80% !important;
  }

  /* Empty State Adjustments */
  .conversations-empty-state {
    padding: 1rem !important;
    border-radius: 0.75rem !important;
    height: auto !important;
    min-height: auto !important;
  }

  .conversations-empty-state.h-full {
    height: auto !important;
  }

  #chat-area.flex-1.h-full {
    height: auto !important;
    min-height: fit-content !important;
  }

  #chat-area.flex.items-center.justify-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 400px !important;
  }

  .conversations-empty-state h2 {
    font-size: 1rem !important;
    line-height: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }

  .conversations-empty-state .max-w-\[576px\] {
    max-width: 100% !important;
  }

  .conversations-empty-state .max-w-\[576px\] p {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  .conversations-empty-state .w-12 {
    width: 2rem !important;
    height: 2rem !important;
  }

  .conversations-empty-state .gap-6 {
    gap: 1rem !important;
    flex-direction: column !important;
  }

  .conversations-empty-state .w-\[282px\] {
    width: 100% !important;
    max-width: 200px !important;
  }

  .conversations-empty-state .p-6 {
    padding: 0.75rem !important;
  }

  .conversations-empty-state .w-12.h-12 {
    width: 2rem !important;
    height: 2rem !important;
  }

  .conversations-empty-state .mb-4 {
    margin-bottom: 0.5rem !important;
  }

  .conversations-empty-state .text-lg {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }

  .conversations-empty-state .leading-relaxed {
    line-height: 1.25 !important;
  }

  .conversations-empty-state .space-y-2 > * + * {
    margin-top: 0.25rem !important;
  }

  /* ========================================
     DATA PANEL RESPONSIVE STYLES
     ======================================== */

  /* Data Panel Container */
  .conversations-data-panel,
  #chat-area .flex.gap-4.w-full.h-full > .conversations-data-panel {
    height: 400px !important;
    max-height: 400px !important;
    flex: 1 !important;
    width: 40% !important;
    min-width: 0 !important;
  }

  #chat-area .conversations-data-panel.w-\[320px\],
  #chat-area div.w-\[320px\].conversations-data-panel {
    width: 40% !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  #chat-area .conversations-data-panel #data-panel {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #chat-area .conversations-data-panel .flex-1.overflow-y-auto {
    width: 100% !important;
  }

  #chat-area .conversations-data-panel .px-4.py-6 {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .conversations-data-panel .flex-1 {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Data Panel Content */
  .conversations-data-panel .px-4.py-6 {
    padding: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .conversations-data-panel .space-y-6 {
    width: 100% !important;
  }

  .conversations-data-panel .space-y-6 > * + * {
    margin-top: 0.75rem !important;
  }

  #chat-area .conversations-data-panel .space-y-6 {
    width: 100% !important;
  }

  #chat-area .conversations-data-panel .space-y-6 > div {
    width: 100% !important;
  }

  .conversations-data-panel .break-all {
    word-break: break-word !important;
  }

  .conversations-data-panel .flex.items-center.gap-3 {
    width: 100% !important;
  }

  .conversations-data-panel .bg-white.border.border-\[\\#E5E5E5\].rounded-xl {
    width: 100% !important;
  }

  .conversations-data-panel .w-\[140px\] {
    width: 120px !important;
    max-width: 120px !important;
  }

  .conversations-data-panel .w-12 {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  .conversations-data-panel .p-3 {
    padding: 0.375rem !important;
  }

  /* Data Panel Typography */
  .conversations-data-panel .text-base {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
  }

  .conversations-data-panel .text-sm {
    font-size: 0.625rem !important;
    line-height: 0.875rem !important;
  }

  .conversations-data-panel .text-xs {
    font-size: 0.5rem !important;
    line-height: 0.75rem !important;
  }

  /* Note Edit Form Optimization */
  .conversations-data-panel [data-data-panel-target="noteEditForm"] .flex.gap-2 {
    position: relative !important;
  }

  .conversations-data-panel .bg-white.border.border-\[#E5E5E5\].rounded-xl.p-3:has([data-data-panel-target="noteEditForm"]) {
    position: relative !important;
  }

  .conversations-data-panel [data-data-panel-target="noteEditForm"]:not(.hidden) ~ * [data-data-panel-target="editButton"] {
    display: none !important;
  }

  .conversations-data-panel [data-data-panel-target="noteEditForm"] .flex.gap-2 > div.flex.gap-2 {
    position: absolute !important;
    right: 0px !important;
    top: -20px !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    width: 22px !important;
    z-index: 10 !important;
  }

  .conversations-data-panel [data-data-panel-target="noteEditForm"] button[data-action*="saveNote"] {
    order: 2 !important;
    width: 20px !important;
    height: 20px !important;
    padding: 2px !important;
    min-width: 20px !important;
  }

  .conversations-data-panel [data-data-panel-target="noteEditForm"] button[data-action*="cancelEditNote"] {
    order: 1 !important;
    width: 20px !important;
    height: 20px !important;
    padding: 2px !important;
    min-width: 20px !important;
  }

  .conversations-data-panel [data-data-panel-target="noteEditForm"] button svg {
    width: 12px !important;
    height: 12px !important;
  }

  .conversations-data-panel [data-data-panel-target="editButton"] svg {
    width: 16px !important;
    height: 16px !important;
  }

  .conversations-data-panel [data-data-panel-target="noteEditForm"] .flex.gap-2 > textarea {
    width: calc(100% - 26px) !important;
    margin-right: 26px !important;
  }

  /* Ticket History Button */
  .conversations-data-panel #data-panel-ticket-section button[data-action*="showAllTickets"] {
    height: 24px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .conversations-data-panel #data-panel-ticket-section button[data-action*="showAllTickets"] svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* User Tag Edit Form */
  .conversations-data-panel [data-data-panel-target="tagEditForm"] .flex.gap-2 {
    gap: 0.25rem !important;
  }

  .conversations-data-panel [data-data-panel-target="tagEditForm"] input[data-data-panel-target="tagInput"] {
    width: calc(100% - 48px) !important;
    max-width: calc(100% - 48px) !important;
    height: 20px !important;
    font-size: 9px !important;
    padding: 0 6px !important;
    line-height: 1.2 !important;
  }

  .conversations-data-panel [data-data-panel-target="tagEditForm"] button[data-action*="addNewTag"] {
    width: 20px !important;
    height: 20px !important;
    padding: 2px !important;
    min-width: 20px !important;
  }

  .conversations-data-panel [data-data-panel-target="tagEditForm"] button[data-action*="cancelTagEdit"] {
    width: 20px !important;
    height: 20px !important;
    padding: 2px !important;
    min-width: 20px !important;
  }

  .conversations-data-panel [data-data-panel-target="tagEditForm"] button svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Ticket Tag Edit Form */
  .conversations-data-panel [data-data-panel-target="ticketTagEditForm"] .flex.gap-2 {
    gap: 0.25rem !important;
  }

  .conversations-data-panel [data-data-panel-target="ticketTagEditForm"] input[data-data-panel-target="ticketTagInput"] {
    width: calc(100% - 48px) !important;
    max-width: calc(100% - 48px) !important;
    height: 20px !important;
    font-size: 9px !important;
    padding: 0 6px !important;
    line-height: 1.2 !important;
  }

  .conversations-data-panel [data-data-panel-target="ticketTagEditForm"] button[data-action*="addNewTicketTag"] {
    width: 20px !important;
    height: 20px !important;
    padding: 2px !important;
    min-width: 20px !important;
  }

  .conversations-data-panel [data-data-panel-target="ticketTagEditForm"] button[data-action*="cancelTicketTagEdit"] {
    width: 20px !important;
    height: 20px !important;
    padding: 2px !important;
    min-width: 20px !important;
  }

  .conversations-data-panel [data-data-panel-target="ticketTagEditForm"] button svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Tag Edit Form Spacing */
  .conversations-data-panel [data-data-panel-target="tagEditForm"]:not(.hidden) {
    margin-bottom: 0.5rem !important;
  }

  .conversations-data-panel [data-data-panel-target="ticketTagEditForm"]:not(.hidden) {
    margin-bottom: 0.5rem !important;
  }

  /* ========================================
     PERFORMANCE PAGE RESPONSIVE STYLES
     ======================================== */

  /* Performance Page Layout */
  .flex.gap-6.mb-8 {
    flex-direction: column !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .flex.gap-6.mb-8 > .flex-1 {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Performance Page Content Containers */
  .bg-white\/50.border.border-gray-200.rounded-2xl.p-6 {
    padding: 1rem !important;
  }

  .bg-white\/50.border.border-gray-200.rounded-2xl {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .bg-white\/50.border.border-gray-200.rounded-2xl.shadow-sm {
    max-width: calc(100vw - 2rem) !important;
    box-sizing: border-box !important;
  }

  .bg-white.border.border-gray-200.rounded-2xl.shadow-sm {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Performance Page - AI Conversation Analysis Section */
  div.flex.gap-6.mb-6 {
    flex-direction: row !important;
    display: flex !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  div.flex.gap-6.mb-6 > div.flex-\[2\].bg-white.border.border-gray-200.rounded-2xl.shadow-sm {
    flex: 2.3 1 70% !important;
    width: 70% !important;
  }

  div.flex.gap-6.mb-6 > div.flex-1.bg-white.border.border-gray-200.rounded-2xl.shadow-sm {
    flex: 1 1 30% !important;
    width: 30% !important;
  }

  /* Performance Page Typography */
  .flex-1.bg-white.border.border-gray-200.rounded-2xl.shadow-sm h3 {
    font-size: 0.875rem !important;
    line-height: 1.125rem !important;
  }

  .flex-1.bg-white.border.border-gray-200.rounded-2xl.shadow-sm p {
    font-size: 0.625rem !important;
    line-height: 0.875rem !important;
  }

  .flex-\[2\].bg-white.border.border-gray-200.rounded-2xl.shadow-sm h3 {
    font-size: 0.875rem !important;
    line-height: 1.125rem !important;
  }

  /* Performance Page Icons and Charts */
  .flex-1.bg-white.border.border-gray-200.rounded-2xl.shadow-sm .w-4.h-4 {
    width: 0.75rem !important;
    height: 0.75rem !important;
  }

  .flex-1.bg-white.border.border-gray-200.rounded-2xl.shadow-sm .flex.items-center.justify-center.gap-2 {
    gap: 0.25rem !important;
  }

  .flex-\[2\].bg-white.border.border-gray-200.rounded-2xl.shadow-sm .h-72 {
    height: 12rem !important;
  }

  .flex-\[2\].bg-white.border.border-gray-200.rounded-2xl.shadow-sm canvas {
    height: 200px !important;
    max-height: 200px !important;
  }

  .flex-\[2\].bg-white.border.border-gray-200.rounded-2xl.shadow-sm .w-full.h-full.mx-auto {
    height: 200px !important;
    max-height: 200px !important;
  }

  /* Performance Page General Layout Fixes */
  .flex.gap-4 {
    gap: 0.5rem !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  .flex.w-full.h-full > .flex-1 {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Performance Page Table Fixes */
  .overflow-x-auto {
    max-width: 100% !important;
    overflow-x: auto !important;
    width: 100% !important;
  }

  .overflow-x-auto table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  .overflow-x-auto table th,
  .overflow-x-auto table td {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 0 !important;
  }

  /* Performance Page Chart Container Fixes */
  .h-72, .h-96, .h-\[290px\], .h-\[214px\] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Performance Page Tab Navigation Fix */
  .w-\[674px\].h-14.bg-white.border.border-gray-200.rounded-\[20px\] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ========================================
     GLOBAL TYPOGRAPHY ADJUSTMENTS
     ======================================== */

  /* Global Font Size Adjustments */
  .conversations-list-container .text-xs,
  .text-xs {
    font-size: 0.5rem !important;
    line-height: 0.75rem !important;
  }

  .conversations-list-container .text-sm,
  .text-sm {
    font-size: 0.625rem !important;
    line-height: 0.875rem !important;
  }

  .text-base {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
  }

  .text-lg {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }

  .text-2xl {
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
  }

  /* Global Spacing Adjustments */
  .mb-6 {
    margin-bottom: 0.75rem !important;
  }

  .mb-4 {
    margin-bottom: 0.5rem !important;
  }

  .mb-2 {
    margin-bottom: 0.25rem !important;
  }

  .p-3 {
    padding: 0.375rem !important;
  }

  /* Knowledge Base Info Alert Text Size */
  #faq-info-alert .text-\[14px\] {
    font-size: 0.625rem !important;
    line-height: 0.875rem !important;
  }

  #product-info-alert .text-\[14px\] {
    font-size: 0.625rem !important;
    line-height: 0.875rem !important;
  }

  /* Knowledge Base Uploaded Section Title Size */
  #uploadedFaqSection .text-\[16px\] {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
  }

  #uploadedProductSection .text-\[16px\] {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
  }

  /* Knowledge Base Badge Text Size */
  .file-status-processing .text-\[12px\],
  .file-status-success .text-\[12px\],
  .file-status-error .text-\[12px\] {
    font-size: 0.4375rem !important;
    line-height: 0.625rem !important;
  }

  /* Knowledge Base Action Buttons Size */
  #uploadedFaqSection .h-9.w-10.rounded-\[16px\],
  #uploadedProductSection .h-9.w-10.rounded-\[16px\] {
    height: 1.5rem !important;
    width: 1.75rem !important;
    border-radius: 0.625rem !important;
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
  }

  #uploadedFaqSection .h-9.w-10.rounded-\[16px\] svg,
  #uploadedProductSection .h-9.w-10.rounded-\[16px\] svg {
    width: 0.75rem !important;
    height: 0.75rem !important;
  }

  /* Knowledge Base File Details Text Size */
  #uploadedFaqSection .text-\[16px\].font-medium,
  #uploadedProductSection .text-\[16px\].font-medium {
    font-size: 0.625rem !important;
    line-height: 0.875rem !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    max-width: 150px !important;
  }

  #uploadedFaqSection .text-\[12px\].text-\[\#6A7282\],
  #uploadedProductSection .text-\[12px\].text-\[\#6A7282\] {
    font-size: 0.4375rem !important;
    line-height: 0.625rem !important;
  }

  /* Knowledge Base Error Messages Text Size */
  #uploadedFaqSection .text-sm,
  #uploadedProductSection .text-sm {
    font-size: 0.5rem !important;
    line-height: 0.75rem !important;
  }

  #uploadedFaqSection .w-4.h-4,
  #uploadedProductSection .w-4.h-4 {
    width: 0.75rem !important;
    height: 0.75rem !important;
  }

  /* Knowledge Base Upload Area Text and Icon Size */
  label[for="faq-files"] .w-8.h-8,
  label[for="product-files"] .w-8.h-8 {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  label[for="faq-files"] .text-\[14px\],
  label[for="product-files"] .text-\[14px\] {
    font-size: 0.625rem !important;
    line-height: 0.875rem !important;
  }

  label[for="faq-files"] .text-\[12px\],
  label[for="product-files"] .text-\[12px\] {
    font-size: 0.5rem !important;
    line-height: 0.75rem !important;
  }

  /* Knowledge Base File Layout Fix */
  #uploadedFaqSection .uploaded-files.flex.items-center.justify-between,
  #uploadedProductSection .uploaded-files.flex.items-center.justify-between {
    align-items: flex-start !important;
  }

  #uploadedFaqSection .flex.items-center.space-x-3,
  #uploadedProductSection .flex.items-center.space-x-3 {
    flex: 1 !important;
    min-width: 0 !important;
    align-items: flex-start !important;
  }

  #uploadedFaqSection .flex.items-center.space-x-2,
  #uploadedProductSection .flex.items-center.space-x-2 {
    flex-shrink: 0 !important;
    margin-left: 0.5rem !important;
  }
}

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