/* 全站共用的颜色/圆角/阴影都记在这儿, 各页面直接取, 不再各写各的 */
:root{
    --accent: rgb(0, 183, 255);
    --accent-soft: rgba(0, 183, 255, 0.12);
    --blue: rgb(35, 98, 235);
    --blue-soft: rgba(35, 98, 235, 0.1);
    --green: rgb(96, 214, 96);
    --danger: rgb(196, 43, 43);
    --danger-soft: rgba(196, 43, 43, 0.1);
    --ink: rgb(58, 72, 92);
    --muted: rgb(122, 136, 156);
    --soft: #efefef;
    --line: rgb(232, 232, 232);
    /* 卡片一档圆角, 按钮输入框小一档, 药丸就是 999 */
    --radius-card: 14px;
    --radius-control: 10px;
    --shadow-card: 0 2px 12px rgba(90, 100, 120, 0.12);
    --shadow-hover: 0 6px 22px rgba(90, 100, 120, 0.18);
    --shadow-panel: 0 12px 40px rgba(60, 70, 90, 0.25);
    /* 屏幕正中间那些面板别摊太宽: 填表的一档, 里头要排格子的宽一档 */
    --panel-form: 520px;
    --panel-grid: 620px;
    --quick: 0.15s ease-out;
}
#nav-avatar{
    flex: none;
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
}
/* 头像跟着文字排的话会坐在基线上, 显得偏下; 排成一行让它跟名字居中对齐。
   这一项也是个页签 (点了去我的主页), 颜色和悬停都跟别的页签一样, 归 #navi .nav-link 管 */
#nav-greeting{
    display: flex;
    align-items: center;
    gap: 6px;
}
#navi{
    /* 跟着页面走, 翻到哪儿都够得着 */
    position: sticky;
    top: 10px;
    z-index: 95;
    width: 95%;
    margin: 10px auto;
    padding: 8px 20px;
    border-radius: var(--radius-card);
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-card);
    font-size: 20px;
}
#navi .navbar-brand{
    /* 站徽跟站名排成一行, 一起居中对齐 (光按文字排的话图会坐在基线上, 显得偏下) */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    letter-spacing: 1px;
}
/* 站徽 (data/general/logo.svg): 导航栏和登录框上都摆一个, 蓝色跟站名是同一个 */
.brand-logo{
    flex: none;
    width: 30px;
    height: 30px;
}
#navi .nav-link{
    padding: 6px 14px;
    border-radius: 999px;
    transition: background-color var(--quick), color var(--quick);
}
#navi .nav-link:hover{
    background-color: var(--soft);
}
/* 退出登录那一项是表单里的一颗钮 (它得走 POST), 把按钮自带的边框底色去掉,
   摆得跟旁边几个页签一个样。字的颜色这儿一个字都不写: 它自己也挂着 nav-link,
   写了反倒盖过那一条, 跟旁边深浅不一样 (按钮不吃继承来的颜色和字体, 所以
   font 还是要点一句) */
#navi .nav-logout{
    margin: 0px;
}
#navi .nav-logout button{
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}
::-webkit-scrollbar {
    width: 10px;
}
/* 横向滚动条一律不画, 免得到处都是空的滑道 */
::-webkit-scrollbar:horizontal {
    display: none;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgb(205, 210, 218);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgb(180, 187, 196);
}
body {
    background-color: #eef0f3;
    color: black;
    font-family: sans-serif;
    font-weight: bold;
}
/* 鼠标点完按钮, 浏览器会留一圈黑边, 全站一律擦掉;
   键盘 tab 过来的还得看得见, 所以只擦鼠标那一种 */
