/* Root-level styles for .claude-conversation to mimic Claude.ai's body/html */
.claude-conversation {
  /* Background - use bg-100 for Claude's warm off-white */
  background-color: hsl(var(--bg-100));
  color: hsl(var(--text-100));

  /* Font settings */
  font-family: var(--font-ui);
  line-height: 1.5;

  /* Text alignment - override global justify */
  text-align: left;

  /* Make it fill available space */
  min-height: 400px;

  /* Add padding for spacing */
  padding: 2rem;

  /* Rounded corners */
  border-radius: 0.75rem;

  /* Smooth scrolling */
  scroll-behavior: smooth;

  /* Anti-aliasing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Font utility classes that map CSS variables to font-family */
.claude-conversation .font-claude-response {
  font-family: var(--font-claude-response);
}

.claude-conversation .font-claude-response-body {
  font-family: var(--font-claude-response);
}

.claude-conversation .font-user-message {
  font-family: var(--font-user-message);
}

/* Override global text justification */
.claude-conversation p {
  text-align: left;
}

.claude-conversation div {
  text-align: left;
}

/* Make the conversation header sticky with feathering effect */
.claude-conversation .conversation-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: hsl(var(--bg-100));
}

.claude-conversation .conversation-header::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom, hsl(var(--bg-100)), transparent);
  pointer-events: none;
}

/* Disable sticky header in Twitter's in-app browser (causes rendering issues) */
.twitter-browser .claude-conversation .conversation-header {
  position: relative;
}

.twitter-browser .claude-conversation .conversation-header::after {
  display: none;
}

/* Reduce padding on small screens */
@media (max-width: 640px) {
  .claude-conversation {
    padding: 0.5rem;
  }

  /* Reduce header padding on small screens */
  .claude-conversation .conversation-header {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .claude-conversation .conversation-header > div:first-child {
    padding-right: 0 !important;
  }

  /* Fade out long titles - uses wrapper structure so gradient only appears at overflow */
  .claude-conversation .conversation-header button[data-testid="chat-title-button"] {
    max-width: 70vw;
    overflow: hidden;
    position: relative;
  }

  /* Gradient at the clip point - behind the content */
  .claude-conversation .conversation-header button[data-testid="chat-title-button"]::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3rem;
    background: linear-gradient(to right, transparent, hsl(var(--bg-100)));
    pointer-events: none;
    z-index: 0;
  }

  /* Inner wrapper covers the gradient when content fits, reveals it when overflowing */
  .claude-conversation .conversation-header button[data-testid="chat-title-button"] > div {
    display: flex;
    width: max-content;
    background: hsl(var(--bg-100));
    position: relative;
    z-index: 1;
    padding-right: 0.5rem;
  }

  /* Remove default truncation */
  .claude-conversation .conversation-header button[data-testid="chat-title-button"] .truncate {
    overflow: visible;
    text-overflow: clip;
  }
}