:root{
  --bg:#fbf8ff;
  --surface:rgba(255,251,255,.78);
  --glass:rgba(255,251,255,.42);
  --glass-strong:rgba(255,251,255,.58);
  --outline:rgba(121,116,126,.26);
  --outline-strong:rgba(121,116,126,.38);
  --text:#1d1b20;
  --muted:#675f6b;
  --primary:#6750a4;
  --on-primary:#fff;
  --primary-container:#eaddff;
  --on-primary-container:#21005d;
  --secondary-container:#e8def8;
  --shadow:0 12px 28px rgba(31,24,43,.12);
  --shadow-soft:0 6px 18px rgba(31,24,43,.10);
  --blur:8px;
  --default-bg:url("https://api.yppp.net/api.php");
  --page-bg:var(--default-bg);
}

body[data-theme="dark"]{
  --bg:#141218;
  --surface:rgba(33,31,38,.76);
  --glass:rgba(33,31,38,.42);
  --glass-strong:rgba(43,41,48,.58);
  --outline:rgba(202,196,208,.22);
  --outline-strong:rgba(202,196,208,.34);
  --text:#e6e0e9;
  --muted:#cac4d0;
  --primary:#d0bcff;
  --on-primary:#381e72;
  --primary-container:#4f378b;
  --on-primary-container:#eaddff;
  --secondary-container:#4a4458;
  --shadow:0 16px 34px rgba(0,0,0,.36);
  --shadow-soft:0 8px 22px rgba(0,0,0,.28);
}

*{box-sizing:border-box}

html,body{height:100%;}

body{
  margin:0;
  color:var(--text);
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Arial,sans-serif;
  overflow:hidden;
  background:var(--bg);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  background-image:var(--page-bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  transform:scale(1.02);
  filter:saturate(1.08) contrast(1.02);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 10%, rgba(103,80,164,.34), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(125,82,96,.30), transparent 32%),
    radial-gradient(circle at 50% 92%, rgba(0,104,116,.22), transparent 34%),
    linear-gradient(180deg,rgba(20,18,24,.20),rgba(20,18,24,.46));
}

body:not([data-theme="dark"])::after{
  background:
    radial-gradient(circle at 14% 10%, rgba(234,221,255,.68), transparent 30%),
    radial-gradient(circle at 86% 16%, rgba(255,216,228,.58), transparent 32%),
    radial-gradient(circle at 50% 92%, rgba(204,235,238,.46), transparent 34%),
    linear-gradient(180deg,rgba(255,251,255,.20),rgba(255,251,255,.52));
}

button,input{font:inherit;}

button{
  border:none;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.1px;
  transition:transform .16s cubic-bezier(.2,0,0,1),background .16s,box-shadow .16s,opacity .16s;
  -webkit-tap-highlight-color:transparent;
}

button:active{transform:scale(.96);}

.app{
  max-width:1050px;
  height:100vh;
  margin:0 auto;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.header,
.chat,
.modal-content{
  background:var(--surface);
  border:1px solid var(--outline);
  box-shadow:var(--shadow);
  backdrop-filter:blur(var(--blur)) saturate(135%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(135%);
}

.header{
  min-height:68px;
  padding:12px 14px;
  border-radius:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:2px;
  position:relative;
  z-index:1;
}

.title{
  font-size:22px;
  font-weight:950;
  letter-spacing:-.4px;
  line-height:1.05;
}

.subtitle{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:.5px;
}

.top-right,
.nick-box{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.nick-box input,
.send-bar input,
.modal-section input[type="text"],
.modal-section input[type="file"]{
  color:var(--text);
  background:rgba(255,251,255,.50);
  border:1px solid var(--outline);
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(6px) saturate(120%);
  -webkit-backdrop-filter:blur(6px) saturate(120%);
}

body[data-theme="dark"] .nick-box input,
body[data-theme="dark"] .send-bar input,
body[data-theme="dark"] .modal-section input[type="text"],
body[data-theme="dark"] .modal-section input[type="file"]{
  background:rgba(43,41,48,.52);
}

.nick-box input{
  width:160px;
  max-width:42vw;
  padding:10px 14px;
  border-radius:999px;
}

.btn{
  color:var(--on-primary);
  background:var(--primary);
  padding:10px 18px;
  border-radius:999px;
  box-shadow:var(--shadow-soft);
}

.btn:disabled{
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.toggle,
.icon-btn{
  color:var(--on-primary-container);
  background:var(--primary-container);
  border:1px solid transparent;
}

.toggle{
  padding:10px 14px;
  border-radius:999px;
}

.main{
  flex:1;
  min-height:0;
  display:flex;
  gap:12px;
}

.chat{
  flex:1;
  min-height:0;
  border-radius:34px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  background:var(--glass);
  border-color:var(--outline-strong);
}

.chat::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%, rgba(234,221,255,.34), transparent 28%),
    radial-gradient(circle at 94% 92%, rgba(255,216,228,.24), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 38%);
  z-index:0;
}

body[data-theme="dark"] .chat::before{
  background:
    radial-gradient(circle at 12% 8%, rgba(79,55,139,.30), transparent 28%),
    radial-gradient(circle at 94% 92%, rgba(99,59,72,.24), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 38%);
}

.messages,
.footer{
  position:relative;
  z-index:1;
}

.messages{
  flex:1;
  overflow-y:auto;
  padding:16px 16px 12px;
  scroll-behavior:smooth;
}

.messages::-webkit-scrollbar,
.emoji-panel::-webkit-scrollbar,
.modal-content::-webkit-scrollbar{width:6px;}

.messages::-webkit-scrollbar-thumb,
.emoji-panel::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb{
  background:rgba(103,95,107,.38);
  border-radius:999px;
}

.row{
  display:flex;
  align-items:flex-end;
  gap:6px;
  margin:6px 0;
  animation:pop .18s cubic-bezier(.2,0,0,1);
}

@keyframes pop{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:none}
}

.row.me{justify-content:flex-end;}
.row.other{justify-content:flex-start;}

.avatar{
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.96);
  font-size:11px;
  font-weight:900;
  user-select:none;
  overflow:hidden;
  border:2px solid rgba(255,251,255,.48);
  background-size:cover;
  background-position:center;
  box-shadow:var(--shadow-soft);
}

