/* ═══════════════════════════════════════════════════
   拾遗图 · panel —— 羊皮纸对话面板 + 旅程日志抽屉
   ═══════════════════════════════════════════════════ */

/* ───────────── 对话面板 ───────────── */
#panel{
  width:400px;flex:none;position:relative;z-index:10;
  display:flex;flex-direction:column;
  background:
    repeating-linear-gradient(90deg,rgba(120,90,40,.028) 0 2px,transparent 2px 7px),
    radial-gradient(140% 100% at 100% 0%,#FBF9F4 0%,#F5F2EA 55%,#EAE4D8 100%);
  color:var(--parch-ink);
  border-left:1px solid rgba(42,36,25,.35);
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.7);
  transition:transform .35s cubic-bezier(.3,.8,.3,1),opacity .3s ease;
}
/* 左侧书脊双线 */
#panel::before{
  content:"";position:absolute;left:9px;top:0;bottom:0;width:3px;
  border-left:1px solid rgba(42,36,25,.28);border-right:1px solid rgba(42,36,25,.28);
  pointer-events:none;
}
#panel.hidden{transform:translateX(105%);opacity:0;position:absolute;right:0;top:0;bottom:0;pointer-events:none}

#panelHead{
  display:flex;align-items:center;gap:13px;padding:18px 18px 15px 26px;
  border-bottom:1px solid var(--line-p);
}
#pAvatar{
  width:46px;height:46px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,#33555e,var(--sea) 70%);
  border:2px solid rgba(243,234,214,.5);box-shadow:inset 0 2px 6px rgba(0,0,0,.35);
}
#pAvatar span{
  font-family:var(--font-serif);font-weight:900;font-size:20px;color:var(--parch-3);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.pMeta{min-width:0;flex:1}
#pName{
  font-family:var(--font-serif);font-weight:700;font-size:17px;letter-spacing:.04em;
  color:var(--parch-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#pRole{
  font-size:11px;color:rgba(42,36,25,.6);margin-top:2px;letter-spacing:.06em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#pClose{
  width:30px;height:30px;flex:none;border-radius:8px;font-size:18px;line-height:1;
  color:rgba(42,36,25,.55);transition:all .15s;
}
#pClose:hover{background:rgba(42,36,25,.08);color:var(--verm-deep)}

