/* Rafaygen custom overrides (intentionally minimal).
   R2/R3/A — mobile + accessibility polish. Deliberately additive and defensive: no forced global
   sizing that could break OpenWebUI's dense toolbars/desktop layout. Loaded at runtime via
   app.html (<link href="/static/custom.css">), so it deploys with a file copy, no rebuild. */

/* A2 — visible keyboard-focus ring (helps keyboard-only navigation; only shows for keyboard focus,
   never on mouse click, so it doesn't add visual noise for pointer users). */
:focus-visible {
	outline: 2px solid #6366f1;
	outline-offset: 2px;
	border-radius: 4px;
}

/* R2 — stop iOS Safari from auto-zooming the page when the composer/inputs gain focus. iOS zooms
   any field whose font-size is < 16px; pinning to 16px on small screens prevents the jarring jump
   without changing desktop typography. */
@media (max-width: 768px) {
	textarea,
	input[type='text'],
	input[type='search'],
	input[type='email'],
	input[type='password'],
	[contenteditable='true'] {
		font-size: 16px !important;
	}
}

/* R2 — honour the on-screen keyboard / notch safe area at the very bottom of the viewport so the
   composer isn't hidden behind the home indicator on phones. Scoped to the fixed bottom bar only. */
@supports (padding: env(safe-area-inset-bottom)) {
	@media (max-width: 768px) {
		.fixed.bottom-0,
		.sticky.bottom-0 {
			padding-bottom: env(safe-area-inset-bottom);
		}
	}
}

/* R3 — smoother momentum scrolling for message lists / overflow areas on touch devices. */
@media (pointer: coarse) {
	.overflow-y-auto,
	.overflow-auto,
	.overflow-y-scroll {
		-webkit-overflow-scrolling: touch;
	}
}

/* R4 — comfortable touch targets on phones. Icon buttons in OpenWebUI are often ~28-32px, which
   feels "dead" on touch (easy to miss). Give every button/link/role=button a 40px min hit area on
   coarse pointers, without changing the visual icon size. Also give a subtle tap highlight so a
   touch never feels ignored. */
@media (pointer: coarse) {
	button,
	a,
	[role='button'],
	summary,
	label[for],
	.cursor-pointer {
		min-height: 40px;
		min-width: 40px;
		-webkit-tap-highlight-color: rgba(99, 102, 241, 0.15);
	}
	/* Keep genuinely inline/tiny controls from being force-stretched (badges, chips, inline links
	   inside prose, and toolbar density toggles that opt out with data-compact). */
	button.inline,
	a.inline,
	.prose a,
	[data-compact] {
		min-height: 0;
		min-width: 0;
	}
	/* Slightly roomier composer send/attach row so it reads as tappable, not decorative. */
	#send-message-button {
		min-height: 44px;
		min-width: 44px;
	}
}

/* R4 — the chat scroll area should feel unified: no accidental horizontal scroll on mobile that
   makes the layout look broken, and content never hides under the fixed composer. */
@media (max-width: 768px) {
	html,
	body {
		overflow-x: hidden;
	}
}

/* A — respect the user's reduced-motion preference (vestibular accessibility): near-instant
   transitions/animations instead of movement. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* §5 fix: strip Tailwind prose's decorative "" quotation marks from blockquotes so callout cards
   (and our doc cards) read as clean cards, not quoted text. */
.prose blockquote p:first-of-type::before,
.prose blockquote p:last-of-type::after,
.prose blockquote p::before,
.prose blockquote p::after{ content:none !important; content:"" !important; }

/* §5 CRITICAL FIX: the live chat markdown container is .markdown-prose (NOT .prose) — the earlier
   §5 rules silently missed it. Re-target block styling + strip prose's decorative "" quotes so
   callout/doc-card blockquotes read as clean premium cards. */
