:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface2: #f8f9fb;
  --border: #e8eaed;
  --border2: #d1d5db;
  --text: #1a1d23;
  --text2: #6b7280;
  --text3: #9ca3af;
  --accent: #16a679;
  --accent-soft: #e6f7f2;
  --accent-dark: #0d8a63;
  --danger: #ef4444;
  --warn-bg: #fff8ed;
  --warn-border: #fbbf24;
  --warn-text: #92400e;
  --blue: #3b82f6;
  --blue-soft: #eff6ff;
  --purple: #8b5cf6;
  --purple-soft: #f5f3ff;
  --shadow: 0 1px 3px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.1);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --font: 'DM Sans', sans-serif;
  --mono: 'DM Mono', monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);height:100vh;display:flex;overflow:hidden;font-size:14px}

/* ── SCROLLBARS ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px}

/* ── LEFT NAV ── */
.nav{width:66px;background:var(--text);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:6px;flex-shrink:0}
.nav-logo {
  background: transparent;
  border-radius: 0;
}
.nav-btn{width:44px;height:44px;border-radius:12px;border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#9ca3af;transition:all .15s;position:relative}
.nav-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-btn.on{background:rgba(22,166,121,.2);color:#fff;box-shadow:inset 0 0 0 1px rgba(22,166,121,.25)}
.nav-btn span{font-size:10.5px;font-weight:600;font-family:var(--font)}
.nav-btn svg{width:22px;height:22px;flex-shrink:0}
.nav-sep{width:36px;height:1px;background:rgba(255,255,255,.1);margin:8px 0}
.nav-sp{flex:1}
.nav-avatar{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid rgba(22,166,121,.4)}

/* ── MIDDLE ── */
.mid{width:300px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column}
.mid-hdr{padding:14px 14px 10px}
.mid-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.mid-title{font-size:16px;font-weight:700;color:var(--text)}
.mid-new-btn{width:32px;height:32px;border:none;border-radius:50%;background:var(--surface2);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s,color .12s}
.mid-new-btn:hover{background:rgba(22,166,121,.04);color:#66c8ad}
.search-wrap{min-height:34px;display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid rgba(209,213,219,.65);border-radius:17px;padding:0 11px;margin-bottom:10px}
.search-wrap input{flex:1;border:none;background:transparent;font-size:13.5px;color:var(--text);outline:none;font-family:var(--font)}
.search-wrap input::placeholder{color:var(--text3)}
.search-clear-btn{display:none;align-items:center;justify-content:center;width:18px;height:18px;border:none;border-radius:50%;background:transparent;color:var(--text3);font-size:16px;line-height:18px;cursor:pointer;padding:0;flex-shrink:0}
.search-clear-btn:hover{background:var(--border);color:var(--text2)}
.search-wrap.has-value .search-clear-btn{display:flex}
.chat-tabs{display:flex;gap:5px;flex-wrap:wrap}
.ctab{min-height:30px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text2);font-family:var(--font);transition:all .12s;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}
.ctab:hover{background:rgba(22,166,121,.07);border-color:rgba(22,166,121,.16);color:var(--accent-dark)}
.ctab.on{background:var(--accent-soft);border-color:rgba(22,166,121,.24);color:var(--accent-dark);font-weight:500}
.conv-list{flex:1;overflow-y:auto}
.conv-item{min-height:64px;padding:8px 15px;cursor:pointer;border-bottom:none;display:flex;gap:12px;align-items:center;transition:background .1s}
.conv-item:hover{background:var(--surface2)}
.conv-item.on{background:var(--accent-soft);border-left:3px solid var(--accent);padding-left:12px}
.c-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;overflow:hidden}
.c-av-wrap{position:relative;width:42px;height:42px;overflow:visible;flex-shrink:0}
.c-av-wrap > span{width:10px!important;height:10px!important;right:1px!important;bottom:1px!important;transform:translate(8%,8%);border:2px solid var(--surface)!important;box-shadow:0 0 0 1px rgba(22,166,121,.12)}
.c-info{flex:1;min-width:0}
.c-name{font-size:14.5px;font-weight:500;line-height:1.25;color:var(--text)}
.c-prev{font-size:13px;font-weight:400;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;line-height:1.35}
.c-meta{display:flex;justify-content:space-between;align-items:center}
.c-time{font-size:11.5px;color:var(--text3);margin-left:8px;flex-shrink:0}
.c-badge{background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:9px;min-width:18px;text-align:center;margin-left:8px}
.mid-action{display:none;padding:10px 14px;border-top:1px solid var(--border)}
.new-chat-btn{width:100%;padding:8px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);display:flex;align-items:center;justify-content:center;gap:5px;transition:opacity .12s}
.new-chat-btn:hover{opacity:.85}

/* ── RIGHT ── */
.right{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
#rContent{background:var(--bg)}
.r-hdr{padding:8px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;background:var(--surface);flex-shrink:0}
.r-hdr > div[onclick]{padding:2px 4px!important;margin:-2px -4px!important}
.r-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.r-name{font-size:15px;font-weight:700;color:var(--text)}
.r-sub{font-size:11px;color:var(--accent)}
.r-acts{margin-left:auto;display:flex;gap:5px}
.ib{width:34px;height:34px;border:none;border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:background .12s,color .12s}
.ib svg{width:16px;height:16px}
.ib:hover{background:rgba(22,166,121,.04);color:#66c8ad}
@media (min-width: 769px) {
  .r-hdr{padding-right:12px}
}
.r-body{flex:1;overflow-y:auto;padding:18px;padding-bottom:24px;display:flex;flex-direction:column;gap:0;background:transparent}
.compose{padding:0 14px 10px;border-top:none;display:flex;flex-shrink:0;background:transparent}
.compose-input-wrap{flex:1;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"left input right";align-items:center;background:var(--surface2);border:1.5px solid var(--border);border-radius:22px;column-gap:6px;padding:5px 8px;min-height:40px;max-height:190px;transition:border-color .15s,box-shadow .15s;overflow:hidden}
.compose-input-wrap:focus-within{border-color:var(--accent)}
.composer-actions-row{display:contents}
.composer-actions-left,.composer-actions-right{display:flex;align-items:center;gap:4px}
.composer-actions-left{grid-area:left}
.composer-actions-right{grid-area:right}
.compose-input-wrap.composer-expanded{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:8px 10px 7px;min-height:56px;max-height:260px}
.compose-input-wrap.composer-expanded .composer-actions-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;min-height:32px}
.compose-input-wrap.composer-expanded .composer-actions-left,.compose-input-wrap.composer-expanded .composer-actions-right{display:flex;align-items:center;gap:4px}
.compose-input-wrap.composer-expanded .composer-actions-right{margin-left:auto}
.compose textarea{flex:1;border:none;background:transparent;font-size:13px;font-family:var(--font);color:var(--text);resize:none;outline:none;height:20px;max-height:120px;line-height:1.5;padding:0;align-self:center;overflow-y:hidden;}
.compose textarea::placeholder{color:var(--text3)}
.c-btn{width:32px;height:32px;border:none;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .12s}
.c-btn:hover{opacity:.85}
.c-btn.mic-mode{background:transparent;color:var(--text3);}
.c-btn.mic-mode:hover{background:var(--surface2);color:var(--text2);}
.c-icon-btn{width:30px;height:30px;border:none;border-radius:50%;background:transparent;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .12s}
.c-icon-btn:hover{background:var(--surface2);color:var(--text2)}

/* ── Cluster spacing ── */
.msg-row.cluster-solo,
.msg-row.cluster-first { margin-top: 10px; }
.msg-row.cluster-middle,
.msg-row.cluster-last  { margin-top: 1px; }

/* ── Avatar spacer for hidden avatars ── */
.m-av.m-av-empty { visibility: hidden; }
.m-av.m-av-gone  { display: none; }



/* ── MESSAGES ── */
.msg-row{display:flex;gap:8px;align-items:flex-end;overflow:visible;isolation:isolate}
.msg-row.mine{flex-direction:row-reverse}
.msg-row.has-reactions{margin-bottom:14px}
.m-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0}
.m-block{max-width:min(76%, 740px);position:relative;overflow:visible}
.m-name{font-size:10px;font-weight:600;margin-bottom:2px;color:var(--text2)}
.msg-row.mine .m-name{text-align:right}
.bubble{
  display:inline-block;
  padding: 8px 12px 6px 12px;
  border-radius:12px 12px 12px 3px;
  background:var(--surface2);
  border:1px solid var(--border);
  font-size:13px;
  line-height:1.55;
  color:var(--text);
  position:relative;
  min-width:60px;
  max-width:100%;
  word-break: break-word;
}
.bubble-time {
  display: block;
  font-size: 10px;
  color: var(--text3);
  text-align: right;
  margin-top: 2px;
  line-height: 1;
  white-space: nowrap;
}
.msg-row.mine .bubble-time {
  color: #6b7280;
}

