/* 在线聊天室 — 视口定高，消息区内滚动 */
html.is-chat-page,
html.is-chat-page body{
  height:100%;
  overflow:hidden;
}
html.is-chat-page .sakura-footer{
  display:none!important;
}
html.is-chat-page #content.site-content{
  min-height:0;
  height:100%;
  overflow:hidden;
}

.sakura-chat-page{
  --chat-nav-offset:var(--sakura-navbar-layout-offset, var(--sakura-navbar-height, 64px));
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  width:100%;
  height:calc(100dvh - var(--chat-nav-offset));
  max-height:calc(100dvh - var(--chat-nav-offset));
  margin-top:var(--chat-nav-offset);
  padding:0;
  overflow:hidden;
}
.sakura-chat-page .sakura-page-content{
  flex:1 1 auto;
  min-height:0;
  max-width:720px;
  width:100%;
  margin:0 auto;
  padding:.35rem 1rem .75rem;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sakura-chat{
  --chat-radius:16px;
  --chat-border:color-mix(in srgb, var(--sakura-color-text,#4c4948) 12%, transparent);
  --chat-surface:var(--sakura-color-background,#fff);
  --chat-muted:var(--sakura-color-text-muted,#888);
  --chat-text:var(--sakura-color-text,#4c4948);
  --chat-primary:var(--va-c-primary,#df9193);
  --chat-primary-fg:#fff;
  position:relative;
  flex:1 1 auto;
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
}
html.dark .sakura-chat{
  --chat-border:rgba(255,255,255,.12);
  --chat-surface:#1a1a1a;
  --chat-muted:rgba(255,255,255,.62);
  --chat-text:rgba(255,255,255,.88);
}

.sakura-chat-gate{
  display:flex;
  justify-content:center;
  padding:1.25rem 0 2rem;
}
.sakura-chat-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
}
.sakura-chat-modal[hidden]{display:none!important}
.sakura-chat-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(20,18,18,.48);
  backdrop-filter:blur(2px);
}
html.dark .sakura-chat-modal__backdrop{background:rgba(0,0,0,.62)}
.sakura-chat-modal .sakura-chat-gate__card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:26rem;
  margin:0;
  animation:sakura-chat-modal-in .18s ease-out;
}
@keyframes sakura-chat-modal-in{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:none}
}
.sakura-chat-modal__close{
  position:absolute;
  top:.55rem;
  right:.7rem;
  width:2rem;
  height:2rem;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--chat-muted);
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
}
.sakura-chat-modal__close:hover{color:var(--chat-text)}
body.sakura-chat-modal-open{overflow:hidden}
.sakura-chat-gate__card{
  width:100%;
  max-width:26rem;
  padding:1.75rem 1.5rem 1.6rem;
  border:1px solid var(--chat-border);
  border-radius:var(--chat-radius);
  background:var(--chat-surface);
  box-shadow:0 10px 36px color-mix(in srgb, var(--chat-primary) 12%, transparent);
}
.sakura-chat-gate__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:3rem;
  height:3rem;
  margin:0 auto .85rem;
  border-radius:50%;
  color:var(--chat-primary);
  background:color-mix(in srgb, var(--chat-primary) 16%, transparent);
  font-size:1.55rem;
}
.sakura-chat-gate__title{
  margin:0;
  text-align:center;
  font-size:1.25rem;
  font-weight:700;
  color:var(--chat-text);
}
.sakura-chat-gate__desc{
  margin:.55rem 0 1.15rem;
  text-align:center;
  font-size:.9rem;
  line-height:1.55;
  color:var(--chat-muted);
}
.sakura-chat-gate__form{
  display:flex;
  flex-direction:column;
  gap:.85rem;
}
.sakura-chat-field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.sakura-chat-field__label{
  font-size:.82rem;
  font-weight:600;
  color:var(--chat-muted);
}
.sakura-chat-field__input,
.sakura-chat-composer__input{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--chat-border);
  border-radius:12px;
  padding:.7rem .85rem;
  font:inherit;
  font-size:.95rem;
  color:var(--chat-text);
  background:color-mix(in srgb, var(--chat-surface) 92%, var(--chat-primary) 8%);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.sakura-chat-field__input:focus,
.sakura-chat-composer__input:focus{
  border-color:color-mix(in srgb, var(--chat-primary) 70%, var(--chat-border));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--chat-primary) 22%, transparent);
}
.sakura-chat-gate__error{
  margin:0;
  font-size:.85rem;
  color:#e03131;
}
.sakura-chat-btn{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:.65rem 1.15rem;
  font:inherit;
  font-size:.92rem;
  font-weight:600;
  cursor:pointer;
  transition:opacity .15s ease, transform .15s ease, background .15s ease;
}
.sakura-chat-btn:disabled{opacity:.55;cursor:not-allowed}
.sakura-chat-btn--primary{
  color:var(--chat-primary-fg);
  background:var(--chat-primary);
}
.sakura-chat-btn--primary:hover:not(:disabled){opacity:.92}
.sakura-chat-btn--ghost{
  padding:.35rem .7rem;
  color:var(--chat-muted);
  background:transparent;
  border:1px solid var(--chat-border);
}
.sakura-chat-btn--ghost:hover{color:var(--chat-primary);border-color:color-mix(in srgb, var(--chat-primary) 45%, var(--chat-border))}

