.im-app{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;isolation:isolate;background:#fff}
.im-list-header,.im-chat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:12px;flex-shrink:0}
.im-list-header h1{font-size:calc(19px * var(--font-scale,1));margin:0}.im-list-header button,.im-chat-header>button{background:#f7f7f8;border-radius:22px;padding:10px;font-size:calc(16px * var(--font-scale,1));position:relative}.im-list-header sup{color:#007aff}
.im-list{flex:1;overflow:auto}.im-conversation{display:flex;padding:0 16px 0 8px}.im-conversation-main{display:flex;gap:10px;align-items:center;width:100%;padding:16px 0;background:transparent;text-align:left;border-bottom:.5px solid #eee}.im-avatar{width:46px;height:46px;flex-shrink:0;display:grid;place-items:center;background:#e9e9eb;border-radius:50%;overflow:hidden;color:#777}.im-avatar img{width:100%;height:100%;object-fit:cover}.unread-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.unread-dot.visible{background:#007aff}.im-preview{flex:1;min-width:0}.im-preview strong{display:block;font-size:calc(17px * var(--font-scale,1))}.im-preview small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#8e8e93;margin-top:5px;font-size:calc(14px * var(--font-scale,1))}.im-conversation time{font-size:calc(10px * var(--font-scale,1));color:#8e8e93;max-width:57px}
.im-list-bottom{display:flex;gap:10px;padding:12px 16px}.im-list-bottom input{flex:1;min-width:0;background:#f2f2f7;border:0;border-radius:26px;padding:14px;font-size:calc(16px * var(--font-scale,1))}.im-list-bottom button{width:48px;border-radius:50%;background:#f2f2f7;font-size:calc(25px * var(--font-scale,1));color:#007aff}
.im-list-bottom button{display:grid;place-items:center}
.im-chat-header{min-height:92px}.im-chat-header .im-title{background:transparent;display:flex;align-items:center;flex-direction:column;padding:0;flex:1;min-width:0}.im-title small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(12px * var(--font-scale,1));margin-top:5px}.im-group{display:flex;padding-right:5px}.im-group .im-avatar{width:36px;height:36px;margin-right:-5px;border:2px solid #fff}.im-back{color:#007aff}
.im-wallpaper{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(6px) saturate(.7);opacity:.38;z-index:-1;pointer-events:none}
.im-history{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:15px 17px 30px}
.im-time{text-align:center;font-size:calc(11px * var(--font-scale,1));color:#8e8e93;margin:8px 0;align-self:center}
.im-typing-dots{display:inline-flex;align-items:center;gap:5px;height:20px;min-width:36px;vertical-align:middle}
.im-typing-dots i{display:block;width:7px;height:7px;border-radius:50%;background:#000;animation:im-dot-pulse 1.2s ease-in-out infinite;opacity:.25}
.im-typing-dots i:nth-child(2){animation-delay:.16s}.im-typing-dots i:nth-child(3){animation-delay:.32s}
@keyframes im-dot-pulse{0%,70%,100%{opacity:.25}35%{opacity:1}}
@media(prefers-reduced-motion:reduce){.im-typing-dots i{animation:none;opacity:.65}}
.im-message{position:relative;align-self:flex-start;max-width:82%;margin-top:5px}.im-message.out{align-self:flex-end}.im-message.joined{margin-top:-7px}
.im-message-content{position:relative;touch-action:pan-y;-webkit-touch-callout:none}.im-bubble{position:relative;background:#e9e9eb;border-radius:21px;padding:10px 14px;color:#000;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;font-size:calc(16px * var(--font-scale,1))}
.im-bubble:before{content:'';position:absolute;bottom:0;left:-5px;width:14px;height:15px;background:#e9e9eb;border-radius:0 0 14px 0;z-index:-1}
.out .im-bubble{background:#007aff;color:#fff}.out .im-bubble:before{left:auto;right:-5px;background:#007aff;border-radius:0 0 0 14px}
.sender-name{display:block;color:#8e8e93;font-size:calc(11px * var(--font-scale,1));margin:0 9px 4px}.im-status{display:block;text-align:right;color:#8e8e93;font-size:calc(10px * var(--font-scale,1));margin-top:4px}
.im-sticker{font-size:calc(58px * var(--font-scale,1));display:block;padding:4px 8px}.im-photo-stack{position:relative;max-width:240px}.im-photo-stack summary{list-style:none;cursor:pointer}.im-photo-stack img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:18px;margin-top:5px}.im-photo-stack summary small{display:block;font-size:calc(12px * var(--font-scale,1));color:#8e8e93}.im-photo-stack:not([open]):has(summary small):before{content:'';position:absolute;inset:30px 3px 0;background:#d5d9df;border-radius:18px;transform:rotate(4deg);z-index:-1}.im-message audio{max-width:240px}
.im-composer{display:flex;align-items:center;gap:9px;padding:10px 14px;flex-shrink:0}.im-composer>button{width:38px;height:38px;border-radius:50%;background:#f2f2f7;font-size:calc(25px * var(--font-scale,1))}.im-composer>div{display:flex;flex:1;min-width:0;border:1px solid #dddde1;border-radius:25px;background:#fff;padding:4px 7px}.im-composer input{min-width:0;flex:1;border:0;background:transparent;font-size:calc(16px * var(--font-scale,1));padding:7px}.im-composer button{border-radius:50%;background:transparent;color:#8e8e93}.im-composer .im-send{background:#007aff;color:#fff;width:30px;height:30px;font-size:calc(22px * var(--font-scale,1))}
.im-attachments{display:flex;gap:12px;align-items:center;padding:12px 16px;overflow:auto;background:#f8f8fa;flex-shrink:0}.im-attachments button{background:transparent;white-space:nowrap;font-size:calc(21px * var(--font-scale,1))}.im-attachments label{position:relative;flex-shrink:0;color:#007aff;overflow:hidden}
.im-reaction{position:absolute;right:-9px;top:-16px;border:2px solid white;background:#e4e4e9;border-radius:18px;padding:3px 7px;font-size:calc(18px * var(--font-scale,1));animation:reaction-in .25s ease-out}
@keyframes reaction-in{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.reaction-shade{position:absolute;inset:0;background:#0002;backdrop-filter:blur(2px);z-index:5}
.im-message.focused{z-index:6}.reaction-picker{position:absolute;bottom:calc(100% + 12px);left:0;width:250px;display:flex;justify-content:space-around;background:white;border-radius:27px;padding:10px 4px}.out .reaction-picker{left:auto;right:0}.reaction-picker button{background:transparent;font-size:calc(25px * var(--font-scale,1));padding:3px}
.im-message:first-of-type .reaction-picker{top:calc(100% + 10px);bottom:auto}
.im-sheet-mask{position:absolute;inset:0;background:#0003;z-index:12;display:flex;align-items:flex-end}.im-sheet{height:94%;width:100%;background:#fff;border-radius:28px 28px 0 0;padding:18px 16px 0;display:flex;flex-direction:column;overflow:auto}.im-sheet header{display:flex;align-items:center;justify-content:space-between;padding:0 4px 18px}.im-sheet h2{font-size:calc(18px * var(--font-scale,1));margin:0;flex:1;text-align:center}.im-sheet header button{border-radius:50%;width:30px;height:30px;font-size:calc(22px * var(--font-scale,1));background:#eee}
.recipient-field{display:flex;gap:6px;align-items:center;background:#f2f2f7;border-radius:18px;padding:12px;font-size:calc(14px * var(--font-scale,1))}.recipient-field span{flex:1;color:#007aff;overflow-wrap:anywhere}.recipient-field button{border-radius:50%;color:#007aff;font-size:calc(20px * var(--font-scale,1))}.recipient-list{flex:1;overflow:auto;margin:16px 0}.recipient-list label{display:flex;gap:12px;align-items:center;padding:15px 5px;border-bottom:.5px solid #eee}.im-sheet textarea{font:inherit;line-height:1.5;border:1px solid #eee;border-radius:12px;padding:12px;min-height:200px}
.rules-mask{position:absolute;inset:0;z-index:100;background:#0006;display:grid;place-items:center;padding:24px}.rules-card{background:#f8f8fa;border-radius:25px;padding:24px;max-height:90%;overflow:auto}.rules-card h2{font-size:calc(22px * var(--font-scale,1))}.rules-card p{font-size:calc(14px * var(--font-scale,1));line-height:1.7;color:#555}.rules-card label{display:block;font-size:calc(14px * var(--font-scale,1));line-height:1.6}.rules-card>button{display:block;margin-top:20px;padding:12px;width:100%;border-radius:14px;background:#007aff;color:white;font-size:calc(16px * var(--font-scale,1))}
.registration-banner{position:absolute;top:60px;left:15px;right:15px;z-index:50;border-radius:20px;background:#f2f2f7;padding:18px}.registration-banner p{font-size:calc(13px * var(--font-scale,1));line-height:1.6}.registration-banner button{padding:8px;color:#007aff;background:transparent}
@media(prefers-reduced-motion:reduce){.im-reaction{animation:none}}