/* ============================================
   MOBILE KEYBOARD FIX
   Works with iOS Design System v4.0
   ============================================ */

/* App Container - use viewport height that accounts for keyboard */
#app {
  height: 100vh;
  height: var(--viewport-height, 100dvh);
}

/* Chat Window - keyboard-aware layout */
.chat-window {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Messages Container - takes remaining space */
.messages-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Message Input Container */
.message-input-container {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

/* Textarea - max height adjusted for keyboard */
.message-input-container textarea,
.message-input-container .message-input {
  max-height: 120px;
  min-height: 36px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* When keyboard is visible */
body.keyboard-visible .message-input-container textarea,
body.keyboard-visible .message-input-container .message-input {
  max-height: 80px;
}

/* ============================================
   MOBILE SPECIFIC (768px and below)
   ============================================ */
@media (max-width: 768px) {
  #app {
    height: var(--app-height, 100dvh);
  }

  .chat-window {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
  }

  body.keyboard-visible .messages-container {
    padding-bottom: var(--ios-sp-8);
  }

  .message-input-container {
    position: sticky;
    bottom: 0;
    z-index: 10;
  }

  body.keyboard-visible .message-input-container textarea,
  body.keyboard-visible .message-input-container .message-input {
    max-height: 60px;
  }
}

/* ============================================
   iOS SAFARI SPECIFIC FIXES
   ============================================ */
@supports (-webkit-touch-callout: none) {
  body {
    position: fixed;
    width: 100%;
    height: 100vh;
  }

  #app {
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  input, textarea, select {
    font-size: 16px !important;
  }
}

/* ============================================
   ANDROID SPECIFIC FIXES
   ============================================ */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  .message-input-container {
    position: relative;
  }
}

/* ============================================
   TASK DETAIL - COMMENT INPUT
   ============================================ */
.task-detail-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.task-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.comment-input-container {
  position: relative;
  flex-shrink: 0;
  background: var(--ios-bg-primary);
  border-top: 0.5px solid var(--ios-separator);
  padding: var(--ios-sp-3);
  padding-bottom: calc(var(--ios-sp-3) + var(--ios-safe-bottom));
}

@media (max-width: 768px) {
  .comment-input-container {
    position: sticky;
    bottom: 0;
    z-index: 10;
  }
}

/* ============================================
   MODALS - Keyboard-aware
   ============================================ */
body.keyboard-visible .modal {
  max-height: calc(var(--app-height, 100vh) - var(--keyboard-height, 0px));
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.safe-area-top { padding-top: var(--ios-safe-top); }
.safe-area-bottom { padding-bottom: var(--ios-safe-bottom); }
.keyboard-padding { padding-bottom: var(--keyboard-height, 0px); }