/* Modulo Sogni — Smart Muslim.
 *
 * I token qui sotto sono gli stessi di style.css dell'app. Sono ridichiarati
 * dentro un fallback (`var(--sm-ink, #18352e)`) cosi' il modulo ha l'aspetto
 * giusto sia da solo sia una volta incollato nell'app, dove i token veri
 * vincono e questo file non ne introduce di nuovi.
 */

.dream-module {
    --dream-canvas: var(--sm-canvas, #f3ede5);
    --dream-surface: var(--sm-surface, #fffdf9);
    --dream-ink: var(--sm-ink, #18352e);
    --dream-muted: var(--sm-muted, #6d746f);
    --dream-line: var(--sm-line, #e4d9cd);
    --dream-green: var(--sm-green, #1f604e);
    --dream-purple: var(--sm-purple, #765c9d);
    --dream-coral: var(--sm-coral, #c86f64);
    --dream-radius: var(--sm-radius-card, 18px);
    --dream-radius-control: var(--sm-radius-control, 13px);

    color: var(--dream-ink);
}

.dreams-view {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 0 calc(118px + env(safe-area-inset-bottom));
    overflow-x: clip;
}

.dreams-back { margin: 0 0 12px; }

.dreams-page-header {
    min-width: 0;
    min-height: 142px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 18px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--sm-line);
    border-radius: var(--sm-radius-card, 18px);
    background:
        linear-gradient(90deg, rgba(255,252,246,.98), rgba(255,252,246,.72) 58%, rgba(255,252,246,.18)),
        url('assets/ui/vita-v1/background/vita_sfondo_moschea.png') center right / cover no-repeat,
        var(--sm-surface);
}

.dreams-page-icon {
    width: 62px;
    height: 62px;
    overflow: hidden;
    border-radius: 50%;
}

.dreams-page-icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.dreams-page-header h1 { margin: 2px 0 2px; color: var(--sm-ink); font: 700 2.35rem/1.05 'Playfair Display', Georgia, serif; }
.dreams-page-header p { margin: 0; color: var(--sm-muted); font-size: .82rem; line-height: 1.4; }
.dreams-page-header .hub-eyebrow { color: var(--sm-coral); }

.dream-intro {
    text-align: center;
    color: var(--dream-muted);
    font-size: .92rem;
    line-height: 1.55;
    max-width: 34rem;
    margin: 0 auto 18px;
}

.dream-micro-note {
    width: fit-content;
    margin: -9px auto 18px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--dream-muted);
    background: color-mix(in srgb, var(--dream-green) 7%, var(--dream-surface));
    font-size: .75rem;
}

/* --- Composer -------------------------------------------------------- */

.dream-composer {
    background: var(--dream-surface);
    border: 1px solid var(--dream-line);
    border-radius: var(--dream-radius);
    padding: 18px;
}

.dream-eyebrow {
    display: block;
    color: var(--dream-coral);
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .7rem;
    margin-bottom: 6px;
}

.dream-composer h3 { margin: 0 0 12px; font-size: 1.05rem; }

.dream-composer textarea {
    width: 100%;
    min-height: 140px;
    resize: vertical;
    line-height: 1.55;
    font: inherit;
    /* Sotto i 16px Safari iOS zooma sulla pagina appena si tocca il campo. */
    font-size: max(16px, 1rem);
    color: var(--dream-ink);
    background: var(--dream-canvas);
    border: 1px solid var(--dream-line);
    border-radius: var(--dream-radius-control);
    padding: 12px 14px;
    box-sizing: border-box;
}

.dream-composer textarea:focus {
    outline: none;
    border-color: var(--dream-green);
}

.dream-composer-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.dream-submit {
    flex: 1 1 12rem;
    background: var(--dream-green);
    color: #fff;
    border: none;
    border-radius: var(--dream-radius-control);
    padding: 13px 18px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.dream-submit:disabled { opacity: .55; cursor: default; }

.dream-reset {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--dream-line);
    color: var(--dream-muted);
    border-radius: var(--dream-radius-control);
    padding: 0 16px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.dream-reset:hover { color: var(--dream-ink); border-color: var(--dream-muted); }

.dream-new,
.dream-retry {
    min-height: 42px;
    margin-top: 12px;
    padding: 10px 15px;
    border: 1px solid var(--dream-green);
    border-radius: var(--dream-radius-control);
    background: var(--dream-surface);
    color: var(--dream-green);
    font: 750 .82rem/1 var(--sm-sans, sans-serif);
}

.dream-hint {
    margin-top: 10px;
    font-size: .82rem;
    color: var(--dream-muted);
    line-height: 1.5;
}

/* --- Risultato ------------------------------------------------------- */

.dream-result,
.dream-loading,
.dream-unavailable {
    border-radius: 14px;
    padding: 16px;
    background: color-mix(in srgb, var(--dream-green) 6%, var(--dream-surface));
    margin-top: 18px;
}

.dream-result-head { margin-bottom: 12px; }

.dream-badge {
    color: var(--dream-green);
    background: color-mix(in srgb, var(--dream-green) 10%, transparent);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .75rem;
    font-weight: 700;
}

.dream-body { line-height: 1.65; }
.dream-body h3, .dream-body h4 { margin: 18px 0 6px; font-size: 1rem; }
.dream-body p { margin: 0 0 12px; }
.dream-body ul { margin: 0 0 12px 1.1rem; }

.dream-loading { color: var(--dream-muted); }
.dream-unavailable p { margin: 6px 0 0; color: var(--dream-muted); font-size: .9rem; }

/* --- Avvisi ---------------------------------------------------------- */

.dream-notice {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-left: 3px solid var(--dream-green);
    background: color-mix(in srgb, var(--dream-green) 7%, transparent);
    border-radius: 4px 12px 12px 4px;
    font-size: .88rem;
    line-height: 1.5;
}

/* Un incubo o un rischio personale non sono un caso limite del taʿbīr:
   sono un cambio di registro, e il colore lo segnala. */
.dream-notice-distress,
.dream-notice-urgent {
    border-left-color: var(--dream-coral);
    background: color-mix(in srgb, var(--dream-coral) 10%, transparent);
}

.dream-notice-decision,
.dream-notice-tender {
    border-left-color: var(--dream-purple);
    background: color-mix(in srgb, var(--dream-purple) 9%, transparent);
}

/* --- Voci del dizionario --------------------------------------------- */

.dream-symbols { margin-top: 22px; }
.dream-symbols h4 { margin: 0 0 4px; font-size: .95rem; }

.dream-symbols-note {
    margin: 0 0 12px;
    font-size: .8rem;
    color: var(--dream-muted);
}

.dream-symbol {
    border: 1px solid var(--dream-line);
    border-radius: var(--dream-radius-control);
    background: var(--dream-surface);
    padding: 10px 12px;
    margin-bottom: 8px;
}

.dream-symbol summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: .92rem;
}

.dream-symbol summary::-webkit-details-marker { display: none; }

.dream-symbol-page {
    font-size: .75rem;
    color: var(--dream-muted);
    white-space: nowrap;
}

.dream-symbol-aliases {
    margin: 8px 0 0;
    font-size: .78rem;
    color: var(--dream-muted);
    font-style: italic;
}

.dream-symbol-text {
    margin: 8px 0 0;
    font-size: .86rem;
    line-height: 1.6;
}

.dream-symbol-ref {
    margin: 8px 0 0;
    font-size: .74rem;
    color: var(--dream-muted);
}

/* --- Fonti e chiusura ------------------------------------------------- */

.dream-sources { margin-top: 20px; padding: 11px 12px; border: 1px solid var(--dream-line); border-radius: var(--dream-radius-control); background: var(--dream-surface); }
.dream-sources summary { cursor: pointer; color: var(--dream-ink); font-size: .82rem; font-weight: 800; }
.dream-sources ul { margin: 0; padding-left: 1.1rem; }
.dream-sources li { font-size: .8rem; color: var(--dream-muted); line-height: 1.6; }

body.dark-theme .dreams-page-header {
    background:
        linear-gradient(90deg, rgba(12,35,29,.98), rgba(12,35,29,.78) 58%, rgba(12,35,29,.30)),
        url('assets/ui/vita-v1/background/vita_sfondo_moschea.png') center right / cover no-repeat,
        var(--sm-surface);
}

@media (max-width: 390px) {
    .dreams-view { padding-inline: 0; }
    .dreams-page-header { min-height: 126px; grid-template-columns: 54px minmax(0,1fr); padding: 14px; gap: 11px; }
    .dreams-page-icon { width: 54px; height: 54px; }
    .dreams-page-header h1 { font-size: 2rem; }
    .dream-composer { padding: 14px; }
    .dream-composer-actions { display: grid; grid-template-columns: 1fr; }
    .dream-submit { width: 100%; min-width: 0; }
}

.dream-disclaimer {
    margin: 18px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--dream-line);
    font-size: .8rem;
    line-height: 1.55;
    color: var(--dream-muted);
}

/* RAG V3.1: privacy consent, local-only history and feedback controls. */
.dream-consent { display:flex; gap:10px; align-items:flex-start; margin:12px 0 16px; font-size:.78rem; line-height:1.45; color:var(--dream-muted); }
.dream-consent input { margin-top:3px; width:17px; height:17px; accent-color:var(--dream-green); }
.dream-engine { float:right; font-size:.65rem; color:var(--dream-muted); }
.dream-feedback { margin-top:20px; padding-top:14px; border-top:1px solid var(--dream-line); display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:.78rem; color:var(--dream-muted); }
.dream-feedback button { border:1px solid var(--dream-line); background:var(--dream-surface); border-radius:999px; padding:8px 11px; color:var(--dream-ink); font:inherit; cursor:pointer; }
.dream-feedback-done { color:var(--dream-green); font-weight:700; }
.dream-source-files { margin-top:18px; padding:12px; border-radius:12px; background:color-mix(in srgb, var(--dream-green) 5%, var(--dream-surface)); font-size:.75rem; color:var(--dream-muted); }
.dream-source-files ul { margin:7px 0 0; padding-left:18px; }
.dream-history { margin-top:18px; border:1px solid var(--dream-line); border-radius:14px; background:var(--dream-surface); padding:12px 14px; }
.dream-history > summary { cursor:pointer; font-weight:750; color:var(--dream-ink); }
.dream-history-item { padding:12px 0; border-bottom:1px solid var(--dream-line); }
.dream-history-item:last-child { border-bottom:0; }
.dream-history-item summary { cursor:pointer; display:grid; gap:3px; }
.dream-history-item summary span { font-size:.68rem; color:var(--dream-muted); }
.dream-history-item summary strong { font-size:.82rem; }
.dream-history-dream { margin:12px 0; padding:10px; border-radius:10px; background:rgba(0,0,0,.025); font-size:.78rem; line-height:1.5; }
.dream-history-answer { font-size:.78rem; line-height:1.55; }
.dream-link { padding:0; border:0; background:none; color:var(--dream-coral); font:inherit; font-size:.72rem; cursor:pointer; text-decoration:underline; }
.dream-muted { color:var(--dream-muted); font-size:.78rem; }