:root {
    --bg-deep:       #0d0b09;
    --bg-surface:    #141210;
    --bg-card:       #1c1915;
    --bg-input:      #221f1b;
    --border:        #2e2a24;
    --border-warm:   #3d3529;
    --amber:         #c8903a;
    --amber-soft:    #d4a55a;
    --amber-dim:     #7a5520;
    /* Improved Contrast for Mobile */
    --text-primary:  #f5f0e8; 
    --text-muted:    #a3988c; 
    --text-dim:      #6e665d; 
    --evina-bg:      #1e1b16;
    --evina-border:  #2e2820;
    --user-bg:       #1a2230;
    --user-border:   #1e2d42;
    --proactive-bg:     #1e1a10;
    --proactive-border: #3d3010;
    --font-serif:    'Cormorant Garamond', Georgia, serif;
    --font-sans:     'DM Sans', system-ui, sans-serif;
    --radius-msg:    16px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  /* Prevents the whole page from bouncing/scrolling on mobile */
  html, body {
    height: 100%;
    overflow: hidden;
    position: fixed; 
    width: 100%;
  }

  body {
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 16px; /* Larger base size for mobile */
    line-height: 1.6;
    height: 100dvh; 
    display: flex;
    flex-direction: column;
    -webkit-tap-highlight-color: transparent;
  }

  .screen { display: none; flex-direction: column; height: 100dvh; width: 100%; }
  .screen.active { display: flex; }

  #login-screen {
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto; /* Allow scroll if content is tall */
  }

  .login-card {
    background: var(--bg-card);
    border: 0.5px solid var(--border-warm);
    border-radius: 20px;
    padding: 2.5rem 1.5rem;
    width: 100%; max-width: 400px;
    animation: fadeUp 0.6s ease both;
  }

  /* Input fields: 16px font prevents auto-zoom on mobile */
  .field input {
    width: 100%; background: var(--bg-input);
    border: 0.5px solid var(--border); border-radius: 10px;
    padding: 12px 14px; color: var(--text-primary);
    font-family: var(--font-sans); font-size: 16px;
    outline: none; transition: border-color 0.2s;
    appearance: none; /* Removes mobile default styling */
  }

  .btn-primary {
    width: 100%; padding: 14px; background: var(--amber);
    border: none; border-radius: 10px; color: #0d0b09;
    font-weight: 600; text-transform: uppercase;
    cursor: pointer; margin-top: 1rem;
  }

  /* Chat header adjustments for small screens */
  .chat-header {
    padding: 0.8rem 1rem;
    background: var(--bg-surface);
    z-index: 10;
  }
  .header-name { font-size: 1.1rem; }

  .messages {
    flex: 1; overflow-y: auto;
    padding: 1rem;
    display: flex; flex-direction: column; gap: 1rem;
    /* Smooth scrolling and momentum scroll for iOS */
    -webkit-overflow-scrolling: touch; 
  }

  .msg { max-width: 90%; } /* Wider bubbles for small screens */

  /* Input area: Fixed at bottom with safe-area padding for modern phones */
  .input-area { 
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); 
    border-top: 0.5px solid var(--border); 
    background: var(--bg-surface);
    position: relative;
    z-index: 20;
  }

  .input-row {
    background: var(--bg-input); border: 0.5px solid var(--border);
    border-radius: 24px; padding: 6px 6px 6px 16px;
  }

  #message-input {
    font-size: 16px; /* Critical for mobile zoom */
    padding: 8px 0;
  }

  /* Media query for even smaller screens */
  @media (max-width: 360px) {
    .header-actions { display: none; } /* Hide extra buttons on tiny phones */
    .login-sigil .name { font-size: 2.2rem; }
  }

  /* ── Image attach button — mobile sizing ─────────────────────── */
.attach-btn {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  font-size: 20px;
}

.image-preview-thumb {
  width: 44px; height: 44px;
}

.image-preview-label {
  font-size: 12px;
}