.msg-row.mine .bubble{background:#e6f7f2;color:#1a1d23;border-color:#c5e8df;border-radius:12px 12px 3px 12px}
.m-time{font-size:10px;color:var(--text3);margin-top:3px}
.msg-row.mine .m-time{text-align:right}
.file-bubble{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;cursor:pointer}
.fb-ic{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.fb-n{font-size:12px;font-weight:500}
.fb-s{font-size:10px;color:var(--text3)}
.day-sep{text-align:center;font-size:10px;color:var(--text3);margin:6px 0;display:flex;align-items:center;gap:8px}
.day-sep::before,.day-sep::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── TASK (right panel tasks tab) ── */
.task-item{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
.task-cb{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border2);cursor:pointer;flex-shrink:0;margin-top:1px;transition:all .12s;display:flex;align-items:center;justify-content:center;background:transparent}
.task-cb.done{background:var(--accent);border-color:var(--accent)}
.task-title{flex:1;font-size:12px;color:var(--text)}
.task-title.done{text-decoration:line-through;color:var(--text3)}
.task-due{font-size:10px;color:var(--text3)}
.p-h{background:#fef2f2;color:#991b1b}.p-m{background:#fff7ed;color:#9a3412}.p-l{background:#f0fdf4;color:#166534}
.prio-tag{font-size:9px;padding:1px 5px;border-radius:6px}

/* ── RIGHT SUB-TABS ── */
.rtabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.rtab{flex:1;padding:8px;font-size:11px;font-weight:500;text-align:center;cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent;color:var(--text2);font-family:var(--font);transition:all .12s}
.rtab.on{color:var(--accent);border-bottom-color:var(--accent)}

/* ── NOTES PANEL ── */
.notes-wrap{display:flex;flex:1;min-width:0;overflow:hidden}
.note-list-panel{width:240px;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}
.nlp-hdr{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.nlp-title{font-size:13px;font-weight:700}
.nlp-add{width:26px;height:26px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:18px;line-height:1}
.nlp-add:hover{background:var(--surface2)}
.note-list{flex:1;overflow-y:auto}
.nli{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}
.nli:hover{background:var(--surface2)}
.nli.on{background:var(--accent-soft);border-left:2.5px solid var(--accent)}
.nli-title{font-size:12px;font-weight:600;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-fav-star{display:inline-block;color:#d4a017;font-size:12px;margin-right:7px;vertical-align:0}
.nli-prev{font-size:11px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nli-date{font-size:10px;color:var(--text3);margin-top:3px}
.notes-action-menu .header-action-icon svg{width:17px;height:17px}
.notes-action-menu .header-action-item:hover .header-action-icon{color:var(--accent)}
.notes-action-menu .header-action-item.danger .notes-danger-icon{color:var(--text3)}
.notes-action-menu .header-action-item.danger:hover .notes-danger-icon{color:var(--danger)}
.note-editor{flex:1;display:flex;flex-direction:column;overflow:hidden}
.ne-hdr{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.ne-t{flex:1;border:none;background:transparent;font-size:14px;font-weight:700;color:var(--text);outline:none;font-family:var(--font)}
.ne-body{flex:1;padding:12px 14px;overflow-y:auto}
.ne-body textarea{width:100%;height:100%;min-height:300px;border:none;background:transparent;font-size:13px;color:var(--text);outline:none;resize:none;font-family:var(--font);line-height:1.8}
.ne-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;color:var(--text3);font-size:12px;text-align:center;padding:24px}

/* ── FILES ── */
.page-wrap{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.page-hdr{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.page-title{font-size:15px;font-weight:700}
.filter-pills{display:flex;gap:5px}
.fpill{padding:4px 11px;border-radius:20px;font-size:11px;font-weight:500;cursor:pointer;border:1.5px solid var(--border);background:transparent;color:var(--text2);font-family:var(--font);transition:all .12s}
.fpill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.page-body{flex:1;overflow-y:auto;padding:16px}
.upload-zone{border:2px dashed var(--border2);border-radius:var(--radius);padding:13px 16px;text-align:center;cursor:pointer;margin-bottom:12px;color:var(--text3);font-size:12px;transition:all .15s}
.upload-zone > div:first-child{font-size:16px!important;margin-bottom:2px!important}
.upload-zone-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin:0 auto 3px;color:var(--text3)}
.upload-zone:hover .upload-zone-icon,.upload-zone.is-dragging .upload-zone-icon{color:var(--accent)}
.upload-zone:hover,.upload-zone.is-dragging{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.files-usage{font-size:10.5px;color:var(--text3);margin:5px 0 0;text-align:center}
.files-usage.near-limit{color:#b45309}
.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.file-card{background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius);padding:12px;cursor:pointer;transition:all .12s;text-align:center;position:relative;min-height:116px}
.file-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow)}
.file-card.selected{border-color:rgba(22,166,121,.65);background:var(--accent-soft);box-shadow:0 0 0 1px rgba(22,166,121,.08)}
.fc-icon{width:40px;height:40px;border-radius:8px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--surface)}
.fc-type-icon{font-size:10px;font-weight:700;letter-spacing:0;color:var(--text2)}
.fc-thumb{width:48px;height:48px;border-radius:8px;margin:0 auto 8px;overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.fc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fc-video-thumb{position:relative;background:#111}
.fc-video-thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.fc-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:8px;font-weight:700;color:#fff;background:rgba(0,0,0,.48);border-radius:999px;padding:3px 5px;line-height:1}
.fc-name{font-size:11px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-meta{font-size:10px;color:var(--text3);margin-top:2px}
.fc-del{display:inline-block;opacity:0;pointer-events:none;background:transparent;color:var(--danger);border:1px solid rgba(239,68,68,.35);border-radius:5px;padding:2px 7px;font-size:9px;cursor:pointer;margin-top:6px;transition:opacity .12s,background .12s,border-color .12s}
.file-card:hover .fc-del,.file-card:focus-within .fc-del{opacity:1;pointer-events:auto}
.fc-del:hover{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.55)}
.fc-menu-btn{position:absolute;top:6px;right:6px;width:24px;height:24px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text2);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;cursor:pointer;font-size:12px;line-height:1;transition:opacity .12s,background .12s,border-color .12s,color .12s}
.file-card:hover .fc-menu-btn,.file-card:focus-within .fc-menu-btn{opacity:1;pointer-events:auto}
.fc-menu-btn:hover{background:var(--accent-soft);border-color:rgba(22,166,121,.35);color:var(--accent)}
.fc-check{position:absolute;top:7px;left:7px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border2);background:var(--surface);color:#fff;display:flex;align-items:center;justify-content:center;z-index:1}
.fc-check.checked{background:var(--accent);border-color:var(--accent)}
.files-select-actions{margin-left:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.files-bar-btn{border:1.5px solid var(--border);background:transparent;color:var(--text);border-radius:7px;padding:6px 11px;font-size:12px;font-family:var(--font);cursor:pointer;transition:background .1s,border-color .1s,color .1s}
.files-bar-btn:hover{background:var(--surface2)}
.files-bar-btn.danger{border-color:rgba(239,68,68,.45);color:var(--danger)}
.files-bar-btn.danger:hover{background:rgba(239,68,68,.06)}
.files-bar-btn.muted{color:var(--text2)}
.files-empty{grid-column:1/-1;min-height:130px;border:1.5px dashed var(--border);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text3);background:var(--surface2)}
.files-empty-title{font-size:13px;font-weight:600;color:var(--text2)}
.files-empty-sub{font-size:11px;margin-top:3px}

/* ── LINKS ── */
.l-add-bar{display:flex;gap:7px;margin-bottom:12px}
.l-add-bar input,.l-add-bar select{flex:1;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;font-size:12px;font-family:var(--font);color:var(--text);background:var(--surface);outline:none}
.l-add-bar input:focus,.l-add-bar select:focus{border-color:var(--accent)}
.l-add-bar button{padding:7px 12px;border:none;background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-size:12px;cursor:pointer;font-family:var(--font);white-space:nowrap}
.links-usage{color:var(--text3);font-size:11px;font-weight:500}
.links-filter-pills{align-items:center}
.links-search-wrap{display:inline-flex;align-items:center}
.links-filter-pills .fpill,.links-search-btn,.links-search-input{height:25px;box-sizing:border-box}
.links-filter-pills .fpill,.links-search-btn{display:inline-flex;align-items:center;justify-content:center;padding:0 11px;line-height:1}
.links-search-btn{min-width:36px;border-radius:20px}
.links-search-btn svg{width:14px;height:14px;display:block;flex-shrink:0}
.links-search-input{width:132px;height:25px;box-sizing:border-box;border:1.5px solid var(--border);border-radius:20px;background:transparent;color:var(--text);font:500 11px var(--font);line-height:1;padding:4px 10px;outline:none}
.links-search-input:focus{border-color:var(--accent);background:var(--surface)}
.links-select-actions{margin-left:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.links-bar-btn{border:1.5px solid var(--border);background:transparent;color:var(--text);border-radius:7px;padding:6px 11px;font-size:12px;font-family:var(--font);cursor:pointer;transition:background .1s,border-color .1s,color .1s}
.links-bar-btn:hover{background:var(--surface2)}
.links-bar-btn.danger{border-color:rgba(239,68,68,.45);color:var(--danger)}
.links-bar-btn.danger:hover{background:rgba(239,68,68,.06)}
.links-bar-btn.muted{color:var(--text2)}
.links-action-menu .header-action-icon svg{width:17px;height:17px}
.links-action-menu .header-action-item.danger .links-danger-icon{color:var(--text3)}
.links-action-menu .header-action-item.danger:hover .links-danger-icon{color:var(--danger)}
.link-card{display:flex;align-items:center;gap:10px;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius);padding:11px 13px;margin-bottom:8px;cursor:pointer;transition:all .12s;position:relative}
.link-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.link-card[draggable="true"]{cursor:grab}
.link-card.dragging{opacity:.64;box-shadow:var(--shadow);cursor:grabbing}
.link-card.drag-over{background:var(--accent-soft);border-color:rgba(22,166,121,.45)}
.link-card.selected{border-color:rgba(22,166,121,.65);background:var(--accent-soft);box-shadow:0 0 0 1px rgba(22,166,121,.08)}
.link-select-check{position:absolute;top:7px;left:7px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border2);background:var(--surface);color:#fff;display:flex;align-items:center;justify-content:center;z-index:1}
.link-select-check.checked{background:var(--accent);border-color:var(--accent)}
.l-thumb{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:var(--surface)}
.l-info{flex:1;min-width:0}
.l-title{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l-url{font-size:10px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l-badge{font-size:9px;font-weight:600;padding:2px 6px;border-radius:8px;flex-shrink:0}
.lb-docs{background:var(--blue-soft);color:var(--blue)}
.lb-tools{background:var(--accent-soft);color:var(--accent-dark)}
.lb-refs{background:var(--purple-soft);color:var(--purple)}
.l-actions{display:flex;align-items:center;gap:3px;flex-shrink:0}
.l-action-btn{
  width:26px;
  height:26px;
  border:none;
  border-radius:6px;
  background:transparent;
  color:var(--text3);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background .12s,color .12s;
}
.l-action-btn svg{width:14px;height:14px}
.l-action-btn:hover{background:var(--surface);color:var(--text2)}
.l-action-btn.copied{color:var(--accent);font-size:14px;font-weight:700}
.l-del{font-size:17px;line-height:1}
.l-del:hover{color:var(--danger)}

/* ── VAULT ── */
.vault-lock{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:14px;text-align:center;padding:40px}
.vl-icon{width:60px;height:60px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.vl-title{font-size:16px;font-weight:700}
.vl-sub{font-size:12px;color:var(--text2);max-width:260px;line-height:1.6}
.vl-inp{border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:9px 14px;font-size:13px;font-family:var(--font);color:var(--text);background:var(--surface2);outline:none;width:220px;text-align:center;letter-spacing:0}
.vl-inp::placeholder{letter-spacing:0;color:var(--text3)}
.vl-inp:focus{border-color:var(--accent)}
.vl-btn{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:9px 24px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font)}
.vl-btn:hover{opacity:.85}
.vl-err{font-size:11px;color:var(--danger)}
.vl-hint{font-size:10px;color:var(--text3)}
.vl-warn{font-size:11px;color:var(--warn-text);background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:var(--radius-sm);padding:8px 12px;max-width:300px;line-height:1.5}
.vault-open{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.vault-top{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.vault-top-title{font-size:14px;font-weight:700}
.v-lock-btn{border:1.5px solid var(--border);background:transparent;color:var(--text2);border-radius:var(--radius-sm);padding:5px 10px;font-size:11px;cursor:pointer;font-family:var(--font)}
.v-lock-btn:hover{background:var(--surface2)}
.vault-reset-link{margin-top:2px;border-color:transparent;color:var(--text3);background:transparent}
.vault-reset-link:hover{color:var(--danger);background:rgba(239,68,68,0.06)}
.vault-body{flex:1;min-height:0;overflow-y:auto;padding:14px}
.vault-warn-bar{font-size:11px;color:var(--warn-text);background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:var(--radius-sm);padding:8px 12px;margin-bottom:12px;line-height:1.5}
.vacc{display:flex;align-items:flex-start;gap:10px;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius);padding:8px 12px;margin-bottom:7px;cursor:grab;transition:background .12s,border-color .12s,box-shadow .12s,opacity .12s}
.vacc.dragging{opacity:.64;box-shadow:var(--shadow);cursor:grabbing}
.vacc.drag-over{background:var(--accent-soft);border-color:rgba(22,166,121,.45)}
.vacc-ic{width:34px;height:34px;border-radius:8px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.vacc-info{flex:1;min-width:0}
.vacc-name{font-size:12.5px;font-weight:650;color:var(--text);line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vacc-field-row{display:flex;align-items:center;gap:8px;margin-top:0;min-width:0}
.vacc-user{flex:1;min-width:0;font-size:11px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vacc-pass{flex:1;min-width:0;font-size:11px;font-family:var(--mono);color:var(--text3);letter-spacing:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vacc-note{font-size:10px;color:var(--text3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vacc-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:3px;flex-shrink:0}
.va-action-btn{
  width:26px;
  height:26px;
  border:none;
  border-radius:6px;
  background:transparent;
  color:var(--text3);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background .12s,color .12s;
}
.va-action-btn svg{width:14px;height:14px}
.va-action-btn:hover{background:var(--accent-soft);color:var(--accent)}
.va-action-btn.copied{color:var(--accent);font-size:14px;font-weight:700}
.va-eye.is-visible{background:rgba(239,68,68,0.08);color:var(--danger)}
.va-eye.is-visible:hover{background:rgba(239,68,68,0.12);color:var(--danger)}
.va-del:hover{color:var(--danger);background:rgba(239,68,68,0.06)}
.vacc-add{background:var(--surface2);border:1.5px dashed var(--border2);border-radius:var(--radius);padding:14px;margin-bottom:10px}
.vacc-add-title{font-size:12px;font-weight:600;margin-bottom:10px}
.va-field{width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;font-size:12px;font-family:var(--font);color:var(--text);background:var(--surface);outline:none;margin-bottom:7px}
.va-field:focus{border-color:var(--accent)}
.va-submit{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:7px 16px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font)}
.va-submit:hover{opacity:.85}

/* ── VAULT 2 ── */
.v2-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:14px;text-align:center;padding:40px}
.v2-icon{width:60px;height:60px;border-radius:50%;background:#fff7ed;display:flex;align-items:center;justify-content:center;font-size:26px}
.v2-badge{background:#fef3c7;color:#92400e;border:1px solid #fbbf24;border-radius:20px;padding:4px 14px;font-size:11px;font-weight:700}
.v2-title{font-size:16px;font-weight:700}
.v2-sub{font-size:12px;color:var(--text2);max-width:260px;line-height:1.6}
.v2-btn{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;border-radius:var(--radius-sm);padding:10px 24px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font)}
.v2-feats{display:flex;flex-direction:column;gap:6px;text-align:left;max-width:220px}
.v2-feat{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:6px}

/* ── SETTINGS ── */
.settings-wrap{padding:18px;max-width:540px}
.s-card{background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:12px}
.s-card-title{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.s-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}
.s-row:last-child{border-bottom:none}
.profile-bio-row{padding:4px 0 1px;border-bottom:none}
.profile-bio-field{position:relative;width:100%;border-bottom:1.5px solid var(--border2);transition:border-color .12s}
.profile-bio-field:focus-within{border-bottom-color:var(--accent)}
.profile-bio-field textarea{display:block;width:100%;min-height:26px;height:26px;max-height:26px;resize:none;overflow:hidden;border:0;background:transparent;color:var(--text);font-family:var(--font);font-size:13px;line-height:1.35;padding:2px 66px 5px 0;outline:none}
.profile-bio-field textarea::placeholder{color:var(--text2)}
.profile-bio-count{position:absolute;right:0;top:3px;font-size:11px;color:var(--text3);pointer-events:none;line-height:1.35}
.profile-bio-error{display:block;margin-top:2px;font-size:11px;color:var(--danger)}
.profile-bio-error:empty{display:none}
.s-lbl{font-size:12px;font-weight:500}
.s-val{font-size:12px;color:var(--text2)}
.profile-inline-input{width:190px;max-width:58%;border:0;background:transparent;color:var(--text2);font:inherit;font-size:12px;text-align:right;outline:none;padding:2px 0}
.profile-inline-input:focus{color:var(--text)}
.profile-username-value{display:inline-block;box-sizing:border-box;line-height:1.35}
.profile-username-locked{cursor:pointer}
.s-toggle{width:36px;height:20px;background:var(--border2);border-radius:20px;cursor:pointer;position:relative;transition:all .2s;border:none;flex-shrink:0}
.s-toggle.on{background:var(--accent)}
.s-toggle::after{content:'';position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:3px;left:3px;transition:all .2s}
.s-toggle.on::after{left:19px}
.s-btn{border:1.5px solid var(--border);background:transparent;border-radius:var(--radius-sm);padding:5px 12px;font-size:11px;cursor:pointer;font-family:var(--font);color:var(--text2)}
.s-btn:hover{background:var(--surface)}
.s-btn.danger{border-color:var(--danger);color:var(--danger)}

/* ── MODAL ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:200}
.modal-bg.show{display:flex}
.modal{background:var(--surface);border-radius:var(--radius-lg);padding:20px;width:90%;max-width:360px;box-shadow:var(--shadow-lg);max-height:85vh;overflow-y:auto;}
.modal h3{font-size:15px;font-weight:700;margin-bottom:14px}
.modal input,.modal textarea,.modal select{width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;font-family:var(--font);color:var(--text);background:var(--surface2);outline:none;margin-bottom:10px}
.modal input:focus,.modal textarea:focus,.modal select:focus{border-color:var(--accent)}
.modal textarea{min-height:110px;resize:vertical}
.modal-footer{display:flex;gap:7px;justify-content:flex-end;margin-top:4px}
.btn-cancel{border:1.5px solid var(--border);background:transparent;border-radius:var(--radius-sm);padding:7px 14px;font-size:12px;cursor:pointer;font-family:var(--font);color:var(--text2)}
.btn-save{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:7px 16px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font)}
.btn-del{background:var(--danger);color:#fff;border:none;border-radius:var(--radius-sm);padding:7px 14px;font-size:12px;cursor:pointer;font-family:var(--font)}

/* ── EMPTY ── */
.empty{text-align:center;padding:28px;color:var(--text3);font-size:12px;line-height:1.6}

@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.2; transform: scale(1); }
  30%            { opacity: 1;   transform: scale(1.3); }
}

/* ── Connection banner ── */
#connectionBanner {
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* ── Right-click Context Menu ── */
.ctx-menu {
  position: fixed;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 5px 0;
  min-width: 200px;
  z-index: 9999;
  animation: ctxFadeIn .1s ease;
}
@keyframes ctxFadeIn {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}
.taski-toast-container {
  position: fixed;
  left: var(--toast-left, 50%);
  bottom: max(var(--toast-bottom, 18px), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 10000;
  width: min(var(--toast-area-width, calc(100vw - 28px)), 260px);
  pointer-events: none;
  display: flex;
  justify-content: center;
}
.taski-toast {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(24, 28, 34, .94);
  color: #fff;
  box-shadow: 0 6px 16px rgba(16, 24, 40, .12), 0 1px 4px rgba(16, 24, 40, .1);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
  animation: taskiToastIn .18s ease-out;
}
.taski-toast.success { border-left: 1px solid rgba(34, 197, 94, .85); }
.taski-toast.warning { border-left: 1px solid rgba(245, 158, 11, .85); }
.taski-toast.error   { border-left: 1px solid rgba(239, 68, 68, .85); }
.taski-toast-icon {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
}
.taski-toast-text {
  min-width: 0;
}
.taski-toast.leaving {
  animation: taskiToastOut .16s ease-in forwards;
}
@keyframes taskiToastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes taskiToastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(6px); }
}
.ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background .1s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--font);
}
.ctx-item:hover { background: var(--surface2); }
.ctx-item.danger { color: var(--danger); }
.ctx-item.muted  { color: var(--text3); }
.ctx-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.ctx-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.ctx-arrow { margin-left: auto; color: var(--text3); font-size: 11px; }

.header-action-menu{
  position:fixed;
  min-width:168px;
  padding:5px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  box-shadow:var(--shadow-lg);
  z-index:9999;
  animation:ctxFadeIn .1s ease;
}
.header-action-item{
  width:100%;
  border:none;
  background:transparent;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 9px;
  border-radius:7px;
  font-size:13px;
  font-family:var(--font);
  text-align:left;
  cursor:pointer;
  transition:background .1s,color .1s;
}
.header-action-item:hover{background:var(--surface2)}
.header-action-item.danger{color:var(--text)}
.header-action-item.danger:hover{background:rgba(239,68,68,.06);color:var(--text)}
.header-action-icon{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text3);
  flex-shrink:0;
}
.header-action-icon svg{width:16px;height:16px}
.header-action-item:hover .header-action-icon{color:var(--accent)}
.header-action-item.danger:hover .header-action-icon{color:var(--danger)}
.files-action-menu .header-action-icon svg{width:17px;height:17px}
.files-action-menu .header-action-item.danger .files-danger-icon,
.shared-content-action-menu .header-action-item.danger .files-danger-icon{color:var(--text3)}
.files-action-menu .header-action-item.danger:hover .files-danger-icon,
.shared-content-action-menu .header-action-item.danger:hover .files-danger-icon{color:var(--danger)}
.shared-content-action-menu .header-action-icon svg{width:17px;height:17px}
.group-plus-composed{position:relative;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:inherit}
.group-plus-composed svg{width:18px;height:18px}
.group-plus-badge{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border:1.7px solid currentColor;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;line-height:1;color:currentColor}

.poll-add-option{
  width:100%;
  border:1px dashed var(--border2);
  background:transparent;
  color:var(--accent);
  border-radius:var(--radius-sm);
  padding:7px 10px;
  font-size:12px;
  font-weight:600;
  font-family:var(--font);
  cursor:pointer;
  margin-bottom:10px;
}
.poll-add-option:hover{background:var(--accent-soft)}
#modalBox:has(#pollQuestion){max-width:380px;width:min(380px,calc(100vw - 28px))}
.poll-option-row{display:flex;align-items:center;gap:6px}
.poll-option-row .poll-option-input{margin-bottom:10px}
.poll-remove-option{
  width:28px;
  height:28px;
  border:none;
  border-radius:50%;
  background:transparent;
  color:var(--text3);
  cursor:pointer;
  font-size:17px;
  line-height:1;
  flex-shrink:0;
  margin-bottom:10px;
}
.poll-remove-option:hover{background:var(--surface2);color:var(--danger)}
.poll-settings-section{border-top:1px solid var(--border);padding-top:9px;margin:0 0 9px;display:flex;flex-direction:column;gap:5px}
.poll-settings-title{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:1px}
.poll-setting-row{display:flex;align-items:center;gap:10px;border-radius:8px;padding:6px 7px;cursor:pointer;transition:background .1s,color .1s}
.poll-setting-row:hover{background:var(--accent-soft);color:var(--accent)}
.poll-setting-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--text3);flex-shrink:0}
.poll-setting-icon svg{width:16px;height:16px}
.poll-setting-row:hover .poll-setting-icon{color:var(--accent)}
.poll-setting-text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--text)}
.poll-setting-text small{font-size:10px;font-weight:400;color:var(--text3);line-height:1.25}
.poll-setting-row input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.poll-duration-select{width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:var(--font);font-size:12px;padding:7px 9px;outline:none}
.poll-duration-select:focus{border-color:var(--accent)}
.poll-duration-select:disabled{opacity:.5;cursor:not-allowed}
.poll-create-error{
  min-height:16px;
  margin:-2px 0 8px;
  color:var(--danger);
  font-size:11px;
  line-height:1.35;
}
.poll-create-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.poll-bubble{min-width:240px;max-width:320px}
.poll-card{display:flex;flex-direction:column;gap:8px;padding-bottom:14px}
.poll-kicker{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
.poll-question{font-size:14px;font-weight:700;color:var(--text);line-height:1.35}
.poll-options{display:flex;flex-direction:column;gap:6px}
.poll-option{
  border:1px solid var(--border);
  background:var(--surface2);
  border-radius:8px;
  padding:7px 8px;
  cursor:pointer;
  font-family:var(--font);
  color:var(--text);
  text-align:left;
  overflow:hidden;
}
.poll-option:hover{border-color:var(--border2);background:var(--surface)}
.poll-option.selected{border-color:var(--accent);background:var(--accent-soft)}
.poll-option.readonly{cursor:default;opacity:.92;color:var(--text)}
.poll-option.readonly:hover{border-color:var(--border);background:var(--surface2)}
.poll-option-main{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;position:relative;z-index:1}
.poll-option-text{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.poll-option-meta{display:flex;align-items:center;gap:5px;flex-shrink:0;min-width:0}
.poll-option-count{color:var(--text3);font-size:11px;white-space:nowrap}
.poll-voters{display:flex;align-items:center;flex-shrink:0;padding-left:1px;opacity:.86}
.poll-voter-avatar{
  width:16px;
  height:16px;
  border-radius:50%;
  border:1px solid var(--surface2);
  background:var(--surface);
  color:var(--text3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:8px;
  font-weight:700;
  line-height:1;
  overflow:hidden;
  margin-left:-6px;
}
.poll-voter-avatar:first-child{margin-left:0}
.poll-voter-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.poll-voter-more{
  margin-left:-6px;
  min-width:16px;
  height:16px;
  border-radius:999px;
  border:1px solid var(--surface2);
  background:var(--surface);
  color:var(--text3);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 3px;
  font-size:8px;
  font-weight:700;
  line-height:1;
}
.poll-bar{height:4px;background:var(--border);border-radius:999px;margin-top:6px;overflow:hidden}
.poll-bar span{display:block;height:100%;background:var(--accent);border-radius:999px;opacity:.55;transition:width .2s}
.poll-total{font-size:11px;color:var(--text3)}
.poll-close-status{color:var(--text3)}
.poll-completed-status{color:var(--accent);font-weight:600}
.poll-open-status{color:var(--accent)}
.poll-total-separator{opacity:.65}
.poll-readonly-note{font-size:10px;color:var(--text3);line-height:1.35}

.conv-item.pinned {
  border-left: 2.5px solid var(--accent);
}
.conv-item.pinned .c-name::after {
  content: ' 📌';
  font-size: 10px;
}
.pinned-msg .bubble,
.pinned-msg .file-bubble {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bubble.deleted-bubble {
  background: rgba(0,0,0,0.025) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: none !important;
  padding: 5px 10px 4px 10px !important;
  min-width: 0 !important;
  opacity: 0.75;
}
.msg-row.mine .bubble.deleted-bubble {
  background: rgba(22,166,121,0.05) !important;
  border: 1px solid rgba(22,166,121,0.15) !important;
}

[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #1a1d23;
  --surface2: #22262f;
  --border: #2d3139;
  --border2: #3a3f4a;
  --text: #e8eaed;
  --text2: #9ca3af;
  --text3: #6b7280;
  --accent: #16a679;
  --accent-soft: #0d2e22;
  --accent-dark: #12d68a;
  --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.4);
}

[data-theme="dark"] .nav {
  background: #111318;
}

[data-theme="dark"] .modal {
  background: var(--surface);
}
.msg-row.search-hit .bubble,
.msg-row.search-hit .file-bubble {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 10px;
}
.msg-row.search-active .bubble,
.msg-row.search-active .file-bubble {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--accent-soft) !important;
}

/* ── Select mode ── */
.msg-cb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  background: var(--surface);
  flex-shrink: 0;
  align-self: center;
  margin-right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.msg-cb.checked {
  background: var(--accent);
  border-color: var(--accent);
}

.msg-row.msg-selected {
  background: var(--accent-soft);
  border-radius: 10px;
}

/* In select mode, remove hover action button opacity flash */
body.select-active .msg-actions {
  display: none !important;
}

.ne-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.ne-fmt {
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text2);
  cursor: pointer;
  transition: background .1s;
  line-height: 1;
}

.ne-fmt:hover {
  background: var(--surface2);
  color: var(--text);
}

.ne-fmt-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 4px;
}

/* Placeholder for contenteditable */
#nBody:empty:before {
  content: attr(data-placeholder);
  color: var(--text3);
  pointer-events: none;
}

#nBody {
  padding: 2px 4px 2px 12px;
}

#nBody ul,
#nBody ol {
  margin: 4px 0;
  padding-left: 20px;
}

#nBody li {
  margin: 2px 0;
}

