.futuron-workspace-wrap{
  display:grid;
  gap:16px;
}

.futuron-workspace-wrap .futuron-app-page-head h1{
  font-size:22px;
  font-weight:800;
  color:#0f1b38;
}

.futuron-broadcast-list{
  display:grid;
  gap:14px;
}
.futuron-broadcast-card{
  border:1px solid #d3e3ed;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 24px rgba(10,35,64,0.08);
}
.futuron-broadcast-card.is-alert{
  border-color:rgba(179,45,46,0.28);
  box-shadow:0 10px 24px rgba(179,45,46,0.08);
}
.futuron-broadcast-banner img{
  display:block;
  width:100%;
  max-height:180px;
  object-fit:cover;
}
.futuron-broadcast-body{
  padding:16px;
}
.futuron-broadcast-type{
  display:inline-block;
  margin-bottom:8px;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(47,122,138,0.12);
  color:#1f4d73;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
}
.futuron-broadcast-card.is-alert .futuron-broadcast-type{
  background:rgba(179,45,46,0.12);
  color:#b32d2e;
}
.futuron-broadcast-body h3{
  margin:0 0 8px;
  font-size:18px;
  color:#0f1b38;
}
.futuron-broadcast-body p{
  margin:0;
  color:#556170;
  line-height:1.5;
}
.futuron-broadcast-date{
  display:block;
  margin-top:10px;
  font-size:12px;
  color:#6b7a8b;
}
.futuron-activity-list{
  display:grid;
  gap:10px;
}
.futuron-activity-entry{
  display:grid;
  gap:0;
}
.futuron-activity-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 14px;
  align-items:center;
  min-height:72px;
  padding:14px 16px;
  border:1px solid #d3e3ed;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 20px rgba(10,35,64,0.06);
}
.futuron-activity-item.is-clickable{
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.futuron-activity-item.is-clickable:hover,
.futuron-activity-item.is-clickable.is-expanded{
  border-color:#2f7a8a;
  box-shadow:0 6px 16px rgba(47,122,138,0.08);
}
.futuron-activity-details{
  margin-top:-4px;
  padding:10px 14px 12px;
  border:1px solid #d7e2ea;
  border-top:0;
  border-radius:0 0 12px 12px;
  background:#f6fbff;
}
.futuron-activity-details ul{
  margin:0;
  padding-left:18px;
  color:#1f4d73;
  font-size:13px;
  line-height:1.5;
}
.futuron-activity-hint{
  display:inline-block;
  margin-left:6px;
  font-size:11px;
  font-weight:600;
  color:#2f7a8a;
}
.futuron-activity-label{
  margin:0;
  font-weight:700;
  color:#0f1b38;
}
.futuron-activity-meta{
  margin:4px 0 0;
  font-size:12px;
  color:#6b7a8b;
}
.futuron-activity-time{
  font-size:12px;
  color:#6b7a8b;
  white-space:nowrap;
}
.futuron-activity-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.futuron-activity-filter{
  border:1px solid #d7e2ea;
  background:#fff;
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  font-weight:700;
  color:#1f4d73;
  text-decoration:none;
}
.futuron-activity-filter.is-active{
  background:#2f7a8a;
  border-color:#2f7a8a;
  color:#fff;
}
.futuron-hub-tile--workspace .futuron-hub-tile-icon{
  background:linear-gradient(145deg,#5b3fd6,#2f7a8a);
}
.futuron-hub-tile-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#b32d2e;
  color:#fff;
  font-size:11px;
  font-weight:800;
}
.futuron-ai-wrap .futuron-ai-placeholder{
  text-align:center;
  padding:28px 18px;
}
.futuron-ai-wrap .futuron-ai-placeholder h2{
  margin:0 0 8px;
}
.futuron-ai-locked{
  padding:18px;
  border-radius:14px;
  background:#f6fbff;
  border:1px solid #d7e2ea;
}
/* ========== Social feed (Facebook-style � FUTURON) ========== */
.futuron-workspace-social{
  display:grid;
  gap:14px;
  max-width:680px;
  margin:0 auto;
}
/* Desktop shell: feed owns the main column beside apps rail */
@media (min-width:1024px){
  .futuron-app-shell--workspace .futuron-workspace-social{
    max-width:min(100%, 820px);
    margin:0;
  }
}
.ff-page-head h1{
  font-size:22px;
  font-weight:800;
  color:#0f1b38;
}
.ff-page-head--tabs-only{
  margin-bottom:4px;
}
.ff-page-head--tabs-only .futuron-app-tabs{
  margin-top:0;
}
/* Workspace page header: row1 title+tools, row2 tabs — same on mobile & desktop */
.ff-ws-head{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}
.ff-ws-head-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
}
.ff-ws-section-meta{
  flex:1 1 auto;
  min-width:0;
  max-width:min(100%, 360px);
}
.ff-ws-section-title{
  margin:0;
  font-size:16px;
  font-weight:800;
  color:#0f1b38;
  line-height:1.25;
}
.ff-ws-section-desc{
  margin:3px 0 0;
  font-size:12px;
  color:#6b7a8b;
  line-height:1.4;
}
.ff-ws-tools{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  margin-left:auto;
}
.ff-ws-tool{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid #c5d8e6;
  background:#fff;
  color:#1f4d73;
  text-decoration:none;
  box-sizing:border-box;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease;
}
.ff-ws-tool:hover{
  background:#eef6fb;
  border-color:#1f4d73;
  color:#0f1b38;
}
.ff-ws-tool.is-active{
  border-color:#1f4d73;
  background:#e8f2fa;
  color:#0f1b38;
}
.ff-ws-tool--eye.is-active{
  border-color:#a66f12;
  background:linear-gradient(180deg,#fff8e8,#ffefd0);
  color:#8a5a10;
  box-shadow:0 0 0 2px rgba(201,139,46,.18);
}
.ff-oversight-banner{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:8px 0 2px;
  padding:10px 12px;
  border-radius:12px;
  border:1px dashed rgba(166,111,18,.45);
  background:linear-gradient(180deg,#fffbf2,#fff6e4);
  color:#5c4314;
  font-size:12.5px;
  line-height:1.4;
}
.ff-oversight-banner strong{font-weight:800;margin-inline-end:4px}
.ff-oversight-banner-ico{flex:0 0 auto;line-height:1.2}
.ff-oversight-chip{
  display:inline-block;
  margin-inline-start:6px;
  padding:1px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#8a5a10;
  background:rgba(201,139,46,.16);
  vertical-align:middle;
}
.ff-post.is-oversight-only{
  border:1px dashed rgba(166,111,18,.5);
  background:linear-gradient(180deg,#fffdf8 0%,#fff 55%);
  box-shadow:0 0 0 1px rgba(201,139,46,.08),0 10px 24px rgba(10,35,64,.05);
}
.ff-oversight-post-flag{
  margin:0;
  padding:8px 14px 0;
  font-size:11px;
  font-weight:700;
  color:#8a5a10;
  letter-spacing:.02em;
}
.ff-group-chat-row.is-oversight-only{
  border:1px dashed rgba(166,111,18,.4);
  background:linear-gradient(180deg,#fffbf2,#fff);
  border-radius:12px;
  opacity:.92;
}
.ff-groups-chat-list li.is-oversight-only{
  margin-top:2px;
}
  box-shadow:0 0 0 2px rgba(31,77,115,.12);
}
.ff-ws-tool-icon{
  display:block;
  flex-shrink:0;
}
.ff-ws-tabs,
.ff-ws-head .futuron-app-tabs{
  width:100%;
  margin-top:0;
  flex:none;
}
@media (max-width:480px){
  .ff-ws-section-title{font-size:15px}
  .ff-ws-tool{width:34px;height:34px}
}
.ff-settings-page{
  max-width:560px;
  padding:18px 18px 20px;
}
.ff-settings-title{
  margin:0 0 6px;
  font-size:20px;
  font-weight:800;
  color:#0f1b38;
}
.ff-settings-lead{
  margin:0 0 16px;
  color:#556170;
  font-size:13px;
  line-height:1.5;
}
.ff-settings-card{
  border:1px solid #e2ebf2;
  border-radius:12px;
  background:#f8fbfd;
  padding:14px 14px 16px;
}
.ff-settings-card-title{
  margin:0 0 4px;
  font-size:15px;
  font-weight:800;
  color:#0f1b38;
}
.ff-settings-card-desc{
  margin:0 0 12px;
  font-size:12px;
  color:#6b7a8b;
  line-height:1.45;
}
.ff-notify-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:0 0 12px;
  font-size:13px;
  color:#0f1b38;
  cursor:pointer;
}
.ff-notify-row input{
  margin-top:3px;
  flex-shrink:0;
}
.ff-notify-row strong{
  display:block;
  font-weight:700;
}
.ff-notify-hint{
  display:block;
  margin-top:2px;
  color:#6b7a8b;
  font-size:12px;
  font-weight:400;
}
.ff-notify-company-note{
  margin:0 0 14px;
  font-size:12px;
  color:#6b7a8b;
}
.ff-settings-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.ff-settings-msg{
  font-size:13px;
  color:#15803d;
  font-weight:600;
}
.ff-settings-msg.is-error{
  color:#b91c1c;
}
.ff-panel{
  padding:16px;
}
.ff-inbox-soon{
  text-align:center;
  padding:36px 20px;
}
.ff-inbox-soon-icon{font-size:40px;margin-bottom:8px}
.ff-inbox-soon h2{margin:0 0 8px;font-size:18px;color:#0f1b38}
.ff-inbox-soon p{margin:0;color:#556170;line-height:1.5;max-width:360px;margin-inline:auto}

/* Composer */
.ff-composer{
  padding:14px 14px 12px;
  border-radius:16px;
  background:#fff;
  border:1px solid #d3e3ed;
  box-shadow:0 8px 22px rgba(10,35,64,0.07);
}
.ff-composer-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.ff-composer-main{flex:1;min-width:0}
.ff-composer-type{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  color:#1f4d73;
}
.ff-composer-type label{
  display:inline-flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
}
/* Admin: clear Personal vs Company split */
.ff-composer-mode{
  display:flex;
  gap:0;
  margin:0 0 8px;
  padding:3px;
  border-radius:12px;
  background:#eef3f7;
  border:1px solid #d3e3ed;
}
.ff-composer-mode-btn{
  flex:1 1 50%;
  border:0;
  background:transparent;
  color:#556170;
  font-size:13px;
  font-weight:800;
  padding:9px 10px;
  border-radius:10px;
  cursor:pointer;
  line-height:1.2;
}
.ff-composer-mode-btn.is-active{
  background:#fff;
  color:#0f1b38;
  box-shadow:0 1px 4px rgba(15,27,56,.1);
}
.ff-composer-mode-hint{
  margin:0 0 10px;
  font-size:12px;
  color:#6b7a8b;
  line-height:1.4;
}
.ff-composer-company{
  margin:0 0 10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #c5daf0;
  background:linear-gradient(180deg,#f4f9fd 0%,#eef6fb 100%);
}
.ff-composer-company[hidden],
.ff-composer-personal[hidden]{display:none !important}
.ff-composer-company-note{
  margin:6px 0 0;
  font-size:11px;
  color:#5a7a96;
}
.ff-composer-type--official{
  margin-bottom:10px;
}
.ff-composer-voice{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  margin:0 0 10px;
  padding:8px 10px;
  border:1px solid #d0d7de;
  border-radius:8px;
  background:#fff;
  font-size:12px;
  color:#1f4d73;
}
.ff-composer-voice[hidden]{display:none !important}
.ff-composer-voice label{
  display:inline-flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
  font-weight:600;
}
.ff-composer-company .ff-composer-title{
  margin-bottom:10px;
}
.ff-composer-company .ff-composer-pin{
  margin-bottom:4px;
}
.ff-composer-title{
  width:100%;
  box-sizing:border-box;
  margin-bottom:8px;
  padding:10px 12px;
  border:1px solid #d3e3ed;
  border-radius:10px;
  font:inherit;
  font-size:14px;
}
.ff-composer-body{
  width:100%;
  box-sizing:border-box;
  min-height:52px;
  padding:12px 14px;
  border:1px solid #d3e3ed;
  border-radius:20px;
  background:#f4f7fa;
  font:inherit;
  font-size:15px;
  resize:vertical;
  line-height:1.4;
}
.ff-composer-body:focus{
  outline:none;
  border-color:#56a9b5;
  background:#fff;
  box-shadow:0 0 0 3px rgba(86,169,181,0.18);
}
.ff-composer-preview{
  position:relative;
  margin-top:10px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #d3e3ed;
}
.ff-composer-preview img{
  display:block;
  width:100%;
  max-height:220px;
  object-fit:cover;
}
.ff-composer-preview-x{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  background:rgba(15,27,56,0.75);
  color:#fff;
  font-size:18px;
  cursor:pointer;
}
.ff-composer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #eef3f7;
}
.ff-composer-photo-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  color:#2f7a8a;
  background:#e8f6f8;
  cursor:pointer;
}
.ff-composer-drive-preview{
  display:flex;align-items:center;gap:8px;
  margin:8px 0;padding:10px 12px;background:#f0f7f8;border-radius:12px;font-size:13px;
}
.ff-composer-drive-preview[hidden]{display:none !important}
.ff-drive-name{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-drive-attach-list{
  display:grid;
  gap:8px;
  /* Horizontal inset lives here so cards can be width:100% without overflow */
  padding:0 12px 10px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  min-width:0;
}
.ff-drive-attach-list .ff-drive-attach{
  margin:0;
  width:100%;
  max-width:100%;
}
.ff-drive-attach{
  display:grid;
  /*
   * Root cause of cut "Open" on mobile:
   * max-width:100% + horizontal margin makes the box wider than the parent
   * (margins are outside the 100% width) → right edge (Open) is clipped.
   * Fix: width accounts for horizontal margins (or 100% when list supplies padding).
   */
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:8px 10px;
  margin:8px 12px 10px;
  /* Cap width so margin never overflows parent */
  width:calc(100% - 24px);
  max-width:calc(100% - 24px);
  padding:10px 12px;
  border:1px solid #d3e3ed;
  border-radius:14px;
  background:#f7fbfc;
  box-sizing:border-box;
  min-width:0;
  overflow:hidden; /* only name ellipsizes; Open has its own track */
  text-decoration:none;
  color:inherit;
}
a.ff-drive-attach:hover{border-color:#b7d0db;background:#f0f8fa}
.ff-drive-attach--pdf{background:linear-gradient(135deg,#fff5f5,#fff);border-color:#f0c9c9}
.ff-drive-attach--doc{background:linear-gradient(135deg,#f0f6ff,#fff);border-color:#c9d9f0}
.ff-drive-attach--sheet{background:linear-gradient(135deg,#f0faf4,#fff);border-color:#c3e6d0}
.ff-drive-attach--slide{background:linear-gradient(135deg,#fff8f0,#fff);border-color:#f0d9b8}
.ff-drive-attach--video{background:linear-gradient(135deg,#f6f0ff,#fff);border-color:#d7c6f0}
.ff-drive-attach--folder{background:linear-gradient(135deg,#f0f7f8,#fff)}
.ff-drive-attach-ico{
  font-size:22px;
  line-height:1;
  flex-shrink:0;
  min-width:1.4em;
  text-align:center;
}
.ff-drive-attach-body{
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
.ff-drive-attach-name,
.ff-drive-attach-body strong{
  display:block;
  font-size:13px;
  font-weight:700;
  color:#0f1b38;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
.ff-drive-attach-body small{
  display:block;
  color:#6b7a8b;
  font-size:11px;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ff-drive-attach-open{
  flex-shrink:0;
  justify-self:end;
  align-self:center;
  font-weight:800;
  font-size:12px;
  color:#2f7a8a;
  text-decoration:none;
  padding:6px 10px;
  border-radius:999px;
  background:#e8f6f8;
  white-space:nowrap;
  line-height:1.2;
  /* Reserve space so Open never collapses out of the grid */
  min-width:max-content;
}
.ff-drive-attach-open:hover{filter:brightness(.97)}
@media (max-width:560px){
  .ff-drive-attach-list{padding:0 10px 10px}
  /* Single card (not in a list): still fit inside post */
  .ff-drive-attach{
    margin:6px 10px 8px;
    width:calc(100% - 20px);
    max-width:calc(100% - 20px);
    padding:10px;
    gap:8px 6px;
    /* Stack Open on its own row — guaranteed full visibility on narrow phones */
    grid-template-columns:auto minmax(0, 1fr);
    grid-template-areas:
      "ico body"
      "open open";
  }
  .ff-drive-attach-list .ff-drive-attach{
    width:100%;
    max-width:100%;
  }
  .ff-drive-attach-ico{grid-area:ico;font-size:18px}
  .ff-drive-attach-body{grid-area:body}
  .ff-drive-attach-open{
    grid-area:open;
    justify-self:stretch;
    text-align:center;
    padding:8px 10px;
    font-size:12px;
    min-width:0;
    margin-top:2px;
  }
  .ff-drive-attach-name,
  .ff-drive-attach-body strong{font-size:12px}
}

/* Drive attachments: icons only (no thumbnails / no media preview load). */
.ff-composer-photo-hint{
  font-size:11px;
  font-weight:600;
  color:#6b7a8b;
  opacity:.9;
}
.ff-composer-submit{
  padding:9px 20px;
  border:0;
  border-radius:999px;
  background:linear-gradient(145deg,#1f4d73,#2f7a8a);
  color:#fff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}
.ff-composer-submit:disabled{opacity:.6;cursor:wait}
.ff-composer-msg{margin:8px 0 0;font-size:12px;color:#2f7a8a}
.ff-composer-msg.is-error{color:#b91c1c}

/* Avatar */
.ff-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  background:#e8f0f5;
}
.ff-avatar--sm{width:32px;height:32px}
/* Company voice (news / alert / welcome): light mark on clean white disc */
.ff-avatar--brand{
  object-fit:contain;
  object-position:center;
  background:#fff;
  padding:5px;
  box-sizing:border-box;
  border:1px solid rgba(15,27,56,0.08);
  box-shadow:0 1px 2px rgba(10,35,64,0.06);
}
.ff-avatar--sm.ff-avatar--brand{
  padding:4px;
}
.ff-avatar--init{
  display:grid;
  place-items:center;
  box-sizing:border-box;
  padding:0;
  margin:0;
  border:0;
  font-size:14px;
  font-weight:800;
  line-height:1;
  letter-spacing:0;
  text-indent:0;
  text-align:center;
  color:#0f1b38;
  background:linear-gradient(145deg,#56a9b5,#e8f6f8);
  direction:ltr;
  unicode-bidi:isolate;
}

/* Post card */
.ff-feed{display:grid;gap:14px}
.ff-post{
  background:#fff;
  border:1px solid #d3e3ed;
  border-radius:16px;
  box-shadow:0 8px 22px rgba(10,35,64,0.07);
  /* visible so @mention dropdown is not clipped; images clip themselves */
  overflow:visible;
}
.ff-post-image,
.ff-shared-image{
  overflow:hidden;
  border-radius:0 0 12px 12px;
}
.ff-post.is-alert{
  border-color:rgba(179,45,46,0.28);
  box-shadow:0 8px 22px rgba(179,45,46,0.08);
}
.ff-post-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px 8px;
}
.ff-post-meta{flex:1;min-width:0}
.ff-post-author{
  display:block;
  font-size:14px;
  font-weight:800;
  color:#0f1b38;
  line-height:1.25;
}
.ff-post-sub{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:2px;
}
.ff-post-time{font-size:12px;color:#6b7a8b}
.ff-post-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.04em;
  background:rgba(47,122,138,0.12);
  color:#1f4d73;
}
.ff-post-badge--alert{
  background:rgba(179,45,46,0.12);
  color:#b32d2e;
}
.ff-post-badge--welcome{
  background:rgba(86,169,181,0.18);
  color:#0f1b38;
}
/* ⋯ post menu only — do NOT apply to See more (same class name historically). */
.ff-post-tools .ff-post-more,
button.ff-post-more[data-ff-menu-toggle]{
  border:0;
  background:transparent;
  color:#6b7a8b;
  font-size:22px;
  line-height:1;
  padding:4px 10px;
  cursor:pointer;
  border-radius:50%;
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.ff-post-tools .ff-post-more:hover,
.ff-post-tools.is-open .ff-post-more,
button.ff-post-more[data-ff-menu-toggle]:hover{
  background:#f0f2f5;
  color:#0f1b38;
}
.ff-post-tools{
  position:relative;
}
.ff-post-menu{
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  min-width:180px;
  background:#fff;
  border:1px solid #e4ebf0;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(10,35,64,0.16);
  z-index:30;
  padding:6px 0;
  overflow:hidden;
}
.ff-post-menu[hidden]{display:none !important}
.ff-post-menu-item{
  display:block;
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:10px 14px;
  font:inherit;
  font-size:14px;
  font-weight:600;
  color:#0f1b38;
  cursor:pointer;
}
.ff-post-menu-item:hover{background:#f0f2f5}
.ff-post-menu-item.is-danger{color:#b91c1c}
.ff-post-menu-item.is-danger:hover{background:#fef2f2}
.ff-post-audience-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  line-height:1;
  opacity:.9;
  cursor:default;
}
.ff-post-audience-icon--public{opacity:.85}
.ff-post-audience-icon--private{filter:none}
.ff-post-audience-icon--group{opacity:.95}
.ff-post-editor{
  padding:0 14px 12px;
  display:grid;
  gap:8px;
}
.ff-post-editor[hidden]{display:none !important}
.ff-post-body{padding:0 14px 10px}
/* Bidi: per-block direction (bilingual EN+AR posts). Shell stays dir=auto. */
.ff-post-text,
.ff-comment-bubble p,
.ff-shared-text,
.ff-composer-body.ff-rte-body,
.ff-group-desc.ff-rte-body,
.ff-rte-body{
  unicode-bidi:plaintext;
  text-align:start;
}
/* Each paragraph/heading/list item owns alignment — never whole-document dir. */
.ff-post-text > [dir="rtl"],
.ff-shared-text > [dir="rtl"],
.ff-rte-body > [dir="rtl"],
.ff-composer-body.ff-rte-body > [dir="rtl"],
.ff-group-desc.ff-rte-body > [dir="rtl"],
.ff-post-text li[dir="rtl"],
.ff-rte-body li[dir="rtl"],
.ff-comment-bubble p[dir="rtl"]{
  text-align:right;
  unicode-bidi:plaintext;
}
.ff-post-text > [dir="ltr"],
.ff-shared-text > [dir="ltr"],
.ff-rte-body > [dir="ltr"],
.ff-composer-body.ff-rte-body > [dir="ltr"],
.ff-group-desc.ff-rte-body > [dir="ltr"],
.ff-post-text li[dir="ltr"],
.ff-rte-body li[dir="ltr"],
.ff-comment-bubble p[dir="ltr"]{
  text-align:left;
  unicode-bidi:plaintext;
}
/* Fallback when body has no block children (plain text / single run). */
.ff-post-text[dir="rtl"],
.ff-shared-text[dir="rtl"],
.ff-rte-body[dir="rtl"],
.ff-comment-bubble p[dir="rtl"]{
  text-align:right;
}
.ff-post-text[dir="ltr"],
.ff-shared-text[dir="ltr"],
.ff-rte-body[dir="ltr"],
.ff-comment-bubble p[dir="ltr"]{
  text-align:left;
}
.ff-post-title{
  margin:0 0 6px;
  font-size:16px;
  font-weight:800;
  color:#0f1b38;
  line-height:1.3;
}
.ff-post-text{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:#1a2a3a;
  white-space:normal;
  word-break:break-word;
}
.ff-post-text p{margin:0 0 .55em}
.ff-post-text p:last-child{margin-bottom:0}
.ff-post-text ul,.ff-post-text ol{margin:.35em 0 .65em;padding-left:1.35em}
.ff-post-text li{margin:.15em 0}
.ff-post-text a{color:#0b3d5c;text-decoration:underline;font-weight:600}
.ff-post-text strong,.ff-post-text b{font-weight:700}
.ff-post-text em,.ff-post-text i{font-style:italic}
.ff-post-text u{text-decoration:underline}
.ff-post-text blockquote{
  margin:.4em 0;
  padding:.35em .75em;
  border-left:3px solid #2f7a8a;
  color:#334155;
  background:#f8fbfd;
  border-radius:0 8px 8px 0;
}
.ff-post-text-wrap{position:relative}
.ff-post-text.is-clamped{
  max-height:7.5em; /* ~5 lines — Facebook/LinkedIn style */
  overflow:hidden;
  position:relative;
}
.ff-post-text.is-clamped::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2.2em;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
  pointer-events:none;
}
.ff-post-text.is-expanded{max-height:none;overflow:visible}
.ff-post-text.is-expanded::after{display:none}
/* “See more / See less” under post body — full-width text control, not the ⋯ circle. */
.ff-post-text-wrap .ff-post-more,
button.ff-post-more[data-ff-post-more]{
  display:inline-block;
  width:auto;
  height:auto;
  min-width:0;
  margin-top:4px;
  padding:2px 0;
  border:0;
  border-radius:0;
  background:none;
  color:#2f7a8a;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
  cursor:pointer;
  vertical-align:baseline;
}
.ff-post-text-wrap .ff-post-more:hover,
button.ff-post-more[data-ff-post-more]:hover{
  text-decoration:underline;
  background:none;
  color:#1f4d73;
}
.ff-post-text-wrap .ff-post-more[hidden],
button.ff-post-more[data-ff-post-more][hidden]{
  display:none !important;
}

/* YouTube playable embeds (from URL in post body) */
.ff-yt-list{
  margin:10px 0 4px;
  display:grid;
  gap:10px;
  padding:0 0 2px;
}
.ff-post-body > .ff-yt-list{
  margin-left:0;
  margin-right:0;
}
.ff-yt-embed{
  position:relative;
  width:100%;
  padding-bottom:56.25%; /* 16:9 */
  height:0;
  overflow:hidden;
  border-radius:12px;
  background:#0f0f0f;
  box-shadow:0 1px 3px rgba(10,35,64,0.12);
}
.ff-yt-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.ff-shared-card .ff-yt-list{margin:8px 0 0}
.ff-shared-card .ff-yt-embed{border-radius:10px}

/* Separated live YouTube preview under composer / comment (not inside editor) */
.ff-yt-preview{
  margin:10px 0 4px;
  padding:10px 12px;
  border:1px solid #d3e3ed;
  border-radius:12px;
  background:#f4f7fa;
}
.ff-yt-preview[hidden]{display:none !important}
.ff-yt-preview-label{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#2f7a8a;
  margin:0 0 8px;
}
.ff-yt-preview-frame .ff-yt-list{margin:0}
.ff-yt-preview--comment{
  margin:0 0 8px;
  padding:8px 10px;
}
.ff-yt-preview--comment .ff-yt-embed{border-radius:10px}
.ff-comment-bubble .ff-yt-list{margin:8px 0 0}
.ff-comment-bubble .ff-yt-embed{border-radius:10px;max-width:100%}
.ff-c-reply-form{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:flex-end;
  margin-top:6px;
}
.ff-c-reply-form .ff-yt-preview{
  flex:1 1 100%;
  order:-1;
}
.ff-c-reply-form .ff-comment-input{flex:1;min-width:0}

/* Feed rich text editor (Careers-style simple formatting) */
.ff-rte{
  border:1px solid #d3e3ed;
  border-radius:14px;
  overflow:hidden;
  background:#f0f2f5;
}
.ff-rte:focus-within{
  background:#fff;
  border-color:#56a9b5;
  box-shadow:0 0 0 2px rgba(47,122,138,.15);
}
.ff-rte-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  padding:6px 8px;
  background:#eef3f6;
  border-bottom:1px solid #e2e8f0;
}
.ff-rte-btn{
  border:1px solid #d3e3ed;
  background:#fff;
  border-radius:8px;
  padding:5px 9px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  color:#0f1b2d;
  line-height:1.2;
}
.ff-rte-btn:hover,.ff-rte-btn:focus{border-color:#2f7a8a;color:#0b3d5c;outline:none}
.ff-rte-sep{width:1px;align-self:stretch;background:#d3e3ed;margin:0 2px}
.ff-rte-body{
  min-height:72px;
  max-height:220px;
  overflow:auto;
  padding:10px 14px;
  font:inherit;
  font-size:15px;
  line-height:1.5;
  color:#050505;
  outline:none;
  background:transparent;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  white-space:normal;
  word-break:break-word;
}
.ff-rte-body:empty:before{
  content:attr(data-placeholder);
  color:#8a97a8;
  pointer-events:none;
}
.ff-rte-body p{margin:0 0 .45em}
.ff-rte-body p:last-child{margin-bottom:0}
.ff-rte-body ul,.ff-rte-body ol{margin:.3em 0 .5em;padding-left:1.3em}
.ff-rte-body a{color:#0b3d5c;text-decoration:underline}
.ff-composer-body-wrap .ff-rte{width:100%}
.ff-post-editor .ff-rte{background:#fff}
.ff-post-image img{
  display:block;
  width:100%;
  max-height:420px;
  object-fit:cover;
  background:#eef3f7;
}
.ff-post-stats{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 14px;
  font-size:12px;
  color:#6b7a8b;
  border-bottom:1px solid #eef3f7;
}
.ff-post-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:4px 8px;
  border-bottom:1px solid #eef3f7;
}
.ff-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:40px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#556170;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.ff-action:hover{background:#f4f7fa}
.ff-action.is-active{color:#2f7a8a}
.ff-action-icon{font-size:15px}

/* Comments base — detailed compact rules later (FB-style meta) */
.ff-comments{padding:8px 14px 12px}
.ff-comments-list{display:grid;gap:8px;margin-bottom:6px}
.ff-comment-form{
  display:flex;
  gap:8px;
  align-items:flex-end;
  margin-top:4px;
}
.ff-comment-input{
  flex:1;
  min-width:0;
  min-height:36px;
  max-height:140px;
  padding:8px 12px;
  border:0;
  border-radius:18px;
  background:#f0f2f5;
  font:inherit;
  font-size:13px;
  line-height:1.4;
  resize:none;
  overflow-y:hidden;
  box-sizing:border-box;
  field-sizing:content; /* modern browsers */
  unicode-bidi:plaintext;
  text-align:start;
}
.ff-comment-input[dir="rtl"]{text-align:right}
.ff-comment-input[dir="ltr"]{text-align:left}
.ff-comment-input:focus{
  outline:none;
  background:#e4e6eb;
}
.ff-comment-send{
  border:0;
  width:32px;
  height:32px;
  border-radius:50%;
  background:transparent;
  color:#2f7a8a;
  font-size:16px;
  cursor:pointer;
  flex-shrink:0;
  padding:0;
}
.ff-feed-pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  padding:8px;
  font-size:13px;
  color:#556170;
}
.ff-feed-pager a{color:#2f7a8a;font-weight:700;text-decoration:none}

/* Workplace community extras */
.ff-composer-policy{
  margin:10px 0 0;
  font-size:11px;
  line-height:1.45;
  color:#6b7a8b;
}
.ff-composer-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
  font-size:12px;
  font-weight:600;
  color:#1f4d73;
}
.ff-composer-tags-label{color:#6b7a8b;font-weight:700}
.ff-composer-pin{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  color:#1f4d73;
}
.ff-feed-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 4px;
}
.ff-feed-filter{
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  color:#556170;
  background:#fff;
  border:1px solid #d3e3ed;
}
.ff-feed-filter.is-active,
.ff-feed-filter:hover{
  color:#fff;
  background:#2f7a8a;
  border-color:#2f7a8a;
}
.ff-post.is-pinned,
.ff-post.is-profile-pinned{
  border-color:rgba(47,122,138,0.45);
  box-shadow:0 10px 28px rgba(47,122,138,0.14);
}
.ff-post-badge--pin{
  background:#0f1b38;
  color:#fff;
}
.ff-post-badge--tag{
  background:rgba(31,77,115,0.1);
  color:#1f4d73;
}
.ff-post-tools{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}
.ff-post-tool{
  border:0;
  background:#e8f6f8;
  color:#2f7a8a;
  font-size:11px;
  font-weight:800;
  padding:5px 8px;
  border-radius:999px;
  cursor:pointer;
}
.ff-comment-del{
  border:0;
  background:none;
  color:#b91c1c;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  padding:0;
  margin-left:6px;
}

/* Inbox — Messenger-style split */
.ff-inbox{
  display:grid;
  grid-template-columns: minmax(260px, 36%) 1fr;
  min-height:480px;
  max-height:min(72vh,680px);
  overflow:hidden;
  padding:0 !important;
  border-radius:16px;
  border:1px solid #d3e3ed;
  background:#fff;
}
.ff-inbox-side-head{
  padding:12px 14px 2px;
}
.ff-inbox-side-title{
  font-size:15px;
  font-weight:800;
  color:#0f1b38;
}
.ff-inbox-back{
  display:none;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  text-decoration:none !important;
  color:#1f4d73 !important;
  font-size:20px;
  font-weight:700;
  flex-shrink:0;
  background:#eef3f7;
  line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.ff-inbox-back:hover{background:#e0eaf2}
@media (max-width:720px){
  .ff-inbox{grid-template-columns:1fr; min-height:min(70vh,560px); max-height:none}
  /* List-first: only show thread when user opened a chat (?c=). */
  .ff-inbox:not(.is-open) .ff-inbox-thread{display:none}
  .ff-inbox.is-open .ff-inbox-side{display:none}
  .ff-inbox-side{border-right:0;max-height:none;min-height:min(60vh,480px)}
  .ff-inbox-back{display:inline-flex}
  .ff-inbox.is-open{min-height:min(75vh,640px)}
}
.ff-inbox-side{
  border-right:1px solid #e8eef3;
  display:flex;
  flex-direction:column;
  min-height:0;
  background:#f8fafc;
}
.ff-inbox-search-wrap{position:relative;padding:10px;border-bottom:1px solid #e8eef3}
.ff-inbox-search{
  width:100%;
  box-sizing:border-box;
  padding:9px 12px;
  border:1px solid #d3e3ed;
  border-radius:999px;
  font:inherit;
  font-size:13px;
  background:#fff;
}
.ff-inbox-search-results{
  position:absolute;
  left:10px;right:10px;top:100%;
  z-index:5;
  background:#fff;
  border:1px solid #d3e3ed;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(10,35,64,0.14);
  max-height:220px;
  overflow:auto;
}
.ff-inbox-search-item{
  display:block;
  width:100%;
  text-align:left;
  border:0;
  background:#fff;
  padding:10px 12px;
  font-size:13px;
  font-weight:600;
  color:#0f1b38;
  cursor:pointer;
  border-bottom:1px solid #f0f4f8;
}
.ff-inbox-search-item:hover{background:#e8f6f8}
.ff-inbox-search-item small{display:block;font-weight:500;color:#6b7a8b;font-size:11px}
.ff-inbox-conv-list{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
.ff-inbox-empty{padding:16px;font-size:13px;color:#6b7a8b}
.ff-inbox-conv{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  text-decoration:none;
  color:#0f1b38;
  border-bottom:1px solid #eef3f7;
}
.ff-inbox-conv:hover{background:#eef6fb}
.ff-inbox-conv.is-active{background:#e3f0f8}
.ff-inbox-conv.is-unread .ff-inbox-conv-body strong{font-weight:800}
.ff-inbox-conv.is-unread .ff-inbox-conv-preview{color:#0f1b38;font-weight:600}
.ff-inbox-conv-body{flex:1;min-width:0}
.ff-inbox-conv-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.ff-inbox-conv-body strong{
  display:block;
  font-size:13px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ff-inbox-conv-time{
  flex-shrink:0;
  font-size:11px;
  color:#8a96a3;
  font-weight:600;
}
.ff-inbox-conv-preview{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:#6b7a8b;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ff-inbox-unread{
  min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:#0084ff;color:#fff;
  font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ff-inbox-thread{display:flex;flex-direction:column;min-height:0;min-width:0}
.ff-inbox-thread-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid #e8eef3;
}
.ff-inbox-thread-peer{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
}
.ff-inbox-thread-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.ff-inbox-thread-peer strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
  font-weight:800;
  color:#0f1b38;
}
.ff-inbox-thread-sub{
  font-size:11px;
  color:#6b7a8b;
  font-weight:600;
}
.ff-inbox-conv-delete{
  flex:0 0 auto;
  border:1px solid #e2b4b4;
  background:#fff5f5;
  color:#b91c1c;
  font-size:12px;
  font-weight:700;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  line-height:1.2;
}
.ff-inbox-conv-delete:hover{
  background:#fee2e2;
}
.ff-inbox-messages{
  flex:1;overflow:auto;padding:14px;
  display:flex;flex-direction:column;gap:8px;
  background:#f4f7fa;
  min-height:240px;
  max-height:420px;
}
.ff-msg{display:flex}
.ff-msg.is-mine{justify-content:flex-end}
.ff-msg-bubble{
  max-width:80%;
  padding:9px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid #e2e8f0;
  position:relative;
}
.ff-msg.is-mine .ff-msg-bubble{
  background:linear-gradient(145deg,#1f4d73,#2f7a8a);
  color:#fff;
  border-color:transparent;
}
.ff-msg-bubble p{margin:0;font-size:13px;line-height:1.4}
.ff-msg-meta{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
}
.ff-msg-time{display:block;font-size:10px;opacity:.75}
.ff-msg-seen{
  font-size:10px;
  font-weight:700;
  opacity:.85;
}
/* WhatsApp-style delivery / read ticks on own messages */
.ff-msg-ticks{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.06em;
  opacity:.9;
  user-select:none;
}
.ff-msg-ticks.is-delivered{
  color:rgba(255,255,255,.85);
}
.ff-msg:not(.is-mine) .ff-msg-ticks.is-delivered{color:#64748b}
.ff-msg.is-mine .ff-msg-ticks.is-delivered{
  color:rgba(255,255,255,.8);
}
.ff-msg-ticks.is-read{
  color:#93c5fd; /* light blue on teal bubble */
}
.ff-msg.is-mine .ff-msg-ticks.is-read{
  color:#bfdbfe;
  opacity:1;
}
.ff-msg-delete{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  opacity:.55;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  padding:0 2px;
  border-radius:4px;
  font-weight:700;
}
.ff-msg-delete:hover{
  opacity:1;
  background:rgba(0,0,0,.08);
}
.ff-msg.is-mine .ff-msg-delete:hover{
  background:rgba(255,255,255,.18);
}
.ff-inbox-compose{
  display:flex;gap:8px;padding:10px 12px;
  border-top:1px solid #e8eef3;background:#fff;
  align-items:flex-end;
}
.ff-inbox-input{
  flex:1;min-width:0;min-height:40px;max-height:140px;
  padding:10px 14px;
  border:1px solid #d3e3ed;border-radius:18px;
  font:inherit;font-size:13px;line-height:1.4;
  resize:none;overflow-y:hidden;box-sizing:border-box;
  field-sizing:content;
  unicode-bidi:plaintext;
  text-align:start;
}
.ff-inbox-input[dir="rtl"]{text-align:right}
.ff-inbox-input[dir="ltr"]{text-align:left}
.ff-msg-bubble p{
  unicode-bidi:plaintext;
  text-align:start;
}
.ff-msg-bubble p[dir="rtl"]{text-align:right}
.ff-msg-bubble p[dir="ltr"]{text-align:left}
.ff-inbox-input:focus{
  outline:none;
  border-color:#2f7a8a;
  box-shadow:0 0 0 2px rgba(47,122,138,.15);
}
.ff-inbox-send{
  border:0;padding:10px 16px;border-radius:999px;
  background:#2f7a8a;color:#fff;font-weight:800;font-size:13px;cursor:pointer;
  flex-shrink:0;align-self:flex-end;
}
.ff-inbox-placeholder{
  flex:1;display:grid;place-items:center;text-align:center;
  padding:40px 20px;color:#556170;background:#f8fafc;
}

/* Public / private visibility */
.ff-composer-visibility{
  display:grid;
  gap:6px;
  margin:0 0 10px;
  padding:10px 12px;
  border-radius:12px;
  background:#f4f7fa;
  border:1px solid #e2e8f0;
}
.ff-vis-option{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:#0f1b38;
  cursor:pointer;
}
.ff-audience{margin-top:8px}
.ff-audience-search{
  width:100%;
  box-sizing:border-box;
  padding:9px 12px;
  border:1px solid #d3e3ed;
  border-radius:10px;
  font:inherit;
  font-size:13px;
  background:#fff;
}
.ff-audience-results{
  margin-top:6px;
  max-height:180px;
  overflow:auto;
  border:1px solid #d3e3ed;
  border-radius:10px;
  background:#fff;
}
.ff-aud-result{
  display:block;
  width:100%;
  text-align:left;
  border:0;
  background:#fff;
  padding:9px 12px;
  font-size:13px;
  font-weight:600;
  color:#0f1b38;
  cursor:pointer;
  border-bottom:1px solid #f0f4f8;
}
.ff-aud-result:hover{background:#e8f6f8}
.ff-aud-result small{display:block;font-weight:500;color:#6b7a8b;font-size:11px}
.ff-audience-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.ff-aud-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 8px 4px 10px;
  border-radius:999px;
  background:#2f7a8a;
  color:#fff;
  font-size:12px;
  font-weight:700;
}
.ff-aud-x{
  border:0;
  background:rgba(255,255,255,0.2);
  color:#fff;
  width:18px;height:18px;
  border-radius:50%;
  cursor:pointer;
  line-height:1;
  font-size:14px;
}
.ff-audience-hint{
  margin:8px 0 0;
  font-size:11px;
  color:#6b7a8b;
  line-height:1.4;
}
.ff-post-badge--private{
  background:#0f1b38;
  color:#e8f6f8;
}
.ff-post-audience-names{
  margin-top:3px;
  font-size:11px;
  color:#6b7a8b;
  line-height:1.3;
}

/* Privacy editor on post */
.ff-privacy-editor{
  padding:0 14px 12px;
}
.ff-privacy-editor[hidden]{display:none !important}
.ff-privacy-editor-inner{
  padding:12px;
  border-radius:12px;
  background:#f4f7fa;
  border:1px solid #d3e3ed;
  display:grid;
  gap:8px;
}
.ff-privacy-editor-inner > strong{
  font-size:13px;
  color:#0f1b38;
}
.ff-privacy-editor-actions{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:4px;
}
.ff-post.is-highlight{
  outline:3px solid #56a9b5;
  box-shadow:0 0 0 6px rgba(86,169,181,0.25);
  transition:outline .3s ease, box-shadow .3s ease;
}

/* ========== Facebook-like feed polish (FUTURON) ========== */
.futuron-workspace-social{
  gap:12px;
}
body.futuron-app-body .futuron-app-main:has(.futuron-workspace-social){
  background:#e8eef3;
}
.ff-composer.card,
.ff-post{
  border-radius:12px;
  border:1px solid rgba(15,27,56,0.08);
  box-shadow:0 1px 2px rgba(10,35,64,0.06);
  background:#fff;
}
.ff-composer{
  padding:12px 16px 10px;
}
.ff-composer-body{
  border-radius:24px;
  min-height:44px;
  font-size:16px;
  background:#f0f2f5;
  border-color:transparent;
}
.ff-composer-body:focus{
  background:#fff;
  border-color:#56a9b5;
}
.ff-post-head{
  padding:12px 16px 8px;
}
.ff-post-author{
  font-size:15px;
  font-weight:700;
}
.ff-post-sub{
  font-size:12px;
  color:#65676b;
  gap:4px;
}
.ff-post-dot{opacity:.6}
.ff-post-body{
  padding:4px 16px 10px;
}
.ff-post-text{
  font-size:15px;
  line-height:1.45;
  color:#050505;
  white-space:normal;
  word-break:break-word;
}
.ff-post-title{
  font-size:17px;
  margin:0 0 6px;
}
.ff-post-image{
  margin-top:4px;
  background:#000;
}
.ff-post-image img{
  max-height:520px;
  width:100%;
  object-fit:contain;
  background:#000;
}
.ff-post-stats{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px 8px;
  border-bottom:1px solid #e4e6eb;
  min-height:20px;
}
.ff-post-stats.is-empty{
  display:none;
}
.ff-stat-likes{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:#65676b;
  font-weight:500;
  cursor:pointer;
  border-radius:6px;
  padding:2px 4px;
  margin:-2px -4px;
}
.ff-stat-likes:hover,
.ff-stat-likes:focus{
  background:#f0f2f5;
  outline:none;
}
/* Who reacted tooltip (lazy-loaded names) */
.ff-react-tip{
  position:absolute;
  left:0;
  bottom:calc(100% + 8px);
  z-index:50;
  min-width:160px;
  max-width:240px;
  padding:8px 10px;
  border-radius:10px;
  background:#050505;
  color:#fff;
  font-size:12px;
  font-weight:500;
  line-height:1.35;
  box-shadow:0 8px 24px rgba(0,0,0,0.28);
  pointer-events:none;
  white-space:normal;
}
.ff-react-tip[hidden]{display:none !important}
.ff-react-tip::after{
  content:"";
  position:absolute;
  top:100%;
  left:16px;
  border:6px solid transparent;
  border-top-color:#050505;
}
.ff-react-tip-title{
  font-size:11px;
  font-weight:700;
  opacity:.75;
  margin-bottom:4px;
}
.ff-react-tip-row{
  display:flex;
  align-items:center;
  gap:6px;
  padding:2px 0;
}
.ff-react-tip-emoji{font-size:13px;line-height:1;flex-shrink:0}
.ff-react-tip-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ff-react-tip-more{
  margin-top:4px;
  opacity:.7;
  font-size:11px;
}
.ff-react-tip-loading{opacity:.7;font-style:italic}
.ff-react-stack{
  display:inline-flex;
  flex-direction:row-reverse;
}
.ff-react-dot{
  width:20px;height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 1.5px #fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  margin-left:-4px;
  line-height:1;
}
.ff-react-dot:last-child{margin-left:0}
.ff-react-total{margin-left:2px}
.ff-stat-comments{
  border:0;
  background:none;
  color:#65676b;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  padding:0;
  font-family:inherit;
}
.ff-stat-comments:hover{text-decoration:underline;color:#2f7a8a}

.ff-post-author{
  text-decoration:none !important;
  color:#050505 !important;
}
.ff-post-author:hover{text-decoration:underline !important}
.ff-post-avatar-link{flex-shrink:0;line-height:0}
.ff-post-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0;
  padding:2px 4px;
  border-bottom:1px solid #e4e6eb;
}
.ff-post-actions.has-pin{
  grid-template-columns:1fr 1fr 1fr 1fr;
}
.ff-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:40px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#65676b;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  padding:0 6px;
}
.ff-action:hover{background:#f0f2f5}
.ff-action-svg{display:block;opacity:.85}
.ff-action-icon{
  font-size:18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
}
/* Inactive Like = outline gray (FB) */
.ff-action--like:not(.is-active){
  color:#65676b;
}
.ff-action--like.is-active.ff-action--like,
.ff-action--like.ff-action--like.is-active{
  color:#2f7a8a;
}
.ff-action--like.is-active .ff-action-icon{font-size:18px}
/* Long-press Like: no text selection / callout (mobile FB feel) */
.ff-action,
.ff-action--like,
.ff-react-wrap,
.ff-react-picker,
.ff-react-pick{
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
  -webkit-tap-highlight-color:transparent;
}
.ff-action--like{
  touch-action:manipulation;
}
body.ff-react-picking{
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
  overflow:hidden;
}
body.ff-react-picking .ff-post,
body.ff-react-picking .ff-post *{
  -webkit-user-select:none !important;
  user-select:none !important;
}
/* Reaction colors when active */
.ff-action--love.is-active{color:#f33e58}
.ff-action--haha.is-active,
.ff-action--wow.is-active{color:#f7b125}
.ff-action--sad.is-active,
.ff-action--angry.is-active{color:#e68a00}
.ff-action--pin.is-active{color:#2f7a8a}
.ff-stat-right{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
/* Profile */
.ff-profile{padding:14px 16px 16px}
.ff-profile-back{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  color:#2f7a8a !important;
  text-decoration:none !important;
  margin-bottom:12px;
}
.ff-profile-hero{
  display:flex;
  align-items:center;
  gap:14px;
}
.ff-profile-photo{
  width:88px;height:88px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:800;
  color:#0f1b38;
  background:linear-gradient(145deg,#56a9b5,#e8f6f8);
}
.ff-profile-name{
  margin:0;
  font-size:22px;
  font-weight:800;
  color:#0f1b38;
}
.ff-profile-role{
  margin:4px 0 0;
  font-size:14px;
  color:#65676b;
  font-weight:600;
}
.ff-profile-count{
  margin:6px 0 0;
  font-size:13px;
  color:#2f7a8a;
  font-weight:700;
}
.ff-profile-hint{
  margin:12px 0 0;
  font-size:12px;
  color:#8a96a3;
}

/* Shared post embed (FB style) */
.ff-shared-card{
  margin:8px 16px 12px;
  border:1px solid #dadde1;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.ff-shared-unavailable{
  padding:28px 16px;
  text-align:center;
  background:#f0f2f5;
  color:#65676b;
}
.ff-shared-lock{font-size:28px;display:block;margin-bottom:8px}
.ff-shared-unavailable p{margin:0;font-size:14px;font-weight:600;line-height:1.4}
.ff-shared-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px 6px;
}
.ff-shared-head strong{display:block;font-size:13px;font-weight:700;color:#050505}
.ff-shared-time{font-size:12px;color:#65676b}
.ff-shared-title{margin:0 12px 4px;font-size:15px;font-weight:800}
.ff-shared-text{padding:0 12px 10px;font-size:14px;line-height:1.4;color:#050505}
.ff-shared-image img{display:block;width:100%;max-height:360px;object-fit:cover}

/* Share dialog */
.ff-share-dialog{
  position:fixed;
  inset:0;
  z-index:260;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.ff-share-backdrop{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.85);
}
.ff-share-panel{
  position:relative;
  z-index:1;
  width:min(440px, 100%);
  background:#fff;
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,0.2);
  padding:14px 16px 16px;
  display:grid;
  gap:10px;
}
.ff-share-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ff-share-head strong{font-size:16px;font-weight:800}
.ff-share-hint{margin:0;font-size:12px;color:#65676b;line-height:1.4}
.ff-share-comment{min-height:80px !important}
.ff-share-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  align-items:center;
}
body.ff-share-open{overflow:hidden}

/* Reaction picker (FB style) — hidden unless explicitly open */
.ff-post-actions,
.ff-react-wrap{
  overflow:visible;
  position:relative;
}
.ff-react-wrap{
  display:flex;
  justify-content:center;
  z-index:2;
}
/* Default: never visible (even if [hidden] stripped by old CSS) */
.ff-react-picker,
.ff-react-picker[hidden]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
  opacity:0 !important;
}
/* Only show when wrap has is-open AND picker is not [hidden] */
.ff-react-wrap.is-open .ff-react-picker:not([hidden]){
  display:flex !important;
  visibility:visible !important;
  pointer-events:auto !important;
  opacity:1 !important;
  position:fixed;
  /* left/top set by JS from button rect; fallback absolute for no-JS */
  z-index:4000;
  gap:4px;
  padding:8px 10px;
  background:#fff;
  border-radius:999px;
  box-shadow:0 8px 28px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
  white-space:nowrap;
  max-width:calc(100vw - 16px);
  animation:ff-react-in .16s cubic-bezier(.2,.9,.3,1.2);
  transform:none;
  touch-action:none;
  will-change:transform, opacity;
}
@keyframes ff-react-in{
  from{opacity:0; transform:translateY(10px) scale(.86)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
.ff-react-pick{
  width:42px;height:42px;
  border:0;
  background:transparent;
  border-radius:50%;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  transition:transform .12s cubic-bezier(.2,.9,.3,1.25);
  padding:0;
  flex:0 0 auto;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.ff-react-pick:hover,
.ff-react-pick.is-hot{
  transform:scale(1.42) translateY(-10px);
}

/* Comments FB style — compact actions (mobile + desktop) */
.ff-comments{
  padding:8px 16px 12px;
  background:#fff;
}
.ff-comments-list{display:grid;gap:8px;margin-bottom:6px}
.ff-comment-thread{display:grid;gap:4px}
.ff-comment{
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.ff-comment .ff-avatar,
.ff-comment .ff-avatar--sm{
  width:28px !important;
  height:28px !important;
  flex-shrink:0;
  font-size:11px;
}
.ff-comment-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:flex-start;
}
.ff-comment-bubble{
  display:inline-block;
  max-width:100%;
  padding:6px 10px;
  border-radius:16px;
  background:#f0f2f5;
}
.ff-comment-bubble strong{
  display:block;
  font-size:12px;
  font-weight:700;
  color:#050505;
  line-height:1.25;
  margin:0 0 1px;
}
.ff-comment-bubble p{
  font-size:13px;
  line-height:1.35;
  color:#050505;
  margin:0;
}
/* Compact meta row: Like · Reply · time · Delete */
.ff-comment-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 2px;
  padding:1px 2px 0 8px;
  margin:0;
  line-height:1.2;
}
.ff-comment-meta > * + *::before{
  /* separators handled via gaps + · on time */
}
.ff-comment-time,
.ff-comment-del,
.ff-c-reply-btn,
.ff-c-like{
  appearance:none;
  -webkit-appearance:none;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none;
  margin:0;
  padding:2px 6px !important;
  min-height:0 !important;
  min-width:0 !important;
  height:auto !important;
  width:auto !important;
  font-family:inherit;
  font-size:11px !important;
  font-weight:600;
  line-height:1.2;
  color:#65676b;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:3px;
  flex-direction:row !important;
  text-decoration:none;
  border-radius:0;
}
.ff-comment-time{
  cursor:default;
  padding-left:4px !important;
  font-weight:500;
}
.ff-comment-time::before{
  content:"·";
  margin-right:6px;
  color:#bcc0c4;
  font-weight:700;
}
.ff-c-like:hover,
.ff-c-reply-btn:hover{color:#2f7a8a;text-decoration:underline}
.ff-c-like.is-active{color:#2f7a8a}
.ff-comment-del:hover{color:#b91c1c;text-decoration:underline}
/* No large icons on comment Like — text / emoji only */
.ff-c-like [data-ff-c-like-icon],
.ff-c-like .ff-action-svg,
.ff-c-like svg{
  display:none !important;
}
.ff-c-react-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.ff-c-react-picker{
  position:absolute;
  bottom:calc(100% + 4px);
  left:0;
  display:flex;
  gap:1px;
  padding:4px 6px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(10,35,64,0.14);
  z-index:30;
}
.ff-c-react-picker[hidden]{display:none !important}
.ff-c-react-picker .ff-react-pick{
  width:28px;
  height:28px;
  font-size:16px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:50%;
}
.ff-c-react-picker .ff-react-pick:hover{background:#f0f2f5;transform:scale(1.12)}
.ff-c-react-count{
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:10px;
  font-weight:600;
  color:#65676b;
  margin:0 0 0 6px;
  padding:0 4px;
  background:#fff;
  border:1px solid #e4e6eb;
  border-radius:10px;
  line-height:1.4;
  transform:translateY(-4px);
}
.ff-c-react-count .ff-react-dot{font-size:11px}
.ff-c-react-count[hidden]{display:none !important}

/* Nested replies */
.ff-comment-replies{
  display:grid;
  gap:6px;
  margin:2px 0 2px 36px;
  padding-left:0;
  border-left:0;
}
.ff-comment.is-reply .ff-comment-bubble{background:#f0f2f5}
.ff-comment.is-reply .ff-avatar,
.ff-comment.is-reply .ff-avatar--sm{
  width:24px !important;
  height:24px !important;
  font-size:10px;
}
.ff-c-reply-form{
  display:flex;
  gap:6px;
  align-items:flex-end;
  margin-top:4px;
  width:100%;
  max-width:100%;
}
.ff-c-reply-form[hidden]{display:none !important}
.ff-c-reply-input{
  flex:1;
  min-height:30px !important;
  max-height:120px;
  padding:6px 12px !important;
  font-size:13px !important;
  line-height:1.4;
  resize:none;
  overflow-y:hidden;
  box-sizing:border-box;
  font-family:inherit;
}

@media (max-width:640px){
  .ff-comment-meta{
    gap:0 0;
    padding-left:6px;
  }
  .ff-comment-time,
  .ff-comment-del,
  .ff-c-reply-btn,
  .ff-c-like{
    font-size:10.5px !important;
    padding:2px 5px !important;
  }
  .ff-comment-replies{margin-left:28px}
  .ff-comment-bubble{padding:5px 9px}
  .ff-comment-bubble strong{font-size:11.5px}
  .ff-comment-bubble p{font-size:12.5px}
}

.ff-comments-more{
  font-size:14px;
  font-weight:600;
  color:#65676b;
  padding:4px 0 8px;
}
.ff-comments-more:hover{text-decoration:underline}
.ff-comment-form{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin-top:4px;
}
.ff-c-reply-form{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin-top:6px;
}
.ff-comment-input{
  flex:1;
  min-height:36px;
  max-height:140px;
  padding:8px 14px;
  border:0;
  border-radius:18px;
  background:#f0f2f5;
  font-size:14px;
  line-height:1.4;
  resize:none;
  overflow-y:hidden;
  box-sizing:border-box;
  font-family:inherit;
  field-sizing:content;
}
.ff-comment-input:focus{
  outline:none;
  background:#e4e6eb;
}
.ff-comment-send{
  width:36px;height:36px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#2f7a8a;
  font-size:18px;
  cursor:pointer;
  display:grid;
  place-items:center;
  flex-shrink:0;
  align-self:flex-end;
  margin-bottom:2px;
}
.ff-comment-send:hover{background:#e8f6f8}
.ff-comment-send:disabled{opacity:.4}

.ff-feed-filters{
  position:sticky;
  top:0;
  z-index:5;
  padding:4px 0;
  background:linear-gradient(180deg,#e8eef3 70%, transparent);
}
.ff-feed-filter{
  background:#fff;
  border-color:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
}
.ff-feed-filter.is-active{
  background:#2f7a8a;
  box-shadow:none;
}
.ff-post.is-private{
  /* subtle lock tone */
}

/* Project groups + mentions */
.ff-groups,
.ff-groups-hub,
.ff-group-detail{padding:14px}
.ff-groups-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.ff-groups-head strong{font-size:15px;color:#0f1b38;display:block}
.ff-groups-sub{
  margin:4px 0 0;
  font-size:12px;
  color:#6b7a8b;
  font-weight:500;
  line-height:1.4;
  max-width:42ch;
}
.ff-groups-new{
  border:0;
  background:#e8f6f8;
  color:#2f7a8a;
  font-size:12px;
  font-weight:800;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  flex-shrink:0;
  white-space:nowrap;
}
.ff-groups-new:hover{background:#d5eef2}
.ff-groups-empty{
  text-align:center;
  padding:28px 12px 18px;
  color:#556170;
}
.ff-groups-empty p{margin:0 0 6px}
/* Tab badge (Groups unread total) */
.futuron-app-tab{
  position:relative;
}
.ff-tab-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  margin-left:4px;
  border-radius:999px;
  background:#25d366;
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
  vertical-align:middle;
}

/* WhatsApp-style groups chat list */
.ff-groups-hub--chats{
  padding:0 !important;
  overflow:hidden;
}
.ff-groups-hub--chats .ff-groups-head{
  padding:12px 14px;
  margin:0;
  border-bottom:1px solid #e8eef3;
}
.ff-groups-hub--chats .ff-group-create{
  margin:0;
  border-radius:0;
  border-left:0;
  border-right:0;
}
.ff-groups-chat-list{
  list-style:none;
  margin:0;
  padding:0;
}
.ff-groups-chat-list li{
  border-bottom:1px solid #f0f2f5;
}
.ff-groups-chat-list li:last-child{border-bottom:0}
.ff-group-chat-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  text-decoration:none !important;
  color:inherit;
  transition:background .12s ease;
}
.ff-group-chat-row:hover,
.ff-group-chat-row:active{
  background:#f5f8fa;
}
.ff-group-chat-avatar{
  width:52px;height:52px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(145deg,#2f7a8a,#56a9b5);
  flex-shrink:0;
}
.ff-group-chat-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ff-group-chat-top,
.ff-group-chat-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ff-group-chat-name{
  font-size:16px;
  font-weight:700;
  color:#0f1b38;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.ff-groups-chat-list li.has-unread .ff-group-chat-name{
  font-weight:800;
}
.ff-group-chat-time{
  font-size:12px;
  color:#8a96a3;
  flex-shrink:0;
  font-weight:500;
}
.ff-group-chat-time.is-unread{
  color:#25d366;
  font-weight:700;
}
.ff-group-chat-preview{
  flex:1;
  min-width:0;
  font-size:13.5px;
  color:#667781;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ff-groups-chat-list li.has-unread .ff-group-chat-preview{
  color:#3b4a54;
  font-weight:600;
}
.ff-group-chat-badge{
  flex-shrink:0;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#25d366;
  color:#fff;
  font-size:12px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.ff-groups-empty{
  padding:28px 16px;
}
.ff-group-create,
.ff-group-edit{
  margin:0 0 14px;
  padding:14px;
  border:1px solid #d3e3ed;
  border-radius:12px;
  background:#f8fbfd;
  display:grid;
  gap:8px;
}
/* Critical: never show create/edit panels while [hidden] (class display:grid would override UA hidden) */
.ff-group-create[hidden],
.ff-group-edit[hidden]{
  display:none !important;
}
.ff-group-field-label{
  font-size:12px;
  font-weight:700;
  color:#556170;
  margin-top:4px;
}
.ff-group-name,.ff-group-desc{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid #d3e3ed;
  border-radius:10px;
  font:inherit;
  font-size:14px;
  background:#fff;
}
/* Description: multi-line plain (legacy) or rich editor. */
textarea.ff-group-desc{
  min-height:44px;
  max-height:220px;
  line-height:1.45;
  resize:none;
  overflow-y:hidden;
  field-sizing:content;
}
/* Group description RTE (same toolbar as post composer). */
.ff-group-desc-rte{
  background:#fff;
}
.ff-group-desc-rte .ff-rte-body,
.ff-group-desc.ff-rte-body{
  min-height:72px;
  max-height:200px;
  font-size:14px;
  background:#fff;
}
.ff-group-detail-desc{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:#1a2a3a;
  white-space:normal;
  word-break:break-word;
}
.ff-group-detail-desc p{margin:0 0 .45em}
.ff-group-detail-desc p:last-child{margin-bottom:0}
.ff-group-detail-desc ul,
.ff-group-detail-desc ol{margin:.3em 0 .5em;padding-left:1.3em}
.ff-group-detail-desc a{color:#0b3d5c;text-decoration:underline;font-weight:600}
.ff-group-create-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:4px;
}
.ff-group-create-actions .is-danger,
.ff-post-tool.is-danger{
  color:#b91c1c !important;
}
/* WhatsApp-like group chat bar */
.ff-group-chat-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 8px !important;
  margin-bottom:10px;
  /* Prevent bar content from forcing horizontal overflow / name cut */
  min-width:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.ff-group-back-icon{
  width:36px;height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#2f7a8a !important;
  text-decoration:none !important;
  font-size:18px;
  font-weight:700;
  flex:0 0 auto;
}
.ff-group-back-icon:hover{background:#e8f6f8}
.ff-group-chat-open{
  flex:1 1 auto;
  min-width:0; /* critical: allow title to shrink + ellipsis inside flex */
  max-width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  background:transparent;
  padding:4px 4px;
  border-radius:10px;
  cursor:pointer;
  text-align:left;
  font:inherit;
  overflow:hidden;
}
.ff-group-chat-open:hover{background:#f0f4f8}
.ff-group-avatar{
  width:40px;height:40px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(145deg,#2f7a8a,#56a9b5);
  flex:0 0 auto;
}
.ff-group-avatar.is-xl{
  width:88px;height:88px;
  font-size:32px;
  margin-bottom:10px;
}
.ff-group-chat-meta{
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:1px;
  overflow:hidden;
}
.ff-group-detail-name,
.ff-group-chat-meta strong{
  margin:0;
  font-size:15px;
  font-weight:800;
  color:#0f1b38;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  display:block;
}
.ff-group-chat-meta small{
  font-size:12px;
  color:#6b7a8b;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  display:block;
}
.ff-group-info-btn{
  width:36px;height:36px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#2f7a8a;
  font-size:18px;
  cursor:pointer;
  flex:0 0 auto;
}
.ff-group-info-btn:hover{background:#e8f6f8}
@media (max-width:560px){
  .ff-group-chat-bar{gap:4px;padding:6px 6px !important}
  .ff-group-back-icon,
  .ff-group-info-btn{width:32px;height:32px;font-size:16px}
  .ff-group-avatar{width:36px;height:36px;font-size:14px}
  .ff-group-detail-name,
  .ff-group-chat-meta strong{font-size:14px}
  .ff-group-chat-meta small{font-size:11px}
}

/* Full group info sheet (WA style) */
.ff-group-info-sheet{
  position:fixed;
  inset:0;
  z-index:240;
  display:flex;
  flex-direction:column;
}
.ff-group-info-sheet[hidden]{display:none !important}
.ff-group-info-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,27,56,0.35);
}
/* —— Edit post: Drive attachments —— */
.ff-edit-drive{
  margin:10px 0 4px;
  padding:10px 12px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
}
.ff-edit-drive-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.ff-edit-drive-head strong{font-size:13px;color:#0f1b38}
.ff-edit-drive-hint{
  margin:0 0 8px;
  font-size:12px;
  color:#64748b;
  line-height:1.4;
}
.ff-edit-drive-empty{
  margin:0;
  font-size:12px;
  color:#94a3b8;
}
.ff-edit-drive-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-top:1px solid #e8eef3;
  font-size:13px;
}
.ff-edit-drive-row:first-child{border-top:0}
.ff-edit-drive-name{
  flex:1;
  min-width:0;
  font-weight:700;
  color:#0f1b38;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ff-edit-drive-kind{
  font-size:11px;
  color:#64748b;
  text-transform:uppercase;
}
.ff-edit-drive-rm{
  border:0;
  background:#fee2e2;
  color:#b91c1c;
  border-radius:8px;
  padding:4px 8px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

/* —— Group post read receipts (WhatsApp-style) —— */
.ff-seen-ticks{
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-left:4px;
  padding:0 4px;
  border:0;
  background:transparent;
  cursor:pointer;
  vertical-align:middle;
  font:inherit;
  line-height:1;
  color:#94a3b8;
}
.ff-seen-ticks .ff-seen-mark{
  font-size:13px;
  font-weight:700;
  letter-spacing:-1px;
}
.ff-seen-ticks .ff-seen-meta{
  font-size:11px;
  font-weight:600;
  opacity:.85;
}
.ff-seen-ticks.is-double{color:#64748b}
.ff-seen-ticks.is-all{
  color:#2563eb;
}
.ff-seen-ticks.is-all .ff-seen-mark{color:#2563eb}
.ff-seen-ticks:hover{opacity:.9}
.ff-seen-popover{
  position:fixed;
  inset:0;
  z-index:10050;
  background:rgba(15,27,56,.35);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:12px;
}
.ff-seen-popover-card{
  width:100%;
  max-width:380px;
  max-height:min(70vh,480px);
  overflow:auto;
  background:#fff;
  border-radius:16px 16px 12px 12px;
  box-shadow:0 12px 40px rgba(10,35,64,.22);
  padding:0 0 12px;
}
.ff-seen-popover-card header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border-bottom:1px solid #e8eef3;
  position:sticky;
  top:0;
  background:#fff;
}
.ff-seen-popover-card header strong{flex:1;font-size:15px}
.ff-seen-popover-x{
  width:32px;height:32px;border:0;border-radius:50%;
  background:#f1f5f9;cursor:pointer;font-size:16px;
}
.ff-seen-popover-body{padding:10px 14px}
.ff-seen-popover-summary{
  margin:0 0 10px;
  font-size:13px;
  color:#475569;
  font-weight:600;
}
.ff-seen-popover-empty{margin:8px 0;color:#94a3b8;font-size:13px}
.ff-seen-popover-list{list-style:none;margin:0;padding:0}
.ff-seen-popover-list li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid #f1f5f9;
  font-size:14px;
  font-weight:600;
  color:#0f1b38;
}
.ff-seen-popover-list li:last-child{border-bottom:0}
.ff-group-chat-ticks{
  display:inline-block;
  margin-right:4px;
  font-size:12px;
  font-weight:700;
  letter-spacing:-1px;
  color:#94a3b8;
  vertical-align:middle;
}
.ff-group-chat-ticks.is-double{color:#64748b}
.ff-group-chat-ticks.is-all{color:#2563eb}

.ff-group-info-panel{
  position:relative;
  z-index:1;
  margin-top:auto;
  max-height:min(92vh, 820px);
  overflow:auto;
  background:#eef3f7;
  border-radius:16px 16px 0 0;
  box-shadow:0 -8px 32px rgba(10,35,64,0.18);
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
  animation:ff-group-sheet-in .2s ease;
}
@keyframes ff-group-sheet-in{
  from{transform:translateY(24px);opacity:.6}
  to{transform:translateY(0);opacity:1}
}
body.ff-group-info-open{overflow:hidden}
.ff-group-info-top{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:#0f1b38;
  color:#fff;
}
.ff-group-info-top strong{flex:1;font-size:16px;font-weight:800}
.ff-group-info-close{
  width:36px;height:36px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}
.ff-group-info-close:hover{background:rgba(255,255,255,0.12)}
.ff-group-info-top-spacer{width:36px}
.ff-group-info-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:22px 16px 16px;
  background:linear-gradient(180deg,#152447 0%,#1a3358 100%);
  color:#fff;
}
.ff-group-info-name{
  margin:0;
  font-size:20px;
  font-weight:800;
  color:#fff;
}
.ff-group-info-count{
  margin:6px 0 0;
  font-size:13px;
  opacity:.85;
}
.ff-group-info-created{
  margin:4px 0 0;
  font-size:12px;
  opacity:.7;
}
.ff-group-info-card{
  margin:12px 12px 0;
  padding:14px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(10,35,64,0.06);
}
.ff-group-info-card-label{
  display:block;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#2f7a8a;
  margin-bottom:6px;
}
.ff-group-detail-desc{
  margin:0;
  font-size:14px;
  color:#0f1b38;
  line-height:1.45;
}
.ff-group-info-empty{
  margin:0;
  font-size:13px;
  color:#8a96a3;
  font-style:italic;
}
.ff-group-info-actions{
  margin:12px 12px 0;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(10,35,64,0.06);
}
.ff-group-action-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  border:0;
  border-bottom:1px solid #f0f4f8;
  background:#fff;
  padding:14px 16px;
  font:inherit;
  font-size:15px;
  font-weight:600;
  color:#2f7a8a;
  cursor:pointer;
  text-align:left;
}
.ff-group-action-row:last-child{border-bottom:0}
.ff-group-action-row:hover{background:#f4fafb}
.ff-group-action-ico{font-size:18px;width:28px;text-align:center}
.ff-group-add-block{
  margin:12px 12px 0;
  padding:12px 14px;
  background:#fff;
  border-radius:12px;
}
.ff-group-participants{padding-top:10px}
.ff-group-participants-head{
  display:block;
  font-size:13px;
  font-weight:800;
  color:#556170;
  margin-bottom:8px;
  padding:0 2px;
}
.ff-group-member-list{
  list-style:none;
  margin:0;
  padding:0;
}
.ff-group-member-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 2px;
  border-bottom:1px solid #f0f4f8;
  font-size:13px;
}
.ff-group-member-row:last-child{border-bottom:0}
.ff-group-member-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-top:2px;
}
.ff-group-member-name{font-weight:700;color:#0f1b38;font-size:14px}
.ff-group-member-role{
  font-size:11px;
  font-weight:700;
  color:#2f7a8a;
}
.ff-group-member-role.is-owner{color:#0f1b38}
.ff-group-member-role.is-admin{color:#2f7a8a}
.ff-group-member-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  flex-shrink:0;
}
.ff-group-member-act,
.ff-group-member-rm{
  border:0;
  background:transparent;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  padding:2px 4px;
  white-space:nowrap;
}
.ff-group-member-act{color:#2f7a8a}
.ff-group-member-rm{color:#b91c1c}
.ff-group-danger-row{
  display:block;
  width:calc(100% - 24px);
  margin:16px 12px 8px;
  padding:14px;
  border:0;
  border-radius:12px;
  background:#fff;
  color:#b91c1c;
  font:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  box-shadow:0 1px 2px rgba(10,35,64,0.06);
}
.ff-group-danger-row:hover{background:#fef2f2}
.ff-group-edit{
  margin:12px 12px 0;
}
.ff-group-context{
  margin:6px 0 0;
  font-size:12px;
  color:#2f7a8a;
  font-weight:600;
}
.ff-group-context-inline{
  margin:0 0 8px;
  font-size:12px;
  color:#2f7a8a;
  font-weight:600;
}
.ff-post-group-label{
  font-size:12px;
  font-weight:700;
  color:#2f7a8a;
  margin-bottom:6px;
}
.ff-composer-body-wrap{position:relative;overflow:visible}
.ff-mention-results{
  position:absolute;
  left:0;right:0;
  top:100%;
  z-index:40;
  max-height:180px;
  overflow:auto;
  background:#fff;
  border:1px solid #d3e3ed;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(10,35,64,0.14);
}
/* JS switches to fixed when open so lists are not clipped by post/card edges */
.ff-mention-results.is-fixed{
  right:auto;
}
.ff-mention-results .ff-aud-result{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  width:100%;
  text-align:left;
  padding:10px 12px;
}
.ff-mention-results .ff-aud-result-name{
  font-weight:800;
  color:#0f1b38;
}
.ff-mention-results .ff-aud-result-full{
  font-size:12px;
  color:#64748b;
  font-weight:500;
}
/* Full-name mentions may wrap mid-post; keep chip-like color without clipping. */
.ff-mention{
  white-space: normal;

  color:#2f7a8a;
  font-weight:700;
  text-decoration:none;
}
a.ff-mention:hover{
  text-decoration:underline;
}
.ff-comment-form{position:relative;overflow:visible}

/* Collapsed / expanded composer (Facebook style) */
.ff-composer{
  padding:10px 12px;
  overflow:visible;
}
/* Default view: small inbox bar only */
.ff-composer:not(.is-expanded) .ff-composer-expanded{
  display:none !important;
}
.ff-composer-collapsed{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  border:0;
  background:transparent;
  padding:4px 0;
  cursor:pointer;
  text-align:left;
  font:inherit;
}
.ff-composer.is-expanded .ff-composer-collapsed{
  display:none !important;
}
.ff-composer-fake-input{
  flex:1;
  min-width:0;
  padding:10px 14px;
  border-radius:24px;
  background:#f0f2f5;
  color:#65676b;
  font-size:15px;
  font-weight:500;
  line-height:1.3;
}
.ff-composer-collapsed:hover .ff-composer-fake-input{
  background:#e4e6eb;
}
.ff-composer-collapsed-photo{
  font-size:20px;
  opacity:.7;
  flex-shrink:0;
}
.ff-composer-expanded[hidden]{display:none !important}
.ff-composer-expanded{
  display:block;
}
.ff-composer-expanded-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid #e4e6eb;
}
.ff-composer-expanded-head strong{
  font-size:16px;
  font-weight:800;
  color:#0f1b38;
  flex:1;
  text-align:center;
}
.ff-composer-close{
  width:36px;height:36px;
  border:0;
  border-radius:50%;
  background:#e4e6eb;
  color:#0f1b38;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
}
.ff-composer-close:hover{background:#d8dadf}
.ff-composer-user-line{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.ff-composer-user-line strong{
  font-size:15px;
  font-weight:700;
  color:#0f1b38;
}
.ff-composer.is-expanded{
  padding:12px 14px 14px;
}
.ff-composer.is-expanded .ff-rte-body.ff-composer-body,
.ff-composer.is-expanded .ff-composer-body{
  min-height:120px;
  font-size:20px;
  background:transparent;
  border:0;
  border-radius:0;
  padding:8px 0;
}
.ff-composer.is-expanded .ff-composer-body:focus{
  box-shadow:none;
  border:0;
  background:transparent;
}
/* Expanded = modal overlay (all viewports, FB create-post dialog) */
.ff-composer.is-expanded{
  position:fixed;
  z-index:220;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(500px, calc(100vw - 24px));
  max-height:min(90vh, 720px);
  overflow:auto;
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,0.28);
  margin:0;
  padding:12px 16px 16px;
}
body.ff-composer-open{
  overflow:hidden;
}
body.ff-composer-open::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(255,255,255,0.8);
  z-index:210;
  pointer-events:auto;
}
@media (max-width:560px){
  .ff-composer.is-expanded{
    left:0;
    top:0;
    right:0;
    bottom:0;
    transform:none;
    width:100%;
    max-height:100vh;
    border-radius:0;
    padding:12px 14px calc(16px + env(safe-area-inset-bottom));
    box-shadow:none;
  }
  body.ff-composer-open::before{
    display:none;
  }
}

/* Group discussion Active / Archive */
.ff-group-disc-tabs{
  display:flex;
  gap:8px;
  padding:0 2px 4px;
  flex-wrap:wrap;
}
.ff-group-disc-tab{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #c5d8e6;
  background:#fff;
  color:#1f4d73;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  line-height:1.2;
}
.ff-group-disc-tab:hover{background:#eef6fb;border-color:#1f4d73;color:#0f1b38}
.ff-group-disc-tab.is-active{
  background:#0f1b38;
  border-color:#0f1b38;
  color:#fff;
}
.ff-post-badge--closed{
  background:#f1f5f9;
  color:#475569;
  border:1px solid #e2e8f0;
}
.ff-post.is-discussion-closed{
  opacity:0.98;
  border-color:#e2e8f0;
}
.ff-discussion-banner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  margin:0 12px 10px;
  padding:10px 12px;
  border-radius:10px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  font-size:13px;
  color:#475569;
  line-height:1.4;
}
.ff-discussion-banner strong{color:#0f1b38;font-weight:800}
.ff-discussion-reopen{
  margin-left:auto;
  border:1px solid #c5d8e6;
  background:#fff;
  border-radius:8px;
  padding:6px 12px;
  font-size:12px;
  font-weight:700;
  color:#1f4d73;
  cursor:pointer;
}
.ff-discussion-reopen:hover{border-color:#1f4d73;background:#eef6fb}
.ff-action.is-disabled{
  opacity:0.55;
  cursor:default;
  pointer-events:none;
}
.ff-group-email-card .ff-group-email-opt{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:4px 0 0;
  padding:10px 12px;
  border-radius:12px;
  background:#f4f7fa;
  border:1px solid #e2e8f0;
  font-size:13px;
  cursor:pointer;
}
.ff-group-email-opt input{margin-top:3px;flex:0 0 auto}
.ff-group-email-opt strong{display:block;font-weight:800;color:#0f1b38}
.ff-group-email-opt small{display:block;margin-top:3px;color:#64748b;line-height:1.4;font-weight:500}
.ff-group-email-status{
  margin:6px 0 0;
  font-size:13px;
  font-weight:700;
  color:#0f1b38;
}
#ff-group-email-msg{
  margin:8px 0 0;
  font-size:12px;
}
#ff-group-email-msg.is-ok{color:#0f766e}
#ff-group-email-msg.is-error{color:#b91c1c}
@media (max-width:480px){
  .ff-discussion-reopen{margin-left:0;width:100%}
}