button:focus, input[type="submit"]:focus, input[type="button"]:focus, label:focus{
    outline: none;
}
button:focus-visible, input[type="submit"]:focus-visible,
input[type="button"]:focus-visible, label:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* 点图片放大看原图 */
#lightbox{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 100;
    cursor: zoom-out;
}
#lightbox.lightbox-open{
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fade-in 0.15s ease-out;
}
#lightbox-image{
    max-width: 80%;
    max-height: 90%;
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-panel);
}
/* 翻上一张下一张 */
.lightbox-arrow{
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--quick);
}
.lightbox-arrow svg{
    width: 26px;
    height: 26px;
}
.lightbox-arrow:hover{
    background-color: rgba(255, 255, 255, 0.3);
}
#lightbox-prev{
    left: 30px;
}
#lightbox-next{
    right: 30px;
}
#lightbox-count{
    display: none;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 16px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 15px;
}
.full-image{
    cursor: zoom-in;
}
.full-image:hover{
    opacity: 0.85;
}
/* 帖子的时间/作者/分类: 大厅和帖子页共用 */
.post-meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.meta-chip{
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 10px;
    background-color: rgba(99, 124, 156, 0.1);
    line-height: 1.4;
    white-space: nowrap;
}
.meta-label{
    font-weight: normal;
    color: rgb(122, 136, 156);
}
.meta-value{
    font-weight: normal;
    color: rgb(58, 72, 92);
}
/* 日期和时间当中间隔宽一点, 一眼分得开 (html 里连写两个空格会被并成一个) */
.post-time{
    word-spacing: 3px;
}
.meta-chip.category{
    background-color: rgba(35, 98, 235, 0.1);
}
.meta-chip.category .meta-value{
    color: rgb(35, 98, 235);
}
.meta-chip.private{
    background-color: rgba(99, 124, 156, 0.1);
}
.meta-chip.private .meta-value{
    color: rgb(122, 136, 156);
}
.meta-chip.clickable{
    cursor: pointer;
}
.meta-chip.clickable:hover{
    background-color: rgba(99, 124, 156, 0.2);
}
.meta-chip.category.clickable:hover{
    background-color: rgba(35, 98, 235, 0.2);
}
/* 头像上传: 注册页和我的主页共用 */
#avatar-preview{
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    background-color: white;
}
/* 预览这张头像也套上正在戴的框, 定位用的壳 */
.preview-slot{
    position: relative;
    display: inline-block;
    line-height: 0;
}
/* ===== 填表的面板: 标题 + 几块格子 + 底下一条按钮 ===== */
/* 编辑资料和发帖两个面板都是这个样子, 零件都在这儿, 各页面只管自己那点不一样的。
   一件事一行: 左边图标加名目, 右边填的东西, 几行相近的凑成一块浅底的格子。
   要写好几行的 (签名、正文那种) 名目摆在框上头, 那一块另加 block */
.panel-head{
    margin-bottom: 18px;
    text-align: center;
}
.panel-title{
    margin: 0px;
    font-size: 21px;
}
.panel-hint{
    margin: 6px 0px 0px 0px;
    font-size: 14px;
    font-weight: normal;
    color: var(--muted);
}
.panel-group{
    margin-bottom: 14px;
    padding: 0px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background-color: rgb(250, 251, 253);
    text-align: left;
}
.panel-group.block{
    padding: 14px 16px 16px 16px;
}
.panel-row{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0px;
}
/* 同一块格子里的行与行之间划一条细线 */
.panel-row + .panel-row{
    border-top: 1px solid var(--line);
}
.row-name{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    font-size: 16px;
    color: var(--ink);
}
/* 名目前面那个小图标 (画在 icons.html 里), 一样大小, 颜色一件事一个 */
.field-icon{
    display: flex;
    flex: none;
}
.field-icon svg{
    width: 21px;
    height: 21px;
}
.field-icon-id{
    color: var(--blue);
}
.field-icon-email{
    color: var(--muted);
}
.field-icon-gender{
    color: var(--accent);
}
.field-icon-age{
    color: rgb(150, 110, 220);
}
.field-icon-zodiac{
    color: rgb(232, 172, 40);
}
.field-icon-mbti{
    color: rgb(60, 180, 130);
}
.field-icon-signature{
    color: rgb(55, 180, 195);
}
.field-icon-coin{
    color: rgb(232, 172, 40);
}
.field-icon-diamond{
    color: rgb(60, 180, 214);
}
.field-icon-category{
    color: var(--blue);
}
.field-icon-title{
    color: rgb(150, 110, 220);
}
.field-icon-content{
    color: rgb(55, 180, 195);
}
.field-icon-image{
    color: rgb(60, 180, 130);
}
.field-icon-private{
    color: var(--muted);
}
/* 右边那一半: 几行的框都一样宽, 才在同一条竖线上排着。
   挑性别那两个按钮注册页上也在用, 那儿是自己占一行的, 所以只管面板里的 */
.panel-row .gender-pick, .row-input, .row-select, .row-fixed, .row-check{
    flex: 1;
    min-width: 0;
    max-width: 62%;
    margin-left: auto;
}
/* 改不了的那种 (邮箱): 不给框, 就在右边写着 */
.row-fixed{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: normal;
    color: var(--muted);
    text-align: right;
}
/* 行里的框: 宽度归右边这一半, 上下的空隙归行出, 所以各页面写的宽和边距都不要了 */
.panel-row .formcontrol{
    width: 100%;
    margin: 0px;
}
/* 框后面还跟个字的 (年龄后面那个"岁") */
.row-input{
    display: flex;
    align-items: center;
    gap: 8px;
}
.row-unit{
    flex: none;
    font-size: 15px;
    font-weight: normal;
    color: var(--muted);
}
/* 勾一下就算的那种 (仅自己可见): 勾选框大一点, 手指也点得着 */
.row-check{
    display: flex;
    justify-content: flex-end;
}
.row-check input{
    width: 20px;
    height: 20px;
    margin: 0px;
    accent-color: var(--accent);
    cursor: pointer;
}
/* 名目在框上头、框占满一整块的那种 */
.panel-group.block .counted-field{
    margin: 10px 0px 0px 0px;
}
.panel-group.block .formcontrol{
    width: 100%;
    margin: 10px 0px 0px 0px;
}
/* 字数是跟着框走的, 那点空隙归框上头那一下出 */
.panel-group.block .counted-field .formcontrol{
    margin: 0px;
}
/* 存下来的那条: 面板最下面通宽的一条 */
.panel-save{
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 13px;
    border: none;
    border-radius: var(--radius-control);
    background-color: var(--accent);
    font-family: sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    transition: background-color var(--quick);
}
.panel-save:hover{
    background-color: rgb(0, 165, 230);
}
/* ===== 挑性别: 男女并排两个按钮 ===== */
/* 注册页和编辑资料面板都用它。男女就两个, 下拉框还得点开一下才看得见,
   所以摆成两个按钮, 挑中的那个亮起来 (真正的圆点藏在按钮底下) */
