/* Professional social hub for 24-hour statuses, groups and communities. */
:root{
  --community-ink:#102a3a;
  --community-muted:#607785;
  --community-line:#dceaf3;
  --community-surface:#ffffff;
  --community-soft:#f2f8fc;
  --community-blue:#0788d1;
  --community-blue-deep:#056aab;
  --community-cyan:#20b9cf;
  --community-shadow:0 12px 34px rgba(17,78,115,.10);
}

body.communityPage.vobixOrganized{
  min-height:100dvh;
  background:
    radial-gradient(circle at 92% 8%,rgba(32,185,207,.12),transparent 24rem),
    linear-gradient(180deg,#f4faff 0,#f8fbfd 42%,#f3f8fb 100%)!important;
  color:var(--community-ink)!important;
}

body.communityPage.vobixOrganized>.phaseHeader{
  position:sticky;
  top:0;
  z-index:20;
  min-height:58px;
  background:rgba(255,255,255,.91)!important;
  border-bottom:1px solid rgba(203,224,237,.84)!important;
  box-shadow:0 8px 28px rgba(20,77,111,.07)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

body.communityPage.vobixOrganized>.phaseHeader>a:first-child{
  min-height:40px;
  border:1px solid #d9ebf5!important;
  border-radius:14px!important;
  background:#f3f9fd!important;
  color:#116d9d!important;
  font-weight:750;
}

body.communityPage.vobixOrganized>.phaseHeader>b{
  color:#087dbb!important;
  font-size:19px!important;
  letter-spacing:-.35px;
}

body.communityPage.vobixOrganized .communityWrap{
  width:100%;
  max-width:820px;
  padding:10px 14px calc(30px + var(--vobix-safe-bottom,0px));
}

body.communityPage.vobixOrganized .communityTitle{
  display:none;
}

/* A compact, horizontal hub keeps the content visible on the first screen. */
body.communityPage.vobixOrganized .communityTabs{
  display:flex!important;
  grid-template-columns:none!important;
  gap:8px;
  margin:2px -14px 14px;
  padding:8px 14px 11px;
  overflow-x:auto;
  border:0!important;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}

body.communityPage.vobixOrganized .communityTabs::-webkit-scrollbar{display:none}

body.communityPage.vobixOrganized .communityTabs>button{
  flex:0 0 auto;
  width:auto;
  min-width:104px;
  min-height:54px!important;
  padding:7px 12px!important;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:7px!important;
  border:1px solid #dceaf3!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.88)!important;
  color:#58707f!important;
  font-size:14px!important;
  font-weight:750!important;
  line-height:1!important;
  box-shadow:0 5px 18px rgba(18,80,116,.06)!important;
  scroll-snap-align:start;
}

body.communityPage.vobixOrganized .communityTabs>button>span:first-child{
  width:25px;
  height:25px;
  display:grid!important;
  place-items:center;
  color:#1688bd;
}

body.communityPage.vobixOrganized .communityTabs>button[aria-current]{
  border-color:#8ed5f4!important;
  background:linear-gradient(135deg,#087fd0,#1aaacb)!important;
  color:#fff!important;
  box-shadow:0 9px 22px rgba(4,128,194,.24)!important;
}

body.communityPage.vobixOrganized .communityTabs>button[aria-current]>span:first-child{
  color:#fff;
}

body.communityPage.vobixOrganized .communityTabs svg{
  width:21px!important;
  height:21px!important;
}

/* Shared professional hero. */
body.communityPage .communityHero,
body.communityPage .statusWelcome{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:20px!important;
  margin:0 0 15px!important;
  border:0!important;
  border-radius:24px!important;
  color:#fff;
  text-align:left!important;
  background:linear-gradient(135deg,#086cad 0%,#078fcf 58%,#22b7ca 100%)!important;
  box-shadow:0 15px 35px rgba(8,114,174,.23)!important;
}

body.communityPage .communityHero::after,
body.communityPage .statusWelcome::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:170px;
  height:170px;
  right:-58px;
  top:-88px;
  border:28px solid rgba(255,255,255,.12);
  border-radius:50%;
}

body.communityPage .communityHero .communitySectionTitle,
body.communityPage .statusWelcome .communitySectionTitle{
  justify-content:space-between!important;
  text-align:left!important;
  flex-wrap:nowrap!important;
  margin:0!important;
}

body.communityPage .communityHero h2,
body.communityPage .statusWelcome h2{
  margin:0!important;
  color:#fff!important;
  font-size:clamp(21px,5vw,27px)!important;
  line-height:1.12!important;
  letter-spacing:-.5px!important;
}

body.communityPage .communityHero .phaseNote,
body.communityPage .statusWelcome .phaseNote{
  max-width:520px!important;
  margin:9px 0 0!important;
  color:rgba(255,255,255,.90)!important;
  font-size:14px!important;
  line-height:1.45!important;
  text-align:left!important;
}

body.communityPage .communityHero .phaseButton,
body.communityPage .statusWelcome .phaseButton{
  flex:0 0 auto;
  min-height:44px!important;
  margin:0 0 0 12px!important;
  padding:10px 15px!important;
  border:1px solid rgba(255,255,255,.68)!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#076fae!important;
  font-weight:800!important;
  box-shadow:0 8px 20px rgba(0,64,105,.18)!important;
}

body.communityPage[data-community-view="communities"] .communityHero{
  background:linear-gradient(135deg,#075f9e 0%,#087ebd 52%,#18a8bb 100%)!important;
}

body.communityPage[data-community-view="channels"] .communityHero{
  background:linear-gradient(135deg,#075f9f,#087fd0 58%,#20b2c8)!important;
}

/* Lists read as real app content, not dashboard tiles. */
body.communityPage #groupList,
body.communityPage #statusList{
  display:flex!important;
  flex-direction:column;
  gap:11px!important;
}

body.communityPage #groupList .communityCard{
  position:relative;
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  grid-template-areas:"avatar title action" "avatar meta action";
  align-items:center;
  column-gap:13px;
  min-height:76px;
  padding:13px 13px!important;
  border:1px solid var(--community-line)!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.94)!important;
  color:var(--community-ink)!important;
  box-shadow:0 7px 24px rgba(23,81,115,.075)!important;
}

body.communityPage #groupList .communityCard::before{
  content:attr(data-initial);
  grid-area:avatar;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:#fff;
  font-size:22px;
  font-weight:850;
  background:linear-gradient(145deg,#0b8dd2,#20b7c8);
  box-shadow:0 7px 18px rgba(6,132,193,.20);
}

body.communityPage[data-community-view="communities"] #groupList .communityCard::before{
  border-radius:17px;
  background:linear-gradient(145deg,#0877bd,#159dae);
}

body.communityPage #groupList .communityCard h3{
  grid-area:title;
  margin:0!important;
  color:#163647!important;
  font-size:17px!important;
  line-height:1.25;
  letter-spacing:-.2px;
}

body.communityPage #groupList .communityCard p{
  grid-area:meta;
  margin:4px 0 0!important;
  color:var(--community-muted)!important;
  font-size:13px;
  line-height:1.3;
}

