/*
 * This is a manifest file for frontend-specific styles.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Note: The chat/embed.css file is NOT imported here as it's loaded separately 
 * in the chat embed interface using its own stylesheet_link_tag.
 */

/* Frontend-specific styles below */

/* Add missing larger text sizes that Tailwind isn't generating */
.text-4xl {
  font-size: 2.25rem !important;
  line-height: 1.111 !important;
}

/* Message attachments styling */
.message-attachments {
  margin-top: 0.75rem;
}

.attachment-item {
  margin-bottom: 0.5rem;
}

.attachment-item:last-child {
  margin-bottom: 0;
}

/* Ensure attachments fit within chat bubbles */
.chat-bubble .attachment {
  max-width: 100%;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Adjust image sizes for message context */
.chat-bubble .attachment__preview img {
  max-width: 300px;
  max-height: 200px;
  object-fit: cover;
  border-radius: 0.375rem;
}

/* Compact styling for file attachments in messages */
.chat-bubble .attachment__caption {
  padding: 0.75rem;
  background-color: rgba(255, 255, 255, 0.95);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Ensure proper text color in dark theme chat bubbles */
.chat-bubble .attachment__name,
.chat-bubble .attachment__size {
  color: inherit;
}

/* Download button styling for message context */
.chat-bubble .btn-ghost {
  background-color: transparent;
  border: none;
  color: inherit;
}

.chat-bubble .btn-ghost:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.text-5xl {
  font-size: 3rem !important;
  line-height: 1 !important;
}

.text-6xl {
  font-size: 3.75rem !important;
  line-height: 1 !important;
}

/* Shared transition variables */
:root {
  --sidebar-transition-duration: 0.3s;
  --sidebar-transition-timing: ease-in-out;
  --sidebar-border-color: var(--color-base-300);
}

/* Sidebar content transitions */
.sidebar-content {
  transition: 
    opacity var(--sidebar-transition-duration) var(--sidebar-transition-timing),
    visibility var(--sidebar-transition-duration) var(--sidebar-transition-timing);
}

/* Additional sidebar styles */
#inboxes-sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
}

/* Conversation sidebar */
#conversations-list {
  display: flex;
  height: 100vh; /* Ensure full height */
  max-height: 100vh;
  position: relative; /* For pseudo-element positioning */
  z-index: 1;
  border-right: 1px solid var(--sidebar-border-color);
}

#conversations-list.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
}

#inbox-conversations {
  /* max-height: calc(100vh - 8rem); */
}

/* Right sidebar styles */
#right-sidebar {
  max-height: 100vh;
  overflow-y: auto;
  z-index: 1;
}

#right-sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
}

/* Toggle button styles */
#inboxes-sidebar-toggle {
  transition: left var(--sidebar-transition-duration) var(--sidebar-transition-timing);
}

#inboxes-sidebar-toggle svg {
  transition: transform var(--sidebar-transition-duration) var(--sidebar-transition-timing);
}

/* Menu active state */
.menu-active {
  /* background-color: rgba(var(--p), 0.1); */
  /* color: hsl(var(--p)); */
  /* color: var(--color-primary); */
}

.menu-active svg.text-base-content\/70 {
  color: var(--p) !important;
}

/* Custom shades for conversation area */
.chat-bubble-base {
  background-color: var(--color-base-200);
  /* color: hsl(var(--pc)); */
}

/* Use DaisyUI default chat styles with minor adjustments */

/* Layout adjustments for better conversation flow */
.chat-start {
  padding-right: 15%;
  align-items: flex-start;
  margin-top: 0;
}

.chat-end {
  padding-left: 15%;
  align-items: flex-end;
  margin-top: 0;
}

/* Ensure proper alignment */
.chat-start .flex-col {
  align-items: flex-start;
  width: 100%;
}

.chat-end .flex-col {
  align-items: flex-end;
  width: 100%;
}

/* Message group container */
.message-group {
  margin-bottom: 1.5rem;
  width: 100%;
}