.msg-wrap{
  max-width:min(70%,420px);
  display:flex;
  flex-direction:column;
  gap:4px;
}

.row.me .msg-wrap{align-items:flex-end;}
.row.other .msg-wrap{align-items:flex-start;}

.bubble{
  width:fit-content;
  max-width:100%;
  padding:8px 12px;
  border-radius:22px;
  color:var(--text);
  font-size:13px;
  line-height:1.38;
  word-break:break-word;
  white-space:pre-wrap;
  border:1px solid var(--outline);
  background:rgba(255,251,255,.54);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(6px) saturate(125%);
  -webkit-backdrop-filter:blur(6px) saturate(125%);
}

body[data-theme="dark"] .bubble{
  background:rgba(43,41,48,.58);
}

.row.me .bubble{
  color:var(--on-primary-container);
  background:rgba(234,221,255,.72);
  border-color:rgba(208,188,255,.50);
  border-bottom-right-radius:8px;
}

body[data-theme="dark"] .row.me .bubble{
  color:var(--on-primary-container);
  background:rgba(79,55,139,.72);
}

.row.other .bubble{
  border-bottom-left-radius:8px;
}

.bubble.recalled{
  color:var(--muted);
  font-style:italic;
  background:rgba(255,251,255,.34);
  border-style:dashed;
}

body[data-theme="dark"] .bubble.recalled{
  background:rgba(43,41,48,.38);
}

.meta{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:2px;
  font-size:10px;
  opacity:.88;
}

.meta .nick{
  font-weight:900;
  color:var(--text);
}

.meta .time{
  color:var(--muted);
  font-weight:700;
}

.row.me .meta .nick{color:var(--on-primary-container);}

.content img{
  display:block;
  max-width:170px;
  border-radius:18px;
  margin-top:4px;
  border:1px solid var(--outline);
  box-shadow:var(--shadow-soft);
}

.msg-actions{
  display:flex;
  justify-content:flex-end;
  min-height:22px;
}

.recall-btn{
  display:none;
  color:var(--on-primary-container);
  background:var(--primary-container);
  border-radius:999px;
  padding:4px 10px;
  font-size:11px;
  box-shadow:var(--shadow-soft);
}

.row.me:hover .recall-btn,
.row.me.show-actions .recall-btn{
  display:inline-flex;
}

.bubble.recalled + .msg-actions .recall-btn{
  display:none !important;
}

.day-sep{
  display:flex;
  justify-content:center;
  position:sticky;
  top:0;
  z-index:2;
  margin:8px 0;
  pointer-events:none;
}

.day-sep span{
  color:var(--on-primary-container);
  background:var(--primary-container);
  padding:5px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.footer{
  padding:12px;
  border-top:1px solid var(--outline);
  background:rgba(255,251,255,.36);
  backdrop-filter:blur(6px) saturate(125%);
  -webkit-backdrop-filter:blur(6px) saturate(125%);
}

body[data-theme="dark"] .footer{
  background:rgba(33,31,38,.36);
}

.send-bar{
  display:flex;
  align-items:flex-end;
  gap:8px;
}

.send-bar input{
  flex:1;
  min-width:0;
  padding:11px 15px;
  border-radius:999px;
  font-size:13px;
}

.icons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:9px;
}

.icon-btn{
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
}

.emoji-panel{
  display:none;
  flex-wrap:wrap;
  gap:6px;
  max-height:140px;
  overflow-y:auto;
  margin-top:9px;
  padding:10px;
  border:1px solid var(--outline);
  border-radius:24px;
  background:rgba(255,251,255,.46);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(6px) saturate(125%);
  -webkit-backdrop-filter:blur(6px) saturate(125%);
}

body[data-theme="dark"] .emoji-panel{
  background:rgba(43,41,48,.50);
}