.gender-pick{
    display: flex;
    gap: 8px;
}
.gender-choice{
    position: relative;
    flex: 1;
    margin: 0px;
}
.gender-choice input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.gender-face{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 4px;
    border: 2px solid var(--line);
    border-radius: var(--radius-control);
    background-color: white;
    font-family: sans-serif;
    font-size: 15px;
    color: var(--muted);
    cursor: pointer;
    transition: border-color var(--quick), background-color var(--quick), color var(--quick);
}
.gender-choice:hover .gender-face{
    border-color: var(--accent-soft);
    color: var(--ink);
}
.gender-choice input:checked + .gender-face{
    border-color: var(--accent);
    background-color: var(--accent-soft);
    color: var(--accent);
}
/* 键盘挑的时候也得看得出停在哪个上 (圆点藏起来了, 描的是它旁边这块) */
.gender-choice input:focus-visible + .gender-face{
    box-shadow: 0 0 0 3px var(--accent-soft);
}
/* ♂♀ 那个标本来是贴在头像角上的圆牌子 (样式在 profilepage.css), 挪进按钮里
   就只留符号: 不占绝对定位, 不要底色和白边, 颜色跟着这个按钮的字走 */
.gender-choice .gender-face .gender-badge{
    position: static;
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    color: currentColor;
}
.gender-choice .gender-face .gender-badge svg{
    width: 16px;
    height: 16px;
}
/* ===== 输入框底下的字数 ("12/50") ===== */
/* 发帖面板和编辑资料面板都在用, 数字由 js/charcount.js 填。
   数字摆在框外面: 多行框里的字是能滚的, 会打数字底下过, 右边那个角还有滚动条 */
.counted-field{
    /* 眼下用它的都是"名目在上、框占满一整块"那种 (发帖的标题正文、资料里的签名),
       所以这层壳占满地方, 框再撑满它 */
    width: 100%;
}
.counted-field .formcontrol{
    width: 100%;
    /* 宽度归壳管了, 边框和内边距得算在这个宽里头 */
    box-sizing: border-box;
}
.char-count{
    display: block;
    margin-top: 4px;
    padding-right: 3px;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: var(--muted);
    text-align: right;
}
/* ===== 头像框 ===== */
/* 框比头像大出一圈圈住它, 宽出来的那一截落在头像和名字之间的空当里,
   所以旁边的东西一点不用动。哪儿要套框就在那一层写上 --framed (头像多大),
   底下这个壳只管给框定位 */
.framed-avatar{
    position: relative;
    display: inline-flex;
    flex: none;
    line-height: 0;
}
.avatar-frame{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--framed) * 1.34);
    height: calc(var(--framed) * 1.34);
    /* 只是装饰: 点下去该开面板还开面板, 别让它把这一下接走 */
    pointer-events: none;
}
.preview-frame{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 147px;
    height: 147px;
    /* 只是装饰, 别接住点头像那一下 */
    pointer-events: none;
}
/* 商店和头像面板里的样子图: 中间一张头像, 外面套那个圈, 多大由 --frame 定 */
.frame-preview{
    position: relative;
    display: block;
    flex: none;
    width: var(--frame);
    height: var(--frame);
}
.frame-face{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 脸缩在圈里, 圈的外沿就是这块地方的边 */
    width: calc(var(--frame) / 1.34);
    height: calc(var(--frame) / 1.34);
    object-fit: cover;
    border-radius: 50%;
    background-color: white;
}
.frame-ring{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.avatar-hint{
    font-size: 14px;
    font-weight: normal;
    color: rgb(110, 110, 110);
    margin-top: 10px;
    margin-bottom: 5px;
}
.hidden-file{
    display: none;
}
#upload-label{
    display: inline-block;
    margin-top: 10px;
    padding: 5px 18px;
    border-radius: 999px;
    background-color: var(--soft);
    font-size: 16px;
    cursor: pointer;
    transition: background-color var(--quick);
}
#upload-label:hover{
    background-color: rgb(224, 224, 224);
}
#upload-error{
    font-size: 14px;
    font-weight: normal;
    color: rgb(196, 43, 43);
    margin-bottom: 0px;
}
/* 消息面板: 每页都能从右下角那个铃铛拉出来 */
@keyframes dot-pop{
    from{
        transform: scale(0);
    }
}
#message-panel{
    display: none;
    position: fixed;
    /* 就在拉它出来的那个铃铛旁边: 底边跟按钮那一列齐, 横着让到列子左边,
       右边那 90 是按钮离边 24 + 按钮 54 + 中间留的一点 */
    bottom: 24px;
    right: 90px;
    width: 400px;
    max-width: calc(100% - 110px);
    /* 消息再多也就这么高, 长出来的部分在列表里滚, 标题和按钮那行钉着不动 */
    max-height: 70vh;
    padding: 15px 20px 20px 20px;
    background-color: white;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-panel);
    z-index: 90;
    /* 从挨着按钮那个角上长出来 */
    transform-origin: bottom right;
}
#message-panel.message-panel-open{
    display: flex;
    flex-direction: column;
    animation: panel-open-up 0.18s ease-out;
}
#message-panel-head{
    display: flex;
    flex: none;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
}
/* 顶上那个"全部删除", 挨着关闭按钮放。跟消息上那颗垃圾桶一样是灰药丸:
   删消息是天天要按的事, 一片红反倒吓人 */
