/* Ciemny motyw w duchu programów Mini: te same trzy poziomy tła i ten sam akcent. */
:root {
    color-scheme: dark;

    --tlo: #1b1b1f;
    --tlo-panel: #232329;
    --tlo-pole: #2d2d36;
    --kreska: #35353f;

    --tekst: #e6e6ea;
    --przygaszony: #9a9aa4;

    --akcent: #5b8def;
    --uwaga: #d9a441;
    --zle: #e06c75;
    --dobrze: #4ec9a0;

    --promien: .5rem;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--tlo);
    color: var(--tekst);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

#app { display: flex; flex-direction: column; flex: 1; min-height: 0; }

h1 { font-size: 1.4rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }

p { margin: 0 0 1rem; }

input {
    background: var(--tlo-pole);
    color: var(--tekst);
    border: 1px solid var(--kreska);
    border-radius: var(--promien);
    padding: .5rem .7rem;
    font: inherit;
    width: 100%;
}

input:focus { outline: 2px solid var(--akcent); outline-offset: -1px; }

.btn {
    background: var(--akcent);
    color: #fff;
    border: none;
    border-radius: var(--promien);
    padding: .55rem 1.2rem;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.btn:hover:not(:disabled) { filter: brightness(1.1); }
.btn:disabled { opacity: .45; cursor: default; }

.btn.quiet { background: var(--tlo-pole); color: var(--tekst); border: 1px solid var(--kreska); }

/* ---- pasek ostrzeżenia o utracie danych ---------------------------------- */

.warning {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: color-mix(in srgb, var(--uwaga) 18%, var(--tlo));
    border-bottom: 1px solid color-mix(in srgb, var(--uwaga) 45%, var(--tlo));
    color: color-mix(in srgb, var(--uwaga) 70%, var(--tekst));
    padding: .5rem 1rem;
    font-size: .9rem;
}

.warning span { flex: 1; }

.round {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    font-style: italic;
    line-height: 1;
    cursor: pointer;
}

.round:hover { background: color-mix(in srgb, var(--uwaga) 25%, transparent); }

/* ---- okno z wyjaśnieniem ------------------------------------------------- */

.veil {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 10;
}

.card {
    background: var(--tlo-panel);
    border: 1px solid var(--kreska);
    border-radius: var(--promien);
    padding: 1.5rem;
    max-width: 46rem;
    max-height: 100%;
    overflow-y: auto;
}

.card p { color: var(--przygaszony); }

/* Dwa przyciski obok siebie — tak samo jak na ekranie logowania. */
.card .row { display: flex; gap: .5rem; margin-top: 1.2rem; }

/* ---- logowanie ----------------------------------------------------------- */

.gate {
    margin: auto;
    width: min(24rem, 100%);
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.gate p { color: var(--przygaszony); margin: 0; }

.gate label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--przygaszony); }

.gate label.check { flex-direction: row; align-items: center; gap: .5rem; }
.gate label.check input { width: auto; }

.gate .row { display: flex; gap: .5rem; }
.gate .row .btn { flex: 1; }

.busy { color: var(--przygaszony); font-style: italic; }
.trouble { color: var(--zle); }

/* ---- czat ---------------------------------------------------------------- */

.chat {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 17rem 1fr;
}

aside {
    background: var(--tlo-panel);
    border-right: 1px solid var(--kreska);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

aside header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--kreska);
}

aside header span { font-size: .8rem; }
.live { color: var(--dobrze); }
.dead { color: var(--zle); }

.add { display: flex; gap: .4rem; padding: .8rem 1rem; }

.talks { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }

