/* ============================================================
   SMS Spam Clusters - Stylesheet
   Same palette as the Vibe Calculator and SMS Spam Classifier so
   the four Spaces feel like a coherent series.

   Palette:
     page bg     #e5dfd3
     content bg  #f6f1e8
     panels      #fcfaf6
     primary     #1f1f1f
     secondary   #5f584f
     labels      #7a736a
     borders     #d8d1c7
     accent      #c96f4d
     spam        #a8553a
     ham         #4f6b3e
   ============================================================ */

:root,
:root[data-theme="dark"],
.dark,
[data-theme="dark"],
[class*="dark"] {
    --body-background-fill: #e5dfd3 !important;
    --background-fill-primary: #e5dfd3 !important;
    --background-fill-secondary: #fcfaf6 !important;
    --neutral-950: #1f1f1f !important;
    --neutral-900: #1f1f1f !important;
    --neutral-800: #5f584f !important;
    --neutral-700: #5f584f !important;
    --block-label-text-color: #7a736a !important;
    --body-text-color: #1f1f1f !important;
    --input-background-fill: #fcfaf6 !important;
    color-scheme: light !important;
}

html, body {
    background: #e5dfd3 !important;
    background-color: #e5dfd3 !important;
}

gradio-app {
    background: #e5dfd3 !important;
    background-color: #e5dfd3 !important;
}

.gradio-container {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2.5rem 3rem !important;
    font-family: Georgia, Charter, serif !important;
    background: #f6f1e8 !important;
    background-color: #f6f1e8 !important;
    border-left: 1px solid #d8d1c7 !important;
    border-right: 1px solid #d8d1c7 !important;
    min-height: 100vh !important;
}

.gradio-container *,
.gradio-container .main,
.gradio-container .app,
.gradio-container .wrap,
.gradio-container .contain,
.gradio-container [class*="svelte"],
.gr-panel, .gr-box, .gr-form, .gr-block, .gr-padded,
.gr-group, .block, .form, .panel,
[class*="block"], [class*="panel"], [class*="wrapper"],
[class*="group"], [class*="form"] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.row, [class*="row"], .gap, [class*="gap"] {
    background: transparent !important;
    box-shadow: none !important;
}

.gradio-container input,
.gradio-container input[type="text"],
.gradio-container textarea {
    border: 1px solid #d8d1c7 !important;
    background: #fcfaf6 !important;
    background-color: #fcfaf6 !important;
}

footer { display: none !important; }

/* ============================================================
   Hero entrance - subtle one-time animations on page load.
   Light easing, short durations, no bounce. The aim is "this
   appeared with intent" not "look at me".
   ============================================================ */

@keyframes title-rise {
    0%   { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes soft-fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes plot-reveal {
    0%   { opacity: 0; transform: scale(0.985); }
    100% { opacity: 1; transform: scale(1); }
}

/* ----- Title ----- */
#title-text {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: #1f1f1f !important;
    font-family: Georgia, Charter, serif !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    animation: title-rise 0.7s ease-out both !important;
}

/* ----- Subtitle ----- */
#subtitle-text {
    font-style: italic !important;
    color: #5f584f !important;
    font-size: 1rem !important;
    text-align: center !important;
    line-height: 1.65 !important;
    margin-top: 0.3rem !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: soft-fade 0.9s 0.2s ease-out both !important;
}

/* ----- Divider ----- */
#divider {
    border: none !important;
    border-top: 1px solid #d8d1c7 !important;
    margin: 1.5rem 0 !important;
    background: transparent !important;
}

/* ----- Labels ----- */
label,
label span,
.label-wrap,
.label-wrap span,
.gr-input-label,
[data-testid="label"],
[data-testid="block-info"],
[data-testid="block-title"],
span[data-testid="block-info"],
.svelte-jdcl7l,
.block-info {
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #5f584f !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* ----- Message input ----- */
#message-input textarea,
#message-input input {
    background: #fcfaf6 !important;
    border: 1px solid #d8d1c7 !important;
    border-radius: 3px !important;
    font-family: "JetBrains Mono", Menlo, Consolas, monospace !important;
    font-size: 1rem !important;
    color: #1f1f1f !important;
    padding: 0.6rem 0.8rem !important;
    box-shadow: none !important;
}