#nBody li:empty {
  min-height: 1.4em;
}

@media (max-width: 768px) {
  .notes-wrap {
    flex-direction: column;
  }

  .note-list-panel {
    width: 100% !important;
  }

  .note-editor {
    width: 100% !important;
  }

  /* Hide list when a note is open on mobile */
  .notes-wrap.note-open .note-list-panel {
    display: none !important;
  }

  /* Hide editor when no note is open on mobile */
  .notes-wrap:not(.note-open) .note-editor {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .notes-wrap {
    position: relative;
  }

  .notes-wrap:not(.note-open) .note-editor,
  .notes-wrap:not(.note-open) .ne-empty {
    display: none !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  .notes-wrap:not(.note-open) .note-list-panel {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
  }

  .notes-wrap.note-open .note-list-panel {
    display: none !important;
  }

  .notes-wrap.note-open .note-editor {
    width: 100% !important;
    flex: 1 !important;
  }
}

/* ── style React ── */
.react-strip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  transform-origin: bottom left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  gap: 1px;
  box-shadow: var(--shadow-lg);
  z-index: 10000;
  opacity: 0;
  transform: scale(0.75) translateY(6px);
  pointer-events: none;
  transition: opacity .15s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap;
}

.react-strip.strip-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.rs-btn {
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s, background .1s;
  padding: 0;
  line-height: 1;
}

.rs-btn:hover {
  transform: scale(1.35);
  background: var(--surface2);
}

.rs-chevron {
  font-size: 13px;
  color: var(--text2);
  font-family: var(--font);
  font-weight: 600;
}

/* ── Contenteditable input ── */
#msgIn {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  grid-area: input;
  width: 100%;
  min-height: 20px;
  max-height: 122px;
  line-height: 20px;
  padding: 0 6px;
  overflow-y: auto;
  word-wrap: break-word;
  white-space: pre-wrap;
  align-self: center;
  box-sizing: border-box;
}

