/*
 
  这是[徐伟轩 jack-xu]博客专有版权，未经许可请勿修改、传播！
  请不要随便复制或修改，尊重原创！  
  记住，代码是有生命的，我会守护它！
  [评论、悬浮、海报 等公用]
*/

 /* 悬浮操作按钮 - 沿着文章内容左侧边框线 */
        .xwxbk-floating-actions {
            position: fixed;
            top: 50%;
            left: calc(50% - 400px - 268px);
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 100;
            display: none;
        }

        @media (min-width: 1300px) {
            .xwxbk-floating-actions {
                display: flex;
            }
        }

        .xwxbk-action-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--xwx-card-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--xwx-text-color);
            font-size: 1.2rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: var(--xwx-transition);
            border: none;
            position: relative;
            border: 1px solid var(--xwx-border-color);
        }

        .xwxbk-action-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
            color: var(--xwx-primary-color);
            background: var(--xwx-hover-bg);
        }

        .xwxbk-action-btn.active {
            background: var(--xwx-primary-color);
            color: white;
        }

        .xwxbk-action-tooltip {
            position: absolute;
            left: 60px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--xwx-card-bg);
            color: var(--xwx-text-color);
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.8rem;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: var(--xwx-transition);
            pointer-events: none;
            border: 1px solid var(--xwx-border-color);
            box-shadow: var(--xwx-shadow);
        }

        .xwxbk-action-btn:hover .xwxbk-action-tooltip {
            opacity: 1;
            visibility: visible;
            left: 65px;
        }
/*评论验证码*/					
#captchadiv {
  margin-top: 2rem;
  background: var(--bg-color);
  padding: 1.5rem;
  border-radius: var(--border-radius);
}
#captcha {
  margin-right: 0.4rem;  
  padding: 0.6rem;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  font-family: inherit;
}
#captchaimage {
    height: 39px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    transition: opacity 0.2s;
}
#captchadiv textarea {
  min-height: 120px;
  resize: vertical;
} 					
/*外链安全提示*/
a.attionurl {
  position: relative;
  color: #8852df;
}
a.attionurl::after {
  content: "↗";
  font-size: 0.8em;
  margin-left: 3px;
  color: #999;
}
.custom-alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.custom-alert {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  display: flex;
  gap: 20px;
  animation: slideIn 0.3s ease;
}

.alert-icon {
  font-size: 48px;
  color: #ffb300;
  flex-shrink: 0;
}

.alert-content {
  flex-grow: 1;
}

.alert-content h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 1.5em;
}

.alert-content p {
  color: #666;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

#targetUrl {
  color: #007bff;
  word-break: break-all;
  font-weight: bold;
}

.alert-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

button {
/*  padding: 10px 24px; */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.confirm-btn {
  background: #007bff;
  color: white;
  padding: 10px 24px; 
}

.confirm-btn:hover {
  background: #0056b3;
}

.cancel-btn {
  background: #f0f0f0;
  color: #666;
  padding: 10px 14px; 
}

.cancel-btn:hover {
  background: #e0e0e0;
}

@keyframes slideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.alert-content p.no-url {
  text-align: center;
  padding: 20px 0;
}		


/* 海报生成相关样式 */
 /* 海报模态框样式 */
.poster-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* 海报内容容器 */
.poster-container {
  position: relative;
  /*background: white;*/
  border-radius: 24px;
 /* padding: 30px; */
  width: 90%;
  max-width: 420px;
  transform: scale(0.98);
  transition: transform 0.3s ease;
}

.poster-container:hover {
  transform: scale(1);
}
.poster-canvas {
  width: 396px;
  height: 473px;
  border-radius: 16px;
  display: block;
  margin: 0 auto;
}

.download-tip {
  color: #666;
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  padding: 0 20px;
}


/* 关闭按钮 */
.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: #525252d4;
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease;
}

.modal-close-btn:hover {
  background: #ff6b81;
}
/* 操作按钮组 */
.poster-actions {
  margin-top: 25px;
  display: flex;
  gap: 16px;
  justify-content: center;
}

.download-btn,
.retry-btn {
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.download-btn {
  background: linear-gradient(135deg, #2ed573 0%, #27ae60 100%);
  color: white;
}

.download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 213, 115, 0.3);
}

.retry-btn {
  background: linear-gradient(135deg, #3742fa 0%, #2c36d1 100%);
  color: white;
}

.retry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(55, 66, 250, 0.3);
}

/* 错误提示 */
.error-message {
  color: #ff4757;
  text-align: center;
  margin-top: 18px;
  font-size: 14px;
  display: none;
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
}

/* 画布基础样式 */
.poster-canvas {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .poster-container {
    padding: 20px;
    border-radius: 16px;
  }
  
  .poster-actions {
    flex-direction: column;
    gap: 12px;
  }
  
  .download-btn,
  .retry-btn {
    width: 100%;
    justify-content: center;
  }
  
  .modal-close-btn {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
  }
}