/* ===== Page shell ===== */
#cw-ai-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 16px;
}

.cw-ai-shell{
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 14px;
  align-items: start;
  --cw-chat-height: 520px;
}

@media (max-width: 1100px){
  .cw-ai-shell{ grid-template-columns: 1fr; }
  .cw-ai-right{ order: 3; }
  .cw-ai-left{ order: 2; }
}

/* ===== Cards ===== */
.cw-ai-card{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}

.cw-ai-card-title{
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}

.cw-ai-hint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .7;
}

.cw-ai-bullets{
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.45;
}

/* ===== Header ===== */
.cw-ai-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: #0b0f1a;
  color: #fff;
}

.cw-ai-title{
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.cw-ai-subtitle{
  font-size: 12px;
  opacity: .8;
  margin-top: 4px;
}

.cw-ai-inquiry-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffd400;
  color: #000;
}

/* ===== Welcome ===== */
.cw-ai-welcome{
  margin-top: 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  background: #fff;
}

/* ===== Log ===== */
.cw-ai-log{
  margin-top: 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  height: var(--cw-chat-height);
  overflow: auto;
}

.cw-ai-msg{
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  word-break: break-word;
}

.cw-ai-msg.user{
  background: #0b0f1a;
  color: #fff;
  margin-left: 10%;
}

.cw-ai-msg.ai{
  background: rgba(0,0,0,.06);
  color: #000;
  margin-right: 10%;
}

.cw-ai-msg a{ text-decoration: underline; }

/* ===== Input ===== */
.cw-ai-input{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:center;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: #fff;
  padding: 10px;
}

#cw-ai-text{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font-size: 14px;
  padding: 8px 10px;
}

#cw-ai-send{
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 13px;
  background: #0b0f1a;
  color: #fff;
  cursor: pointer;
}

#cw-ai-send:disabled{ opacity: .6; cursor:not-allowed; }

/* ===== Footer ===== */
.cw-ai-footer{
  margin-top: 10px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  opacity: .75;
  padding: 0 2px;
}

/* ===== Chips ===== */
.cw-ai-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cw-ai-chip{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
}

.cw-ai-chip:hover{ background: rgba(0,0,0,.04); }

/* ===== Media list ===== */
.cw-ai-media-note{
  font-size: 12px;
  opacity: .7;
  margin-bottom: 10px;
}

.cw-ai-media{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.cw-ai-media-item{
  text-align:left;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius: 14px;
  padding: 10px;
  cursor: pointer;
}

.cw-ai-media-item:hover{ background: rgba(0,0,0,.04); }

.cw-ai-media-title{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
}

.cw-ai-media-sub{
  margin-top: 6px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items:center;
}

.cw-ai-badge{
  display:inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  font-size: 11px;
  font-weight: 800;
}

.cw-ai-loc{
  font-size: 12px;
  opacity: .75;
}

/* ===== Quick Questions：整体压缩 ===== */
#cw-ai-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;               /* 原来太松 */
}

/* 单个 chip */
#cw-ai-chips button,
#cw-ai-chips .cw-ai-chip {
  min-height: unset !important;
  padding: 6px 10px !important;  /* 关键：缩高度 */
  font-size: 12px !important;    /* 比 14 小一档 */
  line-height: 1.3 !important;
  color: #111 !important;        /* 黑字，100% 可见 */
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 999px;          /* 保留 chip 感 */
  text-align: left;
  white-space: normal;           /* 允许多行 */
}

/* hover 轻一点 */
#cw-ai-chips button:hover {
  background: #f5f7fa !important;
}

/* ===========================
   CityWindow AI Theme v2
   White page + dark header + clean cards
   (Paste at END of ai-ui.css)
   =========================== */

/* 1) 页面背景与整体基调 */
#cw-ai-page{
  background: #f6f8fb;              /* 白底带一点蓝灰，干净 */
  border-radius: 18px;
}

/* 2) 卡片：统一浅色 + 轻阴影，层级更舒服 */
#cw-ai-page .cw-ai-card,
#cw-ai-page .cw-ai-welcome,
#cw-ai-page .cw-ai-log,
#cw-ai-page .cw-ai-input{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

/* 3) 头部：深色科技，但不要“闷黑” */
#cw-ai-page .cw-ai-header{
  background: radial-gradient(120% 180% at 20% 0%, #1d2a4a 0%, #0b1220 55%, #070b14 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 16px 36px rgba(2, 6, 23, .25);
}

/* 标题/副标题更清晰 */
#cw-ai-page .cw-ai-title{ color:#fff !important; letter-spacing:.2px; }
#cw-ai-page .cw-ai-subtitle{ color: rgba(255,255,255,.78) !important; }

/* 4) 主按钮：科技蓝（比黄更“AI”） */
#cw-ai-page .cw-ai-inquiry-btn{
  background: linear-gradient(180deg, #2d6cff 0%, #1f54d8 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(45,108,255,.25);
}

/* 5) chips：浅底 + 蓝色描边，像“快捷标签” */
#cw-ai-page .cw-ai-chip,
#cw-ai-page #cw-ai-chips button{
  background: #f8fafc !important;
  border: 1px solid rgba(45,108,255,.22) !important;
  color: #0f172a !important;
}

#cw-ai-page .cw-ai-chip:hover,
#cw-ai-page #cw-ai-chips button:hover{
  background: #eef4ff !important;
  border-color: rgba(45,108,255,.40) !important;
}

/* 6) 对话气泡：用户深色、AI浅色（层级强） */
#cw-ai-page .cw-ai-msg.user{
  background: #0b1220 !important;
  color: #fff !important;
}

#cw-ai-page .cw-ai-msg.ai{
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, .08);
}

/* 7) 输入区：更像产品，不要“表单感” */
#cw-ai-page #cw-ai-text{
  background: transparent;
  color:#0f172a;
}

#cw-ai-page #cw-ai-send{
  background: linear-gradient(180deg, #0b1220 0%, #0a1020 100%) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.18);
}

/* 8) 右侧媒体卡：更像“列表项”，增加质感 */
#cw-ai-page .cw-ai-media-item{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.05);
}

#cw-ai-page .cw-ai-badge{
  background: rgba(45,108,255,.12) !important;
  color: #1f54d8 !important;
}

/* ============ Media List (Right) : thumbnail left, name + ID right ============ */

.cw-ai-media-row{ display:flex; gap:10px; align-items:center; }
.cw-ai-media-thumb{
  width:44px; height:44px; border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  flex:0 0 44px;
}
.cw-ai-media-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cw-ai-media-meta{ min-width:0; }

/* 右侧媒体：标题黑色 + ID 更小（不改位置） */
.cw-ai-media-meta .cw-ai-media-title,
.cw-ai-media-meta .cw-ai-title,
.cw-ai-media-meta .title{
  color: #0b1220 !important;   /* 黑色标题 */
  font-weight: 800 !important;
  font-size: 10px !important; /* 适中 */
  line-height: 1.2 !important;
}

/* ID 标签更小一点 */
.cw-ai-media-meta .cw-ai-badge,
.cw-ai-media-meta .cw-ai-id,
.cw-ai-media-meta .id{
  font-size: 11px !important;     /* ✅ 更小 */
  padding: 3px 8px !important;    /* ✅ 更紧凑 */
  font-weight: 700 !important;
  border-radius: 999px !important;
}

/* 右侧 Media List：只显示约10条，内部滚动 */
.cw-ai-right .cw-ai-card{
  max-height: 640px;     /* 你可以调 560~720 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 让列表区域滚动 */
#cw-ai-media{
  overflow: auto;
  padding-right: 6px;    /* 给滚动条留点空间 */
  flex: 1;
}

/* 单条高度更统一（可选） */
.cw-ai-media-item{
  padding: 10px;
}

@media (max-width: 768px) {

  /* 头部区域里的所有按钮/链接按钮：统一缩小 */
  #cw-ai-root a,
  #cw-ai-root button {
    font-size: 14px !important;
    text-align=center;
    line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  }

  /* 更进一步：把“像按钮的链接”缩 padding */
  #cw-ai-root a {
    padding: 8px 12px !important;
  }

  /* 如果 Buyer Inquiry 是 button */
  #cw-ai-root button {
    padding: 8px 12px !important;
  }

}