/* ============================================================
   GULU Stock AI — mobile-first + modal styles (extracted)
   Loaded AFTER gulu-core.css. Preserves original cascade order:
   apm-styles  → skl-styles  → gulu-mobile-first-overrides
   ============================================================ */

/* ---------- apm-styles (Fine-Tune modal) ---------- */
/* Backdrop fills viewport, flex-centers card, respects safe-area */
.apm-backdrop {
    position: fixed; inset: 0;
    background: rgba(17, 25, 40, 0.95);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow: hidden;
}
/* When .display is set inline to block/flex by JS, ensure flex layout */
.apm-backdrop[style*="display: block"],
.apm-backdrop[style*="display:block"],
.apm-backdrop[style*="display: flex"],
.apm-backdrop[style*="display:flex"] { display: flex !important; }

.apm-card {
    width: 100%;
    max-width: 380px;
    max-height: 100%;
    background: linear-gradient(135deg, rgba(17,24,39,0.98), rgba(17,24,39,0.95));
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 18px;
    box-shadow: 0 0 60px rgba(59,130,246,0.3), 0 0 20px rgba(59,130,246,0.2);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.apm-title {
    text-align: center;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 2px 0 4px;
    text-shadow: 0 0 15px rgba(59,130,246,0.6);
    letter-spacing: 0.3px;
}

/* 4-up horizontal grid — fits one row on every phone width */
.apm-pattern-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.apm-pat {
    appearance: none;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 8px 4px;
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 64px;
}
.apm-pat:active { transform: scale(0.96); }
.apm-pat__icon {
    width: 22px; height: 22px;
    flex: 0 0 auto;
}
.apm-pat__label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.2px;
}
.apm-pat--detective    { border-color: rgba(59,130,246,0.30); background: rgba(59,130,246,0.10); }
.apm-pat--detective .apm-pat__icon  { color: rgba(96,165,250,0.95); }
.apm-pat--chartist     { border-color: rgba(236,72,153,0.30); background: rgba(236,72,153,0.10); }
.apm-pat--chartist .apm-pat__icon   { color: rgba(244,114,182,0.95); }
.apm-pat--alchemist    { border-color: rgba(139,92,246,0.30); background: rgba(139,92,246,0.10); }
.apm-pat--alchemist .apm-pat__icon  { color: rgba(167,139,250,0.95); }
.apm-pat--psychologist { border-color: rgba(34,197,94,0.30);  background: rgba(34,197,94,0.10);  }
.apm-pat--psychologist .apm-pat__icon { color: rgba(74,222,128,0.95); }

