/* ============================================================
   鲲信 KunChat · 红又专联盟  主题样式
   革命红 + 鎏金黄，五角星与旗帜元素，移动端优先
   ============================================================ */

:root{
  --red-deep:  #7d0a0e;
  --red:       #a4161a;
  --red-brt:   #c8102e;
  --gold:      #ffd60a;
  --gold-soft: #f5c542;
  --paper:     #fdf6ec;
  --paper-2:   #f6e7cf;
  --ink:       #2b1613;
  --ink-soft:  #6b4a42;
  --self-1:    #d21e2b;
  --self-2:    #a4161a;
  --shadow:    0 6px 18px rgba(80,6,10,.18);
  --font: "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans SC",
          "Source Han Sans SC","WenQuanYi Micro Hei",system-ui,sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--red-deep);
  overflow:hidden;
}

/* ============================================================
   登录页
   ============================================================ */
.login-body{
  display:flex; align-items:center; justify-content:center;
  min-height:100dvh; padding:24px;
  background:
    radial-gradient(1200px 600px at 50% -10%, #c8102e 0%, transparent 60%),
    linear-gradient(160deg,#7d0a0e 0%,#a4161a 55%,#7d0a0e 100%);
  overflow:auto;
}
/* 放射光芒背景 */
.rays{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.16;
  background:
    repeating-conic-gradient(from 0deg at 50% 38%,
      var(--gold) 0deg 4deg, transparent 4deg 14deg);
  mask-image:radial-gradient(closest-side at 50% 38%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(closest-side at 50% 38%, #000 0%, transparent 72%);
}
.login-card{
  position:relative; z-index:1;
  width:100%; max-width:400px;
  background:linear-gradient(180deg,#fffaf2,var(--paper));
  border:2px solid var(--gold);
  border-radius:20px;
  box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 0 0 4px rgba(212,30,43,.10);
  padding:30px 26px 24px;
  text-align:center;
}
.emblem{ position:relative; width:88px; height:88px; margin:0 auto 6px; }
.emblem-star{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:56px; color:var(--red-brt);
  text-shadow:0 2px 0 var(--gold), 0 0 18px rgba(200,16,46,.5);
  animation:spin-slow 18s linear infinite;
}
.emblem-ring{
  position:absolute; inset:2px; border-radius:50%;
  border:3px double var(--gold-soft);
  box-shadow:inset 0 0 12px rgba(212,30,43,.25);
}
@keyframes spin-slow{ to{ transform:rotate(360deg); } }

.brand{
  margin:10px 0 2px; font-size:30px; letter-spacing:6px; font-weight:900;
  color:var(--red-brt);
  text-shadow:1px 1px 0 var(--gold-soft);
}
.brand-sub{ margin:0; font-size:13px; letter-spacing:4px; color:var(--ink-soft); font-weight:700; }
.brand-slogan{
  margin:12px auto 18px; display:inline-block;
  padding:5px 16px; font-size:14px; letter-spacing:2px; color:#fff; font-weight:700;
  background:linear-gradient(90deg,var(--red),var(--red-brt));
  border-radius:999px; box-shadow:var(--shadow);
}

.alert{
  margin:0 0 14px; padding:10px 12px; border-radius:10px;
  background:#fff2f2; color:#b00016; border:1px solid #ffb3ba;
  font-size:14px; font-weight:600;
}

.login-form{ text-align:left; }
.field-label{
  font-size:13px; font-weight:800; color:var(--red); letter-spacing:1px;
  margin:14px 0 8px; display:flex; align-items:center; gap:6px;
}
.field-label::before{ content:"★"; color:var(--gold-soft); }

.member-picker{ display:flex; flex-direction:column; gap:10px; }
.member-option input{ position:absolute; opacity:0; pointer-events:none; }
.member-chip{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:14px;
  background:#fff; border:2px solid #eaddc7;
  transition:.15s; cursor:pointer;
}
.member-option input:checked + .member-chip{
  border-color:var(--red-brt);
  background:linear-gradient(90deg,#fff,#fff4e6);
  box-shadow:0 4px 14px rgba(200,16,46,.18);
}
.member-avatar{
  width:40px; height:40px; flex:0 0 40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--red-deep);
  background:radial-gradient(circle at 30% 30%, #fff, var(--c,#ffd60a));
  border:2px solid var(--gold-soft);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.member-name{ font-weight:800; font-size:17px; color:var(--ink); }
.member-title{
  margin-left:auto; font-size:12px; font-weight:700; color:#fff;
  padding:3px 10px; border-radius:999px;
  background:linear-gradient(90deg,var(--red),var(--red-brt));
}

.pwd-input{
  width:100%; padding:13px 14px; font-size:16px;
  border:2px solid #eaddc7; border-radius:12px; background:#fff;
  color:var(--ink); outline:none; transition:.15s;
}
.pwd-input:focus{ border-color:var(--gold-soft); box-shadow:0 0 0 3px rgba(255,214,10,.35); }

.enter-btn{
  width:100%; margin-top:20px; padding:14px; font-size:18px; font-weight:900;
  letter-spacing:4px; color:#fff2c2; cursor:pointer;
  background:linear-gradient(180deg,var(--red-brt),var(--red-deep));
  border:2px solid var(--gold); border-radius:14px;
  box-shadow:0 8px 20px rgba(200,16,46,.35);
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .08s;
}
.enter-btn:active{ transform:translateY(2px) scale(.99); }
.btn-star{ color:var(--gold); }

.foot-note{
  margin:18px 0 0; text-align:center; font-size:12px; color:var(--ink-soft);
  letter-spacing:.5px;
}

/* ============================================================
   聊天页 · 整体布局（fixed header / footer, scroll middle）
   ============================================================ */
.chat-body{
  display:flex; flex-direction:column;
  height:100dvh; background:var(--paper);
}

.app-header{
  flex:0 0 auto; z-index:10;
  color:#fff;
  background:linear-gradient(160deg,var(--red-deep),var(--red) 60%,var(--red-brt));
  border-bottom:3px solid var(--gold);
  box-shadow:0 4px 14px rgba(80,6,10,.35);
  padding:calc(env(safe-area-inset-top) + 8px) 14px 8px;
}
.header-top{ display:flex; align-items:center; justify-content:space-between; }
.header-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.header-star{
  font-size:30px; color:var(--gold);
  text-shadow:0 0 10px rgba(255,214,10,.6);
  animation:spin-slow 22s linear infinite;
}
.header-titles{ min-width:0; }
.header-name{ font-size:19px; font-weight:900; letter-spacing:3px; line-height:1.1; }
.header-slogan{
  font-size:12px; color:var(--gold-soft); letter-spacing:1px; font-weight:700;
  margin-top:2px; transition:opacity .5s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.logout{
  flex:0 0 auto; color:#fff; text-decoration:none; font-size:13px; font-weight:700;
  padding:5px 12px; border:1px solid rgba(255,214,10,.6); border-radius:999px;
  background:rgba(0,0,0,.12);
}
.logout:active{ background:rgba(0,0,0,.28); }

.member-bar{
  display:flex; align-items:center; gap:8px; margin-top:8px;
  overflow-x:auto; scrollbar-width:none;
}
.member-bar::-webkit-scrollbar{ display:none; }
.mb-chip{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  padding:4px 10px 4px 6px; border-radius:999px;
  background:rgba(0,0,0,.16); font-size:13px; font-weight:700;
  opacity:.55; transition:.2s;
}
.mb-chip.online{ opacity:1; background:rgba(255,214,10,.16); }
.mb-chip.me .mb-name::after{ content:"（我）"; font-size:11px; color:var(--gold-soft); }
.mb-dot{
  width:8px; height:8px; border-radius:50%; background:#9c9c9c; flex:0 0 8px;
  box-shadow:0 0 0 2px rgba(255,255,255,.15);
}
.mb-chip.online .mb-dot{ background:#41d16a; box-shadow:0 0 8px #41d16a; }
.mb-avatar{
  width:22px; height:22px; flex:0 0 22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  color:var(--red-deep);
  background:radial-gradient(circle at 30% 30%, #fff, var(--c,#ffd60a));
  border:1.5px solid var(--gold-soft);
}
.conn-status{
  margin-left:auto; flex:0 0 auto; font-size:11px; color:var(--gold-soft);
  padding-left:8px; white-space:nowrap;
}

/* ---------- 消息区 ---------- */
.messages{
  flex:1 1 auto; overflow-y:auto; padding:16px 12px 8px;
  -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(circle at 50% 34%, rgba(200,16,46,.05), transparent 44%),
    var(--paper);
  position:relative;
}
/* 背景水印大五角星 */
.messages::before{
  content:"★"; position:fixed; left:50%; top:52%;
  transform:translate(-50%,-50%);
  font-size:52vw; color:rgba(200,16,46,.045); z-index:0; pointer-events:none;
  line-height:1;
}

.msg{ position:relative; z-index:1; display:flex; gap:8px; margin-bottom:14px; max-width:100%; }
.msg .avatar{
  width:38px; height:38px; flex:0 0 38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  color:var(--red-deep);
  background:radial-gradient(circle at 30% 30%, #fff, var(--c,#ffd60a));
  border:2px solid var(--gold-soft);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.msg .body{ min-width:0; max-width:76%; display:flex; flex-direction:column; }
.msg .name{
  font-size:12px; font-weight:800; margin:0 4px 3px; color:var(--c,var(--red));
  display:flex; align-items:center; gap:6px;
}
.msg .name .title{
  font-size:10px; font-weight:700; color:#fff; padding:1px 7px; border-radius:999px;
  background:linear-gradient(90deg,var(--red),var(--red-brt));
}
.bubble{
  padding:10px 13px; border-radius:14px 14px 14px 4px;
  background:#fff; color:var(--ink); line-height:1.5; font-size:15.5px;
  white-space:pre-wrap; word-break:break-word;
  border:1px solid rgba(125,10,14,.10);
  box-shadow:0 2px 8px rgba(80,6,10,.08);
}
.msg .time{ font-size:11px; color:var(--ink-soft); margin:4px 4px 0; }

/* 自己发的：靠右、红金气泡 */
.msg.mine{ flex-direction:row-reverse; }
.msg.mine .body{ align-items:flex-end; }
.msg.mine .name{ display:none; }
.msg.mine .bubble{
  color:#fff; border-radius:14px 14px 4px 14px;
  background:linear-gradient(150deg,var(--self-1),var(--self-2));
  border:1px solid rgba(255,214,10,.35);
  box-shadow:0 3px 10px rgba(200,16,46,.28);
}
.msg.mine .time{ text-align:right; }

/* 系统提示（如需要） */
.msg.system{ justify-content:center; }
.msg.system .bubble{
  background:rgba(125,10,14,.08); color:var(--red); font-size:13px;
  border:none; box-shadow:none; border-radius:999px; padding:5px 14px;
}

/* ---------- 正在输入 ---------- */
.typing-indicator{
  flex:0 0 auto; height:0; overflow:hidden;
  padding:0 16px; color:var(--red); font-size:13px; font-weight:600;
  transition:height .15s; background:var(--paper);
}
.typing-indicator.show{ height:22px; }

/* ---------- 输入栏 ---------- */
.composer{
  flex:0 0 auto; display:flex; align-items:flex-end; gap:10px;
  padding:10px 12px calc(env(safe-area-inset-bottom) + 10px);
  background:linear-gradient(0deg,var(--red-deep),var(--red));
  border-top:3px solid var(--gold);
  box-shadow:0 -4px 14px rgba(80,6,10,.3);
}
.msg-input{
  flex:1 1 auto; resize:none; max-height:120px;
  padding:11px 14px; font-size:16px; line-height:1.4; font-family:var(--font);
  color:var(--ink); background:var(--paper); border:2px solid var(--gold-soft);
  border-radius:14px; outline:none;
}
.msg-input:focus{ box-shadow:0 0 0 3px rgba(255,214,10,.35); }
.send-btn{
  flex:0 0 auto; display:flex; align-items:center; gap:5px;
  padding:11px 16px; font-size:16px; font-weight:900; letter-spacing:2px;
  color:var(--red-deep); cursor:pointer;
  background:linear-gradient(180deg,var(--gold),var(--gold-soft));
  border:2px solid #fff3c4; border-radius:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:transform .08s;
}
.send-btn:active{ transform:translateY(2px) scale(.98); }
.send-btn:disabled{ opacity:.5; }
.send-star{ color:var(--red-brt); }

/* ---------- 桌面端：居中，两侧留白 ---------- */
@media (min-width:640px){
  .chat-body{
    max-width:560px; margin:0 auto;
    box-shadow:0 0 60px rgba(0,0,0,.5);
  }
  body.chat-body{
    background:
      repeating-conic-gradient(from 0deg at 50% 50%,
        rgba(255,214,10,.03) 0deg 3deg, transparent 3deg 12deg),
      var(--red-deep);
  }
}