.compose-input-wrap.composer-expanded #msgIn {
  max-height: 190px;
  align-self: stretch;
  min-height: 24px;
  line-height: 1.5;
  padding: 4px 6px;
}

#msgIn:empty:before {
  content: attr(data-placeholder);
  color: var(--text3);
  pointer-events: none;
  display: block;
  line-height: inherit;
  transform: none;
}

.compose-input-wrap.composer-expanded #msgIn:empty:before {
  line-height: 1.5;
  transform: none;
}

#msgIn b, #msgIn strong { font-weight: 700; }
#msgIn i, #msgIn em     { font-style: italic; }
#msgIn s, #msgIn strike { text-decoration: line-through; }

/* ── System messages (group rename, avatar change, etc.) ── */
.sys-msg {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}
.sys-msg span {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
  max-width: 80%;
  text-align: center;
  line-height: 1.4;
}

/* ── Drag & Drop Overlay ── */
.drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(22, 166, 121, 0.12);
  border: 3px dashed var(--accent);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 500;
  pointer-events: none;
  gap: 12px;
  backdrop-filter: blur(2px);
}
.drop-overlay-icon {
  font-size: 48px;
  line-height: 1;
}
.drop-overlay-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font);
}
.drop-overlay-sub {
  font-size: 12px;
  color: var(--text2);
  font-family: var(--font);
}

