body { font-family: 'Inter', sans-serif; }
.hidden { display: none !important; }

#chat-messages { scrollbar-width: thin; scrollbar-color: #4b5563 #111827; }
#chat-messages::-webkit-scrollbar { width: 6px; }
#chat-messages::-webkit-scrollbar-track { background: #1f2937; }
#chat-messages::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 20px; }
.chat-bubble { padding: 10px 14px; border-radius: 18px; max-width: 80%; word-wrap: break-word; line-height: 1.4; }
.bubble-sent { background-color: #dcf8c6; color: #303030; border-bottom-right-radius: 4px; }
.bubble-received { background-color: #ffffff; color: #303030; border-bottom-left-radius: 4px; }

/* UPDATED: Timestamp is now a container */
.timestamp-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 4px;
}
.timestamp {
    margin-left: 4px; /* Space between ticks and time */
}

/* UPDATED: Image timestamp is now a flex container */
.image-timestamp {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 6px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 10px;
    user-select: none;
}
/* Make ticks inside image timestamps visible */
.image-timestamp .tick-icon.grey {
    color: #e5e7eb; /* Lighter grey for dark background */
}
.image-timestamp .tick-icon.blue {
    color: #60a5fa; /* Lighter blue for dark background */
}
.image-timestamp .timestamp {
    color: white; /* Ensure time is white */
}


.system-message {
    text-align: center; font-size: 0.875rem; color: #4b5563;
    background-color: #e5e7eb; padding: 4px 12px;
    border-radius: 9999px; margin: 8px auto; max-width: fit-content;
}
.system-message.clickable {
    cursor: pointer;
    background-color: #3b82f6; /* Blue background */
    color: white;
    font-weight: 500;
}
.system-message.clickable:hover {
    background-color: #2563eb; /* Darker blue on hover */
}

/* NEW: Styles for the tick icons */
.tick-icon {
    width: 16px;
    height: 16px;
}
.tick-icon.grey {
    color: #9ca3af; /* A bit lighter grey */
}
.tick-icon.blue {
    color: #3b82f6; /* Blue */
}
.double-tick-container {
    position: relative;
    width: 20px; /* Width to hold both ticks */
    height: 16px;
}
.double-tick-container .tick-icon {
    position: absolute;
}
.double-tick-container .tick-icon:first-child {
    left: 0;
}
.double-tick-container .tick-icon:last-child {
    left: 4px; /* Offset the second tick */
}


/* Video Call Styles (unchanged) */
#video-call-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #111827; z-index: 50; display: flex; flex-direction: column;
}
#video-streams { flex-grow: 1; position: relative; overflow: hidden; }
#local-video-container {
    position: absolute; bottom: 20px; right: 20px; width: 120px;
    height: 160px; border: 2px solid white; border-radius: 8px;
    overflow: hidden; z-index: 10;
}
#video-call-controls {
    background-color: rgba(0, 0, 0, 0.5); padding: 16px;
    display: flex; justify-content: center; align-items: center; gap: 20px;
}
.control-button {
    width: 60px; height: 60px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; cursor: pointer; color: white;
}
#permission-error {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background-color: rgba(239, 68, 68, 0.8); /* Red background */
    color: white; padding: 20px; border-radius: 12px;
    text-align: center; max-width: 90%; z-index: 20;
}
/* NEW: Date Divider Styles */
.date-divider {
    text-align: center;
    font-size: 0.75rem; /* 12px */
    color: #4b5563; /* gray-600 */
    background-color: #e5e7eb; /* gray-200 */
    padding: 4px 12px;
    border-radius: 9999px; /* rounded-full */
    margin: 16px auto; /* my-4 */
    max-width: fit-content;
    font-weight: 500;
}