/* AI Smart Notes — responsive layer (mobile field + desktop)
 * Loaded after the Tailwind build. Does not replace it.
 */

:root {
  --asn-touch: 44px;
  --asn-gutter: 12px;
  --asn-safe-bottom: env(safe-area-inset-bottom, 0px);
  --asn-safe-top: env(safe-area-inset-top, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  padding-top: var(--asn-safe-top);
  padding-bottom: var(--asn-safe-bottom);
  overflow-x: hidden;
}

#root {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* ---------- Mobile / narrow (phones, small tablets) ---------- */
@media (max-width: 767px) {
  /* App shell: use full width, tighter gutters */
  #root > div.mx-auto.flex.min-h-screen,
  #root > div[class*="min-h-screen"] {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: max(var(--asn-gutter), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--asn-gutter), env(safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(1rem + var(--asn-safe-bottom)) !important;
    padding-top: 0.75rem !important;
  }

  /* Header */
  header.rounded-2xl,
  header[class*="rounded-2xl"] {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }

  header h1 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }

  header .mt-1.text-sm {
    font-size: 0.75rem !important;
  }

  /* Nav: scrollable chip row, larger taps */
  header nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem !important;
    margin-top: 0.75rem !important;
    scrollbar-width: none;
  }

  header nav::-webkit-scrollbar {
    display: none;
  }

  header nav a,
  header nav button {
    flex: 0 0 auto !important;
    min-height: var(--asn-touch) !important;
    padding: 0.55rem 0.9rem !important;
    font-size: 0.875rem !important;
    white-space: nowrap !important;
  }

  /* Logout + primary actions */
  header button,
  main button,
  main a.rounded-lg,
  main a[class*="rounded-lg"] {
    min-height: var(--asn-touch);
  }

  /* Forms: 16px prevents iOS focus-zoom */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: var(--asn-touch);
    max-width: 100%;
  }

  textarea {
    min-height: 6.5rem;
  }

  /* Login / narrow cards */
  section.mx-auto,
  section[class*="max-w-md"],
  section[class*="max-w-2xl"],
  .max-w-md,
  .max-w-2xl {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Home action row */
  [data-testid="notes-count"],
  section.space-y-4 > div.flex {
    gap: 0.5rem !important;
  }

  section.space-y-4 > div.flex.flex-wrap a,
  section.space-y-4 > div.flex.flex-wrap button {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }

  /* Note cards — field readable */
  [data-testid="note-list-item"] {
    padding: 0.85rem !important;
  }

  [data-testid="note-list-item"] .font-medium {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    word-break: break-word;
  }

  [data-testid="note-body-text"] > div,
  [data-testid="note-transcript-text"] > div {
    max-height: none !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }

  /* Action buttons: full-width stack for thumbs */
  [data-testid="note-actions"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.45rem !important;
  }

  [data-testid="note-actions"] > *,
  [data-testid="note-actions"] button {
    width: 100% !important;
    min-height: var(--asn-touch) !important;
    justify-content: center;
    text-align: center;
  }

  /* Fragments / nested button groups still stretch */
  [data-testid="note-actions"] button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Chat: stack history above conversation */
  [data-testid="chat-page"] {
    flex-direction: column !important;
    min-height: calc(100dvh - 12rem) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  [data-testid="chat-history"] {
    width: 100% !important;
    max-height: 28vh !important;
    border-right: none !important;
    border-bottom: 1px solid var(--asn-border, #e2e8f0) !important;
  }

  html.dark [data-testid="chat-history"] {
    border-bottom-color: #334155 !important;
  }

  /* Filters / grids → single column */
  .sm\:grid-cols-2,
  .sm\:grid-cols-3,
  .grid-cols-2,
  .grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Tables: horizontal scroll instead of overflowing page */
  .overflow-x-auto,
  table {
    max-width: 100%;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* WS banner: don't dominate */
  [data-testid="ws-capability-banner"] {
    font-size: 0.7rem !important;
    line-height: 1.35 !important;
  }

  /* Sticky-ish bottom space for thumb reach when scrolling notes */
  main {
    padding-bottom: 1.25rem;
  }
}

/* ---------- Small phones ---------- */
@media (max-width: 380px) {
  header h1 {
    font-size: 1.1rem !important;
  }

  header nav a,
  header nav button {
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
    font-size: 0.8rem !important;
  }
}

/* ---------- Desktop / tablet landscape ---------- */
@media (min-width: 768px) {
  #root > div[class*="min-h-screen"] {
    /* keep max-w-3xl from app; ensure comfortable side padding */
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  [data-testid="note-actions"] {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  [data-testid="note-actions"] button {
    width: auto !important;
  }

  [data-testid="chat-page"] {
    flex-direction: row !important;
  }

  [data-testid="chat-history"] {
    width: 14rem !important;
    max-height: none !important;
  }

  /* Slightly denser note body on desktop is fine */
  [data-testid="note-body-text"] > div,
  [data-testid="note-transcript-text"] > div {
    max-height: 16rem;
  }
}

/* ---------- Shared polish ---------- */
button,
a[role="button"],
[data-testid^="note-"] button {
  touch-action: manipulation;
}

img,
video,
canvas {
  max-width: 100%;
  height: auto;
}