/**
 * Estilos para o CodeViewer com CodeMirror
 */

.code-viewer-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  position: relative;
}

/* Tema Dark (padrão) */
.code-viewer-theme-dark {
  background-color: #1e1e1e;
  color: #d4d4d4;
}

/* Tema Light */
.code-viewer-theme-light {
  background-color: #ffffff;
  color: #333333;
}

/* Botão copiar flutuante */
.code-viewer-copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--action-green);
  color: black;
  border: none;
  padding: 8px 14px;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.code-viewer-copy-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.code-viewer-copy-btn.copied {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.code-viewer-copy-btn svg {
  width: 16px;
  height: 16px;
}

.code-viewer-copy-btn span {
  font-size: 13px;
  font-weight: 500;
}

/* Container do CodeMirror */
.code-viewer-editor {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.code-viewer-editor .cm-editor {
  height: 100% !important;
  font-family: "Consolas", "Monaco", "Courier New", monospace !important;
  font-size: 13px !important;
}

.code-viewer-editor .cm-scroller {
  overflow: auto !important;
  font-family: "Consolas", "Monaco", "Courier New", monospace !important;
}

.code-viewer-editor .cm-content {
  font-family: "Consolas", "Monaco", "Courier New", monospace !important;
  padding: 8px 0 !important;
}

.code-viewer-editor .cm-line {
  padding: 0 8px !important;
  font-family: "Consolas", "Monaco", "Courier New", monospace !important;
}

/* Ocultar scrollbars do CodeMirror - Padrão da aplicação */
.code-viewer-editor .cm-scroller::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.code-viewer-editor .cm-scroller {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Cursor não deve aparecer (read-only) */
.code-viewer-editor .cm-cursor {
  display: none !important;
}

/* Ajuste de seleção para read-only */
.code-viewer-editor .cm-selectionBackground {
  background-color: rgba(100, 149, 237, 0.3) !important;
}
