/* ═══════════════════════════════════════════════════
   PULSE — Design Tokens & Base Reset
   ═══════════════════════════════════════════════════ */

:root {
  /* Background layers */
  --bg0:#04040a;--bg1:#07070f;--bg2:#0c0c18;--bg3:#10101e;--bg4:#161626;--bg5:#1e1e30;
  /* Borders */
  --border:#181830;--border2:#222238;--border3:#303050;
  /* Amber palette */
  --amber:#f5a623;--amber2:#ffc055;--amber3:rgba(245,166,35,.14);--amber4:rgba(245,166,35,.06);
  --amber-glow:0 0 30px rgba(245,166,35,.18);
  /* Semantic colors */
  --green:#1de9b6;--green2:rgba(29,233,182,.12);
  --red:#ff4757;--red2:rgba(255,71,87,.12);
  --blue:#54d4fa;--blue2:rgba(84,212,250,.1);
  --purple:#c97bff;--orange:#ff8c42;--cyan:#00e5ff;
  /* Text */
  --text:#eeeeff;--text2:#8888aa;--text3:#44446a;--text4:#22223a;
  /* Method colors */
  --m-get:#1de9b6;--m-post:#54d4fa;--m-put:#f5a623;
  --m-patch:#c97bff;--m-delete:#ff4757;--m-head:#8888aa;
  /* Fonts */
  --font:'Syne',sans-serif;--mono:'JetBrains Mono',monospace;
  /* Radii */
  --r:5px;--r2:8px;--r3:12px;
  /* Layout */
  --lp:268px;--hh:52px;
  /* Shadows */
  --shadow:0 4px 24px rgba(0,0,0,.6);--shadow-lg:0 12px 48px rgba(0,0,0,.8);
}

/* ═══ BASE RESET ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;font-family:var(--font);background:var(--bg0);color:var(--text);-webkit-font-smoothing:antialiased;}
button{font-family:var(--font);cursor:pointer;border:none;outline:none;}
input,select,textarea{font-family:var(--mono);outline:none;border:none;background:none;color:var(--text);}
::selection{background:rgba(245,166,35,.22);color:var(--amber2);}

/* ═══ SCROLLBARS ═══ */
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
::-webkit-scrollbar-thumb:hover{background:var(--border3);}

/* Scanline texture overlay */
body::before{
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);
  pointer-events:none;z-index:9998;
}

/* Drag active state */
body.dragging{cursor:col-resize!important;}
body.dragging *{user-select:none!important;}

/* ═════════════════════════════════════════════════
   RESPONSIVE MEDIA QUERIES
   ═════════════════════════════════════════════════ */

/* Mobile devices: up to 768px */
@media (max-width: 768px) {
  :root {
    --lp: 0px;
    --hh: 48px;
  }

  /* Adjust text sizes for smaller screens */
  html {
    font-size: 14px;
  }
}

/* Small mobile devices: up to 480px */
@media (max-width: 480px) {
  :root {
    --hh: 44px;
  }

  html {
    font-size: 13px;
  }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects on touch devices */
  .hbtn:hover {
    background: var(--bg3);
    border-color: var(--border2);
  }

  .send-btn:hover {
    transform: none;
  }

  * {
    -webkit-tap-highlight-color: transparent;
  }
}