.emoji{
  cursor:pointer;
  padding:3px 5px;
  font-size:17px;
  border-radius:12px;
}

.emoji:hover{
  background:var(--secondary-container);
}

.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(20,18,24,.36);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.modal.show{display:flex;}

.modal-content{
  position:relative;
  width:min(92vw,430px);
  max-height:82vh;
  overflow-y:auto;
  padding:22px;
  border-radius:32px;
  background:var(--glass-strong);
  border-color:var(--outline-strong);
}

.online-modal{max-width:380px;}

.modal h2{
  margin:0 0 16px;
  padding-right:40px;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-.3px;
}

.close-btn{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--on-primary-container);
  background:var(--primary-container);
  border-radius:999px;
  font-size:16px;
}

.modal-section{margin-bottom:16px;}

.modal-section label{
  display:block;
  margin-bottom:7px;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}

.modal-section input[type="text"],
.modal-section input[type="file"]{
  width:100%;
  margin-bottom:8px;
  padding:11px 13px;
  border-radius:18px;
  font-size:13px;
}

.modal-section button{
  width:100%;
  margin-bottom:8px;
  padding:11px;
  font-size:13px;
}

.preview{
  width:100%;
  height:112px;
  margin-top:8px;
  border-radius:24px;
  border:1px dashed var(--outline-strong);
  background-size:cover;
  background-position:center;
  box-shadow:var(--shadow-soft);
}

.online-item{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  padding:10px;
  border:1px solid var(--outline);
  border-radius:24px;
  background:rgba(255,251,255,.48);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(6px) saturate(125%);
  -webkit-backdrop-filter:blur(6px) saturate(125%);
  font-size:13px;
  font-weight:800;
}

body[data-theme="dark"] .online-item{
  background:rgba(43,41,48,.50);
}

@media (max-width:900px){
  .header{align-items:flex-start;}
  .nick-box{width:100%;}
  .nick-box input{flex:1;min-width:120px;}
}

@media (max-width:640px){
  .app{padding:8px;gap:8px;}
  .header{gap:8px;border-radius:26px;}
  .chat{border-radius:28px;}
  .title{font-size:20px;}
  .subtitle{font-size:11px;}
  .top-right{width:100%;}
  .nick-box{flex:1;}
  .nick-box input{width:100%;max-width:none;}
  .toggle{padding:9px 12px;}
  .messages{padding:12px 12px 10px;}
  .msg-wrap{max-width:88%;}
  .bubble{padding:7px 11px;font-size:12px;}
  .content img{max-width:140px;}
  .send-bar input{font-size:12px;}
  .modal-content{width:94vw;border-radius:30px;}
  .recall-btn{display:inline-flex;font-size:10px;padding:4px 9px;}
  .bubble.recalled + .msg-actions .recall-btn{display:none !important;}
}
.content img{
  cursor:zoom-in;
  -webkit-user-drag:none;
  -moz-user-select:none;
  user-select:none;
  transition:filter .15s ease, transform .15s ease;
}

.content img:hover{
  filter:brightness(.94);
}

.content img:active{
  transform:scale(.98);
}

.image-viewer-modal{
  z-index:1200; /* 高于其他弹窗 */
  background:rgba(10,9,12,.86);
}

.image-viewer-content{
  position:relative;
  width:100%;
  height:100%;
  max-width:100vw;
  max-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  overflow:hidden;
}

#viewerImage{
  max-width:92vw;
  max-height:88vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  cursor:zoom-in;
  transition:opacity .18s ease, transform .25s cubic-bezier(.2,0,0,1);
  -webkit-user-drag:none;
  user-select:none;
  touch-action:pinch-zoom;
}

#viewerImage.zoomed{
  max-width:none;
  max-height:none;
  width:auto;
  height:auto;
  transform:scale(1.6);
  cursor:zoom-out;
}

.image-viewer-loading{
  position:absolute;
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  z-index:1;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(0,0,0,.42);
}

.viewer-toolbar{
  position:fixed;
  top:18px;
  right:18px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
}

.viewer-toolbar a,
.viewer-toolbar button{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:17px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px) saturate(140%);
  -webkit-backdrop-filter:blur(6px) saturate(140%);
  transition:background .16s, transform .16s;
  cursor:pointer;
}

.viewer-toolbar a:hover,
.viewer-toolbar button:hover{
  background:rgba(255,255,255,.24);
}

.viewer-toolbar a:active,
.viewer-toolbar button:active{
  transform:scale(.92);
}

/* 移动端适配：工具栏与图片间距更紧凑 */
@media (max-width:640px){
  .viewer-toolbar{
    top:10px;
    right:10px;
    gap:8px;
  }
  .viewer-toolbar a,
  .viewer-toolbar button{
    width:36px;
    height:36px;
    font-size:15px;
  }
  #viewerImage{
    max-width:96vw;
    max-height:84vh;
  }
  #viewerImage.zoomed{
    transform:scale(1.35);
  }
}

/* 背景预览图也支持点击查看，加个手型光标提示可交互 */
.preview{
  cursor:zoom-in;
}