/* Taskpane base styles */
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family:
    Geist,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
}

#tridentmessage {
  display: none;
  padding: 10px;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

@keyframes arrowPulse {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.15);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

.scroll-arrow-pulse {
  animation: arrowPulse 2s ease-in-out infinite;
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(16px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.message-enter {
  animation: slideInFromBottom 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hide scrollbar for thinking block content */
.thinking-content::-webkit-scrollbar {
  display: none;
}

/* Mode selector roll animations */
@keyframes modeRollOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(8px);
    opacity: 0;
  }
}

@keyframes modeRollIn {
  0% {
    transform: translateY(-8px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.mode-roll-out {
  animation: modeRollOut 0.15s ease-in forwards;
}

.mode-roll-in {
  animation: modeRollIn 0.15s ease-out forwards;
}

@keyframes fade-in-name {
  0% {
    opacity: 0;
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.thread-name-enter {
  animation: fade-in-name 0.4s ease-out forwards;
}

@keyframes welcomeFadeIn {
  from {
    opacity: 0;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes chat-input-separator-pulse {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  55% {
    transform: translateX(220%);
    opacity: 0;
  }

  100% {
    transform: translateX(220%);
    opacity: 0;
  }
}

@font-face {
  font-family: 'Geist';
  src: url(/b491726cdcc9fcf797b1.woff2) format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url(/185c80ac95ecbe03570b.woff2)
    format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================
   BASE TYPOGRAPHY SETTINGS
   ========================================== */
body {
  letter-spacing: 0.01em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

code,
pre,
[class*='mono'] {
  letter-spacing: 0.005em;
  font-weight: 400;
}

/* ==========================================
   GEIST WEIGHT SYSTEM
   Based on official Geist typography guidelines
   ========================================== */

/* Regular (400) - Body text, chat messages, long-form content */
p {
  font-weight: 400;
  line-height: 1.5;
}

/* Span elements - inherit parent weight for inline text */
span {
  font-weight: inherit;
}

/* Medium (500) - Emphasized text, labels, buttons, UI elements */
button,
label,
[class*='button'],
[class*='Button'],
input,
textarea {
  font-weight: 500;
}

/* SemiBold (600) - Subheadings, section titles, sender labels */
h3,
h4,
h5,
h6,
[class*='sender'],
[class*='Sender'] {
  font-weight: 600;
}

/* Bold (700) - Primary headings, main titles */
h1,
h2 {
  font-weight: 600;
}

/* ==========================================
   CHAT-SPECIFIC TYPOGRAPHY
   ========================================== */

/* Chat messages - optimal readability */
[class*='message'] p,
[class*='Message'] p,
[class*='messageContent'] {
  font-weight: 450;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Timestamps - subtle, lightweight */
[class*='timestamp'],
[class*='Timestamp'] {
  font-weight: 400;
}

/* Predictions/suggestions - clear and readable */
[class*='prediction'],
[class*='Prediction'],
[class*='suggestion'],
[class*='Suggestion'] {
  font-weight: 400;
}

/* Strong emphasis within messages */
strong,
b {
  font-weight: 600;
}