:root {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

html, body {
    height: 100%;
    min-height: -webkit-fill-available; /* iOS fix for viewport height */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents horizontal scroll/space */
}
body {
    font-family: 'Segoe UI', 'Inter', sans-serif;
    transition: background-color: 0.3s, color 0.3s;
    background-color: #F3F4F6 !important; /* Equivalent to Tailwind's bg-gray-100 */
    color: #1f2937 !important;
}
#main-container {
    height: 100%; /* Fill the height of the body */
}
.interest-bubble {
    position: relative;
    display: inline-block;
    background-color: #E7F3FF;
    color: #1877F2;
    border-radius: 16px;
    padding: 8px 28px 8px 16px;
    margin: 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}
.interest-bubble button {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background-color: #1877F2;
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}
.interest-bubble button:hover {
    transform: scale(1.1);
}
#messages-container {
     scrollbar-width: thin;
     scrollbar-color: #d1d5db #F0F2F5;
}

#messages-container .message-wrapper {
    overflow-wrap: break-word;
}


.watermark-blur {
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

#messages-container > div {
    position: relative;
    z-index: 10;
}

.chat-bg {
    background-color: #F0F2F5;
}
.typing-indicator span {
    height: 8px;
    width: 8px;
    background-color: #9ca3af;
    border-radius: 50%;
    display: inline-block;
    animation: bounce 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

.grecaptcha-badge {
    transform: scale(0.7) !important;
    transform-origin: bottom right !important;
    bottom: 15px !important;
}

.logo-bg {
    background-color: white;
    border-radius: 8px;
    padding: 2px;
}

.static-content-card {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}
.header-bar, .footer-bar {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}
.footer-bar a, .footer-bar div {
    color: #6b7280 !important;
}

.message-wrapper {
    position: relative;
    user-select: none;
}

.message-bubble-container {
    position: relative;
    z-index: 2;
    transition: transform 0.15s ease-out;
    touch-action: pan-y;
}

.swipe-reply-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #6b7280;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    z-index: 1;
}

html.dark .swipe-reply-icon {
    color: #9ca3af;
}

.swipe-reply-icon.left {
    right: 15px;
}

.swipe-reply-icon.right {
    left: 15px;
}

.reply-context-box {
    padding: 6px 10px;
    margin-bottom: 4px;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.05);
    border-left: 3px solid;
    font-size: 14px;
    max-width: 100%;
}
html.dark .reply-context-box {
    background-color: rgba(255, 255, 255, 0.1);
}
.reply-message-text {
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4b5563; /* Default text color */
}

html.dark .reply-message-text {
    color: #d1d5db; /* Text color for dark mode */
}

.reply-tooltip {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #1f2937; /* gray-800 */
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
    animation: fadeInTooltip 0.5s 1s forwards; /* Fade in after 1s delay */
}

@keyframes fadeInTooltip {
    to { opacity: 1; }
}

.reply-tooltip.fade-out {
    opacity: 0;
}


/* Dark Mode Styles */
html.dark body { background-color: #1c1e21 !important; color: #e4e6eb !important; }
html.dark #main-container { background-color: #242526; box-shadow: 0 0 15px rgba(0,0,0,0.5); }
html.dark .text-blue-600 { color: #4b9cff; }
html.dark .header-bar { background-color: #3a3b3c !important; border-color: #4e4f50 !important; }
html.dark .footer-bar { background-color: #242526 !important; border-color: #3e4042 !important; }
html.dark .footer-bar a { color: #b0b3b8 !important; }
html.dark .footer-bar div { color: #b0b3b8 !important; }
html.dark .text-gray-800 { color: #e4e6eb; }
html.dark .text-gray-600, html.dark .text-gray-500 { color: #b0b3b8; }
html.dark .text-gray-700 { color: #dadde1; }

html:not(.dark) #interest-input,
html:not(.dark) #message-input {
    background-color: #F3F4F6 !important; /* bg-gray-100 */
    color: #111827 !important; /* text-gray-900 */
    border-color: #D1D5DB !important; /* border-gray-300 */
}

html.dark #interest-input, html.dark #message-input {
    background-color: #3a3b3c;
    border-color: #4e4f50;
    color: #e4e6eb;
}
html.dark .interest-bubble { background-color: #2d88ff; color: white; }
html.dark .interest-bubble button { background-color: #fff; color: #2d88ff; }
html.dark .chat-bg { background-color: #18191a; }
html.dark #messages-container { scrollbar-color: #4e4f50 #18191a; }
html.dark #chat-screen .border-gray-200 { border-color: #3e4042; }
html.dark #chat-screen .bg-white { background-color: #242526; }

/* FIX: Explicitly set light mode text color for stranger's message bubble */
html:not(.dark) .bg-gray-200 {
    background-color: #E5E7EB !important; /* Added to enforce light bubble background */
    color: #1f2937 !important; /* text-gray-800 */
}

/* FIX: Explicitly set light mode background for reply bar */
html:not(.dark) .bg-gray-100 {
    background-color: #F3F4F6 !important; /* Enforces Tailwind's bg-gray-100 color */
}

html.dark .bg-gray-200 { background-color: #3a3b3c; }
html.dark .bg-gray-100 { background-color: #1c1e21; }
html.dark aside { background-color: #1c1e21; }
html.dark aside div { background-color: #1c1e21; }
html.dark #startup-prompt { background-color: rgba(10,10,10,0.7); }
html.dark .bg-gray-200.text-gray-700 { color: #e4e6eb; }
html.dark .logo-bg { background-color: white; }

html.dark .static-content-card {
    background-color: #242526 !important;
    color: #d1d5db !important;
}

html.dark .reply-tooltip {
    background-color: #e5e7eb; /* gray-200 */
    color: #1f2937; /* gray-800 */
}

/* --- Updated Reply Context Box Styles --- */

/* Set the border color based on who is being replied to */
.reply-context-box.reply-to-user {
    border-left-color: #3b82f6; /* Blue border for "You" */
}
.reply-context-box.reply-to-stranger {
    border-left-color: #9ca3af; /* Gray border for "Stranger" */
}

/* Style the "You" and "Stranger" labels for visibility */
.reply-sender-name {
    line-height: 1.3;
}

/* When replying to "You" (label is in the light gray bubble) */
.reply-to-user .reply-sender-name {
    color: #2563eb; /* A strong, readable blue */
}
html.dark .reply-to-user .reply-sender-name {
    color: #60a5fa; /* A brighter blue for dark backgrounds */
}

/* When replying to "Stranger" (label is in your blue bubble) */
.reply-to-stranger .reply-sender-name {
    color: #ffffff;  /* White for high contrast */
    opacity: 0.95;    /* A subtle touch for a professional look */
}
/* FIX: Ensure watermark text is visible in light mode */
html:not(.dark) .watermark-text {
    color: #111827 !important; /* Enforces a dark color for the watermark text */
}
/* FIX: Ensure watermark text is visible in dark mode */
html.dark .watermark-text {
    color: #E5E7EB !important; /* Enforces a light color for the watermark text */
}