:root{
  --bg:#f3f5f8;
  --surface:#ffffff;
  --surface-2:#f8f9fb;
  --line:#dfe4ea;
  --line-2:#edf0f4;
  --text:#18202a;
  --muted:#6d7785;
  --faint:#9aa3ae;
  --brand:#0A2E6D;
  --brand-soft:#E8F7F6;
  --green:#27a86f;
  --amber:#d49423;
  --red:#d95050;
  --rail:72px;
  --workspace:248px;
  --people:258px;
  --top:68px;
  --composer:78px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);overflow:hidden}
button,input,textarea{font:inherit}
button{color:inherit}
.app{
  height:100dvh;
  display:grid;
  grid-template-columns:var(--rail) var(--workspace) minmax(0,1fr) var(--people);
  transition:grid-template-columns .2s ease;
  background:var(--surface);
}
.rail{
  border-right:1px solid var(--line);
  background:#fafbfc;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
  z-index:20;
}
.rail-brand{
  height:68px;
  width:100%;
  display:grid;
  place-items:center;
  border-bottom:1px solid var(--line);
}
.rail-brand img{max-width:42px;max-height:38px;object-fit:contain}
.rail-nav{padding:12px 0;display:flex;flex-direction:column;gap:7px;align-items:center;flex:1}
.rail-bottom{padding:10px 0 13px;display:flex;flex-direction:column;align-items:center;gap:10px}
.rail-btn{
  width:58px;height:54px;border:0;background:transparent;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  cursor:pointer;color:var(--muted)
}
.rail-btn span{font-size:21px;line-height:1}
.rail-btn small{font-size:8px;font-weight:700}
.rail-btn:hover,.rail-btn.active{background:var(--brand-soft);color:var(--brand)}
.my-avatar,.avatar{
  display:grid;place-items:center;border-radius:9px;background:#e8ebf1;color:#344052;font-weight:800
}
.my-avatar{width:34px;height:34px;background:#222b36;color:#fff;font-size:11px}

.workspace{
  border-right:1px solid var(--line);
  background:var(--surface-2);
  min-width:0;
  overflow-y:auto;
}
.workspace-head{
  height:68px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)
}
.workspace-head small{display:block;color:var(--brand);font-size:8px;letter-spacing:.14em;font-weight:900}
.workspace-head strong{display:block;margin-top:3px;font-size:14px}
.icon-btn{
  min-width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer
}
.quick-search{margin:12px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);height:38px;padding:0 10px}
.quick-search input,.people-search input{border:0;outline:0;background:transparent;width:100%;font-size:11px;color:var(--text)}
.moment-strip{padding:3px 12px 12px;border-bottom:1px solid var(--line)}
.section-kicker{font-size:8px;font-weight:900;color:var(--faint);letter-spacing:.12em;margin:3px 0 8px}
.moments{display:flex;gap:10px;overflow:auto;padding-bottom:2px}
.moment{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:46px;cursor:pointer}
.moment-ring{width:39px;height:39px;border:2px solid var(--brand);padding:2px;border-radius:50%;display:grid;place-items:center}
.moment-ring b{width:29px;height:29px;border-radius:50%;background:#eef0f4;display:grid;place-items:center;font-size:10px}
.moment.mine .moment-ring{border-color:var(--line)}
.moment em{font-style:normal;font-size:8px;color:var(--muted);max-width:50px;overflow:hidden;text-overflow:ellipsis}
.workspace-section{padding:14px 9px 8px}
.section-title{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 7px;color:var(--faint);font-size:8px;font-weight:900;letter-spacing:.11em}
.section-title button{border:0;background:transparent;color:var(--muted);font-size:15px;cursor:pointer}
.room,.dm{
  width:100%;border:0;background:transparent;display:grid;align-items:center;text-align:left;cursor:pointer;color:var(--text)
}
.room{grid-template-columns:31px minmax(0,1fr) auto;gap:8px;min-height:52px;padding:5px 8px;border-radius:8px}
.room:hover,.room.active{background:#fff}
.room.active{box-shadow:inset 3px 0 0 var(--brand)}
.room-mark{width:29px;height:29px;background:#e9edf4;display:grid;place-items:center;border-radius:7px;font-weight:900}
.room.active .room-mark{background:var(--brand-soft);color:var(--brand)}
.room-copy b,.dm b{display:block;font-size:11px}
.room-copy small,.dm small{display:block;font-size:8.5px;color:var(--faint);margin-top:2px}
.room em{font-style:normal;color:var(--faint);font-size:8px}
.dm-section{border-top:1px solid var(--line);margin-top:6px}
.dm{grid-template-columns:34px minmax(0,1fr) auto;gap:8px;min-height:47px;padding:4px 8px;border-radius:8px}
.dm:hover{background:#fff}.dm i{font-style:normal;min-width:18px;height:18px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:8px}
.avatar{width:34px;height:34px;font-size:10px;position:relative}
.avatar.online:after{content:"";position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;background:var(--green);border:2px solid #fff}
.avatar.owner{background:#222b36;color:#fff}
.bot-avatar{background:#eee8ff;color:#6d4fc4}

.chat{min-width:0;height:100dvh;display:grid;grid-template-rows:var(--top) auto minmax(0,1fr) auto auto var(--composer);background:#fff}
.chat-head{
  display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid var(--line);min-width:0
}
.head-left,.head-actions{display:flex;align-items:center;gap:10px;min-width:0}
.channel-icon{width:34px;height:34px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;border-radius:8px;font-weight:900}
.channel-title{min-width:0}.channel-title b{display:block;font-size:13px}.channel-title span{display:block;font-size:8.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-mini{height:39px;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0 10px;display:flex;align-items:center;gap:8px}
.radio-mini b{display:block;font-size:9.5px}.radio-mini small{display:block;font-size:7.5px;color:var(--faint);margin-top:1px}
.radio-mini button{border:0;background:transparent;color:var(--brand);cursor:pointer}
.eq{height:19px;width:22px;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.eq i{display:block;width:3px;background:var(--brand);animation:eq 1s infinite ease-in-out}
.eq i:nth-child(1){height:8px}.eq i:nth-child(2){height:16px;animation-delay:.15s}.eq i:nth-child(3){height:11px;animation-delay:.3s}.eq i:nth-child(4){height:18px;animation-delay:.45s}
@keyframes eq{50%{height:5px}}
.people-btn{height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;display:flex;align-items:center;gap:6px;cursor:pointer}
.people-btn b{font-size:9px;background:var(--brand-soft);color:var(--brand);padding:3px 5px;border-radius:4px}.people-btn span{font-size:9px}
.mobile-menu{display:none}
.topic-bar{min-height:34px;padding:6px 14px;background:#fbfcfd;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:9px}
.topic-bar span{font-size:7.5px;font-weight:900;letter-spacing:.1em;color:var(--amber)}
.topic-bar p{margin:0;font-size:9px;color:var(--muted);flex:1}.topic-bar button{border:0;background:transparent;color:var(--faint);cursor:pointer}
.timeline{overflow-y:auto;padding:14px 20px 22px;min-height:0}
.day-sep{display:flex;align-items:center;gap:10px;margin:2px 0 13px;color:var(--faint);font-size:8px}
.day-sep:before,.day-sep:after{content:"";height:1px;background:var(--line-2);flex:1}
.message{display:grid;grid-template-columns:36px minmax(0,1fr) 28px;gap:9px;padding:7px 4px;border-radius:7px;position:relative}
.message:hover{background:#fafbfd}.message+.message{margin-top:2px}
.message-body{min-width:0}.message-meta{display:flex;align-items:center;gap:6px;height:17px}.message-meta b{font-size:10.5px}.message-meta time{font-size:7.5px;color:var(--faint)}
.role{font-size:6.5px;font-weight:900;letter-spacing:.05em;color:#fff;background:#252e39;padding:2px 4px;border-radius:3px}.role.tech{background:#3573b8}.bot-role{background:#7255bd}
.message p{margin:2px 0 0;font-size:10.5px;line-height:1.55;color:#303946;word-break:break-word}
.msg-more{opacity:0;border:0;background:transparent;color:var(--faint);cursor:pointer}.message:hover .msg-more{opacity:1}
.reactions{display:flex;gap:4px;margin-top:5px}.reactions button{height:23px;border:1px solid var(--line);background:#fff;border-radius:5px;font-size:8px;cursor:pointer}
.bot{border-left:2px solid #baa9eb;padding-left:9px;background:#fcfbff}.bot-line{margin-top:3px;display:flex;gap:8px;align-items:center;font-size:10px}.bot-line strong{color:#634aad}
.system-line{display:flex;align-items:center;gap:8px;padding:5px 12px;margin:4px 0 4px 43px;color:var(--muted);font-size:8.5px;border-left:1px dashed var(--line)}
.system-line p{margin:0;flex:1}.system-line time{color:var(--faint)}
.reply-preview{height:42px;margin:0 14px;border-top:1px solid var(--line);display:grid;grid-template-columns:3px minmax(0,1fr) 30px;gap:9px;align-items:center}
.reply-preview>span{height:26px;background:var(--brand)}.reply-preview small,.reply-preview b{display:block}.reply-preview small{font-size:7px;color:var(--brand)}.reply-preview b{font-size:8.5px;margin-top:1px}.reply-preview button{border:0;background:none}
.composer{border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff}
.attach{width:37px;height:37px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:20px;cursor:pointer}
.composer-box{flex:1;min-width:0;height:45px;border:1px solid #ccd3dc;background:#fbfcfd;display:flex;align-items:center;padding:0 7px 0 11px}
.composer-box textarea{flex:1;resize:none;border:0;outline:0;background:transparent;font-size:10.5px;max-height:36px}
.composer-tools{display:flex;gap:1px}.composer-tools button{width:30px;height:30px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.send{height:38px;padding:0 15px;border:0;border-radius:7px;background:var(--brand);color:#fff;font-size:9px;font-weight:800;cursor:pointer}

.people-drawer{
  position:relative;inset:auto;width:auto;height:100dvh;min-width:0;background:#fff;border-left:1px solid var(--line);
  z-index:20;transform:none;transition:opacity .16s ease,visibility .16s ease;box-shadow:none;
  display:flex;flex-direction:column;overflow:hidden
}
.people-drawer.open{transform:none}
.app.people-collapsed{grid-template-columns:var(--rail) var(--workspace) minmax(0,1fr) 0}
.app.people-collapsed .people-drawer{opacity:0;visibility:hidden;pointer-events:none;border-left:0}
.drawer-head{height:var(--top);min-height:var(--top);display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--line)}
.drawer-head small{display:block;color:var(--brand);font-size:7px;font-weight:900;letter-spacing:.1em}.drawer-head b{display:block;font-size:13px;margin-top:2px}.drawer-head button{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:15px;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.people-search{margin:10px 12px;border:1px solid var(--line);height:36px;padding:0 9px;display:flex;align-items:center;gap:7px;background:#fff;border-radius:7px}
.people-search>i{font-size:13px;color:var(--faint);display:grid;place-items:center}
.people-list{flex:1;min-height:0;overflow-y:auto;padding:0 0 14px;scrollbar-width:thin}
.people-group{padding:3px 8px 7px}.people-group label{display:block;font-size:7.5px;color:var(--faint);font-weight:900;letter-spacing:.09em;padding:10px 7px 6px}
.person{width:100%;display:grid;grid-template-columns:37px minmax(0,1fr) auto;gap:8px;align-items:center;border:0;background:transparent;padding:6px 7px;border-radius:8px;text-align:left;cursor:pointer;min-height:48px}
.person:hover{background:var(--surface-2)}
.person-avatar-wrap{width:35px;height:35px;position:relative;display:block}
.person .avatar{width:35px;height:35px;border-radius:10px;font-size:10.5px;overflow:hidden;border:1px solid transparent}
.person .avatar img,.profile-avatar img,.my-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.person .presence-dot{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--green);border:2px solid #fff}
.person.away .presence-dot{background:var(--amber)}
.person-copy{min-width:0}.person-copy>b{display:flex;align-items:center;gap:5px;min-width:0}.person-nick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person b{font-size:10px}.person small{display:block;font-size:8px;color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.you-badge{font-style:normal;font-size:6px;letter-spacing:.05em;color:var(--brand);background:var(--brand-soft);padding:2px 4px;border-radius:3px;flex:0 0 auto}
.person-role-badge{font-style:normal;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:900;color:var(--brand);background:var(--brand-soft)}
.person-role-badge.owner{color:#fff;background:#202a35}.person-role-badge.admin{color:#fff;background:#5e4cc7}.person-role-badge.op{color:#fff;background:#2f83a8}.person-role-badge.halfop{color:#fff;background:#4e9a73}.person-role-badge.voice{color:#8b6515;background:#fff1bf}
.person.role-owner .avatar{border-color:#202a35}.person.role-admin .avatar{border-color:#7a67d8}.person.role-op .avatar{border-color:#4c9abc}.person.role-halfop .avatar{border-color:#65a985}.person.role-voice .avatar{border-color:#d9b95e}
.people-empty{margin:26px 16px;text-align:center;color:var(--faint);font-size:9px;line-height:1.6}.people-empty i{display:block;font-size:26px;margin-bottom:8px;color:var(--line)}
.people-btn.active{border-color:color-mix(in srgb,var(--brand) 34%,var(--line));background:var(--brand-soft);color:var(--brand)}
.scrim{display:none;position:fixed;inset:0;background:rgba(20,27,35,.24);z-index:40}
.scrim.show{display:block}
.mobile-tabs{display:none}

@media (max-width:1050px){
  :root{--workspace:220px;--people:228px}
  .radio-mini{display:none}
}
@media (max-width:760px){
  :root{--top:58px;--composer:66px}
  body{overflow:hidden}
  .app{display:block;height:100dvh}
  .rail{display:none}
  .workspace{
    position:fixed;inset:0 auto 58px 0;width:min(88vw,330px);z-index:60;
    transform:translateX(-100%);transition:transform .2s ease;box-shadow:18px 0 50px rgba(25,33,43,.10)
  }
  .workspace.open{transform:none}
  .chat{height:calc(100dvh - 58px);grid-template-rows:var(--top) auto minmax(0,1fr) auto auto var(--composer)}
  .chat-head{padding:0 9px}
  .mobile-menu{display:inline-grid;place-items:center}
  .channel-icon{display:none}
  .channel-title b{font-size:12px}.channel-title span{font-size:7.5px}
  .head-actions>.icon-btn,.people-btn span{display:none}
  .people-btn{min-width:42px;justify-content:center}
  .people-btn b{font-size:8px}
  .topic-bar{padding:5px 9px}.topic-bar p{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .timeline{padding:10px 8px 16px}
  .message{grid-template-columns:32px minmax(0,1fr) 24px;gap:7px;padding:6px 3px}
  .avatar{width:31px;height:31px}
  .message p{font-size:10px;line-height:1.5}
  .message-meta b{font-size:10px}.role{font-size:6px}
  .msg-more{opacity:1}
  .system-line{margin-left:38px;padding-left:8px}
  .composer{padding:7px 8px;gap:6px}
  .attach{width:34px;height:34px}
  .composer-box{height:40px;padding-left:9px}.composer-tools button{width:27px}
  .send{width:39px;padding:0;font-size:0}.send:after{content:"➤";font-size:14px}
  .people-drawer{
    position:fixed;top:0;right:0;bottom:58px;width:min(88vw,330px);height:auto;z-index:60;
    transform:translateX(100%);transition:transform .2s ease,opacity .16s ease;box-shadow:-18px 0 50px rgba(25,33,43,.10);
    opacity:1;visibility:visible;pointer-events:auto;border-left:1px solid var(--line)
  }
  .people-drawer.open{transform:none}
  .app.people-collapsed .people-drawer{opacity:1;visibility:visible;pointer-events:auto;border-left:1px solid var(--line)}
  .drawer-head{height:58px;min-height:58px}
  .drawer-head button{border:0;background:transparent;font-size:20px}
  .scrim.show{display:block}
  .mobile-tabs{
    position:fixed;left:0;right:0;bottom:0;height:58px;z-index:80;
    display:grid;grid-template-columns:repeat(7,1fr);background:#fff;border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom)
  }
  .mobile-tabs button{position:relative;border:0;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
  .mobile-tabs button span{font-size:17px}.mobile-tabs button small{font-size:7.5px;font-weight:700}
  .mobile-tabs button.active{color:var(--brand)}
  .mobile-tabs button i{position:absolute;top:7px;right:24%;min-width:14px;height:14px;border-radius:50%;background:var(--red);color:#fff;font-style:normal;font-size:7px;display:grid;place-items:center}
}
@media (max-width:380px){
  .composer-tools button:nth-child(2){display:none}
}



/* =========================================================
   H-CHAT V3 — left rail functional workspace views
   ========================================================= */
.workspace[data-view="channels"] #storiesSection,
.workspace[data-view="channels"] #dmSection{
  display:none;
}

.workspace[data-view="dm"] #storiesSection,
.workspace[data-view="dm"] #channelsSection{
  display:none;
}

.workspace[data-view="stories"] .quick-search,
.workspace[data-view="stories"] #channelsSection,
.workspace[data-view="stories"] #dmSection{
  display:none;
}

.workspace[data-view="stories"] #storiesSection{
  padding:16px 12px 18px;
  border-bottom:0;
}

.workspace[data-view="stories"] #storiesSection .section-kicker{
  margin-bottom:14px;
}

.workspace[data-view="stories"] .moments{
  flex-wrap:wrap;
  align-content:flex-start;
  gap:14px 12px;
  overflow:visible;
}

.workspace[data-view="stories"] .moment{
  min-width:58px;
}

.workspace[data-view="channels"] #channelsSection,
.workspace[data-view="dm"] #dmSection{
  padding-top:4px;
}

/* =========================================================
   H-CHAT V3 CORE — real IRC binding additions
   ========================================================= */
.rail-brand-mark{
  width:34px;height:34px;border-radius:9px;background:#202936;color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:900;letter-spacing:-.03em
}
.feature-pending{
  align-self:center;white-space:nowrap;color:var(--faint);font-size:8px;
  border-left:1px solid var(--line);padding-left:10px;margin-left:2px
}
.room.active,.dm.active{background:#fff;box-shadow:inset 3px 0 0 var(--brand)}
.unread-dot{font-style:normal;background:var(--brand);color:#fff;border-radius:10px;padding:2px 5px;font-size:7px}
.timeline{position:relative}
.room-stream{min-height:100%}
.room-stream[hidden]{display:none!important}
.raw-line{
  display:grid;grid-template-columns:48px minmax(0,1fr);gap:9px;
  padding:3px 7px;border-radius:4px;font-size:9px;line-height:1.45
}
.raw-line:hover{background:#fafbfd}
.raw-line time{font-size:7.5px;color:var(--faint);padding-top:2px}
.raw-line code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#465260;white-space:pre-wrap;word-break:break-word
}
.system-line.ok{border-left-color:#8ed9b9}
.system-line.bad{border-left-color:#ef9d9d}
.system-line.service{border-left-color:#9fb0ee}
.system-line .muted{color:var(--faint)}
.message.own .avatar{background:var(--brand);color:#fff}
.message.action p{color:#59677a}
.role.owner,.server-role.role-owner{background:#202936}
.role.admin,.server-role.role-netadmin,.server-role.role-rootadmin,.server-role.role-admin{background:#7c4aa8}
.role.op,.server-role.role-ircop,.server-role.role-globaloper,.server-role.role-localoper{background:#ce6d2d}
.role.halfop,.server-role.role-technicaladmin{background:#3573b8}
.role.voice{background:#30966b}
.radio-mini .eq.paused i{animation:none;height:5px!important}

.login-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(243,245,248,.96);
  display:grid;place-items:center;padding:18px;transition:opacity .22s ease,visibility .22s ease
}
.login-overlay.hidden{opacity:0;visibility:hidden}
.login-card{
  width:min(92vw,390px);background:#fff;border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(30,39,52,.10);padding:22px;border-radius:12px
}
.login-brand{display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.login-mark{width:38px;height:38px;border-radius:9px;background:#202936;color:#fff;display:grid;place-items:center;font-weight:900}
.login-brand b{display:block;font-size:13px}.login-brand small{display:block;margin-top:2px;color:var(--muted);font-size:8px}
.login-copy{padding:18px 0 10px}.login-copy h1{margin:0;font-size:19px;letter-spacing:-.02em}.login-copy p{margin:6px 0 0;color:var(--muted);font-size:9px;line-height:1.5}
.field{display:block;margin-top:12px}.field>span{display:flex;justify-content:space-between;font-size:8px;font-weight:800;color:#4b5664;margin-bottom:6px}.field em{font-style:normal;font-weight:500;color:var(--faint)}
.field input{
  width:100%;height:42px;border:1px solid #ccd4de;background:#fbfcfd;outline:0;
  padding:0 11px;border-radius:7px;font-size:11px;color:var(--text)
}
.field input:focus{border-color:#8394ee;box-shadow:0 0 0 3px rgba(79,104,232,.08)}
.remember-row{display:flex;align-items:center;gap:7px;margin:11px 0;font-size:8.5px;color:var(--muted)}
.login-submit{
  width:100%;height:42px;border:0;border-radius:7px;background:var(--brand);color:#fff;
  font-weight:800;font-size:10px;cursor:pointer
}
.login-submit:disabled{opacity:.55;cursor:wait}
.login-status{text-align:center;color:var(--muted);font-size:8px;min-height:18px;padding-top:8px}
.login-status.bad{color:var(--red)}

.toast-stack{position:fixed;right:16px;bottom:16px;z-index:300;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.v3-toast{
  min-width:190px;max-width:310px;background:#202936;color:#fff;padding:10px 12px;border-radius:8px;
  font-size:9px;box-shadow:0 12px 30px rgba(20,27,35,.16);opacity:0;transform:translateY(6px);
  transition:.2s ease
}
.v3-toast.show{opacity:1;transform:none}.v3-toast.bad{background:#a43e3e}

.is-hidden{display:none!important}

@media (max-width:760px){
  .feature-pending{font-size:7px}
  .login-card{border-radius:10px;padding:18px}
  .toast-stack{left:10px;right:10px;bottom:68px}
  .v3-toast{max-width:none;width:100%}
  .raw-line{grid-template-columns:42px minmax(0,1fr);font-size:8px;padding:3px 2px}
}


/* =========================================================
   V3 120 — READABLE CHAT + COLORED STATUS
   ========================================================= */

/* Main channel messages */
.message{
  grid-template-columns:40px minmax(0,1fr) 30px;
  gap:10px;
  padding:8px 5px;
}
.message .avatar{
  width:36px;
  height:36px;
  font-size:11px;
}
.message-meta{
  min-height:20px;
  height:auto;
  gap:7px;
}
.message-meta b{
  font-size:12.5px;
}
.message-meta time{
  font-size:9px;
}
.message p{
  margin-top:3px;
  font-size:13px;
  line-height:1.55;
}
.role{
  font-size:7.5px;
  padding:2px 5px;
}
.system-line{
  font-size:11px;
  line-height:1.5;
}
.system-line time{
  font-size:8.5px;
}

/* Status / server output */
.raw-line{
  grid-template-columns:54px minmax(0,1fr);
  gap:10px;
  padding:4px 8px;
  font-size:12px;
  line-height:1.5;
}
.raw-line time{
  font-size:9px;
  padding-top:1px;
}
.raw-line code,
.raw-line .status-text{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:12px;
  line-height:1.5;
  color:#334052;
  white-space:pre-wrap;
  word-break:break-word;
}
.raw-line.status-formatted:hover{
  background:#fafbfd;
}

/* Input and channel chrome */
.composer-box textarea{
  font-size:12px;
}
.topic-bar p{
  font-size:10.5px;
}
.channel-title b{
  font-size:14px;
}
.channel-title span{
  font-size:9.5px;
}
.room-copy b,.dm b{
  font-size:12px;
}
.room-copy small,.dm small{
  font-size:9.5px;
}

/* Mobile stays readable without becoming oversized */
@media (max-width:760px){
  .message{
    grid-template-columns:35px minmax(0,1fr) 24px;
    gap:8px;
    padding:7px 3px;
  }
  .message .avatar{
    width:33px;
    height:33px;
  }
  .message-meta b{
    font-size:11.5px;
  }
  .message-meta time{
    font-size:8.5px;
  }
  .message p{
    font-size:12px;
    line-height:1.5;
  }
  .raw-line{
    grid-template-columns:44px minmax(0,1fr);
    gap:6px;
    padding:4px 2px;
    font-size:11px;
  }
  .raw-line time{
    font-size:8px;
  }
  .raw-line code,
  .raw-line .status-text{
    font-size:11px;
    line-height:1.5;
  }
  .composer-box textarea{
    font-size:12px;
  }
}


/* =========================================================
   H-CHAT V3 — READABILITY 130
   Daha okunabilir masaüstü + mobil tipografi
   ========================================================= */

html{
  font-size:16px;
}

/* Sol ana ray */
.rail-btn small{
  font-size:10px;
}
.rail-btn span{
  font-size:23px;
}

/* Sol workspace */
.workspace-head small{
  font-size:9px;
}
.workspace-head strong{
  font-size:16px;
}
.quick-search input{
  font-size:12.5px;
}
.section-kicker,
.section-title{
  font-size:9px;
}
.moment em{
  font-size:9px;
}

/* Kanal ve özel listeleri */
.room{
  min-height:58px;
}
.room-copy b,
.dm b{
  font-size:13px;
}
.room-copy small,
.dm small{
  font-size:10.5px;
  line-height:1.35;
}
.room em{
  font-size:9.5px;
}
.dm{
  min-height:54px;
}

/* Üst kanal başlığı */
.channel-title b{
  font-size:16px;
}
.channel-title span{
  font-size:11px;
}
.topic-bar{
  min-height:38px;
}
.topic-bar span{
  font-size:8.5px;
}
.topic-bar p{
  font-size:11.5px;
}

/* Kanal mesajları */
.timeline{
  padding-top:16px;
}
.message{
  grid-template-columns:42px minmax(0,1fr) 30px;
  gap:11px;
  padding:9px 6px;
}
.message .avatar{
  width:38px;
  height:38px;
  font-size:12px;
}
.message-meta{
  min-height:21px;
}
.message-meta b{
  font-size:14px;
}
.message-meta time{
  font-size:9.5px;
}
.message p{
  font-size:14px;
  line-height:1.58;
  margin-top:4px;
}
.role{
  font-size:8px;
  padding:3px 5px;
}
.system-line{
  font-size:12px;
  line-height:1.55;
}
.system-line time{
  font-size:9px;
}

/* Status */
.raw-line{
  grid-template-columns:58px minmax(0,1fr);
  gap:11px;
  padding:5px 8px;
}
.raw-line time{
  font-size:9.5px;
}
.raw-line code,
.raw-line .status-text{
  font-size:13px;
  line-height:1.58;
}

/* Mesaj yazma */
.composer{
  min-height:76px;
}
.composer-box{
  min-height:48px;
}
.composer-box textarea{
  font-size:13.5px;
}
.send{
  font-size:10.5px;
}
.attach{
  font-size:21px;
}

/* Kullanıcı drawer */
.drawer-head small{
  font-size:8.5px;
}
.drawer-head b{
  font-size:15px;
}
.people-search input{
  font-size:12px;
}
.people-group label{
  font-size:8.5px;
}
.person b{
  font-size:12.5px;
}
.person small{
  font-size:10px;
}
.person em{
  font-size:11px;
}
.people-btn span{
  font-size:10px;
}
.people-btn b{
  font-size:10px;
}

/* Login */
.login-brand b{
  font-size:14px;
}
.login-brand small{
  font-size:9px;
}
.login-copy h1{
  font-size:21px;
}
.login-copy p{
  font-size:10.5px;
}
.field>span{
  font-size:9.5px;
}
.field input{
  font-size:13px;
}
.remember-row{
  font-size:10px;
}
.login-submit{
  font-size:11.5px;
}
.login-status{
  font-size:9px;
}

/* Mobile */
@media (max-width:760px){
  .channel-title b{
    font-size:14px;
  }
  .channel-title span{
    font-size:9px;
  }
  .topic-bar p{
    font-size:10px;
  }

  .message{
    grid-template-columns:37px minmax(0,1fr) 24px;
    gap:8px;
    padding:8px 3px;
  }
  .message .avatar{
    width:35px;
    height:35px;
    font-size:11px;
  }
  .message-meta b{
    font-size:13px;
  }
  .message-meta time{
    font-size:9px;
  }
  .message p{
    font-size:13px;
    line-height:1.55;
  }
  .role{
    font-size:7.5px;
  }

  .raw-line{
    grid-template-columns:46px minmax(0,1fr);
    gap:7px;
    padding:5px 2px;
  }
  .raw-line time{
    font-size:8.5px;
  }
  .raw-line code,
  .raw-line .status-text{
    font-size:12px;
    line-height:1.55;
  }

  .composer-box textarea{
    font-size:13px;
  }
  .mobile-tabs button small{
    font-size:8.5px;
  }
  .workspace-head strong{
    font-size:15px;
  }
  .room-copy b,
  .dm b{
    font-size:12.5px;
  }
  .room-copy small,
  .dm small{
    font-size:10px;
  }
}


/* =========================================================
   H-CHAT V3 — PROFILE + PM 140
   ========================================================= */

.profile-drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:330px;
  background:#fff;
  border-left:1px solid var(--line);
  z-index:70;
  transform:translateX(100%);
  transition:transform .2s ease;
  box-shadow:-18px 0 48px rgba(25,33,43,.09);
  overflow-y:auto;
}
.profile-drawer.open{
  transform:none;
}
.profile-head{
  height:68px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:#fff;
  z-index:2;
}
.profile-head small{
  display:block;
  color:var(--brand);
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.11em;
}
.profile-head b{
  display:block;
  margin-top:3px;
  font-size:14px;
}
.profile-head button{
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  font-size:21px;
  color:var(--muted);
  cursor:pointer;
}
.profile-content{
  padding:18px 16px 24px;
}
.profile-identity{
  display:flex;
  align-items:center;
  gap:13px;
  padding-bottom:17px;
  border-bottom:1px solid var(--line-2);
}
.profile-avatar{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#202936;
  color:#fff;
  font-size:20px;
  font-weight:900;
  flex:0 0 auto;
}
.profile-name{
  min-width:0;
}
.profile-name h3{
  margin:0;
  font-size:18px;
  line-height:1.2;
}
.profile-name small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:10px;
}
.profile-role{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  margin-top:6px;
  padding:0 7px;
  border-radius:5px;
  background:var(--brand-soft);
  color:var(--brand);
  font-size:8px;
  font-weight:900;
  letter-spacing:.03em;
}
.profile-role[data-role="owner"]{background:#202936;color:#fff}
.profile-role[data-role="rootadmin"],
.profile-role[data-role="netadmin"],
.profile-role[data-role="admin"]{background:#f2eafa;color:#72459d}
.profile-role[data-role="technicaladmin"]{background:#e9f2fb;color:#2e6fa9}
.profile-role[data-role="ircop"],
.profile-role[data-role="globaloper"],
.profile-role[data-role="localoper"]{background:#fff0e7;color:#b55f28}

.profile-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:14px 0;
}
.profile-actions button{
  height:38px;
  border-radius:7px;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.profile-primary{
  border:0;
  background:var(--brand);
  color:#fff;
}
.profile-primary:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.profile-secondary{
  border:1px solid var(--line);
  background:#fff;
  color:#465264;
}
.profile-grid{
  display:grid;
  grid-template-columns:1fr;
  border-top:1px solid var(--line-2);
}
.profile-field{
  padding:11px 2px;
  border-bottom:1px solid var(--line-2);
  min-width:0;
}
.profile-field span{
  display:block;
  color:var(--faint);
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.profile-field b{
  display:block;
  margin-top:4px;
  color:#303a48;
  font-size:11px;
  font-weight:650;
  line-height:1.45;
  word-break:break-word;
}
.profile-channels{
  padding:14px 2px 4px;
}
.profile-channels>span{
  display:block;
  color:var(--faint);
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
  margin-bottom:8px;
}
.profile-channels>div{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.profile-channels div span{
  border:1px solid var(--line);
  background:#fafbfd;
  border-radius:5px;
  padding:5px 7px;
  font-size:9px;
  color:#485464;
}
.profile-channels em{
  color:var(--faint);
  font-size:9px;
  font-style:normal;
}
.profile-status{
  margin-top:14px;
  padding:9px 10px;
  background:#f8f9fb;
  border:1px solid var(--line-2);
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}
.profile-status.loading:before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--brand);
  display:inline-block;
  margin-right:6px;
  animation:profilePulse 1s infinite ease-in-out;
}
@keyframes profilePulse{
  50%{opacity:.25}
}

.v3-toast.pm{
  background:#354c9f;
}

.person{
  transition:background .12s ease,transform .12s ease;
}
.person:active{
  transform:scale(.99);
}

@media (max-width:760px){
  .profile-drawer{
    top:auto;
    left:0;
    right:0;
    bottom:58px;
    width:100%;
    max-height:78dvh;
    border-left:0;
    border-top:1px solid var(--line);
    border-radius:16px 16px 0 0;
    transform:translateY(102%);
    box-shadow:0 -18px 45px rgba(25,33,43,.12);
  }
  .profile-drawer.open{
    transform:none;
  }
  .profile-head{
    height:58px;
  }
  .profile-content{
    padding:14px 14px 22px;
  }
  .profile-avatar{
    width:54px;
    height:54px;
  }
  .profile-name h3{
    font-size:17px;
  }
  .profile-field b{
    font-size:11.5px;
  }
}


/* =========================================================
   H-CHAT V3 — REPLY + REACTIONS 150
   ========================================================= */

.reply-preview{
  min-height:48px;
  height:auto;
  margin:0 14px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:3px minmax(0,1fr) 32px;
  gap:10px;
  align-items:center;
  padding:5px 0;
}
.reply-preview[hidden]{display:none!important}
.reply-preview>span{
  height:32px;
  background:var(--brand);
  border-radius:3px;
}
.reply-preview-copy{
  min-width:0;
}
.reply-preview-copy small{
  display:block;
  color:var(--brand);
  font-size:8px;
  font-weight:800;
  letter-spacing:.04em;
}
.reply-preview-copy small strong{
  color:#334052;
}
.reply-preview-copy b{
  display:block;
  margin-top:3px;
  font-size:10.5px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.reply-preview>button{
  width:30px;
  height:30px;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:18px;
}

.message-reply-quote{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:min(520px,100%);
  border:0;
  border-left:3px solid var(--brand);
  background:#f7f8fc;
  padding:6px 9px;
  margin:3px 0 5px;
  cursor:pointer;
  text-align:left;
}
.message-reply-quote strong{
  color:var(--brand);
  font-size:9.5px;
}
.message-reply-quote span{
  display:block;
  width:100%;
  margin-top:2px;
  color:#687383;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.message-reactions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin-top:6px;
}
.reaction-pill{
  height:27px;
  min-width:42px;
  padding:0 8px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  font-size:12px;
}
.reaction-pill b{
  font-size:9px;
  color:var(--muted);
}
.reaction-pill.mine{
  border-color:#9eacf2;
  background:var(--brand-soft);
}
.reaction-pill.mine b{
  color:var(--brand);
}

.message-actions{
  position:fixed;
  z-index:190;
  width:210px;
  padding:7px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 14px 38px rgba(25,33,43,.16);
}
.message-actions[hidden]{display:none!important}
.message-action-main{
  border-bottom:1px solid var(--line-2);
  padding-bottom:5px;
  margin-bottom:5px;
}
.message-action-main button{
  width:100%;
  height:34px;
  border:0;
  background:transparent;
  border-radius:6px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 8px;
  cursor:pointer;
  color:#364152;
  font-size:10px;
  font-weight:700;
}
.message-action-main button:hover{
  background:#f5f7fa;
}
.reaction-picker{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:2px;
}
.reaction-picker button{
  width:30px;
  height:32px;
  padding:0;
  border:0;
  background:transparent;
  border-radius:6px;
  cursor:pointer;
  font-size:16px;
}
.reaction-picker button:hover{
  background:var(--brand-soft);
}

@media (max-width:760px){
  .message-actions{
    width:230px;
    padding:8px;
  }
  .reaction-picker button{
    width:33px;
    height:35px;
    font-size:18px;
  }
  .message-reply-quote strong{
    font-size:9.5px;
  }
  .message-reply-quote span{
    font-size:10.5px;
  }
  .reaction-pill{
    height:29px;
  }
}


/* =========================================================
   H-CHAT V3 — H-RADYO 160
   Lazy module: IRC login/JOIN tamamlandıktan sonra yüklenir.
   ========================================================= */

.radio-mini{
  cursor:pointer;
  user-select:none;
}
.radio-mini-copy{
  min-width:0;
}
.radio-mini-copy b,
.radio-mini-copy small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.radio-mini-copy small{
  max-width:190px;
}
.radio-mini.radio-ready{
  border-color:#d9dee7;
}
.radio-mini.is-playing{
  background:#f7f9ff;
  border-color:#bdc7f5;
}
.radio-mini button:disabled{
  opacity:.55;
  cursor:wait;
}

.radio-panel{
  position:fixed;
  z-index:85;
  top:64px;
  right:68px;
  width:350px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 22px 60px rgba(24,32,43,.16);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px) scale(.99);
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
  overflow:hidden;
}
.radio-panel.open{
  opacity:1;
  visibility:visible;
  transform:none;
}
.radio-panel-head{
  height:58px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line-2);
}
.radio-panel-head small{
  display:block;
  color:var(--brand);
  font-size:8px;
  font-weight:900;
  letter-spacing:.11em;
}
.radio-panel-head b{
  display:block;
  margin-top:2px;
  font-size:14px;
}
.radio-panel-head button{
  width:32px;
  height:32px;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:19px;
}

.radio-now-card{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:12px;
  padding:14px;
  background:#fafbfc;
}
.radio-cover{
  width:76px;
  height:76px;
  border-radius:10px;
  background:#202936;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#fff;
  font-size:26px;
  position:relative;
}
.radio-cover img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.radio-track{
  min-width:0;
  align-self:center;
}
.radio-live-row{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:7px;
}
.radio-mode{
  display:inline-flex;
  height:19px;
  padding:0 6px;
  align-items:center;
  border-radius:4px;
  background:#eef1f5;
  color:#667284;
  font-size:7.5px;
  font-weight:900;
  letter-spacing:.06em;
}
.radio-mode[data-mode="live"]{
  background:#ffecec;
  color:#b73939;
}
.radio-mode[data-mode="auto"]{
  background:#ebf3ff;
  color:#386ba7;
}
.radio-mode[data-mode="offline"]{
  background:#f0f1f3;
  color:#7e8793;
}
.radio-listeners{
  color:var(--muted);
  font-size:9px;
}
.radio-track h3{
  margin:0;
  font-size:14px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.radio-track p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.radio-dj-card{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:11px 14px;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}
.radio-dj-avatar{
  width:38px;
  height:38px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:var(--brand-soft);
  color:var(--brand);
  font-size:13px;
  font-weight:900;
}
.radio-dj-card small{
  display:block;
  color:var(--faint);
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}
.radio-dj-card b{
  display:block;
  margin-top:2px;
  font-size:11px;
}
.radio-dj-card span{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:9px;
}
.radio-dj-card em{
  color:var(--faint);
  font-size:8px;
  font-style:normal;
  white-space:nowrap;
}

.radio-controls{
  display:grid;
  grid-template-columns:102px 38px minmax(0,1fr);
  gap:8px;
  align-items:center;
  padding:13px 14px;
}
.radio-main-play{
  height:38px;
  border:0;
  border-radius:7px;
  background:var(--brand);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  cursor:pointer;
}
.radio-main-play b{
  font-size:10px;
}
.radio-main-play:disabled{
  opacity:.55;
}
.radio-mute{
  width:38px;
  height:38px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:7px;
  cursor:pointer;
}
.radio-volume{
  min-width:0;
}
.radio-volume span{
  display:block;
  color:var(--faint);
  font-size:7px;
  font-weight:900;
  letter-spacing:.07em;
  margin-bottom:4px;
}
.radio-volume input{
  width:100%;
  accent-color:var(--brand);
}

.radio-auto-row{
  margin:0 14px 13px;
  padding:10px;
  border:1px solid var(--line-2);
  background:#fafbfc;
  border-radius:7px;
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
}
.radio-auto-row input{
  accent-color:var(--brand);
}
.radio-auto-row b{
  display:block;
  font-size:9.5px;
}
.radio-auto-row small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:8.5px;
}
.radio-foot{
  min-height:38px;
  padding:0 14px;
  border-top:1px solid var(--line-2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  font-size:8px;
}
.radio-foot span{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.radio-foot button{
  border:0;
  background:transparent;
  color:var(--brand);
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}

@media (max-width:900px){
  .radio-mini-copy small{
    max-width:125px;
  }
}

@media (max-width:760px){
  .radio-mini{
    max-width:152px;
  }
  .radio-mini-copy small{
    max-width:82px;
  }
  .radio-panel{
    top:auto;
    left:8px;
    right:8px;
    bottom:66px;
    width:auto;
    border-radius:14px;
    transform:translateY(10px);
  }
  .radio-panel.open{
    transform:none;
  }
  .radio-now-card{
    grid-template-columns:68px minmax(0,1fr);
  }
  .radio-cover{
    width:68px;
    height:68px;
  }
  .radio-track h3{
    font-size:13px;
  }
  .radio-track p{
    font-size:10px;
  }
}


/* =========================================================
   H-CHAT V3 — COMPOSER STABILITY 165
   Mesaj kutusunun yazarken yukarı oynamasını engeller.
   ========================================================= */

.chat{
  min-height:0;
  overflow:hidden;
}

.composer{
  height:var(--composer);
  min-height:var(--composer);
  max-height:var(--composer);
  align-self:end;
  position:relative;
  z-index:4;
  flex-shrink:0;
}

.composer-box{
  height:48px;
  min-height:48px;
  max-height:48px;
}

.composer-box textarea{
  height:25px !important;
  min-height:25px !important;
  max-height:25px !important;
  line-height:25px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0;
}

@media (max-width:760px){
  .composer{
    height:var(--composer);
    min-height:var(--composer);
    max-height:var(--composer);
  }

  .composer-box{
    height:42px;
    min-height:42px;
    max-height:42px;
  }

  .composer-box textarea{
    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;
    line-height:24px;
  }
}


/* =========================================================
   H-CHAT V3 — CHANNEL / PM CLOSE 170
   ========================================================= */

.room-tail,
.dm-tail{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:30px;
}

.room-close{
  width:22px;
  height:22px;
  border-radius:5px;
  display:grid;
  place-items:center;
  color:#98a2b3;
  font-size:15px;
  line-height:1;
  font-weight:500;
  cursor:pointer;
  opacity:0;
  transition:opacity .12s ease,background .12s ease,color .12s ease;
}

.room:hover .room-close,
.room.active .room-close,
.dm:hover .room-close,
.dm.active .room-close,
.room-close:focus{
  opacity:1;
}

.room-close:hover,
.room-close:focus{
  outline:none;
  background:#f1f3f6;
  color:#d14b4b;
}

.room-tail em{
  min-width:14px;
  text-align:right;
}

.dm-tail i{
  flex:0 0 auto;
}

@media (max-width:760px){
  .room-close{
    opacity:1;
    width:25px;
    height:25px;
    font-size:17px;
  }
}


/* =========================================================
   H-CHAT V3 — DURUMLAR / STORY 180
   ========================================================= */

.moment-strip{
  transition:background .2s ease,box-shadow .2s ease;
}
.moment-strip.story-pulse{
  background:#f8f9fb;
  box-shadow:inset 3px 0 0 var(--brand);
}
.moment-strip.story-uploading{
  opacity:.72;
  pointer-events:none;
}

.moment{
  position:relative;
}
.moment-ring{
  position:relative;
  border-color:#cfd4dc;
  background:#fff;
}
.moment.has-story .moment-ring{
  border-color:#9da6b2;
}
.moment.mine.has-story .moment-ring{
  border-color:#9da6b2;
}
.moment-ring b{
  overflow:hidden;
  background:#eef0f4;
  color:#4f5967;
}
.moment-ring b.has-thumb{
  background:#e8ebef;
}
.moment-ring b img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.story-plus{
  position:absolute;
  right:-4px;
  bottom:-3px;
  width:17px;
  height:17px;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:11px;
  font-style:normal;
  line-height:1;
}
.story-count{
  position:absolute;
  right:-6px;
  top:-5px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border:2px solid #fff;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#2d3745;
  color:#fff;
  font-size:7px;
  font-weight:800;
}
.story-empty-inline{
  align-self:center;
  color:var(--faint);
  font-size:8.5px;
  white-space:nowrap;
  padding:0 4px;
}

/* Viewer */
.story-viewer-v3{
  position:fixed;
  inset:0;
  z-index:260;
  background:rgba(10,14,20,.92);
  display:grid;
  place-items:center;
  padding:18px;
}
.story-viewer-v3[hidden]{
  display:none!important;
}
.story-viewer-open{
  overflow:hidden;
}

.story-viewer-shell{
  position:relative;
  width:min(520px,100%);
  height:min(820px,calc(100dvh - 36px));
  background:#0d1118;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  overflow:hidden;
  display:grid;
  grid-template-rows:14px 58px minmax(0,1fr) 54px;
  box-shadow:0 28px 90px rgba(0,0,0,.42);
}

.story-progress{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:4px;
  padding:8px 10px 0;
}
.story-progress span{
  height:3px;
  border-radius:4px;
  overflow:hidden;
  background:rgba(255,255,255,.22);
}
.story-progress span i{
  display:block;
  width:0;
  height:100%;
  background:#fff;
}
.story-progress span.done i{
  width:100%;
}
.story-progress span.active i.run{
  animation:storyProgress var(--story-duration,5000ms) linear forwards;
}
@keyframes storyProgress{
  from{width:0}
  to{width:100%}
}

.story-viewer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 12px;
  color:#fff;
  position:relative;
  z-index:3;
}
.story-viewer-user{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
}
.story-viewer-user>span{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  background:#242c37;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:800;
}
.story-viewer-user b{
  display:block;
  font-size:11px;
}
.story-viewer-user small{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.6);
  font-size:8px;
}
.story-viewer-actions{
  display:flex;
  align-items:center;
  gap:4px;
}
.story-viewer-actions button{
  width:32px;
  height:32px;
  border:0;
  border-radius:7px;
  background:rgba(255,255,255,.09);
  color:#fff;
  cursor:pointer;
  font-size:13px;
}
#storyViewerClose{
  font-size:20px;
}

.story-media-stage{
  position:relative;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#090d12;
}
.story-media-v3{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}
.story-media-v3 img,
.story-media-v3 video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.story-nav-zone{
  position:absolute;
  top:0;
  bottom:0;
  width:34%;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:2;
}
.story-nav-zone.prev{left:0}
.story-nav-zone.next{right:0}

.story-viewer-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  color:rgba(255,255,255,.7);
  font-size:9px;
}
.story-like-btn{
  min-width:62px;
  height:34px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:rgba(255,255,255,.08);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  cursor:pointer;
}
.story-like-btn span{
  font-size:20px;
  line-height:1;
}
.story-like-btn b{
  font-size:10px;
}
.story-like-btn.liked{
  background:rgba(238,83,103,.16);
  border-color:rgba(238,83,103,.42);
}
.story-like-btn.liked span{
  color:#ff657b;
}
.story-like-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.story-likes-pop{
  position:absolute;
  top:72px;
  right:12px;
  z-index:8;
  width:220px;
  max-height:310px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.13);
  border-radius:10px;
  background:#171d26;
  color:#fff;
  box-shadow:0 16px 44px rgba(0,0,0,.34);
}
.story-likes-pop[hidden]{
  display:none!important;
}
.story-likes-pop>div{
  position:sticky;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:42px;
  padding:0 10px;
  background:#171d26;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.story-likes-pop>div b{
  font-size:10px;
}
.story-likes-pop>div button{
  border:0;
  background:transparent;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}
.story-likes-pop section{
  padding:6px;
}
.story-likes-pop section div{
  min-height:38px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:8px;
  align-items:center;
  padding:4px 5px;
}
.story-likes-pop section div span{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#29313d;
  display:grid;
  place-items:center;
  font-size:9px;
}
.story-likes-pop section div b{
  font-size:9.5px;
}
.story-likes-pop section p{
  margin:8px;
  color:rgba(255,255,255,.55);
  font-size:9px;
}

@media (max-width:760px){
  .story-viewer-v3{
    padding:0;
    background:#090d12;
  }
  .story-viewer-shell{
    width:100%;
    height:100dvh;
    max-height:none;
    border:0;
    border-radius:0;
  }
  .story-viewer-head{
    padding-left:14px;
    padding-right:14px;
  }
  .story-likes-pop{
    top:auto;
    left:10px;
    right:10px;
    bottom:62px;
    width:auto;
    max-height:42dvh;
  }
  .story-nav-zone{
    width:38%;
  }
}

/* =========================================================
   H-CHAT V3 — GRID ROW LOCK / COMPOSER BOTTOM FIX 223
   Gizli topic/reply satirlari grid auto-placement'i kaydirmasin.
   ========================================================= */
.chat-head{grid-row:1}
.topic-bar{grid-row:2}
.timeline{grid-row:3}
.reply-preview{grid-row:4}
.composer-typing{grid-row:5}
.composer{grid-row:6}

/* H-Chat V3 — hamburger / workspace toggle */
@media (min-width:761px){
  .mobile-menu.icon-btn{display:inline-grid;place-items:center}
  .app{transition:grid-template-columns .18s ease}
  .app.workspace-collapsed{grid-template-columns:var(--rail) 0 minmax(0,1fr)}
  .app.workspace-collapsed .workspace{
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    border-right:0;
  }
}

@media (max-width:760px){
  .mobile-menu.icon-btn{display:inline-grid;place-items:center}
  .head-actions>#moreBtn{
    display:inline-grid!important;
    place-items:center;
    flex:0 0 34px;
    width:34px;
    height:34px;
  }
}
@media (max-width:390px){
  .chat-head{gap:4px;padding-inline:6px}
  .head-left,.head-actions{gap:5px}
  .channel-title span{display:none}
  .people-btn{min-width:34px;width:34px;padding:0}
}


/* H-Chat V3 — workspace toggle icon semantics */
#openWorkspace [data-workspace-toggle-icon]{
  font-size:18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
@media (min-width:761px){
  #openWorkspace [data-workspace-toggle-icon]{font-size:20px}
}

/* =========================================================
   H-CHAT V3 — PROFESSIONAL USER PROFILE V2
   ========================================================= */
.profile-content{
  padding:16px 15px 24px;
}
.profile-hero{
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  gap:13px;
  align-items:center;
  padding:2px 0 15px;
  border-bottom:1px solid var(--line-2);
}
.profile-avatar-wrap{
  position:relative;
  width:70px;
  height:70px;
}
.profile-avatar{
  width:70px;
  height:70px;
  border-radius:17px;
  font-size:23px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.profile-presence-dot{
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--green);
  border:3px solid #fff;
}
.profile-presence-dot.away{background:var(--amber)}
.profile-name h3{
  font-size:20px;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-badges{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  margin-top:7px;
}
.profile-role{
  margin-top:0;
  min-height:22px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-channel-badge{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 7px;
  border-radius:5px;
  background:#f5f7fa;
  border:1px solid var(--line-2);
  color:#5f6a79;
  font-size:8px;
  font-weight:900;
}
.profile-channel-badge[data-prefix="~"]{background:#202936;color:#fff;border-color:#202936}
.profile-channel-badge[data-prefix="&"]{background:#f2eafa;color:#72459d;border-color:#e6d8f4}
.profile-channel-badge[data-prefix="@"]{background:#e9f5fa;color:#2f7897;border-color:#d7ecf4}
.profile-channel-badge[data-prefix="%"]{background:#eaf6ef;color:#3e805e;border-color:#d6ecdf}
.profile-channel-badge[data-prefix="+"]{background:#fff5d9;color:#886516;border-color:#f4e6b6}
.profile-name small{
  margin-top:7px;
  font-size:9.5px;
}
.profile-account-strip{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:9px;
  align-items:center;
  min-height:52px;
  margin:12px 0 0;
  padding:8px 10px;
  border:1px solid var(--line-2);
  background:#f8f9fb;
  border-radius:9px;
}
.profile-account-strip.verified{
  background:#f2faf6;
  border-color:#dcefe5;
}
.profile-account-icon{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#eef1f5;
  color:#697688;
  font-size:15px;
}
.profile-account-strip.verified .profile-account-icon{
  background:#dff3e8;
  color:#2f8a5e;
}
.profile-account-strip small,
.profile-account-strip b{display:block}
.profile-account-strip small{
  color:var(--faint);
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}
.profile-account-strip b{
  margin-top:2px;
  color:#394555;
  font-size:9.5px;
  font-weight:750;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-actions{
  grid-template-columns:1.15fr .85fr .95fr;
  gap:6px;
  padding:11px 0 12px;
}
.profile-actions button{
  min-width:0;
  height:39px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 8px;
  border-radius:8px;
  font-size:9px;
}
.profile-actions button i{font-size:13px}
.profile-copy span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-away{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:8px;
  align-items:start;
  margin-bottom:11px;
  padding:9px 10px;
  border:1px solid #f1dfb6;
  background:#fff9e9;
  border-radius:8px;
  color:#76581a;
}
.profile-away>i{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  font-size:14px;
}
.profile-away small,
.profile-away b{display:block}
.profile-away small{
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
  color:#ad842c;
}
.profile-away b{
  margin-top:2px;
  font-size:9px;
  line-height:1.45;
  font-weight:650;
  word-break:break-word;
}
.profile-overview{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-bottom:15px;
}
.profile-stat{
  min-width:0;
  min-height:57px;
  padding:9px 8px;
  border:1px solid var(--line-2);
  background:#fbfcfd;
  border-radius:8px;
}
.profile-stat small,
.profile-stat b{display:block}
.profile-stat small{
  color:var(--faint);
  font-size:6.8px;
  font-weight:900;
  letter-spacing:.07em;
}
.profile-stat b{
  margin-top:5px;
  color:#3a4655;
  font-size:9px;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-section-title{
  margin:3px 0 4px;
  color:var(--faint);
  font-size:7.5px;
  font-weight:900;
  letter-spacing:.1em;
}
.profile-grid{
  grid-template-columns:1fr 1fr;
  gap:0 12px;
  border-top:0;
  border-bottom:1px solid var(--line-2);
}
.profile-field{
  padding:10px 1px;
  border-top:1px solid var(--line-2);
  border-bottom:0;
}
.profile-field-wide{grid-column:1/-1}
.profile-field span{font-size:7px}
.profile-field b{
  margin-top:4px;
  font-size:10px;
}
.profile-extra{
  margin-top:14px;
}
.profile-extra-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
.profile-extra-grid>div{
  min-width:0;
  padding:9px 8px;
  border:1px solid var(--line-2);
  border-radius:8px;
  background:#fbfcfd;
}
.profile-extra-grid small,
.profile-extra-grid b{display:block}
.profile-extra-grid small{
  color:var(--faint);
  font-size:6.8px;
  font-weight:900;
  letter-spacing:.07em;
}
.profile-extra-grid b{
  margin-top:4px;
  font-size:9.5px;
  color:#3a4655;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-channels{
  padding-top:15px;
}
.profile-channels>div{
  max-height:100px;
  overflow:auto;
}
.profile-status{
  border-radius:7px;
}

@media (max-width:760px){
  .profile-content{padding:13px 13px 20px}
  .profile-hero{grid-template-columns:60px minmax(0,1fr);gap:11px;padding-bottom:13px}
  .profile-avatar-wrap,.profile-avatar{width:60px;height:60px}
  .profile-avatar{border-radius:15px;font-size:20px}
  .profile-name h3{font-size:18px}
  .profile-actions{grid-template-columns:1fr 1fr 1fr}
  .profile-actions button span{font-size:8px}
  .profile-overview{gap:5px}
  .profile-stat{padding:8px 6px}
  .profile-grid{gap:0 10px}
}


/* =========================================================
   H-Chat V3 - Sticker / GIF panel
   ========================================================= */
.sticker-panel{
  position:fixed;
  right:calc(var(--people) + 84px);
  bottom:calc(var(--composer) + 10px);
  width:360px;
  max-height:min(570px,calc(100dvh - var(--top) - var(--composer) - 26px));
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:13px;
  box-shadow:0 18px 52px rgba(24,32,42,.17);
  z-index:95;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transform:translateY(8px) scale(.985);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
}
.sticker-panel[hidden]{display:none!important}
.sticker-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.app.people-collapsed .sticker-panel{right:84px}
.sticker-panel-head{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 14px;border-bottom:1px solid var(--line-2)}
.sticker-panel-head small{display:block;font-size:6.5px;font-weight:900;letter-spacing:.12em;color:var(--brand)}
.sticker-panel-head b{display:block;font-size:12px;margin-top:2px}
.sticker-panel-head button{width:30px;height:30px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.sticker-panel-head button:hover{background:var(--surface-2);color:var(--text)}
.sticker-search{margin:10px 12px 7px;height:38px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 9px;background:var(--surface-2)}
.sticker-search>i{color:var(--faint);font-size:13px}
.sticker-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;font-size:10px;color:var(--text)}
.sticker-search button{width:25px;height:25px;border:0;border-radius:6px;background:transparent;color:var(--faint);cursor:pointer;display:grid;place-items:center}
.sticker-tabs{height:38px;display:flex;gap:3px;padding:0 12px 7px;border-bottom:1px solid var(--line-2)}
.sticker-tabs button{height:30px;border:0;border-radius:7px;background:transparent;color:var(--muted);padding:0 9px;display:flex;align-items:center;gap:5px;font-size:8.5px;font-weight:800;cursor:pointer}
.sticker-tabs button.active{background:var(--brand-soft);color:var(--brand)}
.sticker-tabs button i{font-size:12px}
.sticker-panel-body{position:relative;min-height:230px;max-height:350px;overflow:auto;padding:10px 11px 12px;scrollbar-width:thin}
.sticker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.sticker-item{position:relative;aspect-ratio:1;border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);padding:5px;cursor:pointer;overflow:hidden;display:grid;place-items:center;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.sticker-item:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 36%,var(--line));background:var(--brand-soft)}
.sticker-item img{width:100%;height:100%;object-fit:contain;display:block;border-radius:7px}
.sticker-item.gif img{object-fit:cover;background:#eef1f4}
.sticker-item .sticker-gif-badge{position:absolute;right:4px;bottom:4px;padding:2px 4px;border-radius:4px;background:rgba(24,32,42,.78);color:#fff;font-style:normal;font-size:6px;font-weight:900;letter-spacing:.05em}
.sticker-empty{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--faint);gap:5px}
.sticker-empty[hidden]{display:none!important}
.sticker-empty>i{font-size:28px;color:var(--line)}
.sticker-empty b{font-size:10px;color:var(--muted)}
.sticker-empty span{font-size:8px}
.sticker-loading{min-height:220px;display:flex;align-items:center;justify-content:center;gap:5px}
.sticker-loading[hidden]{display:none!important}
.sticker-loading span{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:stickerDot .8s infinite ease-in-out}
.sticker-loading span:nth-child(2){animation-delay:.12s}.sticker-loading span:nth-child(3){animation-delay:.24s}
@keyframes stickerDot{50%{transform:translateY(-5px);opacity:.55}}
.sticker-panel-foot{min-height:42px;padding:7px 12px 8px;border-top:1px solid var(--line-2);background:var(--surface-2);display:flex;flex-direction:column;justify-content:center}
.sticker-panel-foot span{font-size:8px;color:var(--muted)}
.sticker-panel-foot small{font-size:6.5px;color:var(--faint);margin-top:2px}

.message.sticker-message{align-items:start}
.message.sticker-message .message-body>p{display:none}
.message-sticker-wrap{margin-top:5px;max-width:220px}
.message-sticker-link{display:inline-block;max-width:100%;text-decoration:none;border-radius:12px;outline:none}
.message-sticker{display:block;max-width:210px;max-height:210px;width:auto;height:auto;object-fit:contain;border-radius:11px;background:transparent}
.message-sticker.tenor{background:var(--surface-2)}
.message-sticker-link:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}

@media(max-width:1050px){
  .sticker-panel{right:calc(var(--people) + 70px);width:340px}
  .app.people-collapsed .sticker-panel{right:70px}
}
@media(max-width:760px){
  .sticker-panel,.app.people-collapsed .sticker-panel{
    left:8px;right:8px;bottom:calc(58px + var(--composer) + 7px);width:auto;
    max-height:min(520px,calc(100dvh - 140px));border-radius:12px;z-index:96
  }
  .sticker-panel-body{max-height:310px}
  .sticker-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .message-sticker{max-width:min(200px,65vw);max-height:190px}
}
@media(max-width:380px){
  .composer-tools button:nth-child(2){display:inline-grid}
  .composer-tools button:nth-child(3){display:none}
  .sticker-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* =========================================================
   V3 280 — NICKSERV IDENTIFY PROMPT
   ========================================================= */
.identify-overlay{
  position:fixed;inset:0;z-index:360;display:grid;place-items:center;padding:18px;
  background:rgba(22,31,42,.26);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease
}
.identify-overlay.open{opacity:1;visibility:visible}
.identify-overlay[hidden]{display:none!important}
.identify-card{
  position:relative;width:min(92vw,390px);padding:22px;background:var(--panel,#fff);
  border:1px solid var(--line,#dfe5eb);border-radius:14px;
  box-shadow:0 28px 80px rgba(20,30,42,.18)
}
.identify-close{
  position:absolute;right:12px;top:12px;width:30px;height:30px;border:0;background:transparent;
  color:var(--muted,#6c7785);display:grid;place-items:center;border-radius:8px;cursor:pointer;font-size:16px
}
.identify-close:hover{background:var(--soft,#f3f6f8);color:var(--text,#17202b)}
.identify-icon{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px;
  background:color-mix(in srgb,var(--brand,#2f8b61) 12%,#fff);color:var(--brand,#2f8b61);font-size:21px
}
.identify-copy small{display:block;color:var(--brand,#2f8b61);font-size:8px;font-weight:900;letter-spacing:.12em}
.identify-copy h2{margin:4px 0 5px;font-size:18px;letter-spacing:-.02em}
.identify-copy p{margin:0;color:var(--muted,#6c7785);font-size:10px;line-height:1.55}
.identify-copy p b{color:var(--text,#17202b)}
.identify-field{margin-top:16px}.identify-remember{margin-bottom:12px}
.identify-error{
  margin:0 0 10px;padding:9px 10px;border-radius:8px;border:1px solid var(--line,#dfe5eb);
  background:var(--soft,#f5f7f9);color:var(--muted,#6c7785);font-size:9px;line-height:1.45
}
.identify-error.bad{border-color:rgba(176,55,55,.18);background:rgba(176,55,55,.07);color:#a23c3c}

.identify-submit{display:flex;align-items:center;justify-content:center;gap:7px}.identify-submit i{font-size:13px}
.identify-hint{text-align:center;margin-top:9px;color:var(--faint,#9aa4af);font-size:7.5px;line-height:1.45}
@media(max-width:760px){
  .identify-card{padding:20px;border-radius:12px}.identify-overlay{padding:12px}
}


/* =========================================================
   V3 290 — FULL EMOJI PICKER
   ========================================================= */
.emoji-panel{
  position:fixed;right:calc(var(--people) + 118px);bottom:calc(var(--composer) + 10px);
  width:390px;max-height:min(540px,calc(100dvh - var(--top) - var(--composer) - 26px));
  background:var(--surface);border:1px solid var(--line);border-radius:13px;
  box-shadow:0 18px 52px rgba(24,32,42,.17);z-index:97;overflow:hidden;
  display:flex;flex-direction:column;transform:translateY(8px) scale(.985);opacity:0;
  visibility:hidden;pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease
}
.emoji-panel[hidden]{display:none!important}.emoji-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.app.people-collapsed .emoji-panel{right:118px}
.emoji-panel-head{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 14px;border-bottom:1px solid var(--line-2)}
.emoji-panel-head small{display:block;font-size:6.5px;font-weight:900;letter-spacing:.12em;color:var(--brand)}
.emoji-panel-head b{display:block;font-size:12px;margin-top:2px}
.emoji-panel-head button,.emoji-search button{border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.emoji-panel-head button{width:30px;height:30px;border-radius:7px}.emoji-panel-head button:hover{background:var(--surface-2);color:var(--text)}
.emoji-search{margin:10px 12px 7px;height:38px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 9px;background:var(--surface-2)}
.emoji-search>i{font-size:13px;color:var(--faint)}.emoji-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:10px}
.emoji-search button{width:25px;height:25px;border-radius:6px}.emoji-tabs{display:flex;gap:2px;padding:0 10px 7px;border-bottom:1px solid var(--line-2);overflow-x:auto;scrollbar-width:none}
.emoji-tabs::-webkit-scrollbar{display:none}.emoji-tabs button{flex:0 0 33px;width:33px;height:31px;border:0;border-radius:7px;background:transparent;font-size:16px;cursor:pointer;display:grid;place-items:center}
.emoji-tabs button:hover{background:var(--surface-2)}.emoji-tabs button.active{background:var(--brand-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 18%,transparent)}
.emoji-panel-body{min-height:235px;max-height:330px;overflow:auto;padding:10px 11px 12px;scrollbar-width:thin}
.emoji-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}.emoji-item{aspect-ratio:1;border:0;border-radius:8px;background:transparent;font-size:22px;cursor:pointer;display:grid;place-items:center;line-height:1;padding:0;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.emoji-item:hover{background:var(--brand-soft);transform:scale(1.08)}.emoji-panel-foot{min-height:36px;border-top:1px solid var(--line-2);background:var(--surface-2);display:flex;align-items:center;padding:0 12px}
.emoji-panel-foot span{font-size:7.5px;color:var(--muted)}
@media(max-width:1050px){.emoji-panel{right:calc(var(--people) + 92px);width:360px}.app.people-collapsed .emoji-panel{right:92px}}
@media(max-width:760px){.emoji-panel,.app.people-collapsed .emoji-panel{left:8px;right:8px;bottom:calc(58px + var(--composer) + 7px);width:auto;max-height:min(520px,calc(100dvh - 140px));z-index:98}.emoji-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.emoji-item{font-size:21px}.emoji-panel-body{max-height:300px}}
@media(max-width:390px){.emoji-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.emoji-item{font-size:20px}}


/* =========================================================
   V3 310 — COLOR TWEMOJI RENDERING
   ========================================================= */
.twemoji-picker,.twemoji-tab,.twemoji-reaction,.twemoji-pill,.twemoji-inline{
  display:inline-block;object-fit:contain;user-select:none;-webkit-user-drag:none
}
.twemoji-picker{width:25px;height:25px}
.twemoji-tab{width:18px;height:18px}
.twemoji-reaction{width:20px;height:20px}
.twemoji-pill{width:15px;height:15px;vertical-align:-2px}
.twemoji-inline{width:1.15em;height:1.15em;vertical-align:-.18em;margin:0 .025em}
.emoji-native-fallback{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;line-height:1}
.emoji-item{font-size:0}
.emoji-item .emoji-native-fallback{font-size:22px}
.emoji-tabs button{font-size:0}
.emoji-tabs button .emoji-native-fallback{font-size:16px}
.reaction-picker button{display:grid;place-items:center}
.reaction-picker button .emoji-native-fallback{font-size:18px}
.reaction-pill span{display:inline-flex;align-items:center;justify-content:center}
.message p .twemoji-inline,.message-reply-quote .twemoji-inline{pointer-events:none}
.emoji-panel-foot a{margin-left:auto;color:var(--faint);font-size:7px;text-decoration:none}
.emoji-panel-foot a:hover{color:var(--brand);text-decoration:underline}
@media(max-width:760px){.twemoji-picker{width:24px;height:24px}.twemoji-tab{width:18px;height:18px}}

/* =========================================================
   H-Chat V3 · Chat image send / preview
   ========================================================= */
.image-compose-overlay{
  position:fixed;inset:0;z-index:130;background:rgba(20,27,35,.34);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:18px;opacity:0;visibility:hidden;transition:.16s ease
}
.image-compose-overlay.open{opacity:1;visibility:visible}
.image-compose-overlay[hidden]{display:none!important}
.image-compose-card{
  width:min(440px,94vw);max-height:min(720px,90dvh);overflow:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 24px 70px rgba(19,28,39,.22)
}
.image-compose-head{height:56px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.image-compose-head small{display:block;color:var(--brand);font-size:7px;font-weight:900;letter-spacing:.12em}
.image-compose-head b{display:block;font-size:13px;margin-top:2px}
.image-compose-head button{width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;color:var(--muted)}
.image-compose-preview{margin:14px 14px 0;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;min-height:220px;max-height:430px;display:grid;place-items:center;overflow:hidden}
.image-compose-preview img{display:block;max-width:100%;max-height:430px;object-fit:contain}
.image-compose-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px 0}
.image-compose-meta>div{border:1px solid var(--line);background:var(--surface-2);border-radius:9px;padding:9px 10px;min-width:0}
.image-compose-meta small{display:block;font-size:6.5px;font-weight:900;color:var(--faint);letter-spacing:.08em}
.image-compose-meta b{display:block;margin-top:3px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.image-compose-note{margin:10px 14px 0;color:var(--faint);font-size:8px;line-height:1.5}
.image-compose-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:8px;padding:14px}
.image-compose-actions button{height:39px;border-radius:8px;font-size:9px;font-weight:800;cursor:pointer}
.image-compose-actions .secondary{border:1px solid var(--line);background:#fff;color:var(--muted)}
.image-compose-actions .primary{border:0;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;gap:7px}
.image-compose-actions .primary:disabled{opacity:.55;cursor:wait}

.image-message .message-body>p{font-size:8px;color:var(--faint);margin-top:4px}
.message-image-wrap{
  position:relative;display:block;width:min(310px,100%);margin-top:6px;padding:0;border:0;background:transparent;border-radius:12px;overflow:hidden;cursor:zoom-in;text-align:left
}
.message-image{display:block;width:100%;max-height:300px;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:var(--surface-2)}
.message-image-wrap>span{position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:8px;background:rgba(20,27,35,.72);color:#fff;display:grid;place-items:center;opacity:0;transition:opacity .15s}
.message-image-wrap:hover>span{opacity:1}

.image-lightbox{position:fixed;inset:0;z-index:150;background:rgba(10,14,20,.88);display:grid;place-items:center;padding:38px;opacity:0;visibility:hidden;transition:.15s ease}
.image-lightbox.open{opacity:1;visibility:visible}
.image-lightbox[hidden]{display:none!important}
.image-lightbox>img{display:block;max-width:min(1200px,96vw);max-height:90dvh;object-fit:contain;border-radius:10px;box-shadow:0 18px 70px rgba(0,0,0,.38)}
.image-lightbox>button{position:fixed;right:18px;top:18px;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.10);color:#fff;font-size:18px;cursor:pointer}

@media(max-width:760px){
  .image-compose-overlay{padding:9px;align-items:end}
  .image-compose-card{width:100%;max-height:88dvh;border-radius:14px 14px 0 0}
  .image-compose-preview{min-height:190px;max-height:46dvh}
  .image-compose-preview img{max-height:46dvh}
  .message-image-wrap{width:min(280px,100%)}
  .message-image{max-height:270px}
  .message-image-wrap>span{opacity:1;width:26px;height:26px}
  .image-lightbox{padding:14px}
  .image-lightbox>button{right:10px;top:10px}
}


/* =========================================================
   H-Chat V3 · Voice messages / recorder
   ========================================================= */
.voice-recorder-bar[hidden]{display:none!important}
.voice-recording .attach,.voice-recording .composer-box,.voice-recording>.send{display:none!important}
.voice-recorder-bar{
  flex:1;min-width:0;height:48px;display:flex;align-items:center;gap:12px;padding:0 4px 0 8px
}
.voice-recorder-state{display:flex;align-items:center;gap:9px;min-width:132px}
.voice-live-dot{width:9px;height:9px;border-radius:50%;background:#df3c4a;box-shadow:0 0 0 0 rgba(223,60,74,.28);animation:voicePulse 1.2s infinite}
@keyframes voicePulse{70%{box-shadow:0 0 0 8px rgba(223,60,74,0)}100%{box-shadow:0 0 0 0 rgba(223,60,74,0)}}
.voice-recorder-copy{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:baseline;min-width:0}
.voice-recorder-copy small{grid-column:1/3;color:#d63b49;font-size:6.5px;font-weight:900;letter-spacing:.11em}
.voice-recorder-copy b{font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink)}
.voice-recorder-copy span{font-size:8px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.voice-recorder-wave{height:28px;flex:1;min-width:70px;display:flex;align-items:center;justify-content:center;gap:3px;overflow:hidden}
.voice-recorder-wave i{display:block;width:3px;height:8px;border-radius:2px;background:color-mix(in srgb,var(--brand) 68%,#9aa6b4);animation:voiceWave .85s ease-in-out infinite alternate}
.voice-recorder-wave i:nth-child(2){animation-delay:-.20s;height:15px}.voice-recorder-wave i:nth-child(3){animation-delay:-.45s;height:22px}.voice-recorder-wave i:nth-child(4){animation-delay:-.10s;height:12px}.voice-recorder-wave i:nth-child(5){animation-delay:-.55s;height:19px}.voice-recorder-wave i:nth-child(6){animation-delay:-.32s;height:25px}.voice-recorder-wave i:nth-child(7){animation-delay:-.64s;height:13px}.voice-recorder-wave i:nth-child(8){animation-delay:-.25s;height:9px}
@keyframes voiceWave{from{transform:scaleY(.45);opacity:.45}to{transform:scaleY(1);opacity:1}}
.voice-recorder-actions{display:flex;align-items:center;gap:6px}
.voice-recorder-actions button{height:34px;border-radius:8px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:8px;font-weight:850;cursor:pointer}
.voice-recorder-actions button:disabled{opacity:.5;cursor:wait}
.voice-cancel{border:1px solid var(--line);background:#fff;color:var(--muted)}
.voice-send{border:0;background:var(--brand);color:#fff}
#voiceBtn.recording{color:#d63b49!important}

.voice-message .message-body>p{display:none}
.voice-player{width:min(330px,100%);min-height:58px;margin-top:6px;border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:9px 10px;display:flex;align-items:center;gap:10px}
.voice-play{width:38px;height:38px;flex:0 0 38px;border:0;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;font-size:13px;box-shadow:0 5px 14px color-mix(in srgb,var(--brand) 20%,transparent)}
.voice-track{flex:1;min-width:0;display:grid;gap:3px}
.voice-wave-mini{height:13px;display:flex;align-items:center;gap:2px;opacity:.55;overflow:hidden}
.voice-wave-mini i{width:2px;border-radius:2px;background:var(--brand);height:5px}.voice-wave-mini i:nth-child(2n){height:10px}.voice-wave-mini i:nth-child(3n){height:7px}.voice-wave-mini i:nth-child(5n){height:12px}
.voice-seek{width:100%;height:3px;appearance:none;-webkit-appearance:none;background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 70%,#c7d2df),#d9e0e8);border-radius:999px;outline:none;cursor:pointer}
.voice-seek::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--brand);border:2px solid #fff;box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 30%,transparent)}
.voice-seek::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:var(--brand);border:2px solid #fff}
.voice-time{display:flex;justify-content:space-between;font-size:6.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.voice-player audio{display:none}
.voice-error .voice-player{opacity:.6}.voice-error .voice-play{pointer-events:none;background:#9ba5b0}

@media(max-width:760px){
  .voice-recorder-bar{height:44px;padding:0;gap:7px}
  .voice-recorder-state{min-width:100px;gap:6px}.voice-recorder-copy span{max-width:76px}.voice-recorder-wave{display:none}
  .voice-recorder-actions button{width:36px;padding:0}.voice-recorder-actions button span{display:none}
  .voice-player{width:min(285px,100%);padding:8px}.voice-play{width:34px;height:34px;flex-basis:34px}
  .composer-tools button:nth-child(3){display:inline-grid}
}
@media(max-width:380px){.voice-recorder-copy span{display:none}.voice-recorder-state{min-width:76px}}

/* =========================================================
   H-Chat V3 · YouTube / Shorts cards + link composer
   ========================================================= */
.youtube-cards{display:grid;gap:8px;margin-top:7px;max-width:430px}
.youtube-card{display:grid;grid-template-columns:156px minmax(0,1fr);border:1px solid var(--line);background:var(--surface-2);border-radius:12px;overflow:hidden;min-height:92px}
.youtube-media{position:relative;display:block;width:100%;height:100%;min-height:92px;padding:0;border:0;background:#111;overflow:hidden;cursor:pointer}
.youtube-media>img{display:block;width:100%;height:100%;min-height:92px;object-fit:cover}
.youtube-play-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:28px;border-radius:8px;background:#ff0033;color:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.22);font-size:12px}
.youtube-card.playing{grid-template-columns:1fr}
.youtube-card.playing .youtube-media{aspect-ratio:16/9;min-height:0}
.youtube-card.playing.is-shorts .youtube-media{aspect-ratio:9/16;max-height:520px;width:min(290px,100%);justify-self:center}
.youtube-media iframe{display:block;width:100%;height:100%;border:0;background:#000}
.youtube-card-copy{padding:10px 11px;display:flex;flex-direction:column;min-width:0}
.youtube-card.playing .youtube-card-copy{border-top:1px solid var(--line)}
.youtube-card-label{display:flex;align-items:center;gap:5px;color:#d92739}
.youtube-card-label>span{width:7px;height:7px;border-radius:2px;background:#ff0033}
.youtube-card-label small{font-size:6.5px;font-weight:900;letter-spacing:.09em}
.youtube-card-copy>b{font-size:10px;margin-top:5px;color:var(--ink)}
.youtube-video-id{font-size:7px;color:var(--faint);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.youtube-card-actions{display:flex;gap:5px;margin-top:auto;padding-top:7px}
.youtube-card-actions button,.youtube-card-actions a{height:27px;border-radius:7px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:7px;font-weight:800;text-decoration:none;cursor:pointer;white-space:nowrap}
.youtube-play-btn{border:0;background:#ff0033;color:#fff}
.youtube-card-actions a{border:1px solid var(--line);background:var(--surface);color:var(--muted)}

.youtube-compose-overlay{position:fixed;inset:0;z-index:132;background:rgba(20,27,35,.34);backdrop-filter:blur(3px);display:grid;place-items:center;padding:18px;opacity:0;visibility:hidden;transition:.16s ease}
.youtube-compose-overlay.open{opacity:1;visibility:visible}.youtube-compose-overlay[hidden]{display:none!important}
.youtube-compose-card{width:min(430px,94vw);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 70px rgba(19,28,39,.22);overflow:hidden}
.youtube-compose-head{height:56px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.youtube-compose-head small{display:block;color:#e6213c;font-size:7px;font-weight:900;letter-spacing:.12em}.youtube-compose-head b{display:block;font-size:13px;margin-top:2px}
.youtube-compose-head button{width:32px;height:32px;border:1px solid var(--line);background:var(--surface);border-radius:8px;cursor:pointer;color:var(--muted)}
.youtube-compose-body{padding:14px}.youtube-compose-body>label{display:block;font-size:7px;font-weight:900;color:var(--faint);letter-spacing:.07em;margin-bottom:6px}
.youtube-url-box{height:42px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);display:flex;align-items:center;gap:8px;padding:0 11px;color:var(--faint)}
.youtube-url-box:focus-within{border-color:color-mix(in srgb,var(--brand) 46%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 8%,transparent)}
.youtube-url-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:9px}
.youtube-compose-preview{margin-top:11px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2);display:grid;grid-template-columns:132px 1fr;min-height:76px}
.youtube-compose-preview[hidden]{display:none!important}.youtube-compose-preview img{width:132px;height:76px;object-fit:cover;background:#111}
.youtube-compose-preview>div{padding:9px 10px;min-width:0}.youtube-compose-preview small{display:block;color:#e6213c;font-size:6px;font-weight:900;letter-spacing:.08em}.youtube-compose-preview b{display:block;font-size:9px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.youtube-compose-preview span{display:block;font-size:7px;color:var(--faint);margin-top:4px;line-height:1.45}
.youtube-compose-error{margin:8px 0 0;color:#cf3343;font-size:7.5px}.youtube-compose-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:8px;padding:0 14px 14px}
.youtube-compose-actions button{height:39px;border-radius:8px;font-size:9px;font-weight:800;cursor:pointer}.youtube-compose-actions .secondary{border:1px solid var(--line);background:var(--surface);color:var(--muted)}.youtube-compose-actions .primary{border:0;background:#ff0033;color:#fff;display:flex;align-items:center;justify-content:center;gap:6px}.youtube-compose-actions .primary:disabled{opacity:.45;cursor:not-allowed}

@media(max-width:760px){
  .youtube-cards{max-width:min(360px,100%)}
  .youtube-card{grid-template-columns:128px minmax(0,1fr)}
  .youtube-media,.youtube-media>img{min-height:82px}
  .youtube-compose-overlay{padding:9px;align-items:end}.youtube-compose-card{width:100%;border-radius:14px 14px 0 0}
}
@media(max-width:430px){
  .youtube-card{grid-template-columns:112px minmax(0,1fr)}
  .youtube-card-actions a span{display:none}
  #stickerBtn,#youtubeBtn{display:inline-grid!important}
  #voiceBtn{display:none!important}
}


/* =========================================================
   H-Chat V3 · YouTube Search V2
   ========================================================= */
.youtube-search-card{width:min(720px,96vw)}
.youtube-compose-tabs{display:flex;gap:6px;padding:10px 14px 0;border-bottom:1px solid var(--line);background:var(--surface)}
.youtube-compose-tabs button{height:34px;padding:0 13px;border:1px solid transparent;border-radius:8px 8px 0 0;background:transparent;color:var(--faint);display:inline-flex;align-items:center;gap:6px;font-size:8px;font-weight:850;cursor:pointer}
.youtube-compose-tabs button.active{color:#e6213c;background:var(--surface-2);border-color:var(--line);border-bottom-color:var(--surface-2)}
.youtube-search-pane{padding:13px 14px 14px}
.youtube-search-pane[hidden],.youtube-link-pane[hidden]{display:none!important}
.youtube-search-box{height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);display:flex;align-items:center;gap:8px;padding:0 7px 0 12px;color:var(--faint)}
.youtube-search-box:focus-within{border-color:color-mix(in srgb,#e6213c 50%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,#e6213c 8%,transparent)}
.youtube-search-box>i{font-size:14px}
.youtube-search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:10px}
.youtube-search-box button{height:32px;min-width:60px;border:0;border-radius:7px;background:#e6213c;color:#fff;font-size:8px;font-weight:900;cursor:pointer}
.youtube-search-box button:disabled{opacity:.55;cursor:wait}
.youtube-search-state{min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--faint);padding:25px 16px}
.youtube-search-state>i{width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,#e6213c 10%,var(--surface-2));color:#e6213c;display:grid;place-items:center;font-size:20px;margin-bottom:10px}
.youtube-search-state>b{color:var(--ink);font-size:11px}
.youtube-search-state>span{font-size:8px;margin-top:5px;line-height:1.5;max-width:360px}
.youtube-search-state.error>i{background:color-mix(in srgb,#d33 10%,var(--surface-2));color:#c83243}
.youtube-search-state.loading>i{animation:youtubeSearchPulse 1s ease-in-out infinite}
@keyframes youtubeSearchPulse{50%{transform:scale(.9);opacity:.65}}
.youtube-search-results{display:grid;gap:8px;margin-top:11px;max-height:min(55vh,460px);overflow:auto;padding-right:3px}
.youtube-search-result{display:grid;grid-template-columns:164px minmax(0,1fr);border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--surface-2);min-height:92px}
.youtube-search-thumb{position:relative;width:100%;min-height:92px;border:0;padding:0;background:#111;cursor:pointer;overflow:hidden}
.youtube-search-thumb img{display:block;width:100%;height:100%;min-height:92px;object-fit:cover}
.youtube-search-thumb .youtube-play-mark{width:36px;height:26px;font-size:11px}
.youtube-search-thumb>small{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.78);color:#fff;border-radius:5px;padding:3px 5px;font-size:7px;font-weight:900;letter-spacing:.02em}
.youtube-search-thumb>small.live{background:#e6213c}
.youtube-search-copy{min-width:0;padding:10px 11px;display:flex;flex-direction:column}
.youtube-search-copy>b{font-size:10px;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.youtube-search-copy>span{font-size:7.5px;color:var(--faint);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.youtube-search-copy>div{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px}
.youtube-search-send{height:30px;padding:0 10px;border:0;border-radius:7px;background:#e6213c;color:#fff;display:inline-flex;align-items:center;gap:5px;font-size:7.5px;font-weight:900;cursor:pointer}
.youtube-search-copy a{width:30px;height:30px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--muted);display:grid;place-items:center;text-decoration:none;font-size:10px}
.youtube-link-pane .youtube-compose-body{padding-top:13px}

@media(max-width:680px){
  .youtube-search-card{width:100%}
  .youtube-search-pane{padding:10px}
  .youtube-search-results{max-height:58vh}
  .youtube-search-result{grid-template-columns:128px minmax(0,1fr)}
  .youtube-search-thumb,.youtube-search-thumb img{min-height:82px}
  .youtube-search-copy{padding:8px 9px}
  .youtube-search-copy>b{font-size:9px}
  .youtube-search-send{padding:0 8px}
}
@media(max-width:430px){
  .youtube-search-result{grid-template-columns:112px minmax(0,1fr)}
  .youtube-search-send span{display:none}
  .youtube-search-send{width:32px;padding:0;justify-content:center}
  .youtube-search-state{min-height:190px}
}



/* =========================================================
   HCHAT V3 - Attachment menu + file transfer V1
   ========================================================= */
.attach-wrap{position:relative;flex:0 0 auto;display:grid;place-items:center}
.attach-menu[hidden]{display:none!important}
.attach-menu{position:absolute;left:0;bottom:calc(100% + 9px);z-index:105;width:205px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 38px rgba(22,34,48,.16);display:grid;gap:3px}
.attach-menu:after{content:"";position:absolute;left:14px;bottom:-6px;width:10px;height:10px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.attach-menu button{position:relative;z-index:1;width:100%;min-height:48px;border:0;background:transparent;border-radius:9px;padding:7px 8px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center;text-align:left;cursor:pointer;color:var(--ink)}
.attach-menu button:hover{background:var(--surface-2)}
.attach-menu button>i{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;display:grid;place-items:center;color:var(--brand);font-size:15px}
.attach-menu button span{display:block;min-width:0}.attach-menu button b,.attach-menu button small{display:block}.attach-menu button b{font-size:9px}.attach-menu button small{margin-top:2px;font-size:7px;color:var(--faint)}

.file-compose-overlay{position:fixed;inset:0;z-index:180;background:rgba(17,25,35,.48);backdrop-filter:blur(4px);display:grid;place-items:center;padding:18px;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease}
.file-compose-overlay.open{opacity:1;visibility:visible}.file-compose-overlay[hidden]{display:none!important}
.file-compose-card{width:min(465px,100%);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 70px rgba(16,24,34,.24);overflow:hidden}
.file-compose-head{height:56px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.file-compose-head small{display:block;color:var(--brand);font-size:7px;font-weight:900;letter-spacing:.12em}.file-compose-head b{display:block;font-size:13px;margin-top:2px}
.file-compose-head button{width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;color:var(--muted)}
.file-compose-preview{margin:14px 14px 0;border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:15px;display:grid;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center}
.file-compose-icon{width:54px;height:54px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--brand);font-size:23px}
.file-compose-preview>div:last-child{min-width:0}.file-compose-preview small{display:block;color:var(--brand);font-size:6.5px;font-weight:900;letter-spacing:.1em}.file-compose-preview b{display:block;margin-top:4px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-compose-preview span{display:block;margin-top:4px;font-size:8px;color:var(--faint)}
.file-compose-meta{display:grid;grid-template-columns:1.35fr .8fr .65fr;gap:8px;padding:12px 14px 0}.file-compose-meta>div{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 10px;min-width:0}.file-compose-meta small{display:block;font-size:6.5px;font-weight:900;color:var(--faint);letter-spacing:.08em}.file-compose-meta b{display:block;margin-top:3px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-compose-note{margin:10px 14px 0;color:var(--faint);font-size:8px;line-height:1.5}.file-compose-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:8px;padding:14px}.file-compose-actions button{height:39px;border-radius:8px;font-size:9px;font-weight:800;cursor:pointer}.file-compose-actions .secondary{border:1px solid var(--line);background:#fff;color:var(--muted)}.file-compose-actions .primary{border:0;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;gap:7px}.file-compose-actions .primary:disabled{opacity:.55;cursor:wait}

.message-file-card{margin-top:5px;width:min(390px,100%);border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:9px;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:9px;align-items:center}
.message-file-icon{width:46px;height:46px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;position:relative;color:var(--brand);font-size:18px}.message-file-icon span{position:absolute;right:-4px;bottom:-4px;max-width:36px;padding:2px 4px;border-radius:4px;background:var(--brand);color:#fff;font-size:5.5px;font-weight:900;letter-spacing:.04em}
.message-file-copy{min-width:0}.message-file-copy b,.message-file-copy span{display:block}.message-file-copy b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-file-copy span{margin-top:4px;font-size:7px;color:var(--faint)}
.message-file-download{height:32px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;gap:5px;color:var(--brand);font-size:7.5px;font-weight:850;cursor:pointer}.message-file-download:hover{border-color:color-mix(in srgb,var(--brand) 36%,var(--line))}.message-file-download i{font-size:12px}.file-message .message-body>p{display:none}

@media(max-width:760px){
  .attach-menu{position:fixed;left:8px;right:8px;bottom:calc(58px + var(--composer) + 7px);width:auto;border-radius:13px;padding:7px;grid-template-columns:1fr 1fr}.attach-menu:after{display:none}.attach-menu button{min-height:58px}.attach-menu button small{font-size:6.7px}
  .file-compose-overlay{padding:9px;align-items:end}.file-compose-card{width:100%;border-radius:14px 14px 0 0}.file-compose-meta{grid-template-columns:1fr 1fr}.file-compose-meta>div:last-child{grid-column:1/3}.message-file-card{width:min(330px,100%)}.message-file-download span{display:none}.message-file-download{width:34px;padding:0}
}
.voice-recording .attach-wrap{display:none!important}


/* =========================================================
   H-CHAT V3 — PM PRIVACY + POKE V1
   ========================================================= */
.profile-actions{
  grid-template-columns:1fr 1fr;
}
.profile-poke{
  border-color:color-mix(in srgb,var(--brand) 26%,var(--line));
  color:var(--brand);
  background:color-mix(in srgb,var(--brand) 5%,#fff);
}
.profile-poke:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.v3-toast.poke{
  background:#7652a8;
}
@keyframes hchatPokeShake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-5px)}
  30%{transform:translateX(5px)}
  45%{transform:translateX(-4px)}
  60%{transform:translateX(4px)}
  75%{transform:translateX(-2px)}
}
body.hchat-poked .chat{
  animation:hchatPokeShake .46s ease;
}
@media (prefers-reduced-motion:reduce){
  body.hchat-poked .chat{animation:none}
}


/* =========================================================
   H-CHAT V3 — WEBRTC AUDIO / VIDEO CALL V1
   ========================================================= */
.dm-call-head-btn{color:var(--brand)}
.profile-call-audio,.profile-call-video{
  border-color:color-mix(in srgb,var(--brand) 24%,var(--line));
  background:color-mix(in srgb,var(--brand) 4%,#fff);
  color:var(--brand);
}
.profile-call-video{color:#7c3aed}

.call-overlay{
  position:fixed;
  inset:0;
  z-index:1600;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(15,23,42,.58);
  backdrop-filter:blur(9px);
}
.call-overlay[hidden]{display:none!important}
.call-card{
  width:min(92vw,520px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:#101722;
  color:#fff;
  box-shadow:0 30px 90px rgba(2,6,23,.42);
}
.call-topbar{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.call-brand{display:grid;gap:2px}
.call-brand small{font-size:9px;letter-spacing:.11em;color:#94a3b8;font-weight:800}
.call-brand b{font-size:14px}
.call-security{display:flex;align-items:center;gap:6px;font-size:10px;color:#86efac;font-weight:800}
.call-stage{
  position:relative;
  min-height:360px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#24344a 0,#131d2b 42%,#0b111b 100%);
}
.call-remote-video{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  background:#05080d;
}
.call-local-video{
  position:absolute;
  z-index:4;
  right:14px;top:14px;
  width:116px;height:154px;
  object-fit:cover;
  border-radius:14px;
  border:2px solid rgba(255,255,255,.66);
  background:#111827;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transform:scaleX(-1);
}
.call-audio-hero{position:relative;width:150px;height:150px;display:grid;place-items:center}
.call-avatar{
  position:relative;z-index:3;
  width:106px;height:106px;border-radius:32px;
  display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,var(--brand),#64748b);
  color:#fff;font-size:34px;font-weight:900;
  border:3px solid rgba(255,255,255,.85);
  box-shadow:0 18px 44px rgba(0,0,0,.28);
}
.call-avatar img{width:100%;height:100%;object-fit:cover}
.call-audio-rings i{position:absolute;inset:22px;border:1px solid rgba(255,255,255,.24);border-radius:50%;animation:callRing 2.4s ease-out infinite}
.call-audio-rings i:nth-child(2){animation-delay:.65s}.call-audio-rings i:nth-child(3){animation-delay:1.3s}
@keyframes callRing{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.75);opacity:0}}
.call-copy{
  position:absolute;z-index:5;
  left:0;right:0;bottom:20px;
  display:grid;justify-items:center;gap:4px;
  padding:0 18px;text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.audio-call .call-copy{bottom:22px}
.call-copy h2{margin:0;font-size:22px}
.call-copy p{margin:0;color:#dbe4ef;font-size:12px;font-weight:650}
.call-copy span{font-variant-numeric:tabular-nums;color:#a7f3d0;font-size:11px;font-weight:900}
.call-incoming-actions,.call-controls,.call-outgoing-actions{
  display:flex;align-items:center;justify-content:center;gap:18px;
  min-height:86px;padding:14px 18px;background:#0d141f;
}
.call-incoming-actions[hidden],.call-controls[hidden],.call-outgoing-actions[hidden]{display:none!important}
.call-incoming-actions button,.call-controls button,.call-outgoing-actions button{
  border:0;cursor:pointer;color:#fff;min-width:78px;
  display:grid;justify-items:center;gap:7px;background:transparent;font:inherit;
}
.call-incoming-actions button i,.call-controls button i,.call-outgoing-actions button i{
  width:46px;height:46px;border-radius:16px;display:grid;place-items:center;
  font-size:17px;background:#273548;
}
.call-incoming-actions button span,.call-controls button span,.call-outgoing-actions button span{font-size:9px;font-weight:850}
.call-accept i{background:#16a34a!important}
.call-decline i,.call-controls .hangup i{background:#dc2626!important}
.call-controls button.off i{background:#f59e0b}
.call-controls .hangup{margin-left:10px}
.call-outgoing-actions .call-decline{min-width:120px}
.call-outgoing-actions .call-decline i{width:52px;height:52px;border-radius:18px}

@media(max-width:600px){
  .call-overlay{padding:0;place-items:stretch}
  .call-card{width:100%;height:100%;border-radius:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
  .call-stage{min-height:0}
  .call-local-video{width:92px;height:124px;right:12px;top:12px}
  .call-incoming-actions,.call-controls,.call-outgoing-actions{min-height:94px;padding-bottom:max(14px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.call-audio-rings i{animation:none}}

/* HChat V3 - Presence / user list filters */
.people-presence-filters{
  margin:-2px 12px 7px;
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.people-presence-filters button{
  min-height:25px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  border-radius:6px;
  padding:0 7px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:7.5px;
  font-weight:800;
  cursor:pointer;
}
.people-presence-filters button:hover,
.people-presence-filters button.active{
  color:var(--brand);
  border-color:color-mix(in srgb,var(--brand) 35%,var(--line));
  background:var(--brand-soft);
}
.presence-chip-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  display:inline-block;
  flex:0 0 auto;
  background:var(--green);
}
.presence-chip-dot.busy{background:#dc5960}
.presence-chip-dot.away{background:var(--amber)}
.person.busy .presence-dot,
.person.presence-busy .presence-dot{background:#dc5960}
.person.away .presence-dot,
.person.presence-away .presence-dot{background:var(--amber)}
.person.presence-online .presence-dot{background:var(--green)}
.profile-presence-dot.busy{background:#dc5960}
.my-avatar{position:relative;overflow:visible}
.my-avatar::after{
  content:"";
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:9px;
  height:9px;
  border-radius:50%;
  border:2px solid var(--surface,#fff);
  background:var(--green);
}
.my-avatar[data-presence="busy"]::after{background:#dc5960}
.my-avatar[data-presence="away"]::after{background:var(--amber)}

@media (max-width:760px){
  .people-presence-filters{margin-left:10px;margin-right:10px}
  .people-presence-filters button{min-height:28px;font-size:8px}
}


/* =========================================================
   H-CHAT V3 — WEBRTC CALL POLISH V2
   ========================================================= */
.call-card{width:min(94vw,680px);border-radius:20px}
.call-stage{min-height:430px;aspect-ratio:16/10}
.call-remote-video{z-index:1}
.call-audio-hero{z-index:2}
.video-call.remote-video-live .call-audio-hero{display:none!important}
.video-call.remote-video-off .call-audio-hero{display:grid!important}
.video-call.remote-video-off .call-remote-video{display:none!important}
.video-call.remote-video-off .call-audio-hero .call-audio-rings{display:none}
.video-call.remote-video-off .call-avatar{width:112px;height:112px;border-radius:34px}
.call-local-video{z-index:7;right:16px;top:16px;width:132px;height:176px;border-radius:16px;border:2px solid rgba(255,255,255,.88)}
.call-copy{z-index:6;left:16px;right:auto;bottom:16px;justify-items:start;text-align:left;padding:9px 12px;border-radius:12px;background:rgba(5,10,18,.48);backdrop-filter:blur(8px);text-shadow:none;gap:2px}
.audio-call .call-copy{left:50%;right:auto;bottom:22px;transform:translateX(-50%);justify-items:center;text-align:center;background:rgba(5,10,18,.28)}
.call-copy h2{font-size:18px}
.call-copy p{font-size:10px;color:#e6edf7}
.call-copy span{font-size:10px}
.call-overlay.connected.video-call .call-copy p{display:none}
.call-controls .hangup i{border-radius:50%;font-size:19px}
.call-controls .hangup{margin-left:14px}
.call-controls .hangup i::before{transform:rotate(0deg)}
.call-overlay.local-video-off .call-local-video{display:none!important}
.call-security{white-space:nowrap}
@media(max-width:600px){
  .call-card{width:100%;height:100%;border-radius:0}
  .call-stage{aspect-ratio:auto;min-height:0}
  .call-local-video{width:96px;height:128px;right:12px;top:12px;border-radius:13px}
  .call-copy{left:12px;bottom:12px}
  .audio-call .call-copy{left:50%;bottom:24px}
}


/* =========================================================
   SOHBERA BRAND IDENTITY V1
   ========================================================= */
:root{
  --sohbera-navy:#0A2E6D;
  --sohbera-navy-deep:#061F4D;
  --sohbera-teal:#18C7BE;
  --sohbera-teal-soft:#E8F7F6;
}
.sohbera-rail-logo{
  width:40px;
  height:40px;
  display:block;
  object-fit:contain;
}
.workspace-head small{
  color:var(--sohbera-navy);
  letter-spacing:.15em;
}
.workspace-head strong{
  font-size:11.5px;
  letter-spacing:-.01em;
}
.sohbera-login-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-align:center;
  padding-bottom:17px;
}
.sohbera-login-logo{
  display:block;
  width:min(235px,78%);
  height:auto;
  object-fit:contain;
}
.sohbera-login-brand>small{
  margin:0;
  color:var(--muted);
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.login-card{
  border-top:3px solid var(--sohbera-teal);
}
.login-submit{
  background:var(--sohbera-navy);
}
.login-submit:hover{
  background:var(--sohbera-navy-deep);
}
html[data-theme="dark"] .sohbera-login-logo{
  background:#fff;
  border-radius:10px;
  padding:7px 11px;
}
.call-security{
  color:var(--sohbera-teal);
}


/* =========================================================
   SOHBERA BRAND SPLASH / LOADING V1
   ========================================================= */
.sohbera-splash{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 44%, rgba(24,199,190,.07), transparent 31%),
    #f7fafc;
  opacity:1;
  visibility:visible;
  transition:opacity .38s ease, visibility .38s ease;
}
.sohbera-splash.is-leaving{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.sohbera-splash-inner{
  width:min(360px, calc(100vw - 48px));
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transform:translateY(-2vh);
}
.sohbera-splash-logo{
  width:min(280px, 76vw);
  height:auto;
  display:block;
  object-fit:contain;
  animation:sohberaSplashIn .58s cubic-bezier(.2,.8,.2,1) both;
}
.sohbera-splash-text{
  margin:26px 0 12px;
  min-height:20px;
  color:#334155;
  font-size:13px;
  font-weight:650;
  letter-spacing:.01em;
}
.sohbera-splash-track{
  width:min(250px, 68vw);
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:#e3eaf1;
  box-shadow:inset 0 0 0 1px rgba(10,46,109,.02);
}
.sohbera-splash-track span{
  display:block;
  width:24%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#0a2e6d 0%,#18c7be 100%);
  transition:width .42s cubic-bezier(.2,.8,.2,1);
}
.sohbera-splash-inner > small{
  margin-top:14px;
  color:#94a3b8;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
@keyframes sohberaSplashIn{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media (max-width:600px){
  .sohbera-splash-inner{width:min(310px,calc(100vw - 38px))}
  .sohbera-splash-logo{width:min(240px,72vw)}
  .sohbera-splash-text{margin-top:22px}
}
@media (prefers-reduced-motion:reduce){
  .sohbera-splash,
  .sohbera-splash-logo,
  .sohbera-splash-track span{animation:none;transition:none}
}


/* =========================================================
   SOHBERA — PROFIL & SOSYAL V1
   ========================================================= */
.profile-cover{
  position:relative;
  height:116px;
  margin:-16px -15px 14px;
  overflow:hidden;
  background:linear-gradient(135deg,#0a2e6d 0%,#0e4f83 58%,#18c7be 145%);
  border-bottom:1px solid color-mix(in srgb,var(--brand) 18%,var(--line));
}
.profile-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.profile-cover-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:15px;color:#fff;z-index:1}
.profile-cover-placeholder span{font-size:13px;font-weight:950;letter-spacing:.08em}
.profile-cover-placeholder small{margin-top:2px;font-size:7px;opacity:.7;font-weight:700}
.profile-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,15,37,.04),rgba(3,15,37,.36));pointer-events:none;z-index:2}
.profile-cover-tools{position:absolute;right:9px;bottom:9px;display:flex;gap:5px;z-index:3}
.profile-cover-tools button{height:30px;border:1px solid rgba(255,255,255,.42);background:rgba(7,25,54,.66);backdrop-filter:blur(8px);color:#fff;border-radius:7px;padding:0 9px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:7.5px;font-weight:850;cursor:pointer}
.profile-cover-tools button:last-child{width:30px;padding:0}
.profile-cover-status{position:absolute;left:9px;top:9px;z-index:3;min-height:23px;padding:0 8px;border-radius:6px;background:rgba(7,25,54,.72);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;font-size:6.8px;font-weight:850}
.profile-cover-status[hidden],.profile-cover-tools[hidden],.profile-cover-placeholder[hidden]{display:none!important}
.profile-cover + .profile-hero{margin-top:-2px}

.profile-social-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 12px}
.profile-social-stat{min-width:0;min-height:54px;border:1px solid var(--line-2);background:#fbfcfd;border-radius:9px;padding:8px;display:grid;grid-template-columns:25px minmax(0,1fr);gap:7px;align-items:center;color:#3a4655;text-align:left}
button.profile-social-stat{cursor:pointer;font:inherit}
button.profile-social-stat:not(:disabled):hover{border-color:color-mix(in srgb,var(--brand) 34%,var(--line));background:color-mix(in srgb,var(--brand) 3%,#fff)}
.profile-social-stat>i{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;background:#eef3f7;color:var(--brand);font-size:12px}
.profile-social-stat span,.profile-social-stat b,.profile-social-stat small{display:block;min-width:0}
.profile-social-stat b{font-size:11px;font-weight:900;color:#283647}
.profile-social-stat small{margin-top:1px;font-size:6.5px;color:var(--faint);font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-like-stat.liked{border-color:#f2cbd7;background:#fff8fa}
.profile-like-stat.liked>i{background:#ffe7ef;color:#d93d6a}
.profile-like-stat:disabled{cursor:default;opacity:.78}

.profile-visitors{margin-top:14px}
.profile-visitor-list{display:grid;gap:5px}
.profile-visitor-list>em{display:block;padding:10px;border:1px dashed var(--line);border-radius:8px;color:var(--faint);font-size:8px;font-style:normal;text-align:center}
.profile-visitor{width:100%;min-height:44px;border:1px solid var(--line-2);background:#fbfcfd;border-radius:9px;padding:5px 7px;display:grid;grid-template-columns:31px minmax(0,1fr);gap:8px;align-items:center;text-align:left;cursor:pointer;color:var(--ink)}
.profile-visitor:hover{background:#f5f8fa;border-color:color-mix(in srgb,var(--brand) 24%,var(--line))}
.profile-visitor .avatar{width:31px;height:31px;border-radius:9px;font-size:9px;overflow:hidden}
.profile-visitor .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile-visitor b,.profile-visitor small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-visitor b{font-size:8.5px}
.profile-visitor small{margin-top:2px;color:var(--faint);font-size:6.5px}
.profile-visitors-note{display:block;margin-top:6px;color:var(--faint);font-size:6.5px;line-height:1.45}

@media(max-width:760px){
  .profile-cover{height:108px;margin:-13px -13px 13px}
  .profile-cover-tools button span{display:none}
  .profile-cover-tools button:first-child{width:30px;padding:0}
  .profile-social-strip{gap:5px}
  .profile-social-stat{grid-template-columns:22px minmax(0,1fr);gap:5px;padding:7px 5px}
  .profile-social-stat>i{width:22px;height:22px;font-size:10px}
  .profile-social-stat b{font-size:10px}
  .profile-social-stat small{font-size:5.8px}
}


/* =========================================================
   SOHBERA AVATAR SYSTEM V1
   ========================================================= */
.my-avatar[role="button"]{cursor:pointer;outline:none}
.my-avatar[role="button"]:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 24%,transparent)}
.message .avatar,.dm .avatar{overflow:hidden}
.message .avatar img,.dm .avatar img,.settings-avatar-preview img,.avatar-manager-current-preview img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.profile-avatar-edit{position:absolute;right:-4px;bottom:-4px;width:28px;height:28px;border-radius:9px;border:2px solid var(--surface,#fff);background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:4;box-shadow:0 5px 14px rgba(15,47,134,.18)}
.profile-avatar-edit[hidden]{display:none!important}.profile-avatar-edit i{font-size:11px}

.avatar-settings-card{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:11px;align-items:center;padding:11px;border:1px solid var(--line);background:var(--surface-2);border-radius:12px}
.settings-avatar-preview{width:52px;height:52px;border-radius:15px;background:linear-gradient(145deg,var(--brand),#18c7be);color:#fff;display:grid;place-items:center;font-size:17px;font-weight:900;overflow:hidden;border:2px solid #fff;box-shadow:0 4px 14px rgba(15,47,134,.12)}
.avatar-settings-copy{min-width:0}.avatar-settings-copy b{display:block;font-size:10px}.avatar-settings-copy small{display:block;margin-top:3px;color:var(--muted);font-size:7.5px;line-height:1.45}
#avatarManageBtn{height:34px;padding:0 11px;border:0;border-radius:9px;background:var(--brand);color:#fff;font-size:8px;font-weight:850;display:flex;gap:6px;align-items:center;cursor:pointer}

.avatar-manager-overlay{position:fixed;inset:0;z-index:220;background:rgba(15,23,42,.52);backdrop-filter:blur(5px);display:grid;place-items:center;padding:18px;opacity:0;visibility:hidden;transition:.16s ease}
.avatar-manager-overlay.open{opacity:1;visibility:visible}.avatar-manager-overlay[hidden]{display:none!important}
.avatar-manager-card{width:min(620px,calc(100vw - 28px));max-height:min(90dvh,760px);overflow:auto;background:var(--surface,#fff);border:1px solid var(--line);border-radius:18px;box-shadow:0 26px 80px rgba(2,8,23,.24)}
.avatar-manager-head{height:62px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface,#fff);z-index:5}
.avatar-manager-head small{display:block;color:var(--brand);font-size:7px;font-weight:900;letter-spacing:.13em}.avatar-manager-head b{display:block;margin-top:2px;font-size:14px}.avatar-manager-head button{width:34px;height:34px;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;color:var(--muted);cursor:pointer}
.avatar-manager-current{display:grid;grid-template-columns:64px minmax(0,1fr);gap:13px;align-items:center;margin:16px 16px 12px;padding:12px;border:1px solid var(--line);background:var(--surface-2);border-radius:14px}
.avatar-manager-current-preview{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,var(--brand),#18c7be);color:#fff;font-size:20px;font-weight:900;overflow:hidden;border:2px solid #fff;box-shadow:0 5px 18px rgba(15,47,134,.12)}
.avatar-manager-current small{display:block;color:var(--faint);font-size:6.5px;font-weight:900;letter-spacing:.1em}.avatar-manager-current b{display:block;font-size:12px;margin:3px 0}.avatar-manager-current span{display:block;font-size:8px;color:var(--muted);line-height:1.45}.avatar-manager-current span.pending{color:#a56b00}.avatar-manager-current span.locked{color:#9a3c49}
.avatar-manager-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 16px 12px}.avatar-manager-tabs button{height:38px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);border-radius:10px;font-size:8.5px;font-weight:850;cursor:pointer;display:flex;gap:7px;align-items:center;justify-content:center}.avatar-manager-tabs button.active{background:color-mix(in srgb,var(--brand) 9%,#fff);border-color:color-mix(in srgb,var(--brand) 28%,var(--line));color:var(--brand)}
.avatar-manager-pane{padding:0 16px 14px}.avatar-manager-pane[hidden]{display:none!important}
.avatar-crop-stage{width:min(360px,100%);aspect-ratio:1;margin:0 auto;border:1px solid var(--line);border-radius:18px;background:linear-gradient(45deg,#edf1f4 25%,transparent 25%),linear-gradient(-45deg,#edf1f4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#edf1f4 75%),linear-gradient(-45deg,transparent 75%,#edf1f4 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;position:relative;overflow:hidden;touch-action:none}
.avatar-crop-stage canvas{width:100%;height:100%;display:block;cursor:grab}.avatar-crop-stage canvas.dragging{cursor:grabbing}.avatar-crop-stage canvas[hidden]{display:none!important}
.avatar-crop-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px;background:rgba(255,255,255,.92)}.avatar-crop-empty i{width:52px;height:52px;border-radius:16px;background:color-mix(in srgb,var(--brand) 10%,#fff);color:var(--brand);display:grid;place-items:center;font-size:20px}.avatar-crop-empty b{margin-top:12px;font-size:11px}.avatar-crop-empty span{margin-top:4px;font-size:7.5px;color:var(--muted)}.avatar-crop-empty button{margin-top:14px;height:36px;padding:0 14px;border:0;border-radius:9px;background:var(--brand);color:#fff;font-size:8px;font-weight:850;display:flex;gap:7px;align-items:center;cursor:pointer}
.avatar-crop-ring{position:absolute;inset:8%;border:2px solid rgba(255,255,255,.92);border-radius:50%;box-shadow:0 0 0 999px rgba(11,22,36,.20),0 0 0 1px rgba(15,47,134,.15);pointer-events:none}
.avatar-crop-controls{width:min(440px,100%);margin:12px auto 0}.avatar-zoom-row{display:grid;grid-template-columns:20px minmax(0,1fr) 20px;gap:8px;align-items:center;color:var(--muted)}.avatar-zoom-row input{width:100%;accent-color:var(--brand)}.avatar-crop-buttons{display:flex;gap:7px;margin-top:9px}.avatar-crop-buttons button{flex:1;height:34px;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;color:var(--muted);font-size:8px;font-weight:800;display:flex;gap:6px;align-items:center;justify-content:center;cursor:pointer}.avatar-crop-controls p{margin:9px 2px 0;color:var(--faint);font-size:7.2px;line-height:1.5}
.avatar-preset-note{margin:0 0 10px;color:var(--muted);font-size:7.5px;line-height:1.5}.avatar-preset-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;max-height:335px;overflow:auto;padding:2px}.avatar-preset{aspect-ratio:1;border:2px solid transparent;background:var(--surface-2);border-radius:15px;padding:0;overflow:hidden;cursor:pointer;position:relative}.avatar-preset:hover{border-color:color-mix(in srgb,var(--brand) 40%,transparent)}.avatar-preset.active{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 14%,transparent)}.avatar-preset img{width:100%;height:100%;object-fit:cover;display:block}.avatar-preset em{position:absolute;right:4px;bottom:4px;width:17px;height:17px;border-radius:50%;background:var(--brand);color:#fff;display:none;place-items:center;font-style:normal;font-size:8px}.avatar-preset.active em{display:grid}
.avatar-manager-actions{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;padding:13px 16px 16px;border-top:1px solid var(--line)}.avatar-manager-actions button{height:38px;border-radius:10px;padding:0 13px;font-size:8.5px;font-weight:850;cursor:pointer;display:flex;gap:7px;align-items:center;justify-content:center}.avatar-manager-actions .danger{border:1px solid #efc9cf;background:#fff5f6;color:#a33f50}.avatar-manager-actions .secondary{border:1px solid var(--line);background:var(--surface-2);color:var(--muted)}.avatar-manager-actions .primary{border:0;background:var(--brand);color:#fff;min-width:126px}.avatar-manager-actions .primary:disabled,.avatar-manager-actions button:disabled{opacity:.48;cursor:not-allowed}
@media(max-width:760px){.avatar-manager-overlay{padding:0;align-items:end}.avatar-manager-card{width:100%;max-height:94dvh;border-radius:18px 18px 0 0}.avatar-manager-current{margin-top:12px}.avatar-crop-stage{width:min(320px,calc(100vw - 34px))}.avatar-preset-grid{grid-template-columns:repeat(5,1fr)}.avatar-manager-actions{grid-template-columns:auto 1fr auto}.avatar-manager-actions>span{display:none}.avatar-manager-actions .secondary{display:none}.avatar-manager-actions .primary{min-width:120px}.avatar-settings-card{grid-template-columns:48px minmax(0,1fr) auto}.settings-avatar-preview{width:48px;height:48px}.profile-avatar-edit{width:26px;height:26px}}


/* =========================================================
   SOHBERA FRIENDS V1
   ========================================================= */
.rail-badge{position:absolute;right:-6px;top:-5px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:#e5484d;color:#fff;border:2px solid var(--surface,#fff);font-size:6.5px;font-style:normal;font-weight:900;display:grid;place-items:center;line-height:1}
.rail-badge[hidden]{display:none!important}.rail-btn .nav-icon{position:relative}
.friends-section{display:none}.workspace[data-view="friends"] #storiesSection,.workspace[data-view="friends"] #channelsSection,.workspace[data-view="friends"] #dmSection{display:none}.workspace[data-view="friends"] #friendsSection{display:block;padding-top:4px}.workspace:not([data-view="friends"]) #friendsSection{display:none}
.friends-title button{border:0;background:transparent;color:var(--muted);cursor:pointer}.friends-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:5px 10px 11px}.friends-summary>span{padding:8px 5px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2,#f8fafc);text-align:center}.friends-summary b,.friends-summary small{display:block}.friends-summary b{font-size:11px;color:var(--ink)}.friends-summary small{margin-top:2px;font-size:6px;color:var(--faint);font-weight:800}
.friend-block{padding:0 8px 10px}.friend-block[hidden]{display:none!important}.friend-block-title{padding:8px 3px 5px;color:var(--faint);font-size:6.8px;font-weight:900;letter-spacing:.08em}.friend-list{display:grid;gap:4px}.friend-list>em{padding:10px;border:1px dashed var(--line);border-radius:8px;text-align:center;color:var(--faint);font-size:7px;font-style:normal}.friend-row{min-height:48px;padding:6px;border:1px solid transparent;border-radius:9px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:7px;align-items:center;cursor:pointer}.friend-row:hover{background:var(--surface-2,#f7f9fb);border-color:var(--line)}.friend-avatar{position:relative;width:34px;height:34px;border-radius:10px;overflow:visible;background:linear-gradient(145deg,var(--brand),#18c7be);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:900}.friend-avatar>img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}.friend-dot{position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;border:2px solid var(--surface,#fff);background:#aab3bf}.friend-dot.online{background:#22b573}.friend-dot.busy{background:#e05d61}.friend-dot.away{background:#e0a331}.friend-copy{min-width:0}.friend-copy b,.friend-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friend-copy b{font-size:8.5px}.friend-copy small{margin-top:2px;color:var(--faint);font-size:6.5px}.friend-actions{display:flex;gap:3px}.friend-actions button{width:27px;height:27px;border:1px solid var(--line);border-radius:7px;background:var(--surface,#fff);color:var(--muted);display:grid;place-items:center;cursor:pointer}.friend-actions button:hover{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 28%,var(--line))}.friend-actions button i{font-size:10px}
.profile-friend.is-friend{border-color:color-mix(in srgb,#22b573 35%,var(--line));background:color-mix(in srgb,#22b573 7%,#fff);color:#17844f}.profile-friend[data-friend-state="incoming"]{border-color:color-mix(in srgb,var(--brand) 35%,var(--line));background:var(--brand-soft);color:var(--brand)}.profile-friend[data-friend-state="outgoing"]{opacity:.8}
.settings-toggle-row:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:760px){.friends-summary{padding-left:7px;padding-right:7px}.friend-block{padding-left:6px;padding-right:6px}}

@media(max-width:760px){.mobile-tabs button>span>i{position:static!important;min-width:0!important;height:auto!important;border-radius:0!important;background:transparent!important;color:inherit!important;font-size:17px!important;display:inline!important}.mobile-tabs button>i{position:absolute;top:7px;right:18%;min-width:14px;height:14px;border-radius:50%;background:var(--red);color:#fff;font-style:normal;font-size:7px;display:grid;place-items:center}}

/* =========================================================
   SOHBERA Story Privacy V1
   ========================================================= */
html.story-privacy-open,
html.story-privacy-open body{
  overflow:hidden;
}
.story-privacy-overlay{
  position:fixed;
  inset:0;
  z-index:2147482500;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(15,23,42,.38);
  backdrop-filter:blur(5px);
}
.story-privacy-overlay[hidden]{display:none!important}
.story-privacy-card{
  width:min(520px,100%);
  max-height:min(760px,calc(100vh - 36px));
  overflow:auto;
  background:var(--surface,#fff);
  border:1px solid var(--line,#e5e7eb);
  border-radius:20px;
  box-shadow:0 28px 80px rgba(15,23,42,.22);
}
.story-privacy-card>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 20px 12px;
}
.story-privacy-card>header small{
  display:block;
  margin-bottom:3px;
  color:var(--brand-secondary,#18c7be);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}
.story-privacy-card>header h3{
  margin:0;
  color:var(--text,#172033);
  font-size:19px;
}
.story-privacy-close{
  width:36px;
  height:36px;
  border:0;
  border-radius:10px;
  background:var(--surface-2,#f3f5f8);
  color:var(--text,#172033);
  cursor:pointer;
}
.story-privacy-options{
  display:grid;
  gap:8px;
  padding:4px 16px 12px;
}
.story-privacy-options>button{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 22px;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px;
  border:1px solid var(--line,#e5e7eb);
  border-radius:14px;
  background:var(--surface,#fff);
  color:var(--text,#172033);
  text-align:left;
  cursor:pointer;
  transition:.16s ease;
}
.story-privacy-options>button:hover{
  border-color:rgba(24,199,190,.48);
  background:rgba(24,199,190,.045);
}
.story-privacy-options>button.active{
  border-color:var(--brand-secondary,#18c7be);
  background:rgba(24,199,190,.08);
  box-shadow:0 0 0 2px rgba(24,199,190,.08);
}
.story-privacy-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(10,46,109,.08);
  color:var(--brand-primary,#0a2e6d);
  font-size:18px;
}
.story-privacy-options>button.active .story-privacy-icon{
  background:var(--brand-primary,#0a2e6d);
  color:#fff;
}
.story-privacy-options>button>span:nth-child(2){min-width:0}
.story-privacy-options b,
.story-privacy-options small{display:block}
.story-privacy-options b{font-size:14px}
.story-privacy-options small{
  margin-top:3px;
  color:var(--muted,#6b7280);
  font-size:11px;
  line-height:1.35;
}
.story-privacy-options>button>i{
  color:var(--muted,#9ca3af);
  font-size:16px;
}
.story-selected-wrap{
  margin:0 16px 12px;
  padding:12px;
  border:1px solid var(--line,#e5e7eb);
  border-radius:14px;
  background:var(--surface-2,#f7f9fb);
}
.story-selected-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.story-selected-head b{font-size:13px}
.story-selected-head small{color:var(--muted,#6b7280);font-size:11px}
.story-selected-search{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
  border:1px solid var(--line,#e5e7eb);
  border-radius:10px;
  background:var(--surface,#fff);
}
.story-selected-search i{color:var(--muted,#94a3b8)}
.story-selected-search input{
  width:100%;
  min-height:38px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text,#172033);
}
.story-selected-list{
  display:grid;
  gap:5px;
  max-height:230px;
  overflow:auto;
  margin-top:9px;
}
.story-person-row{
  display:grid;
  grid-template-columns:18px 34px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:7px 8px;
  border-radius:10px;
  cursor:pointer;
}
.story-person-row:hover{background:rgba(10,46,109,.05)}
.story-person-row input{accent-color:var(--brand-secondary,#18c7be)}
.story-person-avatar{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--brand-primary,#0a2e6d);
  color:#fff;
  font-size:12px;
  font-weight:800;
}
.story-person-row b,.story-person-row small{display:block}
.story-person-row b{font-size:12px}
.story-person-row small{margin-top:2px;color:var(--muted,#6b7280);font-size:10px}
.story-selected-empty{
  padding:20px 10px;
  color:var(--muted,#6b7280);
  text-align:center;
  font-size:12px;
}
.story-privacy-card>footer{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:12px 16px 16px;
  border-top:1px solid var(--line,#e5e7eb);
}
.story-privacy-card>footer button{
  min-height:39px;
  padding:0 15px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}
.story-privacy-cancel{
  border:1px solid var(--line,#e5e7eb);
  background:var(--surface,#fff);
  color:var(--text,#172033);
}
.story-privacy-share{
  border:0;
  background:var(--brand-primary,#0a2e6d);
  color:#fff;
}
.story-privacy-share i{margin-right:6px}
.story-viewer-user small{
  display:flex;
  align-items:center;
  gap:7px;
}
.story-privacy-badge{
  display:inline-flex;
  align-items:center;
  min-height:18px;
  padding:1px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.88);
  font-size:9px;
  font-weight:700;
  white-space:nowrap;
}
.story-privacy-badge[data-privacy="friends"]{background:rgba(24,199,190,.22);color:#bafbf6}
.story-privacy-badge[data-privacy="selected"]{background:rgba(99,102,241,.24);color:#dfe2ff}
@media (max-width:600px){
  .story-privacy-overlay{padding:10px;align-items:end}
  .story-privacy-card{
    width:100%;
    max-height:88vh;
    border-radius:18px 18px 12px 12px;
  }
}


/* =========================================================
   SOHBERA BILDIRIM MERKEZI V1
   ========================================================= */
.notification-btn{position:relative;display:inline-grid;place-items:center}
.notification-badge{position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;border:2px solid var(--surface);font-size:8px;line-height:14px;text-align:center;font-weight:900}
.notification-center{position:fixed;z-index:120;top:calc(var(--top) + 8px);right:calc(var(--people) + 14px);width:min(390px,calc(100vw - 30px));max-height:min(680px,calc(100dvh - var(--top) - 24px));background:var(--surface);border:1px solid var(--line);box-shadow:0 22px 55px rgba(18,31,48,.18);border-radius:14px;overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
.notification-center[hidden]{display:none!important}
.notification-center-head{min-height:62px;display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 15px;border-bottom:1px solid var(--line-2);background:var(--surface)}
.notification-center-head small{display:block;color:var(--brand);font-size:7px;font-weight:900;letter-spacing:.14em}
.notification-center-head strong{display:block;margin-top:2px;font-size:14px}
.notification-center-actions{display:flex;gap:6px}.notification-center-actions button{width:32px;height:32px;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.notification-filter{display:flex;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.notification-filter button{height:29px;padding:0 10px;border:1px solid transparent;background:transparent;border-radius:7px;color:var(--muted);font-size:9px;font-weight:800;cursor:pointer}.notification-filter button.active{background:var(--surface);border-color:var(--line);color:var(--brand)}.notification-filter b{font-size:8px;background:var(--brand-soft);color:var(--brand);padding:2px 5px;border-radius:9px;margin-left:3px}
.notification-list{overflow:auto;min-height:120px;background:var(--surface)}
.notification-item{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;padding:12px 12px;border-bottom:1px solid var(--line-2);cursor:pointer;transition:background .15s ease}.notification-item:hover{background:var(--surface-2)}.notification-item.unread{background:color-mix(in srgb,var(--brand-soft) 48%,var(--surface))}.notification-item.unread:before{content:"";position:absolute;left:4px;top:20px;width:5px;height:5px;border-radius:50%;background:var(--brand)}
.notification-item-icon{width:38px;height:38px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:16px}.notification-item-icon.like{background:#fff0f3;color:#d94b69}.notification-item-icon.visit{background:#eef5ff;color:#4778bd}.notification-item-icon.friend{background:#eefaf6;color:#24865e}.notification-item-icon.admin{background:#fff7e8;color:#b47716}.notification-item-icon.reject{background:#fff0f0;color:var(--red)}
.notification-item-copy{min-width:0}.notification-item-copy strong{display:block;font-size:10.5px;line-height:1.3}.notification-item-copy p{margin:3px 0 0;color:var(--muted);font-size:9px;line-height:1.4;word-break:break-word}.notification-item-copy time{display:block;margin-top:5px;color:var(--faint);font-size:7.5px}.notification-item-chevron{align-self:center;color:var(--faint);font-size:12px}
.notification-empty{min-height:170px;display:grid;place-items:center;text-align:center;color:var(--faint);font-size:9px;padding:28px}.notification-empty i{display:block;font-size:25px;color:var(--line);margin-bottom:8px}
.notification-center-foot{min-height:48px;padding:8px 11px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line-2);background:var(--surface-2)}.notification-center-foot span{font-size:7.5px;color:var(--faint);line-height:1.35}.notification-center-foot button{flex:0 0 auto;border:0;background:transparent;color:var(--muted);font-size:8px;font-weight:800;cursor:pointer}.notification-center-foot button i{margin-right:3px}
@media(max-width:1180px){.notification-center{right:14px}}
.app.people-collapsed .notification-center{right:14px}
@media(max-width:760px){.head-actions>.notification-btn{display:inline-grid!important}.notification-center{top:62px;right:7px;left:7px;width:auto;max-height:calc(100dvh - 126px);border-radius:12px}.notification-center-head{min-height:56px}.notification-item{padding:11px 10px}.notification-center-foot span{display:none}.notification-center-foot{justify-content:flex-end}}


/* =========================================================
   SOHBERA GROUP PRIVATE CHAT V1
   ========================================================= */
.groups-section{display:none}
.workspace[data-view="groups"] #storiesSection,
.workspace[data-view="groups"] #channelsSection,
.workspace[data-view="groups"] #dmSection,
.workspace[data-view="groups"] #friendsSection{display:none!important}
.workspace[data-view="groups"] #groupsSection{display:block;padding-top:4px}
.workspace:not([data-view="groups"]) #groupsSection{display:none}
.groups-list>.group-empty{display:block;padding:24px 14px;text-align:center;color:var(--muted);font-size:12px}
.group-room .room-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.group-room-avatar{overflow:hidden;border-radius:14px}
.group-room-avatar img,.group-avatar-preview img,.head-group-avatar{width:100%;height:100%;object-fit:cover;display:block}
.group-avatar-initial{width:100%;height:100%;display:grid;place-items:center;font-weight:850;background:linear-gradient(135deg,var(--brand),var(--brand-2,#18c7be));color:#fff}
.head-group-avatar{border-radius:10px}

.group-overlay{
  position:fixed;
  inset:0;
  z-index:230;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(12,24,45,.48);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  box-sizing:border-box;
}
.group-overlay[hidden]{display:none!important}
.group-overlay.open{display:flex!important}
.group-modal{width:min(520px,calc(100vw - 28px));max-height:min(760px,calc(100vh - 32px));overflow:auto;background:var(--panel,#fff);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 70px rgba(16,35,68,.24)}
.group-create-body{padding:18px;display:grid;gap:16px}
.group-avatar-editor{display:flex;align-items:center;gap:12px}
.group-avatar-preview{width:76px;height:76px;border-radius:22px;border:1px solid var(--line);background:var(--soft,#f4f7fb);display:grid;place-items:center;overflow:hidden;color:var(--brand);font-size:28px;flex:0 0 auto}
.group-info-hero{display:flex;align-items:center;gap:14px;padding:18px;border-bottom:1px solid var(--line)}
.group-info-hero .group-avatar-preview{width:70px;height:70px}
.group-info-hero>div{display:flex;flex-direction:column;gap:4px}.group-info-hero b{font-size:18px}.group-info-hero span{font-size:12px;color:var(--muted)}
.group-member-picker{display:grid;gap:10px}.group-member-picker-head{display:flex;justify-content:space-between;align-items:center}.group-member-picker-head small{color:var(--muted)}
.group-search{width:100%;height:40px;border:1px solid var(--line);border-radius:12px;background:var(--soft,#f6f8fb);padding:0 12px;color:var(--text)}
.group-friend-picker{display:grid;gap:7px;max-height:260px;overflow:auto;padding-right:3px}
.group-friend-option{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel,#fff);padding:8px;border-radius:13px;text-align:left;color:var(--text)}
.group-friend-option.selected{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 12%,transparent)}
.group-friend-option .avatar{width:38px;height:38px}.group-friend-option>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.group-friend-option small{font-size:10px;color:var(--muted)}
.group-owner-tools{padding:16px 18px;border-bottom:1px solid var(--line);display:grid;gap:12px}.inline-field{display:grid;grid-template-columns:1fr auto;gap:8px}.inline-field button,.group-add-member button{border:0;border-radius:11px;background:var(--brand);color:#fff;padding:0 14px;font-weight:700}
.group-add-member{display:grid;grid-template-columns:1fr auto;gap:8px}.group-add-member select{height:40px;border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:0 10px;color:var(--text)}
.group-members-head{padding:14px 18px 8px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.group-members-head b{color:var(--text)}
.group-members{padding:0 18px 16px;display:grid;gap:7px;max-height:300px;overflow:auto}.group-member-row{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:8px;border-radius:13px;background:var(--soft,#f6f8fb)}.group-member-row .avatar{width:38px;height:38px}.group-member-copy{display:flex;flex-direction:column;min-width:0}.group-member-copy b{font-size:12px}.group-member-copy b i{font-size:8px;font-style:normal;padding:2px 5px;border-radius:6px;background:var(--brand);color:#fff;margin-left:5px}.group-member-copy small{font-size:10px;color:var(--muted)}.group-member-row>button{border:0;background:transparent;color:var(--red);width:34px;height:34px}
.split-actions{justify-content:space-between}.danger-soft,.danger-btn{border-radius:11px;padding:10px 13px;font-weight:750}.danger-soft{border:1px solid color-mix(in srgb,var(--red) 30%,var(--line));background:transparent;color:var(--red)}.danger-btn{border:0;background:var(--red);color:#fff}

@media(max-width:760px){
  .group-modal{width:calc(100vw - 16px);max-height:calc(100vh - 78px);border-radius:18px}
  .mobile-tabs button small{font-size:7px}
  .group-room .room-copy small{max-width:220px}
}

/* =========================================================
   SOHBERA GROUP MODAL UI FIX V1
   ========================================================= */
.group-modal{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
}
.group-modal .modal-head{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  background:var(--panel,#fff);
}
.group-modal .modal-head>div{min-width:0}
.group-modal .modal-head small{
  display:block;
  margin:0 0 3px;
  color:var(--brand);
  font-size:8px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.14em;
}
.group-modal .modal-head h2{
  margin:0;
  color:var(--text);
  font-size:20px;
  line-height:1.2;
  font-weight:820;
}
.group-modal .modal-head>button{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--soft,#f6f8fb);
  color:var(--muted);
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:15px;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.group-modal .modal-head>button:hover{
  color:var(--text);
  background:var(--panel,#fff);
  border-color:color-mix(in srgb,var(--brand) 30%,var(--line));
}
.group-modal .group-create-body{
  min-height:0;
  overflow:hidden;
  grid-template-rows:auto auto minmax(0,1fr);
}
.group-modal .group-member-picker{
  min-height:0;
  grid-template-rows:auto auto minmax(100px,1fr);
}
.group-modal .group-friend-picker{
  min-height:0;
  max-height:none;
  overflow:auto;
  padding:1px 4px 2px 1px;
  scrollbar-gutter:stable;
}
.group-modal .field{
  display:grid;
  gap:7px;
}
.group-modal .field>span{
  color:var(--text);
  font-size:10px;
  font-weight:800;
}
.group-modal .field>input,
.group-modal .inline-field>input{
  width:100%;
  height:42px;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel,#fff);
  color:var(--text);
  padding:0 12px;
  outline:none;
  font:inherit;
}
.group-modal .field>input:focus,
.group-modal .inline-field>input:focus,
.group-modal .group-search:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 13%,transparent);
}
.group-modal .soft-btn,
.group-modal .primary-btn{
  min-height:40px;
  border-radius:11px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  cursor:pointer;
  font:inherit;
  font-size:11px;
  font-weight:800;
  transition:transform .12s ease,background .15s ease,border-color .15s ease;
}
.group-modal .soft-btn{
  border:1px solid var(--line);
  background:var(--soft,#f6f8fb);
  color:var(--text);
}
.group-modal .soft-btn:hover{background:var(--panel,#fff);border-color:color-mix(in srgb,var(--brand) 28%,var(--line))}
.group-modal .primary-btn{
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  box-shadow:0 8px 18px color-mix(in srgb,var(--brand) 18%,transparent);
}
.group-modal .primary-btn:hover{filter:brightness(.97)}
.group-modal .soft-btn:active,
.group-modal .primary-btn:active{transform:translateY(1px)}
.group-modal .primary-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.group-modal .modal-actions{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  padding:12px 18px;
  border-top:1px solid var(--line);
  background:var(--panel,#fff);
}
.group-modal .modal-actions .primary-btn{min-width:142px}
.group-modal .group-avatar-editor .soft-btn{height:40px}
.group-modal .group-member-picker-head b{font-size:13px;color:var(--text)}
.group-modal .group-member-picker-head small{font-size:10px}
.group-modal .group-search{box-sizing:border-box;outline:none;font:inherit;font-size:12px}
.group-modal .group-friend-option{cursor:pointer;min-height:54px}
.group-modal .group-friend-option:hover{background:var(--soft,#f6f8fb)}
.group-modal .group-friend-option>i{
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:16px;
}
.group-modal .group-friend-option.selected>i{color:var(--brand)}

@media(max-height:700px) and (min-width:761px){
  .group-modal{max-height:calc(100dvh - 24px)}
  .group-modal .modal-head{min-height:66px;padding:12px 16px}
  .group-modal .group-create-body{padding:14px 16px;gap:12px}
  .group-modal .group-avatar-preview{width:62px;height:62px;border-radius:18px}
  .group-modal .modal-actions{min-height:60px;padding:9px 16px}
}

@media(max-width:760px){
  .group-overlay{padding:8px;align-items:flex-end}
  .group-modal{
    width:100%;
    max-height:calc(100dvh - 64px);
    border-radius:20px 20px 12px 12px;
  }
  .group-modal .modal-head{min-height:66px;padding:12px 14px}
  .group-modal .modal-head h2{font-size:18px}
  .group-modal .group-create-body{padding:14px;gap:13px}
  .group-modal .group-avatar-preview{width:64px;height:64px;border-radius:18px}
  .group-modal .modal-actions{padding:10px 14px;min-height:62px}
  .group-modal .modal-actions .soft-btn{flex:0 0 auto}
  .group-modal .modal-actions .primary-btn{flex:1;min-width:0}
}

/* =========================================================
   SOHBERA GROUP AVATAR FIX V3
   Keep friend/member avatars inside their 38px frame.
   ========================================================= */
.group-friend-option .avatar,
.group-member-row .avatar{
  width:38px !important;
  height:38px !important;
  min-width:38px;
  max-width:38px;
  min-height:38px;
  max-height:38px;
  border-radius:11px;
  overflow:hidden;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  line-height:1;
  font-size:11px;
}
.group-friend-option .avatar img,
.group-member-row .avatar img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:inherit;
}

/* SOHBERA Typing Indicator V2 — mesaj kutusunun hemen üstünde */
.composer-typing{
  min-width:0;
  height:24px;
  padding:0 16px 2px 57px;
  display:flex;
  align-items:center;
  gap:7px;
  background:#fff;
  color:#18a9a4;
  font-size:12px;
  line-height:20px;
  white-space:nowrap;
  overflow:hidden;
}
.composer-typing[hidden]{display:none!important}
.composer-typing strong{
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  font-weight:650;
  color:#168f8b;
}
.typing-dots{
  display:inline-flex;
  align-items:center;
  gap:3px;
  height:14px;
}
.typing-dots i{
  display:block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
  opacity:.3;
  transform:translateY(1px) scale(.78);
  animation:sohberaTypingDot 1.05s infinite ease-in-out;
}
.typing-dots i:nth-child(2){animation-delay:.16s}
.typing-dots i:nth-child(3){animation-delay:.32s}
@keyframes sohberaTypingDot{
  0%,60%,100%{opacity:.25;transform:translateY(1px) scale(.78)}
  30%{opacity:1;transform:translateY(-2px) scale(1.08)}
}
@media(max-width:760px){
  .composer-typing{
    height:21px;
    padding:0 10px 1px 48px;
    font-size:11px;
  }
  .composer-typing strong{font-size:11px;max-width:160px}
}
@media (prefers-reduced-motion:reduce){
  .typing-dots i{animation:none;opacity:.75;transform:none}
}



/* =========================================================
   SOHBERA OKUNDU + MENTION + ROL RENKLERI V1
   ========================================================= */
:root{
  --nick-owner:#c58a10;
  --nick-admin:#7358c9;
  --nick-op:#247fa8;
  --nick-halfop:#2f9467;
  --nick-voice:#9b741c;
  --nick-member:var(--text,#27313d);
}
.person.role-owner .person-nick{color:var(--nick-owner);font-weight:900}
.person.role-admin .person-nick{color:var(--nick-admin);font-weight:900}
.person.role-op .person-nick{color:var(--nick-op);font-weight:850}
.person.role-halfop .person-nick{color:var(--nick-halfop);font-weight:800}
.person.role-voice .person-nick{color:var(--nick-voice);font-weight:800}
.person.role-member .person-nick{color:var(--nick-member);font-weight:700}
.person.role-owner{background:color-mix(in srgb,var(--nick-owner) 5%,transparent)}
.person.role-admin{background:color-mix(in srgb,var(--nick-admin) 4%,transparent)}
.person.role-op{background:color-mix(in srgb,var(--nick-op) 3%,transparent)}

.pm-receipt{margin-top:3px;min-height:14px;display:flex;justify-content:flex-end;align-items:center;gap:4px;color:var(--faint);font-size:7px;line-height:1}
.pm-receipt i{font-size:9px;display:grid;place-items:center}.pm-receipt.read{color:var(--brand);font-weight:800}.pm-receipt.delivered{color:var(--muted)}
.message:not(.own) .pm-receipt{display:none}

.mention-btn{position:relative}.mention-badge{background:var(--brand)}
.mention-center .notification-center-head small{color:var(--brand)}
.mention-item-icon{background:var(--brand-soft);color:var(--brand)}
.mention-room{font-weight:800;color:var(--brand)}
.mention-focus{animation:sohberaMentionFocus 1.7s ease}
@keyframes sohberaMentionFocus{0%,100%{background:transparent}20%,70%{background:color-mix(in srgb,var(--brand-soft) 72%,transparent)}}
@media(max-width:760px){.head-actions>.mention-btn{display:inline-grid!important}.pm-receipt{font-size:6.8px}}

/* SOHBERA: 16 ekran efekti */
.status-producer-line{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:18px;margin:5px 18px 16px;padding:15px 16px;overflow:hidden;border:1px solid rgba(115,103,190,.2);border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(241,243,248,.97));box-shadow:0 12px 30px rgba(31,38,58,.08);animation:producer-enter .5s cubic-bezier(.2,.8,.2,1) both}
.status-producer-line::before{content:"";position:absolute;z-index:-1;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,#7367f0,#21c6b7)}
.status-producer-line::after{content:"";position:absolute;z-index:-1;top:-75px;right:90px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(115,103,240,.13),transparent 67%)}
.status-producer-brand{display:flex;align-items:center;gap:12px;min-width:0}.status-producer-logo{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border:1px solid rgba(115,103,240,.18);border-radius:16px;background:rgba(255,255,255,.9);box-shadow:0 7px 18px rgba(71,61,155,.12)}.status-producer-logo img{display:block;width:34px;height:34px;object-fit:contain}.status-producer-copy{display:grid;gap:2px;min-width:0}.status-producer-copy small{color:#7367f0;font-size:9px;font-weight:900;letter-spacing:.16em}.status-producer-copy strong{color:var(--text,#202532);font-size:14px;line-height:1.25}.status-producer-copy em{overflow:hidden;color:var(--muted,#7b8190);font-size:10px;font-style:normal;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.status-producer-badge{display:flex;align-items:center;gap:9px;flex:0 0 auto;padding:9px 13px;border:1px solid rgba(33,198,183,.25);border-radius:15px;background:linear-gradient(135deg,rgba(235,252,250,.95),rgba(244,242,255,.96));box-shadow:inset 0 1px rgba(255,255,255,.9)}.status-producer-badge>i{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,#7367f0,#21c6b7);color:#fff;font-size:14px;box-shadow:0 6px 14px rgba(82,79,190,.22)}.status-producer-badge span{display:grid;gap:1px}.status-producer-badge small{color:var(--muted,#7b8190);font-size:8px;font-weight:800;letter-spacing:.14em}.status-producer-badge b{color:var(--text,#202532);font-size:13px}
@keyframes producer-enter{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:600px){.status-producer-line{gap:10px;margin:4px 8px 12px;padding:12px;border-radius:17px}.status-producer-logo{flex-basis:40px;width:40px;height:40px;border-radius:13px}.status-producer-logo img{width:29px;height:29px}.status-producer-copy strong{font-size:12px}.status-producer-copy em{max-width:165px;font-size:9px}.status-producer-badge{gap:6px;padding:7px 9px;border-radius:12px}.status-producer-badge>i{width:26px;height:26px}.status-producer-badge b{font-size:11px}}
@media(max-width:420px){.status-producer-copy em{display:none}.status-producer-badge>i{display:none}}
@media(prefers-reduced-motion:reduce){.status-producer-line{animation:none}}
.effects-panel{position:fixed;z-index:190;left:50%;bottom:96px;width:min(520px,calc(100vw - 24px));max-height:min(620px,70vh);overflow:hidden;transform:translate(-50%,16px) scale(.98);opacity:0;pointer-events:none;border:1px solid var(--line,#e4e7ec);border-radius:22px;background:var(--panel,#fff);box-shadow:0 24px 70px rgba(15,23,42,.24);transition:.16s ease}
.effects-panel.open{transform:translate(-50%,0) scale(1);opacity:1;pointer-events:auto}
.effects-panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line,#e4e7ec)}
.effects-panel-head div{display:grid;gap:2px}.effects-panel-head small{font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--primary,#6c5ce7)}.effects-panel-head b{font-size:16px}
.effects-panel-head button{width:34px;height:34px;border:0;border-radius:11px;background:var(--soft,#f1f3f7);color:inherit;cursor:pointer}
.effects-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px;overflow:auto;max-height:460px}
.effect-item{display:grid;place-items:center;gap:7px;min-height:92px;padding:10px 5px;border:1px solid var(--line,#e4e7ec);border-radius:16px;background:linear-gradient(145deg,var(--panel,#fff),var(--soft,#f5f6f8));color:inherit;cursor:pointer;transition:.15s ease}
.effect-item:hover{transform:translateY(-2px);border-color:var(--primary,#6c5ce7);box-shadow:0 9px 22px rgba(84,76,180,.15)}.effect-item span{font-size:31px;filter:drop-shadow(0 4px 7px rgba(15,23,42,.14))}.effect-item b{font-size:12px;white-space:nowrap}
.effects-panel footer{padding:10px 16px 13px;border-top:1px solid var(--line,#e4e7ec);text-align:center;font-size:11px;color:var(--muted,#7b8190)}
.chat-fx-layer{position:fixed;z-index:9998;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .25s}.chat-fx-layer.active{opacity:1}
.chat-fx-particle{position:absolute;left:var(--fx-x);top:-12vh;font-size:var(--fx-size);animation:fx-fall var(--fx-duration) var(--fx-delay) cubic-bezier(.18,.7,.25,1) both;will-change:transform,opacity;filter:drop-shadow(0 5px 8px rgba(0,0,0,.16))}
.fx-balloons .chat-fx-particle,.fx-bubbles .chat-fx-particle,.fx-hearts .chat-fx-particle{top:auto;bottom:-14vh;animation-name:fx-rise}.fx-fireworks .chat-fx-particle,.fx-stars .chat-fx-particle{top:45%;animation-name:fx-burst}.fx-lightning{background:rgba(255,255,255,.03);animation:fx-flash 1.1s 2}.fx-applause .chat-fx-particle,.fx-laugh .chat-fx-particle,.fx-kiss .chat-fx-particle,.fx-party .chat-fx-particle{top:auto;bottom:10%;animation-name:fx-pop}
.chat-fx-title{position:absolute;left:50%;top:44%;display:flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(17,24,39,.78);color:#fff;box-shadow:0 18px 60px rgba(0,0,0,.25);backdrop-filter:blur(12px);transform:translate(-50%,-50%);animation:fx-title 3.8s both}.chat-fx-title span{font-size:28px}.chat-fx-title b{font-size:15px}.chat-fx-title small{opacity:.72}
@keyframes fx-fall{0%{transform:translate3d(0,-10vh,0) rotate(0);opacity:0}12%{opacity:1}100%{transform:translate3d(var(--fx-drift),120vh,0) rotate(540deg);opacity:.1}}
@keyframes fx-rise{0%{transform:translate3d(0,8vh,0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translate3d(var(--fx-drift),-120vh,0) scale(1.25) rotate(30deg);opacity:0}}
@keyframes fx-burst{0%{transform:translate(-50%,-50%) scale(0);opacity:0}18%{opacity:1}55%{transform:translate(calc(-50% + var(--fx-drift)),calc(-50% - 38vh)) scale(1.35);opacity:1}100%{transform:translate(calc(-50% + var(--fx-drift)),calc(-50% + 55vh)) scale(.8);opacity:0}}
@keyframes fx-pop{0%{transform:translateY(25vh) scale(.2) rotate(-20deg);opacity:0}28%{transform:translateY(-18vh) scale(1.25) rotate(12deg);opacity:1}100%{transform:translateY(-55vh) scale(.75) rotate(-15deg);opacity:0}}
@keyframes fx-title{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.78)}12%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes fx-flash{0%,18%,24%,55%,62%,100%{background:transparent}20%,58%{background:rgba(255,255,255,.68)}}
@media(max-width:600px){.effects-panel{bottom:82px}.effects-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px}.effect-item{min-height:80px}.effect-item span{font-size:27px}.effect-item b{font-size:11px}}
@media(prefers-reduced-motion:reduce){.chat-fx-particle{animation-duration:.8s!important}.chat-fx-title{animation-duration:1.2s!important}}

/* SOHBERA — mobile overflow guard 854 */
@media(max-width:480px){
  .chat-head{gap:3px;padding-inline:6px;overflow:hidden}
  .head-left{gap:5px;flex:1 1 auto;overflow:hidden}
  .head-actions{gap:2px;flex:0 0 auto}
  .channel-title{overflow:hidden}
  .channel-title b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .channel-title span{display:none}
  .head-actions>.notification-btn,
  .head-actions>#moreBtn,
  .head-actions>.people-btn{
    min-width:30px!important;
    width:30px!important;
    height:34px;
    padding:0;
  }
  .head-actions>.people-btn b{display:none!important}

  .composer{width:100%;min-width:0;gap:5px;padding:7px 6px;overflow:hidden}
  .attach-wrap{flex:0 0 34px;min-width:34px}
  .attach{width:34px;min-width:34px}
  .composer-box{min-width:0;overflow:hidden;padding:0 4px 0 8px}
  .composer-box textarea{width:0;min-width:0}
  .composer-tools{flex:0 0 auto;gap:0}
  .composer-tools button{flex:0 0 26px;width:26px}
  .composer-tools button:nth-child(4),
  .composer-tools button:nth-child(5){display:none!important}
  .send{display:grid;place-items:center;flex:0 0 38px;width:38px;min-width:38px;padding:0;font-size:0!important}
  .send span{display:none!important}
  .send i{display:inline-flex!important;font-size:17px;line-height:1}
  .send::after{content:none!important;display:none!important}
}

/* SOHBERA — compact mobile radio 857 */
@media(max-width:760px){
  .radio-mini{
    display:grid!important;
    place-items:center;
    flex:0 0 30px;
    width:30px;
    height:34px;
    padding:0;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--surface,#fff);
  }
  .radio-mini .eq,
  .radio-mini-copy{display:none!important}
  .radio-mini button{
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    padding:0;
    color:var(--brand);
    font-size:15px;
  }
}