src/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.75rem;

    /* Light Theme Breathing Background */
    --light-bg1: 200 100% 98%;
    --light-bg2: 195 100% 97%;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 210 40% 98%;
    --card: 224 71% 10%;
    --card-foreground: 210 40% 98%;
    --popover: 224 71% 4%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 90% 60%;
    --primary-foreground: 210 40% 9.8%;
    --secondary: 217 33% 17%;
    --secondary-foreground: 210 40% 98%;
    --muted: 224 71% 10%;
    --muted-foreground: 215 20% 65%;
    --accent: 217 33% 22%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;
    --border: 217 33% 17%;
    --input: 217 33% 22%;
    --ring: 210 90% 60%;

    /* Dark Theme Breathing Background */
    --dark-bg1: 225 30% 12%;
    --dark-bg2: 240 20% 10%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    transition: background 1.2s ease-in-out, color 1.2s ease-in-out;
    overflow: hidden;
  }
  
  .font-body {
      font-family: 'Tajawal', sans-serif;
  }

  .font-casual-body {
      font-family: 'Marhey', cursive;
  }

  mark.search-highlight {
      @apply bg-yellow-300 dark:bg-yellow-500 text-black rounded-sm px-0.5;
  }

}

.message-anim {
    animation: fadeIn 1s ease forwards;
    opacity: 0;
    transform: translateY(15px);
}
@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
}


.disintegrating {
  animation: disintegrate 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes disintegrate {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.9) rotateZ(-5deg); opacity: 0; }
}


.bubble-sent {
    @apply rounded-3xl rounded-br-lg;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.8));
    color: hsl(var(--primary-foreground));
}

.bubble-received {
    @apply rounded-3xl rounded-bl-lg;
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border: 1px solid hsl(var(--border));
}


.bubble-content {
    @apply rounded-2xl shadow-md;
    padding: 12px 16px;
    line-height: 1.5;
}


/* Typing Indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
}
.typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: hsl(var(--muted-foreground));
    animation: bounce 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

/* Reactions */
.reactions-container {
    display: flex;
    gap: 2px;
}
.reactions-container.justify-end { justify-content: flex-end; }
.reactions-container.justify-start { justify-content: flex-start; }

.reaction-item {
    @apply bg-card/80 backdrop-blur-sm border border-border rounded-full flex items-center justify-center shadow-sm;
    min-width: 24px;
    height: 24px;
    padding-left: 4px;
    padding-right: 4px;
    animation: pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.reaction-item .emoji {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    vertical-align: middle;
}
.reaction-item span {
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
}
.reaction-pulse-anim {
    animation: pulse-reaction 0.3s ease-out;
}
@keyframes pulse-reaction {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.4); }
}
.reaction-picker {
    @apply bg-card/80 backdrop-blur-md rounded-full shadow-lg border border-border;
    animation: popIn 0.2s ease-out forwards;
}


/* Rich Content Editable Input & Message Bubble Emojis */
.rich-input-editor .emoji, .bubble-content .emoji, .whitespace-pre-wrap .emoji {
    @apply inline-block align-bottom w-5 h-5 mx-0.5;
}
.rich-input-container {
    @apply w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background;
}
.rich-input-editor {
    @apply min-h-[40px] max-h-28 overflow-y-auto focus:outline-none;
}
.rich-input-editor:empty::before {
    content: attr(data-placeholder);
    @apply text-muted-foreground cursor-text;
}

/* Quoted Message */
.reply-bar-enter { opacity: 0; transform: translateY(-10px); }
.reply-bar-enter-active { opacity: 1; transform: translateY(0); transition: all 200ms ease-out; }
.reply-bar-exit { opacity: 1; transform: translateY(0); }
.reply-bar-exit-active { opacity: 0; transform: translateY(-10px); transition: all 200ms ease-in; }

