/* Intecom - Poczta (od 0.9.1). Klasy .gm z Hegios (app.html, poczta w stylu Gmaila) na tokenach --h-* z crm.css, tylko
   to, czego używa odczyt: foldery, szukanie, lista rozmów, rozmowa, załączniki, przesunięcie palcem, Konta pocztowe.
   Bez pisania, narzędzi, etykiet i współdzielenia. Od 900 px foldery po lewej, węziej szuflada spod przycisku menu.
   Wiersz w jednej linii od 1100 px z myszą, inaczej w trzech liniach z inicjałami (telefon, iPad). Strona nigdy nie
   przewija się w bok: długie tematy i adresy są ucięte albo łamane, szeroki newsletter jest pomniejszony w ramce. */

.gm { --gm-read: #F6F7F9; display: flex; align-items: flex-start; min-width: 0; background: var(--h-surface); border: 1px solid var(--h-border); color: var(--h-text); }
.gm-off { max-width: 560px; margin: var(--h-sp-6) auto; padding: var(--h-sp-5); background: var(--h-surface); border: 1px solid var(--h-border); font-size: var(--h-fs-15); line-height: var(--h-lh-loose); color: var(--h-text); }
.gm-ik { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gm-ico {
    position: relative; width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; background: none; border: none; color: var(--h-text-muted); cursor: pointer;
}
.gm-ico:hover { background: var(--h-info-bg); color: var(--h-text); }
.gm-ico:focus-visible { outline: 2px solid var(--h-accent); outline-offset: -2px; }
.gm-ico.on { color: var(--h-accent); }
.gm-ico svg.gm-star-on, .gm-star.on svg { fill: currentColor; }

/* -- foldery -- */
.gm-nav { flex: 0 0 220px; width: 220px; align-self: stretch; background: var(--h-bg); border-right: 1px solid var(--h-border); }
.gm-nav-in { position: sticky; top: 0; padding: 10px 6px 18px; }
.gm-f {
    position: relative; display: flex; align-items: center; gap: 14px; width: 100%; height: 38px; padding: 0 12px 0 14px; border: none;
    border-left: 3px solid transparent; background: none; font-size: var(--h-fs-14); color: var(--h-text); text-decoration: none; cursor: pointer;
    white-space: nowrap; text-align: left;
}
.gm-f:hover { background: var(--h-info-bg); }
.gm-f:focus-visible { outline: 2px solid var(--h-accent); outline-offset: -2px; }
.gm-f.active { background: var(--h-accent-bg); border-left-color: var(--h-accent); font-weight: var(--h-fw-sem); }
.gm-f .gm-ik { color: var(--h-text-muted); }
.gm-f.active .gm-ik { color: var(--h-accent); }
.gm-f-l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gm-f-k { margin-left: auto; font-size: var(--h-fs-12); font-weight: var(--h-fw-sem); font-family: var(--h-font-mono); }
.gm-f.is-sync .gm-ik { animation: gm-obrot 1s linear infinite; }
@keyframes gm-obrot { to { transform: rotate(360deg); } }
.gm-nav-sep { height: 1px; margin: 10px 8px; background: var(--h-border); }
.gm-scrim { display: none; }

/* -- góra: menu (wąsko) i szukanie -- */
.gm-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gm-top { display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 8px 12px; border-bottom: 1px solid var(--h-border); }
.gm-menu { display: none; }
.gm-search {
    flex: 1 1 auto; min-width: 0; max-width: 720px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px;
    background: var(--h-bg); border: 1px solid transparent; cursor: text; color: var(--h-text-muted);
}
.gm-search:focus-within { background: var(--h-surface); border-color: var(--h-border-strong); box-shadow: var(--h-shadow-md); }
.gm-search input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: none; background: transparent; outline: none; font-size: var(--h-fs-15); color: var(--h-text); -webkit-appearance: none; appearance: none; }
/* cienka linia postępu pobierania 12 miesięcy */
.gm-prog { position: relative; padding: 6px 14px 8px; font-size: var(--h-fs-12); color: var(--h-text-muted); border-bottom: 1px solid var(--h-border); }
.gm-prog i { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--h-accent); width: 0; transition: width .4s; }
.gm-info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; border-bottom: 1px solid var(--h-border); background: var(--h-warning-bg); font-size: var(--h-fs-13); color: var(--h-text); }
.gm-info span { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }

