/* «Чекины без слов» (ТЗ v2 §3.2): панель горизонтальных пилюль-статусов НАД
   композером в основном чате группы. Цвета — через переменные темы (светлая/тёмная). */

.checkins-panel{
    box-sizing:border-box;
    width:100%;
    padding:6px 8px;
    background:var(--panel);
    border-top:1px solid var(--border);
    /* Панель стоит перед .input-area-mobile: у той обычно своя верхняя граница —
       чтобы не было двойной линии, приглушим её визуально отступом. */
}

.checkins-scroll{
    display:flex;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:1px 1px 3px;
}
.checkins-scroll::-webkit-scrollbar{display:none}

.checkin-pill{
    flex:0 0 auto;
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 14px;
    border:1px solid var(--border);
    background:var(--soft);
    color:var(--text);
    border-radius:999px;
    font-size:14px;font-weight:600;
    white-space:nowrap;
    cursor:pointer;
    transition:background .18s, border-color .18s, transform .12s, color .18s;
    -webkit-tap-highlight-color:transparent;
}
.checkin-pill:hover{border-color:var(--accent);color:var(--accent)}
.checkin-pill:active{transform:scale(.95)}

.checkin-ic{font-size:16px;line-height:1}
.checkin-lb{line-height:1}

/* «Важный» статус (шлётся пуш остальным) — лёгкая акцентная рамка-намёк. */
.checkin-pill.is-important{
    border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
}

/* Состояние отправки — гасим повторные тапы. */
.checkin-pill.is-sending{
    opacity:.6;
    pointer-events:none;
}

/* Подтверждение (после успешного POST) — вспышка акцентом + галочка. */
.checkin-pill.is-done{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--text-on-brand, #fff);
    animation:checkinPop .35s ease;
}
.checkin-pill.is-done .checkin-lb::after{
    content:' ✓';
    font-weight:800;
}

@keyframes checkinPop{
    0%{transform:scale(.9)}
    50%{transform:scale(1.06)}
    100%{transform:scale(1)}
}

@media (prefers-reduced-motion: reduce){
    .checkin-pill, .checkin-pill.is-done{ transition:none; animation:none }
}