/*
  styles.css
  Custom styles that Tailwind cannot handle:
  - CSS custom properties (theme tokens)
  - Keyframe animations
  - Custom scrollbar
  - Google Fonts import
  Everything else is handled by Tailwind utility classes in index.html.
*/

/* ============================================================
   GOOGLE FONTS
   Inter for body text, JetBrains Mono for IDs / code
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES — Design tokens
   All colors MUST be referenced via these variables.
   Never hardcode hex values in Tailwind classes.
============================================================ */
:root {
  /* Typography */
  --font-body: 'Inter';
  --font-mono: 'JetBrains Mono';

  /* Background layers */
  --clr-bg:        #0d0d0f;   /* page background — deepest dark */
  --clr-surface:   #16161a;   /* card / panel background */
  --clr-surface-2: #1e1e24;   /* input fields, secondary surfaces */

  /* Text */
  --clr-primary:   #e8e8f0;   /* main text */
  --clr-muted:     #7878a0;   /* placeholder, labels, subtle text — #7878a0 achieves ≥4.5:1 contrast on surface */

  /* Brand / accent */
  --clr-accent:    #a78bfa;   /* purple ghost glow — primary CTA */
  --clr-secondary: #7c3aed;   /* darker purple for hover states */

  /* Semantic */
  --clr-success:   #4ade80;   /* connected indicator */
  --clr-danger:    #f87171;   /* error / disconnect */

  /* Misc */
  --radius-bubble: 1.25rem;   /* message bubble border radius */
  --transition:    150ms ease;
}

/* ============================================================
   BASE RESET ADDITIONS
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  /* Prevent text size inflation on mobile orientation change */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow: hidden; /* The #app container handles all scrolling internally */
  /* Exact-height layout: fills the viewport without scroll on the page level */
  height: 100vh;
}

/* Use dvh where supported — accounts for iOS Safari's dynamic bottom bar */
@supports (height: 100dvh) {
  body, #app {
    height: 100dvh;
  }
}

/* ============================================================
   CUSTOM SCROLLBAR
   Dark, thin, accent-colored thumb for the messages area
============================================================ */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--clr-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--clr-surface-2);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--clr-accent);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--clr-surface-2) var(--clr-surface);
}

/* ============================================================
   ANIMATIONS
============================================================ */

/* Ghost ID shimmer — shown while PeerJS is initializing */
@keyframes shimmer {
  0%   { opacity: 0.4; }
  50%  { opacity: 1;   }
  100% { opacity: 0.4; }
}

.animate-shimmer {
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Fade-in for screens / messages */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.animate-fade-in {
  animation: fadeIn 200ms ease forwards;
}

/* Slide-up for toast notifications */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes slideDown {
  from { opacity: 1; transform: translateY(0);    }
  to   { opacity: 0; transform: translateY(12px); }
}

.toast-enter {
  animation: slideUp 200ms ease forwards;
}

.toast-exit {
  animation: slideDown 200ms ease forwards;
}

/* Pulse for connecting state spinner */
@keyframes ghostPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.15); opacity: 0.6; }
}

.animate-ghost-pulse {
  animation: ghostPulse 1.2s ease-in-out infinite;
}

/* ============================================================
   MESSAGE BUBBLES
   Tailwind handles most styles; these rules cover the
   bubble "tail" pointer which Tailwind cannot do.
============================================================ */

/* Sent bubble (right side) */
.bubble-sent {
  border-radius: var(--radius-bubble) var(--radius-bubble) 4px var(--radius-bubble);
}

/* Received bubble (left side) */
.bubble-received {
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 4px;
}

/* ============================================================
   EMPTY STATE — Floating ghost SVG in the chat screen
   The SVG uses CSS vars for fill so it respects theming.
   The float animation reuses ghostFloat defined above.
============================================================ */
#empty-state svg {
  animation: ghostFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.25));
}

/* ============================================================
   MODAL — Add Contact
   Mobile: slides up from the bottom (bottom sheet).
   Desktop (md+): fades in at centre (handled by flex alignment in HTML).
============================================================ */

@keyframes slideUpModal {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes fadeInModal {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Applied to the modal card when the modal opens */
.modal-card.modal-enter {
  animation: slideUpModal 250ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

@media (min-width: 768px) {
  .modal-card.modal-enter {
    animation: fadeInModal 180ms ease forwards;
  }
}

/* ============================================================
   CONTACT ROWS (WhatsApp / Telegram style)
   Each row is the full width of the sidebar panel.
   The entire row is the click target for connecting.
============================================================ */
.contact-item {
  /* Smooth background + border transitions on hover/active */
  transition: background-color 120ms ease;
  cursor: pointer;
  border-left: 3px solid transparent; /* placeholder for active indicator */
}

.contact-item:hover {
  background-color: var(--clr-surface-2);
}

/* Active / selected conversation (highlighted like Telegram) */
.contact-item.contact-active {
  background-color: rgba(167, 139, 250, 0.10);
  border-left-color: var(--clr-accent);
}

/* Delete button: hidden normally, revealed on row hover/focus-within */
.contact-item .contact-delete {
  opacity: 0;
  transition: opacity 150ms ease;
}

.contact-item:hover .contact-delete,
.contact-item:focus-within .contact-delete {
  opacity: 1;
}

/* ============================================================
   CONTACT AVATAR CIRCLE
   Reused for both the sidebar rows and the chat header.
============================================================ */
.avatar-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgba(167, 139, 250, 0.15);
  color: var(--clr-accent);
  font-weight: 700;
  text-transform: uppercase;
  user-select: none;
  flex-shrink: 0;
}

:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

/* ============================================================
   BUBBLE MAX-WIDTH — responsive cap on message bubble column.
   75% on mobile (comfortable single-handed reading),
   60% on md+ so long messages don't span the full width.
============================================================ */
.bubble-max-w {
  max-width: 75%;
}

@media (min-width: 768px) {
  .bubble-max-w {
    max-width: 60%;
  }
}

/* ============================================================
   IOS SAFE AREA — chat input footer
   Adds bottom padding for devices with a home bar
   (iPhone X+) using env() safe-area insets.
============================================================ */
#screen-chat footer {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}



/* ============================================================
   LEFT PANEL (contacts) — subtle radial glow behind the list
   Mirrors the old home screen glow, now scoped to the sidebar.
============================================================ */
#panel-contacts {
  position: relative;
  isolation: isolate;
}

#panel-contacts::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 40% at 50% 20%,
    rgba(167, 139, 250, 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

/* ============================================================
   GHOST LOGO — Floating animation on the home screen icon
============================================================ */
@keyframes ghostFloat {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-8px); }
}

.animate-ghost-float {
  animation: ghostFloat 3s ease-in-out infinite;
  display: inline-block;
}

/* ============================================================
   ACCENT GLOW — Applied to the accent CTA button
   Subtle box-shadow using the accent color variable
============================================================ */
.glow-accent {
  box-shadow: 0 0 18px rgba(167, 139, 250, 0.35);
}

.glow-accent:hover {
  box-shadow: 0 0 28px rgba(167, 139, 250, 0.50);
}

/* ============================================================
   CARD HOVER — Subtle lift on surface cards (modal, ID card)
============================================================ */
.card-hover {
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   CONNECTION DOT STATES
   The dot in the chat header changes color based on state.
============================================================ */
.dot-connected    { background-color: var(--clr-success); }
.dot-disconnected { background-color: var(--clr-danger);  }
.dot-connecting   { background-color: #facc15; /* amber */ animation: ghostPulse 1s ease-in-out infinite; }