/* Radar — fills available middle space, square aspect */
.apm-radar-wrap {
    flex: 1 1 auto;
    min-height: 160px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.apm-radar {
    width: 100% !important;
    height: 100% !important;
    max-width: 320px;
    max-height: 320px;
}

/* Buttons — full width row, 44px touch target */
.apm-actions {
    display: flex;
    gap: 8px;
}
.apm-btn {
    flex: 1 1 0;
    min-height: 44px;
    padding: 10px 12px;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.apm-btn:active { transform: scale(0.98); }
.apm-btn--ghost   { background: linear-gradient(135deg, #4b5563, #6b7280); box-shadow: 0 4px 15px rgba(107,114,128,0.30); }
.apm-btn--primary { background: linear-gradient(135deg, #2563eb, #3b82f6); box-shadow: 0 4px 15px rgba(59,130,246,0.30); }

/* Tablet+: a touch more breathing room without growing past one viewport */
@media (min-width: 480px) {
    .apm-card  { max-width: 420px; padding: 18px; gap: 12px; }
    .apm-title { font-size: 1.05rem; }
    .apm-pat   { min-height: 72px; padding: 10px 6px; }
    .apm-pat__icon  { width: 24px; height: 24px; }
    .apm-pat__label { font-size: 12px; }
}

/* Short phones (iPhone SE, landscape) — collapse radar height */
@media (max-height: 640px) {
    .apm-radar-wrap { min-height: 130px; }
    .apm-radar      { max-width: 240px; max-height: 240px; }
    .apm-pat        { min-height: 56px; }
    .apm-pat__icon  { width: 20px; height: 20px; }
}
@media (max-height: 540px) {
    .apm-pattern-grid { gap: 4px; }
    .apm-pat__label   { display: none; }
    .apm-pat          { min-height: 44px; }
    .apm-radar-wrap   { min-height: 110px; }
    .apm-radar        { max-width: 180px; max-height: 180px; }
    .apm-title        { display: none; }
}

/* ---------- skl-styles (Skeleton loader) ---------- */
.skl-root { display: block; }
.skl-root.hidden { display: none; }

/* Chart placeholder is the positioning context for its status overlay.
   Existing #skeletonLoader .skeleton-image rule already gives it 16:9 padding-bottom + relative. */
.skl-chart {
    position: relative;
    margin-bottom: 14px;
}

/* Status overlay sits centered over the chart placeholder (NOT over the whole page) */
.skl-status {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(10,15,26,0.0) 0%, rgba(10,15,26,0.35) 100%);
    border-radius: 0.75rem;
    pointer-events: none;
}
.skl-status__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #93c5fd;
    font-size: 0.95rem;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.skl-status__text { white-space: nowrap; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; }
.skl-spinner { width: 22px; height: 22px; color: #93c5fd; flex: 0 0 auto; }
.skl-elapsed {
    color: #cbd5e1;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Warning banner — its own row, no absolute positioning leaking */
.skl-warning-bar {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(127, 29, 29, 0.45);
    border: 1px solid rgba(248, 113, 113, 0.35);
    text-align: center;
}
.skl-warning-text {
    color: #fecaca;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* Hide the legacy decision skeleton — markup kept only for backwards-compat CSS selectors */
.skl-decision-legacy { display: none; }

/* Compact on short viewports */
@media (max-height: 640px) {
    .skl-status { gap: 6px; padding: 10px; }
    .skl-spinner { width: 18px; height: 18px; }
    .skl-status__row { font-size: 0.85rem; gap: 8px; }
    .skl-elapsed { font-size: 0.78rem; }
    .skl-warning-bar { padding: 8px 12px; margin-bottom: 12px; }
    .skl-warning-text { font-size: 0.78rem; }
}

/* ---------- gulu-mobile-first-overrides ---------- */
:root {
  --gmf-safe-top: env(safe-area-inset-top, 0px);
  --gmf-safe-right: env(safe-area-inset-right, 0px);
  --gmf-safe-bottom: env(safe-area-inset-bottom, 0px);
  --gmf-safe-left: env(safe-area-inset-left, 0px);
  --gmf-touch-min: 44px;
}

/* ---------- Safe-area / notch / Dynamic Island / home indicator ---------- */
/* viewport-fit=cover is set in <meta>; this just applies the padding. */
html { background-color: #0a0f1a; } /* prevents bright bleed in safe-area on rotation */

/* Apply safe-area padding to ANY body state — JS swaps gradient-bg ↔ gradient-bg-fast
   ↔ gradient-bg-queue ↔ gradient-bg-ready during analyzing/queue/ready transitions.
   Without covering all variants the header slid under the iOS notch when analyzing. */
body.gradient-bg,
body.gradient-bg-fast,
body.gradient-bg-queue,
body.gradient-bg-ready,
body[class*="gradient-bg"] {
  padding-top: calc(1rem + var(--gmf-safe-top)) !important;
  padding-right: calc(1rem + var(--gmf-safe-right)) !important;
  padding-bottom: calc(1rem + var(--gmf-safe-bottom)) !important;
  padding-left: calc(1rem + var(--gmf-safe-left)) !important;
}

/* Bottom sheets / fixed footers clear the home indicator */
.bottom-sheet,
.bottom-sheet-content,
.fixed-bottom,
[data-fixed-bottom] {
  padding-bottom: max(env(safe-area-inset-bottom), 12px) !important;
}

/* iOS PWA standalone — extra breathing room since status bar is translucent */
@media all and (display-mode: standalone) {
  body.gradient-bg,
  body.gradient-bg-fast,
  body.gradient-bg-queue,
  body.gradient-bg-ready,
  body[class*="gradient-bg"] {
    padding-top: calc(1rem + var(--gmf-safe-top) + 8px) !important;
  }
}

/* ---------- Horizontal overflow guard ---------- */
html, body { overflow-x: hidden; max-width: 100vw; }

/* ---------- Touch targets (Apple HIG / WCAG 2.5.5) ---------- */
@media (max-width: 640px) {
  button:not(.whatsapp-choice-btn.cancel):not(.bottom-sheet-close),
  .btn,
  [role="button"],
  a.button,
  input[type="submit"],
  input[type="button"] {
    min-height: var(--gmf-touch-min);
  }
  /* Inline links inside paragraphs/spans stay normal */
  p a, span a, td a { min-height: 0; }
}

/* ---------- Form fields — stop iOS Safari focus zoom ---------- */
@media (max-width: 640px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  select,
  textarea {
    font-size: max(16px, 1rem) !important;
  }
}

/* ---------- Glass-effect legibility on mobile ---------- */
/* The animated gradient bleeds aggressively on small screens.
   Deepen card scrim WITHOUT changing geometry. */
@media (max-width: 640px) {
  .glass-effect,
  .glass-effect2 {
    background-color: rgba(10, 15, 26, 0.62) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

/* ---------- Loading-overlay text vs image stacking ---------- */
@media (max-width: 640px) {
  #skeletonStatus {
    position: relative !important;
    inset: auto !important;
    padding: 16px 12px;
    gap: 12px;
    background: rgba(10, 15, 26, 0.55);
    border-radius: 12px;
    z-index: 5;
  }
  #skeletonWarning {
    position: static !important;
    transform: none !important;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(127, 29, 29, 0.6);
    border-radius: 8px;
    width: auto !important;
  }
  /* Skeleton image keeps 16:9 but never bleeds outside its container */
  #skeletonLoader .skeleton-image {
    max-width: 100vw;
  }
}

/* ---------- Modal z-index sanity (mobile) ---------- */
.bottom-sheet { z-index: 10000; }
.bottom-sheet::before { z-index: -1; }
[id$="Modal"], .modal, .modal-backdrop {
  z-index: 9999;
}

/* ---------- Image responsiveness baseline ---------- */
img, video, canvas, svg { max-width: 100%; height: auto; }
img { -webkit-user-drag: none; }

/* ---------- Smooth scrolling momentum on iOS ---------- */
.stocks-container,
.bottom-sheet-content,
.modal-body,
[id$="ModalBody"] { -webkit-overflow-scrolling: touch; }

/* ---------- Tap highlight off ---------- */
* { -webkit-tap-highlight-color: transparent; }

/* ---------- Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  .gradient-bg, .gradient-bg-fast { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Header / first-section clipping fix ---------- */
/* Header sits inside `<div class="mt-0 container ...">`, NOT direct child of body.
   So we target the actual <header role="banner"> element and its inner text column.
   Fix the analyzing-state subheader that was getting clipped at top of viewport. */
@media (max-width: 640px) {
  header[role="banner"] {
    padding-top: max(4px, env(safe-area-inset-top, 0px));
  }
  /* Avatar + text row — anchor to top of avatar, NOT vertical-center.
     Long analyzing-state subheaders no longer push the title above the safe-area. */
  header[role="banner"] .pt-2.flex.items-center.gap-6 {
    align-items: flex-start !important;
    gap: 0.875rem !important;
  }
  /* Header text column gets a hard min-height matching the avatar so layout doesn't reflow */
  header[role="banner"] .text-left {
    min-width: 0; /* lets text shrink/wrap inside flex */
    flex: 1 1 auto;
  }
  header[role="banner"] #headerText {
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin-bottom: 0 !important;
  }
  header[role="banner"] #subHeaderText {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
}

/* ---------- Focus visibility (a11y) ---------- */
:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Print sanity (defensive) ---------- */
@media print {
  .gradient-bg, .gradient-bg-fast { background: white !important; animation: none !important; }
  * { color: #000 !important; }
  .bottom-sheet, [id$="Modal"], .modal { display: none !important; }
}

/* ---------- Dark color-scheme hint to OS (form controls) ---------- */
:root { color-scheme: dark; }

/* ---------- KLCI price chart legibility ----------
   The SVG uses viewBox 6 -60 1200 420 rendered into ~358×125 on iPhone.
   Inline font-size of 28-30px scales down to ~8-9px on screen — unreadable.
   Bump label font-size in viewBox units so they render at ~13-15px on mobile.
   On phone, hide the change% line per data point and keep the price (cleaner). */
@media (max-width: 640px) {
  svg.chart-svg .chart-label-main  { font-size: 44px !important; font-weight: 600 !important; }
  svg.chart-svg .chart-label-change { display: none !important; }
  /* Date label sits at viewBox x=100..1100 spaced 250 apart. "08 May 2026" at 44px would overflow into neighbour, so cap at 32px and abbreviate via text-anchor mid */
  svg.chart-svg .date-label        { font-size: 30px !important; opacity: 0.75; }
  /* Make the chart card a touch taller so larger labels don't bunch up */
  svg.chart-svg { min-height: 150px; }
  /* Anchor labels to the centre of their column so the leftmost/rightmost don't clip the chart edge */
  svg.chart-svg text { text-anchor: middle; }
}

/* On wider screens (tablets+) keep both lines but make them readable */
@media (min-width: 641px) {
  svg.chart-svg .chart-label-main   { font-size: 32px !important; }
  svg.chart-svg .chart-label-change { font-size: 30px !important; }
  svg.chart-svg .date-label         { font-size: 30px !important; }
}