/* ───────────── 消息流 ───────────── */
#msgs{
  flex:1;overflow-y:auto;padding:20px 20px 10px 26px;
  display:flex;flex-direction:column;gap:14px;
  scroll-behavior:smooth;
}
.msg{display:flex;gap:10px;max-width:94%;animation:msgIn .3s ease both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg .m-av{
  width:30px;height:30px;flex:none;border-radius:50%;margin-top:2px;
  display:grid;place-items:center;font-family:var(--font-serif);font-weight:700;font-size:13.5px;
  background:radial-gradient(circle at 32% 28%,#33555e,var(--sea) 70%);
  border:1.5px solid rgba(243,234,214,.45);color:var(--parch-3);
}
.msg .m-bubble{
  padding:10px 14px;border-radius:13px 13px 13px 4px;
  background:var(--parch-3);border:1px solid var(--line-p);
  font-size:13.5px;line-height:1.75;color:var(--parch-ink);
  box-shadow:0 2px 8px -4px rgba(42,36,25,.25);
  overflow-wrap:break-word;
}
.msg .m-bubble .m-name{
  display:block;font-size:10.5px;letter-spacing:.14em;color:var(--teal);
  font-weight:700;margin-bottom:3px;
}
/* 玩家消息 */
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .m-bubble{
  background:linear-gradient(150deg,#2f4a44,#243835);
  color:var(--parch-3);border-color:rgba(243,234,214,.12);
  border-radius:13px 13px 4px 13px;
}
.msg.me .m-av{background:radial-gradient(circle at 32% 28%,var(--verm),var(--verm-deep) 70%);border-color:rgba(243,234,214,.45)}
.msg.me .m-bubble .m-name{color:#d9a441}
/* 系统消息 */
.msg.sys{align-self:center;max-width:96%}
.msg.sys .m-bubble{
  background:transparent;border:none;box-shadow:none;
  font-size:11px;color:rgba(42,36,25,.5);letter-spacing:.14em;font-style:italic;
  text-align:center;padding:2px 8px;
}
/* 正在输入 */
.typing .m-bubble{display:flex;gap:5px;align-items:center;padding:13px 16px}
.typing .dot{
  width:6px;height:6px;border-radius:50%;background:rgba(42,36,25,.45);
  animation:dotBounce 1.1s ease-in-out infinite;
}
.typing .dot:nth-child(2){animation-delay:.15s}
.typing .dot:nth-child(3){animation-delay:.3s}
@keyframes dotBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* ───────────── 卡片消息（委托 / 碎片 / 终章） ───────────── */
.card{
  margin-top:8px;border-radius:11px;overflow:hidden;
  border:1px solid rgba(243,234,214,.35);
  background:linear-gradient(155deg,#22353f,#16242c);
  color:#f3ead6;box-shadow:0 8px 22px -10px rgba(0,0,0,.5);
}
.card .c-head{
  display:flex;align-items:center;gap:8px;padding:10px 14px 8px;
  font-family:var(--font-serif);font-weight:700;font-size:13px;letter-spacing:.1em;
  color:#d9a441;
}
.card .c-head .c-sig{
  width:22px;height:22px;flex:none;border-radius:6px;display:grid;place-items:center;
  background:rgba(217,164,65,.15);font-size:12px;
}
.card .c-body{padding:0 14px 10px;font-size:12.5px;line-height:1.75;color:rgba(243,234,214,.88)}
.card .c-meta{
  display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 10px;
}
.card .c-tag{
  font-size:10.5px;letter-spacing:.08em;padding:3px 9px;border-radius:999px;
  background:rgba(243,234,214,.1);border:1px solid rgba(243,234,214,.16);
  color:rgba(243,234,214,.75);
}
.card .c-tag.gold{color:#d9a441;border-color:rgba(217,164,65,.4);background:rgba(217,164,65,.1)}
.card .c-acts{display:flex;gap:8px;padding:0 14px 13px}
.card .c-btn{
  padding:8px 18px;border-radius:8px;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  transition:all .18s ease;
}
.card .c-btn.yes{background:var(--verm);color:#fff8ec}
.card .c-btn.yes:hover{background:var(--verm-deep);transform:translateY(-1px)}
.card .c-btn.no{border:1px solid rgba(243,234,214,.3);color:rgba(243,234,214,.75)}
.card .c-btn.no:hover{background:rgba(243,234,214,.1)}
.card.done{border-color:rgba(217,164,65,.55)}
.card.done .c-head{color:#d9a441}
.card.ending{
  background:linear-gradient(155deg,#3a2c10,#1c1608);
  border-color:rgba(217,164,65,.6);
}
.card.ending .c-body{color:#f0e2c0}
.card .c-status{
  padding:0 14px 12px;font-size:11px;letter-spacing:.14em;color:#d9a441;
}

/* ───────────── 快捷提问 chips ───────────── */
#chips{
  display:flex;gap:7px;flex-wrap:wrap;padding:10px 16px 8px 26px;
  border-top:1px dashed var(--line-p);
}
.chipbtn{
  padding:6px 13px;border-radius:999px;font-size:12px;letter-spacing:.04em;
  color:rgba(42,36,25,.75);border:1px solid rgba(42,36,25,.28);
  background:rgba(255,248,233,.5);transition:all .16s ease;
}
.chipbtn:hover{
  background:var(--parch);color:var(--ink);border-color:var(--parch);transform:translateY(-1px);
}

/* ───────────── 输入区 ───────────── */
#inputRow{
  display:flex;gap:9px;align-items:flex-end;padding:10px 16px 16px 26px;
}
#input{
  flex:1;resize:none;min-height:42px;max-height:110px;padding:11px 14px;
  font-family:var(--font-sans);font-size:13.5px;line-height:1.6;color:var(--parch-ink);
  background:var(--parch-3);border:1px solid rgba(42,36,25,.3);border-radius:11px;
  outline:none;transition:border-color .2s, box-shadow .2s;
}
#input:focus{border-color:var(--verm);box-shadow:0 0 0 3px rgba(200,80,46,.14)}
#input::placeholder{color:rgba(42,36,25,.38)}
#sendBtn{
  width:42px;height:42px;flex:none;border-radius:11px;
  background:linear-gradient(150deg,var(--verm),var(--verm-deep));
  color:#fff8ec;font-size:16px;
  box-shadow:0 6px 16px -6px rgba(200,80,46,.55);transition:all .18s ease;
}
#sendBtn:hover{transform:translateY(-2px)}
#sendBtn:active{transform:translateY(0)}

/* ───────────── 旅程日志抽屉 ───────────── */
#drawer{
  position:absolute;top:0;right:0;bottom:0;width:330px;z-index:30;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--ink),var(--ink-2));
  border-left:1px solid var(--line-d);
  box-shadow:-30px 0 70px -30px rgba(0,0,0,.85);
  transform:translateX(105%);transition:transform .38s cubic-bezier(.3,.85,.3,1);
}
#drawer.open{transform:none}
.dHead{
  display:flex;align-items:center;justify-content:space-between;
  padding:17px 20px 14px;border-bottom:1px solid var(--line-d);
}
.dHead span{font-family:var(--font-serif);font-weight:700;font-size:16px;letter-spacing:.18em}
#dClose{width:28px;height:28px;border-radius:8px;font-size:17px;color:rgba(42,36,25,.55)}
#dClose:hover{background:rgba(42,36,25,.08);color:var(--parch)}
#drawer section{padding:15px 20px 6px;border-bottom:1px dashed rgba(42,36,25,.1)}
#drawer section:last-child{border-bottom:none;flex:1;min-height:0;display:flex;flex-direction:column}
#drawer h3{
  font-size:10.5px;letter-spacing:.3em;color:rgba(138,109,31,.85);font-weight:700;
  text-transform:uppercase;margin-bottom:11px;
}
#drawer .scroll{overflow-y:auto;flex:1;min-height:0}

/* 碎片架 */
#fragShelf{display:flex;gap:10px}
.frag{
  flex:1;aspect-ratio:.82;display:grid;place-items:center;position:relative;
  border-radius:10px;border:1px dashed rgba(42,36,25,.22);
  color:rgba(42,36,25,.25);
}
.frag svg{width:26px;height:26px}
.frag.filled{
  border:1px solid rgba(138,109,31,.65);
  background:radial-gradient(circle at 50% 30%,rgba(217,164,65,.22),rgba(217,164,65,.05) 70%);
  color:var(--gold);
  box-shadow:0 0 18px -4px rgba(217,164,65,.4);
}
.frag.filled svg{filter:drop-shadow(0 0 6px rgba(217,164,65,.7))}
.frag .f-name{
  position:absolute;bottom:5px;left:0;right:0;text-align:center;
  font-size:9px;letter-spacing:.1em;color:rgba(42,36,25,.55);
}
.frag.filled .f-name{color:var(--gold)}

/* 背包 */
#bagGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bag-item{
  padding:9px 11px;border-radius:9px;border:1px solid rgba(77,138,150,.4);
  background:rgba(77,138,150,.08);
}
.bag-item b{display:block;font-size:12.5px;color:#3E6B75;letter-spacing:.05em}
.bag-item span{display:block;font-size:10.5px;color:rgba(42,36,25,.5);margin-top:3px;line-height:1.5}
.bag-empty{font-size:11.5px;color:rgba(42,36,25,.35);letter-spacing:.08em;line-height:1.8}

/* 委托列表 */
.q-row{
  padding:11px 13px;border-radius:10px;margin-bottom:8px;
  border:1px solid var(--line-d);background:rgba(42,36,25,.03);
}
.q-row .q-title{font-size:13px;font-weight:700;letter-spacing:.05em;display:flex;align-items:center;gap:8px}
.q-row .q-desc{font-size:11.5px;color:rgba(42,36,25,.6);line-height:1.7;margin-top:5px}
.q-pill{
  margin-left:auto;flex:none;font-size:10px;letter-spacing:.1em;padding:3px 9px;border-radius:999px;
  border:1px solid rgba(138,109,31,.5);color:var(--gold);
}
.q-row.active{border-color:rgba(200,80,46,.55);background:rgba(200,80,46,.08)}
.q-row.active .q-pill{border-color:rgba(200,80,46,.6);color:#8C2C16}
.q-row.done{opacity:.62}
.q-row.done .q-pill{border-color:rgba(42,36,25,.3);color:rgba(42,36,25,.6)}
.q-empty{font-size:11.5px;color:rgba(42,36,25,.35);letter-spacing:.08em;line-height:1.8}

/* 足迹 */
#logList{display:flex;flex-direction:column;gap:0;overflow-y:auto;flex:1;min-height:0;padding-bottom:14px}
.log-row{
  display:flex;gap:11px;padding:8px 0;border-bottom:1px dotted rgba(42,36,25,.08);
  animation:msgIn .3s ease both;
}
.log-row:last-child{border-bottom:none}
.log-row .l-mark{
  width:8px;height:8px;flex:none;border-radius:50%;margin-top:6px;
  background:var(--teal);box-shadow:0 0 8px rgba(77,138,150,.4);
}
.log-row.gold .l-mark{background:var(--gold);box-shadow:0 0 8px rgba(138,109,31,.4)}
.log-row.verm .l-mark{background:var(--verm);box-shadow:0 0 8px rgba(178,58,31,.4)}
.log-row .l-txt{font-size:12px;line-height:1.65;color:rgba(42,36,25,.82)}
.log-row .l-txt em{font-style:normal;color:var(--gold)}

/* 滚动条 */
#msgs::-webkit-scrollbar,#logList::-webkit-scrollbar,#drawer .scroll::-webkit-scrollbar,#input::-webkit-scrollbar{width:8px}
#msgs::-webkit-scrollbar-thumb{background:rgba(42,36,25,.25);border-radius:4px}
#logList::-webkit-scrollbar-thumb,#drawer .scroll::-webkit-scrollbar-thumb{background:rgba(42,36,25,.18);border-radius:4px}
#msgs::-webkit-scrollbar-track,#logList::-webkit-scrollbar-track{background:transparent}

/* ───────────── 面板响应式：移动端变为底部抽屉 ───────────── */
@media (max-width:860px){
  #panel{
    position:absolute;left:0;right:0;bottom:0;top:auto;height:64vh;width:auto;
    border-left:none;border-top:1px solid rgba(42,36,25,.4);
    border-radius:18px 18px 0 0;
    transform:translateY(105%);opacity:1;
    box-shadow:0 -24px 60px -20px rgba(0,0,0,.75);
  }
  #panel.hidden{transform:translateY(105%);opacity:1;pointer-events:none}
  #panel:not(.hidden){transform:translateY(0)}
  #panel::before{left:14px}
  #msgs{padding-left:20px}
  #chips{padding-left:20px}
  #inputRow{padding-left:20px}
  #drawer{width:100%;border-left:none;border-top:1px solid var(--line-d)}
  #mapHint{display:none}
  #zoomCtl{bottom:auto;top:12px;right:12px}
}