body.communityPage #groupList .communityCard .phaseButton{
  grid-area:action;
  min-width:72px;
  min-height:40px;
  margin:0!important;
  padding:8px 12px!important;
  border:0!important;
  border-radius:13px!important;
  background:#e9f6fd!important;
  color:#0875ad!important;
  font-weight:800;
  box-shadow:none!important;
}

body.communityPage #groupList .communityCard[data-pending="true"]{
  border-color:#8bd7ee!important;
  background:linear-gradient(90deg,#f7fdff,#eefaff)!important;
}

body.communityPage #groupList .communityCard[data-pending="true"] .phaseButton{
  background:#0787ca!important;
  color:#fff!important;
}

body.communityPage #groupList>.phaseNote,
body.communityPage #statusList>.phaseNote{
  margin:0!important;
  padding:26px 20px!important;
  border:1px dashed #bcd9e8!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.78)!important;
  color:#57717f!important;
  text-align:center;
  line-height:1.5;
}

/* Statuses become a polished, media-first feed. */
body.communityPage #statusList .communityCard{
  position:relative;
  padding:0 0 14px!important;
  overflow:hidden;
  border:1px solid var(--community-line)!important;
  border-radius:24px!important;
  background:#fff!important;
  color:var(--community-ink)!important;
  box-shadow:var(--community-shadow)!important;
}

