/* ============================================================
   lorem.css
   CSS EXCLUSIVO

   Contém: o contador de quantidade (+/-), o checkbox de
   "começar com Lorem ipsum dolor sit amet…" e a caixa de
   texto onde o resultado aparece.
   ============================================================ */

/* ----------------------------------------------------------
   CONTADOR DE QUANTIDADE — botões +/- que ajustam quantos
   parágrafos, frases ou palavras serão gerados
   ---------------------------------------------------------- */
.count-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.count-row button {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--card-bg);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 15px;
}

.count-row button:hover {
    border-color: var(--accent);
}

.count-val {
    font-family: var(--font-mono);
    font-size: 14px;
    min-width: 22px;
    text-align: center;
    font-weight: 600;
}

/* ----------------------------------------------------------
   CHECKBOX "Começar com Lorem ipsum dolor sit amet…"
   ---------------------------------------------------------- */
.toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
}

.toggle-row input {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
}

/* empurra o botão "Gerar texto" pra ponta direita da linha de controles */
.btn-primary { margin-left: auto; }

/* ----------------------------------------------------------
   CAIXA DE RESULTADO — onde o texto gerado aparece, com
   rolagem própria se o texto for longo
   ---------------------------------------------------------- */
.output-box {
    background: var(--paper-dim);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px 20px;
    margin-top: 10px;
    font-size: 14.5px;
    max-height: 340px;
    overflow-y: auto;
}

.output-box p { margin: 0 0 14px; }
.output-box p:last-child { margin-bottom: 0; }

/* linha "Copiar texto / Copiar como HTML" abaixo da caixa de resultado */
.output-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

/* ----------------------------------------------------------
   RESPONSIVO — em telas estreitas, a quantidade ocupa uma
   linha sozinha; o checkbox de "Começar com Lorem ipsum" e o
   botão Gerar texto descem juntos pra linha seguinte
   ---------------------------------------------------------- */
@media (max-width: 1150px) { .controls .control-group:has(.count-row) { flex: 1 1 100%; } }