:root{
  --im-primary:#07c160;
  --im-primary-dark:#06ad56;
  --im-primary-soft:rgba(7,193,96,.1);
  --im-bubble-self:linear-gradient(145deg, #9fe871 0%, #95ec69 52%, #8ddf62 100%);
  --im-bubble-other:#ffffff;
  --bg:#e4e8ec;
  --chat-bg:#ededed;
  --panel:#f5f6f8;
  --panel2:#ffffff;
  --text:#1a1a1a;
  --text-secondary:#4a5568;
  --muted:#8b95a1;
  --border:#e8ebef;
  --border-strong:#d8dde4;
  --green:#95ec69;
  --blue:#4a9fff;
  --danger:#fa5151;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --elev-shadow:0 12px 40px rgba(15,23,42,.1);
  --soft-shadow:0 2px 10px rgba(15,23,42,.05);
  --sidebar-w:320px;
  --avatar-contact:48px;
  --avatar-profile:44px;
  --avatar-peer:44px;
  --avatar-msg:36px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

body.chat-body{
  overflow:hidden;
}

.login-page{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px 20px;
  background:
    radial-gradient(900px 500px at 10% -5%, rgba(7,193,96,.14), transparent 55%),
    radial-gradient(700px 400px at 95% 100%, rgba(74,159,255,.1), transparent 50%),
    linear-gradient(165deg, #eef1f4 0%, #e4e8ec 100%);
}

.login-card{
  width:min(400px, 94vw);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.8);
  border-radius:var(--radius-xl);
  padding:28px 24px 24px;
  box-shadow:var(--elev-shadow);
  backdrop-filter:blur(12px);
}

.login-brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:24px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text);
  margin-bottom:4px;
}

.login-brand::before{
  content:"";
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(145deg, #12d46a, var(--im-primary));
  box-shadow:0 8px 20px rgba(7,193,96,.35);
  flex-shrink:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4 6.5C4 5.12 5.12 4 6.5 4h11C18.88 4 20 5.12 20 6.5v7c0 1.38-1.12 2.5-2.5 2.5H11l-4.2 3.15a.75.75 0 0 1-1.2-.6V16H6.5A2.5 2.5 0 0 1 4 13.5v-7Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px;
}

.login-subtitle{
  margin:0 0 22px 56px;
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.45;
}

.app{
  height:100dvh;
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  max-width:1280px;
  margin:0 auto;
  background:var(--panel2);
  box-shadow:0 0 0 1px var(--border), var(--elev-shadow);
}

.sidebar-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  z-index:40;
}
.sidebar-backdrop.show{ display:block; }

.sidebar{
  display:flex;
  flex-direction:column;
  min-height:0;
  background:var(--panel);
  border-right:1px solid var(--border);
  overflow:hidden;
}

.sidebar-header{
  flex:0 0 auto;
  padding:18px 16px 14px;
  border-bottom:1px solid var(--border);
  background:var(--panel2);
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.sidebar-brand-icon{
  width:36px;
  height:36px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg, #12d46a, var(--im-primary));
  color:#fff;
  box-shadow:0 6px 16px rgba(7,193,96,.28);
}

.sidebar-brand-text{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text);
}

.profile-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:var(--radius-md);
  background:var(--panel);
  border:1px solid var(--border);
  min-height:56px;
}

.profile-card:empty{
  display:none;
}

.profile-card-avatar,
.msg-avatar,
.peer-avatar,
.avatar{
  flex-shrink:0;
  display:grid;
  place-items:center;
  font-weight:700;
  color:#fff;
  border:2px solid rgba(255,255,255,.8);
  user-select:none;
  letter-spacing:-.02em;
}

.profile-card-avatar{
  width:var(--avatar-profile);
  height:var(--avatar-profile);
  border-radius:14px;
  font-size:18px;
}

.peer-avatar{
  width:var(--avatar-peer);
  height:var(--avatar-peer);
  border-radius:14px;
  font-size:18px;
}

.msg-avatar{
  width:var(--avatar-msg);
  height:var(--avatar-msg);
  border-radius:11px;
  font-size:14px;
  align-self:flex-end;
  flex-shrink:0;
}

.profile-card-meta{
  min-width:0;
  flex:1;
}

