.psgc-room {
  --psgc-blue: #0b7ae1;
  --psgc-ink: #172335;
  --psgc-muted: #667085;
  --psgc-line: #e7edf4;
  --psgc-soft: #f5f8fc;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  height: min(780px, calc(100dvh - 145px));
  min-height: 560px;
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  color: var(--psgc-ink);
  border: 1px solid var(--psgc-line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(24, 45, 72, .08);
}

.psgc-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 4px;
  min-height: 54px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--psgc-line);
  background: #fff;
}

.psgc-header-copy { min-width: 0; }
.psgc-header h2 { overflow: hidden; margin: 0; font-size: clamp(1.125rem, 4vw, 1.25rem); line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.psgc-header p { overflow: hidden; margin: 2px 0 0; color: var(--psgc-muted); font-size: .72rem; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.psgc-header-back { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--psgc-ink); cursor: pointer; font: 500 1.8rem/1 system-ui, sans-serif; }
.psgc-header-back:active { background: var(--psgc-soft); transform: scale(.96); }
.psgc-header-back:focus-visible { outline: 3px solid rgba(11, 122, 225, .24); outline-offset: 1px; }
.psgc-rules { border: 1px solid var(--psgc-line); border-radius: 999px; padding: 9px 14px; background: #fff; color: var(--psgc-ink); font-weight: 700; }

.psgc-room-menu { position: relative; flex: 0 0 auto; }
.psgc-room-menu summary { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--psgc-ink); cursor: pointer; font-size: 1.35rem; font-weight: 800; line-height: 1; list-style: none; }
.psgc-room-menu summary:active { background: var(--psgc-soft); }
.psgc-room-menu summary:focus-visible { outline: 3px solid rgba(11, 122, 225, .24); outline-offset: 1px; }
.psgc-room-menu summary::-webkit-details-marker { display: none; }
.psgc-room-menu__panel { position: absolute; z-index: 35; top: 48px; right: 0; width: min(310px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--psgc-line); border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgba(23, 35, 53, .18); }
.psgc-room-menu__panel > p { margin: 0; color: var(--psgc-muted); font-size: .8rem; line-height: 1.45; }
.psgc-room-menu__panel > button { margin-top: 10px; padding: 0; border: 0; background: transparent; color: var(--psgc-blue); font-weight: 700; }

.psgc-welcome {
  margin: 14px 18px 5px;
  padding: 14px 16px;
  border: 1px solid #d8e9fb;
  border-radius: 16px;
  background: #f4f9ff;
}
.psgc-welcome p { margin: 4px 0 0; }
.psgc-welcome small { display: none; margin-top: 9px; color: #5b6677; line-height: 1.45; }
.psgc-welcome.is-expanded small { display: block; }
.psgc-block-manager { display: none; margin-top: 10px; padding: 0; border: 0; background: transparent; color: var(--psgc-blue); font-weight: 700; }
.psgc-welcome.is-expanded .psgc-block-manager { display: block; }
.psgc-block-list { display: grid; gap: 6px; margin-top: 9px; }
.psgc-block-list > span { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; background: #fff; }
.psgc-block-list img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.psgc-block-list button { border: 0; background: transparent; color: var(--psgc-blue); font-weight: 700; }
.psgc-block-empty { color: var(--psgc-muted); font-size: .8rem; }

.psgc-status { display: none; margin: 8px 18px 0; padding: 11px 14px; border-radius: 12px; background: #fff4dc; color: #6b4911; font-size: .9rem; }
.psgc-status.is-visible { display: block; }
.psgc-status.is-support { background: #eef7ff; color: #153e66; line-height: 1.45; }

.psgc-older { justify-self: center; margin: 12px 0 0; border: 0; background: transparent; color: var(--psgc-blue); font-weight: 700; }
.psgc-messages { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px 22px; scroll-behavior: smooth; }
.psgc-day { display: flex; align-items: center; gap: 12px; margin: 15px 0; color: var(--psgc-muted); font-size: .75rem; font-weight: 700; }
.psgc-day::before, .psgc-day::after { content: ''; height: 1px; flex: 1; background: var(--psgc-line); }

.psgc-message {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 11px;
  margin-top: 14px;
  border-radius: 14px;
  transition: background-color .25s ease;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.psgc-message * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.psgc-message:focus-visible { outline: 3px solid rgba(11, 122, 225, .18); outline-offset: 3px; }
.psgc-message.is-grouped { margin-top: 3px; }
.psgc-message.is-highlighted { background: #eaf4ff; }
.psgc-avatar-link { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; line-height: 0; }
.psgc-avatar-link:focus-visible { outline: 3px solid rgba(11, 122, 225, .24); outline-offset: 3px; }
.psgc-avatar { display: block; width: 40px; height: 40px; border-radius: 50% !important; object-fit: cover; background: var(--psgc-soft); }
.psg-presence-avatar--community { width: 40px; height: 40px; border-radius: 50% !important; }
.psg-presence-avatar--community .psg-presence-avatar__dot { top: 1px !important; right: 1px !important; width: 11px !important; height: 11px !important; border-width: 2px !important; }
.psgc-author { grid-column: 2; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.psgc-author strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psgc-message.is-online .psgc-author strong { color: var(--psgc-blue); }
.psgc-author time { color: var(--psgc-muted); font-size: .72rem; }
.psgc-message-body { grid-column: 2; min-width: 0; }
.psgc-message.is-grouped .psgc-message-body { grid-column: 2; }
.psgc-message-body > p { margin: 2px 0; color: #253449; line-height: 1.48; overflow-wrap: anywhere; }
.psgc-message-photo-button { display: inline-flex; max-width: 100%; margin: 4px 0 7px; padding: 0; border: 0; border-radius: 14px; background: transparent; vertical-align: top; cursor: zoom-in; }
.psgc-message-photo-button:focus-visible { outline: 3px solid rgba(11, 122, 225, .24); outline-offset: 3px; }
.psgc-message-photo { display: block; width: auto; max-width: 100%; height: 190px; max-height: 190px; border-radius: 14px; background: var(--psgc-soft); object-fit: contain; }

.psgc-reply-preview { display: grid; width: 100%; margin: 2px 0 5px; padding: 7px 10px; text-align: left; border: 0; border-left: 3px solid var(--psgc-blue); border-radius: 4px 9px 9px 4px; background: var(--psgc-soft); color: var(--psgc-muted); }
.psgc-reply-preview strong { color: #315579; font-size: .75rem; }
.psgc-reply-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }

.psgc-reactions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.psgc-reaction { padding: 3px 8px; border: 1px solid var(--psgc-line); border-radius: 999px; background: #fff; font-size: .76rem; }
.psgc-reaction.is-mine { border-color: #8dc5fa; background: #edf7ff; }

.psgc-reply-bar { display: flex; min-height: 28px; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 10px 2px 52px; border: 0; background: #fff; }
.psgc-reply-bar span { display: grid; min-width: 0; font-size: .78rem; color: var(--psgc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psgc-reply-bar strong { color: #315579; }
.psgc-reply-bar button { width: 40px; height: 40px; padding: 0; border: 0; background: transparent; font-size: 1.35rem; }
.psgc-composer-dock { position: relative; z-index: 5; display: grid; grid-template-rows: auto 18px auto; border: 0; background: #fff; }
.psgc-typing { display: flex; align-items: center; min-width: 0; height: 18px; padding: 0 10px 0 54px; border: 0; background: #fff; color: var(--psgc-muted); font-size: .7rem; line-height: 1; white-space: nowrap; overflow: hidden; }
.psgc-typing[hidden] { display: flex; visibility: hidden; }
.psgc-typing [data-community-typing-label] { overflow: hidden; text-overflow: ellipsis; }
.psg-shell .psgc-typing-animation { display: block !important; flex: 0 0 26px !important; width: 26px !important; min-width: 26px !important; max-width: 26px !important; height: 10px !important; min-height: 10px !important; max-height: 10px !important; margin: 0 0 0 5px !important; padding: 0 !important; object-fit: contain !important; }
.psgc-typing-fallback { margin-left: 7px; color: #7eb7e6; letter-spacing: 2px; }
.psgc-composer { display: flex; align-items: flex-end; gap: 4px; padding: 0 8px max(4px, env(safe-area-inset-bottom, 0px)); border: 0; background: #fff; }
.psgc-compose-plus { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #6f7782; font: 400 2.4rem/40px system-ui, sans-serif; }
.psgc-compose-plus:active { background: var(--psgc-soft); transform: scale(.95); }
.psgc-compose-plus.is-uploading { color: var(--psgc-blue); animation: psgc-upload-pulse 1s ease-in-out infinite; }
@keyframes psgc-upload-pulse { 50% { opacity: .42; } }
.psgc-compose-pill { display: flex; flex: 1; align-items: flex-end; min-width: 0; min-height: 44px; padding: 1px 2px 1px 14px; border: 1px solid #d8e0ea; border-radius: 23px; background: #fff; }
.psg-shell .psgc-composer textarea,
.psg-shell .psgc-composer textarea:hover,
.psg-shell .psgc-composer textarea:focus,
.psg-shell .psgc-composer textarea:focus-visible { flex: 1; min-width: 0; min-height: 40px; max-height: 120px; resize: none; margin: 0 !important; padding: 9px 4px 7px 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--psgc-ink); font: inherit; line-height: 1.35; }
.psgc-compose-pill:focus-within { border-color: var(--psgc-blue); box-shadow: 0 0 0 3px rgba(11, 122, 225, .14); }
.psgc-send { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--psgc-blue); color: #fff; font: 800 1.35rem/1 system-ui, sans-serif; }
.psgc-send:active { transform: scale(.94); }

.psgc-mentions { position: absolute; z-index: 30; right: 18px; bottom: 96px; left: 18px; max-height: 260px; overflow: auto; padding: 7px; border: 1px solid var(--psgc-line); border-radius: 15px; background: #fff; box-shadow: 0 18px 45px rgba(23, 35, 53, .18); }
.psgc-room { position: relative; }
.psgc-mentions button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: #fff; text-align: left; }
.psgc-mentions button:hover { background: var(--psgc-soft); }
.psgc-mentions img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.psgc-empty, .psgc-loading, .psgc-error, .psgc-login { display: grid; place-content: center; gap: 8px; min-height: 420px; padding: 30px; text-align: center; color: var(--psgc-muted, #667085); }
.psgc-empty strong { color: var(--psgc-ink); }
.psgc-empty span { display: block; }
.psgc-error button { justify-self: center; padding: 10px 16px; border: 0; border-radius: 12px; background: #0b7ae1; color: #fff; }
.psgc-toast { position: absolute; z-index: 40; right: 18px; bottom: 88px; left: 18px; padding: 11px 14px; border-radius: 12px; background: #172335; color: #fff; text-align: center; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s ease; }
.psgc-toast.is-visible { opacity: 1; transform: translateY(0); }

.psgc-action-backdrop {
  position: fixed;
  z-index: 99990;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(9, 17, 28, .52);
  backdrop-filter: blur(2px);
}
.psgc-action-backdrop[hidden] { display: none; }
.psgc-action-sheet {
  position: fixed;
  z-index: 99991;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: min(78dvh, 680px);
  overflow-y: auto;
  padding: 10px 16px max(24px, env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: #fff;
  box-shadow: 0 -18px 55px rgba(8, 19, 33, .22);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
}
.psgc-action-sheet.is-open { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.psgc-action-sheet__handle { width: 54px; height: 5px; margin: 2px auto 18px; border-radius: 999px; background: #aeb4bc; }
.psgc-action-reactions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-bottom: 14px; padding: 13px; border-radius: 22px; background: #f5f6f8; }
.psgc-action-reactions button { min-height: 58px; padding: 5px; border: 0; border-radius: 15px; background: transparent; font-size: clamp(1.55rem, 8vw, 2.25rem); transition: transform .14s ease, background .14s ease; }
.psgc-action-reactions button:active { transform: scale(.9); }
.psgc-action-menu { overflow: hidden; border-radius: 22px; background: #f5f6f8; }
.psgc-action-menu button { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 10px 18px; border: 0; border-bottom: 1px solid #fff; background: transparent; color: var(--psgc-ink); text-align: left; }
.psgc-action-menu button:last-child { border-bottom: 0; }
.psgc-action-menu button span { color: #9299a3; font-size: 1.45rem; text-align: center; }
.psgc-action-menu button strong { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.psgc-actions-open { overflow: hidden !important; }

.psgc-attachment-sheet {
  position: fixed;
  z-index: 99991;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px 16px max(24px, env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: #fff;
  box-shadow: 0 -18px 55px rgba(8, 19, 33, .22);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
}
.psgc-attachment-sheet.is-open { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.psgc-attachment-menu { overflow: hidden; border-radius: 22px; background: #f5f6f8; }
.psgc-attachment-menu button { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 12px 20px; border: 0; border-bottom: 1px solid #fff; background: transparent; color: var(--psgc-ink); text-align: left; }
.psgc-attachment-menu button:last-child { border-bottom: 0; }
.psgc-attachment-menu button > span { color: #9299a3; font-size: 1.7rem; text-align: center; }
.psgc-attachment-menu strong { display: grid; gap: 2px; font-size: 1rem; }
.psgc-attachment-menu small { color: var(--psgc-muted); font-size: .72rem; font-weight: 500; }
.psgc-attachment-menu button[disabled] { opacity: .58; }

.psgc-photo-viewer[aria-hidden="true"] { display: none; }
.psgc-photo-viewer[aria-hidden="false"] { position: fixed; z-index: 1000000; inset: 0; display: grid; place-items: center; padding: clamp(12px, 4vw, 34px); }
.psgc-photo-viewer__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(6, 19, 35, .9); backdrop-filter: blur(14px); }
.psgc-photo-viewer__panel { position: relative; z-index: 1; display: grid; place-items: center; width: min(920px, 100%); max-height: min(90dvh, 840px); overflow: hidden; border-radius: clamp(18px, 4vw, 30px); background: #061323; box-shadow: 0 30px 90px rgba(0, 0, 0, .44); }
.psgc-photo-viewer__panel img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(88dvh, 820px); object-fit: contain; }
.psgc-photo-viewer__close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #172335; font-size: 1.9rem; line-height: 1; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }

.psgc-preview {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: calc(100% - (2 * var(--psg-home-edge, 18px)));
  margin: 0 var(--psg-home-edge, 18px) 24px;
  padding: 13px 15px;
  border: 1px solid #e1e7ee;
  border-radius: 17px;
  background: #f7f8fa;
  color: #172335;
  box-shadow: none;
  text-align: left;
}
.psgc-preview-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #e7f3ff; color: #0b7ae1; font-size: 1.15rem; font-weight: 900; letter-spacing: 1px; }
.psgc-preview-copy { display: grid; min-width: 0; gap: 1px; }
.psgc-preview-copy strong { overflow: hidden; font-size: .98rem; text-overflow: ellipsis; white-space: nowrap; }
.psgc-preview-copy small { overflow: hidden; color: #6c7581; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.psgc-preview-copy .psgc-eyebrow { color: #0b7ae1; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.psgc-preview-arrow { color: #818895; font-size: 1.8rem; line-height: 1; text-align: right; }

html.psg-community-open .psg-bottom-nav,
body.psg-community-open .psg-bottom-nav,
.psg-shell.is-community-open .psg-bottom-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 899px) {
  html.psg-community-open,
  body.psg-community-open { overflow: hidden !important; overscroll-behavior: none; }
  .psg-shell.is-community-open { width: 100% !important; height: var(--psg-visual-viewport-height, 100dvh) !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
  .psg-shell.is-community-open .psg-view.community_container { position: fixed !important; z-index: 110 !important; top: var(--psgc-viewport-top, var(--psg-visual-offset-top, 0px)) !important; right: 0 !important; left: 0 !important; width: 100% !important; height: var(--psgc-viewport-height, var(--psg-visual-viewport-height, 100dvh)) !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #fff !important; }
  .psgc-room { width: 100%; max-width: none; height: 100%; min-height: 0; max-height: none; border-width: 0; border-radius: 0; box-shadow: none; }
  .psgc-header { min-height: calc(54px + env(safe-area-inset-top, 0px)); padding: max(4px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 4px max(8px, env(safe-area-inset-left, 0px)); }
  .psgc-messages { padding-inline: 12px; }
  .psgc-message { grid-template-columns: 34px minmax(0, 1fr); column-gap: 9px; }
  .psgc-avatar-link, .psgc-avatar, .psg-presence-avatar--community { width: 34px; height: 34px; }
  .psgc-typing { padding-left: calc(max(8px, env(safe-area-inset-left, 0px)) + 46px); }
  .psgc-composer { padding-right: max(8px, env(safe-area-inset-right, 0px)); padding-left: max(8px, env(safe-area-inset-left, 0px)); }
  .psg-shell.is-community-composing .psgc-composer { padding-bottom: 4px; }
  .psgc-message-photo { height: 170px; max-height: 170px; }
  .psgc-preview { margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .psgc-message, .psgc-toast, .psgc-messages, .psgc-action-sheet, .psgc-attachment-sheet, .psgc-action-reactions button { scroll-behavior: auto; transition: none; }
  .psgc-compose-plus.is-uploading { animation: none; }
}