@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

#search-input{
    border-radius: 16px !important;
}

/* PYX-like Layout */
.PYX-layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.PYX-main {
    flex: 1;
    display: flex;
    overflow: hidden;
    height: 100vh;
}

/* Individual scrollbar styles for admin panel */

/* Sidebar scrollbar styles - PYX-like */
.sidebar-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
    height: 100%;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: #f7fafc;
    border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Chat window layout */
.chat-window {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
}

.chat-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chat-messages-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    background: #eaeaea;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 #f8fafc;
}

.chat-messages-container::-webkit-scrollbar {
    width: 8px;
}

.chat-messages-container::-webkit-scrollbar-track {
    background: #eaeaea;
    border-radius: 4px;
}

.chat-messages-container::-webkit-scrollbar-thumb {
    background: #eaeaea;
    border-radius: 4px;
}

.chat-messages-container::-webkit-scrollbar-thumb:hover {
    background: #eaeaea;
}

.chat-input-area {
    position: sticky;
    bottom: 0;
   background-color: #eaeaea !important;
    border-top: 1px solid #e5e7eb;
    padding: 1rem;
    z-index: 10;
}

/* Enhanced scrollbar visibility on hover */
.sidebar-scroll:hover::-webkit-scrollbar-thumb {
    background: #a0aec0;
}
#admin-message-input{
        border-radius: 37px !important;
}
#send-admin-message{
    border-radius: 53px !important;
        --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
}
.chat-scroll:hover::-webkit-scrollbar-thumb {
    background: #cbd5e0;
}

/* Focus styles for accessibility */
.sidebar-scroll:focus-within::-webkit-scrollbar-thumb {
    background: #4a5568;
}

.chat-scroll:focus-within::-webkit-scrollbar-thumb {
    background: #4a5568;
}

/* Smooth scrolling */
.sidebar-scroll,
.chat-scroll {
    scroll-behavior: smooth;
    transition: box-shadow 0.2s ease;
}

/* Visual feedback for active scroll area */
.sidebar-scroll:hover {
    box-shadow: inset 2px 0 0 #3b82f6;
}

.chat-scroll:hover {
    box-shadow: inset 0 2px 0 #10b981;
}

/* Ensure scrollbars are always visible when hovering */
.sidebar-scroll:hover::-webkit-scrollbar,
.chat-scroll:hover::-webkit-scrollbar {
    opacity: 1;
}

/* Better scroll area definition */
.sidebar-scroll {
    position: relative;
}

