/* 青春校园风Mastodon自定义CSS */

/* 全局背景 - 实时流光滚动效果 */
@keyframes flowing-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 浅色模式背景 */
.ui {
  background: linear-gradient(270deg, 
    #f0f8ff, #e6f3ff, #fef7f0, #f0fff0, 
    #fff0f5, #f5f0ff, #f0ffff, #fffacd,
    #f0f8ff, #e6f3ff, #fef7f0, #f0fff0) !important;
  background-size: 800% 800% !important;
  animation: flowing-gradient 15s ease infinite !important;
  background-attachment: fixed !important;
}

/* 深色模式背景 */
.theme-mastodon-dark .ui,
.theme-contrast .ui,
[data-theme="dark"] .ui {
  background: linear-gradient(270deg, 
    #1a1a2e, #16213e, #0f3460, #533483, 
    #7209b7, #2d1b69, #11235a, #1a1a2e,
    #16213e, #0f3460, #533483, #7209b7) !important;
  background-size: 800% 800% !important;
  animation: flowing-gradient 15s ease infinite !important;
  background-attachment: fixed !important;
}

/* 主容器背景透明化 */
.columns-area {
  background: transparent !important;
}

/* 列容器美化 - 毛玻璃效果 */
.column {
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(15px) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  margin: 10px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 深色模式列容器 */
.theme-mastodon-dark .column,
.theme-contrast .column,
[data-theme="dark"] .column {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.column:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
}

.theme-mastodon-dark .column:hover,
.theme-contrast .column:hover,
[data-theme="dark"] .column:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

/* 头像正圆形 */
.account__avatar,
.account__avatar img,
.avatar,
.avatar img {
  border-radius: 50% !important;
}

/* 按钮美化 - 胶囊形状 */
.button,
.icon-button,
.text-icon-button,
.floating-action-button {
  border-radius: 25px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: linear-gradient(45deg, #ff9a9e, #fecfef) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(255, 154, 158, 0.3) !important;
}

.button:hover,
.icon-button:hover,
.text-icon-button:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(255, 154, 158, 0.4) !important;
}

/* 状态卡片美化 - 增加更大间距 */
.status,
.detailed-status,
.notification {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  margin: 18px 20px 25px 20px !important;
  padding: 18px !important;
  transition: all 0.3s ease !important;
}

/* 深色模式状态卡片 */
.theme-mastodon-dark .status,
.theme-mastodon-dark .detailed-status,
.theme-mastodon-dark .notification,
.theme-contrast .status,
.theme-contrast .detailed-status,
.theme-contrast .notification,
[data-theme="dark"] .status,
[data-theme="dark"] .detailed-status,
[data-theme="dark"] .notification {
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.status:hover,
.detailed-status:hover,
.notification:hover {
  background: rgba(255, 255, 255, 0.75) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.theme-mastodon-dark .status:hover,
.theme-mastodon-dark .detailed-status:hover,
.theme-mastodon-dark .notification:hover,
.theme-contrast .status:hover,
.theme-contrast .detailed-status:hover,
.theme-contrast .notification:hover,
[data-theme="dark"] .status:hover,
[data-theme="dark"] .detailed-status:hover,
[data-theme="dark"] .notification:hover {
  background: rgba(0, 0, 0, 0.7) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

/* 导航栏美化 */
.drawer {
  background: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(20px) !important;
  border-radius: 0 20px 20px 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.theme-mastodon-dark .drawer,
.theme-contrast .drawer,
[data-theme="dark"] .drawer {
  background: rgba(0, 0, 0, 0.5) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 搜索框美化 */
.search__input,
.compose-form__autosuggest-wrapper textarea {
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 25px !important;
  border: none !important;
  backdrop-filter: blur(5px) !important;
  transition: all 0.3s ease !important;
}

.theme-mastodon-dark .search__input,
.theme-mastodon-dark .compose-form__autosuggest-wrapper textarea,
.theme-contrast .search__input,
.theme-contrast .compose-form__autosuggest-wrapper textarea,
[data-theme="dark"] .search__input,
[data-theme="dark"] .compose-form__autosuggest-wrapper textarea {
  background: rgba(0, 0, 0, 0.6) !important;
  color: #ffffff !important;
}

.search__input:focus,
.compose-form__autosuggest-wrapper textarea:focus {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 0 20px rgba(255, 182, 193, 0.5) !important;
  transform: scale(1.02) !important;
}

.theme-mastodon-dark .search__input:focus,
.theme-mastodon-dark .compose-form__autosuggest-wrapper textarea:focus,
.theme-contrast .search__input:focus,
.theme-contrast .compose-form__autosuggest-wrapper textarea:focus,
[data-theme="dark"] .search__input:focus,
[data-theme="dark"] .compose-form__autosuggest-wrapper textarea:focus {
  background: rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.5) !important;
}

/* 背景图片次顶层 */
.parallax,
.account__header__image,
.account__header__image img,
.hero-image,
*[class*="parallax"],
*[class*="header-image"] {
  position: relative !important;
  z-index: 9000 !important;
}

/* account__header__bar - 设置最低层级 */
.account__header__bar {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 20px 20px 0 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 深色模式 account__header__bar */
.theme-mastodon-dark .account__header__bar,
.theme-contrast .account__header__bar,
[data-theme="dark"] .account__header__bar {
  background: rgba(0, 0, 0, 0.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 标签页和其他导航栏 - 低层级 */
.column-header,
.column-back-button,
.account__header__tabs,
.drawer__header {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 20px 20px 0 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  position: relative !important;
  z-index: 10 !important; /* 低层级 */
}

/* 深色模式标签页和导航栏 */
.theme-mastodon-dark .column-header,
.theme-mastodon-dark .column-back-button,
.theme-mastodon-dark .account__header__tabs,
.theme-mastodon-dark .drawer__header,
.theme-contrast .column-header,
.theme-contrast .column-back-button,
.theme-contrast .account__header__tabs,
.theme-contrast .drawer__header,
[data-theme="dark"] .column-header,
[data-theme="dark"] .column-back-button,
[data-theme="dark"] .account__header__tabs,
[data-theme="dark"] .drawer__header {
  background: rgba(0, 0, 0, 0.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 完全透明的按钮容器 */
.ui__header__links,
.account__header__tabs__buttons {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  position: relative !important;
  z-index: 50 !important; /* 中等层级，但仍低于头像 */
}

/* 深色模式下也保持完全透明 */
.theme-mastodon-dark .ui__header__links,
.theme-mastodon-dark .account__header__tabs__buttons,
.theme-contrast .ui__header__links,
.theme-contrast .account__header__tabs__buttons,
[data-theme="dark"] .ui__header__links,
[data-theme="dark"] .account__header__tabs__buttons {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
}

/* 媒体预览圆角 */
.media-gallery,
.video-player,
.attachment-list {
  border-radius: 15px !important;
  overflow: hidden !important;
}

/* 表情符号反应美化 */
.reactions-bar__item {
  background: rgba(255, 255, 255, 0.7) !important;
  border-radius: 20px !important;
  transition: all 0.3s ease !important;
}

.reactions-bar__item:hover {
  background: rgba(255, 182, 193, 0.8) !important;
  transform: scale(1.1) !important;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px !important;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #ff9a9e, #fecfef) !important;
  border-radius: 10px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #ff7a7e, #fea0df) !important;
}

/* 飘动樱花特效 */
@keyframes sakura-fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

.ui::before {
  content: '🌸';
  position: fixed;
  top: -50px;
  left: 10%;
  font-size: 20px;
  animation: sakura-fall 10s linear infinite;
  pointer-events: none;
  z-index: -1;
}

.ui::after {
  content: '🌸';
  position: fixed;
  top: -50px;
  right: 10%;
  font-size: 18px;
  animation: sakura-fall 12s linear infinite 2s;
  pointer-events: none;
  z-index: -1;
}

/* 用户昵称彩色渐变 - 修复白色背景显示问题 */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.account__display-name strong,
.display-name strong,
.account__display-name__html,
.display-name__html {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #ff6b6b) !important;
  background-size: 400% 400% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradient-shift 6s ease-in-out infinite !important;
  font-weight: bold !important;
  color: transparent !important;
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 链接颜色美化 */
a {
  color: #e91e63 !important;
  transition: color 0.3s ease !important;
}

a:hover {
  color: #c2185b !important;
}

/* 时间线加载动画 */
@keyframes gentle-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.loading-indicator {
  animation: gentle-pulse 2s ease-in-out infinite !important;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .column {
    margin: 5px !important;
    border-radius: 15px !important;
  }
  
  .status,
  .detailed-status,
  .notification {
    border-radius: 12px !important;
    margin: 15px 12px 20px 12px !important;
    padding: 15px !important;
  }
}

/* 文字颜色优化 */
.status__content,
.detailed-status__meta {
  color: #2c3e50 !important;
}