/* -- lista rozmów -- */
.gm-bar { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-bottom: 1px solid var(--h-border); }
.gm-fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--h-fs-14); font-weight: var(--h-fw-sem); }
.gm-list-body { position: relative; overflow: hidden; }
.gm-empty { padding: 48px 24px; text-align: center; font-size: var(--h-fs-14); line-height: var(--h-lh-loose); color: var(--h-text-muted); }
.gm-empty .h-btn { margin-top: var(--h-sp-3); }
.gm-more { display: block; width: 100%; min-height: 44px; padding: 10px; background: none; border: none; border-top: 1px solid var(--h-border); color: var(--h-accent); font-size: var(--h-fs-13); font-weight: var(--h-fw-med); cursor: pointer; }
.gm-more:hover { background: var(--h-bg); }
/* wiersz w jednej linii (szeroko, mysz) */
.gm-row {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 10px;
    border-bottom: 1px solid var(--h-border); background: var(--gm-read); font-size: var(--h-fs-14); color: var(--h-text); cursor: pointer;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.gm-row.unread { background: var(--h-surface); }
.gm-row.unread .gm-from, .gm-row.unread .gm-subj, .gm-row.unread .gm-date { font-weight: 700; color: var(--h-text); }
.gm-row:focus-visible { outline: 2px solid var(--h-accent); outline-offset: -2px; }
.gm-av {
    display: none; position: relative; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center;
    color: #fff; font-size: var(--h-fs-15); font-weight: var(--h-fw-sem);
}
.gm-star {
    width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
    background: none; border: none; color: var(--h-border-strong); cursor: pointer;
}
.gm-star:hover { color: var(--h-text); }
.gm-star.on { color: var(--h-accent); }
.gm-from { flex: 0 0 190px; width: 190px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-mid { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-snip { color: var(--h-text-muted); }
.gm-snip::before { content: ' - '; }
.gm-cnt { font-size: var(--h-fs-12); font-weight: 400; color: var(--h-text-muted); }
.gm-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; color: var(--h-text-muted); }
.gm-tag { padding: 0 6px; border: 1px solid var(--h-border-strong); font-size: var(--h-fs-11); line-height: 18px; color: var(--h-graphite); white-space: nowrap; }
.gm-date { min-width: 48px; text-align: right; font-size: var(--h-fs-13); color: var(--h-text-muted); white-space: nowrap; }
.gm-hov { display: none; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); align-items: center; padding-left: 8px; background: inherit; }
@media (hover: hover) {
    .gm-row:hover { z-index: 2; box-shadow: inset 1px 0 0 var(--h-border), inset -1px 0 0 var(--h-border), 0 1px 3px rgba(35,39,46,.18); }
    .gm-row:hover .gm-hov, .gm-row:focus-within .gm-hov { display: flex; }
    .gm-row:hover .gm-meta, .gm-row:focus-within .gm-meta { visibility: hidden; }
}
/* wiersz w trzech liniach z inicjałami: telefon, iPad, wąskie okno */
@media (max-width: 1099px), (hover: none) {
    .gm-row {
        display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "av from meta" "av mid star";
        column-gap: 12px; row-gap: 1px; align-items: center; padding: 8px 12px; line-height: 1.3; touch-action: pan-y;
    }                                               /* trzy linie po 1.3: na ekranie 360x640 widać 5 rozmów */
    .gm-av { display: flex; grid-area: av; align-self: start; margin-top: 2px; }
    .gm-from { grid-area: from; width: auto; font-size: var(--h-fs-15); }
    .gm-meta { grid-area: meta; gap: 6px; }
    .gm-mid { grid-area: mid; display: flex; flex-direction: column; white-space: normal; }
    .gm-subj, .gm-snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gm-snip::before { content: none; }
    .gm-star { grid-area: star; align-self: end; }
    .gm-date { min-width: 0; font-size: var(--h-fs-12); }
    .gm-hov { top: 4px; transform: none; }          /* w miejscu daty, gwiazdka pod spodem zostaje */
}
/* przesunięcie palcem: pod wierszem pasek z akcją, szary do progu, niebieski po jego przekroczeniu */
.gm-sw-bg {
    position: absolute; left: 0; right: 0; z-index: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 22px;
    background: var(--h-border-strong); color: #fff; font-size: var(--h-fs-14); font-weight: var(--h-fw-sem); pointer-events: none;
}
.gm-sw-bg.gotowe { background: var(--h-accent); }
.gm-sw-bg span { display: inline-flex; align-items: center; gap: 8px; }
.gm-row.gm-swipe { z-index: 3; box-shadow: 0 1px 4px rgba(35,39,46,.22); }

/* -- rozmowa (zamiast listy) -- */
.gm-rbar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 2px; min-height: 48px; padding: 4px 8px; background: var(--h-surface); border-bottom: 1px solid var(--h-border); }
.gm-r { padding: 16px 22px 32px; min-width: 0; }
.gm-rsubj h2 { margin: 2px 0 10px; font-size: var(--h-fs-22); font-weight: 400; line-height: 1.3; color: var(--h-text); overflow-wrap: anywhere; }
.gm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.gm-chips:empty { display: none; }
.gm-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; background: var(--h-info-bg); font-size: var(--h-fs-12); color: var(--h-text); white-space: nowrap; }
/* chip projektu i zadania z rozmowy: przycisk do Zadań */
.gm-chip-b { gap: 6px; height: auto; min-height: 32px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--h-border); cursor: pointer; font-family: inherit; }
.gm-chip-b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gm-chip-b:hover { border-color: var(--h-border-strong); }
.gm-chip-b:focus-visible { outline: 2px solid var(--h-accent); outline-offset: -2px; }
.gm-chip-b .gm-ik { color: var(--h-accent); }
.gm-chip-b.is-done span { text-decoration: line-through; color: var(--h-text-muted); }
.gm-msg { border-bottom: 1px solid var(--h-border); min-width: 0; }
.gm-msg:last-child { border-bottom: none; }
.gm-msg .gm-av { display: flex; }
.gm-mh { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0 10px; min-width: 0; }
.gm-mh-main { flex: 1 1 auto; min-width: 0; }
.gm-mh-top { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px; min-width: 0; }
.gm-mh-name { font-size: var(--h-fs-14); font-weight: var(--h-fw-sem); overflow-wrap: anywhere; }
.gm-mh-addr { font-size: var(--h-fs-12); color: var(--h-text-muted); overflow-wrap: anywhere; min-width: 0; }
.gm-mh-to {
    display: inline-flex; align-items: center; gap: 2px; max-width: 100%; margin-top: 2px; padding: 2px 0; background: none; border: none;
    font-size: var(--h-fs-12); color: var(--h-text-muted); cursor: pointer; text-align: left;
}
.gm-mh-to span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-mh-det { display: none; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--h-border); font-size: var(--h-fs-12); line-height: 1.7; color: var(--h-text-muted); overflow-wrap: anywhere; }
.gm-mh-det b { display: inline-block; min-width: 46px; font-weight: var(--h-fw-med); color: var(--h-text); }
.gm-msg.det .gm-mh-det { display: block; }
.gm-mh-right { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.gm-mh-date { margin-right: 4px; font-size: var(--h-fs-12); color: var(--h-text-muted); white-space: nowrap; }
.gm-mh-snip { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--h-fs-13); color: var(--h-text-muted); }
.gm-msg.col { cursor: pointer; }
.gm-msg.col:hover { background: var(--gm-read); }
.gm-msg.col .gm-mh { padding: 10px 0; }
.gm-msg.col.unread .gm-mh-name { font-weight: 700; }
.gm-body { padding: 0 0 12px 54px; overflow-x: auto; min-width: 0; }
.gm-body iframe { display: block; width: 100%; height: 60px; border: none; background: var(--h-surface); }
.gm-txt { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/1.45 var(--h-font-ui); color: var(--h-text); }
.gm-duza { padding: 12px 14px; background: var(--h-info-bg); font-size: var(--h-fs-14); color: var(--h-text); }
.gm-obrazy { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 10px 54px; padding: 8px 12px; background: var(--h-info-bg); font-size: var(--h-fs-13); color: var(--h-text); }
.gm-obrazy .h-btn { padding: 4px 10px; }
.gm-att { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 14px 54px; }
.gm-attc {
    display: flex; align-items: center; gap: 10px; width: 230px; max-width: 100%; min-height: 52px; padding: 6px 12px; border: 1px solid var(--h-border);
    background: var(--h-surface); font-size: var(--h-fs-13); color: var(--h-text); cursor: pointer; text-align: left;
}
.gm-attc:hover { border-color: var(--h-border-strong); background: var(--gm-read); }
.gm-attc:disabled { cursor: progress; opacity: .6; }
.gm-attc .gm-ik { color: var(--h-accent); }
.gm-attc-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-attc-s { display: block; font-size: var(--h-fs-11); color: var(--h-text-muted); }