.talks li {
    padding: .6rem 1rem;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.talks li:hover { background: var(--tlo-pole); }
.talks li.open { background: var(--tlo-pole); border-left-color: var(--akcent); }

.empty { color: var(--przygaszony); padding: 1rem; font-size: .9rem; }

main { display: flex; flex-direction: column; min-height: 0; }

.transcript {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.transcript > div {
    max-width: min(38rem, 75%);
    padding: .45rem .7rem;
    border-radius: var(--promien);
    background: var(--tlo-panel);
    display: flex;
    flex-direction: column;
}

.transcript .mine { align-self: flex-end; background: color-mix(in srgb, var(--akcent) 30%, var(--tlo-panel)); }
.transcript .theirs { align-self: flex-start; }

.who { display: flex; gap: .35rem; align-items: baseline; font-size: .8rem; color: var(--akcent); }
.text { white-space: pre-wrap; overflow-wrap: anywhere; }
.when { font-size: .7rem; color: var(--przygaszony); align-self: flex-end; }

.composer {
    display: flex;
    gap: .5rem;
    padding: .8rem 1rem;
    border-top: 1px solid var(--kreska);
}

main .trouble { padding: 0 1rem 1rem; margin: 0; }

/* ---- na wąskim ekranie --------------------------------------------------- */

@media (max-width: 42rem) {
    .chat { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    aside { border-right: none; border-bottom: 1px solid var(--kreska); max-height: 40vh; }
    .transcript > div { max-width: 90%; }
}

/* ---- pasek błędu Blazora ------------------------------------------------- */

#blazor-error-ui {
    background: var(--zle);
    color: #1b1b1f;
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: .8rem 1.2rem;
    z-index: 20;
}

#blazor-error-ui a { color: inherit; }

/* ---- strona sprawdzenia -------------------------------------------------- */

.checks { list-style: none; padding: 0; margin: 1rem 0 0; max-width: 70ch; }

.checks li {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--kreska);
}

.checks li span { color: var(--przygaszony); text-align: right; }
.checks li.ok strong::before { content: "✓ "; color: var(--dobrze); }
.checks li.failed strong::before { content: "✗ "; color: var(--zle); }
.checks li.failed span { color: var(--zle); }

/* ---- pasek górny i wybór języka ------------------------------------------ */

.top {
    flex: none;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: .6rem 1rem;
    background: var(--tlo-panel);
    border-bottom: 1px solid var(--kreska);
}

.top a { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--tekst); }

.top .mini img { height: 30px; }
.top .mlt img { height: 26px; }

.top .mlt span { font-weight: 600; font-size: .95rem; white-space: nowrap; }
.top .mlt:hover span { color: var(--akcent); }

/* Wybór języka odsunięty na prawą krawędź paska. */
.top .lang { margin-left: auto; }

@media (max-width: 34rem) {
    .top { gap: .75rem; padding: .5rem .6rem; }
    .top .mlt span { display: none; }
}

.lang {
    background: var(--tlo-pole);
    color: var(--przygaszony);
    border: 1px solid var(--kreska);
    border-radius: var(--promien);
    padding: .35rem .5rem;
    font: inherit;
    font-size: .85rem;
}

.lang:focus { outline: 2px solid var(--akcent); outline-offset: -1px; }

/* ---- pamiętanie przeglądarki --------------------------------------------- */

/* Ten sam pasek co ostrzeżenie, ale w spokojnym kolorze: to nie jest przestroga,
   tylko stwierdzenie stanu, z którym da się coś zrobić. */
.warning.remembered {
    background: color-mix(in srgb, var(--dobrze) 12%, var(--tlo));
    border-bottom-color: color-mix(in srgb, var(--dobrze) 35%, var(--tlo));
    color: color-mix(in srgb, var(--dobrze) 60%, var(--tekst));
}

.btn.small { padding: .3rem .8rem; font-size: .85rem; }

.hint {
    margin: -.35rem 0 0;
    font-size: .85rem;
    color: var(--przygaszony);
}

/* ---- nazwa wyświetlana i identyfikator ----------------------------------- */

/* Identyfikator zawsze obok nazwy, przygaszony. Jego obecność jest tu treścią: nazwę wybiera
   jej właściciel, więc dopiero to, co stoi obok, mówi, z kim naprawdę się rozmawia. */
.uchwyt {
    color: var(--przygaszony);
    font-size: .85em;
    font-weight: normal;
    white-space: nowrap;
}

.talks li { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.talks .imie { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.who .uchwyt { font-size: .95em; }

.ja {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ja .imie { font-weight: 600; }
.ja:hover .imie { color: var(--akcent); }

/* Na wąskim ekranie identyfikator schodzi pod nazwę, ale nie znika — to jego obecność liczy się
   najbardziej wtedy, gdy miejsca jest najmniej. */
@media (max-width: 30rem) {
    .talks li { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* Nagłówek otwartej rozmowy — kto jest po drugiej stronie, bez zaglądania na listę obok. */
main > .rozmowa {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--kreska);
    font-weight: 600;
    flex: none;
}

/* Nazwa rozmówcy jako przycisk: pod nią kryje się nadanie własnej nazwy. */
.jako {
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.jako:hover { color: var(--akcent); }

.nazwa-kontaktu { margin: .5rem .9rem 0; }

/* Zdjęcie kontaktu w nagłówku rozmowy: obecne, ale nie zapraszające do kliknięcia. */
.zdejmij {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--kreska);
    color: var(--przygaszony);
    font-size: .85rem;
    padding: .15rem .5rem;
}

.zdejmij:hover { color: #e06c6c; border-color: #e06c6c; }