body.communityPage #statusList .communityCard::before{
  content:attr(data-initial);
  float:left;
  width:44px;
  height:44px;
  margin:14px 11px 8px 14px;
  display:grid;
  place-items:center;
  border:3px solid #fff;
  outline:2px solid #12a7cf;
  border-radius:50%;
  color:#fff;
  font-size:16px;
  font-weight:850;
  background:linear-gradient(145deg,#087ed0,#21b8c7);
}

body.communityPage #statusList .communityCard h3{
  margin:16px 14px 2px 0!important;
  padding-top:2px;
  color:#163647!important;
  font-size:16px!important;
}

body.communityPage #statusList .communityCard>p{
  margin:3px 14px 12px 69px!important;
  color:#425f6f!important;
  white-space:pre-wrap;
  line-height:1.45;
}

body.communityPage #statusList .communityCard>div{
  clear:both;
  margin-top:6px;
  background:#eaf2f7;
}

body.communityPage #statusList .communityCard .momentMedia{
  display:block;
  width:100%;
  max-width:none!important;
  max-height:560px!important;
  object-fit:cover;
  border-radius:0!important;
}

body.communityPage #statusList .communityCard>small{
  display:inline-flex;
  margin:12px 14px 0;
  padding:6px 10px;
  border-radius:999px;
  background:#eff7fb;
  color:#557381!important;
  font-size:12px;
  font-weight:700;
}

body.communityPage #statusList .communityCard>.phaseButton{
  float:right;
  min-height:36px;
  margin:10px 14px 0 6px!important;
  padding:7px 11px!important;
  border-radius:12px!important;
  font-size:13px!important;
  box-shadow:none!important;
}

body.communityPage #moreStatuses{
  width:100%;
  min-height:46px;
  margin-top:12px;
  border-radius:15px;
}

/* Group and community rooms are calmer and easier to scan. */
body.communityPage #groupRoom{
  padding:15px!important;
  border:1px solid var(--community-line)!important;
  border-radius:24px!important;
  background:#fff!important;
  color:var(--community-ink)!important;
  box-shadow:var(--community-shadow)!important;
}

body.communityPage #groupRoom>.communitySectionTitle{
  position:sticky;
  top:62px;
  z-index:5;
  margin:-15px -15px 10px!important;
  padding:12px 15px;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid #e5eff5;
  backdrop-filter:blur(14px);
}

body.communityPage #groupRoom .groupMessages{
  gap:8px;
  padding:15px 0;
}

body.communityPage #groupRoom .groupMessage{
  border:1px solid #dceaf2;
  background:#f0f6fa!important;
  color:#173848!important;
  box-shadow:0 3px 10px rgba(20,75,105,.05);
}

body.communityPage #groupRoom .groupMessage.mine{
  border-color:#b7def2;
  background:#dff3ff!important;
}

body.communityPage #groupRoom .groupMessage small{color:#66818f!important}

body.communityPage .communitySend{
  position:sticky;
  bottom:calc(6px + var(--vobix-safe-bottom,0px));
  padding:8px;
  border:1px solid #d9e8f1;
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 26px rgba(18,72,103,.12);
  backdrop-filter:blur(14px);
}

body.communityPage .communitySend textarea{
  min-height:44px;
  margin:0!important;
  border:0!important;
  background:#f1f7fa!important;
}

body.communityPage .communitySend button{
  min-height:44px;
  border-radius:14px!important;
}