/* -- Konta pocztowe -- */
.gm-konta { padding: 18px 22px 32px; }
.gm-k-h { font-size: var(--h-fs-20); font-weight: var(--h-fw-sem); margin-bottom: var(--h-sp-3); }
.gm-k-konto { display: flex; align-items: center; gap: var(--h-sp-3); flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--h-border); }
.gm-k-konto > div { flex: 1 1 240px; min-width: 0; }
.gm-k-konto b { display: block; overflow-wrap: anywhere; }
.gm-k-stan { display: block; font-size: var(--h-fs-13); color: var(--h-text-muted); overflow-wrap: anywhere; }
.gm-k-stan.is-err { color: var(--h-error); }
.gm-k-dodaj { margin-top: var(--h-sp-3); }
.gm-k-form { max-width: 560px; margin-top: var(--h-sp-4); padding-top: var(--h-sp-3); border-top: 1px solid var(--h-border); }
.gm-k-form h3 { font-size: var(--h-fs-16); font-weight: var(--h-fw-sem); margin-bottom: var(--h-sp-2); overflow-wrap: anywhere; }
.gm-k-form .h-field { margin-top: var(--h-sp-3); }
.gm-k-hint { font-size: var(--h-fs-13); color: var(--h-text-muted); }
.gm-k-serw { margin-top: var(--h-sp-4); padding: 0; border: none; min-width: 0; }
.gm-k-serw legend { font-size: var(--h-fs-13); font-weight: var(--h-fw-sem); margin-bottom: 2px; }
.gm-k-row { display: flex; gap: var(--h-sp-2); flex-wrap: wrap; }
.gm-k-row .h-field { margin-top: var(--h-sp-2); }
.gm-k-host { flex: 1 1 200px; }
.gm-k-port { flex: 0 0 96px; }
.gm-k-szyfr { flex: 0 1 150px; }
.gm-k-akcje { display: flex; flex-wrap: wrap; gap: var(--h-sp-2); margin-top: var(--h-sp-4); }
.gm-k-wynik { margin-top: var(--h-sp-3); font-size: var(--h-fs-14); min-height: 22px; overflow-wrap: anywhere; }
.gm-k-wynik.is-ok { color: var(--h-success); }
.gm-k-wynik.is-err { color: var(--h-error); }

