/**
 * Chat System Styles - Tailwind CSS Only
 * Minimal CSS for custom animations and scrollbar styling
 * Only for shortcode containers
 */

/* Dynamic viewport height variable (updated via JS); 100dvh supported via @supports */
:root { --app-height: 100vh; }

@supports (height: 100dvh) {
	:root { --app-height: 100dvh; }
}

/* Prevent page scrolling when chat shortcode is present */
body.has-chat-shortcode {
    overflow: hidden !important;
    height: var(--app-height) !important;
    position: fixed !important;
    width: 100% !important;
}

/* Hide scrollbar completely */
body.has-chat-shortcode::-webkit-scrollbar {
    display: none !important;
}

body.has-chat-shortcode {
    -ms-overflow-style: none !important; /* IE and Edge */
    scrollbar-width: none !important; /* Firefox */
}

/* Chat shortcode full viewport styling */
.chat-shortcode-container {
    position: fixed !important;
    top: 3rem !important; /* Reduced from 4rem - mobile header height */
    left: 0 !important;
    right: 0 !important;
    bottom: 2.5rem !important; /* Account for mobile bottom navigation */
    width: 100vw !important;
    height: calc(var(--app-height) - 3rem - 2.5rem) !important; /* Full height minus mobile header and bottom nav */
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    z-index: 999 !important; /* Lower than global sidebar (1000) */
}

/* When mobile keyboard is open, use full visual viewport and remove bottom offset */
.chat-shortcode-container.keyboard-open {
	bottom: 0 !important;
	height: calc(var(--app-height) - 3rem) !important;
}

/* Ensure flex children can shrink and scroll correctly */
.chat-shortcode-container .chat-main-area { min-height: 0 !important; }
.chat-shortcode-container .chat-messages { min-height: 0 !important; }

/* Keep input visible by sticking it to the bottom of the scrollable area */
.chat-shortcode-container .chat-input-area {
	position: sticky !important;
	bottom: 0 !important;
	z-index: 5 !important;
	background-color: var(--color-surface) !important;
	border-radius: 0.5rem !important; /* rounded-lg */
	padding: 0.75rem !important; /* p-3 */
	/* Prevent position changes on focus/blur */
	transform: none !important;
	transition: none !important;
}

/* Tablet screens - prevent input area position changes on focus */
@media (min-width: 769px) and (max-width: 1023px) {
	.chat-shortcode-container .chat-input-area {
		position: sticky !important;
		bottom: 0 !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		transition: none !important;
		margin: 0 !important;
	}
	
	/* Prevent keyboard-open from changing container position on tablets */
	.chat-shortcode-container.keyboard-open {
		bottom: 2.5rem !important;
		height: calc(var(--app-height) - 3rem - 2.5rem) !important;
	}
}

/* Desktop header height adjustment */
@media (min-width: 1024px) {
    .chat-shortcode-container {
        top: 3.5rem !important; /* Reduced from 5rem - desktop header height */
        bottom: 0 !important; /* No bottom navigation on desktop */
		height: calc(var(--app-height) - 3.5rem) !important; /* Full height minus desktop header */
    }
}

/* Adjust chat container for global sidebar */
body.has-global-sidebar .chat-shortcode-container {
    left: 5rem !important; /* w-20 - collapsed sidebar width */
    width: calc(100vw - 5rem) !important;
}

body.has-global-sidebar.sidebar-expanded .chat-shortcode-container {
    left: 16rem !important; /* w-64 - expanded sidebar width */
    width: calc(100vw - 16rem) !important;
}

/* Desktop - adjust for global sidebar with header */
@media (min-width: 1024px) {
    body.has-global-sidebar .chat-shortcode-container {
        left: 5rem !important; /* w-20 - collapsed sidebar width */
        width: calc(100vw - 5rem) !important;
		top: 3.5rem !important; /* Reduced from 5rem - desktop header height */
		bottom: 0 !important; /* No bottom navigation on desktop */
		height: calc(var(--app-height) - 3.5rem) !important; /* Full height minus desktop header */
    }
    
    body.has-global-sidebar.sidebar-expanded .chat-shortcode-container {
        left: 16rem !important; /* w-64 - expanded sidebar width */
        width: calc(100vw - 16rem) !important;
		top: 3.5rem !important; /* Reduced from 5rem - desktop header height */
		bottom: 0 !important; /* No bottom navigation on desktop */
		height: calc(var(--app-height) - 3.5rem) !important; /* Full height minus desktop header */
    }
}

