/* ===========================
   ChatGPT & Gutenberg Styles
   =========================== */

:root{
  --cgg-blue: #26B5EA;
  --cgg-blue-dark:#129fd3;
  --cgg-blue-weak: #b0dcfa;
  --cgg-red:  #ff4d4f;
  --cgg-text: #111;
  --cgg-sub:  #666;

  /* 危险盒子图标大小（随标题字体同步） */
  --cgg-legend-icon-em: 1.25em;

  /* 对话气泡布局参数 */
  --cgg-avatar-col: 72px;         /* 左列宽 */
  --cgg-avatar-size: 64px;        /* 头像尺寸 */
  --cgg-col-gap: 12px;            /* 列间距 */
  --cgg-name-gap: 10px;           /* 头像与昵称距离（本次需求） */

  /* 气泡与三角的“从下往上”锚点（0~1 浮点） */
  --cgg-bubble-top-from-bottom: 0.75; /* 气泡顶部在头像的 75%（从下往上数） */
  --cgg-tri-pos-from-bottom:    0.35; /* 三角中心在头像的 45%（从下往上数） */

  /* 气泡三角尺寸 */
  --cgg-triangle-h: 20px;
  --cgg-triangle-w: 12px;
}

/* 仅作用于插件块/样式化块，统一上下留白 */
.cgg-rel,
.wp-block-cgg-box,
.wp-block-cgg-speech,
.wp-block-heading.is-style-cgg-h-blue,
.wp-block-heading.is-style-cgg-h-leftline,
.wp-block-heading.is-style-cgg-h-stitch,
.wp-block-quote.is-style-cgg-quote-linequote,
.wp-block-image.is-style-cgg-image-pinkframe,
.wp-block-image.is-style-cgg-image-blueframe{
  margin: 22px 0;
}

/* =========================================
   相关文章（16:10 缩略图，顶部 +2px）
   ========================================= */
.cgg-rel{ position:relative; color:var(--cgg-text); }