/* 一次清光那颗: 跟每条上的"删除"是一样的红底白字 */
#message-clear{
    margin-left: auto;
    margin-right: 10px;
    border: none;
    border-radius: 999px;
    padding: 4px 12px;
    background-color: var(--danger);
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity var(--quick);
}
#message-clear:hover{
    opacity: 0.85;
}
#message-list{
    /* flex 里的项默认不肯比内容矮, 不写这个它就撑破面板不滚了 */
    min-height: 0;
    overflow-y: auto;
}
.singlemessage{
    display: grid;
    /* 右边就一颗"删除", 按它自己的宽给, 剩下的都是消息正文的 */
    grid-template-columns: 1fr auto;
    grid-gap: 10px;
    align-items: center;
    margin-top: 15px;
    padding: 15px;
    border-radius: var(--radius-control);
    background-color: var(--soft);
    font-size: 15px;
    text-align: left;
}
.message-content{
    margin-bottom: 0px;
    overflow-wrap: anywhere;
}
.message-buttons{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
/* 过去看看是哪个帖子: 蓝底白字, 挨着"删除"那颗摆 */
.message-view{
    border-radius: 999px;
    padding: 4px 12px;
    background-color: var(--accent);
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    transition: opacity var(--quick);
}
/* 它是个链接, 颜色和下划线都得自己按住, 不然套的是浏览器那套蓝字 */
.message-view, .message-view:hover{
    color: white;
    text-decoration: none;
}
.message-view:hover{
    opacity: 0.85;
}
/* 删这一条: 红底白字, 一眼看得出这颗是要删东西的 */
.message-delete{
    border-style: none;
    border-radius: 999px;
    padding: 4px 12px;
    background-color: var(--danger);
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity var(--quick);
}
.message-delete:hover{
    opacity: 0.85;
}
.message-check{
    border-style: none;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 14px;
    font-weight: bold;
    background-color: var(--accent);
    color: white;
    cursor: pointer;
    transition: opacity var(--quick);
}
.message-check:hover{
    opacity: 0.8;
}
.message-empty{
    margin-top: 15px;
    margin-bottom: 0px;
    font-weight: normal;
    color: rgb(110, 110, 110);
}
/* 面板弹出来的样子: 淡进来, 再往下落一点点
   站里的面板都用这一套, 收起来是干脆的, 不拖着 */
@keyframes panel-open{
    from{
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }
}
/* 从底下那个角上开的面板 (右下角圆钮拉出来的消息面板) 反过来, 往上抬一点 */
@keyframes panel-open-up{
    from{
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
}
/* 钉在屏幕正中间的面板得自己带上居中那两下位移, 不然弹出来的时候会先跳到一边去 */
@keyframes panel-open-center{
    from{
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-12px) scale(0.98);
    }
}
/* 只横着居中的面板 (手机上的聊天面板就是这样) 用这一个, 上下的位移不能带 */
@keyframes panel-open-x{
    from{
        opacity: 0;
        transform: translateX(-50%) translateY(-12px) scale(0.98);
    }
}
@keyframes fade-in{
    from{
        opacity: 0;
    }
}
/* 各种面板右上角的关闭按钮, 图标是 icons.html 里画的叉 */
.close-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0px;
    border: none;
    border-radius: 50%;
    background-color: var(--soft);
    color: var(--muted);
    cursor: pointer;
    transition: background-color var(--quick), color var(--quick), transform var(--quick);
}
.close-btn svg{
    width: 16px;
    height: 16px;
}
.close-btn:hover{
    background-color: var(--danger-soft);
    color: var(--danger);
}
.close-btn:active{
    transform: scale(0.92);
}
/* 整颗按钮就一个图标 (删东西的垃圾桶, 帖子上那把锁...): 圆的, 灰底灰笔,
   摸上去泛点蓝。站里好几处都用它, 省得各写各的又各是各的样子 */
