/* ============================================
   Chat Me! - Main Styles
   ============================================ */

/* ============ DARK MODE ============ */

.dark {
  color-scheme: dark;
}

.dark body {
  background-color: #0f172a;
}

.dark .bg-slate-100 {
  background-color: #0f172a;
}

.dark .bg-slate-50 {
  background-color: #1e293b;
}

.dark .bg-white {
  background-color: #1e293b;
}

.dark .text-gray-800 {
  color: #e2e8f0;
}

.dark .text-gray-600 {
  color: #94a3b8;
}

.dark .text-gray-500 {
  color: #94a3b8;
}

.dark .text-gray-400 {
  color: #64748b;
}

.dark .border-gray-100,
.dark .border-gray-200 {
  border-color: #334155;
}

.dark .border-b {
  border-color: #334155;
}

.dark .border-t {
  border-color: #334155;
}

.dark .hover\\:bg-gray-100:hover {
  background-color: #334155;
}

.dark input,
.dark textarea {
  background-color: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
}

.dark input::placeholder {
  color: #64748b;
}

.dark .shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .emoji-picker {
  background-color: #1e293b;
  border-color: #334155;
}

.dark #editModal > div {
  background-color: #1e293b;
}

.dark .reaction-badge,
.dark .reactions-container button {
  background-color: #1e293b;
  border-color: #334155;
}

.dark .bg-gray-200\\/80 {
  background-color: rgba(51, 65, 85, 0.8);
}

.dark .bg-gray-300 {
  background-color: #475569;
}

/* Search modal dark mode */
.dark #searchModal > div {
  background-color: #1e293b;
}

.dark .search-result {
  background-color: #0f172a;
  border-color: #334155;
}

.dark .search-result:hover {
  background-color: #1e293b;
}

/* Reply preview dark mode */
.dark #replyPreview {
  background-color: #1e293b;
  border-color: #4f46e5;
}

.dark .reply-quote {
  background-color: rgba(79, 70, 229, 0.1);
  border-left-color: #4f46e5;
}

/* ============ THEME TRANSITION ============ */

body,
.bg-white,
.bg-slate-100,
.bg-slate-50,
input,
textarea {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

/* Emoji Picker */
.emoji-picker {
  display: none;
}

.emoji-picker.active {
  display: flex;
}

/* Message Actions (Edit/Delete buttons) */
.message-actions {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.group:hover .message-actions {
  opacity: 1;
}

/* Sidebar Mobile Override */
.sidebar-open {
  transform: translateX(0) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Message transitions */
.message-item {
  animation: messageSlideIn 0.2s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Image hover effect */
.message-content img {
  max-height: 300px;
  object-fit: contain;
}

/* Typing indicator dots animation */
.typing-dots::after {
  content: "";
  animation: typingDots 1.5s infinite;
}

@keyframes typingDots {
  0%,
  20% {
    content: ".";
  }
  40% {
    content: "..";
  }
  60%,
  100% {
    content: "...";
  }
}

/* File preview styling */
#filePreview {
  transition: all 0.2s ease;
}

/* Room list active state enhancement */
.room-active {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

/* Online indicator pulse */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse-animation {
  animation: pulse 2s infinite;
}

/* Modal backdrop blur */
#editModal {
  backdrop-filter: blur(4px);
}

/* Button press effect */
button:active {
  transform: scale(0.98);
}

/* Input focus glow */
input:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Avatar hover effect */
.avatar-hover:hover {
  transform: scale(1.05);
  transition: transform 0.15s ease;
}

/* Notification badge */
.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid white;
}

/* Smooth sidebar transition on desktop resize */
@media (min-width: 768px) {
  #sidebar {
    transform: translateX(0) !important;
  }
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .max-w-xs {
    max-width: 85%;
  }

  .max-w-xs.md\\:max-w-md {
    max-width: 85%;
  }

  #input {
    font-size: 16px; /* Prevent iOS zoom */
  }

  /* Tighter message spacing on mobile */
  .message-item {
    padding-left: 0;
    padding-right: 0;
  }

  /* Smaller avatars on messages */
  .message-item .w-8 {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.7rem;
  }

  /* More compact message bubbles */
  .message-item .px-4 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .message-item .py-2\\.5 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Smaller file upload button area */
  label .w-6,
  #voiceRecordBtn .w-6 {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Voice recording compact */
  #voiceRecordingUI {
    gap: 0.5rem;
  }

  /* Reply preview compact */
  #replyPreview {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.5rem 0.75rem;
  }

  /* File preview compact */
  #filePreview {
    font-size: 0.8rem;
  }

  /* Emoji picker - full width on mobile */
  .emoji-picker {
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 80px !important;
    top: auto !important;
  }

  /* Edit modal - more padding from edges */
  #editModal > div {
    margin: 0.5rem;
  }

  /* Search modal - closer to top on mobile */
  #searchModal {
    padding-top: 3rem;
  }

  /* Typing indicator compact */
  #typing {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.75rem;
  }
}

/* Extra small screens (phones in portrait) */
@media (max-width: 380px) {
  .max-w-xs,
  .max-w-xs.md\\:max-w-md {
    max-width: 80%;
  }

  #form {
    padding: 0.375rem;
  }

  #form label,
  #voiceRecordBtn {
    padding: 0.375rem;
  }
}

/* Landscape phone optimization */
@media (max-height: 500px) and (orientation: landscape) {
  #messages {
    padding: 0.5rem;
  }

  #form {
    padding: 0.375rem 0.5rem;
  }

  #typing {
    height: 1.25rem;
    font-size: 0.7rem;
  }
}

