/* =========================================================
   MEDIKA V23.5.2
   MOBILE AI COMPOSER POLISH
   Visual-only hotfix.
   ========================================================= */

/*
 * Goal:
 * - lift composer above bottom nav;
 * - preserve iPhone safe-area;
 * - reduce dead space feeling;
 * - align input + send button;
 * - keep bottom nav visually separate.
 */

/* Ensure AI panel uses real dynamic viewport on mobile. */
.medika-ai-panel-v19 {
  min-height: 100dvh;
  height: 100dvh;
}

.medika-ai-panel-shell-v19 {
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
}

/* Let middle conversation area consume remaining space correctly. */
.medika-ai-body-v19,
.medika-ai-conversation-v19,
.medika-ai-chat-body-v19 {
  min-height: 0;
}

/* Composer becomes a proper floating dock. */
.medika-ai-input-wrap-v19,
.medika-ai-composer-v19,
.medika-ai-chat-input-v19 {
  position: relative;
  z-index: 40;
}

/* Input styling alignment. */
.medika-ai-input-v19,
.medika-ai-input-wrap-v19 input,
.medika-ai-input-wrap-v19 textarea,
.medika-ai-composer-v19 input,
.medika-ai-composer-v19 textarea {
  min-height: 46px;
  border-radius: 16px;
  padding-top: 11px;
  padding-bottom: 11px;
  line-height: 1.35;
}

/* Send button alignment. */
.medika-ai-send-v19,
.medika-ai-input-wrap-v19 button[type="submit"],
.medika-ai-composer-v19 button[type="submit"] {
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  border-radius: 15px;
}

/* Mobile layout: lift composer above persistent bottom nav. */
@media (max-width: 760px) {
  .medika-ai-panel-v19 {
    padding-bottom: 0 !important;
  }

  .medika-ai-panel-shell-v19 {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  /*
   * Bottom nav in MEDIKA occupies roughly 70–76px including safe area.
   * Composer needs its own gap above it so it never looks clipped.
   */
  .medika-ai-input-wrap-v19,
  .medika-ai-composer-v19,
  .medika-ai-chat-input-v19 {
    margin: 0 10px
      calc(76px + env(safe-area-inset-bottom))
      10px !important;
    padding: 8px !important;
    border: 1px solid rgba(193, 207, 226, .92);
    border-radius: 19px;
    background: rgba(255, 255, 255, .98);
    box-shadow:
      0 12px 34px rgba(21, 55, 97, .12),
      0 2px 8px rgba(21, 55, 97, .05);
    backdrop-filter: blur(18px);
  }

  .medika-ai-input-v19,
  .medika-ai-input-wrap-v19 input,
  .medika-ai-input-wrap-v19 textarea,
  .medika-ai-composer-v19 input,
  .medika-ai-composer-v19 textarea {
    min-height: 44px;
    height: 44px;
    padding: 10px 13px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    box-shadow: inset 0 0 0 1px #d9e2ee;
    color: #24466f;
    font-size: 13px;
  }

  .medika-ai-input-v19::placeholder,
  .medika-ai-input-wrap-v19 input::placeholder,
  .medika-ai-input-wrap-v19 textarea::placeholder,
  .medika-ai-composer-v19 input::placeholder,
  .medika-ai-composer-v19 textarea::placeholder {
    color: #9aa8b9;
    opacity: 1;
  }

  .medika-ai-send-v19,
  .medika-ai-input-wrap-v19 button[type="submit"],
  .medika-ai-composer-v19 button[type="submit"] {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    border-radius: 14px !important;
  }

  /* Prevent chat content from hiding behind the composer/nav. */
  .medika-ai-messages-v19,
  .medika-ai-chat-scroll-v19,
  .medika-ai-chat-body-v19 {
    padding-bottom: 18px !important;
    scroll-padding-bottom:
      calc(156px + env(safe-area-inset-bottom));
  }

  /* Bottom nav stays visually independent. */
  .bottom-nav-v2,
  .bottom-nav,
  .public-bottom-nav-v2 {
    z-index: 60;
  }
}

/* Small iPhones */
@media (max-width: 390px) {
  .medika-ai-input-wrap-v19,
  .medika-ai-composer-v19,
  .medika-ai-chat-input-v19 {
    margin-left: 6px !important;
    margin-right: 6px !important;
    margin-bottom:
      calc(74px + env(safe-area-inset-bottom)) !important;
    padding: 6px !important;
    border-radius: 17px;
  }

  .medika-ai-input-v19,
  .medika-ai-input-wrap-v19 input,
  .medika-ai-input-wrap-v19 textarea,
  .medika-ai-composer-v19 input,
  .medika-ai-composer-v19 textarea {
    font-size: 12.5px;
  }
}