/* Minimalistic Trix Editor for Chat */

/* Main container - add width and border styling */
.trix-chat {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background-color: white;
  overflow: hidden; /* Contain the toolbar */
}

/* Reduce the default height of the editor */
.trix-chat trix-editor {
  min-height: 60px;
  max-height: 120px;
  overflow-y: auto;
  padding: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none !important;
  border: none !important;
}

/* Focus styling */
.trix-chat trix-editor:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Toolbar styling - improved for mobile */
.trix-chat trix-toolbar {
  border-bottom: 1px solid #e5e7eb;
  padding: 0.5rem;
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  max-width: 100%;
  background-color: #f9fafb;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Show only essential button groups */
.trix-chat trix-toolbar .trix-button-group {
  margin-right: 0.5rem;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  background: white !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  overflow: hidden;
}

/* Hide advanced formatting button groups on mobile, keep basic ones */
@media (max-width: 768px) {
  .trix-chat trix-toolbar .trix-button-group:not(:first-child):not(:nth-child(2)) {
    display: none !important;
  }
}

/* Desktop: hide some groups */
@media (min-width: 769px) {
  .trix-chat trix-toolbar .trix-button-group:nth-child(n+4) {
    display: none !important;
  }
}

/* Show basic formatting (bold, italic, underline, strikethrough, link) */
.trix-chat trix-toolbar .trix-button-group:first-child .trix-button:not([data-trix-attribute="bold"]):not([data-trix-attribute="italic"]):not([data-trix-attribute="underline"]):not([data-trix-attribute="strike"]):not([data-trix-attribute="href"]) {
  display: none !important;
}

/* Make buttons touch-friendly */
.trix-chat trix-toolbar .trix-button {
  width: 2.25rem !important;
  height: 2.25rem !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  background: transparent !important;
  color: #374151 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  transition: background-color 0.15s ease !important;
  -webkit-tap-highlight-color: transparent; /* Remove iOS tap highlight */
}

/* Mobile: make buttons even larger for better touch targets */
@media (max-width: 768px) {
  .trix-chat trix-toolbar .trix-button {
    width: 2.75rem !important;
    height: 2.75rem !important;
    font-size: 1rem !important;
  }
}

/* Button separators */
.trix-chat trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #e5e7eb !important;
}

/* Button hover and active states */
.trix-chat trix-toolbar .trix-button:hover {
  background-color: #f3f4f6 !important;
}

.trix-chat trix-toolbar .trix-button.trix-active {
  background-color: #dbeafe !important;
  color: #1d4ed8 !important;
}

/* Ensure icons are properly displayed */
.trix-chat trix-toolbar .trix-button::before {
  position: absolute !important;
  content: '' !important;
  width: 1rem !important;
  height: 1rem !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Style the content display in chat messages */
.diary-message-content .trix-content {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

/* Make sure formatting is displayed properly in messages */
.diary-message-content {
  overflow-wrap: break-word;
}

.diary-message-content strong {
  font-weight: bold !important;
}

.diary-message-content em {
  font-style: italic !important;
}

.diary-message-content u {
  text-decoration: underline !important;
}

.diary-message-content s {
  text-decoration: line-through !important;
}

.diary-message-content a {
  color: #2563eb !important;
  text-decoration: underline !important;
}

/* Reset some trix default styles that might interfere */
.trix-content h1, .trix-content blockquote, .trix-content ul,
.trix-content ol, .trix-content pre {
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep paragraphs compact */
.trix-content div, .trix-content p {
  margin: 0 0 0.5rem 0 !important;
}

.trix-content p:last-child {
  margin-bottom: 0 !important;
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
  /* This targets iOS Safari */
  .trix-chat trix-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
  }
  
  .trix-chat trix-toolbar .trix-button {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  
  .trix-chat trix-editor {
    -webkit-overflow-scrolling: touch;
  }
}

/* Additional mobile enhancements */
@media (max-width: 768px) {
  /* Prevent zoom on input focus */
  .trix-chat trix-editor {
    font-size: 16px !important; /* iOS needs 16px to prevent zoom */
  }
  
  /* Better touch targets for mobile */
  .trix-chat trix-toolbar .trix-button {
    min-height: 44px !important; /* Apple's recommended minimum */
    min-width: 44px !important;
  }
  
  /* Improve toolbar scrolling on mobile */
  .trix-chat trix-toolbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }
  
  .trix-chat trix-toolbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
}

/* Viewport units fix for mobile keyboards */
@media (max-width: 768px) and (orientation: portrait) {
  .trix-chat {
    max-height: 50vh; /* Prevent editor from taking too much space */
  }
}

/* High DPI display improvements */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .trix-chat trix-toolbar .trix-button::before {
    background-size: 70%;
  }
}