/* ── Inline Video Player ── */
.video-bubble {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  cursor: default;
  max-width: 320px;
  width: fit-content;
}
.video-bubble video {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 10px;
  background: #000;
}
.video-bubble-meta {
  font-size: 11px;
  color: var(--text3);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.r-body {
  position: relative;
}

/* ── Shared Content Video Grid ── */
.sv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 100%;
}
.sv-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.sv-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sv-duration {
  position: absolute;
  bottom: 4px;
  left: 5px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: 3px;
}
.sv-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  padding: 10px 0 5px;
  letter-spacing: 0.03em;
}

/* ── Seen-by indicators ── */
.shared-select-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 16px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  color:var(--text2);
  font-size:12px;
  font-weight:600;
}
.shared-select-actions{display:flex;align-items:center;gap:6px}
.shared-select-actions button{
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text2);
  border-radius:7px;
  padding:5px 10px;
  font-family:var(--font);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.shared-select-actions button:hover:not(:disabled){
  color:var(--accent);
  border-color:var(--accent-soft);
  background:var(--accent-soft);
}
.shared-select-actions button:disabled{opacity:.45;cursor:default}
.shared-selectable{position:relative}
.shared-selectable.is-selected{
  outline:2px solid rgba(22,166,121,.55);
  outline-offset:-2px;
  background:var(--accent-soft) !important;
}
.shared-select-check{
  position:absolute;
  top:6px;
  right:6px;
  width:18px;
  height:18px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.88);
  background:rgba(15,23,42,.45);
  color:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
  pointer-events:none;
}
.shared-select-active .shared-select-check,
.shared-selectable:hover .shared-select-check,
.shared-select-check.checked{display:flex}
.shared-select-check svg{width:11px;height:11px}

