/* ============================================
   Responsive & Mobile Styles
   ============================================ */

/* ---- Tablet (max 768px) ---- */
@media (max-width: 768px) {
  .app { max-width: 100%; }

  .search-modal-content {
    max-height: 100vh;
    border-radius: 0;
    height: 100%;
  }

  .search-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .result-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ---- Mobile (max 480px) ---- */
@media (max-width: 480px) {
  .message { max-width: 85%; }

  .message-content {
    font-size: 15px;
  }

  .file-message {
    min-width: 180px;
    max-width: 260px;
  }

  .image-preview { max-width: 200px; }
  .image-preview img { max-height: 160px; }

  .input-container {
    padding: 6px 8px;
    padding-bottom: calc(6px + var(--safe-bottom));
  }

  .input-field-container textarea {
    padding: 8px 36px 8px 10px;
    font-size: 16px;
  }

  .function-button,
  .send-button {
    width: 28px;
    height: 28px;
  }

  .function-menu-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px 16px;
  }

  .function-menu-item-icon {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }

  .function-menu-item-title {
    font-size: 10px;
  }

  .image-gen-modal-overlay { padding: 12px; }
  .image-gen-modal { max-height: 95vh; }

  .form-row {
    flex-direction: column;
    gap: 12px;
  }

  .image-gen-footer {
    flex-direction: column;
  }

  .image-gen-footer button { width: 100%; }

  .search-input { font-size: 16px; }
  .search-modal-content { padding-bottom: var(--safe-bottom); }
}

/* ---- Extra Small (max 320px) ---- */
@media (max-width: 320px) {
  .message { max-width: 90%; }
  .message-content { font-size: 14px; }
  .function-menu-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Landscape ---- */
@media (orientation: landscape) and (max-height: 500px) {
  .input-container { padding: 4px 12px; }
  .input-field-container textarea { max-height: 50px; }
  .message-list { padding: 8px; }
}

/* ============================================
   iOS Safari Specific Fixes
   ============================================ */

@supports (-webkit-touch-callout: none) {
  .app {
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
    overscroll-behavior: none;
  }

  .input-container {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: var(--z-max);
  }

  .message-list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .input-field-container textarea {
    -webkit-text-size-adjust: 100%;
    -webkit-appearance: none;
    appearance: none;
  }

  input, textarea, .text-message, .message-content {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
  }
}

/* iOS portrait fixed input */
@media screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .app {
    height: calc(var(--vh, 1vh) * 100);
    min-height: calc(var(--vh, 1vh) * 100);
  }

  @media (max-width: 768px) {
    .input-container {
      position: fixed;
      bottom: var(--safe-bottom);
      left: 0;
      right: 0;
      width: 100%;
      max-width: var(--app-max-width);
      margin: 0 auto;
      z-index: var(--z-max);
    }

    .message-list {
      padding-bottom: calc(60px + var(--safe-bottom));
    }
  }
}

/* iOS landscape */
@media screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .app { height: calc(var(--vh, 1vh) * 100); }
  .input-container { padding: 6px 12px; }
}

/* iPhone X series safe areas */
@media screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
       screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2),
       screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3),
       screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3),
       screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) {
  .input-container { padding-bottom: calc(8px + 34px); }
  .message-list { padding-bottom: calc(60px + 34px); }
}

/* Keyboard open */
body.keyboard-open { overflow: hidden; }

body.keyboard-open .app {
  height: calc(var(--vh, 1vh) * 100);
  transition: none;
}

body.keyboard-open .input-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;
  z-index: var(--z-max);
  transition: none;
}

body.keyboard-open .message-list {
  padding-bottom: 80px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

/* ============================================
   Dark Mode Overrides
   ============================================ */
@media (prefers-color-scheme: dark) {
  /* Input area */
  .input-field-container {
    background: #262626;
  }

  .input-field-container textarea {
    color: #f0f0f0;
  }

  .file-button {
    color: #aaa;
  }

  /* Function menu */
  .function-menu-content { background: #1e1e1e; }
  .function-menu-header { border-bottom-color: #333; }
  .function-menu-title { color: #f0f0f0; }
  .function-menu-item-title { color: #ccc; }
  .function-menu-item:active { background: #2a2a2a; }

  /* Image gen modal */
  .image-gen-modal { background: #1e1e1e; color: #f0f0f0; }
  .image-gen-header { border-bottom-color: #333; }
  .close-btn { color: #aaa; }
  .form-group label { color: #e0e0e0; }
  .form-group input,
  .form-group textarea,
  .form-group select {
    background: #333;
    border-color: #444;
    color: #f0f0f0;
  }
  .form-group input:focus,
  .form-group textarea:focus,
  .form-group select:focus {
    border-color: var(--color-primary);
  }
  .image-gen-footer { border-top-color: #333; }
  .btn-cancel { background: #333; color: #ccc; }

  /* Search modal */
  .search-modal-content { background: #1e1e1e; color: #f0f0f0; }
  .search-header { background: #1e1e1e; border-bottom-color: #333; }
  .search-input { background: #262626; border-color: #333; color: #f0f0f0; }
  .search-input:focus { background: #2a2a2a; border-color: var(--color-primary); }
  .search-filters { background: #222; border-bottom-color: #333; }
  .search-filter-group select { background: #1e1e1e; border-color: #333; color: #f0f0f0; }
  .search-suggestions { background: #1e1e1e; }
  .suggestions-header { background: #222; border-bottom-color: #333; color: #aaa; }
  .suggestion-item:active { background: #333; }
  .search-result-item:active { background: #262626; }
  .result-text { color: #e0e0e0; }
  .search-results-stats { background: #222; border-bottom-color: #333; color: #aaa; }

  /* Own message link color in dark */
  .message.own .text-message.markdown-rendered a {
    color: #a0d9a0;
  }

  /* File message in dark mode */
  .message.own .file-size { color: rgba(255, 255, 255, 0.5); }
  .message.own .download-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }
}