.markdown-prose blockquote{ background:rgba(124,92,255,.05); border-left:3px solid rgba(124,92,255,.42); border-radius:0 10px 10px 0; padding:.55em .9em; margin:.7em 0; }
.markdown-prose blockquote p:first-of-type::before,
.markdown-prose blockquote p:last-of-type::after,
.markdown-prose blockquote p::before,
.markdown-prose blockquote p::after{ content:none !important; }
.markdown-prose ul>li::marker{ color:var(--rg-primary); }
.markdown-prose ol>li::marker{ color:var(--rg-primary); font-weight:650; }
.markdown-prose table tbody tr:nth-child(even){ background:rgba(125,125,125,.035); }
.markdown-prose table tbody tr:hover{ background:rgba(124,92,255,.06); }
.markdown-prose th,.markdown-prose td{ padding:7px 12px; }
.markdown-prose pre{ position:relative; }
.markdown-prose pre::after{ content:""; position:absolute; inset:0 0 auto 0; height:2px; border-radius:14px 14px 0 0; background:linear-gradient(90deg,var(--rg-primary),var(--rg-accent)); opacity:.45; pointer-events:none; }
.markdown-prose img{ background:rgba(125,125,125,.06); border-radius:var(--rg-radius); }

/* ══════════════════════════════════════════════════════════════════════════════════
   RAFAYGEN MOBILE SHELL v2 (≤768px) — safe-area, header, composer, popovers, polish
   Fixes header-bleed, notch, title ellipsis, oversized toggles, action row density,
   dynamic viewport. Overrides the earlier §20 block (later rules win). 2026-07-12
   ══════════════════════════════════════════════════════════════════════════════════ */
:root{ --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); }

@media (max-width:768px){
  /* (#2) dynamic viewport — stop relying on 100vh (Safari address-bar jump) */
  .h-screen{ height:100svh; height:100dvh !important; }

  /* (#6) UNDO the over-broad tap-target rule that inflated Switch toggles into blobs */
  [role="switch"]{ min-height:0 !important; }
  button:has(> [role="switch"]), [role="switch"]{ min-height:0 !important; }

  /* (#1)(#2)(#3) HEADER: opaque blurred band so response text can't bleed through the
     title, and notch-safe top padding. The soft fade gradient was the bleed source. */
  nav.sticky.top-0{
    padding-top:max(var(--safe-top),6px) !important;
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:saturate(150%) blur(14px); backdrop-filter:saturate(150%) blur(14px);
  }
  html.dark nav.sticky.top-0, .dark nav.sticky.top-0{ background:rgba(9,9,11,.97); }
  #navbar-bg-gradient-to-b{ display:none !important; }

  /* (#3) title button truncates cleanly with ellipsis; leaves room for + and icons */
  #model-selector-0-button{ min-width:0 !important; max-width:50vw !important; }
  #model-selector-0-button *{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  nav .flex-none svg{ width:20px; height:20px; }

  /* (#7) response action row — uniform icon size, spacing, hit-area, opacity */
  .buttons{ gap:1px !important; align-items:center !important; }
  .buttons > *{ display:flex; align-items:center; }
  .buttons button{ min-height:0 !important; padding:6px !important; opacity:.68; border-radius:9px; }
  .buttons button:hover{ opacity:1; background:rgba(125,125,135,.12); }
  .buttons button svg{ width:17px !important; height:17px !important; }

  /* (#5)(#6) tool popover (Integrations / + menu) — clamp, safe-area bottom, compact rows */
  [role="menu"], [data-radix-menu-content], .dropdown-content{
    max-width:min(92vw,300px) !important; max-height:56vh !important; overflow-y:auto;
    padding-bottom:calc(6px + var(--safe-bottom)) !important;
  }

  /* (#4)(#9) composer — reserve home-indicator (safe-area) space so it isn't flush */
  #message-input-container, #chat-input-container{ padding-bottom:var(--safe-bottom) !important; }
}

/* (#8) Follow-up suggestions — compact + capped so they don't dominate the viewport.
   Desktop keeps the full list; mobile shows a tight, chip-like 3-max set. */
.rg-followups{ margin-top:.85rem !important; }
.rg-followups-list{ gap:0 !important; }
.rg-followups-list hr{ display:none !important; }              /* drop separators for density */
.rg-followups-list button{ padding-top:6px !important; padding-bottom:6px !important; }
@media (max-width:768px){
  .rg-followups-list button{ font-size:13.5px; }
  /* cap to 3 items: children interleave as tooltip,hr,tooltip,hr,tooltip,hr,… so the 3rd
     tooltip sits at child 5 — hide from child 6 onward to keep exactly 3 suggestions. */
  .rg-followups-list > *:nth-child(n+6){ display:none !important; }
}