/* Mobile - reset chat positioning when sidebar is hidden */
@media screen and (max-width: 768px) {
    body.has-global-sidebar .chat-shortcode-container,
    body.has-global-sidebar.sidebar-expanded .chat-shortcode-container {
        left: 0 !important;
        width: 100vw !important;
        top: 3rem !important; /* Reduced from 4rem - mobile header height */
		height: calc(var(--app-height) - 3rem - 2.5rem) !important; /* Full height minus mobile header and bottom nav */
        bottom: 2.5rem !important; /* Account for mobile bottom navigation */
    }

	/* Ensure keyboard-open wins on mobile too */
	.chat-shortcode-container.keyboard-open {
		bottom: 0 !important;
		height: calc(var(--app-height) - 3rem) !important;
	}
    
    /* Mobile panel layering - z-index hierarchy */
    .chat-shortcode-container .chat-left-panel {
        z-index: 1 !important; /* Sol panel - en altta */
    }
    
    .chat-shortcode-container .chat-main-area {
        z-index: 2 !important; /* Orta panel - ortada */
    }
    
    .chat-shortcode-container .chat-right-panel {
        z-index: 3 !important; /* Sağ panel - en üstte */
    }
    
    /* Mobile panel positioning - all panels take full width */
    .chat-shortcode-container .chat-left-panel,
    .chat-shortcode-container .chat-main-area,
    .chat-shortcode-container .chat-right-panel {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Default state - only left panel visible */
    .chat-shortcode-container .chat-main-area,
    .chat-shortcode-container .chat-right-panel {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(100%) !important;
        transition: all 0.3s ease-in-out !important;
    }
    
    /* When chat is active - show main area */
    .chat-shortcode-container.chat-active .chat-main-area {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
    }
    
    /* When user info is active - show right panel */
    .chat-shortcode-container.user-info-active .chat-right-panel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
    }
    
    /* Hide other panels when one is active */
    .chat-shortcode-container.chat-active .chat-left-panel,
    .chat-shortcode-container.user-info-active .chat-left-panel,
    .chat-shortcode-container.user-info-active .chat-main-area {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(-100%) !important;
    }
    
    /* New Chat Panel - Full screen on mobile */
    .chat-shortcode-container .new-chat-panel {
        width: 100% !important;
        z-index: 50 !important; /* Higher than other panels */
    }
    
    /* Fix horizontal scroll in New Chat panel */
    .chat-shortcode-container .new-chat-panel {
        overflow-x: hidden !important;
    }
    
    .chat-shortcode-container .new-chat-panel .space-y-2 {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .chat-shortcode-container .new-chat-user {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .chat-shortcode-container .new-chat-user .flex {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .chat-shortcode-container .new-chat-user .flex-1 {
        min-width: 0 !important; /* Allow flex item to shrink */
        overflow: hidden !important;
    }
}

/* Fix horizontal scroll in New Chat panel - All screen sizes */
.chat-shortcode-container .new-chat-panel {
    overflow-x: hidden !important;
}

/* Ensure New Chat Panel has solid black background (not transparent) */
.chat-shortcode-container .new-chat-panel {
    background-color: #000000 !important;
}

/* Add subtle padding around chat header container */
.chat-header-container {
    padding: 0.5rem 0 !important; /* Remove left/right padding */
}

@media (min-width: 1024px) {
    .chat-header-container {
        padding: 0.75rem 0 !important; /* Remove left/right padding on desktop too */
    }
}

/* Delete confirmation dialog container background */
.chat-delete-confirmation-modal > div {
    background-color: var(--color-background) !important;
}

.chat-shortcode-container .new-chat-panel .space-y-2,
.chat-shortcode-container .new-chat-user,
.chat-shortcode-container .new-chat-user .flex,
.chat-shortcode-container .new-chat-user .flex-1 {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

.chat-shortcode-container .new-chat-user .flex-1 {
    min-width: 0 !important; /* Allow flex item to shrink */
}

/* Left Panel Toggle Styles - Desktop only */
@media (min-width: 768px) {
    .chat-left-panel-collapsed {
        width: 4rem !important; /* w-16 */
    }
}

/* Desktop only - expanded panel width */
@media (min-width: 768px) {
    .chat-left-panel-expanded {
        width: 20rem !important; /* w-80 */
    }
}

/* Panel toggle states */
.chat-left-panel.collapsed .chat-left-panel-expanded {
    display: none !important;
}

.chat-left-panel.collapsed .chat-left-panel-collapsed {
    display: flex !important;
}


.chat-left-panel:not(.collapsed) .chat-left-panel-collapsed {
    display: none !important;
}


/* Default state - show expanded panel (Desktop only) */
@media (min-width: 768px) {
    .chat-left-panel .chat-left-panel-expanded {
        display: flex !important;
    }

    .chat-left-panel .chat-left-panel-collapsed {
        display: none !important;
    }
}

/* Adjust main chat area when left panel is collapsed - Desktop only */
@media (min-width: 768px) {
    .chat-left-panel.collapsed {
        width: 4rem !important; /* w-16 */
    }
}

/* Desktop only - left panel width */
@media (min-width: 768px) {
    .chat-left-panel:not(.collapsed) {
        width: 20rem !important; /* w-80 */
    }
}

/* Mobile - left panel full width */
@media (max-width: 767px) {
    .chat-left-panel:not(.collapsed) {
        width: 100% !important;
    }
    
    .chat-left-panel.collapsed {
        width: 100% !important;
    }
    
    .chat-left-panel-expanded {
        width: 100% !important;
    }
    
    .chat-left-panel-collapsed {
        width: 100% !important;
    }
    
    /* Hide left panel toggle button on mobile */
    .chat-toggle-left-panel {
        display: none !important;
    }

    /* Ensure conversations list scrolls on mobile */
    .chat-shortcode-container .contacts-list {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: auto;
        -ms-overflow-style: auto;
    }

    /* Critical: allow flex child with overflow to shrink and scroll */
    .chat-shortcode-container .chat-left-panel .h-full.flex.flex-col {
        min-height: 0 !important;
    }
    .chat-shortcode-container .chat-left-panel-expanded {
        min-height: 0 !important;
        height: 100% !important;
    }
    .chat-shortcode-container .chat-left-panel {
        min-height: 0 !important;
        height: 100% !important;
        overflow-y: visible !important; /* do not clip inner scrollbar */
    }
}

/* Visible scrollbar styles for WebKit (optional but helps on mobile) */
.chat-shortcode-container .contacts-list::-webkit-scrollbar {
    width: 8px;
}
.chat-shortcode-container .contacts-list::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.2);
    border-radius: 4px;
}
.chat-shortcode-container .contacts-list::-webkit-scrollbar-track {
    background: transparent;
}

/* Collapsed Panel Styles */
.chat-left-panel-collapsed {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0.25rem !important; /* p-1 */
}

.chat-left-panel-collapsed .contact-item-collapsed {
    position: relative;
    overflow: visible;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Ensure collapsed avatars are properly sized and centered */
.chat-left-panel-collapsed .contact-item-collapsed .w-10.h-10 {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem;
    min-height: 2.5rem;
}

/* Ensure collapsed avatar images are properly sized */
.chat-left-panel-collapsed .contact-item-collapsed img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;
}

.chat-left-panel-collapsed .contact-item-collapsed:hover {
    background-color: rgba(55, 65, 81, 0.8) !important; /* bg-gray-700 with opacity */
}

/* Tooltip positioning for collapsed panel */
.chat-left-panel-collapsed .contact-item-collapsed .absolute {
    z-index: 1000;
}

/* Ensure tooltip doesn't get cut off */
.chat-left-panel-collapsed {
    overflow: visible !important;
}

/* Hide scrollbar in contact lists */
.chat-left-panel-collapsed .contacts-list-collapsed,
.chat-left-panel-expanded .contacts-list {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.chat-left-panel-collapsed .contacts-list-collapsed::-webkit-scrollbar,
.chat-left-panel-expanded .contacts-list::-webkit-scrollbar {
    display: none; /* WebKit */
}

.chat-left-panel-collapsed .contacts-list-collapsed {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem; /* space-y-0.5 */
}

/* Hide scrollbar on hover for all contact lists */
.contacts-list:hover,
.contacts-list-collapsed:hover {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* Internet Explorer 10+ */
}

.contacts-list:hover::-webkit-scrollbar,
.contacts-list-collapsed:hover::-webkit-scrollbar {
    display: none !important; /* WebKit */
}

/* Smooth transitions for collapsed panel content */
.chat-left-panel-collapsed .group-hover\:opacity-100 {
    transition: opacity 0.2s ease-in-out;
}

/* Online status indicator in collapsed panel */
.chat-left-panel-collapsed .absolute.-bottom-0\.5.-right-0\.5 {
    border-width: 2px;
    border-color: #1f2937; /* gray-800 */
}

/* Toggle button in collapsed panel */
.chat-left-panel-collapsed .chat-toggle-left-panel {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Toggle button container in collapsed panel */
.chat-left-panel-collapsed .flex.justify-center {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure collapsed panel content fits properly */
.chat-left-panel-collapsed {
    min-height: 0;
}

.chat-left-panel-collapsed .flex-1 {
    min-height: 0;
}

/* Custom animations that can't be done with Tailwind */
@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes typing {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes messageBounce {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Custom scrollbar styling for shortcode containers */
.chat-shortcode-container .chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-shortcode-container .chat-messages::-webkit-scrollbar-track {
    background: #0f0f0f;
    border-radius: 3px;
}

.chat-shortcode-container .chat-messages::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 3px;
}

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

/* Ensure chat messages area can scroll properly */
.chat-shortcode-container .chat-messages {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 100% !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
}

/* Prevent any scroll events from bubbling to the page */
.chat-shortcode-container {
    touch-action: pan-y !important; /* Allow vertical scrolling within chat */
}

/* Contact info panel scrollbar for shortcode containers */
.chat-shortcode-container .contact-info-content::-webkit-scrollbar {
    width: 4px;
}

.chat-shortcode-container .contact-info-content::-webkit-scrollbar-track {
    background: transparent;
}

.chat-shortcode-container .contact-info-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.chat-shortcode-container .contact-info-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Animation classes for JavaScript */
.animate-message-slide-in {
    animation: messageSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Force contact spacing - cache buster */
.contact-item .flex.items-center {
    gap: 1rem !important; /* space-x-4 equivalent */
}

/* Force new chat user spacing */
.new-chat-user .flex.items-center {
    gap: 1rem !important; /* space-x-4 equivalent */
}

/* Force chat header spacing */
.chat-header .flex.items-center {
    gap: 1rem !important; /* space-x-4 equivalent */
}

/* Force chat menu button spacing */
.chat-view-profile-link.flex.items-center,
.chat-delete-all-btn.flex.items-center {
    gap: 0.75rem !important; /* space-x-3 equivalent */
}

/* Unread counter removed */

.animate-typing span {
    animation: typing 1.4s infinite ease-in-out;
}

.animate-typing span:nth-child(1) {
    animation-delay: -0.32s;
}

.animate-typing span:nth-child(2) {
    animation-delay: -0.16s;
}

/* Message bubble hover effects */
/* Remove hover animations/styles on message bubbles */
.chat-shortcode-container .chat-messages .bg-blue-600:hover,
.chat-shortcode-container .chat-messages .bg-gray-700:hover {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/* --- Force visible scrollbar for conversations list (overrides hide rules) --- */
.chat-shortcode-container .contacts-list {
    scrollbar-width: auto !important; /* Firefox */
    -ms-overflow-style: auto !important; /* IE/Edge */
}
.chat-shortcode-container .contacts-list::-webkit-scrollbar {
    display: block !important; /* WebKit */
    width: 8px;
}
.chat-shortcode-container .contacts-list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}
.chat-shortcode-container .contacts-list::-webkit-scrollbar-track {
    background: transparent;
}
.chat-shortcode-container .contacts-list:hover {
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
}
.chat-shortcode-container .contacts-list:hover::-webkit-scrollbar {
    display: block !important;
}

/* Better message spacing and layout */
.chat-shortcode-container .chat-messages {
    padding: 1rem 1.5rem;
}

/* Message bubble styling improvements */
.chat-shortcode-container .chat-messages .bg-blue-600,
.chat-shortcode-container .chat-messages .bg-gray-700 {
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.4;
    overflow-wrap: break-word;
    min-width: 0; /* Allow flex items to shrink */
}

/* Typing indicator styling */
.typing-indicator .animate-typing span {
    margin: 0 1px;
}

/* Mobile message bubble improvements */
@media (max-width: 768px) {
    .chat-shortcode-container .chat-messages {
        padding: 0.75rem 1rem;
    }
    
    /* More responsive message bubble widths */
    .chat-shortcode-container .chat-messages .max-w-xs,
    .chat-shortcode-container .chat-messages .sm\:max-w-sm,
    .chat-shortcode-container .chat-messages .md\:max-w-md,
    .chat-shortcode-container .chat-messages .lg\:max-w-lg,
    .chat-shortcode-container .chat-messages .xl\:max-w-xl {
        max-width: 75% !important; /* Smaller on mobile */
    }
    
    /* Mobile bubble layout: stack content vertically */
    .chat-shortcode-container .chat-messages .bg-blue-600,
    .chat-shortcode-container .chat-messages .bg-gray-700 {
        min-height: 44px;
        display: block;
    }
    
    /* Improved text sizing for mobile */
    .chat-shortcode-container .chat-messages .text-sm {
        font-size: 0.875rem;
        line-height: 1.5;
    }
    
    /* Better text wrapping for mobile */
    .chat-shortcode-container .chat-messages .message-content {
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Better spacing for mobile */
    .chat-shortcode-container .chat-messages .mb-4 {
        margin-bottom: 1rem;
    }
}

/* Extra small screens - even more constrained */
@media (max-width: 480px) {
    .chat-shortcode-container .chat-messages {
        padding: 0.5rem 0.75rem;
    }
    
    /* Very small screens - even smaller bubbles */
    .chat-shortcode-container .chat-messages .max-w-xs,
    .chat-shortcode-container .chat-messages .sm\:max-w-sm,
    .chat-shortcode-container .chat-messages .md\:max-w-md,
    .chat-shortcode-container .chat-messages .lg\:max-w-lg,
    .chat-shortcode-container .chat-messages .xl\:max-w-xl {
        max-width: 70% !important;
    }
    
    /* Reduce padding in bubbles for very small screens */
    .chat-shortcode-container .chat-messages .bg-blue-600,
    .chat-shortcode-container .chat-messages .bg-gray-700 {
        padding: 0.75rem 1rem !important; /* px-3 py-2 equivalent */
    }
    
    /* Smaller text on very small screens */
    .chat-shortcode-container .chat-messages .text-sm {
        font-size: 0.8rem;
        line-height: 1.4;
    }
}

/* Small screens - medium constraint */
@media (min-width: 481px) and (max-width: 640px) {
    .chat-shortcode-container .chat-messages .max-w-xs,
    .chat-shortcode-container .chat-messages .sm\:max-w-sm,
    .chat-shortcode-container .chat-messages .md\:max-w-md,
    .chat-shortcode-container .chat-messages .lg\:max-w-lg,
    .chat-shortcode-container .chat-messages .xl\:max-w-xl {
        max-width: 80% !important;
    }
}

/* Image message sizing inside bubbles */
.chat-shortcode-container .message-image-wrapper img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100% !important; /* Always respect container width */
    max-height: 200px; /* Reasonable max height */
    object-fit: contain;
}

/* Image grid sizing */
.chat-shortcode-container .message-image-grid {
    max-width: 100% !important; /* Always respect container width */
    width: auto !important; /* Remove fixed width */
}

/* Multi-image grid improvements - Square images with proper sizing */
.chat-shortcode-container .message-image-grid .grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.25rem !important;
}

.chat-shortcode-container .message-image-grid img {
    border-radius: 0.375rem; /* rounded-md */
    object-fit: cover;
    transition: transform 0.2s ease;
}

.chat-shortcode-container .message-image-grid img:hover {
    transform: scale(1.02);
}

/* Square aspect ratio for multi-image grids */
.chat-shortcode-container .message-image-grid .relative {
    position: relative;
    overflow: hidden;
    border-radius: 0.375rem; /* rounded-md */
}

/* Grid item styling */
.chat-shortcode-container .message-image-grid .w-1\/2 {
    width: 100% !important;
    padding: 0.25rem !important;
}

.chat-shortcode-container .message-image-grid .aspect-square {
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0.375rem !important;
}

/* Responsive sizing for multi-images - Tailwind responsive classes will handle most of this */
@media (max-width: 480px) {
    .chat-shortcode-container .message-image-grid {
        max-width: 280px; /* Much larger max width for small screens */
        min-width: 240px; /* Ensure minimum size */
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat-shortcode-container .message-image-grid {
        max-width: 320px; /* Much larger max width for small screens */
        min-width: 280px; /* Ensure minimum size */
    }
}

@media (min-width: 769px) {
    .chat-shortcode-container .message-image-grid {
        max-width: 400px; /* Much larger max width for larger screens */
        min-width: 320px; /* Ensure minimum size */
    }
}

/* Video and file wrapper sizing */
.chat-shortcode-container .message-video-wrapper,
.chat-shortcode-container .message-audio-wrapper,
.chat-shortcode-container .message-file-wrapper {
    max-width: 100% !important; /* Always respect container width */
    width: auto !important; /* Remove fixed width */
}

/* Responsive image sizing */
@media (max-width: 480px) {
    .chat-shortcode-container .message-image-wrapper img {
        max-height: 150px; /* Smaller on very small screens */
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat-shortcode-container .message-image-wrapper img {
        max-height: 180px; /* Medium size on small screens */
    }
}

@media (min-width: 769px) {
    .chat-shortcode-container .message-image-wrapper img {
        max-height: 250px; /* Larger on desktop */
    }
}

/* Image hover effect inside bubbles and grids */
/* moved hover effects to chat-lightbox.css */

/* Ensure grid images show zoom cursor and transition */
/* moved hover effects to chat-lightbox.css */

/* Lightbox overlay for viewing images */
/* moved lightbox to chat-lightbox.css */

/* moved lightbox to chat-lightbox.css */

/* Defeat global max-width constraint when global sidebar is active */
/* moved lightbox to chat-lightbox.css */

/* moved lightbox to chat-lightbox.css */

/* moved lightbox to chat-lightbox.css */

/* Ensure image then note stack order */
.chat-shortcode-container .message-image-wrapper + .mt-2 {
    display: block;
}

/* Dark theming for audio players in preview and messages */
.chat-shortcode-container .chat-audio-container audio.chat-audio,
.chat-audio-container audio.chat-audio {
    background-color: transparent !important;
    color-scheme: dark;
    border-radius: 0; /* remove pill look */
    border: none !important;
    box-shadow: none !important;
}

/* Try to darken native controls on WebKit */
.chat-shortcode-container .chat-audio-container audio.chat-audio::-webkit-media-controls-panel {
    background-color: transparent !important; /* fully transparent controls panel */
}

.chat-shortcode-container .chat-audio-container audio.chat-audio::-webkit-media-controls-enclosure {
    border-radius: 0 !important;
    overflow: visible;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Extra Chromium hooks to kill gray box */
.chat-shortcode-container .chat-audio-container audio.chat-audio::-webkit-media-controls {
    background-color: transparent !important;
}

.chat-shortcode-container .chat-audio-container audio.chat-audio::-webkit-media-controls-timeline-container,
.chat-shortcode-container .chat-audio-container audio.chat-audio::-webkit-media-controls-current-time-display,
.chat-shortcode-container .chat-audio-container audio.chat-audio::-webkit-media-controls-time-remaining-display {
    background: transparent !important;
}

/* Gallery overlay for +N on 4th image */
.chat-image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 0.375rem; /* rounded-md */
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Ensure user notes modal overlays all chat panels */
.contact-notes-modal { z-index: 1100 !important; }

/* Notes list styling */
.contact-notes-list .note-item {
    margin-bottom: 0.75rem;
}

.contact-notes-list .note-item:last-child {
    margin-bottom: 0;
}

/* Note action buttons */
.note-edit-btn, .note-delete-btn {
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
}

.note-item:hover .note-edit-btn,
.note-item:hover .note-delete-btn {
    opacity: 1;
}

/* Note buttons hover effects */
.note-edit-btn:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

.note-delete-btn:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

/* Save button processing state */
.contact-note-save.saving,
.contact-note-save-modal.saving {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: transparent !important;
}

.contact-note-save:disabled,
.contact-note-save-modal:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: transparent !important;
}

/* Remove all background colors from save buttons */
.contact-note-save,
.contact-note-save-modal {
    background-color: transparent !important;
}

.contact-note-save:hover,
.contact-note-save-modal:hover {
    background-color: transparent !important;
}

.contact-note-save:active,
.contact-note-save-modal:active {
    background-color: transparent !important;
}

.contact-note-save:focus,
.contact-note-save-modal:focus {
    background-color: transparent !important;
}
/* Increase specificity and force background to defeat global prose background reset */
.chat-shortcode-container .chat-image-overlay {
    background: rgba(0, 0, 0, 0.65) !important;
    background-color: rgba(0, 0, 0, 0.65) !important;
}

/* Fixed width for right panel (26rem) to avoid Tailwind purge issues */
.chat-right-26 { width: 30rem !important; }

/* Payment link card background */
.message-payment-link-wrapper {
    background-color: var(--color-surface) !important;
}

/* Payment request form inputs - override prose background */
.chat-payment-request-preview-overlay input[type="text"],
.chat-payment-request-preview-overlay input[type="number"],
.chat-payment-request-preview-overlay input[type="text"]:focus,
.chat-payment-request-preview-overlay input[type="number"]:focus,
.chat-payment-request-preview-overlay input[type="text"]:active,
.chat-payment-request-preview-overlay input[type="number"]:active,
.chat-payment-request-preview-overlay textarea,
.chat-payment-request-preview-overlay textarea:focus,
.chat-payment-request-preview-overlay textarea:active {
    background-color: var(--color-surface) !important;
    background: var(--color-surface) !important;
    background-image: none !important;
}

/* Override any prose or entry-content rules */
.prose .chat-payment-request-preview-overlay input[type="text"],
.prose .chat-payment-request-preview-overlay input[type="number"],
.prose .chat-payment-request-preview-overlay textarea,
.entry-content .chat-payment-request-preview-overlay input[type="text"],
.entry-content .chat-payment-request-preview-overlay input[type="number"],
.entry-content .chat-payment-request-preview-overlay textarea,
.single-blog-content .chat-payment-request-preview-overlay input[type="text"],
.single-blog-content .chat-payment-request-preview-overlay input[type="number"],
.single-blog-content .chat-payment-request-preview-overlay textarea {
    background-color: var(--color-surface) !important;
    background: var(--color-surface) !important;
    background-image: none !important;
}

/* Bold-on-new-message removed */

/* Ensure time element stays gray and normal weight */
.contact-item .text-right .text-gray-400 {
    color: #9ca3af !important;
    font-weight: 400 !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .animate-message-slide-in,
    .animate-typing span {
        animation: none;
    }
}

/* Message Read Receipt Ticks */
.message-ticks {
    font-size: 0.75rem; /* text-xs */
    font-weight: 400;
    line-height: 1;
    display: inline-block;
    margin-left: 0.25rem; /* ml-1 */
    color: #9ca3af; /* gray-400 */
    transition: color 0.2s ease-in-out;
}

/* Single tick - sent status */
.message-ticks.single-tick {
    color: #9ca3af; /* gray-400 */
}

/* Double tick - delivered status */
.message-ticks.double-tick {
    color: #9ca3af; /* gray-400 */
    letter-spacing: -0.1em; /* Overlap the ticks slightly */
}

/* Double tick filled - read status */
.message-ticks.double-tick-filled {
    color: #3b82f6 !important; /* blue-500 - matches theme blue color */
    letter-spacing: -0.1em; /* Overlap the ticks slightly */
    font-weight: 600 !important; /* Semi-bold for filled effect */
    text-shadow: 0 0 1px currentColor; /* Add slight glow for filled effect */
}

/* Force blue color for read status - higher specificity */
.chat-shortcode-container .message-ticks.double-tick-filled {
    color: #3b82f6 !important;
    font-weight: 600 !important;
}

/* Hover effects for ticks */
.message-ticks:hover {
    opacity: 0.8;
}

/* Responsive tick sizing */
@media (max-width: 768px) {
    .message-ticks {
        font-size: 0.7rem; /* Slightly smaller on mobile */
    }
}

/* Animation for status changes */
@keyframes tickStatusChange {
    0% {
        opacity: 0.5;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.message-ticks.status-updating {
    animation: tickStatusChange 0.3s ease-in-out;
}

/* Ensure ticks are properly aligned with time */
.message-time {
    margin-right: 0.125rem; /* Small gap between time and ticks */
}

/* Input and Button States */
.chat-input:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.chat-button:disabled {
    background-color: transparent !important; /* Arka plan rengini kaldır */
    opacity: 0.3 !important; /* İkon opacity'sini azalt */
    cursor: not-allowed !important;
    transform: none !important;
}

.chat-button:disabled:hover {
    background-color: transparent !important; /* Hover'da da arka plan rengini koru */
    transform: none !important;
    box-shadow: none !important;
}

/* Force transparent background on chat inputs when focused (mobile/desktop) - EXCEPT payment request inputs */
.chat-shortcode-container .chat-input:focus,
.chat-shortcode-container input[type="text"]:focus:not(#chat-shortcode-payment-title):not(#chat-shortcode-payment-amount):not([id*="-payment-title"]):not([id*="-payment-amount"]):not([id*="-payment-description"]),
.chat-shortcode-container textarea:focus:not(#chat-shortcode-payment-description):not([id*="-payment-description"]) {
    background-color: transparent !important;
}

/* Sending animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Date separator styling */
.chat-date-separator {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

.chat-date-separator .date-bubble {
    background-color: rgba(55, 65, 81, 0.8); /* bg-gray-700 with opacity */
    color: #d1d5db; /* text-gray-300 */
    padding: 0.5rem 1rem;
    border-radius: 9999px; /* rounded-full */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    backdrop-filter: blur(4px);
    border: none; /* Remove border */
}

.contact-notes-modal {
    z-index: 1100 !important;
}

.contact-media-modal {
    z-index: 1100 !important;
}

.contact-media-tab-active {
    background-color: #2563eb !important;
    color: white !important;
}

/* Chat page mobile search container fixes */
/* Override panel plugin styles that affect chat page */
.chat-shortcode-container .mobile-search-container {
    position: relative !important;
    z-index: auto !important;
    order: unset !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Force full coverage for chat page mobile search when expanded - OVERRIDE ALL WIDTH RESTRICTIONS */
.chat-shortcode-container .mobile-search-container.expanded {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
}

.chat-shortcode-container .mobile-search-container.expanded .mobile-search-input {
    width: 100% !important;
    max-width: 500px !important;
    padding: 1rem 3.75rem 1rem 1rem !important;
    background: white !important;
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    border-radius: 12px !important;
    font-size: 16px !important;
}

/* Ensure expanded state overrides has-value state on desktop - Higher specificity */
.chat-shortcode-container .mobile-search-container.expanded.has-value .mobile-search-input,
.chat-shortcode-container .mobile-search-container.expanded.has-value input.mobile-search-input {
    width: 100% !important;
    max-width: 500px !important;
}

.chat-shortcode-container .mobile-search-container.expanded .search-icon-button {
    position: absolute !important;
    right: 1.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10000 !important;
}

.chat-shortcode-container .mobile-search-container:not(.expanded) {
    position: relative !important;
    order: unset !important;
    margin-right: 0 !important;
}

.chat-shortcode-container .mobile-search-container.expanded {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: auto !important;
}

.chat-shortcode-container .mobile-search-container .mobile-search-input {
    width: 6rem !important; /* w-24 - original width */
    max-width: none !important;
    padding-right: 2rem !important; /* pr-8 */
}

/* Higher specificity to override panel CSS */
.chat-shortcode-container .mobile-search-container.expanded .mobile-search-input,
.chat-shortcode-container .mobile-search-container.expanded input.mobile-search-input {
    width: 100% !important; /* Allow full width expansion */
    max-width: 500px !important;
    padding-right: 2rem !important; /* pr-8 */
}

.chat-shortcode-container .mobile-search-container.has-value .mobile-search-input {
    width: 6rem !important; /* Keep original width when not expanded */
}

.chat-shortcode-container .mobile-search-container .search-icon-button {
    position: absolute !important;
    right: 0.375rem !important; /* right-1.5 */
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.5rem !important; /* w-6 */
    height: auto !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

/* Ensure proper spacing in chat header */
.chat-shortcode-container .flex.items-center.space-x-2 {
    gap: 0.5rem !important;
}

/* Mobile specific fixes for chat page */
@media (max-width: 768px) {
    .chat-shortcode-container .mobile-search-container {
        order: -1 !important; /* Place before other elements */
        margin-right: 0.25rem !important; /* Small gap */
    }
    
    .chat-shortcode-container .mobile-search-container .mobile-search-input {
        width: 5rem !important; /* Slightly smaller on mobile */
    }
    
    /* Chat page mobile search expanded - full coverage */
    .chat-shortcode-container .mobile-search-container.expanded {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
        background: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(4px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem !important;
    }
    
    /* Higher specificity for mobile - override panel CSS */
    .chat-shortcode-container .mobile-search-container.expanded .mobile-search-input,
    .chat-shortcode-container .mobile-search-container.expanded input.mobile-search-input {
        width: 100% !important;
        max-width: 500px !important;
        padding: 1rem 3.75rem 1rem 1rem !important;
        background: white !important;
        border: 2px solid #3b82f6 !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
        border-radius: 12px !important;
        font-size: 16px !important;
    }
    
    .chat-shortcode-container .mobile-search-container.expanded .mobile-search-input:focus {
        width: 100% !important;
        border-color: #2563eb !important;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
        outline: none !important;
    }
    
    .chat-shortcode-container .mobile-search-container.expanded .search-icon-button {
        position: absolute !important;
        right: 1.5rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10000 !important;
    }
    
    .chat-shortcode-container .mobile-search-container.has-value .mobile-search-input {
        width: 5rem !important; /* Keep consistent when not expanded */
    }
    
    /* Ensure expanded state overrides has-value state - Higher specificity */
    .chat-shortcode-container .mobile-search-container.expanded.has-value .mobile-search-input,
    .chat-shortcode-container .mobile-search-container.expanded.has-value input.mobile-search-input {
        width: 100% !important;
        max-width: 500px !important;
    }
}

/* Keep site header (masthead) visible on chat pages for mobile screens */
@media (max-width: 768px) {
    /* Masthead is now visible - no longer hidden */
    /* body.has-chat-shortcode #masthead.site-header,
    body.has-chat-shortcode header#masthead {
        display: none !important;
    } */

    /* Chat container starts below the visible masthead */
    body.has-chat-shortcode .chat-shortcode-container {
		top: 3rem !important; /* Account for mobile header height */
		height: calc(var(--app-height) - 3rem - 2.5rem) !important; /* Full height minus mobile header and bottom nav */
    }

    /* With global sidebar classes present on mobile, also account for masthead */
    body.has-global-sidebar.has-chat-shortcode .chat-shortcode-container,
    body.has-global-sidebar.sidebar-expanded.has-chat-shortcode .chat-shortcode-container {
		top: 3rem !important; /* Account for mobile header height */
		height: calc(var(--app-height) - 3rem - 2.5rem) !important; /* Full height minus mobile header and bottom nav */
    }
}

/* CRITICAL: Override all other CSS with maximum specificity for chat pages */
body .chat-shortcode-container .mobile-search-container.expanded .mobile-search-input,
body .chat-shortcode-container .mobile-search-container.expanded input.mobile-search-input,
body .chat-shortcode-container .mobile-search-container.expanded input[type="search"] {
    width: 100% !important;
    max-width: 500px !important;
    min-width: 300px !important;
}

/* Override panel CSS specifically for chat pages */
body .chat-shortcode-container .mobile-search-container.expanded.has-value .mobile-search-input,
body .chat-shortcode-container .mobile-search-container.expanded.has-value input.mobile-search-input,
body .chat-shortcode-container .mobile-search-container.expanded.has-value input[type="search"] {
    width: 100% !important;
    max-width: 500px !important;
    min-width: 300px !important;
}

/* ULTIMATE OVERRIDE: Override w-24 class and all Tailwind classes */
body .chat-shortcode-container .mobile-search-container.expanded .mobile-search-input.w-24,
body .chat-shortcode-container .mobile-search-container.expanded input.mobile-search-input.w-24,
body .chat-shortcode-container .mobile-search-container.expanded input[type="search"].w-24 {
    width: 100% !important;
    max-width: 500px !important;
    min-width: 300px !important;
}

/* Override all possible Tailwind width classes */
body .chat-shortcode-container .mobile-search-container.expanded .mobile-search-input[class*="w-"],
body .chat-shortcode-container .mobile-search-container.expanded input.mobile-search-input[class*="w-"],
body .chat-shortcode-container .mobile-search-container.expanded input[type="search"][class*="w-"] {
    width: 100% !important;
    max-width: 500px !important;
    min-width: 300px !important;
}

/* JavaScript injection point for inline style override */
body .chat-shortcode-container .mobile-search-container.expanded .mobile-search-input[style*="width"],
body .chat-shortcode-container .mobile-search-container.expanded input.mobile-search-input[style*="width"],
body .chat-shortcode-container .mobile-search-container.expanded input[type="search"][style*="width"] {
    width: 100% !important;
    max-width: 500px !important;
    min-width: 300px !important;
}

/* JavaScript will be loaded separately to force inline style override */

/* Simple mobile search width fix for chat pages */
.chat-shortcode-container .mobile-search-container.expanded .mobile-search-input {
    width: 100% !important;
    max-width: 500px !important;
    min-width: 300px !important;
}

/* Mobile search container overflow prevention for lg:hidden expanded */
.chat-shortcode-container .mobile-search-container.lg\\:hidden.expanded {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    animation: fadeIn 0.3s ease !important;
}

/* Animation for mobile search container opening */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation for mobile search container closing */
.chat-shortcode-container .mobile-search-container.lg\\:hidden:not(.expanded) {
    transition: all 0.3s ease !important;
    animation: fadeOut 0.3s ease !important;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Ensure mobile search input stays within viewport bounds */
.chat-shortcode-container .mobile-search-container.lg\\:hidden.expanded .mobile-search-input {
    width: 100% !important;
    max-width: calc(100vw - 2rem) !important; /* Account for container padding */
    min-width: 280px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    animation: inputSlideIn 0.3s ease !important;
}

/* Animation for mobile search input opening */
@keyframes inputSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Animation for mobile search input closing */
.chat-shortcode-container .mobile-search-container.lg\\:hidden:not(.expanded) .mobile-search-input {
    transition: all 0.3s ease !important;
    animation: inputSlideOut 0.3s ease !important;
}

@keyframes inputSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
}

/* Mobile specific constraints for lg:hidden */
@media (max-width: 1023px) {
    .chat-shortcode-container .mobile-search-container.lg\\:hidden.expanded {
        padding: 0.75rem !important; /* Slightly reduced padding on mobile */
    }
    
    .chat-shortcode-container .mobile-search-container.lg\\:hidden.expanded .mobile-search-input {
        max-width: calc(100vw - 1.5rem) !important; /* Account for reduced padding */
        width: 100% !important;
        min-width: 260px !important; /* Smaller min-width on mobile */
    }
}

/* Very small mobile devices */
@media (max-width: 480px) {
    .chat-shortcode-container .mobile-search-container.lg\\:hidden.expanded {
        padding: 0.5rem !important; /* Minimal padding on very small screens */
    }
    
    .chat-shortcode-container .mobile-search-container.lg\\:hidden.expanded .mobile-search-input {
        max-width: calc(100vw - 1rem) !important; /* Account for minimal padding */
        width: 100% !important;
        min-width: 240px !important; /* Even smaller min-width */
    }
}