/* =========================================================
   Email (Gmail)
   ========================================================= */

.btn--block { width: 100%; justify-content: center; }
a.btn { text-decoration: none; }
a.btn--primary { color: #fff; }

/* ---------- Csempék ---------- */
.mail-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-2); }
.mail-tile {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.mail-tile:hover { border-color: var(--accent); }
.mail-tile a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--space-3) var(--space-2);
  color: inherit; text-decoration: none; text-align: center;
}
.mail-tile__icon { font-size: 1.5rem; line-height: 1; }
.mail-tile__name { font-size: .85rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mail-tile--custom { border-style: dashed; }
.mail-tile__del { position: absolute; top: 2px; right: 2px; opacity: 0; }
.mail-tile:hover .mail-tile__del, .mail-tile__del:focus-visible { opacity: 1; }
@media (hover: none) { .mail-tile__del { opacity: .5; } }

.mail-tiles--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mail-tiles--compact a { padding: var(--space-2) 4px; }
.mail-tiles--compact .mail-tile__icon { font-size: 1.25rem; }
.mail-tiles--compact .mail-tile__name { font-size: .78rem; }

/* ---------- Levélírás ---------- */
.compose .field { margin-bottom: var(--space-3); }
.compose__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.contact-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.contact-chips:empty { display: none; }
.contact-chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .82rem;
}
.contact-chip button { padding: 3px 4px 3px 10px; border: 0; background: none; }
.contact-chip .contact-chip__del { padding: 3px 8px 3px 2px; color: var(--text-muted); }
.contact-chip:hover { border-color: var(--accent); }

/* ---------- Mentett keresések ---------- */
.search-form { display: grid; grid-template-columns: 1fr 2fr auto; gap: var(--space-2); margin-bottom: var(--space-3); }
.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--space-3); }
.suggest:empty { display: none; }
.op-help summary { cursor: pointer; color: var(--text-muted); font-size: .88rem; }
.op-help dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--space-3); margin: var(--space-2) 0 0; font-size: .85rem; }
.op-help dd { margin: 0; color: var(--text-muted); }

.inbox-view .quick-add { margin-bottom: var(--space-2); }
.inbox-view .quick-add__main .input--sm { border: 0; background: transparent; width: 140px; max-width: 40%; flex-shrink: 0; padding-right: 0; }
.future-note { margin-top: var(--space-5); text-align: center; }

/* ---------- Főoldali widget ---------- */
.inbox-widget { display: grid; gap: var(--space-3); }
.inbox-widget__label { margin-bottom: 2px; }

@media (max-width: 720px) {
  .search-form { grid-template-columns: 1fr; }
  .compose__bar .btn { width: 100%; justify-content: center; }
  .inbox-view .page-header { flex-wrap: wrap; }
  .mail-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}