/* ============================================================
   temp.cl4.ru — flat brand overlay (loaded AFTER app.css)
   Дизайн: без «окон»/карточек, разделители — тонкие линии.
   Хранится отдельно, чтобы app.css можно было синкать из mail.
   ============================================================ */

/* ---- логотип: кликабелен (на главную) + синий конверт ---- */
.logo{cursor:pointer;text-decoration:none;color:var(--ink)}
.logo:hover{opacity:.82}
/* лого = inline SVG (конверт+@), прозрачный фон, цвет = currentColor → контраст под тему */
.logo-mail{display:block;flex:none;height:24px;width:auto;color:var(--brand-ink)}

/* ---- основные панели: без карточек, разделены одной волосяной линией ---- */
.list-pane,.view-pane{background:transparent;border:0;border-radius:0;box-shadow:none;min-height:52vh}
.layout{gap:26px;grid-template-columns:340px minmax(0,1fr);padding-top:10px}
.view-pane{border-left:1px solid var(--border);min-width:0}
.list-pane .pane-head,.msg-item{padding-left:16px}
.view-pane .pane-head{padding-left:20px}
/* планшет/узкий десктоп: уже колонка списка */
@media (max-width:1100px){.layout{grid-template-columns:300px minmax(0,1fr);gap:20px}}
/* мобильные: одна колонка, делитель — сверху (иначе мой .layout ломает адаптив app.css) */
@media (max-width:900px){
  .layout{grid-template-columns:1fr;gap:0;padding-top:4px}
  .view-pane{border-left:0;border-top:1px solid var(--border);margin-top:6px;padding-top:6px}
  .view-pane .pane-head{padding-left:16px}
}

/* ---- строки писем: разделители-линии уже есть; плоский hover (лев. акцент) ---- */
.msg-item{padding-right:12px}
.msg-item:hover,.msg-item.active{background:transparent;box-shadow:inset 2px 0 0 var(--brand)}

/* ---- вкладки Текст/HTML → подчёркивание вместо «пилюли»-коробки ---- */
.tabs{background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:0;gap:8px;width:100%}
.tab{border-radius:0;padding:7px 4px;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.active{background:transparent;color:var(--brand-ink);border-bottom:2px solid var(--brand)}

/* ---- код/ссылка активации: выноска тонкой линией слева, не коробка ---- */
.detected{background:transparent;border:0;border-left:2px solid var(--brand);border-radius:0;padding:2px 0 2px 12px}

/* ---- плавающие элементы (нужны как есть, но мягче/тоньше) ---- */
.popup{box-shadow:0 10px 30px rgba(0,0,0,.16)}
.modal{backdrop-filter:blur(3px)}
.modal-box{box-shadow:0 12px 34px rgba(0,0,0,.18);border-radius:12px}
.popup-val .mono{background:transparent}
.toast{box-shadow:0 10px 30px rgba(0,0,0,.18)}

/* ---- адрес: не «панель» — прозрачный, без рамки/заливки, просто моно-текст ---- */
.address{background:transparent;border:0;padding:6px 2px;border-radius:0}
.address:hover{background:transparent;text-decoration:underline}

/* ---- вложения: лёгкие чипы без заливки ---- */
.attachments a{background:transparent}

/* ---- фон тёмной темы (не трогаем светлую: без :not() этот :root идёт
   в каскаде позже [data-theme=light] из app.css и перебивает её --bg) ---- */
:root:not([data-theme="light"]){--bg:#111B29}
/* ---- светлая тема: линии чуть темнее (заметнее) ---- */
[data-theme="light"]{--border:#C7D3E4}

/* ---- кнопки не «панелями»: плоские, без заливки/рамки ---- */
.btn.ghost,.icon-btn,.lang-select{background:transparent;border:0;box-shadow:none}
.btn.ghost:hover,.icon-btn:hover{background:var(--brand-tint);filter:none}
.lang-select:focus{outline:none;box-shadow:inset 0 -2px 0 var(--brand)}
/* основную (залитую) кнопку тоже облегчаем — без тени/жирной рамки */
.btn{box-shadow:none}
.btn.danger{border-color:transparent}
/* иконки/текст в кнопках — строго по центру */
.btn{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.icon-btn{line-height:1}
.btn.right{margin-left:auto}

/* ---- звёздный фон вынесен в stars.css + stars.js (interaminense/starry-sky) ---- */

/* ---- прогресс-бар квоты ящика ---- */
.quota-bar{height:6px;border-radius:999px;background:var(--raise-2);overflow:hidden;margin-top:7px;width:100%}
.quota-fill{height:100%;width:0;background:var(--brand);border-radius:999px;transition:width .35s ease}
.quota-bar.full .quota-fill{background:var(--bad,#f2635f)}

/* ---- футер (SPA) ---- */
.site-footer{border-top:1px solid var(--border);margin-top:8px}
.site-footer .wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 22px;color:var(--muted);font-size:13px}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--brand-ink)}
.site-footer .dot{opacity:.45}

/* ---- «Использовано / 80 MB» над шапкой «Входящие» ---- */
.inbox-usage{display:flex;align-items:center;gap:12px;padding:2px 16px 10px;font-size:12px;color:var(--muted)}
.inbox-usage #inboxUsage{white-space:nowrap;flex:none}
.inbox-usage .quota-bar{flex:1;margin-top:0;max-width:220px}

/* ---- красивый выбор языка (кастомный дропдаун вместо нативного select) ---- */
.lang-menu{position:relative}
.lang-popup{min-width:190px;max-height:300px;overflow-y:auto;padding:6px}
.lang-popup .lang-item{white-space:nowrap;font-weight:500}
.lang-popup .lang-item.active{background:var(--brand-tint);color:var(--brand-ink);font-weight:650}
#langCur{font-weight:700;letter-spacing:.02em}

/* ---- список писем: вмещает ~10 строк, дальше скролл ---- */
.msg-list{max-height:min(700px, 78vh)}
@media (max-width:900px){.msg-list{max-height:52vh}}

/* ---- SVG-иконка в кнопке ---- */
.btn .ic{width:15px;height:15px;flex:none}

/* ---- адрес + описание ящика в одну строку (после ✎) ---- */
.addr-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;position:relative}
/* «описание ящика» — помечено чипом с ярлыком-иконкой, хранится на сервере */
.addr-note{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;line-height:1.5;
  color:var(--brand-ink);background:var(--brand-tint);border-radius:999px;padding:1px 10px;
  max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.addr-note::before{content:"🏷";font-size:10px;flex:none;filter:grayscale(.15)}
.addr-note:hover{filter:brightness(1.04)}
[data-theme="light"] .addr-note:hover{filter:brightness(.97)}
@media (max-width:600px){.addr-note{max-width:180px}}

/* индикатор офлайн-режима (текст статуса обновления) */
body.is-offline #refreshState{color:#e0a33c;font-weight:600}