.shared-poll-item{
  width:100%;
  border:none;
  border-bottom:1px solid var(--border);
  background:transparent;
  color:var(--text);
  font-family:var(--font);
  text-align:left;
  padding:10px 0;
  cursor:pointer;
  transition:background .12s ease;
}
.shared-poll-item:hover{background:var(--accent-soft)}
.shared-poll-top{display:flex;align-items:flex-start;gap:10px}
.shared-poll-icon{
  width:34px;
  height:34px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.shared-poll-item.is-closed .shared-poll-icon,
.shared-poll-item.is-completed .shared-poll-icon{color:var(--text3);background:var(--surface2)}
.shared-poll-main{flex:1;min-width:0}
.shared-poll-question{
  font-size:13px;
  font-weight:650;
  line-height:1.3;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.shared-poll-meta{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:3px;
  font-size:10.5px;
  color:var(--text3);
}
.shared-poll-status{color:var(--accent);font-weight:700}
.shared-poll-status.closed{color:var(--text3)}
.shared-poll-status.completed{color:var(--accent)}
.shared-poll-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-top:5px;
  padding:1px 6px;
  border-radius:999px;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text3);
  font-size:10px;
  font-weight:600;
  line-height:1.4;
}
.shared-poll-preview{display:flex;flex-direction:column;gap:5px;margin:8px 0 0 42px}
.shared-poll-preview-row{display:grid;grid-template-columns:minmax(0,1fr) 46px;align-items:center;gap:6px}
.shared-poll-preview-row span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  line-height:1.25;
  font-weight:500;
  color:var(--text2);
}
.shared-poll-preview-row div{
  height:3px;
  border-radius:999px;
  background:var(--border);
  overflow:hidden;
}
.shared-poll-preview-row i{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--accent);
  opacity:.46;
}
.shared-poll-item.is-closed .shared-poll-preview-row i{background:var(--text3);opacity:.35}
.shared-poll-item.is-completed .shared-poll-preview-row i{opacity:.38}

.seen-by-row {
  display: flex;
  align-items: center;
  margin-top: 2px;
  margin-bottom: 1px;
  justify-content: flex-end;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.85;
  transition: opacity 120ms ease;
}

.seen-by-row:hover {
  opacity: 1;
}

.seen-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--accent);
  background-size: cover;
  background-position: center;
  color: #fff;
  font-size: 8px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--surface);
  position: relative;
  transition: transform 120ms ease;
}

