/* -----------------------------------------------------------------------------
   Group / member document theatre (lightbox) — BON-181 / Batch D
   Mobile: inset bordered card (Maia huddle). Desktop: kebab/close header row.
   Rules apply only while body.document-modal-open (BuddyBoss .show()).
   ----------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
	/*
	 * Never force display on the wrapper when closed. display:flex !important
	 * overrides inline display:none and leaves an empty full-screen sheet.
	 */
	body:not(.document-modal-open) .bb-media-model-wrapper.bb-internal-model.document.document-theatre {
		display: none !important;
	}

	body.document-modal-open {
		overflow: hidden;
	}

	body.document-modal-open .bb-media-model-wrapper.bb-internal-model.document.document-theatre {
		--bond-doc-theatre-inset: clamp(16px, 5vw, 24px);

		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: var(--bond-doc-theatre-inset);
		padding-top: max(var(--bond-doc-theatre-inset), env(safe-area-inset-top, 0));
		padding-right: max(var(--bond-doc-theatre-inset), env(safe-area-inset-right, 0));
		padding-bottom: max(var(--bond-doc-theatre-inset), env(safe-area-inset-bottom, 0));
		padding-left: max(var(--bond-doc-theatre-inset), env(safe-area-inset-left, 0));
		box-sizing: border-box;
		background-color: rgba(55, 50, 45, 0.72) !important;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-model-container.bb-document-theater,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-document-theater {
		display: flex;
		flex-direction: column;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		max-height: calc(
			100dvh - (2 * var(--bond-doc-theatre-inset)) - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)
		) !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		overflow: visible;
		box-sizing: border-box;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-model-inner {
		display: flex !important;
		flex-direction: column;
		flex: 1 1 auto;
		position: relative;
		width: 100%;
		height: auto !important;
		max-height: calc(
			100dvh - (2 * var(--bond-doc-theatre-inset)) - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)
		) !important;
		min-height: 0 !important;
		border: 1px solid var(--color-border, #d8d8d8);
		border-radius: 4px;
		background: #fff;
		box-shadow: 0 8px 28px rgba(55, 50, 45, 0.18);
		overflow: hidden;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-close-document-theatre {
		position: absolute;
		top: 10px;
		right: 10px;
		left: auto;
		z-index: 12;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin: 0;
		border-radius: 50%;
		color: var(--color-text-main, #37322e);
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 1px 4px rgba(55, 50, 45, 0.15);
		box-sizing: border-box;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-close-document-theatre svg {
		display: block;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section {
		position: relative;
		display: flex;
		flex: 0 1 auto;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: min(36vh, 280px);
		max-height: min(46vh, 360px);
		margin: 0;
		padding: 40px 16px 12px;
		border-radius: 4px 4px 0 0;
		border-bottom: 1px solid var(--color-border, #d8d8d8);
		background-color: var(--color-bond-grey-light, #f4f4f2);
		box-sizing: border-box;
		overflow: hidden;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section .document-preview {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		min-height: 0;
		max-height: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section .document-preview h3 {
		position: absolute;
		top: 10px;
		left: 16px;
		right: 56px;
		z-index: 2;
		margin: 0;
		padding: 0;
		overflow: hidden;
		color: var(--color-text-main, #37322e);
		font-family: "DINNextRoundedLTProRegular", arial, sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.3;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section .img-section {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: 100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section .img-section .img-block-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: auto;
		max-height: 100%;
		padding: 0;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section .img-section .img-block-wrap img,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section .document-preview iframe,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section .document-preview video {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: min(34vh, 300px);
		margin: 0 auto;
		object-fit: contain;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section.bb-video-preview .document-preview,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section.bb-video-preview .document-preview .video-js {
		min-height: 0 !important;
		max-height: 100% !important;
		width: 100%;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section .CodeMirror {
		width: 100% !important;
		height: auto !important;
		min-height: 200px;
		max-height: min(36vh, 300px);
		border: 1px solid var(--color-border, #d8d8d8);
		border-radius: 4px;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section.bb-media-no-preview .img-section > p {
		padding: 12px 16px;
		font-size: 15px;
		line-height: 1.4;
		text-align: center;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section .theater-command {
		position: absolute;
		top: 50%;
		left: auto !important;
		right: auto !important;
		z-index: 3;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 48px;
		margin: 0;
		padding: 0 !important;
		border-radius: 4px;
		background: rgba(55, 50, 45, 0.55);
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateY(-50%);
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section .theater-command.bb-prev-document {
		left: 8px !important;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section .theater-command.bb-next-document {
		right: 8px !important;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		width: 100% !important;
		min-width: 0 !important;
		min-height: 0;
		max-height: none !important;
		margin: 0 !important;
		padding: 0;
		border-radius: 0 0 4px 4px;
		background: #fff;
		overflow: hidden;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-list.bp-list {
		flex: 1 1 auto;
		width: 100%;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-list.bp-list .activity-item,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document li.activity_update {
		position: relative;
		min-height: 0 !important;
		max-height: none !important;
		padding: 12px 16px 16px;
		overflow: visible;
	}

	/*
	 * BON-181 mobile: meta panel below preview. BuddyBoss mini fallback (messages / orphan
	 * docs) uses .bp-activity-head; feed entries use Bond cards or standard headers.
	 */
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document {
		position: relative;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-list.bp-list {
		display: block !important;
		float: none !important;
		position: static !important;
		width: 100% !important;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-header {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 44px 0 0 !important;
		word-break: normal;
		overflow-wrap: anywhere;
		text-align: left;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-header a:not(.activity-time-since):not(.view) {
		color: var(--color-link, #d50032);
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-header .activity-time-since,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-header .activity-time-since a,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-header .time-since,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .bond-activity-card__time,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .bond-activity-card__time a {
		color: #797667 !important;
		text-decoration: none !important;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-item.mini .bp-activity-head {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin: 0;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-item.mini .activity-avatar {
		flex: 0 0 auto;
		margin: 0;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-item.mini .activity-avatar .avatar {
		display: block;
		width: 36px;
		height: 36px;
		max-width: 36px;
		margin: 0;
		border-radius: 50%;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-item.mini .activity-header {
		flex: 1 1 auto;
		min-width: 0;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-item.mini .activity-header > p {
		margin: 0;
		font-size: 15px;
		line-height: 1.4;
		color: var(--color-text-main, #37322e);
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-item.mini .activity-header a.view.activity-time-since,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-item.mini .activity-header .activity-time-since:empty {
		display: none !important;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-item.mini .activity-header .activity-date {
		margin: 4px 0 0;
		font-size: 14px;
		line-height: 1.3;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-item.mini .activity-header .activity-date a {
		color: #797667 !important;
		text-decoration: none !important;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .bb-activity-more-options-wrap {
		position: absolute !important;
		top: 10px !important;
		right: 10px !important;
		left: auto !important;
		z-index: 5 !important;
		margin: 0 !important;
		float: none !important;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .bb-activity-more-options-wrap .bb-activity-more-options-action {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		margin: 0;
		padding: 0;
		border-radius: 4px;
		color: #797667 !important;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .bb-pin-action {
		display: none !important;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .bond-activity-card {
		margin: 0;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .bond-activity-card__main {
		align-items: flex-start;
		gap: 10px;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .bond-activity-card__footer {
		margin-top: 8px;
		padding-top: 8px;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-media-description,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-video-description {
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid var(--color-border, #d8d8d8);
		text-align: left;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-media-description .bp-media-activity-description:empty,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-video-description .bp-video-activity-description:empty {
		display: none;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-media-description .bp-add-media-activity-description,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-video-description .bp-add-video-activity-description {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0;
		color: var(--color-link, #d50032);
		text-decoration: none;
		font-size: 15px;
		line-height: 1.4;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-media-description .bp-add-media-activity-description > span.add,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-video-description .bp-add-video-activity-description > span.add {
		text-decoration: none;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .activity-list.bp-list .download-document {
		position: sticky;
		bottom: 0;
		z-index: 2;
		padding: 12px 16px;
		border-top: 1px solid var(--color-border, #d8d8d8);
		background: #fff;
		font-size: 15px;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-header a,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-header .activity-time-since {
		font-family: "DINNextRoundedLTProRegular", arial, sans-serif;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-content .activity-inner {
		font-family: "DINNextRoundedLTProRegular", arial, sans-serif;
		font-size: 16px;
		line-height: 1.5;
		color: var(--color-text-main, #37322e);
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-comments {
		margin-top: 8px;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-meta.action-buttons,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-state {
		margin-left: 0;
		margin-right: 0;
		padding-top: 8px;
		border-top: 1px solid var(--color-border, #d8d8d8);
	}
}

/* -----------------------------------------------------------------------------
   Desktop document theatre — sidebar chrome + kebab/close header row (Batch D)
   ----------------------------------------------------------------------------- */

@media screen and (min-width: 1025px) {
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-model-inner {
		border: 1px solid var(--color-border, #d8d8d8);
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-section {
		background-color: var(--color-bond-grey-light, #f4f4f2);
	}

	/*
	 * Positioning context for the sidebar toolbar. BuddyBoss sets the activity list
	 * to inline-block, which breaks absolute offsets for the kebab vs close row.
	 */
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document {
		position: relative;
		border-left: 1px solid var(--color-border, #d8d8d8);
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-list.bp-list {
		display: block !important;
		width: 100% !important;
		position: static !important;
		float: none !important;
	}

	/* Close — top-right of the card (sidebar column). */
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-close-document-theatre {
		position: absolute !important;
		inset: 14px 14px auto auto !important;
		z-index: 14 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 auto !important;
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 4px;
		box-sizing: border-box !important;
		overflow: hidden;
		color: var(--color-bond-red, #d50032) !important;
		background: transparent !important;
		box-shadow: none !important;
		line-height: 1 !important;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-close-document-theatre svg {
		display: block;
		flex: 0 0 auto;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-close-document-theatre:hover,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-close-document-theatre:focus {
		background: #f5f5f0 !important;
		color: var(--color-text-main, #37322e) !important;
	}

	/* Kebab — immediately left of close; anchor to the sidebar, not the shrunken list. */
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .bb-activity-more-options-wrap {
		position: absolute !important;
		top: 14px !important;
		right: 58px !important;
		left: auto !important;
		float: none !important;
		z-index: 13 !important;
		margin: 0 !important;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .bb-activity-more-options-wrap .bb-activity-more-options-action {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 40px !important;
		height: 40px !important;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 4px;
		color: #797667 !important;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .bb-activity-more-options-wrap .bb-activity-more-options-action:hover,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .bb-activity-more-options-wrap .bb-activity-more-options-action:focus {
		background: #f5f5f0 !important;
		color: #37322d !important;
	}

	/* Pin/mute control can sit left of the kebab on some items. */
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .bb-pin-action {
		position: absolute !important;
		top: 14px !important;
		right: 106px !important;
		left: auto !important;
		float: none !important;
		margin: 0 !important;
		z-index: 13 !important;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-list.bp-list .activity-item,
	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-list.bp-list li.activity_update {
		padding-top: 58px;
	}

	body.document-modal-open .bb-media-model-wrapper.document.document-theatre .bb-media-info-section.document .activity-list.bp-list .activity-header {
		width: 100% !important;
		margin: 0 !important;
		padding-right: 0 !important;
	}
}