/* Chat bubble styling */
.chat-bubble {
  width: fit-content;
  max-width: 100%;
  position: relative;
  margin-bottom: 0.25rem;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.chat-bubble-content {
  width: 100%;
  word-break: break-word;
}

.chat-bubble time {
  font-size: 10px;
  opacity: 0.5;
}

/* Ensure timestamps don't overlap */
.chat-start .chat-bubble, 
.chat-end .chat-bubble {
  min-width: 120px;
}

/* Message headers */
.message-group .text-left,
.message-group .text-right {
  font-size: 0.8rem;
}

.message-group .text-left span,
.message-group .text-right span {
  vertical-align: middle;
}

/* Footer styling */
.chat-footer {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  opacity: 0.7;
  text-align: right;
}

/* Space between message groups */
.chat + .chat {
  margin-top: 1.5rem;
}

/* Reply box styling */
#new-message-form .textarea {
  resize: vertical;
  min-height: 5rem;
  line-height: 1.5;
  font-size: 0.95rem;
  transition: border-color 0.2s ease-in-out;
}

#new-message-form .textarea:focus {
  border-color: transparent;
  box-shadow: none;
}

/* More prominent send button */
#new-message-form .btn-primary {
  min-width: 3rem;
}

/* Templates dropdown styling */
#new-message-form .dropdown-content {
  max-height: 16rem;
  overflow-y: auto;
}

.menu-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: hsl(var(--bc) / 0.6);
  padding: 0.25rem 0.75rem;
}

/* Character count styling */
#character-count.text-warning {
  color: hsl(var(--wa));
}

/* Responsive adjustments */
@media (max-width: 640px) {
  #new-message-form .textarea {
    min-height: 4rem;
  }
  
  #new-message-form .btn svg {
    margin: 0;
  }
}

/* Ensure navbar doesn't clip tooltips */
#navbar {
  overflow: visible;
}

/* Unread message styling */
.message-unread {
  position: relative;
}


.message-unread .chat-bubble-content {
  color: var(--color-base-content);
}

/* Unread indicator dot for contact messages */
.message-unread[data-message-sender="contact"] .chat-bubble::after {
  content: '';
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--color-primary);
  border-radius: 50%;
  border: 2px solid var(--color-base-100);
}

/* Mark as read animation */
.message-read-transition {
  transition: all 0.3s ease-in-out;
}

.message-read-transition.removing-unread .chat-bubble {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Keyboard shortcut hint styles */
.keyboard-shortcut-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: hsl(var(--bc) / 0.6);
}

.kbc-button-sm {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  color: hsl(var(--bc) / 0.7);
  background-color: hsl(var(--b2));
  border: 1px solid hsl(var(--bc) / 0.2);
  border-radius: 0.375rem;
  box-shadow: 0 1px 0 hsl(var(--bc) / 0.1);
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Noto Sans Mono', 'Droid Sans Mono', 'Courier New', monospace;
}

/* Mobile conversation navigation - hide conversation list on show page */
@media (max-width: 767px) {
  .mobile-conversation-hidden {
    display: none !important;
  }
  
  /* Hide keyboard shortcut hint on mobile */
  .keyboard-shortcut-hint {
    display: none !important;
  }
  
  /* Mobile slide transition for conversation content */
  #conversation_content {
    transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
  }
  
  /* Mobile slide transition for conversation list */
  #conversations-list {
    transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
  }
  
  /* Slide in animation (content slides in from right) */
  .mobile-slide-in {
    animation: slideInFromRight 0.3s ease-out;
  }
  
  /* Slide in animation for conversation list (slides in from left) */
  .mobile-slide-in-left {
    animation: slideInFromLeft 0.3s ease-out;
  }
  
  /* Slide out animation */
  .mobile-slide-out {
    animation: slideOutToRight 0.3s ease-in;
  }
}

/* Keyframes for mobile slide animations */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutToRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}