/* =========================================================
   H-CHAT V3 — FLATICON UICONS PRO PASS 220
   Primary navigation = Solid Rounded
   Utility / secondary controls = Regular Rounded
   ========================================================= */

.fi{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  vertical-align:middle;
  flex:0 0 auto;
}
.fi::before{
  display:block;
  line-height:1;
}

/* Shared icon controls */
.icon-btn,.attach,.composer-tools button,.drawer-head button,.profile-head button,
.radio-panel-head button,.theme-panel-head button,.main-menu-head button,
.v3-action-head button,.about-close,.room-close,.msg-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.icon-btn>.fi{font-size:17px}
.mobile-menu>.fi{font-size:19px}

/* ---------------------------------------------------------
   LEFT RAIL — stronger app-like navigation
   --------------------------------------------------------- */
.rail-btn{
  transition:background-color .16s ease,color .16s ease,transform .14s ease;
}
.rail-btn .nav-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  font-size:0;
  transition:background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.rail-btn .nav-icon .fi{
  font-size:21px;
}
.rail-btn:hover .nav-icon{
  background:rgba(79,104,232,.08);
}
.rail-btn.active{
  background:var(--brand-soft);
  color:var(--brand);
}
.rail-btn.active .nav-icon{
  background:var(--brand);
  color:#fff;
  box-shadow:0 4px 12px rgba(79,104,232,.20);
}
.rail-btn.active .nav-icon .fi{
  transform:translateY(-.2px);
}
.rail-btn:active{transform:translateY(1px)}

/* ---------------------------------------------------------
   SEARCH / WORKSPACE / ROOM ICONS
   --------------------------------------------------------- */
.search-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--faint);
}
.search-icon .fi{font-size:15px}
.section-title button .fi{font-size:14px}
.moment-ring b .fi{font-size:13px}

.room-mark{
  border-radius:8px;
  transition:background-color .16s ease,color .16s ease,transform .16s ease;
}
.room-mark .fi{
  font-size:15px;
}
.room:hover .room-mark{
  transform:translateY(-1px);
}
.room.active .room-mark{
  background:var(--brand);
  color:#fff;
  box-shadow:0 3px 10px rgba(79,104,232,.16);
}
.room-close .fi{font-size:13px}
.channel-icon .fi{font-size:18px}

/* ---------------------------------------------------------
   HEADER — crisp secondary controls
   --------------------------------------------------------- */
.head-actions .icon-btn>.fi{font-size:17px}
.people-btn>.fi{
  font-size:16px;
  color:var(--muted);
  margin-left:2px;
}
#radioButton .fi{font-size:13px}

.icon-btn,.people-btn,.attach,.composer-tools button{
  transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .14s ease;
}
.icon-btn:hover,.attach:hover,.composer-tools button:hover{
  color:var(--brand);
  border-color:#cfd5f4;
  background:#f8f9ff;
}
.icon-btn:active,.attach:active,.composer-tools button:active{transform:translateY(1px)}

/* ---------------------------------------------------------
   COMPOSER — larger and easier to read at 1080p
   --------------------------------------------------------- */
.attach .fi{font-size:18px}
.composer-tools button .fi{font-size:18px}
.composer-tools button:hover{background:var(--brand-soft)}
.send{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.send .fi{font-size:15px}
.send:hover{filter:brightness(.97)}

/* Message actions */
.msg-more .fi{font-size:15px}
.message-action-main button>.fi{font-size:15px}

/* ---------------------------------------------------------
   MAIN MENU — solid leading glyphs, quiet arrows
   --------------------------------------------------------- */
.main-menu-item>span .fi{font-size:16px}
.main-menu-item>em .fi{font-size:13px}
.main-menu-item:hover>em .fi{transform:translateX(1px)}

/* ---------------------------------------------------------
   RADIO
   --------------------------------------------------------- */
.radio-cover>span .fi{font-size:23px}
.radio-main-play #radioMainPlayIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px;
}
.radio-main-play #radioMainPlayIcon .fi{font-size:13px}
.radio-mute{position:relative}
.radio-mute .fi{font-size:16px}
.radio-mute.is-muted::after{
  content:"";
  position:absolute;
  width:18px;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  transform:rotate(-45deg);
}
.radio-foot button{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.radio-foot button .fi{font-size:12px}
.icon-loader{
  width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;display:inline-block;animation:hchatIconSpin .75s linear infinite;
}
@keyframes hchatIconSpin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------
   MOBILE BOTTOM NAV — solid icons and visible active state
   --------------------------------------------------------- */
.mobile-tabs button>span{
  width:30px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  transition:background-color .16s ease,color .16s ease,transform .14s ease;
}
.mobile-tabs button>span .fi{font-size:19px}
.mobile-tabs button.active>span{
  background:var(--brand-soft);
  color:var(--brand);
}
.mobile-tabs button:active>span{transform:translateY(1px)}

/* Story viewer */
.story-plus.fi{display:grid;place-items:center}
#storyLikeListBtn .fi,#storyDeleteBtn .fi,#storyViewerClose .fi,#storyLikesClose .fi{font-size:17px}
#storyLikeHeart .fi{font-size:22px}
.story-like-btn.liked #storyLikeHeart,.liked #storyLikeHeart{color:#e45767}

/* Flaticon attribution in About */
.icon-credit{
  display:block;
  margin:9px 0 2px;
  color:var(--faint);
  font-size:8px;
  text-align:center;
}
.icon-credit a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.icon-credit a:hover{color:var(--brand)}

@media (max-width:760px){
  .mobile-tabs button>span .fi{font-size:20px}
  .composer-tools button .fi{font-size:17px}
  .attach .fi{font-size:17px}

  /* v3.css used a legacy triangle here; keep only the UIcon. */
  .send:after{content:none!important}
  .send .fi{font-size:17px}
}