.icon-pill{
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    border-style: none;
    border-radius: 999px;
    padding: 5px;
    color: var(--ink);
    background-color: var(--soft);
    cursor: pointer;
    transition: background-color var(--quick);
}
.icon-pill .line-icon{
    display: block;
    width: 17px;
    height: 17px;
}
.icon-pill:hover{
    background-color: var(--accent-soft);
}
/* 聊天面板: 跟消息面板一样每页都在, 右下角那个圆钮和别人主页的按钮都开它。
   除了消息面板, 站里的面板都摆在屏幕正中间 */
#chat-panel{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    max-width: calc(100% - 60px);
    max-height: 80vh;
    overflow-y: auto;
    padding: 15px 20px 20px 20px;
    background-color: white;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-panel);
    z-index: 92;
}
#chat-panel.chat-panel-open{
    display: block;
    animation: panel-open-center 0.18s ease-out;
}
/* 面板里能滚的有好几块 (整个面板、左边聊过的人、中间的对话), 滑道一律不画:
   这几块本来就不宽, 一条滑道占掉的地方看得出来。不画只是看不见, 照样滚得动 */
#chat-panel, #chat-panel *{
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#chat-panel::-webkit-scrollbar, #chat-panel *::-webkit-scrollbar{
    display: none;
}
#chat-panel-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
}
/* "聊天"和它左边那两个说话的泡排成一行 */
#chat-title{
    display: flex;
    align-items: center;
    gap: 15px;
}
.chat-symbol{
    display: flex;
    flex: none;
    /* 图里那两个泡在自己的方框里偏上, 按框居中就比旁边的字高一点, 往下按一按 */
    transform: translateY(1px);
}
.chat-symbol svg{
    width: 31px;
    height: 31px;
}
/* 一深一浅两个泡, 深的那个上头三个白点 */
.chat-symbol-front{
    fill: var(--accent);
}
.chat-symbol-back{
    fill: rgba(0, 183, 255, 0.35);
}
.chat-symbol-dots{
    fill: white;
}
/* 左边聊过天的人, 右边对话 */
.chat-body{
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 15px;
    margin-top: 10px;
}
.chat-partners{
    /* 高度跟着右边那栏走 (对话 + 输入框), 分隔线才能一路划到底 */
    min-height: 0;
    overflow-y: auto;
    padding-right: 10px;
    border-right: 2px solid rgb(232, 232, 232);
    text-align: left;
}
/* 右边一栏: 上面是对话, 下面是输入框 */
.chat-right{
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* 鼠标停上去不变色: 正在聊的那个人是靠底色标出来的 (active), 停一下也上色的话
   两个看着一样, 反倒认不出在跟谁说话 */
.chat-partner{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: background-color var(--quick);
}
.chat-partner.active{
    background-color: var(--accent-soft);
}
.chat-partner-avatar{
    width: 35px;
    height: 35px;
    object-fit: cover;
    border-radius: 50%;
}
/* 头像右下角那个小点: 绿的在线, 灰的不在, 跟大厅那一栏是一个意思 */
.chat-partner-face{
    position: relative;
    flex: none;
    line-height: 0;
}
.chat-partner-face::after{
    content: '';
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 11px;
    height: 11px;
    border: 2px solid white;
    border-radius: 50%;
    background-color: grey;
}
.chat-partner-face.online::after{
    background-color: #41db51;
}
/* 这个人说了话我还没点开看: 名字后面写"未读", 比一个小红点说得清楚。
   平时不占地方, 这一行有 unread 才露出来 */
.chat-unread-text{
    display: none;
    flex: none;
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 20px;
    background-color: var(--danger);
    font-size: 12px;
    color: white;
}
.chat-partner.unread .chat-unread-text{
    display: block;
    animation: dot-pop 0.25s ease-out;
}
/* 再点一下正在聊的那个人弹出来的小菜单 */
#chat-menu{
    display: none;
    position: fixed;
    z-index: 1300;
    min-width: 130px;
    padding: 5px 0px;
    background-color: white;
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
    animation: panel-open 0.12s ease-out;
}
.chat-menu-item{
    padding: 8px 18px;
    font-size: 15px;
    white-space: nowrap;
    cursor: pointer;
}
.chat-menu-item:hover{
    background-color: rgb(240, 240, 240);
}
.chat-menu-item.danger{
    color: rgb(220, 53, 69);
}
.chat-partner-name{
    font-size: 15px;
    /* 名字长了就省略号收尾, 别把这一栏顶宽 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-inner{
    height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    /* 新的在最下面, 所以列倒着排 */
    flex-direction: column-reverse;
}
.chat-row{
    display: grid;
    /* 头像那两栏是固定的 (跟 .chat-avatar 一样宽), 中间的气泡吃掉剩下的宽度 */
    grid-template-columns: 42px 1fr 42px;
    grid-gap: 10px;
}
.chat-avatar{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}
/* 中间那一格: 气泡, 自己说的话下面还挂一行"读没读" */
.chat-bubble{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}
.chat-bubble.mine{
    align-items: flex-end;
}
.chat-read{
    margin: 0px 4px 10px 4px;
    font-size: 12px;
    font-weight: normal;
    color: var(--muted);
}
/* 还没看的写得显眼点, 看过的就淡淡一句 */
.chat-read.unseen{
    color: var(--accent);
}
.singlechat{
    margin-bottom: 10px;
    padding: 10px 14px;
    /* 气泡: 三个角圆一点, 挨着头像那个角收一收 */
    border-radius: var(--radius-card);
    background-color: var(--soft);
    /* 说几个字就多宽, 长了到这儿换行, 不再一路撑满整行 */
    max-width: 70%;
    /* 一长串不带空格的字也得断开, 不然会顶出面板 */
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: left;
}
.singlechat.mine{
    /* 底下那行"读没读"顶上来一点, 挨着气泡才看得出是一对 */
    margin-bottom: 3px;
    background-color: var(--accent-soft);
    border-top-right-radius: 4px;
}
.singlechat:not(.mine){
    border-top-left-radius: 4px;
}
/* 隔了好一阵子没说话, 再开口的地方在中间横一道时间 */
.chat-when{
    margin: 10px 0px;
    text-align: center;
    font-weight: normal;
    font-size: 12px;
    color: rgb(110, 110, 110);
}
/* 往上翻到头时露出来的那一行, 露出来就去取更早的了 */
.chat-older{
    margin: 6px 0px 12px 0px;
    text-align: center;
    font-weight: normal;
    font-size: 13px;
    color: rgb(110, 110, 110);
}
.no-chats, .no-partners{
    /* 列是倒着排的, 这句话自己往上贴 */
    margin-top: auto;
    font-weight: normal;
    font-size: 15px;
    color: rgb(110, 110, 110);
}
#chat-form{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}
.chat-input{
    flex-grow: 1;
    padding: 8px 14px;
    border: 2px solid var(--line);
    border-radius: var(--radius-control);
}
/* 点进去不亮边也不描圈 (浏览器自带的那个圈也去掉), 光标在里头闪着就够了 */
.chat-input:focus{
    outline: none;
}
/* 金币: 每天上线攒一枚, 我的主页和卡片市场都要显示 */
.coins{
    /* 块级的 fit-content, 才会跟标题一样靠左 (左栏是居中的) */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 5px 14px;
    border-radius: 999px;
    background-color: rgba(232, 169, 23, 0.15);
}
.coin-icon{
    width: 22px;
}
.coin-amount{
    font-size: 18px;
    color: rgb(150, 105, 10);
}
/* 钻石: 跟金币一个模样的药丸, 换个蓝底 (.coins 那些尺寸照搬, 只改颜色) */
.diamonds{
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background-color: rgba(75, 196, 232, 0.18);
}
.diamond-amount{
    font-size: 18px;
    color: rgb(25, 125, 155);
}
/* 两个药丸并排的那一行 (主页左栏、商店顶上); 挤不下就换行 */
.wallet{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}
.wallet > .coins{
    margin-top: 0px;
}