.profile-card-name{
  font-weight:650;
  font-size:15px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.profile-card-id{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.sidebar-section{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:10px 12px 16px;
  overflow:hidden;
}

.brand{
  font-weight:700;
  font-size:17px;
  margin:4px 8px 12px;
  letter-spacing:.02em;
}

.auth{
  padding:10px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:14px;
}
.auth-row{margin-bottom:10px}
.auth-actions{display:flex; gap:8px}
.me{margin-top:10px; color:var(--muted); font-size:12px}

.section-title{
  display:flex;
  align-items:center;
  gap:6px;
  margin:2px 4px 12px;
  padding:0 4px;
  font-size:12px;
  font-weight:600;
  color:var(--text-secondary);
  letter-spacing:.04em;
}

.section-count{
  font-size:11px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:0;
}

.list{
  flex:1;
  min-height:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:2px 4px 2px 2px;
  margin:0 -2px;
}

.avatar-wrap{
  position:relative;
  flex-shrink:0;
  width:var(--avatar-contact);
  height:var(--avatar-contact);
}

.user-item .avatar{
  width:100%;
  height:100%;
  border-radius:14px;
  font-size:19px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.avatar-status{
  position:absolute;
  right:0;
  bottom:0;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#c5cdd6;
  border:2px solid var(--panel);
  box-sizing:border-box;
  pointer-events:none;
}

.avatar-status.online{
  background:var(--im-primary);
  border-color:var(--panel2);
  box-shadow:0 0 0 1px rgba(7,193,96,.25);
}

.user-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--radius-md);
  cursor:pointer;
  user-select:none;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
  position:relative;
}

.user-item::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%) scaleY(0);
  width:3px;
  height:60%;
  border-radius:0 3px 3px 0;
  background:var(--im-primary);
  transition:transform .18s ease;
}

.user-item.active{
  background:var(--im-primary-soft);
  border-color:rgba(7,193,96,.18);
}

.user-item.active::before{
  transform:translateY(-50%) scaleY(1);
}

.user-item:hover{
  background:rgba(0,0,0,.035);
}

.user-item.active:hover{
  background:rgba(7,193,96,.12);
}

.user-meta{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1;
  gap:4px;
  padding-top:1px;
}

