/* ANCHOR: telegram_widget_styles */
/* REUSED: Widget-specific styling following Figma specifications */
/* SCALED FOR: Professional telegram channel display with white background */

/* Telegram Widget Container - Exact Figma specifications */
.telegram-container {
  /* CRITICAL: Exact Figma dimensions and layout */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px 16px;
  gap: 16px;
  position: relative;
  width: 300px;
  height: 161px;
  
  /* UPDATED COMMENTS: White background from Figma */
  background: #FFFFFF;
  
  /* CRITICAL: Multi-layer shadow system from Figma */
  box-shadow: 
    0px 32px 13px rgba(0, 0, 0, 0.01), 
    0px 18px 11px rgba(0, 0, 0, 0.05), 
    0px 8px 8px rgba(0, 0, 0, 0.09), 
    0px 2px 4px rgba(0, 0, 0, 0.1);
  
  border-radius: 14px;
  
  /* REUSED: Rotation handled by shared widget system */
  /* transform: rotate(2deg); - Applied by widget rotation system */
}

/* Telegram Header - Channel info and external link */
.telegram-header {
  /* CRITICAL: Auto layout from Figma */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 12px;
  width: 268px;
  height: 41px;
  
  /* REUSED: Flexbox positioning within container */
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

/* Channel Avatar - Rounded image */
.telegram-avatar {
  /* CRITICAL: Exact avatar dimensions */
  width: 40px;
  height: 40px;
  border-radius: 123.75px; /* Very rounded for circular appearance */
  
  /* UPDATED COMMENTS: Avatar positioning and overflow with gray placeholder */
  position: relative;
  overflow: hidden;
  background-color: #E5E7EB; /* UPDATED: Gray placeholder background */
  
  /* REUSED: Flexbox positioning within header */
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Avatar Image */
.telegram-avatar img {
  /* CRITICAL: Fill avatar container */
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  
  /* UPDATED COMMENTS: Proper image scaling */
  object-fit: cover;
}

/* Channel Information Section */
.telegram-channel-info {
  /* CRITICAL: Auto layout from Figma */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  gap: 2px;
  width: 180px;
  height: 41px;
  
  /* REUSED: Flexbox positioning with grow */
  flex: none;
  order: 1;
  flex-grow: 1;
}

/* Channel Name - Main title */
.telegram-channel-name {
  /* CRITICAL: Fill width for channel name */
  width: 100%;
  height: 21px;
  
  /* UPDATED COMMENTS: SF Pro font with exact specifications */
  font-family: 'SF Pro Display', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: normal;
  font-weight: 600; /* Figma: 590 weight */
  font-size: 18px;
  line-height: 21px;
  letter-spacing: var(--letter-spacing-tight); /* -2% letter spacing - unified standard */
  
  color: #0E1621;
  
  /* REUSED: Flexbox positioning */
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

/* Channel Type - Subtitle */
.telegram-channel-type {
  /* CRITICAL: Fill width for channel type */
  width: 100%;
  height: 18px;
  
  /* UPDATED COMMENTS: Body text typography with increased letter spacing */
  font-family: 'SF Pro Display', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 130%; /* or 18px */
  letter-spacing: var(--letter-spacing-normal); /* 3% letter spacing - unified standard */
  
  color: #0E1621;
  opacity: 0.6; /* 60% opacity for subtitle */
  
  /* REUSED: Flexbox positioning */
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

/* External Link Arrow */
.telegram-external-link {
  /* CRITICAL: Increased dimensions for hover circle */
  width: 42px;
  height: 42px;
  opacity: 0.6;
  
  /* UPDATED COMMENTS: Icon color and styling with circle background */
  color: #0E1621;
  cursor: pointer;
  transition: all 0.2s ease-out;
  border-radius: 50%; /* UPDATED: Circular shape for background */
  
  /* REUSED: Flexbox positioning within header */
  flex: none;
  order: 2;
  flex-grow: 0;
  
  /* SCALED FOR: Icon alignment */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* External Link Hover State */
.telegram-external-link--hovered {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1); /* UPDATED: Black circle with 10% opacity */
  /* REMOVED: transform: scale(1.1); - No scaling on hover */
}

/* External Link SVG */
.telegram-external-link svg {
  width: 24px; /* UPDATED: Fixed icon size */
  height: 24px; /* UPDATED: Fixed icon size */
}

/* Post Content Section */
.telegram-post {
  /* CRITICAL: Auto layout from Figma */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 8px; /* UPDATED COMMENTS: Doubled from 4px to 8px for better spacing */
  width: 268px;
  height: 64px;
  
  /* REUSED: Flexbox positioning within container */
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

/* Post Text Content */
.telegram-post-text {
  /* CRITICAL: Fill width for post text */
  width: 100%;
  height: 42px;
  
  /* UPDATED COMMENTS: Post text typography */
  font-family: 'SF Pro Display', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 130%; /* or 21px */
  letter-spacing: var(--letter-spacing-normal); /* 3% letter spacing - unified standard */
  
  color: #0E1621;
  
  /* REUSED: Flexbox positioning */
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  
  /* CRITICAL: Text overflow handling */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Post Info Section - Views and Time */
.telegram-post-info {
  /* CRITICAL: Auto layout from Figma */
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 0px;
  gap: 16px;
  width: 100%;
  height: 18px;
  
  /* REUSED: Flexbox positioning */
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

/* Views Section */
.telegram-views {
  /* CRITICAL: Auto layout from Figma - HUG content width */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 6px;
  /* UPDATED: width: auto for hug content behavior */
  width: auto;
  height: 18px;
  
  /* REUSED: Flexbox positioning */
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Views Icon */
.telegram-views-icon {
  /* CRITICAL: Exact icon dimensions */
  width: 16px;
  height: 16px;
  opacity: 0.6;
  
  /* UPDATED COMMENTS: Icon styling */
  color: #0E1621;
  
  /* REUSED: Flexbox positioning */
  flex: none;
  order: 0;
  flex-grow: 0;
  
  /* SCALED FOR: Icon alignment */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Views Icon SVG */
.telegram-views-icon svg {
  width: 100%;
  height: 100%;
}

/* Views Count Text */
.telegram-views-count {
  /* CRITICAL: Views count styling - HUG content width */
  /* UPDATED: width: auto for hug content behavior */
  width: auto;
  height: 18px;
  
  /* UPDATED COMMENTS: Small text typography */
  font-family: 'SF Pro Display', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 130%; /* or 18px */
  letter-spacing: var(--letter-spacing-small); /* 2% letter spacing - unified standard */
  
  color: #0E1621;
  
  /* REUSED: Flexbox positioning */
  flex: none;
  order: 1;
  flex-grow: 0;
  
  /* UPDATED: Prevent text wrapping */
  white-space: nowrap;
}

/* Time Section */
.telegram-time {
  /* CRITICAL: Auto layout from Figma - HUG content width */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 6px;
  /* UPDATED: width: auto for hug content behavior */
  width: auto;
  height: 18px;
  
  /* REUSED: Flexbox positioning */
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* Time Icon */
.telegram-time-icon {
  /* CRITICAL: Exact icon dimensions */
  width: 16px;
  height: 16px;
  opacity: 0.6;
  
  /* UPDATED COMMENTS: Icon styling */
  color: #0E1621;
  
  /* REUSED: Flexbox positioning */
  flex: none;
  order: 0;
  flex-grow: 0;
  
  /* SCALED FOR: Icon alignment */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Time Icon SVG */
.telegram-time-icon svg {
  width: 100%;
  height: 100%;
}

/* Time Text */
.telegram-time-text {
  /* CRITICAL: Time text styling - HUG content width */
  /* UPDATED: width: auto for hug content behavior */
  width: auto;
  height: 18px;
  
  /* UPDATED COMMENTS: Small text typography */
  font-family: 'SF Pro Display', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 130%; /* or 18px */
  letter-spacing: var(--letter-spacing-small); /* 2% letter spacing - unified standard */
  
  color: #0E1621;
  
  /* REUSED: Flexbox positioning */
  flex: none;
  order: 1;
  flex-grow: 0;
  
  /* UPDATED: Prevent text wrapping */
  white-space: nowrap;
}

/* REUSED: Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .telegram-container {
    width: 280px;
    height: 150px;
    padding: 18px 14px;
    gap: 14px;
  }
  
  .telegram-header {
    width: 252px;
    gap: 10px;
  }
  
  .telegram-avatar {
    width: 36px;
    height: 36px;
  }
  
  .telegram-channel-name {
    font-size: 16px;
    line-height: 19px;
  }
  
  .telegram-channel-type {
    font-size: 13px;
  }
  
  .telegram-post {
    width: 252px;
    height: 58px;
  }
  
  .telegram-post-text {
    font-size: 15px;
    height: 38px;
  }
}
/* Cat Icons Gradient - Further adjusted positioning */
.telegram-cat-gradient {
  /* CRITICAL: Further adjusted positioning - right 4px more, up 4px more */
  position: absolute;
  width: 89px;
  height: 88px;
  right: 10.86px; /* UPDATED: 6.86px + 4px = 10.86px (moved further right) */
  top: -2.42px; /* UPDATED: 1.58px - 4px = -2.42px (moved further up) */
  opacity: 0.1;
  transform: rotate(1deg);
  
  /* REUSED: Figma auto layout properties */
  flex: none;
  order: 0;
  flex-grow: 0;
  z-index: 0;
  
  /* UPDATED COMMENTS: Prevent interaction with cat icons */
  pointer-events: none;
  
  /* SCALED FOR: Allow precise absolute positioning of child icons */
  overflow: visible;
}

/* Individual Cat Icon - Absolute positioning within container */
.telegram-cat-icon {
  /* CRITICAL: Absolute positioning for precise Figma placement */
  position: absolute;
  
  /* UPDATED COMMENTS: Icon styling and display */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* SCALED FOR: Prevent interaction with decorative icons */
  pointer-events: none;
  
  /* REUSED: 1 degree rotation for all icons */
  transform: rotate(1deg);
}

/* Cat Icon Image */
.telegram-cat-icon img {
  /* CRITICAL: Fill icon container */
  width: 100%;
  height: 100%;
  
  /* UPDATED COMMENTS: Maintain aspect ratio */
  object-fit: contain;
  
  /* REUSED: Prevent image selection */
  user-select: none;
}

/* ANCHOR: loading_states */
/* Loading State Styles */
.telegram-container--loading {
  /* CRITICAL: Clean loading state without mock data */
  display: flex;
  align-items: center;
  justify-content: center;
}

.telegram-loading .telegram-container {
  /* UPDATED COMMENTS: Subtle loading indication */
  opacity: 0.7;
  pointer-events: none;
}

.telegram-loading-overlay {
  /* CRITICAL: Full container overlay for loading */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95); /* UPDATED: More opaque for clean look */
  border-radius: 14px;
  
  /* SCALED FOR: Centered loading spinner */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.telegram-loading .telegram-loading-overlay {
  display: flex !important;
}

/* Loading Spinner Animation */
.telegram-loading-spinner {
  /* UPDATED COMMENTS: Subtle loading spinner */
  width: 24px;
  height: 24px;
  border: 2px solid #E5E7EB;
  border-top: 2px solid #0E1621;
  border-radius: 50%;
  animation: telegram-spin 1s linear infinite;
}

@keyframes telegram-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Error State Styles */
.telegram-error .telegram-container {
  /* UPDATED COMMENTS: Error state visual indication */
  border: 1px solid rgba(239, 68, 68, 0.2);
  background: rgba(254, 242, 242, 0.5);
}

.telegram-error .telegram-post-text {
  /* REUSED: Error text styling */
  color: rgba(239, 68, 68, 0.8);
  font-style: italic;
}

.telegram-error .telegram-views-count,
.telegram-error .telegram-time-text {
  /* SCALED FOR: Muted error state indicators */
  opacity: 0.5;
}

/* ANCHOR: responsive_enhancements */
/* Enhanced responsive design for loading states */
@media (max-width: 768px) {
  .telegram-loading-spinner {
    width: 20px;
    height: 20px;
  }
  
  .telegram-loading-overlay {
    border-radius: 12px;
  }
}