/* 在线状态那个牌子: 一个圆点加"在线/离线"。别人的主页上摆在头像底下,
   大厅左栏那一列人的名字底下也是它 (那边收小了一号, 见 feed.css) */
.status{
    /* 块级的 fit-content, 才会跟标题一样靠左 (左栏是居中的) */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 15px;
}
.status-dot{
    width: 11px;
    height: 11px;
    /* 名字长了也不许把这个点压扁 */
    flex: none;
    border-radius: 50%;
}
.status.online{
    background-color: rgba(65, 219, 81, 0.15);
    color: rgb(34, 138, 46);
}
.status.online .status-dot{
    background-color: #41db51;
}
.status.offline{
    background-color: rgba(130, 130, 130, 0.15);
    color: rgb(110, 110, 110);
}
.status.offline .status-dot{
    background-color: grey;
}
/* "上次在线 x 天前": 比"离线"轻一点, 用竖线跟它隔开 */
.status-seen{
    padding-left: 8px;
    border-left: 1px solid rgba(110, 110, 110, 0.35);
    font-size: 14px;
}

/* 删东西之前的确认框 */
#confirm-back{
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1400;
    background-color: rgba(0, 0, 0, 0.45);
}
#confirm-back.confirm-open{
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fade-in 0.15s ease-out;
}
#confirm-box{
    max-width: 90vw;
    padding: 25px 30px;
    border-radius: 15px;
    background-color: white;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: panel-open 0.2s ease-out;
}
#confirm-text{
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: bold;
}
.confirm-buttons{
    display: flex;
    gap: 15px;
    justify-content: center;
}
.confirm-buttons button{
    border-style: none;
    border-radius: var(--radius-control);
    padding: 8px 25px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: opacity var(--quick);
}
.confirm-buttons button:hover{
    opacity: 0.8;
}
#confirm-cancel{
    background-color: rgb(170, 170, 170);
}
#confirm-ok{
    background-color: rgb(220, 53, 69);
}
/* 不是删东西的时候别用红的吓人 */
#confirm-ok.confirm-safe{
    background-color: var(--accent);
}

