/* ===== COMMUNITY PAGE STYLES ===== */
body { background: #F5F5F8; padding-bottom: calc(var(--tab-bar-height) + 20px); }

/* ===== HEADER ===== */
.cy-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.cy-header .cy-title {
  font-size: 20px; font-weight: 900; color: #1a1a1a;
  flex-shrink: 0;
}
.cy-header .cy-title span { color: #FF5722; }
.cy-header .cy-spacer { flex: 1; }
.cy-header .cy-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #666; font-size: 15px; cursor: pointer;
}
.cy-header .cy-btn:active { background: #f0f0f0; }

/* ===== DUAL TABS ===== */
.cy-dual-tabs {
  display: flex; align-items: center; justify-content: center;
  gap: 0; background: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky; top: 52px; z-index: 50;
  padding: 6px 16px 0;
}
.cy-dual-tab {
  flex: 1; max-width: 160px; text-align: center;
  padding: 10px 0 12px; cursor: pointer; position: relative;
  font-size: 15px; font-weight: 500; color: #bbb;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.5px;
}
.cy-dual-tab.active {
  color: #1a1a1a; font-weight: 900; font-size: 17px;
}
.cy-dual-tab.active::after {
  content: ''; position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3.5px; border-radius: 2px;
  background: linear-gradient(90deg, #FF5722, #FF9800);
}
.cy-dual-tab:active { opacity: 0.6; }

/* ===== FOLLOW BAR ===== */
.follow-bar {
  display: none; background: #fff; padding: 12px 0 8px;
  border-bottom: 1px solid #f5f5f5;
}
.follow-bar.show { display: block; }
.follow-bar .fb-title {
  padding: 0 16px; font-size: 12px; font-weight: 700; color: #aaa;
  margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;
}
.follow-bar .fb-title a { font-size: 11px; color: #FF5722; font-weight: 600; text-decoration: none; }
.follow-scroll {
  display: flex; gap: 14px; padding: 0 16px; overflow-x: auto;
}
.follow-scroll::-webkit-scrollbar { display: none; }
.follow-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex-shrink: 0; width: 56px; cursor: pointer;
}
.follow-item:active { opacity: 0.7; }
.follow-item .fi-avatar {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 2px solid #FF5722; padding: 2px;
}
.follow-item .fi-avatar.has-new { border-color: #FF5722; }
.follow-item .fi-avatar.no-new { border-color: #e0e0e0; }
.follow-item .fi-name {
  font-size: 10px; color: #666; font-weight: 500;
  max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center;
}
.follow-item .fi-dot {
  position: absolute; top: -1px; right: -1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #FF3D00; border: 1.5px solid #fff;
}
.follow-item .fi-wrap { position: relative; }

/* ===== BANNER ===== */
.cy-banner {
  margin: 10px; border-radius: 14px; overflow: hidden;
  position: relative; cursor: pointer;
}
.cy-banner img { width: 100%; aspect-ratio: 2.5/1; object-fit: cover; display: block; }
.cy-banner .cb-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 12px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
}
.cy-banner .cb-tag {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  background: #FF5722; font-size: 10px; font-weight: 700;
  margin-bottom: 4px;
}
.cy-banner .cb-title { font-size: 15px; font-weight: 700; line-height: 1.4; }

/* ===== HOT TOPICS ===== */
.cy-hot-bar {
  display: flex; gap: 8px; padding: 10px 14px;
  overflow-x: auto; background: #fff;
}
.cy-hot-bar::-webkit-scrollbar { display: none; }
.cy-hot-item {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px;
  background: #FFF3E0; cursor: pointer; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: #E65100;
  transition: background 0.15s;
}
.cy-hot-item:nth-child(2n) { background: #E8F5E9; color: #2E7D32; }
.cy-hot-item:nth-child(3n) { background: #E3F2FD; color: #1565C0; }
.cy-hot-item:active { opacity: 0.7; }

/* ===== FEED CARDS ===== */
.cy-feed { padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }

.cy-card {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04); cursor: pointer;
  transition: transform 0.15s;
}
.cy-card:active { transform: scale(0.99); }

/* Author row */
.cy-card .cc-author {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 0;
}
.cc-author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.cc-author .cca-name { font-size: 13px; font-weight: 700; color: #1a1a1a; }
.cc-author .cca-meta { font-size: 10px; color: #999; }
.cc-author .cca-tag {
  margin-left: auto; padding: 2px 8px; border-radius: 10px;
  font-size: 9px; font-weight: 700;
}
.cca-tag.tag-guess { background: rgba(255,87,34,0.08); color: #FF5722; }
.cca-tag.tag-brand { background: rgba(255,152,0,0.08); color: #FF9800; }
.cca-tag.tag-hot { background: rgba(244,67,54,0.08); color: #F44336; }
.cca-tag.tag-live { background: rgba(76,175,80,0.08); color: #4CAF50; }
.cca-tag.tag-community { background: rgba(33,150,243,0.08); color: #2196F3; }

/* Content */
.cy-card .cc-body { padding: 10px 14px; }
.cc-body .ccb-title {
  font-size: 15px; font-weight: 700; color: #1a1a1a;
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cc-body .ccb-desc {
  font-size: 13px; color: #666; line-height: 1.6; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Image grid */
.cy-card .cc-images { padding: 0 14px; }
.cc-images.img-1 img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; }
.cc-images.img-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.cc-images.img-3 img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.cc-images.img-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cc-images.img-2 img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }

/* Guess data bar inside card */
.cy-card .cc-guess-bar {
  margin: 8px 14px; padding: 10px 12px;
  background: linear-gradient(135deg, #FFF8E1, #FFF3E0);
  border-radius: 10px; border: 1px solid rgba(255,152,0,0.12);
  display: flex; align-items: center; gap: 8px;
}
.cc-guess-bar .ccg-icon { font-size: 20px; }
.cc-guess-bar .ccg-info { flex: 1; }
.cc-guess-bar .ccg-title { font-size: 12px; font-weight: 700; color: #E65100; }
.cc-guess-bar .ccg-data { font-size: 10px; color: #BF360C; margin-top: 1px; }
.cc-guess-bar .ccg-btn {
  padding: 4px 12px; border-radius: 14px;
  background: linear-gradient(135deg, #FF9800, #FF5722);
  color: #fff; font-size: 11px; font-weight: 700;
  border: none; cursor: pointer;
}

/* PK bar mini */
.cy-card .cc-pk-mini {
  margin: 0 14px 4px; display: flex; height: 18px;
  border-radius: 9px; overflow: hidden; background: #f0f0f0;
}
.cc-pk-mini .pk-seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
  transition: width 0.4s;
}
.pk-seg.seg-0 { background: linear-gradient(90deg, #FF6B9D, #FF4081); }
.pk-seg.seg-1 { background: linear-gradient(90deg, #7C4DFF, #536DFE); }

/* Tags row at bottom */
.cy-card .cc-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 14px 4px;
}
.cc-tags .cc-tag {
  padding: 3px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600;
}
.cc-tags .cc-tag.tag-c0 { background: rgba(255,87,34,0.14); color: #E64A19; }
.cc-tags .cc-tag.tag-c1 { background: rgba(33,150,243,0.14); color: #1976D2; }
.cc-tags .cc-tag.tag-c2 { background: rgba(76,175,80,0.14); color: #388E3C; }
.cc-tags .cc-tag.tag-c3 { background: rgba(233,30,99,0.14); color: #C2185B; }
.cc-tags .cc-tag.tag-c4 { background: rgba(156,39,176,0.14); color: #7B1FA2; }
.cc-tags .cc-tag.tag-c5 { background: rgba(0,188,212,0.14); color: #0097A7; }
.cc-tags .cc-tag.tag-c6 { background: rgba(255,152,0,0.14); color: #F57C00; }
.cc-tags .cc-tag.tag-c7 { background: rgba(244,67,54,0.14); color: #D32F2F; }

/* Actions row */
.cy-card .cc-actions {
  display: flex; align-items: center;
  padding: 8px 14px 12px; gap: 0;
}
.cc-actions .cca-item {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 4px; font-size: 11px; color: #999; cursor: pointer;
}
.cc-actions .cca-item i { font-size: 13px; }
.cc-actions .cca-item:active { color: #FF5722; }
.cca-item.cca-fav { transition: color 0.2s; }
.cca-item.cca-fav.favorited { color: #FF5722 !important; }
.cca-item.cca-fav.favorited i { font-weight: 900; }
@keyframes favPop { 0%{transform:scale(1)} 50%{transform:scale(1.35)} 100%{transform:scale(1)} }
.cca-item.cca-fav.pop i { animation: favPop 0.3s ease; }

/* Video card */
.cy-card .cc-video {
  position: relative; margin: 0 14px;
  border-radius: 10px; overflow: hidden;
}
.cc-video img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.cc-video .ccv-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.2);
}
.ccv-play i {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.9); color: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.cc-video .ccv-duration {
  position: absolute; bottom: 6px; right: 8px;
  padding: 1px 6px; border-radius: 6px;
  background: rgba(0,0,0,0.6); color: #fff;
  font-size: 10px; font-weight: 600;
}

/* Load more */
.cy-load-more {
  text-align: center; padding: 20px;
  font-size: 12px; color: #999;
}

/* ===== PUBLISH FAB ===== */
.pub-fab {
  position: fixed; bottom: calc(var(--tab-bar-height) + 88px); right: 20px;
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, #FF5722, #FF9800);
  color: #fff; font-size: 22px; cursor: pointer; z-index: 180;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(255,87,34,0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}
.pub-fab:active { transform: scale(0.9); box-shadow: 0 2px 10px rgba(255,87,34,0.3); }

/* ===== PUBLISH SHEET ===== */
.pub-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.45); display: none;
  align-items: flex-end; justify-content: center;
}
.pub-overlay.show { display: flex; }
.pub-panel {
  width: 100%; max-width: 480px;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  animation: pubSlideUp 0.3s ease;
  max-height: 88vh; overflow-y: auto;
}
@keyframes pubSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.pub-panel .pp-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: #ddd; margin: 0 auto 16px;
}
.pub-panel .pp-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.pub-panel .pp-header h3 { font-size: 18px; font-weight: 800; }
.pub-panel .pp-close {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: #f5f5f5; font-size: 16px; color: #999;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pub-panel .pp-close:active { background: #eee; }
.pub-panel .pp-user {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.pp-user img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.pp-user .ppu-name { font-size: 14px; font-weight: 700; }
.pp-user .ppu-scope {
  margin-left: auto; padding: 4px 10px; border-radius: 14px;
  background: #f5f5f5; font-size: 11px; color: #777; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
}
.pub-panel .pp-title {
  width: 100%; border: none; outline: none; margin-bottom: 8px;
  font-size: 16px; font-weight: 700; color: #1a1a1a;
  font-family: inherit;
}
.pub-panel .pp-title::placeholder { color: #bbb; }
.pub-panel .pp-textarea {
  width: 100%; min-height: 120px; border: none; outline: none;
  font-size: 15px; line-height: 1.7; color: #1a1a1a;
  resize: none; font-family: inherit;
}
.pub-panel .pp-textarea::placeholder { color: #bbb; }
.pub-panel .pp-media {
  display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.pp-media .pm-add {
  width: 72px; height: 72px; border-radius: 12px;
  border: 2px dashed #ddd; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  color: #bbb; font-size: 20px; cursor: pointer; transition: all 0.15s;
}
.pp-media .pm-add:active { border-color: #FF5722; color: #FF5722; }
.pp-media .pm-add span { font-size: 9px; font-weight: 600; }
.pub-panel .pp-toolbar {
  display: flex; align-items: center; gap: 0;
  border-top: 1px solid #f0f0f0; margin-top: 14px; padding-top: 12px;
}
.pp-toolbar .pt-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; font-size: 18px; color: #888; cursor: pointer;
}
.pp-toolbar .pt-item span { font-size: 9px; font-weight: 600; color: #aaa; }
.pp-toolbar .pt-item:active { color: #FF5722; }
.pub-panel .pp-topics {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px;
}
.pp-topics .pt-tag {
  padding: 4px 12px; border-radius: 14px; font-size: 12px;
  font-weight: 600; cursor: pointer; transition: all 0.15s;
  background: #f5f5f5; color: #777; border: 1px solid transparent;
}
.pp-topics .pt-tag:active { transform: scale(0.95); }
.pp-topics .pt-tag.selected {
  background: rgba(255,87,34,0.08); color: #FF5722;
  border-color: rgba(255,87,34,0.2);
}
.pub-panel .pp-submit {
  margin-top: 18px; width: 100%; height: 46px; border: none;
  border-radius: 23px; font-size: 15px; font-weight: 700;
  color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #FF5722, #FF9800);
  box-shadow: 0 4px 14px rgba(255,87,34,0.35);
  transition: transform 0.15s;
}
.pub-panel .pp-submit:active { transform: scale(0.97); }
.pub-panel .pp-submit:disabled { opacity: 0.45; pointer-events: none; }

/* ===== EMPTY STATE ===== */
.cy-empty {
  text-align: center; padding: 60px 20px; color: #bbb;
}
.cy-empty i { font-size: 40px; display: block; margin-bottom: 12px; opacity: 0.3; }
.cy-empty .ce-t1 { font-size: 14px; font-weight: 600; color: #999; }
.cy-empty .ce-t2 { font-size: 12px; margin-top: 6px; }

/* ===== SUB-PANELS SHARED ===== */
.sub-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.45); display: none;
  align-items: flex-end; justify-content: center;
}
.sub-overlay.show { display: flex; }
.sub-panel {
  width: 100%; max-width: 480px;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  max-height: 80vh; overflow-y: auto;
}
.sub-confirm {
  margin-top: 16px; width: 100%; height: 44px; border: none;
  border-radius: 22px; font-size: 14px; font-weight: 700;
  color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #FF5722, #FF9800);
}
.sub-confirm:active { opacity: 0.85; }

.sub-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.sub-header h3 {
  font-size: 18px; font-weight: 800;
}

.sub-search {
  display: flex; align-items: center; gap: 8px;
  background: #f5f5f5; border-radius: 20px;
  padding: 0 14px; height: 38px; margin-bottom: 14px;
}
.sub-search i {
  color: #bbb; font-size: 14px;
}
.sub-search input {
  flex: 1; border: none; outline: none; background: none;
  font-size: 14px; font-family: inherit;
}

/* Scope options */
.scope-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 12px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid transparent; margin-bottom: 8px;
  transition: all 0.2s;
}
.scope-opt:active { transform: scale(0.98); }
.scope-opt.selected { border-color: #FF5722; background: rgba(255,87,34,0.04); }
.scope-opt .so-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.so-icon-public { background: rgba(255,87,34,0.08); color: #FF5722; }
.so-icon-friends { background: rgba(33,150,243,0.08); color: #2196F3; }
.so-icon-fans { background: rgba(244,67,54,0.08); color: #F44336; }
.so-icon-private { background: rgba(158,158,158,0.08); color: #9E9E9E; }
.scope-opt .so-info { flex: 1; }
.scope-opt .so-name { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.scope-opt .so-desc { font-size: 11px; color: #999; margin-top: 2px; }
.scope-opt .so-check { color: transparent; font-size: 18px; transition: color 0.2s; }
.scope-opt.selected .so-check { color: #FF5722; }

/* Location list items */
.loc-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid #f8f8f8; cursor: pointer;
}
.loc-item:active { background: #f9f9f9; }
.loc-item .li-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: #f5f5f5; display: flex; align-items: center; justify-content: center;
  color: #999; font-size: 14px; flex-shrink: 0;
}
.loc-item .li-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.loc-item .li-addr { font-size: 11px; color: #999; margin-top: 1px; }

.loc-current {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer;
}
.loc-current-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,87,34,0.08); display: flex; align-items: center; justify-content: center;
  color: #FF5722;
}
.loc-current-title {
  font-size: 14px; font-weight: 700;
}
.loc-current-sub {
  font-size: 11px; color: #999;
}
.loc-option {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer;
}
.loc-option-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: #f5f5f5; display: flex; align-items: center; justify-content: center;
  color: #999;
}
.loc-option-text {
  font-size: 14px; color: #999;
}
.loc-list {
  max-height: 250px; overflow-y: auto;
}

/* Mention items */
.mention-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #f8f8f8; cursor: pointer;
}
.mention-item:active { background: #f9f9f9; }
.mention-item img {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
}
.mention-item .mi-name {
  font-size: 14px; font-weight: 600; color: #1a1a1a; flex: 1;
}
.mention-item .mi-check {
  color: transparent; font-size: 16px;
}
.mention-item.selected .mi-check {
  color: #FF5722;
}
.mention-selected {
  display: none; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.mention-list {
  max-height: 300px; overflow-y: auto;
}
.mention-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 14px;
  background: rgba(255,87,34,0.08); color: #FF5722;
  font-size: 12px; font-weight: 600;
}
.mention-chip .mc-remove {
  cursor: pointer; font-size: 10px;
}

/* Guess link items */
.gl-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: 12px; margin-bottom: 8px;
  background: #f9f9f9; border: 1.5px solid transparent; cursor: pointer;
  transition: all 0.2s;
}
.gl-item:active { transform: scale(0.98); }
.gl-item.selected { border-color: #FF5722; background: rgba(255,87,34,0.04); }
.gli-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.gli-info { flex: 1; }
.gli-title { font-size: 13px; font-weight: 700; color: #1a1a1a; }
.gli-meta { font-size: 11px; color: #999; margin-top: 2px; }
.gli-check { color: transparent; font-size: 16px; }
.gl-item.selected .gli-check { color: #FF5722; }
.guess-link-list {
  max-height: 350px; overflow-y: auto;
}

/* Emoji panel */
.emoji-panel {
  max-height: 50vh;
}
.emoji-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid #f0f0f0; margin-bottom: 12px;
}
.emoji-tab {
  padding: 8px 14px; font-size: 12px; font-weight: 600;
  color: #999; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: all 0.2s;
}
.emoji-tab.active {
  color: #FF5722; border-bottom-color: #FF5722;
}
.emoji-grid {
  display: flex; flex-wrap: wrap; gap: 4px;
  max-height: 220px; overflow-y: auto; justify-content: flex-start;
}
.emoji-item {
  font-size: 26px; cursor: pointer; padding: 6px; border-radius: 8px;
  transition: background 0.15s;
}
.emoji-item:hover {
  background: #f0f0f0;
}

/* Attachment tags in publish */
.attach-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 18px; font-size: 12px; font-weight: 600;
  margin: 2px 4px 2px 0; cursor: default;
}
.attach-tag .at-remove {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center;
  font-size: 8px; cursor: pointer;
}
.attach-tag-location {
  background: rgba(255,87,34,0.06); color: #FF5722;
}
.attach-tag-mention {
  background: rgba(33,150,243,0.06); color: #2196F3;
}
.attach-tag-topic { background: rgba(255,87,34,0.1); color: #FF5722; border-color: rgba(255,87,34,0.25); }
.attach-tag-guess {
  background: rgba(255,152,0,0.06); color: #FF9800;
}