/* Voice Recorder */
.voice-recorder-bar {
    @apply flex items-center p-2 md:p-4 border-t bg-background/80 backdrop-blur-sm w-full gap-2;
}
.voice-bubble-sent, .voice-bubble-received {
  @apply flex items-center gap-2 p-2 rounded-full;
  min-width: 200px;
}
.voice-bubble-sent { @apply bg-primary; }
.voice-bubble-received { @apply bg-card; }
.voice-bubble-sent .play-btn-style { @apply bg-primary-foreground text-primary; }
.voice-bubble-received .play-btn-style { @apply bg-secondary text-secondary-foreground; }
.voice-bubble-sent .duration-style { @apply text-primary-foreground/80; }
.voice-bubble-received .duration-style { @apply text-muted-foreground; }
.play-btn-style {
  @apply h-8 w-8 rounded-full flex items-center justify-center flex-shrink-0;
}
.duration-style {
  @apply text-xs font-mono;
}
.voice-bubble-sent canvas, .voice-bubble-received canvas {
  @apply w-full h-8 flex-1;
}

/* Scrollbar */
.chat-container::-webkit-scrollbar { width: 8px; }
.chat-container::-webkit-scrollbar-track { background: transparent; }
.chat-container::-webkit-scrollbar-thumb { background-color: hsl(var(--border)); border-radius: 20px; border: 2px solid hsl(var(--background)); }

/* General Animations */
.scaleIn { animation: scaleIn 0.2s ease-out; }
@keyframes scaleIn {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.group-info-anim {
    animation: slideInRight 0.3s ease-out;
}
@keyframes slideInRight {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

/* Breathing Gradient Background */
.chat-window-background {
  @apply absolute inset-0 overflow-hidden -z-10;
}
.chat-window-background::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, hsl(var(--light-bg1)), hsl(var(--light-bg2)));
  background-size: 200% 200%;
  animation: breathe 12s ease-in-out infinite alternate;
  transition: 1.2s ease-in-out;
}
.dark .chat-window-background::before {
  background: linear-gradient(135deg, hsl(var(--dark-bg1)), hsl(var(--dark-bg2)));
}
@keyframes breathe {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* AI World Feed Animations */
.animate-fly-up {
  animation: fly-up cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  opacity: 0;
}

@keyframes fly-up {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { opacity: 1; transform: scale(1.1); }
    100% { transform: translateY(-80px) scale(0.5); opacity: 0; }
}

.animate-fade-in {
    animation: fade-in 0.5s ease-out forwards;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in-slide-up {
    animation: fade-in-slide-up 0.5s ease-out forwards;
    opacity: 0; /* Start hidden */
}

@keyframes fade-in-slide-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.btn-gradient {
    @apply bg-gradient-to-r from-sky-500 to-cyan-400 text-white font-bold;
}
.dark .btn-gradient {
    @apply from-sky-600 to-cyan-500;
}
.emoji-picker-container {
    height: 350px; /* Adjust as needed */
    overflow: hidden;
}

em-emoji-picker {
    width: 100%;
    height: 100%;
}

@keyframes popIn {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Info Bubbles for Onboarding */
.info-bubble {
    @apply absolute bg-primary text-primary-foreground text-xs font-semibold px-3 py-1 rounded-full shadow-lg border-2 border-background dark:border-card;
    animation-name: fly-out-from-title;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes fly-out-from-title {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }
    30% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: var(--transform-end) scale(1.1);
        opacity: 0;
    }
}


/* Positioning for each bubble */
.info-bubble:nth-of-type(1) { --transform-end: translate(-30px, -60px); animation-duration: 12s; animation-delay: 0s; }
.info-bubble:nth-of-type(2) { --transform-end: translate(30px, -60px); animation-duration: 14s; animation-delay: 2s; }
.info-bubble:nth-of-type(3) { --transform-end: translate(-45px, -80px); animation-duration: 11s; animation-delay: 5s; }
.info-bubble:nth-of-type(4) { --transform-end: translate(45px, -80px); animation-duration: 13s; animation-delay: 7s; }

/* Status Emoji Animation */
.status-emoji {
    position: absolute;
    bottom: -20%;
    opacity: 0;
    animation-name: float-up;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}

@keyframes float-up {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-120vh) translateX(calc(sin(var(--animation-duration) * 0.5) * 50px)) rotate(360deg);
        opacity: 0;
    }
}