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

@layer base {
  body {
    @apply font-sans text-[#1c1a0d] bg-background-light dark:bg-background-dark transition-colors;
  }

  b,
  strong {
    @apply font-bold;
  }

  i,
  em {
    @apply italic;
  }

  del {
    @apply line-through;
  }
}

@layer components {
  .iphone-frame {
    @apply relative bg-[#1c1a0d] rounded-[3rem] p-3 shadow-2xl border-[8px] border-gray-800 overflow-hidden;
    box-shadow: 0 0 0 4px #333, 0 30px 60px rgba(0, 0, 0, 0.3);
  }

  .chat-bubble-bot {
    @apply rounded-lg rounded-bl-none shadow-sm;
  }

  .chat-bubble-user {
    @apply rounded-lg rounded-br-none shadow-sm;
  }

  .chat-container {
    background-color: #e5ddd5;
    background-image: url(https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png);
    background-blend-mode: overlay;
    background-repeat: repeat;
  }

  .message-shadow {
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  }

  .bot-bubble::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #fff transparent transparent;
  }

  .user-bubble::before {
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: #dcf8c6 transparent transparent transparent;
  }

  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }

  .material-symbols-outlined.fill {
    font-variation-settings: 'FILL' 1;
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-[#e8e4ce] dark:bg-[#3a3620] rounded-full;
  }

  .glass-panel {
    @apply bg-white/80 dark:bg-surface-dark/80 backdrop-blur-md border border-gray-200 dark:border-white/10;
  }
}