/* Dialogs feel native and keep actions reachable above the keyboard. */
body.communityPage .communityDialog{
  width:min(580px,calc(100% - 18px));
  padding:18px;
  border:1px solid #d7e8f2;
  border-radius:24px;
  background:#fff!important;
  color:var(--community-ink)!important;
  box-shadow:0 24px 70px rgba(3,44,70,.28);
}

body.communityPage .communityDialog::backdrop{
  background:rgba(0,24,40,.58);
  backdrop-filter:blur(7px);
}

body.communityPage .communityCreateFooter{
  position:sticky;
  bottom:-18px;
  z-index:3;
  margin:10px -18px -18px;
  padding:12px 18px calc(12px + var(--vobix-safe-bottom,0px));
  border-top:1px solid #dce9f1;
  background:rgba(255,255,255,.96);
}

body.communityPage :is(.communityTabs>button,.communityCard,.phaseButton):focus-visible{
  outline:3px solid #056fae!important;
  outline-offset:3px!important;
}

@media(max-width:540px){
  body.communityPage .communityHero,
  body.communityPage .statusWelcome{padding:17px!important;border-radius:21px!important}
  body.communityPage .communityHero .communitySectionTitle,
  body.communityPage .statusWelcome .communitySectionTitle{align-items:flex-start}
  body.communityPage .communityHero .phaseButton,
  body.communityPage .statusWelcome .phaseButton{padding:9px 11px!important;font-size:14px!important}
  body.communityPage #groupList .communityCard{grid-template-columns:49px minmax(0,1fr) auto;column-gap:10px}
  body.communityPage #groupList .communityCard::before{width:47px;height:47px;border-radius:16px;font-size:19px}
  body.communityPage #groupList .communityCard .phaseButton{min-width:64px;padding-inline:9px!important}
}

@media(max-width:370px){
  body.communityPage .communityHero .communitySectionTitle,
  body.communityPage .statusWelcome .communitySectionTitle{flex-wrap:wrap!important}
  body.communityPage .communityHero .phaseButton,
  body.communityPage .statusWelcome .phaseButton{width:100%;margin:11px 0 0!important}
  body.communityPage #groupList .communityCard{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"avatar title" "avatar meta" "action action"}
  body.communityPage #groupList .communityCard::before{width:42px;height:42px}
  body.communityPage #groupList .communityCard .phaseButton{width:100%;margin-top:10px!important}
}

html:is([data-vobix-font=large],[data-vobix-font=xlarge]) body.communityPage .communityTabs>button{
  min-width:122px;
  min-height:60px!important;
  font-size:16px!important;
}

html:is([data-vobix-font=large],[data-vobix-font=xlarge]) body.communityPage :is(.communityHero .phaseNote,.statusWelcome .phaseNote,#groupList .communityCard p){
  font-size:16px!important;
}