/* Safe area insets (notch / dynamic island / home bar) */
.safe-area-top {
  padding-top: max(0.5rem, env(safe-area-inset-top));
}

.safe-area-bottom {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* Fix for mobile browsers with dynamic address bar (100dvh) */
@supports (height: 100dvh) {
  body {
    height: 100dvh !important;
  }
}

/* Touch-friendly tap targets — minimum 44px */
@media (pointer: coarse) {
  #onlineUsers li,
  #roomList li,
  #dmList li {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .emoji-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Easier to tap message action buttons */
  .message-actions button {
    padding: 0.5rem;
  }

  /* Make the sidebar toggle button larger */
  #sidebarToggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Show message actions on mobile (no hover) */
  .group .message-actions {
    opacity: 1;
  }
}

/* Smooth scroll for messages */
#messages {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* Prevent text selection on UI elements while allowing it on messages */
button,
label,
header,
aside {
  -webkit-user-select: none;
  user-select: none;
}

.message-content {
  -webkit-user-select: text;
  user-select: text;
}

/* ============ IMAGE LIGHTBOX ============ */

#lightboxOverlay {
  animation: fadeIn 0.2s ease-out;
}

#lightboxImage {
  animation: lightboxZoomIn 0.25s ease-out;
}

@keyframes lightboxZoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============ SCROLL TO BOTTOM ============ */

#scrollToBottom {
  animation: fadeIn 0.2s ease-out;
}

#scrollToBottom button {
  transition: all 0.2s ease;
}

/* ============ DARK MODE EXTRAS ============ */

.dark #filePreview {
  background-color: #312e81;
  border-color: #4338ca;
}

.dark #filePreview span {
  color: #c7d2fe;
}

.dark #scrollToBottom button {
  background-color: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

.dark #lightboxOverlay {
  background-color: rgba(0, 0, 0, 0.95);
}

/* ============ LINKIFIED URLS ============ */

.message-content a {
  word-break: break-all;
}

/* Links in own messages (white text) */
.from-indigo-500 .message-content a {
  color: inherit;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.from-indigo-500 .message-content a:hover {
  text-decoration-color: white;
}

/* Links in others' messages */
.bg-white .message-content a {
  color: #4f46e5;
  text-decoration-color: rgba(79, 70, 229, 0.4);
}

.bg-white .message-content a:hover {
  text-decoration-color: #4f46e5;
}

/* ============ VOICE RECORDING ============ */

.recording-pulse {
  animation: recordPulse 1s ease-in-out infinite;
}

@keyframes recordPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.3);
  }
}

/* Voice message player */
.voice-message {
  min-width: 200px;
}

.voice-progress {
  cursor: pointer;
}

.voice-progress-bar {
  transition: width 0.1s linear;
}

/* ============ VIDEO CALL ============ */

/* Incoming call pulse */
.incoming-call-pulse {
  animation: incomingPulse 1.5s ease-in-out infinite;
}

@keyframes incomingPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(99, 102, 241, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
  }
}

/* Call overlay */
#callOverlay {
  z-index: 70;
}

#callOverlay video {
  background: #1a1a2e;
}

/* Local video PiP */
#localVideo {
  transform: scaleX(-1); /* Mirror local video */
}

/* ============ DARK MODE ADDITIONS ============ */

.dark #incomingCallModal > div {
  background-color: #1e293b;
}

.dark #incomingCallModal h3 {
  color: #e2e8f0;
}

.dark #incomingCallModal p {
  color: #94a3b8;
}

.dark .voice-message .voice-progress {
  background-color: #334155;
}

.dark #voiceRecordingUI {
  background-color: transparent;
}

/* ============ DRAG & DROP ============ */

#dropZone {
  transition: opacity 0.2s ease;
}

.dark #dropZone {
  background-color: rgba(79, 70, 229, 0.15);
  border-color: #6366f1;
}

.dark #dropZone p:first-of-type {
  color: #a5b4fc;
}

.dark #dropZone p:last-of-type {
  color: #6366f1;
}

/* ============ COMPOSE EMOJI PICKER ============ */

#composeEmojiPicker {
  scrollbar-width: thin;
}

.compose-emoji-item {
  cursor: pointer;
  min-width: 36px;
  min-height: 36px;
}

.dark #composeEmojiPicker {
  background-color: #1e293b;
  border-color: #334155;
}

.dark .compose-emoji-item:hover {
  background-color: #334155;
}

/* ============ USER PROFILE POPUP ============ */

.dark #userProfilePopup {
  background-color: #1e293b;
  border-color: #334155;
}

/* ============ PINNED MESSAGES ============ */

.dark #pinnedModal > div {
  background-color: #1e293b;
}

.dark .pinned-item {
  background-color: #0f172a;
  border-color: #334155;
}

.dark .pinned-item:hover {
  background-color: #1e293b;
}

.pinned-indicator {
  color: #6366f1;
}

/* ============ UNREAD BADGE ============ */

.unread-badge {
  animation: badgePop 0.2s ease-out;
}

@keyframes badgePop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* ============ LINK PREVIEW ============ */

.link-preview {
  transition: background-color 0.15s ease;
}

.link-preview img {
  border-bottom: 1px solid #e2e8f0;
}

.dark .link-preview {
  background-color: #0f172a;
  border-color: #334155;
}

.dark .link-preview:hover {
  background-color: #1e293b;
}

.dark .link-preview img {
  border-color: #334155;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}