/* ----- Buttons ----- */
.gradio-container button.primary,
.gradio-container button[variant="primary"],
.gradio-container .gr-button.primary,
.gradio-container .gr-button-primary {
    background: #c96f4d !important;
    color: #ffffff !important;
    border: 1px solid #c96f4d !important;
    border-radius: 3px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    padding: 0.6rem 1.8rem !important;
    box-shadow: none !important;
}

.gradio-container button.primary:hover,
.gradio-container button[variant="primary"]:hover {
    background: #a8553a !important;
}

.gradio-container button.secondary,
.gradio-container button[variant="secondary"],
.gradio-container .gr-button.secondary {
    background: transparent !important;
    color: #5f584f !important;
    border: 1px solid #d8d1c7 !important;
    border-radius: 3px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.03em !important;
    padding: 0.55rem 1.4rem !important;
    box-shadow: none !important;
}

.gradio-container button.secondary:hover {
    background: #ede6d9 !important;
}

/* ----- Verdict panel (cluster assignment) ----- */
#verdict-panel {
    margin-top: 1rem !important;
}

.assigned, .assigned-empty {
    border: 1.5px solid #d8d1c7 !important;
    border-radius: 4px !important;
    background: #fcfaf6 !important;
    padding: 1.4rem 1.6rem !important;
    text-align: center !important;
}

.assigned-empty {
    color: #7a736a !important;
    font-style: italic !important;
    font-size: 0.95rem !important;
}

.assigned-label {
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #7a736a !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.assigned-name {
    font-family: "JetBrains Mono", Menlo, Consolas, monospace !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #c96f4d !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: 0.02em !important;
}

.assigned-theme {
    font-style: italic !important;
    color: #5f584f !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

.assigned-meta {
    font-size: 0.75rem !important;
    color: #7a736a !important;
    margin-top: 0.9rem !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

.meta-pill {
    background: #ede6d9 !important;
    color: #5f584f !important;
    border-radius: 999px !important;
    padding: 0.25rem 0.7rem !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
}

.meta-pill-quiet {
    background: transparent !important;
    border: 1px solid #d8d1c7 !important;
    color: #7a736a !important;
    font-weight: 500 !important;
}

/* ----- View / filter chips ----- */
#view-choice, #label-filter {
    margin-top: 0.8rem !important;
}

#view-choice .wrap, #label-filter .wrap {
    flex-direction: row !important;
    gap: 0.6rem !important;
}

/* ----- Dataset stats - typographic header, NOT a card -----
   These read as permanent context about the dataset, distinct from the
   verdict panel which shows the result of the user's action. Flat, no
   border, small typography. */
.dataset-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 0.55rem 0.8rem !important;
    padding: 0.6rem 0 !important;
    margin: 0.3rem 0 0.6rem 0 !important;
    border-top: 1px solid #d8d1c7 !important;
    border-bottom: 1px solid #d8d1c7 !important;
    background: transparent !important;
    font-family: Georgia, Charter, serif !important;
}

.ds-item {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 0.35rem !important;
}

.ds-num {
    font-family: "JetBrains Mono", Menlo, Consolas, monospace !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1f1f1f !important;
    letter-spacing: 0.01em !important;
}

.ds-lbl {
    font-size: 0.8rem !important;
    color: #7a736a !important;
    font-style: italic !important;
}

.ds-sep {
    color: #c0b8a8 !important;
    font-size: 0.95rem !important;
    user-select: none !important;
}

/* ----- Plot container ----- */
#cluster-plot {
    background: #fcfaf6 !important;
    border: 1.5px solid #d8d1c7 !important;
    border-radius: 4px !important;
    padding: 0.8rem !important;
    margin-top: 0.4rem !important;
    animation: plot-reveal 1.2s ease-out both !important;
}

/* (Plotly modebar styling lives inside the iframe document itself —
   see fig_to_html in app.py. CSS here can't reach into iframe content.) */


/* ----- Section labels ----- */
.section-label {
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #5f584f !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 600 !important;
    margin: 1.5rem 0 0.4rem 0 !important;
}

/* ----- Numbered step labels ----- */
.step-label {
    font-family: Georgia, Charter, serif !important;
    font-size: 1rem !important;
    color: #1f1f1f !important;
    font-weight: 700 !important;
    margin: 1.8rem 0 0.6rem 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
}

.step-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #c96f4d !important;
    color: #fcfaf6 !important;
    width: 1.6rem !important;
    height: 1.6rem !important;
    border-radius: 50% !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

