@reference "tailwindcss";

/* Layout */
.chat-container {
  @apply flex bg-gradient-to-br from-[#1a1e24] to-[#1e2329] text-white;
  height: 100vh; /* Fallback */
  height: 100dvh; /* Dynamic viewport height */
}

.chat-main {
  @apply flex-1 flex flex-col;
  position: relative;
  /* Important for proper mobile height calculation */
  height: 100vh;
  height: 100dvh;
}

.chat-header {
  @apply p-4 sm:p-8 border-b border-[#2c313a]/80 bg-gradient-to-r from-[#1a1e24]/50 to-[#1e2329]/50;
}

/* Desktop: single row layout */
@media (min-width: 640px) {
  .chat-header {
    @apply flex items-center justify-between;
  }

  /* Hide mobile elements on desktop */
  .nav-controls {
    @apply hidden;
  }

  .title-row {
    @apply hidden;
  }

  /* Show desktop elements */
  .title-group {
    @apply flex items-center gap-2;
  }

  .auth-controls {
    @apply flex items-center gap-3;
  }
}

/* Mobile: stacked layout */
@media (max-width: 640px) {
  .chat-header {
    @apply flex flex-col gap-3;
  }

  .nav-controls {
    @apply flex justify-end;
  }

  .title-row {
    @apply flex;
  }

  /* Hide desktop elements on mobile */
  .chat-header > .title-group {
    @apply hidden;
  }

  .chat-header > .auth-controls {
    @apply hidden;
  }
}

.auth-controls {
  @apply flex items-center gap-3;
}

.api-key-indicator {
  @apply flex items-center gap-1.5 px-2.5 py-2 bg-emerald-600/20 border border-emerald-500/30 rounded-md text-emerald-400 text-xs font-medium;
  font-size: 11px;
}

.api-key-indicator svg {
  @apply w-3 h-3;
}

/* User Menu Dark Theme Overrides */
.user-menu-button {
  @apply bg-[#2c313a]/60 hover:bg-[#2c313a]/80 border border-[#3a404b]/30 hover:border-[#3a404b]/50 rounded-lg text-gray-200 hover:text-white transition-all duration-200 cursor-pointer px-3 py-2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.user-menu-button:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.user-menu-dropdown {
  @apply bg-[#2c313a] border border-[#3a404b]/70 rounded-lg shadow-xl min-w-48 z-50;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.user-menu-item {
  @apply text-gray-200 hover:text-white hover:bg-[#343a46] transition-colors duration-150 px-4 py-3 text-sm border-none bg-transparent cursor-pointer;
}

.user-menu-item.danger {
  @apply text-red-400 hover:text-red-300 hover:bg-red-500/10;
}

.auth-button {
  @apply bg-gradient-to-br from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-200 text-sm font-medium shadow-md;
}

/* Mobile header adjustments */
@media (max-width: 640px) {
  .chat-header {
    @apply pl-16; /* Make room for the menu button */
  }

  /* Hide user name on mobile, keep only icon */
  .user-name-text {
    @apply hidden;
  }

  /* Reduce gap in auth controls on mobile */
  .auth-controls {
    @apply gap-2;
  }

  /* Make API key indicator more compact */
  .api-key-indicator {
    @apply px-2 py-1.5 text-xs;
  }

  .api-key-indicator span {
    @apply hidden sm:inline;
  }
}

.title-group {
  @apply flex items-center gap-2;
}

.chat-title {
  @apply text-xl sm:text-2xl font-medium tracking-tight text-gray-100 flex items-center gap-3;
}

/* Truncate title on mobile for better layout */
@media (max-width: 640px) {
  .chat-title {
    @apply text-lg;
    max-width: 24ch; /* Limit to ~25 characters */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block; /* Ensure block display for ellipsis to work */
  }
}

.parent-chat-link {
  @apply flex items-center gap-1.5 px-2 py-1 bg-purple-600/10 hover:bg-purple-600/20 border border-purple-500/20 hover:border-purple-400/30 rounded-md text-purple-300 hover:text-purple-200 transition-all duration-200 cursor-pointer text-xs opacity-70 hover:opacity-100;
}

.parent-chat-link span {
  @apply truncate max-w-[120px] font-normal;
}

.header-actions {
  @apply flex items-center gap-2;
}

.share-button {
  @apply flex items-center justify-center p-2 bg-[#2c313a]/60 hover:bg-[#2c313a]/80 border border-[#3a404b]/30 hover:border-[#3a404b]/50 rounded-lg text-gray-300 hover:text-gray-100 transition-all duration-200 cursor-pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.share-button:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.share-icon {
  @apply w-4 h-4;
}

.share-button-small {
  @apply flex items-center justify-center p-2 bg-gradient-to-br from-emerald-600/80 to-emerald-700/80 hover:from-emerald-500/90 hover:to-emerald-600/90 border border-emerald-500/40 hover:border-emerald-400/60 rounded-lg text-white hover:text-white transition-all duration-200 cursor-pointer shadow-sm;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.15);
}

.share-button-small:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
  transform: translateY(-0.5px);
}

.share-icon-small {
  @apply w-4 h-4;
}

.creating-indicator {
  @apply text-sm text-blue-400 font-normal opacity-75;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Message Container */
.message-container {
  @apply flex-1 overflow-y-auto pt-6 sm:pt-10 pb-[25vh] sm:pb-[10vh] px-4 sm:px-10 bg-gradient-to-b from-[#1a1e24]/30 to-[#1e2329]/30;
}

.message-wrapper {
  @apply mb-6 sm:mb-8 flex items-start;
  animation: fadeIn 0.3s ease-out forwards;
}

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

.message-content-wrapper {
  @apply flex-1 flex flex-col;
}

.message-content {
  @apply inline-block text-gray-200 p-3 sm:p-5 rounded-lg w-fit max-w-[95%] sm:max-w-[85%] text-[16px] sm:text-[17px] shadow-sm;
}

.message-sender {
  @apply text-gray-400 text-[15px] sm:text-[15px] mb-2 sm:mb-3 font-medium;
}

.saving-indicator {
  @apply ml-2 text-blue-400 text-xs opacity-70;
  animation: pulse 1.5s ease-in-out infinite;
}

.model-badge {
  @apply ml-2 px-2 py-0.5 bg-gradient-to-r from-purple-600/20 to-blue-600/20 border border-purple-500/30 rounded text-xs text-purple-300 font-medium;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

/* Avatars */
.user-avatar {
  @apply w-8 h-8 sm:w-12 sm:h-12 rounded-full mr-3 sm:mr-5 flex items-center justify-center bg-gradient-to-br from-blue-600 to-blue-700 flex-shrink-0 shadow-md;
}

.user-avatar-icon {
  @apply w-4 h-4 sm:w-6 sm:h-6 text-white;
}

.ai-avatar {
  @apply w-8 h-8 sm:w-12 sm:h-12 rounded-full mr-3 sm:mr-5 flex items-center justify-center bg-gradient-to-br from-purple-600 to-purple-700 flex-shrink-0 text-white text-sm sm:text-base font-bold shadow-md;
}

.ai-avatar-text {
  @apply text-white text-sm sm:text-base font-bold;
}

/* Message Backgrounds */
.user-message-bg {
  @apply bg-gradient-to-br from-[#2c313a]/80 to-[#2c313a]/60 border border-[#3a404b]/20;
}

.ai-message-bg {
  @apply bg-gradient-to-br from-[#343a46]/80 to-[#343a46]/60 border border-[#4a5061]/20;
}

/* Thinking Indicator */
.thinking-row {
  @apply flex items-center gap-1 px-2 sm:px-4 py-2;
}

.typing-indicator {
  @apply flex items-center gap-1 bg-gradient-to-r from-[#2c313a]/80 to-[#2c313a]/60 px-2 sm:px-3 py-1.5 sm:py-2 rounded-2xl border border-[#3a404b]/20;
}

.typing-indicator span {
  @apply w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full bg-gray-400;
  animation: bounce 1.4s infinite ease-in-out;
}

.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);
    opacity: 0.3;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Input Area */
.input-area {
  @apply px-4 sm:pl-27 sm:pr-10 py-4 sm:py-6 border-t border-[#2c313a]/80 flex flex-col bg-gradient-to-r from-[#1a1e24]/70 to-[#1e2329]/70;
}

.input-form {
  @apply flex items-center gap-3 w-full max-w-5xl;
}

/* Desktop: horizontal layout */
@media (min-width: 640px) {
  .input-form {
    @apply flex-row;
  }

  .mobile-input-row {
    @apply flex items-center gap-3 w-full;
  }
}

.input-field {
  @apply bg-gradient-to-r from-[#2c313a] to-[#2e333d] rounded-xl sm:rounded-2xl px-4 sm:px-8 py-3 sm:py-5 outline-none focus:ring-1 focus:ring-blue-500/70 focus:border-blue-500/50 transition-all text-[15px] sm:text-[17px] tracking-wide font-normal flex-1 h-12 sm:h-14 border border-[#3a404b]/30;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.input-field:focus {
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}

.submit-button {
  @apply bg-gradient-to-br from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 transition-all rounded-lg w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center disabled:opacity-50 ml-2 sm:ml-4 self-center shadow-md cursor-pointer;
}

.submit-button.stop-button {
  @apply bg-gradient-to-br from-gray-600 to-gray-700 hover:from-gray-500 hover:to-gray-600;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(107, 114, 128, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(107, 114, 128, 0);
  }
}

.submit-icon {
  @apply w-5 h-5 sm:w-6 sm:h-6 text-white;
}

/* States */
.empty-state {
  @apply flex items-center justify-center h-full text-gray-400 text-[15px] sm:text-[17px] font-medium tracking-wide px-4 text-center;
}

.loading-state {
  @apply flex items-center justify-center h-screen bg-gradient-to-br from-[#1a1e24] to-[#1e2329] text-white;
}

/* Delete Button */
.delete-button {
  @apply p-0.5 text-gray-400/80 hover:text-red-400 transition-colors rounded-full cursor-pointer;
}

.delete-icon {
  @apply w-4 h-4 sm:w-5 sm:h-5;
}

/* Input Mode Selector */
.input-mode-selector {
  @apply flex bg-[#2c313a]/50 rounded-lg p-1 mb-3 w-fit mx-auto border border-[#3a404b]/30;
}

.mode-button {
  @apply px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer;
}

.mode-button:not(.active) {
  @apply text-gray-400 hover:text-gray-200 hover:bg-[#3a404b]/30;
}

.mode-button.active {
  @apply bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-sm;
}

/* Image Generator */
.image-generator {
  @apply w-full max-w-5xl mx-auto;
}

.image-form {
  @apply w-full;
}

.image-input-wrapper {
  @apply flex items-center gap-3 bg-gradient-to-r from-[#2c313a] to-[#2e333d] rounded-xl sm:rounded-2xl p-3 sm:p-4 border border-[#3a404b]/30;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.image-icon {
  @apply text-gray-400 flex-shrink-0;
}

.image-input {
  @apply bg-transparent outline-none text-[15px] sm:text-[17px] tracking-wide font-normal w-full text-gray-200 placeholder-gray-400;
}

.generate-button {
  @apply bg-gradient-to-br from-purple-600 to-purple-700 hover:from-purple-500 hover:to-purple-600 transition-all rounded-lg px-4 py-2 flex items-center gap-2 disabled:opacity-50 text-white text-sm font-medium shadow-md;
}

.loading-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.error-message {
  @apply mt-3 p-3 bg-red-500/10 border border-red-500/20 rounded-lg;
}

.error-message p {
  @apply text-red-400 text-sm;
}

/* Generated Image Display */
.generated-image-preview {
  @apply mt-4 p-4 bg-[#2c313a]/50 rounded-xl border border-[#3a404b]/30;
}

.generated-image-display {
  @apply mt-4 p-4 bg-[#2c313a]/30 rounded-lg border border-[#3a404b]/20;
}

.preview-image,
.chat-generated-image {
  @apply w-full max-w-md mx-auto rounded-lg shadow-lg border border-[#3a404b]/30;
}

.chat-generated-image {
  @apply max-w-sm;
}

.image-actions {
  @apply flex items-center justify-center gap-2 mt-3;
}

.download-button {
  @apply bg-[#3a404b]/50 hover:bg-[#3a404b]/70 transition-all duration-300 rounded-lg px-3 py-2 text-gray-200 text-sm border border-[#4a5061]/30 cursor-pointer relative overflow-hidden;
  min-width: 120px;
  min-height: 36px;
}

.download-button-content {
  @apply flex items-center justify-center gap-2 relative z-10;
}

.download-icon-container {
  @apply relative flex items-center justify-center;
  width: 16px;
  height: 16px;
}

.download-text {
  @apply transition-all duration-200;
  min-width: 80px;
  text-align: left;
}

.download-button.downloading {
  @apply bg-gradient-to-r from-blue-600/20 to-purple-600/20 border-blue-500/30;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
  animation: downloadGlow 2s ease-in-out infinite alternate;
}

.download-button.success {
  @apply bg-gradient-to-r from-green-600/20 to-emerald-600/20 border-green-500/30;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.download-pulse {
  @apply absolute inset-0 bg-blue-500/30 rounded-full;
  animation: downloadPulse 1.5s ease-in-out infinite;
}

.download-bounce {
  animation: downloadBounce 1s ease-in-out infinite;
}

.download-success {
  @apply text-green-400;
  animation: downloadSuccess 0.5s ease-out;
}

.download-progress-container {
  @apply absolute bottom-0 left-0 right-0 h-1 bg-[#2a2f3a] overflow-hidden rounded-b-lg;
}

.download-progress-bar {
  @apply h-full bg-gradient-to-r from-blue-500 to-purple-500 transition-all duration-200 ease-out;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.download-button:disabled {
  @apply cursor-not-allowed;
}

.download-button:disabled:hover {
  @apply bg-[#3a404b]/50;
}

@keyframes downloadGlow {
  0% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
  }
  100% {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.4),
      0 0 40px rgba(147, 51, 234, 0.2);
  }
}

@keyframes downloadPulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

@keyframes downloadBounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-2px);
  }
}

@keyframes downloadSuccess {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.revised-prompt {
  @apply mt-3 text-gray-400 text-sm italic;
}

/* Mobile Specific */
@media (max-width: 640px) {
  html {
    height: -webkit-fill-available;
  }

  body {
    height: 100%;
  }

  .chat-container {
    overflow: hidden;
    /* Allow chat container to use full viewport */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh; /* Standard height for most browsers */
    height: -webkit-fill-available; /* For iOS Safari */
    height: 100dvh; /* Dynamic viewport height when supported */
  }

  .chat-main {
    width: 100%;
    /* Main container fills the viewport */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* Explicitly set height to prevent layout shifts */
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .chat-header {
    flex-shrink: 0;
  }

  .message-container {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
    padding-top: 1rem;
    padding-bottom: calc(30vh + 4rem + env(safe-area-inset-bottom, 0));
    will-change: transform;
  }

  .input-area {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1rem;
    background-image: linear-gradient(to right, #1a1e24, #1e2329);
    border-top: 1px solid #2c313a;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
    min-height: 80px; /* Increased to accommodate stacked layout */
    transform: translateZ(0);
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.2);
  }

  .input-form {
    @apply w-full flex flex-col gap-2; /* Stack elements vertically on mobile */
    height: 100%;
  }

  /* Mobile-specific input row styles */
  .mobile-input-row {
    @apply flex items-center gap-2 w-full;
  }

  .mobile-bottom-row {
    @apply flex items-center justify-between gap-2 w-full;
  }

  .message-content {
    @apply break-words leading-relaxed;
  }

  .markdown-content {
    @apply text-[16px] leading-relaxed;
  }

  .markdown-content pre {
    @apply max-w-[calc(100vw-3rem)] overflow-x-auto text-[14px];
  }

  .input-mode-selector {
    @apply mb-2;
  }

  .image-input-wrapper {
    @apply p-3;
  }

  .generate-button {
    @apply px-3 py-2 text-xs;
  }

  .chat-generated-image {
    @apply max-w-full;
  }
}

/* Loading Indicator */
.loading-indicator {
  @apply flex items-center gap-2 mt-2;
}

.loading-dots {
  @apply flex gap-1;
}

.loading-dots span {
  @apply w-2 h-2 bg-blue-500 rounded-full;
  animation: loadingPulse 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loadingPulse {
  0%,
  80%,
  100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Model Selector Styles */
.model-selector-container {
  @apply relative;
}

.model-selector-pill {
  @apply flex items-center gap-1.5 px-3 py-2.5 bg-gradient-to-r from-[#2c313a] to-[#2e333d] text-gray-300 text-sm rounded-xl hover:from-[#343a46] hover:to-[#363b47] transition-all duration-200 cursor-pointer border border-[#3a404b]/30;
  height: 3rem; /* Match input field height */
  width: 140px; /* Fixed width */
  flex-shrink: 0; /* Don't shrink */
}

.model-selector-pill.loading {
  @apply opacity-60 cursor-not-allowed;
}

.model-display {
  @apply flex items-center gap-1 min-w-0 flex-1;
}

.model-name {
  @apply text-sm text-gray-300 font-normal truncate;
}

.featured-icon {
  @apply w-3 h-3 text-yellow-400 flex-shrink-0;
}

.chevron {
  @apply w-3 h-3 text-gray-400 transition-transform duration-200 flex-shrink-0;
}

.chevron.rotate {
  @apply rotate-180;
}

.model-dropdown {
  @apply absolute bottom-full left-0 mb-2 bg-[#2c313a] border border-[#3a404b] rounded-xl shadow-2xl z-50 min-w-[320px] max-w-[400px] max-h-[60vh] overflow-y-auto;
}

/* Featured Models Section */
.featured-section {
  @apply border-b border-[#3a404b]/50 pb-2 mb-2;
}

.section-header {
  @apply flex items-center gap-2 px-3 py-2 text-xs font-medium text-gray-400 uppercase tracking-wider;
}

.section-icon {
  @apply w-3 h-3;
}

.all-models-section {
  @apply pt-1;
}

/* Provider Groups */
.provider-group {
  @apply mb-2 last:mb-0;
}

.provider-name {
  @apply px-3 py-1.5 text-xs font-medium text-gray-400 uppercase tracking-wider border-b border-[#3a404b]/30;
}

/* Model Items */
.model-item {
  @apply w-full text-left px-3 py-2.5 hover:bg-[#343a46] transition-colors duration-150 border-none bg-transparent cursor-pointer;
}

.model-item.featured {
  @apply bg-gradient-to-r from-[#3a404b]/20 to-[#2c313a]/20 hover:from-[#3a404b]/30 hover:to-[#2c313a]/30;
}

.model-item.active {
  @apply bg-gradient-to-r from-blue-600/20 to-purple-600/20 text-blue-300;
}

.model-item.active.featured {
  @apply bg-gradient-to-r from-yellow-600/20 to-orange-600/20 text-yellow-300;
}

.model-info {
  @apply space-y-1;
}

.model-header {
  @apply flex items-center justify-between gap-2;
}

.model-title {
  @apply text-sm font-medium text-gray-200 flex items-center gap-1;
}

.featured-badge {
  @apply w-3 h-3 text-yellow-400;
}

.model-desc {
  @apply text-xs text-gray-400 block;
}

.model-pricing {
  @apply text-xs text-green-400 font-medium flex-shrink-0;
}

/* Restricted model styles */
.model-item.requires-api-key {
  @apply opacity-60 cursor-pointer;
}

.model-item.requires-api-key:hover {
  @apply opacity-80 bg-amber-600/10;
}

.model-item.requires-api-key .model-title::after {
  content: ' 🔒';
  @apply text-amber-400 text-xs;
}

/* Scrollbar styling for the dropdown */
.model-dropdown::-webkit-scrollbar {
  @apply w-1;
}

.model-dropdown::-webkit-scrollbar-track {
  @apply bg-[#2c313a];
}

.model-dropdown::-webkit-scrollbar-thumb {
  @apply bg-[#3a404b] rounded-full;
}

.model-dropdown::-webkit-scrollbar-thumb:hover {
  @apply bg-[#4a5058];
}

/* Animation for dropdown */
.model-dropdown {
  animation: slideUp 0.15s ease-out;
}

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

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

/* Responsive adjustments */
@media (max-width: 640px) {
  .model-dropdown {
    @apply min-w-[280px] max-w-[90vw] left-0 right-0 mx-auto;
  }

  .model-selector-pill {
    @apply w-32;
  }

  /* Compact model selector on mobile bottom row */
  .mobile-bottom-row .model-selector-pill {
    @apply w-auto max-w-[140px];
  }
}

.input-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 16px;
  background: var(--background-secondary);
  border-top: 1px solid var(--border);
  position: relative;
}

/* Additional mobile responsiveness for code blocks */
@media (max-width: 640px) {
  .message-wrapper {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Allow regenerate dropdown to overflow on mobile */
  .message-wrapper.dropdown-open {
    overflow: visible !important;
  }

  .message-content-wrapper {
    max-width: calc(100vw - 80px) !important;
    min-width: 0;
  }

  .message-content {
    max-width: 100% !important;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Allow regenerate dropdown to overflow on mobile */
  .message-content.dropdown-open {
    overflow: visible !important;
  }

  .markdown-content {
    overflow-x: hidden;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .markdown-content * {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Ensure code blocks don't overflow on mobile */
  .markdown-content pre {
    overflow-x: auto !important;
    max-width: calc(100vw - 100px) !important;
  }

  /* Force code containers to be constrained */
  .markdown-content > div {
    max-width: 100% !important;
    overflow-x: hidden;
  }
}

/* Custom scrollbar for webkit browsers */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #4b5563 #1f2937;
}

.scrollbar-thin::-webkit-scrollbar {
  height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: #1f2937;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Regenerate functionality styles */
.message-actions {
  @apply mt-3 flex justify-start gap-2;
  /* Allow dropdown to overflow container */
  overflow: visible;
}

.regenerate-container {
  @apply relative;
  /* Ensure dropdown can escape parent overflow constraints */
  z-index: 1;
}

.regenerate-button {
  @apply flex items-center gap-2 px-3 py-2 bg-[#2c313a]/60 hover:bg-[#2c313a]/80 border border-[#3a404b]/30 hover:border-[#3a404b]/50 rounded-lg text-gray-300 hover:text-gray-100 text-sm transition-all duration-200 cursor-pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.regenerate-button:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.regenerate-button:disabled {
  @apply opacity-60 cursor-not-allowed;
}

.regenerate-button.regenerating {
  @apply bg-blue-600/20 border-blue-500/30 text-blue-300;
}

.regenerate-button-content {
  @apply flex items-center gap-2;
}

.regenerate-button .chevron {
  @apply transition-transform duration-200;
}

.regenerate-button .chevron.rotate {
  @apply rotate-180;
}

.regenerate-dropdown {
  @apply absolute left-0 border border-[#3a404b]/70 rounded-lg min-w-80 max-w-96 max-h-96 overflow-y-auto;
  z-index: 9999;
  opacity: 1;
  background: linear-gradient(to bottom, #2c313a, #252a32);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Position above the button (default) */
.regenerate-dropdown-up {
  @apply bottom-full mb-1;
  animation: slideDown 0.15s ease-out forwards;
}

/* Position below the button */
.regenerate-dropdown-down {
  @apply top-full mt-1;
  animation: slideDown 0.15s ease-out forwards;
}

.regenerate-dropdown-header {
  @apply px-4 py-3 border-b border-[#3a404b]/30 text-sm font-medium text-gray-200;
}

.regenerate-toggle-section {
  @apply px-4 py-3 border-b border-[#3a404b]/30;
}

.regenerate-toggle {
  @apply flex items-center gap-3 cursor-pointer;
}

.regenerate-checkbox {
  @apply sr-only;
}

.regenerate-toggle-slider {
  @apply relative w-11 h-6 bg-[#3a404b] rounded-full transition-colors duration-200;
}

.regenerate-checkbox:checked + .regenerate-toggle-slider {
  @apply bg-blue-600;
}

.regenerate-toggle-slider::before {
  @apply absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform duration-200;
  content: '';
}

.regenerate-checkbox:checked + .regenerate-toggle-slider::before {
  @apply transform translate-x-5;
}

.regenerate-toggle-content {
  @apply flex items-center gap-2 text-sm text-gray-200;
}

.regenerate-dropdown .featured-models-section {
  @apply border-b border-[#3a404b]/30;
}

.regenerate-dropdown .section-header {
  @apply flex items-center gap-2 px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wide bg-[#343a46]/50;
}

.regenerate-dropdown .provider-group {
  @apply border-b border-[#3a404b]/20 last:border-b-0;
}

.regenerate-dropdown .provider-name {
  @apply px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wide bg-[#343a46]/30;
}

.regenerate-dropdown .model-item {
  @apply w-full text-left px-4 py-3 hover:bg-[#343a46]/60 transition-colors duration-150 border-none bg-transparent cursor-pointer;
}

.regenerate-dropdown .model-item:hover {
  @apply text-gray-100;
}

.regenerate-dropdown .model-item.featured {
  @apply bg-gradient-to-r from-purple-600/10 to-blue-600/10 hover:from-purple-600/20 hover:to-blue-600/20;
}

.regenerate-dropdown .model-info {
  @apply flex flex-col gap-1;
}

.regenerate-dropdown .model-header {
  @apply flex items-center justify-between;
}

.regenerate-dropdown .model-title {
  @apply text-sm font-medium text-gray-200;
}

.regenerate-dropdown .model-pricing {
  @apply text-xs text-gray-400;
}

.regenerate-dropdown .model-desc {
  @apply text-xs text-gray-400 leading-relaxed;
}

/* Restricted model styles for regenerate dropdown */
.regenerate-dropdown .model-item.requires-api-key {
  @apply opacity-60 cursor-pointer;
}

.regenerate-dropdown .model-item.requires-api-key:hover {
  @apply opacity-80 bg-amber-600/10;
}

.regenerate-dropdown .model-item.requires-api-key .model-title::after {
  content: ' 🔒';
  @apply text-amber-400 text-xs;
}

/* Mobile adjustments for regenerate */
@media (max-width: 640px) {
  .regenerate-dropdown {
    @apply min-w-72 max-w-80 max-h-80;
  }

  .regenerate-button {
    @apply px-2 py-1.5 text-xs;
  }

  .regenerate-dropdown .model-item {
    @apply px-3 py-2;
  }

  .regenerate-dropdown-header {
    @apply px-3 py-2 text-xs;
  }
}

/* Share Modal Styles */
.share-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(0px);
  transition: background-color 0.3s ease-out, backdrop-filter 0.3s ease-out;
  /* Prevent layout shift */
  will-change: background-color, backdrop-filter;
}

.share-modal-overlay-animate {
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.share-modal {
  background: linear-gradient(to bottom, #2c313a, #252a32);
  border: 1px solid rgba(58, 64, 75, 0.7);
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  margin: 20px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4),
    0 10px 10px -5px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  /* Prevent layout shift */
  will-change: opacity, transform;
  /* Ensure modal doesn't affect layout flow */
  position: relative;
}

.share-modal-animate {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.share-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid rgba(58, 64, 75, 0.7);
}

.share-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.share-modal-title h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #f3f4f6;
}

.share-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  color: #9ca3af;
  transition: all 0.2s;
}

.share-modal-close:hover {
  background-color: rgba(75, 85, 99, 0.3);
  color: #f3f4f6;
}

.share-modal-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.share-chat-info h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: #f3f4f6;
}

.share-chat-info p {
  margin: 0;
  font-size: 14px;
  color: #9ca3af;
  line-height: 1.5;
}

.share-error {
  color: #ef4444;
  font-size: 14px;
  text-align: center;
  padding: 12px;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
}

.share-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 20px;
  color: #9ca3af;
}

.share-url-container {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: rgba(31, 41, 55, 0.5);
  border: 1px solid rgba(75, 85, 99, 0.3);
  border-radius: 8px;
}

.share-url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #60a5fa;
  font-size: 14px;
  font-family: monospace;
  overflow: hidden;
}

.share-url span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copy-button {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.copy-button:hover:not(:disabled) {
  background: #2563eb;
}

.copy-button:disabled {
  background: #22c55e;
  cursor: default;
}

.share-active {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.share-inactive {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.share-info {
  padding: 16px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 8px;
  margin-bottom: 8px;
}

.share-info p {
  margin: 0;
  font-size: 14px;
  color: #22c55e;
}

.share-info .share-date {
  margin-top: 4px;
  color: #9ca3af;
  font-size: 13px;
}

.share-button,
.unshare-button {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.share-button:hover:not(:disabled) {
  background: #2563eb;
}

.unshare-button {
  background: #ef4444;
}

.unshare-button:hover:not(:disabled) {
  background: #dc2626;
}

.share-button:disabled,
.unshare-button:disabled {
  background: #6b7280;
  cursor: not-allowed;
}

.share-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 20px;
  text-align: center;
}

.share-preview-icon {
  width: 48px;
  height: 48px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #60a5fa;
}

.share-preview p {
  margin: 0;
  color: #9ca3af;
  font-size: 14px;
}

/* Scroll to bottom button */
.scroll-to-bottom-button {
  position: absolute;
  bottom: 20px;
  left: 46%;
  transform: translateX(-50%);
  z-index: 10;
  background: linear-gradient(to right, #2c313a, #2e333d);
  color: #9ca3af;
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 3px 15px rgba(59, 130, 246, 0.12);
}

.scroll-to-bottom-button:hover {
  background: linear-gradient(to right, #2c313a, #2e333d);
  color: #e5e7eb;
  border: 1px solid rgba(59, 130, 246, 0.7);
  transform: translateX(-50%) translateY(-1px);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
}

@media (max-width: 640px) {
  .scroll-to-bottom-button {
    display: none;
  }
}

/* PWA Install button */
.pwa-install-button {
  position: fixed;
  bottom: 170px;
  right: 35px;
  z-index: 10;
  background: linear-gradient(to right, #2c313a, #2e333d);
  color: #9ca3af;
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 20px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 3px 15px rgba(59, 130, 246, 0.12);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.pwa-install-button:hover {
  background: linear-gradient(to right, #2c313a, #2e333d);
  color: #e5e7eb;
  border: 1px solid rgba(59, 130, 246, 0.7);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
}

@media (max-width: 640px) {
  .pwa-install-button {
    display: none; /* Hide the global button on mobile */
  }

  .pwa-install-button-mobile {
    background: linear-gradient(to right, #2c313a, #2e333d);
    color: #9ca3af;
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    box-shadow: 0 3px 15px rgba(59, 130, 246, 0.12);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    position: fixed;
    top: 16px;
    left: 72px; /* Positioned right next to hamburger menu (16px + 40px + 16px) */
    z-index: 50;
  }

  .pwa-install-button-mobile:hover {
    background: linear-gradient(to right, #2c313a, #2e333d);
    color: #e5e7eb;
    border: 1px solid rgba(59, 130, 246, 0.7);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
  }
}

/* Very small screens - icon only */
@media (max-width: 314px) {
  .pwa-install-button-mobile {
    padding: 8px; /* More compact padding */
    width: 40px; /* Same size as hamburger menu */
    height: 40px;
  }

  .pwa-install-button-mobile span {
    display: none; /* Hide the "install" text */
  }
}