.sakura-chat-room{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  height:100%;
  border:1px solid var(--chat-border);
  border-radius:var(--chat-radius);
  background:var(--chat-surface);
  overflow:hidden;
  box-shadow:0 12px 40px color-mix(in srgb, var(--chat-primary) 10%, transparent);
}
.sakura-chat-room__head{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.65rem 1rem;
  padding:.75rem 1rem;
  border-bottom:1px solid var(--chat-border);
  background:color-mix(in srgb, var(--chat-primary) 8%, var(--chat-surface));
}
.sakura-chat-room__meta{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.9rem;
  color:var(--chat-text);
}
.sakura-chat-room__dot{
  width:.55em;
  height:.55em;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.45);
  animation:sakura-chat-pulse 2s ease-out infinite;
}
@keyframes sakura-chat-pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}
  70%{box-shadow:0 0 0 .4em rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
.sakura-chat-room__online strong{
  font-variant-numeric:tabular-nums;
  color:var(--chat-primary);
}
.sakura-chat-room__me{
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin:0;
  padding:.2rem .45rem;
  border-radius:999px;
  font:inherit;
  font-size:.88rem;
  color:var(--chat-muted);
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.sakura-chat-room__me:hover{
  color:var(--chat-text);
  border-color:var(--chat-border);
  background:color-mix(in srgb, var(--chat-primary) 10%, transparent);
}
.sakura-chat-room__me:focus-visible{
  outline:2px solid color-mix(in srgb, var(--chat-primary) 55%, transparent);
  outline-offset:2px;
}
.sakura-chat-room__me-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
  background:color-mix(in srgb, var(--chat-primary) 20%, transparent);
}
.sakura-chat-room__body{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  padding:1rem .9rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:.85rem;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--chat-primary) 10%, transparent), transparent 55%),
    var(--chat-surface);
}
.sakura-chat-room__body::-webkit-scrollbar{display:none;width:0;height:0}
.sakura-chat-empty{
  margin:auto;
  padding:2rem 1rem;
  text-align:center;
  color:var(--chat-muted);
  font-size:.92rem;
}
.sakura-chat-msg{
  display:flex;
  gap:.55rem;
  align-items:flex-end;
  max-width:92%;
}
.sakura-chat-msg.is-self{
  align-self:flex-end;
  flex-direction:row-reverse;
}
.sakura-chat-msg__avatar{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  background:color-mix(in srgb, var(--chat-primary) 18%, transparent);
}
.sakura-chat-msg__main{min-width:0}
.sakura-chat-msg__meta{
  display:flex;
  align-items:baseline;
  gap:.45rem;
  margin:0 0 .22rem .15rem;
  font-size:.75rem;
  color:var(--chat-muted);
}
.sakura-chat-msg.is-self .sakura-chat-msg__meta{
  justify-content:flex-end;
  margin-right:.15rem;
}
.sakura-chat-msg__name{font-weight:600;color:var(--chat-text)}
.sakura-chat-msg__bubble{
  display:inline-block;
  max-width:100%;
  padding:.65rem .85rem;
  border-radius:14px 14px 14px 4px;
  background:color-mix(in srgb, var(--chat-primary) 12%, var(--chat-surface));
  border:1px solid color-mix(in srgb, var(--chat-primary) 18%, var(--chat-border));
  color:var(--chat-text);
  font-size:.95rem;
  line-height:1.55;
  word-break:break-word;
  text-align:left;
}
.sakura-chat-msg__bubble > :first-child{margin-top:0}
.sakura-chat-msg__bubble > :last-child{margin-bottom:0}
.sakura-chat-msg__bubble p{margin:.35em 0}
.sakura-chat-msg__bubble ul,
.sakura-chat-msg__bubble ol{margin:.35em 0;padding-left:1.25em}
.sakura-chat-msg__bubble li{margin:.15em 0}
.sakura-chat-msg__bubble blockquote{
  margin:.4em 0;
  padding:.15em 0 .15em .7em;
  border-left:3px solid color-mix(in srgb, var(--chat-primary) 55%, transparent);
  opacity:.92;
}
.sakura-chat-msg__bubble a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
.sakura-chat-msg__bubble code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;
  padding:.1em .35em;
  border-radius:5px;
  background:color-mix(in srgb, var(--chat-text) 10%, transparent);
}
.sakura-chat-msg__bubble pre{
  margin:.45em 0;
  padding:.55em .7em;
  border-radius:8px;
  overflow-x:auto;
  background:color-mix(in srgb, var(--chat-text) 8%, transparent);
}
.sakura-chat-msg__bubble pre code{
  padding:0;
  background:transparent;
  font-size:.84em;
}
.sakura-chat-msg__bubble img,
.sakura-chat-msg__md-img{
  max-width:min(100%, 220px);
  max-height:160px;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  display:block;
  margin:.35em 0;
  cursor:zoom-in;
}
.sakura-chat-img-preview{
  position:fixed;
  inset:0;
  z-index:1400;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  box-sizing:border-box;
  background:rgba(12,10,10,.78);
  backdrop-filter:blur(4px);
  cursor:zoom-out;
}
html.dark .sakura-chat-img-preview{background:rgba(0,0,0,.84)}
.sakura-chat-img-preview__img{
  max-width:min(96vw, 1100px);
  max-height:min(90dvh, 900px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 16px 48px rgba(0,0,0,.35);
  cursor:default;
}
.sakura-chat-img-preview__close{
  position:fixed;
  top:max(.75rem, env(safe-area-inset-top, 0px));
  right:max(.85rem, env(safe-area-inset-right, 0px));
  z-index:1;
  width:2.4rem;
  height:2.4rem;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
}
.sakura-chat-img-preview__close:hover{background:rgba(255,255,255,.24)}
body.sakura-chat-img-preview-open{overflow:hidden}
.sakura-chat-msg__bubble h1,
.sakura-chat-msg__bubble h2,
.sakura-chat-msg__bubble h3,
.sakura-chat-msg__bubble h4{
  margin:.45em 0 .25em;
  font-size:1.05em;
  line-height:1.35;
}
.sakura-chat-msg__bubble hr{
  border:0;
  border-top:1px solid color-mix(in srgb, var(--chat-text) 18%, transparent);
  margin:.55em 0;
}
.sakura-chat-msg.is-self .sakura-chat-msg__bubble{
  border-radius:14px 14px 4px 14px;
  background:var(--chat-primary);
  border-color:transparent;
  color:var(--chat-primary-fg);
}
.sakura-chat-msg.is-self .sakura-chat-msg__bubble code,
.sakura-chat-msg.is-self .sakura-chat-msg__bubble pre{
  background:rgba(255,255,255,.18);
}
.sakura-chat-msg.is-self .sakura-chat-msg__bubble blockquote{
  border-left-color:rgba(255,255,255,.55);
}
.sakura-chat-composer{
  flex:0 0 auto;
  display:flex;
  gap:.55rem;
  align-items:flex-end;
  padding:.75rem .8rem .85rem;
  border-top:1px solid var(--chat-border);
  background:color-mix(in srgb, var(--chat-surface) 94%, var(--chat-primary) 6%);
}
.sakura-chat-composer__input{
  flex:1 1 auto;
  min-height:2.6rem;
  max-height:none;
  resize:none;
  line-height:1.45;
  overflow:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.sakura-chat-composer__input::-webkit-scrollbar{display:none;width:0;height:0}
.sakura-chat-composer__side{
  position:relative;
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  gap:.4rem;
}
.sakura-chat-composer__send{
  flex:0 0 auto;
  min-width:4.5rem;
}
/* 聊天区 OwO：尺寸对齐发送按钮 */
.sakura-chat-owo .OwO-logo{
  width:2.6rem;
  height:2.6rem;
  border-radius:10px;
}
.sakura-chat-msg__bubble img.sakura-chat-owo-emotion,
.sakura-chat-msg__bubble img.sakura-owo-emotion{
  max-width:2rem;
  max-height:2rem;
  width:auto;
  height:auto;
  display:inline-block;
  vertical-align:text-bottom;
  margin:0 .12em;
  border-radius:0;
  cursor:default;
  object-fit:contain;
}
.sakura-chat-room__hint{
  margin:0;
  padding:0 .9rem .7rem;
  font-size:.8rem;
  color:#e03131;
}
@media (prefers-reduced-motion:reduce){
  .sakura-chat-room__dot{animation:none}
  .sakura-chat-room__body{scroll-behavior:auto}
  .sakura-chat-modal .sakura-chat-gate__card{animation:none}
}
@media (max-width:640px){
  .sakura-chat-page .sakura-page-content{padding:.25rem .65rem .55rem}
}