/* CHATGAIYA - Global Retro Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=VT323&family=Silkscreen&display=swap');

:root {
  --bg-desktop: #2c3a47;
  --retro-gray: #c3c7cb;
  --retro-dark: #1e272e;
  --retro-darker: #0d1117;
  --retro-light: #ffffff;
  --retro-blue: #000080;
  --retro-blue-light: #1084d0;
  --retro-accent: #ff4757;
  --retro-gold: #ffa502;
  --retro-green: #2ed573;
  --retro-border-light: #ffffff;
  --retro-border-dark: #808080;
  --retro-border-black: #000000;
  --font-retro: 'VT323', monospace;
  --font-pixel: 'Silkscreen', monospace;
  --font-mono: 'Courier Prime', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none !important;
  background-color: #000000;
  font-family: var(--font-retro);
  font-size: 18px;
  color: #111111;
  cursor: url('../Assets/Cursor/2X/Cursor_Arrow_Light.png'), auto;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-touch-callout: none;
}

input, textarea, button {
  font-family: inherit;
}

button {
  cursor: url('../Assets/Cursor/2X/Cursor_Arrow_Light.png'), pointer;
}

input, textarea {
  cursor: url('../Assets/Cursor/2X/Cursor_Text_Light.png'), text;
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* Crisp pixel rendering */
img, canvas, .pixel-art {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* CRT Overlay Effect - Disabled to ensure crisp, readable text */
#crt-overlay {
  display: none !important;
  pointer-events: none;
}

/* 16:9 Screen Wrapper on large desktop screens; auto-fills on mobile phones */
.screen-wrapper {
  width: 90vw;
  height: calc(90vw * 9 / 16);
  max-height: 88vh;
  max-width: calc(88vh * 16 / 9);
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-desktop);
  border: 3px solid #1a2228;
  border-radius: 4px;
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.95), 0 0 0 1px #2f3a44;
}

/* Mobile & Touchscreen Fullscreen Viewport Mode (Portrait & Landscape) */
@media (max-width: 820px), (max-height: 600px), (pointer: coarse) {
  html, body {
    width: 100vw;
    height: 100%;
    height: 100dvh;
    padding: 0;
    margin: 0;
    cursor: auto;
    position: fixed;
    inset: 0;
    overflow: hidden;
    overscroll-behavior: none !important;
    touch-action: manipulation;
  }

  .screen-wrapper {
    width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    aspect-ratio: unset !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  button, .retro-btn, .choice-bubble-btn, .desktop-icon, .win-btn, .contact-item, .start-btn, .taskbar-tab, .tray-icon-btn, .login-hint {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  input, textarea {
    font-size: 16px !important; /* Prevents auto-zoom in iOS Safari */
  }
}


/* Hardware Acceleration & Smooth Scrolling */
.screen, .retro-window, .login-dialog, #videocall-overlay {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.chat-messages, .contacts-list, .window-body, .window-inner-frame, .memories-grid, #trash-list, .desktop-workspace {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Glitch animation */
@keyframes screen-glitch {
  0% { transform: translate(0) }
  20% { transform: translate(-3px, 2px) skewX(1deg) }
  40% { transform: translate(-2px, -2px) skewX(-1deg) }
  60% { transform: translate(3px, 1px) }
  80% { transform: translate(1px, -2px) }
  100% { transform: translate(0) }
}

.glitching {
  animation: screen-glitch 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  filter: contrast(140%) hue-rotate(90deg);
}

/* Retro Bevel Utilities */
.retro-bevel-out {
  border-top: 2px solid var(--retro-border-light);
  border-left: 2px solid var(--retro-border-light);
  border-right: 2px solid var(--retro-border-black);
  border-bottom: 2px solid var(--retro-border-black);
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
  background-color: var(--retro-gray);
}

.retro-bevel-in {
  border-top: 2px solid var(--retro-border-black);
  border-left: 2px solid var(--retro-border-black);
  border-right: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-light);
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
  background-color: #ffffff;
}

#screen-warning {
  display: none !important;
}