@media(prefers-reduced-motion:no-preference){
  body.communityPage .communityTabs>button,
  body.communityPage .communityCard,
  body.communityPage .phaseButton{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
  body.communityPage .communityTabs>button:active,
  body.communityPage .phaseButton:active{transform:scale(.97)}
  body.communityPage .communityCard:hover{transform:translateY(-1px);box-shadow:0 13px 32px rgba(16,77,112,.12)!important}
}

@media(prefers-reduced-motion:reduce){
  body.communityPage *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

body.communityPage.seniorHighContrast .communityHero,
body.communityPage.contrast .communityHero,
body.communityPage.seniorHighContrast .statusWelcome,
body.communityPage.contrast .statusWelcome{
  background:#063a5b!important;
  border:2px solid #fff!important;
}

body.communityPage .sectionEyebrow{
  display:block;
  margin:0 0 5px;
  color:rgba(255,255,255,.78);
  font-size:11px;
  font-weight:850;
  letter-spacing:.11em;
  line-height:1.2;
  text-transform:uppercase;
}

/* Camera and review inside the 24-hour status composer. */
body.communityPage .statusMediaActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:10px 0 14px;
}
body.communityPage .statusMediaActions .phaseButton,
body.communityPage .statusGalleryButton{
  min-height:50px;
  margin:0!important;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border:1px solid #b9dced!important;
  border-radius:15px!important;
  background:#eef8fd!important;
  color:#096f9f!important;
  font:800 15px system-ui;
  text-align:center;
  cursor:pointer;
}
body.communityPage .statusRecordButton{
  border-color:#0788ce!important;
  background:linear-gradient(135deg,#0788ce,#1caec8)!important;
  color:#fff!important;
}
body.communityPage .statusGalleryButton input{
  position:absolute!important;
  inline-size:1px!important;
  block-size:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.communityPage .statusCaptureReview{
  margin:12px 0 16px;
  padding:10px;
  border:1px solid #cfe3ee;
  border-radius:19px;
  background:#f3f8fb;
}
body.communityPage .statusCaptureReview video{
  display:block;
  width:100%;
  max-height:58dvh;
  border-radius:14px;
  background:#071722;
  object-fit:contain;
}
body.communityPage .statusCaptureActions{
  display:flex;
  gap:8px;
  margin-top:10px;
}
body.communityPage .statusCaptureActions .phaseButton{
  flex:1 1 0;
  min-height:44px;
  margin:0!important;
}
body.communityPage #statusCaptureStatus{
  min-height:1.4em;
  margin:9px 2px 0!important;
  text-align:center;
}
@media(max-width:370px){
  body.communityPage .statusMediaActions{grid-template-columns:1fr}
}


/* Keep every destination visible: no hidden horizontal navigation. */
body.communityPage.vobixOrganized .communityTabs{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  margin:2px 0 14px!important;
  padding:0 0 4px!important;
  overflow:visible!important;
}
body.communityPage.vobixOrganized .communityTabs>button{
  width:100%!important;
  min-width:0!important;
  min-height:64px!important;
  padding:7px 5px!important;
  flex-direction:column!important;
  gap:4px!important;
  line-height:1.15!important;
  white-space:normal!important;
}
body.communityPage.vobixOrganized .communityTabs>button>span:last-child{
  max-width:100%;
  overflow-wrap:anywhere;
  text-align:center;
}
html:is([data-vobix-font=large],[data-vobix-font=xlarge]) body.communityPage .communityTabs{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
html:is([data-vobix-font=large],[data-vobix-font=xlarge]) body.communityPage .communityTabs>button{
  min-width:0!important;
}
@media(max-width:370px){
  body.communityPage.vobixOrganized .communityTabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(min-width:640px){
  body.communityPage.vobixOrganized .communityTabs,
  html:is([data-vobix-font=large],[data-vobix-font=xlarge]) body.communityPage .communityTabs{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
}

@media(min-width:640px){
  html:is([data-vobix-font=large],[data-vobix-font=xlarge]) body.communityPage .communityTabs{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}


/* Direct social flows: privacy once, publish fast. */
body.communityPage .statusPrivacyLink{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  margin-top:10px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.52);
  border-radius:13px;
  color:#fff!important;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  background:rgba(255,255,255,.13);
}
body.communityPage .statusPrivacySummary{
  margin:12px 0!important;
  padding:11px 13px;
  border:1px solid #cfe6f2;
  border-radius:14px;
  background:#f0f8fc;
  color:#315f75;
  font-size:13px;
  line-height:1.4;
}
body.communityPage .statusPublishButton{
  width:100%;
  min-height:52px!important;
  margin-top:6px!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#087fc5,#20afc5)!important;
  color:#fff!important;
}
body.communityPage #statusComposer #statusForm>label:first-of-type{
  margin-top:6px;
  font-size:17px;
  font-weight:850;
}
body.communityPage #statusComposer #statusCaption{
  min-height:104px;
  border:1px solid #cfe3ee!important;
  border-radius:17px!important;
  background:#f7fbfd!important;
  font-size:17px;
}
body.communityPage #createNameFields{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #deebf2;
}
body.communityPage[data-community-view="communities"] #groupRoom{
  border-top:5px solid #159daf!important;
}
body.communityPage[data-community-view="broadcasts"] #broadcastRoom{
  border-top:5px solid #0788d1!important;
}