.cgg-rel__legend{
  position:absolute; top:-10px; left:14px;
  padding:2px 6px; font-size:12px; line-height:1.2;
  background:#fff; border-radius:3px; letter-spacing:.5px; z-index:2;
  border:1px solid var(--cgg-blue); color:var(--cgg-blue);
  pointer-events: none;
}
.cgg-rel__card{
  display:grid; grid-template-columns: 128px 1fr;
  gap:14px; align-items:center !important;
  text-decoration:none; color:var(--cgg-text) !important;
  border:1px solid var(--cgg-blue) !important; border-radius:8px !important;
  padding:14px 12px 12px !important;
  background:#fff !important;
}
.cgg-rel__thumb{
  position:relative !important; width:100% !important;
  aspect-ratio: 16 / 10 !important; height:auto !important;
  overflow:hidden !important; border-radius:5px !important;
  background: transparent !important;
  padding: 0 !important; margin: 0 !important; line-height: 0 !important; font-size: 0 !important;
  border:0 !important; box-shadow:none !important;
}
.cgg-rel__thumb img{
  display:block !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  margin:0 !important; padding:0 !important; background:transparent !important;
  border:0 !important; box-shadow:none !important; vertical-align:top !important;
}
.cgg-rel__title{
  margin:0 0 4px !important; font-size:14px !important; line-height:1.55 !important; letter-spacing:.2px;
  font-weight:500 !important; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cgg-rel__date{ font-size:12px !important; color:var(--cgg-sub) !important; }
.cgg-rel__placeholder, .cgg-rel__error{
  border:1px dashed #e5e5e5 !important; border-radius:8px !important; padding:12px !important; background:#fafafa !important;
  font-size:13px !important; color:#666 !important;
}
@media (max-width:520px){
  .cgg-rel__card{ grid-template-columns:110px 1fr !important; gap:12px !important; padding:12px 10px 10px !important; }
}

/* =========================================
   盒子：普通/标题（蓝）/危险（红）
   ========================================= */
.cgg-box{ position:relative; border-radius:8px !important; padding:18px 16px !important; background:#fff !important; color:var(--cgg-text) !important; font-size:15px; line-height:1.9; }
.cgg-box.is-plain{ border:1px solid var(--cgg-blue) !important; }

.cgg-box.is-title-blue,
.cgg-box.is-title-danger{ padding-top:40px !important; }
.cgg-box.is-title-blue{ border:1px solid var(--cgg-blue) !important; }
.cgg-box.is-title-danger{ border:1px solid var(--cgg-red)  !important; }

.cgg-box__legend{
  position:absolute; top:-12px; left:14px; padding:6px 12px;
  font-size:12px; font-weight:700; letter-spacing:.5px;
  border-radius:999px; color:#fff; background:var(--cgg-blue);
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.cgg-box.is-title-danger .cgg-box__legend{ background:var(--cgg-red); }

/* 危险图标（白底红叹号） */
.cgg-box.is-title-danger .cgg-box__legend{
  display:inline-flex; align-items:center; gap:8px;
  padding-left:10px; padding-right:12px;
}
.cgg-box.is-title-danger .cgg-box__legend::before{
  content:"";
  width:var(--cgg-legend-icon-em); height:var(--cgg-legend-icon-em);
  display:inline-block; flex:0 0 var(--cgg-legend-icon-em);
  background: no-repeat center/contain
    url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 24 24\'>\
<circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"%23ffffff\" stroke=\"%23ff4d4f\" stroke-width=\"2\"/>\
<path d=\"M12 7v7\" stroke=\"%23ff4d4f\" stroke-width=\"2\" stroke-linecap=\"round\"/>\
<circle cx=\"12\" cy=\"17\" r=\"1.6\" fill=\"%23ff4d4f\"/>\
</svg>');
}
.cgg-box__inner p{ margin:.8em 0 !important; }

/* =========================================
   对话气泡：按“从下往上”的百分比锚点
   - 三角：45%
   - 气泡顶部：75%（内容只向下拓展）
   ========================================= */
.wp-block-cgg-speech.cgg-speech,
.cgg-speech{
  position:relative !important;
  display:grid !important;
  grid-template-columns: var(--cgg-avatar-col) 1fr !important;
  align-items:start !important;                  /* 顶对齐，利于固定顶部锚点 */
  column-gap: var(--cgg-col-gap) !important;
  row-gap:0 !important;
  --wp--style--block-gap: 0 !important;          /* 阻断主题 block-gap 注入 */
}

/* 头像（强制圆形 & 防主题覆盖） */
.cgg-speech__avatarbtn,
.cgg-speech__avatar{
  width:var(--cgg-avatar-size) !important; height:var(--cgg-avatar-size) !important;
  border-radius:50% !important; overflow:hidden !important;
  display:block !important; object-fit:cover !important;
  border:0 !important; box-shadow:none !important; background:transparent !important;
}
.cgg-speech__avatarbtn{
  border:1px dashed #e5e5e5 !important; background:#fff !important; cursor:pointer !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:12px !important; color:#999 !important; text-align:center !important;
}
.cgg-speech__avatarbtn img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; border-radius:50% !important; }

/* 头像列容器：作为三角定位锚点；消灭主题外边距 */
.cgg-speech__avatarwrap{
  position:relative !important;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:flex-start !important; /* 头像从顶部开始 */
  gap:0 !important;
  --wp--style--block-gap: 0 !important;
}
.cgg-speech__avatarwrap > *{ margin:0 !important; }

/* 昵称：距离头像固定 10px */
.cgg-speech__name{
  margin-top: var(--cgg-name-gap) !important;
  font-size:12px !important; line-height:1.1 !important;
  color:#333 !important; text-align:center !important;
  display:block !important;
}

/* 编辑器控件默认外边距清零（编辑态） */
.editor-styles-wrapper .cgg-speech__avatarwrap .components-base-control,
.block-editor .cgg-speech__avatarwrap .components-base-control{
  margin:0 !important;
}
.editor-styles-wrapper .cgg-speech__avatarwrap .components-text-control__input,
.block-editor .cgg-speech__avatarwrap .components-text-control__input{
  margin:0 !important; padding:0 !important; text-align:center !important; font-size:12px !important;
}

/* 气泡：顶部锚到“从上往下 (1 - 0.75) = 25% 的头像高度处” */
.cgg-speech__bubble{
  position:relative !重要; /* 兼容少数主题，保留定位层 */
  position:relative !important;
  align-self:start !important; /* 顶对齐，之后靠 margin-top 精准定位 */
  margin-top: calc((1 - var(--cgg-bubble-top-from-bottom)) * var(--cgg-avatar-size)) !important; /* = 25% * 头像高 */
  background:var(--cgg-blue) !important; color:#fff !important;
  border:1px solid var(--cgg-blue) !important; border-radius:14px !important;
  padding:10px 12px !important;
  font-size:13px !important; line-height:1.9 !important; font-weight:300 !important;
  overflow:visible !important;
  z-index: 3 !important;
}
/* 取消历史残留三角或上移实现 */
.cgg-speech__bubble::before{ content:none !important; }
.cgg-speech::after{ content:none !important; }

/* 三角：中心锚到“从上往下 (1 - 0.45) = 55% 的头像高度处” */
.cgg-speech__avatarwrap::after{
  content:"" !important;
  position:absolute !important;
  top: calc((1 - var(--cgg-tri-pos-from-bottom)) * var(--cgg-avatar-size)) !important; /* = 55% * 头像高 */
  transform: translateY(-50%) !important;  /* 让三角的垂直中心落在该锚点 */
  left: calc(100% + var(--cgg-col-gap) - var(--cgg-triangle-w)) !important;
  width:0 !important; height:0 !important;
  border-top:  calc(var(--cgg-triangle-h) / 2) solid transparent !important;
  border-bottom: calc(var(--cgg-triangle-h) / 2) solid transparent !important;
  border-right: var(--cgg-triangle-w) solid var(--cgg-blue) !important;
  z-index: 2 !important;
  pointer-events:none !important;
}

.cgg-speech__bubble p{ margin:.4em 0 !important; }

/* =========================================
   标题 / 引用 / 图片 样式
   ========================================= */

/* 标题：蓝底圆角 */
.wp-block-heading.is-style-cgg-h-blue{
  background: var(--cgg-blue-weak) !important; color:#fff !important;
  padding:.5em .8em !important; border-radius:.5em !important;
}
/* 标题：左侧竖线 */
.wp-block-heading.is-style-cgg-h-leftline{
  padding:.25em .5em !important; color:#494949 !important;
  border-left:5px solid #7db4e6 !important; background:transparent !important;
}
/* 标题：白色缝线 */
.wp-block-heading.is-style-cgg-h-stitch{
  background:#dfefff !important; box-shadow:0 0 0 5px #dfefff !important;
  border:2px dashed #fff !important; padding:.2em .5em !important;
}

/* 引用：固定巨引号位置，禁用主题默认引号 */
.wp-block-quote.is-style-cgg-quote-linequote{
  position:relative !important;
  margin:22px 0 !important;
  padding:12px 16px 12px 68px !important;
  background:#f5f5f5 !important; color:#777 !important;
  border-left:4px solid #9dd4ff !important;
  box-shadow:0 2px 4px rgba(0,0,0,0.14) !important;
  font-style:italic !important; overflow:visible !important;
  border-top:none !important; border-right:none !important; border-bottom:none !important;
  quotes: none !important;
}
.wp-block-quote.is-style-cgg-quote-linequote p::before,
.wp-block-quote.is-style-cgg-quote-linequote p::after{ content:none !important; }
.wp-block-quote.is-style-cgg-quote-linequote::before{
  content:"“" !important;
  position:absolute !important;
  left:12px !important; top:8px !important;
  color:#9dd4ff !important; font-size:56px !important; line-height:1 !important;
  font-family: Georgia, "Times New Roman", "Hiragino Mincho ProN", serif !important;
  pointer-events:none !important; z-index:0 !important;
}
.wp-block-quote.is-style-cgg-quote-linequote > *{
  position:relative !important; z-index:1 !important;
}
.wp-block-quote.is-style-cgg-quote-linequote p{
  margin:7px 0 !important; line-height:1.7 !important;
}
.wp-block-quote.is-style-cgg-quote-linequote cite{
  display:block !important; text-align:right !important; color:#888 !important; font-size:.9em !important;
}

/* 图片框：四边同色 + 顶条色，与图片留出间距（不贴顶） */
.wp-block-image.is-style-cgg-image-pinkframe,
.wp-block-image.is-style-cgg-image-blueframe{
  position:relative !important;
  padding:18px 12px 10px !important;   /* 顶条10px，图与顶条间距8px（18-10） */
  border-radius:0 !important; background:#fff !important;
}
.wp-block-image.is-style-cgg-image-pinkframe{ border:1px solid #ff7d6e !important; }
.wp-block-image.is-style-cgg-image-blueframe{ border:1px solid var(--cgg-blue) !important; }

.wp-block-image.is-style-cgg-image-pinkframe::before,
.wp-block-image.is-style-cgg-image-blueframe::before{
  content:"" !important; position:absolute !important; left:0 !important; right:0 !important; top:0 !important; height:10px !important;
  background:#ff7d6e !important;
}
.wp-block-image.is-style-cgg-image-blueframe::before{ background:var(--cgg-blue) !important; }

.wp-block-image.is-style-cgg-image-pinkframe img,
.wp-block-image.is-style-cgg-image-blueframe img{
  display:block !important; width:100% !important; height:auto !important;
  margin:0 !important; padding:0 !important; background:transparent !important;
  border:0 !important; box-shadow:none !important;
}
.wp-block-image.is-style-cgg-image-pinkframe figcaption,
.wp-block-image.is-style-cgg-image-blueframe figcaption{
  margin-top:8px !important; font-size:12px !important; font-style:italic !important; font-weight:400 !important;
}
.wp-block-image.is-style-cgg-image-pinkframe figcaption{ color:#ff7d6e !important; }
.wp-block-image.is-style-cgg-image-blueframe figcaption{ color:var(--cgg-blue) !important; }