/* Strawberry Chat — social lounge visual layer. No behavioral contracts live here. */
:root{
  --sr-bg:#f5f6fa; --sr-surface:rgba(255,255,255,.9); --sr-surface-solid:#fff;
  --sr-ink:#201a22; --sr-muted:#756d78; --sr-line:rgba(45,32,47,.1);
  --sr-brand:#ed3d79; --sr-brand-2:#8b5cf6; --sr-online:#24b47e;
  --sr-radius:22px; --sr-radius-sm:14px;
  --sr-shadow:0 18px 50px rgba(55,35,58,.09),0 2px 8px rgba(55,35,58,.04);
}
body{background:radial-gradient(circle at 8% 4%,rgba(255,196,218,.34),transparent 28%),radial-gradient(circle at 92% 95%,rgba(196,181,253,.3),transparent 27%),var(--sr-bg);color:var(--sr-ink);font-family:Inter,"SF Pro Text","Segoe UI",system-ui,sans-serif;letter-spacing:-.006em}
body.chat-mode-dark{--sr-bg:#111016;--sr-surface:rgba(30,27,36,.9);--sr-surface-solid:#211e27;--sr-ink:#f7f2f6;--sr-muted:#b8aeb9;--sr-line:rgba(255,255,255,.1);background:radial-gradient(circle at 8% 4%,rgba(237,61,121,.12),transparent 30%),radial-gradient(circle at 92% 95%,rgba(139,92,246,.12),transparent 28%),var(--sr-bg)}
body.chat-mode-dark #sidebar,body.chat-mode-dark #main,body.chat-mode-dark #privatePanel{background:var(--sr-surface);border-color:rgba(255,255,255,.06)}
body.chat-mode-dark #sidebar::before,body.chat-mode-dark #privatePanel::before{background:linear-gradient(180deg,rgba(38,34,44,.78),rgba(27,24,32,.65))}
body.chat-mode-dark .sidebar-userbar,body.chat-mode-dark .online-user:hover,body.chat-mode-dark #privateDialogTabs button,body.chat-mode-dark .relations-open-btn{background:#29252f!important;color:var(--sr-ink)!important}
body.chat-mode-dark .msg{background:rgba(42,38,48,.94)!important;color:var(--sr-ink)!important}body.chat-mode-dark .msg.me{background:linear-gradient(135deg,rgba(91,37,63,.95),rgba(62,45,94,.95))!important}
body.chat-mode-dark #composer,body.chat-mode-dark #privateComposer,body.chat-mode-dark #privateHeader{background:rgba(34,31,40,.96)!important}body.chat-mode-dark .composer-form textarea{background:#292630!important;color:var(--sr-ink)!important}
#app{gap:12px;padding:12px;background:transparent}
#sidebar,#main,#privatePanel{border:1px solid rgba(255,255,255,.8);border-radius:var(--sr-radius);box-shadow:var(--sr-shadow);background:var(--sr-surface);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
#sidebar::before,#privatePanel::before{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.54));backdrop-filter:none}
#sidebar{padding:10px;display:flex;flex-direction:column;gap:8px}
.sidebar-userbar{min-height:56px;padding:7px 8px;border:1px solid var(--sr-line);border-radius:16px;background:rgba(255,255,255,.72)}
#meBadge{min-width:0;font-weight:750}
#rooms{display:grid;gap:5px;padding:3px}
#rooms button,.rooms-select{min-height:42px;border:0!important;border-radius:13px!important;padding:9px 12px!important;background:transparent!important;color:var(--sr-muted)!important;font-weight:700!important;text-align:left;box-shadow:none!important;transition:background .18s,color .18s,transform .18s}
#rooms button:hover{background:rgba(237,61,121,.07)!important;color:var(--sr-ink)!important;transform:translateX(2px)}
#rooms button.active{background:linear-gradient(135deg,rgba(237,61,121,.14),rgba(139,92,246,.11))!important;color:#a71953!important;box-shadow:inset 3px 0 var(--sr-brand)!important}
.relations-bar{gap:6px}.relations-open-btn{border:1px solid var(--sr-line)!important;border-radius:12px!important;background:#fff!important;color:var(--sr-muted)!important;font-weight:700!important}
#online{min-height:0;padding:8px 3px 12px;overflow:auto}
#online>strong{display:block;padding:5px 7px 10px;color:var(--sr-muted);font-size:11px;text-transform:uppercase;letter-spacing:.11em}
.online-group{display:grid;gap:4px}.online-header{padding:9px 8px 4px;color:var(--sr-muted);font-size:11px;font-weight:800}
.online-user{min-height:52px;padding:7px 8px!important;border:1px solid transparent!important;border-radius:14px!important;background:transparent!important;transition:.18s ease}
.online-user:hover{background:#fff!important;border-color:var(--sr-line)!important;box-shadow:0 7px 20px rgba(55,35,58,.07);transform:translateY(-1px)}
.online-user-name{font-weight:750}.online-user-main{min-width:0}.online-user::after{content:"";width:8px;height:8px;border-radius:50%;margin-left:auto;background:var(--sr-online);box-shadow:0 0 0 3px rgba(36,180,126,.12)}
#main{position:relative;background:rgba(255,255,255,.72)}
#chatContainer,#privateChatContainer{padding:20px 22px!important;scroll-padding-bottom:100px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(248,246,250,.58))}
.msg{max-width:min(78%,720px)!important;margin:4px 0!important;padding:10px 13px!important;border:1px solid rgba(45,32,47,.08)!important;border-radius:6px 18px 18px 18px!important;background:rgba(255,255,255,.92)!important;box-shadow:0 6px 20px rgba(55,35,58,.055)!important}
.msg.me{margin-left:auto!important;border-radius:18px 6px 18px 18px!important;background:linear-gradient(135deg,rgba(255,225,237,.96),rgba(239,232,255,.96))!important}
.msg-top{gap:7px;margin-bottom:3px}.msg-time{color:var(--sr-muted)!important;font-size:10px!important}.msg-user{font-weight:800}.msg-body{line-height:1.48!important}
#composer,#privateComposer{margin:8px!important;border:1px solid var(--sr-line)!important;border-radius:18px!important;background:rgba(255,255,255,.94)!important;box-shadow:0 10px 30px rgba(55,35,58,.09)!important}
.composer-form textarea{border:1px solid rgba(45,32,47,.1)!important;border-radius:14px!important;background:#f8f8fb!important;transition:border .18s,box-shadow .18s,background .18s}
.composer-form textarea:focus{background:#fff!important;border-color:rgba(237,61,121,.42)!important;box-shadow:0 0 0 4px rgba(237,61,121,.09)!important}
#privateHeader{min-height:66px;padding:10px 13px!important;border-bottom:1px solid var(--sr-line);background:rgba(255,255,255,.88)!important}
@media (min-width:769px){#privateHeader{border-radius:var(--sr-radius) var(--sr-radius) 0 0}}
.private-title strong{font-size:16px!important;letter-spacing:-.02em}.private-title .hint{color:var(--sr-muted)!important}
#privateDialogTabs{gap:5px!important;padding:8px!important;background:transparent!important}
#privateDialogTabs button{min-height:34px!important;border:1px solid var(--sr-line)!important;border-radius:11px!important;background:#fff!important;color:var(--sr-muted)!important;font-size:11px!important;font-weight:750!important}
#privateDialogTabs button.active{border-color:transparent!important;background:linear-gradient(135deg,var(--sr-brand),var(--sr-brand-2))!important;color:#fff!important;box-shadow:0 8px 18px rgba(237,61,121,.2)!important}
#privateDialogs{gap:5px!important;padding:6px 8px 10px!important}
.private-dialog-item{min-height:58px!important;padding:8px 9px!important;border:1px solid transparent!important;border-radius:15px!important;background:transparent!important;transition:.18s ease}
.private-dialog-item:hover{background:#fff!important;border-color:var(--sr-line)!important;transform:translateY(-1px)}
.private-dialog-item.active{background:linear-gradient(135deg,rgba(237,61,121,.12),rgba(139,92,246,.09))!important;border-color:rgba(237,61,121,.12)!important}
.private-dialog-empty{margin:12px!important;padding:28px 18px!important;border:1px dashed rgba(117,109,120,.25)!important;background:rgba(255,255,255,.5)!important;color:var(--sr-muted)!important;text-align:center!important}
.relations-list-panel{border:1px solid var(--sr-line)!important;border-radius:20px!important;background:rgba(255,255,255,.96)!important;box-shadow:var(--sr-shadow)!important}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(139,92,246,.32)!important;outline-offset:2px!important}
@media (min-width:1200px){#app{grid-template-columns:var(--sidebar-width,clamp(230px,18vw,280px)) 2px minmax(320px,1fr) 2px var(--private-panel-width,clamp(330px,27vw,410px))!important}.msg{font-size:15px}}
@media (max-width:768px){body{background:#f7f7fa}#app{padding:0;gap:0}#sidebar,#main,#privatePanel{border-radius:0!important;border-left:0!important;border-right:0!important;box-shadow:none!important}#chatContainer,#privateChatContainer{padding:12px 10px!important}.msg{max-width:88%!important;padding:9px 11px!important;border-radius:5px 16px 16px 16px!important}#composer,#privateComposer{margin-left:8px!important;margin-right:8px!important;border-radius:16px!important}#mobileTopbar{border-bottom:1px solid var(--sr-line)!important;box-shadow:0 8px 24px rgba(55,35,58,.07)!important}.online-user{min-height:48px}.private-dialog-item{min-height:54px!important}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}