/* ==========================================================================
   avatar.css — 数字分身侧边栏（银狼 LV.999）

   尺寸约束：
     · 桌面（≥900px）：右侧抽屉，宽度 = min(33.333vw, 460px)（≤ 屏宽 1/3）
     · 手机（<900px）：底部抽屉，默认高度 = 屏高 2/3，可上下拖动调整
       （范围 30% ~ 92%，拖动结果会记住）
   想改默认占比，改下面两个变量即可。
   ========================================================================== */

:root {
  --avatar-w: min(33.333vw, 460px);
  --avatar-h: 66.667dvh;
  --avatar-h-min: 30vh;
  --avatar-h-max: 92dvh;
  --wolf: #a06bff;
  --wolf-soft: rgba(160, 107, 255, 0.16);
}

/* ------------------------------- 开关按钮 ------------------------------- */

.avatar-toggle {
  position: fixed;
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(64px, 9vh, 92px);
  z-index: 39;

  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 9px;

  border: 1px solid rgba(160, 107, 255, 0.45);
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(48, 26, 86, 0.94), rgba(12, 10, 24, 0.95));
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: var(--shadow-1), 0 0 0 rgba(160, 107, 255, 0);
  transition:
    right var(--t-mid) var(--ease),
    bottom var(--t-mid) var(--ease),
    border-color var(--t-fast),
    box-shadow var(--t-fast),
    transform var(--t-fast);
}
.avatar-toggle:hover {
  border-color: rgba(160, 107, 255, 0.92);
  box-shadow: var(--shadow-1), 0 0 22px rgba(160, 107, 255, 0.32);
  transform: translateY(-1px);
}
.avatar-toggle:focus-visible { outline: 2px solid var(--wolf); outline-offset: 3px; }
.avatar-toggle[aria-expanded="true"] { border-color: rgba(160, 107, 255, 0.9); }
.avatar-toggle[aria-expanded="true"] .avatar-toggle__caret { transform: rotate(180deg); }

/* 抽屉打开时，按钮跟着「伸缩」到抽屉外侧，始终像个把手 */
body.avatar-open .avatar-toggle { right: calc(var(--avatar-w) + 14px); }

.avatar-toggle__face {
  position: relative;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 34% 28%, #e4d3ff, #a06bff 52%, #4c1d95 100%);
  color: #180e2c;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.35);
}
/* 一点点「信号不稳」的扫描线，呼应银狼的黑客感 */
.avatar-toggle__face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 3px);
  opacity: 0.35;
  pointer-events: none;
}
.avatar-toggle__label { white-space: nowrap; }
.avatar-toggle__caret {
  font-size: 10px;
  color: var(--wolf);
  transition: transform var(--t-fast) var(--ease);
}

/* ------------------------------- 抽屉本体 ------------------------------- */

.avatar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 38;

  width: var(--avatar-w);
  height: 100dvh;

  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 0;

  background: linear-gradient(180deg, rgba(18, 12, 32, 0.97), rgba(6, 5, 14, 0.985));
  border-left: 1px solid rgba(160, 107, 255, 0.28);
  box-shadow: -26px 0 64px rgba(0, 0, 0, 0.6);

  opacity: 0;
  transform: translateX(100%);
  transition: transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
  will-change: transform;
}
.avatar[hidden] { display: none; }
.avatar.is-open { opacity: 1; transform: none; }

/* 口令门没解开之前不出现（跟大厅一致的可见性规则） */
html[data-gate="locked"] .avatar,
html[data-gate="locked"] .avatar-toggle { display: none; }

/* ---- 高度调节把手（只在手机端出现） ---- */

.avatar__grip {
  display: none;
  height: 20px;
  place-items: center;
  cursor: ns-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.avatar__grip i {
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 99px;
  background: rgba(160, 107, 255, 0.5);
  transition: background var(--t-fast), width var(--t-fast);
}
.avatar__grip:hover i,
.avatar__grip:focus-visible i { background: rgba(160, 107, 255, 0.95); width: 58px; }
.avatar__grip:focus-visible { outline: 2px solid var(--wolf); outline-offset: 2px; }
/* 拖动过程中别让过渡动画跟手较劲 */
body.avatar-dragging .avatar { transition: none; }
body.avatar-dragging { cursor: ns-resize; }

/* ---- 头部 ---- */

.avatar__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(48, 26, 86, 0.4), transparent);
}

.avatar__orb {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, #efe3ff, #a06bff 48%, #3b1a72 100%);
  box-shadow: 0 0 16px rgba(160, 107, 255, 0.45), inset 0 0 8px rgba(255, 255, 255, 0.3);
}

