.chat-layout #composer{display:block!important;visibility:visible!important;opacity:1!important}
.backend-link{display:block;padding:10px;border-radius:11px;background:#fff5f8;color:var(--pink-deep);font-size:13px;text-align:center;text-decoration:none}.backend-link:hover{background:#ffe8f0}
.messages{scroll-behavior:auto}
.composer-box{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:end;gap:8px}.composer-box .icon-button{display:grid;place-items:center;touch-action:manipulation;user-select:none;width:46px;height:44px;border-radius:12px;cursor:pointer;font-size:12px;font-weight:700}.composer-box .send-button{height:44px;min-width:56px;white-space:nowrap}.composer .file-name{display:block;margin:5px 0 0 54px;max-width:calc(100% - 54px)}
.composer-preview{display:flex;align-items:center;gap:8px;margin:0 0 7px 46px;min-height:0}.composer-preview[hidden]{display:none}.composer-preview img{width:64px;height:64px;display:block;border-radius:10px;border:1px solid #f4d9e4;object-fit:cover}.clear-image{width:28px;height:28px;border-radius:50%;background:#fff0f5;color:#c45f83;font-size:19px;line-height:1}.clear-image:hover{background:#ffe0eb}
.message-image-button{display:block;padding:0;border:0;background:transparent;line-height:0;cursor:zoom-in}.message-image-button .message-image{cursor:zoom-in;transition:transform .2s ease,filter .2s ease}.message-image-button:hover .message-image{transform:scale(1.02);filter:brightness(.96)}
.image-lightbox{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;background:rgba(38,28,35,.72);backdrop-filter:blur(5px);animation:notice-in .2s ease}.image-lightbox[hidden]{display:none}.image-lightbox>img{display:block;max-width:min(94vw,1100px);max-height:88vh;width:auto;height:auto;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.35);object-fit:contain}.lightbox-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.94);color:#6f5966;font-size:28px;line-height:1;cursor:pointer}.lightbox-close:hover{background:#fff0f5;color:var(--pink-deep)}
@media(max-width:820px){.sidebar-footer{display:grid;margin-top:0;padding:8px 12px;grid-template-columns:1fr 1fr;gap:8px}.auth-card{padding:18px 14px}.brand-copy{padding:14px 4px 17px}.brand-copy h1{font-size:36px;margin:10px 0}.brand-copy p{font-size:14px;line-height:1.7}.notice{margin-top:14px;padding:12px 14px}.auth-panel{padding:22px 18px;border-radius:21px}.field{margin:12px 0}}
@media(max-width:820px){
  body{background:#fff}
  .app-shell{padding:0;min-height:100dvh}
  .chat-layout{height:100dvh;min-height:0;width:100%;display:block;border:0;border-radius:0;box-shadow:none}
  .chat-layout.is-user .sidebar{display:block;position:relative;height:0;border:0;overflow:visible;z-index:5}
  .chat-layout.is-user .profile,.chat-layout.is-user .side-title,.chat-layout.is-user .friend-list{display:none}
  .chat-layout.is-user .sidebar-footer{display:block;position:absolute;top:8px;right:10px;margin:0;padding:0;border:0}
  .chat-layout.is-user .sidebar-footer .backend-link{display:none}
  .chat-layout.is-user .quiet-button{padding:7px 10px;background:rgba(255,255,255,.86);border:1px solid #f1eaf0;font-size:12px}
  .chat-layout.is-user .chat-header,.chat-layout.is-user .announcement{display:none}
  .main-panel{height:100dvh;min-height:0;overflow:hidden}
  .messages{min-height:0;height:auto;flex:1;padding:14px 12px 10px;gap:10px}
  .message-row{max-width:92%;gap:7px}
  .message-bubble{font-size:14px;padding:9px 11px;border-radius:14px}
  .message-image{max-width:min(66vw,250px);max-height:240px}
  .composer{flex:none;padding:8px 10px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -5px 18px rgba(118,91,113,.08)}
  .composer-box{grid-template-columns:46px minmax(0,1fr) 58px;gap:6px}
  .composer textarea{min-height:44px;max-height:108px;padding:10px 11px;font-size:15px;line-height:1.45}
  .composer-box .send-button{min-width:58px;height:44px;padding:0 8px}
  .composer .file-name{font-size:11px;margin-left:52px}
  .composer-preview{margin:0 0 6px 52px}.composer-preview img{width:56px;height:56px}
  .avatar{width:34px;height:34px;border-radius:50%}
  .chat-layout.is-admin .chat-header,.chat-layout.is-admin .announcement,.chat-layout.is-admin .settings,.chat-layout.is-admin .admin-console{display:none}
  .chat-layout.is-admin .sidebar{height:174px;min-height:174px;overflow:hidden}
  .chat-layout.is-admin .profile{padding:8px 14px;height:56px}
  .chat-layout.is-admin .side-title{display:none}
  .chat-layout.is-admin .friend-list{height:70px;max-height:70px;padding:6px 10px}
  .chat-layout.is-admin .friend{min-width:148px;padding:8px;background:#fff}
  .chat-layout.is-admin .friend .avatar{width:30px;height:30px}
  .chat-layout.is-admin .sidebar-footer{height:48px;padding:5px 10px;grid-template-columns:1fr 1fr}
  .chat-layout.is-admin .main-panel{height:calc(100dvh - 174px);display:flex;flex-direction:column;overflow:hidden}
  .chat-layout.is-admin .messages{flex:1;min-height:0;overflow-y:auto}
  /* 管理员移动端发送栏固定在屏幕底部，避免被消息区或管理折叠区挤出视口。 */
  .chat-layout.is-admin .main-panel{position:relative;padding-bottom:78px}
  .chat-layout.is-admin .messages{padding-bottom:96px}
  .chat-layout.is-admin #composer{display:block!important;visibility:visible!important;opacity:1!important;position:fixed;left:0;right:0;bottom:0;z-index:30;width:100%;margin:0;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(255,255,255,.98);box-shadow:0 -8px 24px rgba(118,91,113,.14)}
}

/* 手机端最终布局：聊天优先，禁止资料区、公告和管理面板挤压消息与发送栏。 */
@media (max-width:820px) {
  body.chat-mode { width:100%; min-width:0; height:100%; overflow:hidden; }
  body.chat-mode .app-shell { width:100%; height:100dvh; min-height:0; padding:0!important; overflow:hidden; }
  .chat-layout { width:100%; height:100dvh!important; min-height:0!important; display:block!important; overflow:hidden!important; border:0!important; border-radius:0!important; box-shadow:none!important; }

  /* 普通用户：不显示重复的客服资料、好友列表、公告和头部。 */
  .chat-layout.is-user .sidebar,
  .chat-layout.is-user .chat-header,
  .chat-layout.is-user .announcement { display:none!important; }
  .chat-layout.is-user .main-panel { width:100%; height:100dvh!important; min-height:0!important; padding:0 0 78px!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; }

  /* 管理员：只保留紧凑的用户会话横条，不再显示人工客服资料和管理按钮。 */
  .chat-layout.is-admin .sidebar { display:block!important; width:100%; height:58px!important; min-height:58px!important; border:0!important; border-bottom:1px solid var(--line)!important; overflow:hidden!important; }
  .chat-layout.is-admin .profile,
  .chat-layout.is-admin .side-title,
  .chat-layout.is-admin .sidebar-footer { display:none!important; }
  .chat-layout.is-admin .friend-list { display:flex!important; width:100%; height:58px!important; max-height:58px!important; padding:7px 10px!important; gap:7px!important; overflow-x:auto!important; overflow-y:hidden!important; }
  .chat-layout.is-admin .friend { display:flex!important; flex:0 0 auto; width:auto!important; min-width:116px!important; height:44px!important; padding:5px 9px!important; gap:7px!important; border:1px solid #f5e7ee!important; border-radius:12px!important; background:#fff!important; }
  .chat-layout.is-admin .friend.active { background:#fff0f5!important; border-color:#f5bfd2!important; }
  .chat-layout.is-admin .friend .avatar { width:30px!important; height:30px!important; }
  .chat-layout.is-admin .friend-copy b { max-width:68px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px!important; }
  .chat-layout.is-admin .friend-copy small { display:none!important; }
  .chat-layout.is-admin .chat-header,
  .chat-layout.is-admin .announcement,
  .chat-layout.is-admin .settings,
  .chat-layout.is-admin .admin-console { display:none!important; }
  .chat-layout.is-admin .main-panel { width:100%; height:calc(100dvh - 58px)!important; min-height:0!important; padding:0 0 78px!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; }

  .messages { flex:1 1 auto!important; width:100%; min-height:0!important; height:auto!important; overflow-y:auto!important; overflow-x:hidden!important; padding:12px 10px 92px!important; gap:9px!important; scroll-behavior:auto!important; }
  .message-row { max-width:94%!important; gap:6px!important; }
  .message-bubble { max-width:calc(100vw - 78px); padding:9px 11px!important; font-size:15px!important; line-height:1.5!important; }
  .message-image { max-width:min(62vw,240px)!important; max-height:220px!important; }

  /* 两种角色共用同一个固定发送栏，任何旧规则都不能隐藏它。 */
  .chat-layout #composer,
  .chat-layout.is-admin #composer,
  .chat-layout.is-user #composer { display:block!important; visibility:visible!important; opacity:1!important; position:fixed!important; left:0!important; right:0!important; bottom:0!important; z-index:100!important; width:100%!important; margin:0!important; padding:8px 10px calc(8px + env(safe-area-inset-bottom))!important; border-top:1px solid var(--line)!important; background:rgba(255,255,255,.98)!important; box-shadow:0 -5px 20px rgba(118,91,113,.14)!important; }
  .composer-box { display:grid!important; grid-template-columns:50px minmax(0,1fr) 60px!important; align-items:end!important; gap:6px!important; width:100%!important; }
  .composer-box .icon-button,
  .composer-box .send-button { display:grid!important; place-items:center!important; visibility:visible!important; opacity:1!important; height:46px!important; min-height:46px!important; }
  .composer-box .icon-button { width:50px!important; min-width:50px!important; padding:0!important; color:#d86f96!important; background:#fff0f5!important; font-size:13px!important; }
  .composer-box .send-button { width:60px!important; min-width:60px!important; padding:0!important; color:#fff!important; background:var(--pink)!important; font-size:14px!important; }
  .composer textarea { width:100%!important; min-height:46px!important; max-height:110px!important; padding:10px 11px!important; font-size:15px!important; line-height:1.45!important; resize:none!important; }
  .composer-preview { margin:0 0 6px 56px!important; }
  .composer .file-name { margin-left:56px!important; max-width:calc(100% - 56px)!important; }
}