.seen-avatar + .seen-avatar {
  margin-left: -5px;
}

.seen-avatar-more {
  background-color: var(--text3);
  font-size: 7px;
}

.seen-avatar-sm {
  width: 22px;
  height: 22px;
  font-size: 10px;
}

.seen-by-row:hover .seen-avatar {
  transform: scale(1.1);
}

/* ── Seen-by popup ── */
.seen-by-popup {
  position: fixed;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 0;
  width: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}

.seen-by-popup-title {
  font-size: 9px;
  font-weight: 600;
  color: var(--text3);
  padding: 2px 9px 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.seen-by-popup-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
}

.seen-by-popup-item:hover {
  background: var(--surface2);
}

/* ── Outgoing react strip — mirror to right side ── */
.react-strip-out {
  right: 0;
  left: auto;
}
/* ── Reaction chip hover states ── */
.msg-row.mine .reaction-count {
  color: var(--text2);
}

.msg-row:not(.mine) .reaction-count {
  color: var(--text2);
}

/* ══════════════════════════════════════
   REACTION CHIPS — Telegram/WhatsApp style
   Compact, grouped, attached to bubble edge
   ══════════════════════════════════════ */

/* Reaction container — group multiple chips as one metadata row */
.m-block > div[style*="flex-wrap:wrap"] {
  margin-top: -8px !important;
  margin-bottom: 2px !important;
  position: relative;
  z-index: 5;
  gap: 1px !important;
  padding: 0 5px;
  row-gap: 2px !important;
}

.msg-bubble-stack {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: visible;
}

.msg-reactions {
  position: absolute !important;
  left: 8px;
  bottom: -4px;
  z-index: 5 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1;
  pointer-events: auto;
  max-width: calc(100% - 16px);
}

.msg-bubble-stack:has(.bubble) .msg-reactions {
  bottom: -14px;
}

.msg-bubble-stack:has(.attachment-bubble) + .seen-by-row {
  margin-top: -2px !important;
}

.msg-row.mine .msg-reactions {
  justify-content: flex-start !important;
}

/* Individual chip — tight, compact */
.m-block > div[style*="flex-wrap:wrap"] > span,
.msg-reactions > span {
  padding: 2px 7px !important;        /* was 1px 5px */
  font-size: 12px !important;         /* was 10px — drives emoji size */
  border-radius: 9px !important;
  gap: 2px !important;
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  min-height: 20px;                   /* was 18px */
  border-width: 1px !important;
}

/* Incoming reactions — match incoming bubble color */
.msg-row:not(.mine) .m-block > div[style*="flex-wrap:wrap"] > span,
.msg-row:not(.mine) .msg-reactions > span {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
}

/* Outgoing reactions — match outgoing bubble color */
.msg-row.mine .m-block > div[style*="flex-wrap:wrap"] > span,
.msg-row.mine .msg-reactions > span {
  background: #e6f7f2 !important;
  border-color: #c5e8df !important;
}

/* Count text — subordinate to emoji */
.m-block > div[style*="flex-wrap:wrap"] > span > span,
.msg-reactions > span > span {
  font-size: 10px !important;         /* was 9px */
  color: var(--text3) !important;
  font-weight: 500;
}

/* Bubble stacks below reaction for overlap */
.bubble {
  z-index: 1;
}

/* ── METADATA HIERARCHY ──
   reactions (closest to bubble) → seen avatars (subtle, lower)
*/
.seen-by-row {
  margin-top: 1px !important;
  margin-bottom: 0 !important;
  opacity: 0.7;
  padding: 0 4px !important;
}

.seen-by-row:hover {
  opacity: 1;
}

.seen-avatar {
  width: 14px !important;
  height: 14px !important;
  font-size: 7px !important;
  border-width: 1.5px !important;
}

.seen-avatar + .seen-avatar {
  margin-left: -4px !important;
}
/* ══════════════════════════════════════
   OUTGOING REACTIONS — anchor to bottom-LEFT
   Balances the bubble: reactions left, timestamps/ticks right
   ══════════════════════════════════════ */

.msg-row.mine .m-block > div[style*="flex-wrap:wrap"] {
  justify-content: flex-start !important;
  padding-left: 8px !important;
  padding-right: 0 !important;
}

/* ── Mention chip in composer ── */
.mention-chip {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 600;
  font-size: 13px;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}

/* ── Mention in bubble ── */
.mention {
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  border-radius: 3px;
  padding: 0 2px;
  transition: background 0.1s;
}
.mention:hover {
  background: var(--accent-soft);
}

/* ── @everyone chip ── */
.mention-chip.mention-everyone {
  background: #fff3e0;
  color: #e65100;
}
.mention.mention-everyone {
  color: #e65100;
  font-weight: 700;
}

/* ── Mention dropdown ── */
#mentionDropdown {
  position: fixed;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  min-width: 200px;
  max-width: 300px;
  max-height: 220px;
  overflow-y: auto;
  font-family: var(--font);
  animation: ctxFadeIn .1s ease;
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .1s;
  font-size: 13px;
  color: var(--text);
}

.mention-item:hover,
.mention-item.active {
  background: var(--accent-soft);
}

.mention-item-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.mention-item-name {
  font-weight: 600;
  font-size: 13px;
}

.mention-item-user {
  font-size: 11px;
  color: var(--text3);
}

.mention-everyone-badge {
  font-size: 9px;
  background: #fff3e0;
  color: #e65100;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 700;
  margin-left: auto;
}

/* ── Attachment Preview Modal ── */
#attachPreviewModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  font-family: var(--font);
}

#attachPreviewModal .ap-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 400px;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

#attachPreviewModal .ap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

#attachPreviewModal .ap-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text3);
  line-height: 1;
  padding: 0;
}

#attachPreviewModal .ap-previews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 12px;
  overflow-y: auto;
  max-height: 240px;
}

#attachPreviewModal .ap-preview-item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface2);
  border: 1px solid var(--border);
}

#attachPreviewModal .ap-preview-item.is-image {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface2);
  border: 1px solid var(--border);
  width: 100%;
  height: auto;
}

#attachPreviewModal .ap-preview-item.is-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#attachPreviewModal .ap-preview-item.is-file {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
}

#attachPreviewModal .ap-file-icon {
  font-size: 28px;
  flex-shrink: 0;
}

#attachPreviewModal .ap-file-info {
  min-width: 0;
}

#attachPreviewModal .ap-file-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

#attachPreviewModal .ap-file-size {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}

#attachPreviewModal .ap-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#attachPreviewModal .ap-add-more {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 100%;
  border: 2px dashed var(--border2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text3);
  font-size: 24px;
  background: transparent;
  transition: border-color .1s, color .1s;
}

#attachPreviewModal .ap-add-more:hover {
  border-color: var(--accent);
  color: var(--accent);
}

#attachPreviewModal .ap-caption-wrap {
  padding: 0 16px 10px;
  border-top: 1px solid var(--border);
}

#attachPreviewModal .ap-caption-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  padding: 10px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#attachPreviewModal .ap-caption-input {
  min-height: 36px;
  max-height: 100px;
  overflow-y: auto;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text);
  background: var(--surface2);
  outline: none;
  word-wrap: break-word;
  white-space: pre-wrap;
  transition: border-color .15s;
}

#attachPreviewModal .ap-caption-input:focus {
  border-color: var(--accent);
}

#attachPreviewModal .ap-caption-input:empty:before {
  content: attr(data-placeholder);
  color: var(--text3);
  pointer-events: none;
}

#attachPreviewModal .ap-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

#attachPreviewModal .ap-add-btn {
  padding: 7px 14px;
  border: 1.5px solid var(--border);
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font);
  color: var(--text2);
  margin-right: auto;
}