.avatar__id { display: grid; gap: 1px; min-width: 0; }
.avatar__name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.avatar__name b {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #c9a6ff;
  margin-left: 4px;
}
.avatar__status {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.avatar__status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: 0 0 auto;
}
.avatar__status.is-online::before { background: #57e39b; box-shadow: 0 0 8px #57e39b; }
.avatar__status.is-offline::before { background: #e8c979; box-shadow: 0 0 8px #e8c979; }

.avatar__head .iconbtn { margin-left: auto; }

/* ---- 消息流 ---- */

.avatar__log {
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 13px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(160, 107, 255, 0.4) transparent;
}
.avatar__log::-webkit-scrollbar { width: 6px; }
.avatar__log::-webkit-scrollbar-thumb { background: rgba(160, 107, 255, 0.36); border-radius: 99px; }

.avatar__msg { display: grid; gap: 4px; max-width: 94%; }
.avatar__msg--bot { justify-self: start; }
.avatar__msg--user { justify-self: end; }

.avatar__who {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.avatar__msg--user .avatar__who { text-align: right; }

.avatar__text {
  margin: 0;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: var(--r-md);
}
.avatar__msg--bot .avatar__text {
  background: rgba(38, 22, 66, 0.7);
  border: 1px solid rgba(160, 107, 255, 0.26);
  border-top-left-radius: 4px;
  color: var(--ink);
}
.avatar__msg--user .avatar__text {
  background: rgba(111, 227, 225, 0.12);
  border: 1px solid rgba(111, 227, 225, 0.3);
  border-top-right-radius: 4px;
  color: var(--ink);
}
/* 模型回答走 inlineMd 渲染（**加粗** → <strong>、\n → <br>），这时不能再叠加 pre-wrap */
.avatar__msg--rich .avatar__text { white-space: normal; }
.avatar__msg--rich .avatar__text strong { color: #e6d6ff; font-weight: 650; }

/* 「正在读档…」的三点动画 */
.avatar__msg.is-typing .avatar__text::after {
  content: "···";
  letter-spacing: 0.2em;
  color: #c9a6ff;
  animation: avatarDots 1.1s steps(4, end) infinite;
}
@keyframes avatarDots {
  0% { opacity: 0.25; }
  50% { opacity: 1; }
  100% { opacity: 0.25; }
}

/* ---- 快捷提问 ---- */

.avatar__quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 12px 10px;
}
.avatar__quick[hidden] { display: none; }

.avatar__quick-btn {
  padding: 5px 10px;
  border: 1px solid rgba(160, 107, 255, 0.32);
  border-radius: 99px;
  background: rgba(160, 107, 255, 0.08);
  color: #d9c9ff;
  font-family: var(--font-ui);
  font-size: 11px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.avatar__quick-btn:hover {
  border-color: rgba(160, 107, 255, 0.75);
  background: rgba(160, 107, 255, 0.18);
  color: var(--ink);
}

/* ---- 输入区 ---- */

.avatar__composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: rgba(6, 5, 14, 0.85);
}

.avatar__input {
  flex: 1;
  min-height: 38px;
  max-height: 92px;
  padding: 9px 11px;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 12, 26, 0.85);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  transition: border-color var(--t-fast);
}
.avatar__input:focus { outline: none; border-color: rgba(160, 107, 255, 0.7); }
.avatar__input::placeholder { color: var(--ink-faint); }

.avatar__send {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(160, 107, 255, 0.5);
  border-radius: 10px;
  background: linear-gradient(135deg, #8b5cf6, #5b21b6);
  color: #f6f1ff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.avatar__send:hover { filter: brightness(1.15); }
.avatar__send:active { transform: translateY(1px); }
.avatar__send:disabled { opacity: 0.45; cursor: default; filter: none; }

/* ------------------------------- 手机：底部抽屉 ------------------------------- */

@media (max-width: 899px) {
  .avatar {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--avatar-h);
    /* 多了一行把手：auto(把手) auto(头) 1fr(消息) auto(快捷) auto(输入) */
    grid-template-rows: auto auto 1fr auto auto;
    border-left: 0;
    border-top: 1px solid rgba(160, 107, 255, 0.3);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -20px 54px rgba(0, 0, 0, 0.6);
    transform: translateY(100%);
  }
  .avatar.is-open { transform: none; }

  /* 手机上才显示高度把手 */
  .avatar__grip { display: grid; }

  .avatar-toggle { bottom: 74px; }
  body.avatar-open .avatar-toggle {
    right: clamp(12px, 2vw, 22px);
    bottom: calc(var(--avatar-h) + 12px);
  }

  /* 竖屏 1/3 高度不多：快捷提问压成横向滑动一行（常驻但不换行占高） */
  .avatar__quick {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 10px 8px;
    gap: 6px;
    scrollbar-width: none;
  }
  .avatar__quick::-webkit-scrollbar { display: none; }
  .avatar__quick-btn { flex: 0 0 auto; padding: 4px 9px; font-size: 11px; }
  .avatar__log { padding: 10px; gap: 10px; }
  .avatar__text { font-size: 12px; }
}

/* ------------------------------- 无障碍 ------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .avatar,
  .avatar-toggle,
  .avatar__caret { transition: none; }
  .avatar__msg.is-typing .avatar__text::after { animation: none; opacity: 0.8; }
}