/* mail module styles */

.mail-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  isolation: isolate;
}

.mail-toolbar {
  flex-shrink: 0;
}

.mail-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.mail-sidebar {
  border-right: 1px solid rgb(var(--v-border-color));
  overflow-y: auto;
}

.mail-main {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-width: 0;
}

.mail-wrapper {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.mail-list-panel {
  width: 320px;
  min-width: 280px;
  max-width: 450px;
  border-right: 1px solid rgb(var(--v-border-color));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mail-reader-panel {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Tiptap editor styles */
.tiptap-editor {
  outline: none;
}

.tiptap-editor p.is-editor-empty:first-child::before {
  color: rgb(var(--v-theme-on-surface-variant));
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

/* Message list item styles */
.message-item {
  cursor: pointer;
  transition: background-color 0.2s;
}

.message-item:hover {
  background-color: rgba(var(--v-theme-on-surface), 0.04);
}

.message-item.selected {
  background-color: rgba(var(--v-theme-primary), 0.12);
}

.message-item.unread {
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 960px) {
  .mail-wrapper {
    flex-direction: column;
  }
  
  .mail-list-panel {
    width: 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid rgb(var(--v-border-color));
  }
  
  .mail-reader-panel {
    width: 100%;
  }
}