.plot-hint {
    font-style: italic !important;
    color: #7a736a !important;
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    margin: 0 0 0.8rem 0 !important;
    max-width: 720px !important;
}

.plot-hint b {
    color: #5f584f !important;
    font-style: normal !important;
    font-weight: 600 !important;
}

/* "More below" indicator between the plot and the neighbours panel. */
.scroll-hint {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.3rem !important;
    margin: 1.2rem 0 0.4rem 0 !important;
    padding: 0.6rem 0 !important;
}

.scroll-hint-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #c96f4d !important;
    font-weight: 700 !important;
}

.chevron {
    animation: chevron-bounce 1.6s ease-in-out infinite;
}

@keyframes chevron-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50% { transform: translateY(5px); opacity: 1; }
}

/* ----- Nearest neighbours list ----- */
.nn-empty {
    color: #7a736a !important;
    font-style: italic !important;
    font-size: 0.9rem !important;
    padding: 1rem 0 !important;
    text-align: center !important;
}

.nn-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.nn-row {
    border: 1px solid #d8d1c7 !important;
    border-radius: 3px !important;
    background: #fcfaf6 !important;
    padding: 0.7rem 1rem !important;
}

.nn-meta {
    display: flex !important;
    gap: 0.8rem !important;
    align-items: center !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    margin-bottom: 0.4rem !important;
}

.nn-label {
    font-weight: 700 !important;
}

.nn-cluster {
    color: #5f584f !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-style: italic !important;
    font-family: Georgia, serif !important;
    flex: 1 !important;
}

.nn-sim {
    color: #7a736a !important;
    font-family: "JetBrains Mono", monospace !important;
}

.nn-text {
    font-family: "JetBrains Mono", Menlo, Consolas, monospace !important;
    font-size: 0.85rem !important;
    color: #1f1f1f !important;
    line-height: 1.5 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

/* ----- Method note ----- */
#method-note {
    text-align: center !important;
    font-size: 0.78rem !important;
    color: #7a736a !important;
    margin-top: 2rem !important;
    line-height: 1.65 !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#method-note a {
    color: #5f584f !important;
    text-decoration: underline !important;
}

.gr-block, .gr-padded {
    padding: 0 !important;
}

/* ----- Mobile ----- */
/* ============================================================
   Mobile - below 640px viewport. Keep the visual identity but
   collapse to a single-column flow, shrink large headings, stack
   action buttons, tighten the stats line.
   ============================================================ */
@media (max-width: 640px) {
    .gradio-container {
        padding: 1.5rem 1rem !important;
        border-left: none !important;
        border-right: none !important;
        max-width: 100% !important;
    }
    #title-text { font-size: 1.65rem !important; }
    #subtitle-text { font-size: 0.95rem !important; padding: 0 0.3rem !important; }

    /* Stack action buttons vertically, full-width */
    #action-row { flex-direction: column !important; gap: 0.5rem !important; }
    #action-row button { width: 100% !important; }

    /* Tighten step labels */
    .step-label { font-size: 0.9rem !important; margin: 1.2rem 0 0.4rem 0 !important; }
    .step-num { width: 1.4rem !important; height: 1.4rem !important; font-size: 0.72rem !important; }

    /* Stats: smaller numbers, wrap with smaller gaps */
    .dataset-stats { gap: 0.4rem 0.6rem !important; padding: 0.5rem 0 !important; }
    .ds-num { font-size: 0.85rem !important; }
    .ds-lbl { font-size: 0.72rem !important; }

    /* Verdict panel: tighter */
    .assigned { padding: 1.1rem 1rem !important; }
    .assigned-name { font-size: 1.15rem !important; }
    .assigned-theme { font-size: 0.85rem !important; }

    /* Plot: shorter, less padding so legend has room */
    #cluster-plot { padding: 0.4rem !important; }

    /* Bulk-control buttons stay small; stack if needed */
    #legend-controls { flex-wrap: wrap !important; justify-content: center !important; }

    /* Neighbours: tighter rows */
    .nn-row { padding: 0.55rem 0.7rem !important; }
    .nn-text { font-size: 0.8rem !important; }
    .nn-meta { gap: 0.5rem !important; }

    /* Method note: smaller margins */
    #method-note { margin-top: 1.4rem !important; font-size: 0.74rem !important; }
}