/* css/editor.css */

/* Input "Fantasma" - Onde o usuário digita no final do texto */
#ghost-input {
    border: none;
    outline: none;
    font-size: inherit;
    font-family: inherit;
    background: transparent;
    min-width: 10px;
    display: inline-block;
    color: #555;
    white-space: pre; /* Garante que espaços sejam respeitados */
}

/* Cursor piscando para indicar foco no ghost-input (opcional, mas ajuda na UX) */
#ghost-input:focus {
    border-right: 2px solid #333; /* Simula um cursor customizado */
    animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { border-color: transparent; } }


/* Estado visual da palavra sendo editada (Duplo Clique) */
.text-word[contenteditable="true"] {
    background-color: #fff3cd; /* Fundo amarelo claro */
    outline: 1px dashed #f1c40f; /* Borda tracejada */
    padding: 0 2px;
    min-width: 20px;
    cursor: text;
    border-radius: 2px;
    color: #000;
}

/* index.css ou editor.css */

.paragraph.align-left {
    text-align: left;
    justify-content: flex-start; /* Garante alinhamento em flexbox se houver */
}

.paragraph.align-center {
    text-align: center;
    justify-content: center;
}

.paragraph.align-right {
    text-align: right;
    justify-content: flex-end;
}

.paragraph.align-justify {
    text-align: justify;
    /* Para justificar flex-items (palavras) pode ser tricky, 
       mas text-align funciona bem se o display for block ou inline-block */
    justify-content: space-between; 
}