/* bugreport.css — кнопка «Сообщить об ошибке» и окно отчёта.
   __BUGREPORT_V1__ (12.09.2026)
   Отдельным файлом, а не в конце style.css: там за media-блоками правила
   базового слоя уже не работают (грабля merged-базы). */

/* ── Плавающая кнопка: над кнопкой обновления, тот же стеклянный язык ── */
.fab-bug {
    position: fixed;
    bottom: calc(var(--mobile-nav-height) + 20px + var(--safe-area-bottom) + 62px);
    right: 16px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(158deg, rgba(255, 255, 255, .55), rgba(252, 227, 194, .42));
    -webkit-backdrop-filter: blur(18px) saturate(1.7);
    backdrop-filter: blur(18px) saturate(1.7);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 8px 22px rgba(180, 120, 40, .16),
                inset 0 1px 0 rgba(255, 255, 255, .8);
    color: var(--primary-hover, #B96F1A);
    cursor: pointer;
    z-index: 4998;
    transition: transform .24s cubic-bezier(.34, 1.56, .64, 1), box-shadow .24s ease, opacity .2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.fab-bug .fab-ico { width: 19px; height: 19px; display: block; }
.fab-bug:hover  { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(180, 120, 40, .22); }
.fab-bug:active { transform: scale(.94); }

/* Шторка Пульса перекрывает — прячем вместе с кнопкой обновления */
body.pulse-sheet-open .fab-bug { opacity: 0; pointer-events: none; }

/* ── Окно отчёта ────────────────────────────────────────────────────── */
.bug-modal {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: grid;
    place-items: center;
    padding: 16px;
}
.bug-modal[hidden] { display: none !important; }

.bug-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(38, 31, 26, .42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.bug-modal__card {
    position: relative;
    width: min(420px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 18px;
    background: var(--bg-card, #F0EEE9);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 24px 60px rgba(38, 31, 26, .28);
    animation: bugIn .22s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes bugIn {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.bug-modal__title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #261F1A);
}

.bug-modal__text {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    font: inherit;
    font-size: 16px;            /* 16px — иначе Safari на айфоне зумит поле */
    line-height: 1.4;
    color: var(--text-primary, #261F1A);
    background: var(--bg-main, #FAF6F0);
    border: 1px solid var(--border, rgba(38, 31, 26, .14));
    border-radius: 12px;
    resize: vertical;
}
.bug-modal__text:focus {
    outline: none;
    border-color: var(--primary, #fba53e);
    box-shadow: 0 0 0 3px rgba(251, 165, 62, .22);
}
.bug-modal__text:disabled { opacity: .6; }

.bug-modal__hint {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary, #6B5D52);
}

.bug-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

.bug-btn {
    padding: 10px 18px;
    font: inherit;
    font-weight: 600;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease, background .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.bug-btn:active { transform: scale(.97); }
.bug-btn:disabled { opacity: .6; cursor: default; }

.bug-btn--ghost {
    background: transparent;
    border-color: var(--border, rgba(38, 31, 26, .16));
    color: var(--text-secondary, #6B5D52);
}
.bug-btn--ghost:hover { background: var(--bg-hover, #F0EAE0); }

.bug-btn--send {
    background: var(--primary, #fba53e);
    color: #fff;
    box-shadow: 0 6px 16px rgba(251, 165, 62, .32);
}
.bug-btn--send:hover:not(:disabled) { background: var(--primary-hover, #B96F1A); }

.bug-modal__done {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    background: var(--success-bg, #E6F2E2);
    color: var(--text-primary, #261F1A);
}
.bug-modal__done[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .bug-modal__card { animation: none; }
    .fab-bug { transition: opacity .2s ease; }
}

/* ══ Вкладка «Отчёты об ошибках» (Настройки → плитка) ══════════════════
   __BUGREPORT_TAB_V1__ */

.ss-ico-bugs { background: linear-gradient(140deg, #FDE7D3, #F6C79A); color: #B96F1A; }

.br-badge {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 10px;
    background: var(--danger, #dc2626);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}
.br-badge[hidden] { display: none; }

/* сводка телеметрии за сутки */
.br-stats {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--bg-secondary, #F4EDE3);
}
.br-stats:empty { display: none; }
.br-stats-head { font-size: 14px; color: var(--text-primary, #261F1A); }
.br-stats-head b { color: var(--primary-hover, #B96F1A); }

.br-top {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: 12px;
    display: block;
    overflow-x: auto;
}
.br-top th {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary, #6B5D52);
    padding: 4px 8px 4px 0;
}
.br-top td { padding: 3px 8px 3px 0; vertical-align: top; }
.br-top td:first-child { word-break: break-all; }
.br-top .br-k { color: var(--text-secondary, #6B5D52); white-space: nowrap; }
.br-top .br-n { font-weight: 700; text-align: right; }

/* фильтры */
.br-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.br-chip {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border, rgba(38, 31, 26, .14));
    background: var(--bg-card, #F0EEE9);
    color: var(--text-secondary, #6B5D52);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.br-chip b { color: var(--text-primary, #261F1A); }
.br-chip.active {
    background: var(--primary, #fba53e);
    border-color: var(--primary, #fba53e);
    color: #fff;
}
.br-chip.active b { color: #fff; }

/* карточка отчёта */
.br-card {
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: var(--bg-card, #F0EEE9);
    border: 1px solid var(--border, rgba(38, 31, 26, .1));
}
.br-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary, #6B5D52);
}
.br-id { font-weight: 700; color: var(--text-primary, #261F1A); }
.br-who { margin-left: auto; }

.br-status {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--badge-bg, #F4EDE3);
    color: var(--text-secondary, #6B5D52);
}
.br-status--new  { background: #FDE7D3; color: #B96F1A; }
.br-status--hw   { background: #FBE2E2; color: #B42318; }
.br-status--code { background: #E3ECFB; color: #1D4ED8; }
.br-status--done { background: var(--success-bg, #E6F2E2); color: #15803d; }

.br-text {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary, #261F1A);
}

.br-verdict {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    background: var(--success-bg, #E6F2E2);
    color: #14532d;
}
.br-verdict--hw { background: #FBE2E2; color: #7f1d1d; }

.br-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.br-act {
    padding: 6px 12px;
    font: inherit;
    font-size: 13px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(38, 31, 26, .16));
    background: transparent;
    color: var(--text-secondary, #6B5D52);
    cursor: pointer;
}
.br-act:hover { background: var(--bg-hover, #F0EAE0); }

/* раскрытые детали */
.br-detail { margin-top: 12px; }
.br-detail[hidden] { display: none; }
.br-sec { margin-top: 12px; }
.br-sec-h {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary, #6B5D52);
    margin-bottom: 6px;
}
.br-kv { display: grid; gap: 3px; }
.br-kv-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(38, 31, 26, .08);
}
.br-kv-row span { color: var(--text-secondary, #6B5D52); }
.br-kv-row b { text-align: right; word-break: break-word; }

.br-crumbs, .br-list { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.5; }
.br-list { list-style: none; padding-left: 0; }
.br-list li { padding: 5px 0; border-bottom: 1px dashed rgba(38, 31, 26, .08); }
.br-dim { color: var(--text-secondary, #6B5D52); font-size: 12px; word-break: break-all; }

.br-api {
    width: 100%;
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 12px;
}
.br-api td { padding: 4px 8px 4px 0; vertical-align: top; }
.br-api td:first-child { word-break: break-all; }

.br-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary, #6B5D52);
    font-size: 14px;
}
