/* Avatar a bublina eduxo — sdílené Dozorem a žákovskou vstupní stránkou.

   PŘEVZATÉ z eduxo.cz (css/index.css, blok .home-hero), ať na sebe obě
   místa vizuálně navazují. Když se to tam změní, patří změna i sem — je to
   kopie, ne odkaz (viz .prevzato.sh).

   Používá proměnné --blue, --text a --amber ze stylu aplikace, která tenhle
   soubor načítá. */

:root { --avatar-size: 150px; }

.home-hero {
    display: flex; align-items: flex-start; gap: 1.5rem;
    width: 100%; max-width: 980px; margin: 0 auto 1.5rem;
    padding: 1rem 1.5rem 0.25rem; position: relative;
}
.home-avatar-wrap { flex-shrink: 0; margin-top: -1rem; margin-bottom: 15px; }
.home-avatar-wrap canvas { width: var(--avatar-size); height: var(--avatar-size); display: block; }
.home-bubble-wrap {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    margin-top: 0.5rem; margin-bottom: 15px;
}
.home-bubble {
    position: relative; background: #eef2ff; border: 1px solid #c7d2fe;
    border-radius: 0 10px 10px 10px; padding: 0.75rem 1.1rem;
    font-size: 1.05rem; line-height: 1.7; color: var(--text);
}
.home-chat-sender { font-size: 0.72rem; font-weight: 700; color: var(--blue);
                    margin-bottom: 0.2rem; }

/* Barvu mění jen dozor: když něco chce zásah, ať to bublina dá najevo
   dřív, než člověk dočte větu.
   ⚠️ Třídy se VŽDY píšou s předponou `stav-`. Bez ní se název stavu potká
   s jinou třídou v tomhle souboru — `ok` je zelená pilulka „splněno“
   u úkolů a bublinu přebila. Vypsat všech pět, ať žádný nepropadne
   výchozímu vzhledu jen proto, že se na něj zapomnělo. */
.home-bubble.stav-klid,
.home-bubble.stav-ok,
.home-bubble.stav-stavi { /* výchozí levandulová z .home-bubble */ }
.home-bubble.stav-pozor { background: #fff8e9; border-color: #f5d9a8; }
.home-bubble.stav-pozor .home-chat-sender { color: var(--amber); }
.home-bubble.stav-bezi  { background: #e9f6ee; border-color: #b7dfc6; }
.home-bubble.stav-bezi .home-chat-sender { color: #15803d; }

@media (max-width: 900px) {
    .home-hero { flex-direction: column; align-items: center; text-align: center; }
    .home-avatar-wrap { margin-top: 0; margin-bottom: 0; }
    .home-avatar-wrap canvas { width: 90px; height: 90px; }
    .home-bubble-wrap { width: 100%; margin-top: 0; margin-bottom: 0.5rem; }
    .home-bubble { font-size: 0.95rem; border-radius: 10px; }
}