.ql-secureframe-theme {
  font-family: var(--secureframe-inter);
  font-size: 1rem;
  line-height: 1.25rem;
}

/* Toolbar Styling */

.ql-secureframe-theme .ql-toolbar {
  display: flex;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
  background-color: var(--secureframe-ink25);
  border: none;
  border-radius: var(--secureframe-radius-md) var(--secureframe-radius-md) 0 0;
  padding: 16px;
}

/* Toolbar Buttons */

.ql-secureframe-theme .ql-toolbar button {
  display: grid;
  align-items: center;
  justify-content: center;
  color: var(--secureframe-text);
  background-color: transparent;
  border: none;
  border-radius: var(--secureframe-radius-sm);
  padding: var(--secureframe-spacing-xs);
  width: 32px;
  height: 32px;
  font-weight: var(--secureframe-font-weight-medium);
}

.ql-secureframe-theme .ql-toolbar button:hover {
  background-color: rgba(9, 25, 34, 0.07);
  color: white;
  box-shadow: var(--secureframe-shadow-sm);
}

.ql-secureframe-theme .ql-toolbar button:active {
  transform: translateY(0);
  box-shadow: none;
}

.ql-secureframe-theme .ql-toolbar button.ql-active {
  background-color: var(--secureframe-ink800);
  color: white;
  font-weight: var(--secureframe-font-weight-semibold);
}

.ql-secureframe-theme .ql-toolbar button svg {
  float: none;
  width: 16px;
  height: 16px;
}

.ql-secureframe-theme .ql-toolbar button:hover {
  .ql-fill,
  .ql-stroke {
    stroke: var(--secureframe-ink800);
  }
}

.ql-secureframe-theme .ql-toolbar button.ql-active {
  svg,
  svg path,
  .ql-stroke {
    stroke: white;
  }
}

/* Toolbar Dropdowns */

.ql-secureframe-theme .ql-toolbar select {
  background-color: var(--secureframe-ink25);
  border: 1px solid var(--secureframe-ink150);
  border-radius: var(--secureframe-radius-sm);
  color: var(--secureframe-ink1000);
  font: var(--secureframe-p2);
  padding: var(--secureframe-spacing-xs) var(--secureframe-spacing-sm);
}

.ql-secureframe-theme .ql-toolbar select:hover {
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

.ql-secureframe-theme .ql-toolbar select:focus {
  outline: none;
  border-color: var(--secureframe-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2);
}

.ql-secureframe-theme .ql-toolbar .ql-formats {
  margin-right: 0;
}

.ql-secureframe-theme .ql-picker {
  background-color: white;
  border: 1px solid var(--secureframe-ink150);
  border-radius: 6px;
  padding: 6px 12px;
  height: auto;
}

.ql-secureframe-theme .ql-picker-label {
  padding-left: 0;
}

/* Select text label */

.ql-secureframe-theme .ql-picker.ql-header {
  width: -moz-fit-content;
  width: fit-content;
  min-width: 180px;
  font: var(--secureframe-p2);
}

.ql-secureframe-theme .ql-toolbar .ql-picker.ql-expanded .ql-picker-label {
  border-color: transparent;
  color: var(--secureframe-ink1000);
  font: var(--secureframe-p2);
}

.ql-secureframe-theme .ql-toolbar .ql-picker-label.ql-active,
.ql-secureframe-theme .ql-picker.ql-expanded .ql-picker-label:hover .ql-stroke,
.ql-secureframe-theme .ql-toolbar .ql-picker-label:hover,
.ql-secureframe-theme .ql-toolbar .ql-picker-label:hover .ql-stroke {
  color: var(--secureframe-ink800);
  stroke: var(--secureframe-ink800);
}

.ql-secureframe-theme .ql-picker.ql-header {
  .ql-picker-item[data-value='1']::before,
  .ql-picker-item[data-value='2']::before,
  .ql-picker-item[data-value='3']::before {
    font: var(--secureframe-p2);
    color: var(--secureframe-ink1000);
  }
}

.ql-secureframe-theme .ql-picker-options .ql-picker-item {
  padding: 8px 12px;
  border-radius: 8px;
}

.ql-secureframe-theme .ql-picker-options .ql-picker-item:hover {
  background-color: var(--secureframe-ink25);
  color: var(--secureframe-ink800);
}

/* Editor Container */

.ql-secureframe-theme.ql-container.ql-snow {
  border: 1px solid var(--secureframe-border);
  border-top: none;
  border-radius: 0 0 var(--secureframe-radius-md) var(--secureframe-radius-md);
  font: var(--secureframe-p2);
  color: var(--secureframe-ink1000);
}

/* Editor Content Area */

.ql-secureframe-theme .ql-editor {
  background-color: white;
  color: var(--secureframe-ink1000);
  padding: 10px 8px 10px 12px;
  border-radius: 0 0 var(--secureframe-radius-md) var(--secureframe-radius-md);
  font: var(--secureframe-p2);
  color: var(--secureframe-ink1000);
  min-height: 0;
}

/* Placeholder Styling */

.ql-secureframe-theme .ql-editor.ql-blank::before {
  color: var(--secureframe-ink800);
  font-style: italic;
}

/* Selection Styling */

.ql-secureframe-theme .ql-editor ::selection {
  background-color: var(--secureframe-blue500);
  color: var(--secureframe-ink1000);
}

/* Link Styling */

.ql-secureframe-theme .ql-editor a {
  color: var(--secureframe-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--secureframe-accent);
  transition: all 0.15s ease-in-out;
}

.ql-secureframe-theme .ql-editor a:hover {
  color: var(--secureframe-primary);
  border-bottom-color: var(--secureframe-primary);
}

/* List Styling */

.ql-secureframe-theme .ql-editor {
  ul,
  ol {
    padding-left: var(--secureframe-spacing-md);
  }
}

.ql-secureframe-theme .ql-editor li {
  margin-bottom: var(--secureframe-spacing-xs);
  line-height: var(--secureframe-line-height);
  padding-left: var(--secureframe-spacing-md);
}

.ql-secureframe-theme .ql-editor h1 {
  font: var(--secureframe-h1-page-title);
  color: var(--secureframe-primary);
  margin-bottom: 1.5rem;
}

.ql-secureframe-theme .ql-editor h2 {
  font: var(--secureframe-h2-large-title);
  color: var(--secureframe-secondary);
  margin-bottom: 1rem;
  font-weight: 500;
}

/* Dark Theme Overrides */

.ql-secureframe-theme--dark .ql-toolbar {
  background-color: var(--secureframe-surface);
  border-color: var(--secureframe-border);
}

.ql-secureframe-theme--dark .ql-editor {
  background-color: var(--secureframe-background);
  color: var(--secureframe-text);
}

@media (max-width: 768px) {
  .ql-secureframe-theme .ql-toolbar {
    padding: var(--secureframe-spacing-xs);
  }

  .ql-secureframe-theme .ql-toolbar button {
    margin: 0 1px;
    padding: calc(var(--secureframe-spacing-xs) - 1px);
  }

  .ql-secureframe-theme .ql-editor {
    padding: var(--secureframe-spacing-md);
  }
}

@keyframes secureframe-bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Plain Text Mode - Hide toolbar and adjust editor styling */

.ql-secureframe-theme.ql-toolbar-hidden {
  .ql-toolbar {
    display: none;
  }

  .ql-container {
    border-top: 1px solid var(--secureframe-border);
    border-radius: var(--secureframe-radius-md);
  }

  .ql-editor {
    border-radius: var(--secureframe-radius-md);
  }
}

.mention {
  font-weight: 600;
  padding: 2px 0;
  border-radius: 3px;
}