/* ==========================================================
   ChatApps — базовые стили и дизайн-токены
   ========================================================== */

:root{
  --bg:#eef1f8;
  --surface:#ffffff;
  --navy:#1f2b4d;
  --navy-deep:#141c36;
  --coral:#ff6f59;
  --coral-dark:#e85a45;
  --mint:#2fbf9b;
  --text:#1c2333;
  --text-muted:#7c8698;
  --border:#e7eaf2;
  --radius-bubble:16px 16px 4px 16px; /* фирменная асимметричная форма */
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; height:100%;
  font-family:'Inter', sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
}

h1,h2,h3, .brand-font{ font-family:'Sora', sans-serif; }

button{ font-family:inherit; cursor:pointer; border:none; }
input{ font-family:inherit; }

/* ---------- Экран авторизации ---------- */
.auth-wrap{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 15% 10%, #dfe5f4 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, #e6ddf7 0%, transparent 45%),
    var(--bg);
}

.auth-card{
  width:100%; max-width:380px;
  background:var(--surface);
  border-radius:24px 24px 24px 6px;
  box-shadow:0 30px 60px -20px rgba(31,43,77,.25);
  padding:32px 28px;
}

.auth-logo{
  width:46px; height:46px; border-radius:14px 14px 4px 14px;
  background:linear-gradient(135deg,#2b3a67,#1f2b4d);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Sora'; font-weight:800; font-size:18px;
  margin-bottom:16px;
}

.auth-title{ font-weight:700; font-size:20px; margin:0 0 4px; }
.auth-sub{ font-size:13px; color:var(--text-muted); margin:0 0 22px; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--text); }
.field .input-row{
  display:flex; align-items:center; gap:10px;
  background:#f0f2f8; border:1px solid transparent; border-radius:14px;
  padding:12px 14px;
}
.field .input-row:focus-within{ border-color:var(--navy); background:#fff; }
.field i{ color:var(--text-muted); font-size:14px; width:16px; text-align:center; }
.field input{
  border:none; background:transparent; outline:none; flex:1; font-size:13.5px; color:var(--text);
}

.btn-primary{
  width:100%; padding:13px; border-radius:14px 14px 14px 4px;
  background:var(--navy); color:#fff; font-family:'Sora'; font-weight:700; font-size:14px;
  margin-top:6px;
}
.btn-primary:disabled{ opacity:.55; cursor:default; }
.btn-primary.coral{ background:linear-gradient(135deg,#ff8a5b,#e85a45); }

.auth-links{ display:flex; justify-content:space-between; margin-top:16px; font-size:12.5px; }
.auth-links a{ color:var(--navy); font-weight:600; text-decoration:none; cursor:pointer; }
.auth-links a.muted{ color:var(--text-muted); font-weight:500; }

.form-error{
  background:#fdeceb; color:var(--coral-dark); font-size:12.5px; font-weight:500;
  padding:10px 14px; border-radius:12px; margin-bottom:14px; display:none;
}
.form-error.visible{ display:block; }

.form-success{
  background:rgba(47,191,155,.12); color:#1c8a6d; font-size:12.5px; font-weight:500;
  padding:10px 14px; border-radius:12px; margin-bottom:14px; display:none;
}
.form-success.visible{ display:block; }

.auth-step{ display:none; }
.auth-step.active{ display:block; }

/* Иконки вместо смайлов — все статусы/реакции только через Font Awesome */
.icon-action{
  width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:#f0f2f8; color:var(--text-muted); font-size:13px;
}
.icon-action:hover{ background:#e7eaf2; color:var(--text); }

/* ==========================================================
   APP SHELL (SPA после входа)
   ========================================================== */
#app-shell{ display:none; }
#app-shell.visible{ display:flex; flex-direction:column; }

.app-shell{
  max-width:480px; margin:0 auto; min-height:100vh; background:var(--surface);
  position:relative; box-shadow:0 0 60px rgba(31,43,77,.08);
}

.top-tabs{ display:flex; gap:6px; padding:18px 16px 12px; flex-shrink:0; }
.top-tab{
  font-family:'Sora'; font-weight:600; font-size:13.5px;
  padding:8px 16px; border-radius:14px 14px 4px 14px; color:var(--text-muted);
  background:transparent;
}
.top-tab.active{ background:var(--navy); color:#fff; }

.app-view{ display:none; padding-bottom:90px; min-height:calc(100vh - 60px); }
.app-view.active{ display:block; }

.list{ padding:4px 12px; }

.empty-state{
  text-align:center; padding:60px 30px; color:var(--text-muted);
}
.empty-state i{ font-size:34px; color:#c7cee0; margin-bottom:14px; }
.empty-state p{ font-family:'Sora'; font-weight:600; color:var(--text); margin:0 0 4px; }
.empty-state span{ font-size:12.5px; }

.search-box{
  margin:20px auto 0; max-width:280px; background:#f0f2f8; border-radius:16px; padding:12px 16px;
  display:flex; align-items:center; gap:10px; color:var(--text-muted); font-size:13px;
}

.view-header{
  display:flex; align-items:center; gap:12px; padding:20px 16px 14px; font-family:'Sora'; font-weight:700; font-size:16px;
}
.view-header i{ color:var(--navy); cursor:pointer; }

/* ---------- Профиль ---------- */
.profile-hero{
  padding:34px 24px 22px; text-align:center;
  background:linear-gradient(160deg,#2b3a67,#1a2340);
  border-radius:0 0 32px 32px; color:#fff; position:relative;
}
.profile-hero.premium{ background:linear-gradient(160deg,#ff8a5b,#e85a45 60%,#7a3ad1); }
.profile-avatar{
  width:86px; height:86px; border-radius:26px 26px 8px 26px; margin:0 auto 12px;
  background:#3a4a7a; display:flex; align-items:center; justify-content:center;
  font-family:'Sora'; font-weight:700; font-size:30px; border:3px solid rgba(255,255,255,.25);
  position:relative; background-size:cover; background-position:center;
}
.profile-hero.premium .profile-avatar{ border-color:#ffd27a; box-shadow:0 0 0 3px rgba(255,210,122,.5); }
.avatar-edit{
  position:absolute; bottom:-4px; right:-4px; width:26px; height:26px; border-radius:9px;
  background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:11px; cursor:pointer; border:2px solid #fff;
}
.profile-name{ font-family:'Sora'; font-weight:700; font-size:18px; }
.profile-bio{ font-size:12.5px; opacity:.85; margin-top:4px; cursor:pointer; }
.crown{ position:absolute; top:16px; right:20px; color:#ffd27a; font-size:18px; }
.profile-body{ padding:18px 20px; }
.setting-row{
  display:flex; align-items:center; justify-content:space-between; padding:14px 4px; border-bottom:1px solid var(--border);
  font-size:13.5px; font-weight:500; cursor:pointer;
}
.setting-row i:first-child{ color:var(--navy); margin-right:10px; width:18px; text-align:center; }

.premium-feature{ display:flex; gap:12px; align-items:flex-start; padding:12px 4px; }
.premium-feature i{ color:#ff8a5b; font-size:17px; margin-top:2px; }
.premium-feature b{ display:block; font-size:13.5px; }
.premium-feature span{ font-size:12px; color:var(--text-muted); }
.ghost-btn{ background:#f0f2f8 !important; color:var(--text) !important; margin-top:8px; }

/* ---------- Нижнее меню ---------- */
.bottom-nav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; height:78px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-top:1px solid var(--border); display:flex; z-index:15; padding-bottom:14px;
}
.nav-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--text-muted); font-size:10px; font-family:'Sora'; font-weight:600; cursor:pointer;
}
.nav-btn i{ font-size:17px; }
.nav-btn.active{ color:var(--navy); }
.nav-btn.active i{ color:var(--coral); }

/* ---------- Модальные окна ---------- */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(20,28,54,.45);
  align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-overlay.visible{ display:flex; }
.modal-card{
  width:100%; max-width:340px; background:#fff; border-radius:22px 22px 22px 6px; padding:24px;
}
.modal-title{ font-family:'Sora'; font-weight:700; font-size:16px; margin-bottom:14px; }

/* ==========================================================
   ДИАЛОГИ (список)
   ========================================================== */
.dlg-row{ display:flex; gap:12px; padding:11px 8px; border-radius:16px; align-items:center; cursor:pointer; }
.dlg-row:active{ background:#f2f4fa; }
.avatar{
  width:52px; height:52px; border-radius:16px 16px 4px 16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora'; font-weight:700; color:#fff; font-size:17px;
  position:relative; background-size:cover; background-position:center;
}
.avatar.online::after{
  content:''; position:absolute; bottom:-2px; right:-2px; width:13px; height:13px;
  background:var(--mint); border:3px solid var(--surface); border-radius:50%;
}
.dlg-info{ flex:1; min-width:0; }
.dlg-top{ display:flex; justify-content:space-between; align-items:baseline; }
.dlg-name{ font-family:'Sora'; font-weight:600; font-size:14.5px; }
.dlg-time{ font-family:'JetBrains Mono'; font-size:10.5px; color:var(--text-muted); }
.dlg-preview{ font-size:13px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.dlg-preview.typing{ color:var(--mint); font-weight:600; font-size:13px; margin-top:2px; }
.badge{
  background:var(--coral); color:#fff; font-family:'JetBrains Mono'; font-size:10.5px; font-weight:600;
  min-width:19px; height:19px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px;
}

/* ==========================================================
   ЭКРАН ЧАТА
   ========================================================== */
#app-shell.in-chat .top-tabs,
#app-shell.in-chat .bottom-nav{ display:none; }
#view-chat, #view-channel{ display:none; flex-direction:column; height:100vh; padding-bottom:0; }
#view-chat.active, #view-channel.active{ display:flex; }

.chat-header{
  display:flex; align-items:center; gap:10px; padding:16px 16px 14px; flex-shrink:0; border-bottom:1px solid var(--border);
}
.chat-header i.fa-arrow-left{ color:var(--navy); font-size:16px; cursor:pointer; }
.chat-header .avatar{ width:38px; height:38px; font-size:13px; border-radius:12px 12px 3px 12px; }
.chat-header-info{ min-width:0; }
.chat-title{ font-family:'Sora'; font-weight:700; font-size:15px; }
.chat-status{ font-size:11.5px; color:var(--text-muted); }
.chat-status.typing{ color:var(--mint); font-weight:600; }

.chat-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:#f7f8fc; }
.msg-row{ display:flex; }
.msg-row.mine{ justify-content:flex-end; }
.bubble{ max-width:78%; padding:10px 14px; font-size:13.5px; line-height:1.45; word-break:break-word; }
.bubble.theirs{ background:#fff; border-radius:16px 16px 16px 4px; box-shadow:0 1px 2px rgba(20,28,54,.06); }
.bubble.mine{ background:linear-gradient(135deg,#2b3a67,#1f2b4d); color:#fff; border-radius:16px 16px 4px 16px; cursor:pointer; }
.bubble.deleted{ background:transparent; border:1px dashed var(--border); color:var(--text-muted); font-size:12.5px; border-radius:14px; }
.bubble .time{ display:block; margin-top:4px; font-family:'JetBrains Mono'; font-size:9.5px; opacity:.65; text-align:right; }
.edited-tag{ font-style:italic; opacity:.8; }

.quoted-reply{
  border-left:3px solid var(--coral); border-radius:8px; padding:5px 10px; margin-bottom:7px;
  background:rgba(0,0,0,.04); cursor:pointer;
}
.bubble.mine .quoted-reply{ background:rgba(255,255,255,.15); border-left-color:#ffd7cd; }
.quoted-reply-author{
  display:block; font-family:'Sora'; font-weight:700; font-size:11px; color:var(--navy);
}
.bubble.mine .quoted-reply-author{ color:#ffe4dd; }
.quoted-reply-text{
  display:block; font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px;
}
.bubble.mine .quoted-reply-text{ color:rgba(255,255,255,.75); }

@keyframes flashHighlight{
  0%, 100% { background:transparent; }
  30% { background:rgba(255,138,91,.25); }
}
.msg-row.flash-highlight .bubble, .bubble.flash-highlight{ animation:flashHighlight 1.2s ease; }
.file-chip{
  display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.06); border-radius:10px; padding:8px 10px; margin-bottom:6px; font-size:12px;
}
.bubble.mine .file-chip{ background:rgba(255,255,255,.15); }

.chat-input-row{
  flex-shrink:0; display:flex; align-items:flex-end; gap:8px; padding:10px 14px 18px;
  border-top:1px solid var(--border); background:var(--surface); position:relative;
}
.chat-input-wrap{ flex:1; display:flex; flex-direction:column; }
.input-row.no-bg{
  background:#f0f2f8; border-radius:20px; padding:10px 8px 10px 16px;
  display:flex; align-items:center; gap:8px;
}
.input-row.no-bg input{ flex:1; border:none; background:transparent; outline:none; font-size:13.5px; color:var(--text); }
.send-btn{
  width:38px; height:38px; border-radius:14px 14px 4px 14px; background:var(--coral); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; font-size:13px;
}

.reply-preview{
  display:flex; align-items:center; justify-content:space-between; background:#eef1f8; border-radius:12px 12px 0 0;
  padding:8px 14px; font-size:12px; color:var(--text-muted); border-left:3px solid var(--coral);
}
.reply-preview i{ cursor:pointer; }

/* ---------- Пикер эмодзи ---------- */
.emoji-picker{
  position:absolute; bottom:70px; right:14px; width:220px; max-height:180px; overflow-y:auto;
  background:#fff; border-radius:16px; box-shadow:0 12px 30px rgba(20,28,54,.18);
  display:none; grid-template-columns:repeat(5,1fr); gap:4px; padding:10px; z-index:30;
}
.emoji-picker.visible{ display:grid; }
.emoji-item{ font-size:20px; text-align:center; cursor:pointer; border-radius:8px; padding:4px; }
.emoji-item:hover{ background:#f0f2f8; }

/* ---------- Контекстное меню сообщения (иконки Font Awesome) ---------- */
.msg-menu{
  position:absolute; display:none; flex-direction:column; background:#fff; border-radius:14px;
  box-shadow:0 12px 30px rgba(20,28,54,.2); overflow:hidden; z-index:40; min-width:160px;
}
.msg-menu.visible{ display:flex; }
.msg-menu-item{ padding:11px 16px; font-size:13px; display:flex; align-items:center; gap:9px; cursor:pointer; }
.msg-menu-item:hover{ background:#f0f2f8; }
.msg-menu-item.danger{ color:var(--coral-dark); }
.msg-menu-item i{ width:14px; text-align:center; }

/* ==========================================================
   ШАПКА ChatApps
   ========================================================== */
.app-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; flex-shrink:0;
  background:rgba(255,255,255,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
.app-header-brand{ display:flex; align-items:center; gap:11px; }
.app-header-logo{
  width:34px; height:34px; border-radius:11px 11px 3px 11px;
  background:linear-gradient(135deg,#ff8a5b,#2b3a67 65%); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora'; font-weight:800; font-size:13px;
  box-shadow:0 6px 14px -4px rgba(31,43,77,.45);
}
.app-header-brand span{
  font-family:'Sora'; font-weight:700; font-size:16.5px; color:var(--navy); letter-spacing:-.01em;
}
.app-header-avatar{
  width:34px; height:34px; border-radius:11px; flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:'Sora'; font-weight:700; font-size:12px; background-size:cover; background-position:center;
  border:2px solid #fff; box-shadow:0 0 0 1px var(--border);
}
#app-shell.in-chat .app-header{ display:none; }

/* ==========================================================
   ПОИСК (диалоги / группы / каналы) + кнопка создания
   ========================================================== */
.user-search-box{
  margin:14px 16px 12px; display:flex; align-items:center; gap:10px;
}
.user-search-box{
  background:#fff; border:1.5px solid var(--border); border-radius:16px; padding:11px 16px;
  color:var(--text-muted); font-size:13px; flex:1;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.user-search-box:focus-within{
  border-color:#c7cff2; box-shadow:0 0 0 4px rgba(43,58,103,.08);
}
.user-search-box i.fa-magnifying-glass{ color:#b7bfd4; font-size:13px; }
.user-search-box input{
  border:none; background:transparent; outline:none; flex:1; font-size:13px; color:var(--text);
}
.user-search-box input::placeholder{ color:#a6aec2; }

/* контейнер строки поиска + кнопка "+" рядом, не внутри */
#view-groups .user-search-box, #view-channels .user-search-box{ margin-right:0; }
.search-row{ display:flex; align-items:center; gap:10px; margin:14px 16px 12px; }
.search-row .user-search-box{ margin:0; }

.fab-create{
  width:44px; height:44px; border-radius:14px 14px 4px 14px; flex-shrink:0; cursor:pointer;
  background:linear-gradient(135deg,#ff8a5b,#e85a45); color:#fff; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px -6px rgba(232,90,69,.55);
  transition:transform .12s ease;
}
.fab-create:active{ transform:scale(.92); }

#user-search-results:empty{ margin:0; }
.user-result-row{
  display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:16px; cursor:pointer;
  margin:0 4px;
}
.user-result-row:active{ background:#f2f4fa; }
.dialog-status-pill{
  font-size:10.5px; font-family:'JetBrains Mono'; font-weight:600; padding:4px 10px; border-radius:8px; flex-shrink:0;
}
.dialog-status-pill.has{ background:rgba(47,191,155,.12); color:#1c8a6d; }
.dialog-status-pill.none{ background:#f0f2f8; color:var(--text-muted); }

/* ==========================================================
   ГРУППЫ: карточки, модалка управления
   ========================================================== */
.group-card{
  display:flex; gap:12px; padding:13px 14px; align-items:center; border-radius:18px; cursor:pointer;
  background:#fff; border:1px solid var(--border); margin:0 4px 8px; box-shadow:0 1px 4px -2px rgba(20,28,54,.06);
  transition:transform .12s ease, box-shadow .12s ease;
}
.group-card:active{ transform:scale(.985); background:#fafbfd; }
.group-avatar{
  width:52px; height:52px; border-radius:16px; flex-shrink:0; background:linear-gradient(135deg,#2b3a67,#1a2340);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:19px;
  background-size:cover; background-position:center; box-shadow:0 4px 10px -4px rgba(31,43,77,.4);
}
.pill{ font-size:10.5px; color:var(--text-muted); background:#f0f2f8; padding:3px 9px; border-radius:8px; font-family:'JetBrains Mono'; font-weight:500; }
.pill.open{ background:rgba(47,191,155,.12); color:#1c8a6d; }
.pill.closed{ background:rgba(255,111,89,.12); color:var(--coral-dark); }
.meta-row{ display:flex; gap:8px; margin-top:4px; }

.modal-card.wide{ max-width:400px; max-height:85vh; overflow-y:auto; }
.modal-tabs{ display:flex; gap:6px; margin-bottom:16px; }
.modal-tab{
  flex:1; text-align:center; padding:9px; border-radius:12px; font-size:12.5px; font-weight:600;
  color:var(--text-muted); background:#f0f2f8; cursor:pointer;
}
.modal-tab.active{ background:var(--navy); color:#fff; }
.modal-gtab-panel{ display:none; }
.modal-gtab-panel.active{ display:block; }

.perm-row{
  display:flex; align-items:center; justify-content:space-between; padding:10px 2px;
  font-size:12.5px; border-bottom:1px solid var(--border);
}
.perm-row select{
  border:1px solid var(--border); border-radius:8px; padding:5px 8px; font-size:12px; color:var(--text); background:#fff;
}
.perm-row i.fa-toggle-on{ color:var(--mint); font-size:20px; cursor:pointer; }
.perm-row i.fa-toggle-off{ color:var(--text-muted); font-size:20px; cursor:pointer; }

.invite-link-box{
  background:#f0f2f8; border-radius:12px; padding:12px 14px; font-family:'JetBrains Mono'; font-size:11.5px;
  word-break:break-all; margin-bottom:12px; color:var(--navy);
}

.member-row{ display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--border); }
.member-row .avatar{ width:34px; height:34px; font-size:12px; border-radius:11px; }
.member-row .member-name{ font-size:13px; font-weight:600; flex:1; }
.member-row .member-role{ font-size:10.5px; color:var(--text-muted); font-family:'JetBrains Mono'; }
.member-row .icon-action{ width:26px; height:26px; font-size:11px; }

/* ==========================================================
   КАНАЛЫ: лента постов, комментарии
   ========================================================== */
#channel-posts-body{ gap:14px; padding:16px; background:#f7f8fc; }

.post-card{
  background:#fff; border-radius:20px 20px 20px 6px; padding:16px;
  box-shadow:0 2px 10px -4px rgba(20,28,54,.10); border:1px solid var(--border);
}
.post-header{
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
  font-family:'Sora'; font-weight:700; font-size:12.5px; color:var(--navy);
}
.post-header i.fa-bullhorn{
  width:24px; height:24px; border-radius:8px; background:linear-gradient(135deg,#ff8a5b,#e85a45);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0;
}
.post-time{
  margin-left:auto; font-family:'JetBrains Mono'; font-weight:400; font-size:10.5px; color:var(--text-muted);
}
.post-image{
  width:100%; border-radius:14px; margin-bottom:10px; display:block; max-height:360px; object-fit:cover;
}
.post-content{ font-size:13.5px; line-height:1.55; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.post-footer{
  display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
  font-size:12px; color:var(--text-muted); cursor:pointer; font-weight:500;
}
.post-footer:hover{ color:var(--navy); }
.post-footer .comment-count{ font-family:'JetBrains Mono'; font-weight:600; }

.post-comments{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:10px; }
.comment-row{ display:flex; gap:9px; align-items:flex-start; }
.comment-author{ font-family:'Sora'; font-weight:700; font-size:11.5px; color:var(--navy); }
.comment-text{ font-size:12.5px; color:var(--text); line-height:1.4; margin-top:1px; }
.comment-input-row{
  display:flex; align-items:center; gap:8px; background:#f0f2f8; border-radius:14px; padding:8px 8px 8px 14px; margin-top:2px;
}
.comment-input-row input{
  flex:1; border:none; background:transparent; outline:none; font-size:12.5px; color:var(--text);
}
.comment-input-row .icon-action{ width:28px; height:28px; font-size:11px; background:var(--coral); color:#fff; flex-shrink:0; }
.comment-input-row .icon-action:hover{ background:var(--coral-dark); }

#channel-composer .input-row.no-bg{ flex:1; }