.chat-scroll {
    position: relative;
}
h1, h2, h3, h4, h5, h6{
      font-family: "Poppins", sans-serif !important;
}
p{
      font-family: "Inter", sans-serif;
}
#login-button, .bg-blue-600{
    background-color: #3A8DFF !important;
}
.radius-12{
    border-radius: 12px !important;
}
.sidebar-w{
    width: 16.82% !important;
}
.chat-session-w{
    width: 25.83% !important;
}
.chat-win-w{
    width: 57.34% !important;
}
#sessions-container .session-item{
        border-radius: 24px !important;
    margin: 4px 8px !important;
}
        @keyframes chatWidgetSlideInFromBottom {
            from {
                transform: translateY(100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        .chat-widget-slide-in-bottom {
            animation: chatWidgetSlideInFromBottom 0.3s ease-out;
        }
        .chat-widget-spin {
            animation: chatWidgetSpin 1s linear infinite;
        }
        @keyframes chatWidgetSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .custom-chat-widget-messages-area {
            background-color: #eaeaea;
        }
                /* PYX-like Layout */
        .PYX-layout {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .PYX-main {
            flex: 1;
            display: flex;
            overflow: hidden;
            height: 100vh;
        }

        /* Sidebar scrollbar styles - PYX-like */
        .sidebar-scroll {
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin;
            scrollbar-color: #cbd5e0 #f7fafc;
            height: 100%;
        }

        .sidebar-scroll::-webkit-scrollbar {
            width: 6px;
        }

        .sidebar-scroll::-webkit-scrollbar-track {
            background: #f7fafc;
            border-radius: 3px;
        }

        .sidebar-scroll::-webkit-scrollbar-thumb {
            background: #cbd5e0;
            border-radius: 3px;
        }

        .sidebar-scroll::-webkit-scrollbar-thumb:hover {
            background: #a0aec0;
        }

        /* Chat messages scrollbar styles - PYX-like */
        .chat-scroll {
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin;
            scrollbar-color: #e2e8f0 #f8fafc;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .chat-scroll::-webkit-scrollbar {
            width: 8px;
        }

        .chat-scroll::-webkit-scrollbar-track {
            background: #f8fafc;
            border-radius: 4px;
        }

        .chat-scroll::-webkit-scrollbar-thumb {
            background: #e2e8f0;
            border-radius: 4px;
        }

        .chat-scroll::-webkit-scrollbar-thumb:hover {
            background: #cbd5e0;
        }

        /* Chat window layout */
        .chat-window {
            display: flex;
            flex-direction: column;
            height: 100%;
            flex: 1;
        }

        .chat-header {
            position: sticky;
            top: 0;
            z-index: 10;
            background: white;
            border-bottom: 1px solid #e5e7eb;
            padding: 1rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .chat-messages-container {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 1rem;
            background: #eaeaea;
            scrollbar-width: thin;
            scrollbar-color: #e2e8f0 #f8fafc;
        }

        .chat-messages-container::-webkit-scrollbar {
            width: 8px;
        }

        .chat-messages-container::-webkit-scrollbar-track {
            background: #f8fafc;
            border-radius: 4px;
        }

        .chat-messages-container::-webkit-scrollbar-thumb {
            background: #e2e8f0;
            border-radius: 4px;
        }

        .chat-messages-container::-webkit-scrollbar-thumb:hover {
            background: #cbd5e0;
        }

        .chat-input-area {
            position: sticky;
            bottom: 0;
            background: white;
            border-top: 1px solid #e5e7eb;
            padding: 1rem;
            z-index: 10;
        }

        /* Enhanced scrollbar visibility on hover */
        .sidebar-scroll:hover::-webkit-scrollbar-thumb {
            background: #a0aec0;
        }

        .chat-scroll:hover::-webkit-scrollbar-thumb {
            background: #cbd5e0;
        }

        /* Focus styles for accessibility */
        .sidebar-scroll:focus-within::-webkit-scrollbar-thumb {
            background: #4a5568;
        }

        .chat-scroll:focus-within::-webkit-scrollbar-thumb {
            background: #4a5568;
        }

        /* Smooth scrolling */
        .sidebar-scroll,
        .chat-scroll {
            scroll-behavior: smooth;
            transition: box-shadow 0.2s ease;
        }

        /* Visual feedback for active scroll area */
        .sidebar-scroll:hover {
            box-shadow: inset 2px 0 0 #3b82f6;
        }

        .chat-scroll:hover {
            box-shadow: inset 0 2px 0 #10b981;
        }

        /* Ensure scrollbars are always visible when hovering */
        .sidebar-scroll:hover::-webkit-scrollbar,
        .chat-scroll:hover::-webkit-scrollbar {
            opacity: 1;
        }

        /* Better scroll area definition */
        .sidebar-scroll {
            position: relative;
        }

        .chat-scroll {
            position: relative;
        }

        /* Success Popup Animation */
        #success-popup {
            transform: translateX(100%);
            transition: all 0.3s ease-in-out;
        }

        #success-popup:not(.hidden) {
            transform: translateX(0);
        }

        #success-popup.opacity-0 {
            opacity: 0;
            transform: translateX(100%);
        }

        /* Bounce animation for popup */
        @keyframes bounce-in {
            0% {
                transform: translateX(100%) scale(0.8);
                opacity: 0;
            }
            50% {
                transform: translateX(-10px) scale(1.05);
                opacity: 1;
            }
            100% {
                transform: translateX(0) scale(1);
                opacity: 1;
            }
        }

        #success-popup.animate-bounce {
            animation: bounce-in 0.5s ease-out;
        }/* Chat markdown styles for AI messages */
.custom-chat-widget-message-text {
  white-space: pre-wrap;
}
.chat-markdown {
  line-height: 1.55;
  color: inherit;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.chat-markdown p {
  margin: 0.25rem 0;
}
.chat-markdown h1,
.chat-markdown h2,
.chat-markdown h3,
.chat-markdown h4,
.chat-markdown h5,
.chat-markdown h6 {
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
  line-height: 1.3;
}
.chat-markdown h1 { font-size: 1.1rem; }
.chat-markdown h2 { font-size: 1.05rem; }
.chat-markdown h3 { font-size: 1rem; }
.chat-markdown h4 { font-size: 0.95rem; }
.chat-markdown h5 { font-size: 0.9rem; }
.chat-markdown h6 { font-size: 0.85rem; }

.chat-markdown ul,
.chat-markdown ol {
  padding-left: 1.25rem;
  margin: 0.25rem 0;
}
.chat-markdown ul { list-style: disc; }
.chat-markdown ol { list-style: decimal; }
.chat-markdown li { margin: 0.125rem 0; }

.chat-markdown code {
  background: #f6f8fa;
  color: #111827;
  padding: 0.1rem 0.25rem;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875em;
}
.chat-markdown pre {
  background: #f6f8fa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  overflow: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}
.chat-markdown pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: 0.85em;
}

.chat-markdown blockquote {
  border-left: 3px solid #e5e7eb;
  margin: 0.5rem 0;
  padding-left: 0.75rem;
  color: #374151;
}

.chat-markdown a {
  color: #2563eb;
  text-decoration: underline;
  word-break: break-word;
}

.chat-markdown table {
  border-collapse: collapse;
  width: 100%;
  display: block;
  overflow-x: auto;
}
.chat-markdown th,
.chat-markdown td {
  border: 1px solid #e5e7eb;
  padding: 0.25rem 0.5rem;
}

.chat-markdown img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0.25rem 0;
}

.chat-markdown hr {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 0.5rem 0;
}

.chat-markdown .task-list-item {
  list-style: none;
}
.chat-markdown .task-list-item input {
  margin-right: 0.25rem;
}
#custom-chat-widget-window{
     height: 32rem !important;
}
#custom-chat-widget-header, #custom-chat-widget-button,#custom-chat-widget-send-button {
 background-color: #c32b2d !important;   
}
#custom-chat-widget-close-button{
    margin-right: 20px !important;
}

  @media (max-width: 768px) {
    #custom-chat-widget-window {
      margin-bottom: 0px !important;
    }
  }