/* 提示浮在页面顶上, 不占版面, 显示几秒自己淡掉 */
.flash-area{
    position: fixed;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* 空的时候别挡住底下的东西 */
    pointer-events: none;
}
.alert{
    /* 里头的东西 (字、金币图标、关掉的那个叉) 排成一行按中线对齐。
       靠行高和 vertical-align 摆的话, iPad 上中文字体的行距跟这边不一样,
       字就会偏上或偏下; 交给 flex 去对, 各家浏览器都一样 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 90vw;
    margin: 0;
    padding: 12px 20px;
    border: none;
    border-radius: 20px;
    color: white;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    animation: flash-in 0.25s ease-out, flash-out 0.6s ease-in 4s forwards;
}
.alert-success{
    background-color: rgba(40, 167, 69, 0.85);
}
.alert-danger{
    background-color: rgba(220, 53, 69, 0.85);
}
.alert-info{
    background-color: rgba(0, 183, 255, 0.85);
}
.alert-warning{
    background-color: rgba(230, 150, 0, 0.85);
}
/* 每日登录的金币提示, 配金币的颜色 */
.alert-coin{
    background-color: rgba(214, 158, 46, 0.9);
}
.flash-coin{
    width: 20px;
    height: 20px;
    flex: none;
}
/* 叉写在 html 的最前面 (它原本是浮到右边去的), 排成一行之后得自己挪到末尾 */
.alert .close{
    order: 1;
    float: none;
    flex: none;
    margin-left: 9px;
    line-height: 1;
    color: white;
    opacity: 0.7;
    text-shadow: none;
}
@keyframes flash-in{
    from{
        opacity: 0;
        transform: translateY(-15px);
    }
    to{
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes flash-out{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
        visibility: hidden;
    }
}

/* ===== 右下角浮着的那几个圆钮 ===== */
/* 消息和聊天每页都有 (导航栏里原来那两条就是它俩), 发帖那个只有大厅往里添。
   竖着摆, html 里写在前面的在上面: 消息、聊天, 发帖在最底下 */
#float-buttons{
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* 面板都比这个高, 拉开面板的时候按钮压在底下 */
    z-index: 80;
}
.float-btn{
    /* 红点贴着它的右上角 */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0px;
    border: none;
    border-radius: 50%;
    /* 用沉一点的蓝, 那个亮蓝在白底上太扎眼 */
    background-color: var(--ink);
    color: white;
    cursor: pointer;
    box-shadow: var(--shadow-hover);
    transition: transform var(--quick);
}
.float-btn:hover{
    transform: translateY(-2px);
}
.float-btn:active{
    transform: translateY(0px) scale(0.94);
}
/* 线稿的图标, 笔画跟着钮上的字色走 (深底白字), 所以不用再把图翻成白的了 */
.float-icon{
    display: block;
    width: 28px;
    height: 28px;
}
/* 铃铛上下几乎顶到边, 跟聊天那个一样大摆着就显得高出一截, 收一号才一样重 */
#message-float .float-icon{
    width: 26px;
    height: 26px;
}
/* 有人说了话还没看: 钮的右上角点一个小红点 */
.float-btn.unread::after{
    content: '';
    position: absolute;
    top: 1px;
    right: 1px;
    width: 13px;
    height: 13px;
    /* 白圈把红点和底下深色的钮隔开 */
    border: 2px solid white;
    border-radius: 50%;
    background-color: var(--danger);
    animation: dot-pop 0.25s ease-out;
}

/* ========== 手机上的版式 ==========
   电脑上的样子一点没动: 下面这些只有窄屏才会用到。
   全站都按 820px 这条线分, 各页面的 css 末尾也各有一段 */