#attachPreviewModal .ap-cancel {
  padding: 8px 18px;
  border: 1.5px solid var(--border);
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font);
  color: var(--text2);
}

#attachPreviewModal .ap-send {
  padding: 8px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: 6px;
}

#attachPreviewModal .ap-send:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Caption below image/file bubble */
.file-caption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  padding: 6px 10px 2px 10px;
  word-break: break-word;
}

.msg-row.mine .file-caption {
  color: #1a1d23;
}

.msg-row.mine .file-caption {
  color: #1a1d23;
}

/* ── Attachment bubble wrapper ── */
.attachment-bubble {
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
  max-width: 280px;
  background: var(--surface2);
  border: 1px solid var(--border);
}

.msg-row.mine .attachment-bubble {
  background: #e6f7f2;
  border-color: #c5e8df;
}

.forwarded-header {
  font-size: 10px;
  font-style: italic;
  margin: 0 0 6px;
  padding: 0 0 5px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  color: var(--text2);
}

.forwarded-header strong {
  font-style: normal;
  color: var(--text);
  font-weight: 600;
}

.msg-row.mine .forwarded-header {
  color: rgba(26,29,35,.62);
  border-bottom-color: rgba(0,0,0,.1);
}

.msg-row.mine .forwarded-header strong {
  color: rgba(26,29,35,.78);
}

.attachment-bubble > .forwarded-header {
  margin: 0;
  padding: 7px 9px 6px;
}

.attachment-bubble .file-caption {
  padding: 4px 10px 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  word-break: break-word;
}

.msg-row.mine .attachment-bubble .file-caption {
  color: #1a1d23;
}

.attachment-bubble .m-time {
  display: block;
  font-size: 10px;
  color: var(--text3);
  text-align: right;
  padding: 1px 8px 5px 8px;
  line-height: 1;
  white-space: nowrap;
}

.attachment-bubble.no-caption {
  position: relative;
}

.attachment-bubble.no-caption .attachment-time-overlay {
  position: absolute;
  right: 3px;
  bottom: 3px;
  margin: 0;
  padding: 2px 5px;
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.46);
  color: #fff;
  font-size: 9px;
  line-height: 1;
  z-index: 2;
}

.attachment-bubble.no-caption .attachment-time-overlay span {
  color: #fff !important;
}

.msg-row.mine .attachment-bubble.no-caption .attachment-time-overlay {
  color: #fff;
}

.attachment-bubble.no-caption .file-bubble {
  padding-bottom: 22px;
}

.msg-row.mine .attachment-bubble .m-time {
  color: #6b7280;
}

.attachment-caption {
  display: block;
  padding: 5px 10px;
  word-break: break-word;
}

.caption-meta {
  float: right;
  margin-left: 8px;
  font-size: 10px;
}

.clear-chat-banner {
  margin: 10px 18px 8px;
  padding: 10px 12px;
  border: 1px solid rgba(239, 68, 68, .18);
  border-radius: 10px;
  background: rgba(239, 68, 68, .06);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.clear-chat-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--danger);
  margin-bottom: 2px;
}

.clear-chat-detail {
  font-size: 11px;
  color: var(--text2);
}

.clear-chat-cancel {
  border: 1px solid rgba(239, 68, 68, .28);
  background: rgba(239, 68, 68, .08);
  color: var(--danger);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
}

.clear-chat-cancel:hover {
  background: rgba(239, 68, 68, .13);
}

.clear-chat-compose-lock {
  align-items: center;
  justify-content: center;
  min-height: 48px;
  color: var(--text);
  font-size: 12px;
}

.clear-chat-compose-lock.is-plain {
  min-height: 36px;
  padding: 0 14px 10px;
  color: var(--text3);
}

.clear-chat-lock-text {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--text3);
}

.clear-chat-locked-panel {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(239, 68, 68, .18);
  border-radius: 14px;
  background: rgba(239, 68, 68, .06);
}

.clear-chat-locked-panel.is-compact {
  justify-content: center;
  padding: 9px 12px;
  border-color: rgba(148, 163, 184, .18);
  background: rgba(148, 163, 184, .08);
  color: var(--text2);
  font-weight: 600;
}

.c-prev-clearing {
  color: var(--danger);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(239, 68, 68, .07);
}

.modal.add-member-modal{max-width:270px;padding:16px}
.add-member-confirm{display:flex;flex-direction:column;gap:0}
.add-member-confirm-msg{font-size:13px;line-height:1.4;color:var(--text2);margin:0 0 11px}
.add-member-history-row{display:flex;align-items:center;gap:9px;margin:0 0 5px;font-size:13px;font-weight:500;color:var(--text);cursor:pointer}
.add-member-history-row input{width:auto;margin:0;accent-color:var(--accent);flex:0 0 auto}
.add-member-history-help{font-size:12px;line-height:1.35;color:var(--text3);margin:0 0 7px;padding-left:24px}
.add-member-confirm-error{min-height:12px;font-size:12px;line-height:1.35;color:var(--danger);margin-bottom:3px}
.add-member-confirm .modal-footer{margin-top:0}

.modal.new-message-modal-shell{max-width:310px;padding:18px}
.new-message-modal h3{margin:0 0 12px}
.new-message-search{margin-bottom:12px}
.new-message-body{display:flex;flex-direction:column;gap:12px;max-height:58vh;overflow-y:auto}
.new-message-loading{font-size:12px;color:var(--text3);text-align:center;padding:12px 6px}
.new-message-top-actions{display:flex;flex-direction:column;gap:3px}
.new-message-top-action{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;border-radius:var(--radius-sm);padding:7px 6px;text-align:left;cursor:pointer;font:600 13px var(--font);color:var(--text)}
.new-message-top-action:hover{background:var(--surface2)}
.new-message-action-icon{width:34px;height:34px;border-radius:50%;background:var(--surface2);color:var(--text2);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.new-message-top-action:hover .new-message-action-icon{color:var(--accent)}
.new-message-action-icon .group-plus-composed{width:22px;height:22px}
.new-message-action-icon .group-plus-composed svg{width:20px;height:20px}
.new-message-action-icon .group-plus-badge{top:-1px;right:-1px;width:11px;height:11px;font-size:10px}
.new-message-section{display:flex;flex-direction:column;gap:5px}
.new-message-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);padding:0 2px}
.contact-row{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;border-radius:var(--radius-sm);padding:7px 6px;text-align:left;cursor:pointer;font-family:var(--font);color:var(--text)}
.contact-row:hover{background:var(--surface2)}
.contact-avatar{width:34px;height:34px;border-radius:50%;background:#e6f7f2;color:var(--accent);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.contact-avatar img{width:100%;height:100%;object-fit:cover}
.contact-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.contact-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-username{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-status{font-size:11px;color:var(--text3);flex:0 0 auto}
.contact-status.online{color:var(--accent);font-weight:600}

.contact-bubble{padding:7px 8px 5px;min-width:188px;max-width:230px}
.contact-card-msg{display:flex;flex-direction:column;gap:7px}
.contact-card-main{display:flex;align-items:center;gap:8px;min-width:0}
.contact-card-avatar{width:32px;height:32px;border-radius:50%;background:var(--surface2);color:var(--accent);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.contact-card-avatar img{width:100%;height:100%;object-fit:cover}
.contact-card-text{min-width:0;flex:1}
.contact-card-name{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-card-username{font-size:11.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-card-action{border:1px solid rgba(13,138,99,.28);background:rgba(13,138,99,.04);color:var(--accent);border-radius:6px;padding:4px 9px;font:600 11.5px var(--font);cursor:pointer;width:100%;line-height:1.25}
.contact-card-action:hover{background:var(--accent-soft)}