/* Waline Theme overrides for Daybook */
#waline {
  --waline-theme-color: var(--color-accent);
  --waline-active-color: var(--color-hover-text);
  
  --waline-color: var(--color-text);
  --waline-bg-color: transparent;
  --waline-bg-color-light: transparent;
  --waline-bg-color-hover: transparent;
  --waline-border-color: var(--color-line);
  --waline-disable-bg-color: var(--color-paper);
  --waline-disable-color: var(--color-muted);
  
  --waline-bq-color: var(--color-line);
  
  --waline-info-bg-color: transparent;
  --waline-info-color: var(--color-muted);

  --waline-border: 1px solid var(--waline-border-color);
  --waline-avatar-radius: 50%;
  
  margin-top: 1.5rem;
}

/* Make panel transparent and blend in */
#waline .wl-panel {
  background: transparent;
  border: var(--waline-border);
  border-radius: 8px;
  margin: 0;
}

#waline .wl-header {
  border-bottom: var(--waline-border);
}

#waline .wl-header-item {
  border-right: var(--waline-border);
}
#waline .wl-header-item:last-child {
  border-right: none;
}

#waline .wl-editor {
  background: transparent;
}

#waline .wl-editor::placeholder {
  color: var(--color-muted);
  opacity: 0.6;
}

#waline .wl-btn {
  color: var(--color-text);
  border: var(--waline-border);
  background: transparent;
  transition: all var(--duration-fast) var(--ease-out);
}
#waline .wl-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

#waline .wl-btn.primary {
  color: var(--color-page);
  background: var(--color-text);
  border-color: var(--color-text);
}
#waline .wl-btn.primary:hover {
  background: var(--color-hover-text);
  border-color: var(--color-hover-text);
}

#waline .wl-reaction {
  display: none;
}

#waline .wl-card-item {
  padding: 1rem 0;
}

#waline .wl-comment .wl-content p {
  color: var(--color-text);
  font-size: var(--note-text-size);
  line-height: 1.7;
}

#waline .wl-emoji-popup {
  background: var(--color-paper);
  border: var(--waline-border);
}

#waline .wl-gif-popup {
  background: var(--color-paper);
  border: var(--waline-border);
}

/* Custom RSS Icon */
#waline .wl-rss svg {
  display: none;
}

#waline .wl-rss a {
  align-items: center; /* 确保图标和文字垂直居中对齐 */
}

#waline .wl-rss a::before {
  content: "rss_feed";
  font-family: "Material Symbols Rounded";
  font-weight: 400;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-page);
  background-color: var(--color-text);
  border-radius: 4px;
  
  /* ⬅️ 只需要在这里调整图标的字号即可，背景框会自动按比例撑开！ */
  font-size: 12px; 
  
  /* 背景框相对于内部图标的倍数（1.25倍），这样无论 font-size 怎么变都不会被截断 */
  width: 1.3em;
  height: 1.3em;
  
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

/* Mobile adaptation for RSS */
#waline .wl-rss.expanded {
  max-width: 100% !important;
}

@media (hover: none) {
  #waline .wl-rss:hover {
    max-width: 16px; /* Disable default CSS hover expansion on touch devices */
  }
}