/* ============================================
   WHISPR — ChatGPT-inspired Light Theme (Base)
   ============================================ */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* Light theme tokens */
  --bg-primary:       #ffffff;
  --bg-secondary:     #f5f5f5;
  --bg-tertiary:      #e8e8e8;
  --bg-input:         #f0f0f0;
  --bg-hover:         #0000000a;

  --text-primary:     #1a1a1a;
  --text-secondary:   #6b6b6b;
  --text-tertiary:    #999999;

  --accent:           #10a37f;
  --accent-dim:       #0d8c6d;
  --accent-light:     #10a37f14;

  --bubble-out:       #10a37f;
  --bubble-in:        #f0f0f0;

  --separator:        #e0e0e0;
  --border:           #e0e0e0;
  --badge:            #10a37f;
  --badge-text:       #ffffff;

  --surface-elevated: #ffffff;
  --surface-overlay:  #00000040;

  --radius-sm:        8px;
  --radius-md:        12px;
  --radius-lg:        16px;
  --radius-xl:        24px;

  --shadow-sm:        0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:        0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:        0 8px 24px rgba(0,0,0,0.12);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

.safe-top { padding-top: var(--sat); }
.safe-bottom { padding-bottom: var(--sab); }
.safe-all {
  padding-top: var(--sat);
  padding-bottom: var(--sab);
  padding-left: var(--sal);
  padding-right: var(--sar);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }