/* ==========================================================
   小戏芽 · 星城 AI 导游（智谱 GLM + 网页知识库）
   加载顺序：style.css → extra.css → ip.css
   只新增 ip- 前缀样式，不改动原有任何选择器
   ========================================================== */
:root{
  --ip-zhu:#C3272B;
  --ip-zhu-deep:#8E1C1C;
  --ip-jin:#B8893B;
  --ip-jin-light:#E3BE72;
  --ip-paper:#FFFCF5;
  --ip-line:rgba(184,137,59,.34);
}

/* ---------- 1. 导航栏左侧 · IP 入口 ---------- */
.ip-entry{
  position:relative;flex:0 0 auto;
  display:flex;align-items:center;gap:8px;
  height:50px;padding:3px 13px 3px 4px;margin:0 12px 0 0;
  background:linear-gradient(135deg,#FFFAF0 0%,#F8ECD8 100%);
  border:1px solid var(--ip-line);border-right:1px solid var(--ip-line);
  border-radius:999px;cursor:pointer;font-family:inherit;color:var(--mo);
  box-shadow:0 4px 14px -10px rgba(142,28,28,.7),inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .25s,box-shadow .25s,border-color .25s;
  -webkit-tap-highlight-color:transparent;
}
.ip-entry:hover{
  transform:translateY(-1px);
  border-color:var(--ip-jin);
  box-shadow:0 10px 22px -12px rgba(142,28,28,.75),inset 0 1px 0 rgba(255,255,255,.9);
}
.ip-entry:focus-visible{outline:2px solid var(--ip-zhu);outline-offset:2px;}
.ip-ava{
  position:relative;flex:0 0 42px;width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#FFF9E9 0%,#F3DFC0 100%);
  border:2px solid var(--ip-jin-light);overflow:hidden;
  box-shadow:0 0 0 2px rgba(195,39,43,.12),0 3px 8px -4px rgba(90,50,20,.6);
}
.ip-ava::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);pointer-events:none;
}
.ip-ava img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transform:scale(1.16);animation:ipFloat 3.4s ease-in-out infinite;
}
@keyframes ipFloat{0%,100%{transform:scale(1.16) translateY(0);}50%{transform:scale(1.16) translateY(-2px);}}
.ip-txt{display:block;text-align:left;line-height:1.35;white-space:nowrap;}
.ip-txt b{
  display:block;font-family:"STKaiti","KaiTi",serif;font-size:14px;
  letter-spacing:.08em;color:var(--ip-zhu-deep);
}
.ip-txt small{display:block;font-size:10px;letter-spacing:.06em;color:#8A7658;}
.ip-badge{
  position:absolute;top:-3px;right:-4px;
  min-width:22px;height:18px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#D8393C,#A81D22);color:#FFF6E6;
  font-size:9px;font-weight:700;letter-spacing:.06em;border-radius:999px;
  border:1.5px solid #FFFAF0;box-shadow:0 2px 6px -2px rgba(142,28,28,.8);
}
.ip-badge::after{
  content:"";position:absolute;inset:-4px;border-radius:999px;
  border:1px solid rgba(195,39,43,.5);animation:ipPulse 2.6s ease-out infinite;
}
@keyframes ipPulse{0%{transform:scale(.85);opacity:.75;}100%{transform:scale(1.5);opacity:0;}}

/* ---------- 2. 对话面板 ---------- */
.ip-panel{
  position:fixed;right:22px;bottom:22px;z-index:1200;
  width:364px;height:min(552px,calc(100vh - 104px));
  display:flex;flex-direction:column;
  background:var(--ip-paper);border:1px solid var(--ip-line);border-radius:20px;
  box-shadow:0 26px 64px -22px rgba(58,30,20,.55),0 2px 8px -4px rgba(58,30,20,.25);
  overflow:hidden;
  opacity:0;transform:translateY(18px) scale(.97);pointer-events:none;
  transition:opacity .28s,transform .28s;
}
.ip-panel.on{opacity:1;transform:none;pointer-events:auto;}
.ip-head{
  position:relative;flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:13px 12px 13px 14px;
  background:
    radial-gradient(circle at 12% 120%,rgba(227,190,114,.30),transparent 45%),
    linear-gradient(110deg,#FBF1DE 0%,#FFF9EE 100%);
  border-bottom:1px solid var(--ip-line);
}
.ip-head-ava{
  flex:0 0 42px;width:42px;height:42px;border-radius:50%;object-fit:cover;
  background:#F6E7CC;border:2px solid var(--ip-jin-light);
}
.ip-head-txt{flex:1;min-width:0;line-height:1.35;}
.ip-head-txt strong{display:block;font-family:"STKaiti","KaiTi",serif;font-size:16px;letter-spacing:.08em;color:var(--ip-zhu-deep);}
.ip-head-txt span{display:block;font-size:10.5px;color:#8A7658;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ip-status{
  flex:0 0 auto;font-size:9.5px;letter-spacing:.03em;padding:3px 7px;border-radius:999px;
  background:#F0E4CC;color:#7A653F;border:1px solid rgba(184,137,59,.35);
}
.ip-status.on{background:#E4F3EC;color:#1F6B4B;border-color:rgba(31,107,75,.3);}
.ip-status.warn{background:#FCE8E3;color:#A4412E;border-color:rgba(164,65,46,.3);}
.ip-icon{
  flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--ip-line);border-radius:50%;
  color:#8A7658;font-size:15px;line-height:1;cursor:pointer;transition:.2s;font-family:inherit;
}
.ip-icon:hover{background:var(--ip-zhu);color:#FFF6E6;border-color:var(--ip-zhu);transform:rotate(12deg);}

.ip-banner{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:linear-gradient(90deg,rgba(195,39,43,.07),rgba(227,190,114,.10));
  border-bottom:1px solid rgba(184,137,59,.18);
  font-size:11px;color:#7A653F;
}
.ip-banner .ip-seal{
  flex:0 0 auto;padding:2px 6px;border-radius:4px;background:var(--ip-zhu);color:#FFF6E6;
  font-family:"STKaiti","KaiTi",serif;font-size:11px;letter-spacing:.1em;
}

.ip-log{
  flex:1 1 auto;overflow-y:auto;padding:14px 14px 6px;scroll-behavior:auto;
  background:url("../images/ip/ip-ghost.png") no-repeat right 6px bottom 6px / 132px auto;
}
.ip-log::-webkit-scrollbar{width:6px;}
.ip-log::-webkit-scrollbar-thumb{background:rgba(184,137,59,.35);border-radius:6px;}
.ip-msg{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px;}
.ip-msg.me{flex-direction:row-reverse;}
.ip-mini{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#F3E3C7;border:1px solid var(--ip-line);
  font-size:10px;color:#7A653F;
}
.ip-mini img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);}
.ip-bubble{
  max-width:76%;padding:9px 12px;font-size:13px;line-height:1.75;
  white-space:pre-wrap;word-break:break-word;
  border-radius:14px;
}
.ip-msg.ai .ip-bubble{background:#F7EFDF;border:1px solid rgba(184,137,59,.28);border-top-left-radius:4px;}
.ip-msg.me .ip-bubble{background:linear-gradient(135deg,#C3272B,#A81D22);color:#FFF6E6;border-top-right-radius:4px;}
.ip-sys{
  margin:2px auto 12px;padding:5px 10px;width:fit-content;max-width:90%;
  font-size:10.5px;color:#8A7658;background:rgba(184,137,59,.10);
  border-radius:999px;text-align:center;
}
.ip-typing{display:inline-flex;gap:4px;align-items:center;height:16px;}
.ip-typing i{width:5px;height:5px;border-radius:50%;background:var(--ip-jin);animation:ipBlink 1.1s infinite;}
.ip-typing i:nth-child(2){animation-delay:.18s;}
.ip-typing i:nth-child(3){animation-delay:.36s;}
@keyframes ipBlink{0%,80%,100%{opacity:.25;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}

.ip-quick{flex:0 0 auto;display:flex;gap:6px;flex-wrap:wrap;padding:8px 14px 4px;}
.ip-chip{
  padding:5px 10px;font-size:11px;font-family:inherit;cursor:pointer;
  background:#FFF8EA;color:#7A5C32;border:1px solid rgba(184,137,59,.35);
  border-radius:999px;transition:.2s;
}
.ip-chip:hover{background:var(--ip-zhu);color:#FFF6E6;border-color:var(--ip-zhu);transform:translateY(-1px);}
.ip-form{flex:0 0 auto;display:flex;gap:8px;padding:8px 14px 10px;}
.ip-form input{
  flex:1;min-width:0;height:38px;padding:0 12px;font-family:inherit;font-size:13px;
  background:#FFFDF8;border:1px solid var(--ip-line);border-radius:999px;color:var(--mo);
  outline:none;transition:.2s;
}
.ip-form input:focus{border-color:var(--ip-zhu);box-shadow:0 0 0 3px rgba(195,39,43,.10);}
.ip-form button{
  flex:0 0 auto;height:38px;padding:0 16px;font-family:inherit;font-size:13px;cursor:pointer;
  background:linear-gradient(135deg,#C3272B,#9E1D21);color:#FFF6E6;
  border:none;border-radius:999px;box-shadow:0 6px 14px -8px rgba(142,28,28,.9);transition:.2s;
}
.ip-form button:hover{filter:brightness(1.08);transform:translateY(-1px);}
.ip-foot{
  flex:0 0 auto;padding:0 14px 10px;font-size:10px;color:#9C8A6F;text-align:center;
}
.ip-foot a{color:var(--ip-zhu);text-decoration:none;border-bottom:1px dotted var(--ip-zhu);}

/* ---------- 3. AI 接口设置 ---------- */
.ip-cfg{
  position:absolute;inset:0;z-index:8;overflow-y:auto;
  padding:18px 18px 22px;background:var(--ip-paper);
}
.ip-cfg[hidden]{display:none;}
.ip-cfg h3{
  font-family:"STKaiti","KaiTi",serif;font-size:17px;color:var(--ip-zhu-deep);
  margin-bottom:4px;letter-spacing:.06em;
}
.ip-cfg .ip-cfg-sub{font-size:11px;color:#8A7658;line-height:1.7;margin-bottom:14px;}
.ip-field{display:block;margin-bottom:11px;}
.ip-field span{display:block;font-size:11.5px;color:#6C6057;margin-bottom:5px;letter-spacing:.03em;}
.ip-field input{
  width:100%;height:36px;padding:0 10px;font-family:inherit;font-size:12px;
  background:#FFFDF8;border:1px solid var(--ip-line);border-radius:9px;
  color:var(--mo);outline:none;
}
.ip-field input:focus{border-color:var(--ip-zhu);box-shadow:0 0 0 3px rgba(195,39,43,.09);}
.ip-cfg-btns{display:flex;gap:8px;margin:14px 0 12px;}
.ip-btn{
  flex:1;height:36px;font-family:inherit;font-size:12.5px;cursor:pointer;
  border-radius:999px;transition:.2s;
}
.ip-btn-main{background:var(--ip-zhu);color:#FFF6E6;border:1px solid var(--ip-zhu);}
.ip-btn-main:hover{background:var(--ip-zhu-deep);}
.ip-btn-ghost{background:transparent;color:#7A653F;border:1px solid var(--ip-line);}
.ip-btn-ghost:hover{background:#F7EFDF;}
.ip-note{
  padding:10px 12px;background:#F7EFDF;border:1px solid rgba(184,137,59,.3);
  border-radius:10px;font-size:11px;line-height:1.85;color:#6C6057;
}
.ip-note b{color:var(--ip-zhu-deep);}
.ip-note code{
  font-family:Consolas,Monaco,monospace;font-size:10.5px;
  background:#FFFDF8;padding:1px 4px;border-radius:3px;color:#8E1C1C;
}
.ip-cfg-close{
  position:absolute;top:14px;right:14px;width:26px;height:26px;
  border:1px solid var(--ip-line);background:transparent;border-radius:50%;
  color:#8A7658;cursor:pointer;font-family:inherit;font-size:15px;line-height:1;
}
.ip-cfg-close:hover{background:var(--ip-zhu);color:#FFF6E6;}

/* ---------- 4. 响应式 ---------- */
@media(max-width:900px){
  .ip-entry{padding:3px 6px 3px 3px;margin-right:8px;}
  .ip-txt{display:none;}
}
@media(max-width:640px){
  .nav{padding:0 10px;}
  .ip-entry{height:44px;margin-right:6px;}
  .ip-ava{flex-basis:36px;width:36px;height:36px;}
  .ip-panel{
    right:10px;left:10px;bottom:10px;width:auto;
    height:min(66vh,520px);border-radius:16px;
  }
}
@media(prefers-reduced-motion:reduce){
  .ip-ava img,.ip-badge::after,.ip-typing i{animation:none!important;}
}