/* Pixenth Mail — основные стили */

/* Скроллбары */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
.dark ::-webkit-scrollbar-thumb {
  background: #2a2c34;
  border-radius: 3px;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #3a3c44;
}
.light ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* Папки боковой панели */
.dark .folder-btn {
  color: #9ca3af;
}
.dark .folder-btn:hover {
  background: #1e2028;
  color: #e5e7eb;
}
.dark .folder-btn.active {
  background: rgba(124, 107, 255, 0.12);
  color: #a5a0ff;
}
.light .folder-btn {
  color: #4b5563;
}
.light .folder-btn:hover {
  background: #f3f4f6;
  color: #111827;
}
.light .folder-btn.active {
  background: rgba(124, 107, 255, 0.1);
  color: #5a3de8;
}

/* Элемент списка писем */
.mail-item {
  cursor: pointer;
  transition: background-color 0.15s;
}
.dark .mail-item:hover {
  background: #1e2028;
}
.dark .mail-item.active {
  background: rgba(124, 107, 255, 0.08);
  border-left: 3px solid #7c6bff;
}
.dark .mail-item.unread {
  background: rgba(124, 107, 255, 0.04);
}
.light .mail-item:hover {
  background: #f3f4f6;
}
.light .mail-item.active {
  background: rgba(124, 107, 255, 0.06);
  border-left: 3px solid #5a3de8;
}
.light .mail-item.unread {
  background: rgba(124, 107, 255, 0.03);
}

/* Аватар отправителя */
.sender-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  color: white;
}

/* Тело письма */
.mail-body {
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.dark .mail-body {
  color: #d1d5db;
}
.dark .mail-body a {
  color: #a5a0ff;
}
.light .mail-body {
  color: #1f2937;
}
.light .mail-body a {
  color: #5a3de8;
}
.mail-body img {
  max-width: 100%;
  height: auto;
}
.mail-body table {
  max-width: 100%;
}

/* Quill — тёмная тема */
.dark .ql-toolbar.ql-snow {
  border-color: #2a2c34;
  background: #181a20;
}
.dark .ql-container.ql-snow {
  border-color: #2a2c34;
  background: #13141a;
  color: #e5e7eb;
}
.dark .ql-editor.ql-blank::before {
  color: #6b7280;
}
.dark .ql-snow .ql-stroke {
  stroke: #9ca3af;
}
.dark .ql-snow .ql-fill,
.dark .ql-snow .ql-stroke.ql-fill {
  fill: #9ca3af;
}
.dark .ql-snow .ql-picker {
  color: #9ca3af;
}
.dark .ql-snow .ql-picker-options {
  background: #1e2028;
  border-color: #2a2c34;
}

/* Quill — контейнер */
.ql-container {
  font-family: inherit;
  font-size: 14px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.ql-toolbar.ql-snow {
  flex-shrink: 0;
}
.ql-editor {
  min-height: 80px;
}
#compose-editor {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 767px) {
  #compose-editor .ql-container.ql-snow {
    max-height: 280px !important;
    height: 280px !important;
    overflow-y: auto !important;
  }
}

/* Toast */
.toast {
  animation: toast-in 0.3s ease-out;
}
.toast.toast-out {
  animation: toast-out 0.3s ease-in forwards;
}
@keyframes toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* Значок безопасности */
.security-pass {
  color: #22c55e;
}
.security-fail {
  color: #ef4444;
}

/* Табы настроек */
.settings-tab {
  color: #9ca3af;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.settings-tab:hover {
  color: #e5e7eb;
}
.settings-tab.active {
  color: #a5a0ff;
  border-bottom-color: #7c6bff;
}
.light .settings-tab {
  color: #6b7280;
}
.light .settings-tab:hover {
  color: #111827;
}
.light .settings-tab.active {
  color: #5a3de8;
  border-bottom-color: #5a3de8;
}

/* Подпись — Quill в настройках */
#settings-signature-editor {
  display: flex;
  flex-direction: column;
}
#settings-signature-editor .ql-container.ql-snow {
  min-height: 120px;
}

/* Кнопки действий письма */
#view-actions button {
  white-space: nowrap;
}

/* Светлая тема */
.light body,
html.light body {
  background: #f8f9fa;
  color: #1f2937;
}
html.light #login-screen {
  background: #f8f9fa;
}
html.light #login-screen input {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
}
html.light #sidebar {
  background: #ffffff;
  border-color: #e5e7eb;
}
html.light #mail-list-panel {
  background: #fafbfc;
  border-color: #e5e7eb;
}
html.light #mail-list-panel .border-b {
  border-color: #e5e7eb;
}
html.light #mail-view-panel {
  background: #ffffff;
}
html.light .border-surface-800 {
  border-color: #e5e7eb;
}
html.light #compose-modal .bg-surface-900,
html.light #settings-modal .bg-surface-900 {
  background: #ffffff;
}
html.light #compose-modal .bg-surface-850,
html.light #settings-modal .bg-surface-850 {
  background: #f9fafb;
}
html.light #compose-modal input,
html.light #settings-modal input,
html.light #settings-modal select {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
}
html.light #security-tooltip {
  background: #ffffff;
  border-color: #e5e7eb;
}

