/* css/mobile.css — Responsive Optimierungen für kleine Displays
   Primäres Ziel: iPhone SE (375 × 667 pt, 1×)
   Breakpoints:
     @media (max-width: 480px)  — alle kleinen Phones
     @media (max-width: 375px)  — iPhone SE / sehr kleine Geräte
*/

/* ═══════════════════════════════════════════════════════════════════════════
   480 px — Kleine Phones allgemein
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Layout ────────────────────────────────────────────────────────────── */
  main {
    padding: 68px 12px 32px;
  }

  /* ── Topbar ────────────────────────────────────────────────────────────── */
  .topbar {
    height: 54px;
    padding: 0 12px;
    gap: 6px;
  }
  .topbar-logo-icon { width: 30px; height: 30px; border-radius: 7px; }
  .nav-btn {
    padding: 6px 9px;
    font-size: 15px;
    border-radius: 7px;
    gap: 4px;
  }
  .nav-icon { width: 15px; height: 15px; }
  .topbar-nav { gap: 2px; flex: 1; justify-content: center; }
  .avatar-btn { width: 30px; height: 30px; font-size: 14px; }
  #auth-screen { padding: 20px 16px; align-items: flex-start; padding-top: 40px; }
  .auth-logo   { font-size: 38px; }
  .auth-tagline { font-size: 15px; margin-bottom: 28px; }
  .auth-tabs   { margin-bottom: 20px; }
  .auth-tab    { font-size: 15px; padding: 9px 8px; }

  /* ── Inputs & Buttons ──────────────────────────────────────────────────── */
  .field input,
  .field textarea,
  .field select {
    font-size: 16px; /* verhindert iOS-Zoom beim Focus */
    padding: 11px 12px;
  }
  .field label  { font-size: 13px; }
  .btn          { padding: 12px 16px; font-size: 16px; }
  .btn-sm       { padding: 7px 12px;  font-size: 14px; }

  /* ── Modal ─────────────────────────────────────────────────────────────── */
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal {
    padding: 20px 16px 28px;
    border-radius: var(--r) var(--r) 0 0; /* Sheet-style von unten */
    max-width: 100%;
  }
  .modal h3     { font-size: 19px; }
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { width: 100%; }

  /* ── Feed & Karten ─────────────────────────────────────────────────────── */
  .mood-card   { padding: 14px; margin-bottom: 10px; }
  .mood-emoji  { font-size: 30px; }
  .mood-name   { font-size: 17px; }
  .card-header { gap: 10px; margin-bottom: 10px; }
  .avatar      { width: 34px; height: 34px; font-size: 15px; }
  .feed-filters { gap: 6px; margin-bottom: 16px; }
  .filter-chip { padding: 6px 11px; font-size: 13px; }
  .card-footer { gap: 6px; }
  .contact-btn { padding: 7px 12px; font-size: 13px; }

  /* ── Stimmungs-Grid ────────────────────────────────────────────────────── */
  .mood-grid  { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .mood-option { padding: 10px 4px; font-size: 24px; border-radius: 8px; }
  .mood-option span { font-size: 11px; }
  .mood-panel  { padding: 16px; }
  .mood-panel h2 { font-size: 19px; margin-bottom: 16px; }

  /* ── Social-Chips ──────────────────────────────────────────────────────── */
  .social-btns { gap: 6px; }
  .social-chip { padding: 6px 11px; font-size: 14px; }

  /* ── Nachrichten ───────────────────────────────────────────────────────── */
  .conv-item  { padding: 12px; }
  .conv-name  { font-size: 15px; }
  .conv-preview { font-size: 14px; }
  .chat-messages { max-height: calc(100vh - 240px); padding: 12px; }
  .msg-bubble { max-width: 82%; padding: 8px 12px; font-size: 15px; }
  .chat-input-wrap { padding: 10px; gap: 6px; }
  .chat-input { font-size: 16px; padding: 11px 14px; min-height: 44px; resize: none; } /* 16px → kein iOS-Zoom */

  /* ── Profil ────────────────────────────────────────────────────────────── */
  .profile-header  { padding: 16px; gap: 14px; margin-bottom: 14px; }
  .profile-avatar  { width: 52px; height: 52px; font-size: 22px; }
  .profile-name    { font-size: 21px; }
  .profile-section { padding: 16px; margin-bottom: 12px; }
  .profile-section-head { margin-bottom: 14px; }
  .profile-fields-grid  { grid-template-columns: 1fr; }
  .profile-edit-actions { flex-direction: column; }
  .profile-edit-actions .btn { width: 100%; }

  /* ── Settings-Picker ───────────────────────────────────────────────────── */
  .appear-toggle  { padding: 14px 16px; }
  .appear-body    { padding: 14px 16px; gap: 18px; }
  .swatch-btn     { padding: 4px 8px 4px 5px; }
  .swatch-name    { font-size: 13px; }
  .swatch-dot     { width: 15px; height: 15px; }
  .font-option    { padding: 11px 13px; }

  /* ── Geo-Feld ──────────────────────────────────────────────────────────── */
  .geo-field      { padding: 12px; }
  .geo-field-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .geo-actions    { width: 100%; }
  .btn-geo        { flex: 1; text-align: center; padding: 8px 10px; }

  /* ── Gefahrenzone ──────────────────────────────────────────────────────── */
  .danger-zone { padding: 16px; }
  .btn-danger-outline { width: 100%; justify-content: center; }

  /* ── Leer-/Lade-States ─────────────────────────────────────────────────── */
  .empty   { padding: 40px 16px; }
  .empty-icon { font-size: 44px; }
  .empty h3   { font-size: 18px; }
  .loader  { padding: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   375 px — iPhone SE & gleichgroße Geräte
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {

  /* ── Topbar ────────────────────────────────────────────────────────────── */
  .nav-btn     { padding: 5px 7px; font-size: 14px; gap: 3px; }
  .nav-icon    { width: 14px; height: 14px; }

  /* ── Auth ──────────────────────────────────────────────────────────────── */
  .auth-logo    { font-size: 34px; }
  .auth-tagline { margin-bottom: 22px; }

  /* ── Stimmungs-Grid: 3 Spalten bleiben, aber noch kompakter ───────────── */
  .mood-option { padding: 8px 2px; font-size: 22px; gap: 3px; }
  .mood-option span { font-size: 10px; }

  /* ── Social-Chips auf volle Breite ─────────────────────────────────────── */
  .social-btns { flex-direction: column; }
  .social-chip { width: 100%; text-align: center; }

  /* ── Profil-Avatar noch kompakter ──────────────────────────────────────── */
  .profile-avatar { width: 44px; height: 44px; font-size: 19px; }
  .profile-name   { font-size: 19px; }

  /* ── Profil-Feld-Label kürzer ─────────────────────────────────────────── */
  .profile-field-label { min-width: 60px; font-size: 12px; }
  .profile-field-value { font-size: 15px; }

  /* ── Picker: Swatch-Text ausblenden, nur Punkte zeigen ─────────────────── */
  .swatch-name  { display: none; }
  .swatch-btn   { padding: 5px; border-radius: 50%; width: 32px; height: 32px; justify-content: center; }
  .swatch-check { display: none; }
  .swatch-row   { gap: 5px; }
  .swatch-dot   { width: 18px; height: 18px; }

  /* ── Modal als Fullscreen-Sheet ────────────────────────────────────────── */
  .modal { padding: 18px 14px 32px; }

  /* ── Chat Bubble breiter ───────────────────────────────────────────────── */
  .msg-bubble { max-width: 88%; }

  /* ── Karten noch kompakter ─────────────────────────────────────────────── */
  .mood-card { padding: 12px; }
  .mood-emoji { font-size: 26px; }
  .mood-name  { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   iOS Safe-Area (iPhone X+ / Dynamic Island) — auch auf SE relevant für
   korrekte Toolbar-Abstände
   ═══════════════════════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-top)) {
  .topbar {
    /* Notch / Dynamic Island: Topbar nach unten schieben */
    padding-top:    env(safe-area-inset-top);
    height:         calc(60px + env(safe-area-inset-top));
    padding-left:   max(16px, env(safe-area-inset-left));
    padding-right:  max(16px, env(safe-area-inset-right));
  }
  main {
    /* Inhalt beginnt unterhalb der vergrößerten Topbar */
    padding-top:    calc(68px + env(safe-area-inset-top));
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
    padding-left:   max(16px, env(safe-area-inset-left));
    padding-right:  max(16px, env(safe-area-inset-right));
  }
  .modal-overlay {
    padding-top:    max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left:   max(12px, env(safe-area-inset-left));
    padding-right:  max(12px, env(safe-area-inset-right));
  }
  #auth-screen {
    padding-top:    max(24px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    padding-left:   max(24px, env(safe-area-inset-left));
    padding-right:  max(24px, env(safe-area-inset-right));
  }
}