/* === DOCTOR ASSISTANT STYLES === */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
  background: #f0fdf4;
}

body {
  min-height: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: env(safe-area-inset-top);
}

/* Fullscreen overlay prompt */
#fs-overlay {
  transition: opacity 0.2s ease;
}

/* Swipe & Task styles */
.swipe-complete {
  transition: transform 0.25s ease;
}

.completed {
  opacity: 0.7;
  text-decoration: line-through;
  background: #f0fdf4 !important;
}

.swipe-actions {
  transition: transform 0.25s ease;
}

/* AI Chat bubbles */
.ai-bubble {
  max-width: 80%;
  background: #dbeafe;
  border-radius: 20px 20px 20px 0;
}

#chat-modal {
  transition: opacity 0.2s ease;
}

.user-bubble {
  background: #e0f2fe;
  border-radius: 20px 20px 0 20px;
}

.ai-chat-bubble {
  background: #dbeafe;
  border-radius: 20px 20px 20px 0;
}

/* Keyboard/code style */
.kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Mobile compact mode (~25% smaller)
   Note: dùng <=640px để áp dụng cho hầu hết điện thoại (390–430px vẫn ăn). */
@media (max-width: 640px) {
  html {
    font-size: 12px;
  }
  /* 16px -> 12px ≈ -25% */

  body {
    line-height: 1.25;
  }

  /* Reduce touch-target padding slightly to fit small screens */
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .rounded-3xl {
    border-radius: 1.25rem;
  }

  .p-8 {
    padding: 1.25rem !important;
  }

  .p-6 {
    padding: 1rem !important;
  }

  .px-8 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .py-4 {
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
  }

  #ai-assistant img {
    width: 3.25rem;
    height: 3.25rem;
  }

  #ai-assistant .bg-white {
    padding: 0.5rem;
  }
}