/* Светлая тема — текст и элементы */
html.light .text-white {
  color: #111827;
}
html.light .text-gray-200 {
  color: #374151;
}
html.light .text-surface-200 {
  color: #1f2937;
}
html.light .text-surface-300 {
  color: #374151;
}
html.light .text-surface-400 {
  color: #6b7280;
}
html.light .text-surface-500 {
  color: #9ca3af;
}
html.light .text-surface-600 {
  color: #6b7280;
}
html.light .bg-surface-950 {
  background-color: #f8f9fa;
}
html.light .bg-surface-900 {
  background-color: #ffffff;
}
html.light .bg-surface-900\/50 {
  background-color: rgba(255,255,255,0.8);
}
html.light .bg-surface-800 {
  background-color: #f3f4f6;
}
html.light .border-surface-800 {
  border-color: #e5e7eb !important;
}
html.light .border-surface-800\/50 {
  border-color: rgba(229,231,235,0.5) !important;
}
html.light .border-surface-700 {
  border-color: #d1d5db;
}
html.light .hover\:bg-surface-800:hover {
  background-color: #f3f4f6;
}
html.light .hover\:bg-surface-700:hover {
  background-color: #e5e7eb;
}
html.light .hover\:text-white:hover {
  color: #111827;
}
html.light #folder-title {
  color: #111827;
}
html.light #view-subject {
  color: #111827;
}
html.light #view-from-name {
  color: #111827;
}
html.light #mail-view-empty svg {
  color: #d1d5db;
}
html.light #mail-view-empty p {
  color: #6b7280;
}
html.light .placeholder-surface-500::placeholder {
  color: #9ca3af;
}

/* Светлая тема — кнопки действий */
html.light #view-actions button {
  background: #f3f4f6;
  color: #4b5563;
}
html.light #view-actions button:hover {
  background: #e5e7eb;
  color: #111827;
}

/* Светлая тема — PIN overlay */
html.light #pin-lock-overlay {
  background: rgba(248,249,250,0.97) !important;
}
html.light #pin-lock-overlay .text-white {
  color: #111827;
}
html.light #pin-lock-overlay input {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
}

/* Кастомные папки */
.custom-folder-btn {
  user-select: none;
}
.dark .custom-folder-btn {
  color: #9ca3af;
}
.dark .custom-folder-btn:hover {
  background: #1e2028;
  color: #e5e7eb;
}
.dark .custom-folder-btn.active {
  background: rgba(124, 107, 255, 0.12);
  color: #a5a0ff;
}
.light .custom-folder-btn {
  color: #4b5563;
}
.light .custom-folder-btn:hover {
  background: #f3f4f6;
  color: #111827;
}
.light .custom-folder-btn.active {
  background: rgba(124, 107, 255, 0.1);
  color: #5a3de8;
}

/* Модалка кастомных папок */
html.light #folder-edit-modal .bg-surface-900 {
  background: #ffffff;
}
html.light #folder-edit-modal input {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
}

/* Дропдаун папок */
html.light #folder-label-dropdown {
  background: #ffffff;
  border-color: #e5e7eb;
}
html.light #folder-label-dropdown button {
  color: #374151;
}
html.light #folder-label-dropdown button:hover {
  background: #f3f4f6;
  color: #111827;
}

/* Compose Cc toggle */
#compose-cc-toggle {
  font-weight: 500;
}
html.light #compose-cc-toggle {
  color: #6b7280;
}
html.light #compose-cc-toggle:hover {
  background: #f3f4f6;
  color: #111827;
}

/* Мультивыделение */
.mail-item.selected {
  background: rgba(124, 107, 255, 0.1);
}
.light .mail-item.selected {
  background: rgba(90, 61, 232, 0.07);
}
.mail-item .mail-item-check {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

/* Bulk action bar */
#bulk-action-bar {
  border-top: 1px solid;
}
.dark #bulk-action-bar {
  background: #1e2028;
  border-color: #2a2c34;
}
.light #bulk-action-bar {
  background: #f3f4f6;
  border-color: #e5e7eb;
}
html.light #bulk-folder-dropdown {
  background: #ffffff;
  border-color: #e5e7eb;
}
html.light #bulk-folder-dropdown button {
  color: #374151;
}
html.light #bulk-folder-dropdown button:hover {
  background: #f3f4f6;
  color: #111827;
}

/* Thread предыдущие сообщения */
.thread-msg-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
  line-height: 1.6;
}
.dark .thread-msg-body {
  color: #d1d5db;
}
.light .thread-msg-body {
  color: #1f2937;
}
.thread-msg-body a {
  color: #a5a0ff;
}
.light .thread-msg-body a {
  color: #5a3de8;
}
.thread-msg-body img {
  max-width: 100%;
}

/* Светлая тема — правила фильтров */
html.light #rules-list .border-surface-700 {
  border-color: #e5e7eb;
}
html.light #rules-list .bg-surface-800\/50 {
  background: #f9fafb;
}
html.light #rule-edit-form {
  background: rgba(90,61,232,0.04);
  border-color: rgba(90,61,232,0.3);
}
html.light #rule-edit-form select,
html.light #rule-edit-form input {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
}

/* Spinner для кнопки */
.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}