/* -- dotyk: wiersz od 56 px, przyciski ikon od 44 px -- */
@media (hover: none) and (pointer: coarse) {
    .gm-row { min-height: 56px; }
    .gm-ico { width: 44px; height: 44px; flex-basis: 44px; }
    .gm-star { width: 44px; height: 44px; flex-basis: 44px; margin: -8px -10px -8px 0; }
    .gm-f { height: 48px; }
    .gm-search input { font-size: 16px; }
    .gm-attc { min-height: 56px; }
    .gm-mh-to { min-height: 32px; }
    .gm-chip-b { min-height: 44px; }
}

/* -- poniżej 900 px: foldery w szufladzie -- */
@media (max-width: 899px) {
    /* Poczta od krawędzi do krawędzi ekranu: treść maila (newsletter 700 px) ma całą szerokość telefonu */
    #view-mail { margin: 0 calc(-1 * max(16px, env(safe-area-inset-right))) 0 calc(-1 * max(16px, env(safe-area-inset-left))); }
    .gm { border: none; background: transparent; }
    .gm-main { background: var(--h-surface); border-top: 1px solid var(--h-border); border-bottom: 1px solid var(--h-border); }
    .gm-off { margin: var(--h-sp-4) 16px; }
    .gm-menu { display: inline-flex; }
    .gm.gm-reading .gm-top { display: none; }      /* w rozmowie pasek ze strzałką, bez szukania */
    .gm-nav {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 960; width: min(300px, 86vw); background: var(--h-surface);
        transform: translateX(-101%); transition: transform .2s ease; overflow-y: auto; overscroll-behavior: contain;
        padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
    }
    .gm.gm-navopen .gm-nav { transform: none; box-shadow: 0 8px 24px rgba(35,39,46,.28); }
    .gm.gm-navopen .gm-scrim { display: block; position: fixed; inset: 0; z-index: 950; background: rgba(35,39,46,.45); }
    .gm-f { height: 46px; }
    .gm-top { padding: 6px 8px; }
    .gm-r, .gm-konta { padding: 12px 12px 28px; }
    .gm-body.gm-body-html { margin: 0 -12px; }
    .gm-rsubj h2 { font-size: var(--h-fs-20); }
    .gm-body, .gm-att { padding-left: 0; }
    .gm-obrazy { margin-left: 0; }
    .gm-attc { width: 100%; }
    .gm-mh { gap: 10px; }
}