/* Root variables (light & dark themes) */
:root {
  --input-bg-rgb: 255, 255, 255;   /* matches #E9EDF6 */
--app-bg-rgb: 250, 250, 250;     /* matches #FAFAFA */
  --ms1-bg: #eeeeee;
  --table-bg1:#e7eaec;
  --table-bg2: transparent;
  
  --app-bg: #FAFAFA;
  --ms3-bg: #ffffff;
  --txt1: #101417;
  --txt2: #000000;
  --input-bg1: #E9EDF6;
  --input-bg2: #E9EDF6;
  --inputboxmodel: #F2F2F2;
  --buttonactive: #e5e5e5;
  --input-border-color: rgba(249, 249, 249);
  --primary: #0B57CF; /* send button color */
  --primary-dark: #0e5cbf;
  --primary-light: #e7f3ff;
  --secondary: #34c759;
  --secondary-dark: #2aa44c;
  --accent: #ff9500;
  --accent-dark: #e67e00;
  --text-primary: #1c1c1e;
  --text-secondary: #606770;
  --text-tertiary: #8e8e93;
  --bg-primary: #F8F8F6;
  --bg-secondary: linear-gradient(135deg, #E3F2FD, #eaf5f8);
  --bg-tertiary: #C9E1E8;
  --bg-backbtn: linear-gradient(135deg, #E3F2FD, #e8f5e8);
  --card-bg: linear-gradient(135deg, #E3F2FD, #E8F5E8);
  --tool-bg: linear-gradient(135deg, #E0f6FD, #E5F5E8);
  --blog-bg: linear-gradient(135deg, #E3F2FD, #E8F5E8);
  --footer-bg: #f77e2d;
  --modal-bg: linear-gradient(135deg, #e3f2fe, #e8f8ee);
  --modalbc-bg: rgba(0, 0, 0, 0.6);
  --legal-bg: #f5f5f5;
  --header-bg: rgba(250, 250, 250, 0.70);
  --shadow-sm: 0 10px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-2xl: 28px;
  --message-gap: 2.25rem;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --header-height: 60px;
  --highlight: #111827;
  --highlight-glow: rgba(94, 159, 255, 0.5);
  --text-light: rgba(255, 255, 255, 0.9);
  --important-text: #fd8104;
  --underline-color: #ff66b2;
  --light-grey: rgba(200, 200, 210, 0.1);
  --soft-blue: rgba(100, 150, 255, 0.15);
  --body-bg: var(--bg-dark);
  --glass-bg: linear-gradient(135deg, #0f172a, #1e293f);
  --input-bg: rgba(40, 40, 70, 0.7);
  --input-border: rgba(255, 255, 255, 0.08);
  --shadow-color: rgba(255, 255, 255, 0.2);
  --planet-shadow: rgba(255, 255, 255, 0.2);
  --loading-color: #5e9fff;
  --color1: #292929;
}

[data-theme="dark"] {
  --input-bg-rgb: 33, 33, 33;      /* matches #212121 */
  --app-bg-rgb: 0, 0, 0;           /* matches #000000 */
  --ms1-bg: #202221;
  --app-bg: #000000;
  --ms3-bg: #000000;
  --txt1: #D9D9D9;
  --txt2: #000000;
  --table-bg1: #1e1e1e;
  --table-bg2: transparent;
  --input-bg1: #212121;
  --input-bg2: #212121;
  --input-border-color: rgba(255, 255, 255, 0.15);
  --inputboxmodel: #2D2D2D;
  --buttonactive: #202020;
  --text-primary: #e4e6eb;
  --text-secondary: #b0b3b8;
  --text-tertiary: #8a8d91;
  --bg-primary: #000000;
  --bg-secondary: #000000;
  --bg-tertiary: #242526;
  --bg-backbtn: #2e3237;
  --card-bg: #1e1e1e;
  --tool-bg: linear-gradient(180deg, #1e1e1e, #100e14);
  --blog-bg: linear-gradient(135deg, #0f172a, #1e293f);
  --footer-bg: #0B0F12;
  --modal-bg: linear-gradient(135deg, #1e1e1e, #1e1e1e);
  --modalbc-bg: #000000, 0.2;
  --legal-bg: #000000;
  --header-bg: rgba(0, 0, 0, 0.70);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.35);
  --bg-dark: #000000;
  --highlight: #E8EAED;
  --highlight-glow: rgba(94, 159, 255, 0.5);
  --text-light: rgba(255, 255, 255, 0.9);
  --important-text: #ffcc00;
  --underline-color: #ff66b2;
  --light-grey: rgba(200, 200, 210, 0.1);
  --soft-blue: rgba(100, 150, 255, 0.15);
  --body-bg: var(--bg-dark);
  --glass-bg: rgba(255, 255, 255, 0.056);
  --input-bg: rgba(40, 40, 70, 0.7);
  --input-border: rgba(255, 255, 255, 0.08);
  --shadow-color: rgba(255, 255, 255, 0.065);
  --planet-shadow: rgba(255, 255, 255, 0.2);
  --loading-color: #5e9fff;
}

/* Base reset & app shell */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  overscroll-behavior: none; /* Stops iPhone rubber-band bouncing */
  touch-action: pan-x pan-y;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--app-bg);
  color: var(--text-primary);
  height: 100dvh; /* Dynamic viewport height specifically for iOS Safari */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-text-size-adjust: none;
}

.app {
  width: 100%;
  max-width: var(--max-width);
  
  /* Now responds to JS --app-height, falls back to 100dvh */
  height: var(--app-height, 100dvh);
  
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* ——— HIDE ALL SCROLLBARS (GLOBAL) ——— */
*,
*::before,
*::after {
  scrollbar-width: none !important;        /* Firefox */
  -ms-overflow-style: none !important;     /* IE/Edge */
}

*::-webkit-scrollbar,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb {
  display: none !important;                /* Chrome, Safari, iOS, PWA */
  width: 0 !important;
  height: 0 !important;
}

/* ========================================================
   PREMIUM THEME TRANSITION (Calming & Fluidic)
======================================================== */

/* 1. Native View Transitions (Modern Phones & Desktop) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Safe Fallback for Older Browsers */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition:
    background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    color            0.6s cubic-bezier(0.4, 0, 0.2, 1),
    border-color     0.6s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow       0.6s cubic-bezier(0.4, 0, 0.2, 1),
    fill             0.6s cubic-bezier(0.4, 0, 0.2, 1),
    stroke           0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}