/* ===== 手写漫画风 UI ===== */
*{ box-sizing:border-box; }

:root{
  --paper:#fdf8ee;        /* 纸张底 */
  --paper-2:#fffdf7;
  --ink:#20201d;          /* 墨线 */
  --accent:#ff5b4a;       /* 珊瑚红 */
  --accent-2:#ffd166;     /* 淡黄 */
  --mine:#c9e7ff;         /* 我的气泡 */
  --other:#ffffff;        /* 他人气泡 */
  --muted:#8a7f6a;
  /* 手绘不规则圆角 */
  --rough:255px 15px 225px 15px / 15px 225px 15px 255px;
  --rough-sm:14px 10px 16px 12px / 12px 16px 10px 14px;
  --hand:"Comic Sans MS","Comic Neue","Segoe Print","Bradley Hand",
         "Chalkboard SE","KaiTi","STKaiti","楷体","DFKai-SB",
         "Microsoft YaHei",cursive,sans-serif;
}

html,body{ height:100%; margin:0; }
body{
  font-family:var(--hand);
  color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(#e8ddc8 1.4px,transparent 1.4px);
  background-size:16px 16px;
  display:flex; flex-direction:column; height:100dvh;
  letter-spacing:.02em;
}

/* ===== 顶栏 ===== */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px 12px;
  background:var(--paper-2);
  border-bottom:3px solid var(--ink);
  box-shadow:0 3px 0 rgba(32,32,29,.15);
  position:relative; z-index:2;
}
.topbar .title{
  flex:1; font-size:22px; font-weight:700;
  transform:rotate(-1.2deg);
  text-shadow:2px 2px 0 var(--accent-2);
}
.topbar .me{
  font-size:14px; color:var(--ink);
  border:2px solid var(--ink); border-radius:var(--rough-sm);
  padding:3px 11px; background:var(--accent-2);
  transform:rotate(1deg); box-shadow:2px 2px 0 var(--ink);
}
.topbar .logout{
  font-size:14px; color:var(--ink); text-decoration:none;
  border:2px solid var(--ink); border-radius:var(--rough-sm);
  padding:3px 13px; background:#fff;
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .08s, box-shadow .08s;
}
.topbar .logout:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.topbar .logout:active{ transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }

/* ===== 消息区 ===== */
.messages{
  flex:1; overflow-y:auto; padding:22px 18px 10px;
  display:flex; flex-direction:column; gap:18px;
}
.messages::-webkit-scrollbar{ width:12px; }
.messages::-webkit-scrollbar-thumb{
  background:var(--accent-2); border:2.5px solid var(--ink); border-radius:999px;
}

.msg{
  --tail:var(--other);
  max-width:78%; align-self:flex-start;
  display:flex; flex-direction:column; gap:5px;
}
.msg.mine{ --tail:var(--mine); align-self:flex-end; align-items:flex-end; }

.msg .meta{
  font-size:12px; color:var(--muted);
  display:flex; gap:8px; align-items:center; padding:0 6px;
}
.msg.mine .meta{ flex-direction:row-reverse; }
.msg .name{ font-weight:700; color:var(--ink); }

.msg .body{
  position:relative;
  background:var(--tail);
  border:2.5px solid var(--ink);
  border-radius:var(--rough);
  padding:10px 15px 12px;
  line-height:1.55;
  white-space:pre-wrap; word-break:break-word;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-.4deg);
}
.msg.mine .body{ transform:rotate(.5deg); }

/* 气泡小尾巴：外描边 + 内填充两层三角形 */
.msg .body::before{
  content:""; position:absolute; bottom:-11px; left:18px;
  width:0; height:0;
  border:7px solid transparent; border-top-color:var(--ink); border-bottom:0;
}
.msg .body::after{
  content:""; position:absolute; bottom:-7px; left:19px;
  width:0; height:0;
  border:6px solid transparent; border-top-color:var(--tail); border-bottom:0;
}
.msg.mine .body::before{ left:auto; right:18px; }
.msg.mine .body::after{ left:auto; right:19px; }

/* ===== 输入栏 ===== */
.composer{
  display:flex; gap:10px; padding:12px 14px 16px;
  background:var(--paper-2);
  border-top:3px solid var(--ink);
}
.composer input{
  flex:1; padding:12px 18px;
  font-family:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:2.5px solid var(--ink);
  border-radius:var(--rough); outline:none;
  box-shadow:inset 2px 2px 0 rgba(32,32,29,.07);
}
.composer input::placeholder{ color:#b7ac95; }
.composer input:focus{ box-shadow:3px 3px 0 var(--accent-2); }
.composer button{
  font-family:inherit; font-size:17px; font-weight:700;
  padding:0 26px; color:var(--ink);
  background:var(--accent-2);
  border:2.5px solid var(--ink); border-radius:var(--rough-sm);
  box-shadow:3px 3px 0 var(--ink); cursor:pointer;
  transition:transform .08s, box-shadow .08s;
}
.composer button:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.composer button:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); }

/* ===== 登录 / 注册页 ===== */
.auth-page{ justify-content:center; padding:24px; }
.auth{
  position:relative;
  max-width:380px; width:100%; margin:0 auto;
  background:var(--paper-2);
  border:3px solid var(--ink);
  border-radius:var(--rough);
  box-shadow:8px 8px 0 var(--ink);
  padding:36px 28px 28px;
  transform:rotate(-.8deg);
}
/* 顶部胶带 */
.auth::before{
  content:""; position:absolute; top:-14px; left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:110px; height:26px;
  background:rgba(255,209,102,.75);
  border:2px solid rgba(32,32,29,.25);
}
.auth h1{
  text-align:center; font-size:26px; margin:0 0 24px;
  text-shadow:2px 2px 0 var(--accent-2);
}
.auth input{
  width:100%; padding:12px 15px; margin-bottom:14px;
  font-family:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:2.5px solid var(--ink);
  border-radius:var(--rough-sm); outline:none;
}
.auth input:focus{ box-shadow:3px 3px 0 var(--accent-2); }
.auth button{
  width:100%; padding:13px;
  font-family:inherit; font-size:18px; font-weight:700; color:var(--ink);
  background:var(--accent);
  border:2.5px solid var(--ink); border-radius:var(--rough-sm);
  box-shadow:4px 4px 0 var(--ink); cursor:pointer;
  transition:transform .08s, box-shadow .08s;
}
.auth button:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink); }
.auth button:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.auth .switch{
  text-align:center; margin-top:18px; font-size:15px; color:var(--muted);
}
.auth .switch a{
  color:var(--accent); font-weight:700; text-decoration:none;
  border-bottom:2px dashed var(--accent);
}
.auth .error{
  background:#ffe0dc; color:#b3261e;
  border:2.5px solid var(--ink); border-radius:var(--rough-sm);
  padding:10px 14px; margin-bottom:16px; font-size:15px;
  box-shadow:3px 3px 0 var(--ink);
}