.user-name{
  font-weight:600;
  font-size:15px;
  line-height:1.25;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.user-sub{
  font-size:12px;
  line-height:1.3;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.user-sub.online{
  color:var(--im-primary-dark);
  font-weight:500;
}

.user-sub.offline{
  color:var(--muted);
}

.main{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  overflow:hidden;
  background:var(--chat-bg);
}
.topbar{
  flex:0 0 auto;
  padding:12px 18px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(1.2) blur(14px);
  z-index:2;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.btn-menu{
  display:none;
}
.btn-icon{
  width:40px;
  height:40px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--panel2);
  color:var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .12s ease;
}
.btn-icon:active{
  background:#eef1f4;
}
.chat-peer{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}
.peer-avatar.is-placeholder{
  background:linear-gradient(145deg, #eceff3, #dfe4ea) !important;
  color:#9aa5b1 !important;
  border-color:#e8ebef !important;
  box-shadow:none !important;
}
.chat-title{ min-width:0; flex:1 }
.chat-with{
  font-weight:700;
  font-size:16px;
  letter-spacing:-.01em;
  color:var(--text);
}
.peer-status{
  font-size:12px;
  margin-top:3px;
  color:var(--muted);
}
.peer-status.online{ color:var(--im-primary-dark); }
.peer-status.offline{ color:var(--muted); }
.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.ws-badge{
  font-size:11px;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  background:#f0f2f5;
  color:var(--muted);
  border:1px solid var(--border);
  white-space:nowrap;
}
.ws-badge--online{
  background:rgba(7,193,96,.12);
  color:var(--im-primary-dark);
  border-color:rgba(7,193,96,.25);
}
.ws-badge--warn{
  background:rgba(250,173,20,.12);
  color:#b8860b;
  border-color:rgba(250,173,20,.3);
}
.ws-badge--offline{
  background:#f5f5f5;
  color:#8b95a1;
}
.ws-status{
  font-size:12px;
  margin-top:2px;
  color:var(--muted);
}
.btn-ghost{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-secondary);
  padding:8px 14px;
  border-radius:var(--radius-sm);
  font-size:13px;
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.btn-ghost:hover{
  background:#f3f5f7;
  color:var(--text);
}
.messages{
  flex:1;
  min-height:0;
  overflow:auto;
  container-type:inline-size;
  container-name:message-list;
  overscroll-behavior:contain;
  padding:18px 24px 14px;
  display:flex;
  flex-direction:column;
  gap:16px;
  position:relative;
  background-color:var(--chat-bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.035) 1px, transparent 0);
  background-size:20px 20px;
}
.chat-empty{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
  pointer-events:none;
  z-index:0;
}
.chat-empty.hidden{
  display:none;
}
.chat-empty-icon{
  color:#c2cad2;
  margin-bottom:18px;
  opacity:.85;
}
.chat-empty-title{
  margin:0 0 8px;
  font-size:17px;
  font-weight:600;
  color:var(--text);
}
.chat-empty-desc{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  max-width:280px;
}
.messages.has-peer .chat-empty{
  display:none;
}
.history-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:4px;
  position:relative;
  z-index:1;
}
.btn-pill{
  border-radius:999px;
  padding:6px 14px;
  font-size:12px;
  background:rgba(255,255,255,.85);
  border:1px solid var(--border);
  color:var(--text-secondary);
  box-shadow:var(--soft-shadow);
}
.history-hint{
  font-size:12px;
  color:var(--muted);
}
.row{
  display:flex;
  align-items:flex-end;
  gap:8px;
  position:relative;
  z-index:1;
}
.row.left{justify-content:flex-start}
.row.right{justify-content:flex-end}
.message-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.row.right .message-wrap{
  align-items:flex-end;
}
.bubble{
  max-width:min(520px, 68%);
  padding:11px 14px;
  line-height:1.5;
  font-size:15px;
  position:relative;
  cursor:default;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.bubble--pressing{
  transform:scale(.985);
  filter:brightness(.97);
}
.bubble--action-target{
  box-shadow:0 0 0 2px rgba(74,159,255,.35), 0 4px 14px rgba(15,23,42,.12);
}
.bubble-text,
.bubble-caption,
.bubble-quote-body{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-break:anywhere;
  max-width:100%;
}
.bubble-caption{
  margin-top:6px;
  font-size:14px;
  opacity:.92;
}
.row.left .bubble{
  border-radius:6px 18px 18px 18px;
  background:var(--im-bubble-other);
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 1px 3px rgba(0,0,0,.07);
  color:var(--text);
}
.row.right .bubble{
  border-radius:18px 6px 18px 18px;
  background:var(--im-bubble-self);
  border:1px solid rgba(74,153,34,.18);
  box-shadow:0 2px 8px rgba(74,153,34,.14);
  color:#1a3d12;
}
.bubble-quote{
  margin-bottom:8px;
  padding:8px 11px;
  border-radius:10px;
  background:rgba(255,255,255,.58);
  border-left:3px solid rgba(74,111,165,.5);
}
.row.right .bubble-quote{
  background:rgba(255,255,255,.38);
  border-left-color:rgba(45,110,52,.45);
}
.bubble-quote-sender{
  font-size:12px;
  font-weight:600;
  margin-bottom:3px;
  color:#31517f;
}
.row.right .bubble-quote-sender{
  color:#2d5c34;
}
.bubble-quote-body{
  font-size:13px;
  opacity:.9;
}
@container message-list (max-width: 720px){
  .bubble{ max-width:min(460px, 78%); }
}
@container message-list (max-width: 480px){
  .bubble{ max-width:min(360px, 88%); font-size:14px; }
}
@container message-list (max-width: 360px){
  .bubble{ max-width:min(300px, 92%); padding:10px 12px; }
}
.bubble img{
  max-width: 100%;
  height: auto;
}
.bubble img.clickable{
  cursor: zoom-in;
}
.bubble video{
  max-width:100%;
  height:auto;
}
.bubble video.clickable{
  cursor:pointer;
}
.video-thumb-wrap{
  position:relative;
  display:inline-block;
  border-radius:12px;
  overflow:hidden;
}
.video-thumb-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:48px;
  height:48px;
  border-radius:999px;
  border:none;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.img-viewer{
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
}
.img-viewer.show{ display:block; }
.img-viewer-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.82);
}
.img-viewer-img{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  max-width: min(96vw, 980px);
  max-height: 92vh;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.img-viewer-close{
  position:absolute;
  top:14px;
  right:14px;
  width:44px;
  height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  cursor:pointer;
}
.video-viewer{
  display:none;
  position:fixed;
  inset:0;
  z-index:101;
}
.video-viewer.show{ display:block; }
.video-viewer-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.88);
}
.video-viewer-video{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:min(96vw, 980px);
  max-height:90vh;
  border-radius:14px;
  background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.video-viewer-close{
  position:absolute;
  top:14px;
  right:14px;
  width:44px;
  height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size: 28px;
  line-height: 1;
  cursor:pointer;
}
.meta{
  font-size:11px;
  color:var(--muted);
  margin:0 4px 4px;
  padding:0 2px;
}
.row.right .meta{
  text-align:right;
}
.message-action-menu{
  position:fixed;
  z-index:120;
  min-width:104px;
  padding:6px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:0 16px 40px rgba(20,30,45,.2);
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}
.message-action-menu.hidden{
  display:none;
}
.message-action-btn{
  width:100%;
  border:none;
  background:transparent;
  text-align:center;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  color:var(--text);
  font-size:14px;
  font-weight:500;
  letter-spacing:.02em;
}
.message-action-btn:hover,
.message-action-btn:focus-visible{
  background:#f0f5fa;
}
.message-action-btn:active{
  background:#e6edf5;
}
.message-action-btn + .message-action-btn{
  margin-top:2px;
}
.meta .state{
  margin-left:8px;
  opacity:.95;
}
.state.sending{ color: rgba(255,255,255,.65); }
.state.failed{ color: rgba(239,68,68,.9); }

.btn-location{
  padding:10px 10px;
  min-width:48px;
  font-size:13px;
  font-weight:600;
}
.location-share{
  max-width:260px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(74,111,165,.22);
  background:linear-gradient(180deg, rgba(242,246,251,.95), rgba(255,255,255,.9));
}
.location-share--pending{
  border-style:dashed;
  opacity:.9;
  font-size:13px;
}
.location-share-title{
  font-size:13px;
  font-weight:700;
  color:#2c4a7a;
  margin-bottom:6px;
}
.location-share-coords{
  font-size:13px;
  line-height:1.45;
  color:var(--text);
  word-break:break-all;
}
.location-share-meta{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}
.location-share-maplink{
  display:inline-block;
  margin-top:10px;
  font-size:13px;
  font-weight:600;
  color:#1a6ecc;
  text-decoration:underline;
}
.location-share-maplink:hover{
  color:#0d5ba8;
}

.composer{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:12px 16px max(14px, env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.1) blur(14px);
  box-shadow:0 -1px 0 rgba(0,0,0,.04);
}
.file-input{ display:none; }
.composer-tools{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex-shrink:0;
}
.composer-tool{
  width:40px;
  height:40px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--panel2);
  color:var(--text-secondary);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.composer-tool:hover:not(:disabled){
  background:#eef1f4;
  color:var(--im-primary-dark);
  border-color:rgba(7,193,96,.25);
}
.composer-tool:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.composer-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.quote-preview{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:8px 10px 8px 12px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--panel2);
  position:relative;
  overflow:hidden;
}
.quote-preview-bar{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--im-primary);
  border-radius:3px 0 0 3px;
}
.quote-preview.hidden{
  display:none;
}
.quote-preview-main{
  flex:1;
  min-width:0;
}
.quote-preview-sender{
  font-size:12px;
  font-weight:600;
  color:#4a6fa5;
  margin-bottom:2px;
}
.quote-preview-body{
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.quote-preview-close{
  width:24px;
  height:24px;
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.composer-input{
  flex:1;
  width:100%;
  padding:10px 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
  font:inherit;
  font-size:16px;
  line-height:1.45;
  resize:none;
  overflow-y:hidden;
  height:auto;
  field-sizing:content;
  min-height:42px;
  max-height:120px;
}
.composer-input:focus{
  border-color:rgba(7,193,96,.45);
  box-shadow:0 0 0 3px rgba(7,193,96,.12);
}
.btn-send{
  width:44px;
  height:44px;
  flex-shrink:0;
  padding:0;
  border:none;
  border-radius:50%;
  background:linear-gradient(145deg, #12d46a, var(--im-primary));
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(7,193,96,.35);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn-send:hover:not(:disabled){
  transform:scale(1.04);
  box-shadow:0 6px 18px rgba(7,193,96,.4);
}
.btn-send:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.input{
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  color: var(--text);
  outline:none;
  transition:all .15s ease;
  font-size:16px;
}
.input:focus{
  border-color:#b6c8e2;
  box-shadow:0 0 0 3px rgba(74,159,255,.15);
}

.btn{
  border:1px solid var(--border);
  background:linear-gradient(180deg, #fff, #f8faff);
  color: var(--text);
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  transition:all .15s ease;
  box-shadow:0 1px 0 rgba(255,255,255,.85), var(--soft-shadow);
}
.btn:hover{
  transform:translateY(-1px);
  border-color:#c5d4e7;
  box-shadow:0 8px 18px rgba(20,44,80,.12);
}
.btn.danger{
  background:#fff2f0;
  border-color:#ffccc7;
  color:#cf1322;
}
.btn:disabled, .composer-input:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none;
}
.btn.primary{
  background:linear-gradient(145deg, #12d46a, var(--im-primary));
  border-color:var(--im-primary-dark);
  color:#fff;
  box-shadow:0 6px 16px rgba(7,193,96,.3);
}
.btn.primary:hover{
  filter:brightness(1.03);
}

.messages::-webkit-scrollbar,
.list::-webkit-scrollbar{
  width:6px;
}
.messages::-webkit-scrollbar-thumb,
.list::-webkit-scrollbar-thumb{
  background:#d0d8e2;
  border-radius:999px;
}
.messages::-webkit-scrollbar-thumb:hover,
.list::-webkit-scrollbar-thumb:hover{
  background:#b8c4d0;
}
.messages::-webkit-scrollbar-track,
.list::-webkit-scrollbar-track{
  background:transparent;
}

/* Mobile responsive layout */
@media (max-width: 860px){
  .login-page{
    padding:14px;
    min-height:100dvh;
    align-items:center;
    padding-top:max(14px, env(safe-area-inset-top));
    padding-bottom:max(14px, env(safe-area-inset-bottom));
  }
  .login-card{
    width:100%;
    border-radius:14px;
    padding:18px 14px;
  }
  .auth-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  body.chat-body{
    overflow:hidden;
    touch-action:manipulation;
  }
  .app{
    grid-template-columns: 1fr;
    position:relative;
    max-width:none;
    width:100%;
    height:100dvh;
  }

  .btn-menu{ display:inline-flex; }

  .user-item{
    padding:14px 16px;
  }

  .sidebar{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:min(420px, 92vw);
    z-index:50;
    transform: translateX(-110%);
    transition: transform .18s ease;
    border-right:1px solid var(--border);
  }

  .sidebar.open{
    transform: translateX(0);
  }

  .sidebar-backdrop{
    /* keep base styles */
  }

  .topbar{
    gap:10px;
    align-items:flex-start;
    padding:10px 10px 8px;
  }
  .chat-title{ flex:1; min-width:0; }
  .chat-with{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }
  .topbar-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .btn{
    min-height:40px;
    padding:9px 10px;
  }
  .btn.danger,
  #btnLogout{
    font-size:12px;
    padding:8px 10px;
  }

  .messages{
    padding:12px 10px 8px;
    gap:10px;
  }
  .composer{
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    gap:8px;
    align-items:flex-end;
  }
  .composer-tools{
    flex-direction:row;
    gap:6px;
  }
  .composer-tool{
    width:38px;
    height:38px;
  }
  .composer-input{
    min-height:40px;
    padding:9px 10px;
    border-radius:10px;
    font-size:16px;
  }
  .btn-send{
    width:40px;
    height:40px;
  }
  .row.left .bubble{ border-radius:5px 16px 16px 16px; }
  .row.right .bubble{ border-radius:16px 5px 16px 16px; }
  .ws-badge{
    font-size:10px;
    padding:3px 8px;
  }
  .meta{
    font-size:10px;
    margin:0 8px 2px;
  }
}

@media (max-width: 540px){
  .sidebar{
    width:100vw;
    max-width:100vw;
  }
  .topbar-actions{
    gap:6px;
  }
  .btn.danger{
    max-width:120px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .messages{
    padding:10px 8px 6px;
  }
  .composer{
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  }
}