@media (max-width: 820px){
    #navi{
        width: auto;
        margin: 8px;
        padding: 6px 14px;
        font-size: 17px;
    }
    /* 站名小了一号, 徽也跟着收一点 */
    #navi .brand-logo{
        width: 26px;
        height: 26px;
    }
    /* 填表面板: 一行里的名目和框挤不开, 名目单独一行, 框占满整块 */
    .panel-row{
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .panel-row .gender-pick, .row-input, .row-select, .row-fixed, .row-check{
        max-width: none;
        margin-left: 0px;
    }
    .row-fixed{
        text-align: left;
    }
    /* 只勾一下的那种 (仅自己可见) 右边就一个小方块, 拆成两行反而怪, 还是一行摆着 */
    .panel-row.tight{
        flex-direction: row;
        align-items: center;
    }
    /* 导航收进汉堡菜单后是竖着的一条条, 松一点好点, 一律居中摆 */
    #navi .navbar-nav{
        padding-top: 6px;
    }
    #navi .nav-link{
        padding: 8px 12px;
        text-align: center;
    }
    /* 竖着排的时候让那颗钮占满一条, 里头的字才落在正中 */
    #navi .nav-logout button{
        width: 100%;
    }
    /* 打招呼那一条是排成一行的头像加名字, 得让这一行自己居中 */
    #navi #nav-greeting{
        justify-content: center;
    }
    /* 手机上也是挨着铃铛开: 右边留出按钮那一列的地方 (离边 16 + 按钮 54 + 一点空),
       剩下的宽度都归面板; 高度按眼下看得见的那截屏幕算, 顶上刚好躲开导航栏 */
    #message-panel{
        top: auto;
        bottom: 16px;
        right: 78px;
        left: 8px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 90px);
        max-height: calc(100dvh - 90px);
        padding: 12px 14px 16px 14px;
    }
    /* 聊天面板比别的面板高一截: 手机上还居中的话, 顶上那一条 (标题和关掉的叉)
       就钻到导航栏底下去了。所以这儿不居中了, 从导航栏下面往下摆 (跟消息面板
       起头的地方一样), 高度按眼下看得见的那截屏幕算, 底下也就不会被工具栏压住 */
    #chat-panel{
        top: 66px;
        transform: translateX(-50%);
        width: calc(100% - 16px);
        max-width: none;
        /* dvh 是地址栏露着时真正看得见的高度, 老浏览器不认就用上面那行 vh */
        max-height: calc(100vh - 78px);
        max-height: calc(100dvh - 78px);
        padding: 12px 14px 16px 14px;
    }
    /* 不居中了, 弹出来那一下的位移也得换成只横着的那个 */
    #chat-panel.chat-panel-open{
        animation: panel-open-x 0.18s ease-out;
    }
    .singlemessage{
        grid-template-columns: 1fr auto;
        padding: 12px;
    }
    /* 聊过的人从左边一栏改成顶上一条, 横着划 */
    .chat-body{
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }
    .chat-partners{
        display: flex;
        gap: 8px;
        height: auto;
        padding: 0px 0px 10px 0px;
        border-right: none;
        border-bottom: 2px solid var(--line);
        overflow-x: auto;
        overflow-y: hidden;
    }
    .chat-partner{
        flex: none;
        flex-direction: column;
        gap: 4px;
        width: 66px;
        padding: 6px 4px;
        text-align: center;
    }
    .chat-partner-name{
        width: 100%;
        font-size: 12px;
    }
    /* 一列一个人的时候"未读"跟在名字底下, 缩成一小块摆在中间 */
    .chat-unread-text{
        align-self: center;
        margin-left: 0px;
        padding: 1px 6px;
        font-size: 11px;
    }
    .chat-inner{
        /* 跟面板一样按看得见的那截屏幕算: 地址栏露着的时候对话这块也矮一点,
           整个面板才不用自己滚 (滚起来标题就跟着上去了) */
        height: 46vh;
        height: 46dvh;
    }
    .chat-row{
        grid-template-columns: 40px 1fr 40px;
        grid-gap: 8px;
    }
    .chat-avatar{
        width: 40px;
        height: 40px;
    }
    .singlechat{
        /* 手机上这一栏本来就窄, 气泡再收到七成就没几个字了 */
        max-width: 85%;
        font-size: 15px;
    }
    #chat-form{
        gap: 8px;
    }
    /* 输入框默认不肯比自带的宽度更窄, 小屏上会把这一行顶出去 */
    .chat-input{
        min-width: 0;
    }
    /* 看大图: 箭头小一圈, 别压在图上 */
    #lightbox-image{
        max-width: 92%;
    }
    .lightbox-arrow{
        width: 40px;
        height: 40px;
    }
    .lightbox-arrow svg{
        width: 20px;
        height: 20px;
    }
    #lightbox-prev{
        left: 8px;
    }
    #lightbox-next{
        right: 8px;
    }
    #lightbox-count{
        bottom: 16px;
    }
    .flash-area{
        top: 70px;
    }
    /* 手机上边角本来就没多少地方, 那几个圆钮往角上再靠一点 */
    #float-buttons{
        right: 16px;
        bottom: 16px;
        gap: 12px;
    }
}