/* ===========================================================================
   BP Activity Social — Icon Bar, Drawer, Modals
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Hide default BP Nouveau action buttons & native comment sections
   --------------------------------------------------------------------------- */

/* Hide the entire generic-button set rendered by bp_nouveau_activity_entry_buttons() */
.bp-nouveau .activity-list .generic-button,
.bp-nouveau #activity-stream .generic-button,
.bp-nouveau .activity-item .generic-button,
.bp-nouveau .activity-meta .generic-button,
.bp-nouveau .activity-meta a,
.bp-nouveau .activity-item .activity-meta,
.bp-nouveau #activity-stream .activity-meta {
	display: none !important;
}

/* Hide BP native comment section (replaced by custom drawer) */
.bp-nouveau .activity-item .activity-comments,
.bp-nouveau #activity-stream .activity-comments {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   2. Icon Action Bar (.bpal-actions)
   --------------------------------------------------------------------------- */

.bpal-actions {
	display:     flex;
	align-items: center;
	gap:         18px;
	padding:     8px 0 2px;
	border-top:  1px solid rgba(0, 0, 0, 0.07);
	margin-top:  8px;
}

.bpal-btn {
	background:  none;
	border:      none;
	padding:     4px 0;
	cursor:      pointer;
	display:     inline-flex;
	align-items: center;
	gap:         4px;
	font-size:   1.3rem;
	color:       #555;
	transition:  transform 0.15s ease, color 0.15s ease;
	line-height: 1;
}

.bpal-btn:hover { transform: scale(1.18); color: #111; }
.bpal-btn:disabled { opacity: .5; cursor: default; transform: none !important; }

.bpal-likes-count,
.bpal-comment-count,
.bpal-reposts-count,
.bpal-sends-count {
	font-size:  0.82rem;
	color:      #666;
	min-width:  10px;
}

/* Like pop animation */
.bpal-liked .bpal-like-icon { animation: bpal-like-pop .25s ease; }

@keyframes bpal-like-pop {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.42); }
	100% { transform: scale(1); }
}

/* Repost — green when active */
.bpal-reposted .bpal-repost-icon { color: #16a34a; }

/* Add gift — purple; green when added */
.bpal-add-gift-btn            { font-size: 1.45rem; font-weight: 700; color: #7c3aed; }
.bpal-add-gift-btn.bpal-gift-added { color: #16a34a; }

.bpal-adopts-count {
	font-size: 0.82rem;
	color:     #666;
	min-width: 10px;
}

/* ---------------------------------------------------------------------------
   3. Repost display inside activity feed
   --------------------------------------------------------------------------- */

/* Outer wrapper — margin separates it from the activity header */
.bpal-repost-wrap {
	margin-top: 8px;
}

/* Reposter's description */
.bpal-repost-desc {
	font-size:     0.95rem;
	color:         #1e293b;
	line-height:   1.55;
	margin-left:   1em;
	margin-bottom: 10px;
}

/* Original post frame */
.bpal-repost-frame {
	border:        1px solid #e2e8f0;
	border-radius: 10px;
	padding:       12px 14px;
	margin-left:   1em;
	margin-right:  1em;
	background:    #f8fafc;
	overflow:      hidden;
}

/* Frame header: avatar + name/date */
.bpal-rf-header {
	margin-bottom: 10px;
}

.bpal-rf-author-link {
	display:         flex;
	align-items:     flex-start;
	gap:             8px;
	text-decoration: none;
	color:           inherit;
}

.bpal-rf-avatar {
	border-radius: 50%;
	flex-shrink:   0;
	width:         32px;
	height:        32px;
}

.bpal-rf-author-info {
	display:        flex;
	flex-direction: column;
	gap:            2px;
}

.bpal-rf-name {
	font-weight: 600;
	font-size:   0.875rem;
	color:       #111;
}

.bpal-rf-date {
	font-size: 0.78rem;
	color:     #94a3b8;
}

/* ---------------------------------------------------------------------------
   Gift card — standalone gift shared to activity stream
   --------------------------------------------------------------------------- */
.bpal-gift-card {
	margin-top:    10px;
	border:        1px solid #e2e8f0;
	border-radius: 10px;
	overflow:      hidden;
	background:    #fff;
}

.bpal-gift-card-img {
	display:    block;
	width:      100%;
	max-height: 280px;
	object-fit: cover;
}

.bpal-gift-card-body {
	padding: 10px 14px 12px;
}

.bpal-gift-card-title {
	font-size:   0.95rem;
	font-weight: 600;
	color:       #111827;
	margin-bottom: 4px;
}

.bpal-gift-card-caption {
	font-size:   0.875rem;
	color:       #475569;
	line-height: 1.5;
	margin-bottom: 6px;
}

.bpal-gift-card-buy a {
	display:         inline-block;
	color:           #7c3aed;
	font-size:       0.85rem;
	font-weight:     500;
	text-decoration: none;
	border:          1px solid #c4b5fd;
	padding:         3px 12px;
	border-radius:   6px;
	transition:      background 0.12s;
}
.bpal-gift-card-buy a:hover { background: #ede9fe; }

/* Wrapper that enables absolute-positioned fulfilled badge over gift images */
.bpal-gift-img-wrap {
	position:    relative;
	line-height: 0;
}

/* Fulfilled checkmark badge — top-right corner of gift image */
.bpal-fulfilled-badge {
	position:       absolute;
	top:            6px;
	right:          6px;
	width:          28px;
	height:         28px;
	pointer-events: none;
	filter:         drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.bpal-fulfilled-badge img {
	width:   100%;
	height:  100%;
	display: block;
}

/* Gift image inside repost frame */
.bpal-rf-gift-img {
	display:       block;
	width:         100%;
	max-height:    200px;
	object-fit:    cover;
	border-radius: 8px;
	margin-bottom: 8px;
}

/* Gift title inside repost frame */
.bpal-rf-title {
	font-size:   0.9rem;
	font-weight: 600;
	color:       #111827;
	margin-top:  6px;
	margin-bottom: 2px;
}

/* Text block (post body or gift caption) */
.bpal-rf-text {
	font-size:   0.9rem;
	color:       #334155;
	line-height: 1.5;
	margin-top:  4px;
}

/* Buy Gift link */
.bpal-rf-buy {
	display:    flex;
	align-items: baseline;
	gap:        6px;
	flex-wrap:  wrap;
	margin-top: 8px;
}

.bpal-rf-buy-label {
	font-size:   0.82rem;
	font-weight: 600;
	color:       #374151;
	white-space: nowrap;
}

.bpal-rf-buy-link {
	font-size:       0.82rem;
	color:           #7c3aed;
	text-decoration: none;
	word-break:      break-all;
}

.bpal-rf-buy-link:hover {
	text-decoration: underline;
}

/* Inline "more / less" expand button */
.bpal-expand-btn {
	display:            inline !important;
	appearance:         none !important;
	-webkit-appearance: none !important;
	background:         none !important;
	border:             none !important;
	outline:            none !important;
	box-shadow:         none !important;
	cursor:             pointer !important;
	color:              #9ca3af !important;
	font-size:          0.875rem !important;
	font-weight:        700 !important;
	padding:            0 0 0 3px !important;
	margin:             0 !important;
	text-decoration:    none !important;
	vertical-align:     baseline !important;
	border-radius:      0 !important;
}

.bpal-expand-btn:hover,
.bpal-expand-btn:focus {
	text-decoration: underline !important;
	outline:         none !important;
	box-shadow:      none !important;
	border:          none !important;
}

/* Personal activity feed — rectangular frame, no reposter description */
.bpal-repost-wrap--personal .bpal-repost-frame {
	border-radius: 0;
	border:        2px solid #cbd5e1;
	background:    #f8fafc;
	padding:       14px 16px;
}

.bpal-repost-wrap--personal .bpal-rf-gift-img {
	border-radius: 0;
}
.bpal-repost-wrap--personal .bpal-gift-img-wrap {
	border-radius: 0;
}

/* Repost context injected into comment drawer */
.bpal-cd-repost-context {
	margin-bottom: 4px;
}

.bpal-cd-repost-context .bpal-repost-frame {
	background: #f1f5f9;
}

/* Separator between context and comments list */
.bpal-cd-sep {
	border:     none;
	border-top: 1px solid #e2e8f0;
	margin:     12px 0;
}

/* Comments area (supports optional context above it) */
.bpal-cd-comments-area { /* intentionally empty — just a structural wrapper */ }

/* ---------------------------------------------------------------------------
   4. Comment Drawer
   --------------------------------------------------------------------------- */

.bpal-comment-drawer {
	position: fixed;
	inset:    0;
	z-index:  10000;
}

.bpal-cd-backdrop {
	position:   absolute;
	inset:      0;
	background: rgba(0, 0, 0, 0.45);
}

.bpal-cd-panel {
	position:         absolute;
	bottom:           0;
	left:             0;
	right:            0;
	max-height:       75vh;
	background:       #fff;
	border-radius:    16px 16px 0 0;
	display:          flex;
	flex-direction:   column;
	box-shadow:       0 -6px 30px rgba(0,0,0,0.15);
	transform:        translateY(0);
	transition:       transform 0.28s ease;
}

@media ( min-width: 640px ) {
	.bpal-cd-panel {
		max-width:    520px;
		left:         50%;
		transform:    translateX(-50%);
		border-radius: 16px 16px 0 0;
	}
}

.bpal-cd-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         14px 16px 10px;
	border-bottom:   1px solid #f1f5f9;
	flex-shrink:     0;
}

.bpal-cd-title {
	margin:      0;
	font-size:   1rem;
	font-weight: 600;
}

.bpal-cd-close {
	background:    none;
	border:        none;
	font-size:     1.5rem;
	cursor:        pointer;
	line-height:   1;
	color:         #94a3b8;
	padding:       2px 6px;
	border-radius: 4px;
}

.bpal-cd-close:hover { color: #111; background: #f1f5f9; }

.bpal-cd-scroll {
	flex:       1;
	overflow-y: auto;
	padding:    12px 16px;
}

.bpal-cd-footer {
	flex-shrink:   0;
	padding:       10px 14px;
	border-top:    1px solid #f1f5f9;
}

.bpal-cd-input-row {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.bpal-cd-my-avatar {
	border-radius: 50%;
	flex-shrink:   0;
}

.bpal-cd-input {
	flex:          1;
	border:        1px solid #cbd5e1;
	border-radius: 20px;
	padding:       7px 14px;
	font-size:     0.9rem;
	outline:       none;
}

.bpal-cd-input:focus { border-color: #7c3aed; }

.bpal-cd-submit {
	background:    #7c3aed;
	color:         #fff;
	border:        none;
	border-radius: 20px;
	padding:       7px 16px;
	font-size:     0.875rem;
	font-weight:   600;
	cursor:        pointer;
	white-space:   nowrap;
}

.bpal-cd-submit:disabled { opacity: .5; cursor: default; }
.bpal-cd-submit:hover:not(:disabled) { background: #6d28d9; }

.bpal-cd-emoji-btn {
	background:    transparent;
	border:        none;
	cursor:        pointer;
	font-size:     1.25rem;
	line-height:   1;
	padding:       0;
	width:         28px;
	height:        28px;
	flex-shrink:   0;
	border-radius: 4px;
	transition:    background .15s;
}

.bpal-cd-emoji-btn:hover,
.bpal-cd-emoji-btn[aria-expanded="true"] {
	background: #f0f0f0;
}

.bpal-cd-emoji-picker {
	position:       fixed;
	z-index:        99999;
	width:          300px;
	max-height:     280px;
	background:     #fff;
	border:         1px solid #ddd;
	border-radius:  10px;
	box-shadow:     0 6px 24px rgba(0,0,0,.14);
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
}

/* Comment items */
.bpal-cd-comment,
.bpal-cd-reply {
	display:   flex;
	gap:       10px;
	margin-bottom: 14px;
	position:  relative;
}

.bpal-cd-avatar {
	border-radius: 50%;
	flex-shrink:   0;
	align-self:    flex-start;
}

.bpal-cd-body { flex: 1; min-width: 0; }

.bpal-cd-author {
	font-weight:     600;
	font-size:       0.875rem;
	color:           #111;
	text-decoration: none;
	display:         block;
	margin-bottom:   2px;
}

.bpal-cd-text {
	margin:    0 0 4px;
	font-size: 0.9rem;
	color:     #334155;
	word-break: break-word;
}

.bpal-cd-meta {
	display:     flex;
	align-items: center;
	gap:         10px;
}

.bpal-cd-time {
	font-size: 0.75rem;
	color:     #94a3b8;
}

/* Comment like button */
.bpal-comment-like-btn {
	background:  none;
	border:      none;
	cursor:      pointer;
	display:     inline-flex;
	align-items: center;
	gap:         3px;
	font-size:   0.95rem;
	padding:     0;
}

.bpal-cl-count {
	font-size: 0.78rem;
	color:     #94a3b8;
}

/* Replies */
.bpal-cd-replies { margin-top: 6px; }

.bpal-toggle-replies {
	background:  none;
	border:      none;
	cursor:      pointer;
	font-size:   0.78rem;
	color:       #7c3aed;
	padding:     0;
	margin-bottom: 6px;
}

.bpal-replies-list { padding-left: 0; }

/* Inline reply form */
.bpal-reply-form {
	display:    flex;
	gap:        6px;
	margin-top: 6px;
}

.bpal-reply-input {
	flex:          1;
	border:        1px solid #cbd5e1;
	border-radius: 14px;
	padding:       5px 12px;
	font-size:     0.85rem;
	outline:       none;
}

.bpal-reply-input:focus { border-color: #7c3aed; }

.bpal-reply-submit {
	background:    #7c3aed;
	color:         #fff;
	border:        none;
	border-radius: 14px;
	padding:       5px 12px;
	font-size:     0.85rem;
	cursor:        pointer;
}

.bpal-reply-btn {
	background:  none;
	border:      none;
	cursor:      pointer;
	font-size:   0.75rem;
	color:       #94a3b8;
	padding:     2px 0 0;
	align-self:  flex-end;
}

.bpal-reply-btn:hover { color: #7c3aed; }

/* Drawer empty / loading */
.bpal-cd-empty {
	text-align: center;
	color:      #94a3b8;
	font-size:  0.9rem;
	margin:     24px 0;
}

.bpal-cd-loading {
	display:         flex;
	justify-content: center;
	padding:         24px;
}

/* Spinner (shared) */
.bpal-spinner {
	display:      inline-block;
	width:        22px;
	height:       22px;
	border:       3px solid #e2e8f0;
	border-top-color: #7c3aed;
	border-radius: 50%;
	animation:    bpal-spin .7s linear infinite;
}

@keyframes bpal-spin {
	to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   5. Shared Modal Styles (Repost + Send)
   --------------------------------------------------------------------------- */

.bpal-modal-wrap {
	position:        fixed;
	inset:           0;
	z-index:         10001;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.bpal-modal-backdrop {
	position:   absolute;
	inset:      0;
	background: rgba(0, 0, 0, 0.52);
}

.bpal-modal-panel {
	position:       relative;
	background:     #fff;
	border-radius:  14px;
	width:          min(460px, 94vw);
	max-height:     88vh;
	display:        flex;
	flex-direction: column;
	overflow:       hidden;
	box-shadow:     0 20px 50px rgba(0,0,0,0.22);
}

.bpal-modal-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         16px 20px;
	border-bottom:   1px solid #f1f5f9;
	flex-shrink:     0;
}

.bpal-modal-header h3 {
	margin:      0;
	font-size:   1rem;
	font-weight: 600;
}

.bpal-modal-close {
	background:    none;
	border:        none;
	font-size:     1.4rem;
	cursor:        pointer;
	color:         #94a3b8;
	padding:       2px 6px;
	border-radius: 4px;
	line-height:   1;
}

.bpal-modal-close:hover { color: #111; background: #f1f5f9; }

.bpal-modal-body {
	padding:    16px 20px;
	flex:       1;
	overflow-y: auto;
}

.bpal-modal-footer {
	padding:         12px 20px;
	border-top:      1px solid #f1f5f9;
	display:         flex;
	justify-content: flex-end;
	flex-shrink:     0;
}

.bpal-btn-primary {
	background:    #7c3aed;
	color:         #fff;
	border:        none;
	border-radius: 8px;
	padding:       9px 22px;
	font-size:     0.95rem;
	font-weight:   600;
	cursor:        pointer;
}

.bpal-btn-primary:hover:not(:disabled) { background: #6d28d9; }
.bpal-btn-primary:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------------------
   6. Repost Modal
   --------------------------------------------------------------------------- */

.bpal-rp-desc-wrap,
.bpal-edit-desc-wrap {
	position: relative;
}

.bpal-repost-textarea {
	width:         100%;
	border:        1px solid #cbd5e1;
	border-radius: 8px;
	padding:       10px 36px 10px 12px;
	font-size:     0.95rem;
	resize:        vertical;
	min-height:    80px;
	box-sizing:    border-box;
	outline:       none;
}

.bpal-repost-textarea:focus { border-color: #7c3aed; }

.bpal-rp-emoji-btn,
.bpal-edit-emoji-btn {
	position:    absolute;
	bottom:      8px;
	right:       8px;
	width:       28px;
	height:      28px;
	padding:     0;
	border:      none !important;
	background:  transparent !important;
	box-shadow:  none !important;
	cursor:      pointer;
	font-size:   1.25rem;
	line-height: 1;
	border-radius: 4px;
	transition:  background .15s;
}

.bpal-rp-emoji-btn:hover,
.bpal-rp-emoji-btn[aria-expanded="true"],
.bpal-edit-emoji-btn:hover,
.bpal-edit-emoji-btn[aria-expanded="true"] {
	background: #f0f0f0 !important;
}

.bpal-rp-emoji-picker,
.bpal-edit-emoji-picker {
	position:   fixed;
	z-index:    99999;
	width:      300px;
	max-height: 280px;
	background: #fff;
	border:     1px solid #ddd;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(0,0,0,.14);
	overflow:   hidden;
	display:    flex;
	flex-direction: column;
}

.bpal-char-info {
	font-size:  0.78rem;
	color:      #94a3b8;
	text-align: right;
	margin-top: 4px;
}

/* Remove any border, outline and box-shadow on emoji picker buttons and category tabs */
.bpal-ep-emoji,
.mgb-ep-emoji,
.mgb-ep-tab {
	border:     none !important;
	outline:    none !important;
	box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   7. Send Modal — User list
   --------------------------------------------------------------------------- */

.bpal-send-search {
	display:       block;
	width:         100%;
	border:        1px solid #cbd5e1;
	border-radius: 8px;
	padding:       8px 12px;
	font-size:     0.95rem;
	margin-bottom: 12px;
	box-sizing:    border-box;
	outline:       none;
}

.bpal-send-search:focus { border-color: #7c3aed; }

.bpal-send-users {
	max-height: 300px;
	overflow-y: auto;
}

.bpal-user-list {
	list-style: none;
	margin:     0;
	padding:    0;
}

.bpal-user-item {
	display:     flex;
	align-items: center;
	gap:         10px;
	padding:     8px 10px;
	border-radius: 8px;
	cursor:      pointer;
	transition:  background 0.12s;
}

.bpal-user-item:hover          { background: #f8fafc; }
.bpal-user-item.bpal-user-selected { background: #ede9fe; }

.bpal-user-avatar {
	border-radius: 50%;
	flex-shrink:   0;
}

.bpal-user-name {
	flex:      1;
	font-size: 0.95rem;
	color:     #111;
}

.bpal-user-check {
	width:         20px;
	height:        20px;
	border:        2px solid #cbd5e1;
	border-radius: 50%;
	flex-shrink:   0;
	display:       flex;
	align-items:   center;
	justify-content: center;
	font-size:     0.72rem;
	color:         transparent;
}

.bpal-user-selected .bpal-user-check {
	background:   #7c3aed;
	border-color: #7c3aed;
	color:        #fff;
}

.bpal-user-selected .bpal-user-check::after { content: '✓'; }

.bpal-no-users {
	color:      #94a3b8;
	font-size:  0.9rem;
	text-align: center;
	padding:    20px 0;
	margin:     0;
}

.bpal-send-loading {
	display:         flex;
	justify-content: center;
	padding:         20px;
}

/* ---------------------------------------------------------------------------
   8. Toast notifications
   --------------------------------------------------------------------------- */

.bpal-toast {
	position:   fixed;
	bottom:     24px;
	left:       50%;
	transform:  translateX(-50%) translateY(16px);
	background: #1e293b;
	color:      #fff;
	padding:    10px 20px;
	border-radius: 8px;
	font-size:  0.875rem;
	opacity:    0;
	transition: opacity .22s, transform .22s;
	z-index:    20000;
	white-space: nowrap;
	pointer-events: none;
}

.bpal-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

.bpal-toast-error   { background: #dc2626; }
.bpal-toast-success { background: #16a34a; }

/* ---------------------------------------------------------------------------
   9. Three-dot Post Menu (.bpal-post-menu-wrap)
   --------------------------------------------------------------------------- */

/* activity-item-head must be flex so the menu floats right */
.activity-item-head {
	display:     flex !important;
	align-items: flex-start !important;
	position:    relative;
}

.bpal-post-menu-wrap {
	position:    relative;
	margin-left: auto;
	flex-shrink: 0;
	align-self:  center;
}

.bpal-post-menu-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	background:      var(--color-theme-white-box, #fff);
	border:          1px solid var(--global-border-color, #ddd);
	border-radius:   var(--global-border-radius, 4px);
	cursor:          pointer;
	font-size:       1.25rem;
	color:           #555;
	line-height:     1;
	transition:      border-color .2s, background .2s, color .2s;
}

.bpal-post-menu-btn:hover,
.bpal-post-menu-btn[aria-expanded="true"] {
	border-color: #4169e1;
	background:   #f0f4ff;
	color:        #4169e1;
}

/* Dropdown */
.bpal-post-menu {
	position:   absolute;
	top:        calc(100% + 4px);
	right:      0;
	z-index:    99999;
	min-width:  170px;
	background: #fff;
	border:     1px solid var(--global-border-color, #ddd);
	border-radius: var(--global-border-radius, 4px);
	box-shadow: 0 4px 12px rgba(0,0,0,.12);
	list-style: none;
	margin:     0;
	padding:    4px 0;
}

.bpal-post-menu[hidden]  { display: none; }
.bpal-modal-wrap[hidden] { display: none; }

.bpal-post-menu > li {
	display: block;
	margin:  0;
	padding: 0;
}

.bpal-post-menu-item {
	display:     block   !important;
	width:       100%    !important;
	box-sizing:  border-box;
	padding:     7px 16px;
	background:  transparent !important;
	border:      none    !important;
	border-radius: 0     !important;
	box-shadow:  none    !important;
	text-align:  left;
	font-size:   0.9rem  !important;
	font-weight: 400     !important;
	color:       #444    !important;
	cursor:      pointer;
	line-height: 1.5;
	white-space: nowrap;
	transition:  background .12s, color .12s !important;
}

.bpal-post-menu-item:hover,
.bpal-post-menu-item:focus {
	background: #f0f4ff !important;
	color:      #4169e1 !important;
	outline:    none;
}

.bpal-post-menu-item--danger { color: #dc2626 !important; }
.bpal-post-menu-item--danger:hover,
.bpal-post-menu-item--danger:focus {
	background: #fff5f5 !important;
	color:      #dc2626 !important;
}

/* "Edited" badge next to activity action */
.bpal-edited-badge {
	display:       inline-block;
	font-size:     0.72rem;
	font-weight:   500;
	color:         #94a3b8;
	border:        1px solid #e2e8f0;
	border-radius: 4px;
	padding:       1px 6px;
	margin-left:   6px;
	vertical-align: middle;
	line-height:   1.4;
}

/* ---------------------------------------------------------------------------
   10. Post-form "Attach to post" toolbar
   --------------------------------------------------------------------------- */

/* Hide BP's built-in post-form icon buttons — replaced by our toolbar */
.activity-update-form #whats-new-actions {
	display: none !important;
}

/* Submit row: spans from textarea's left edge (set via JS margin-left) to right edge.
   flex-direction: row overrides BuddyX's row-reverse so DOM order is respected. */
#whats-new-submit {
	display:        flex !important;
	align-items:    center !important;
	flex-direction: row !important;
	flex:           1 !important;
	flex-wrap:      nowrap;
	gap:            8px;
}

/* Toolbar on the left; margin-right: auto pushes Cancel + Post Update to the right */
.bpal-attach-toolbar {
	display:      flex;
	align-items:  center;
	gap:          6px;
	flex-shrink:  0;
	position:     relative;
	margin-right: auto;
}

/* Reorder buttons: Cancel first (order 1), Post Update second (order 2).
   Toolbar has default order 0 so it stays leftmost. */
#whats-new-submit #aw-whats-new-reset  { order: 1; flex-shrink: 0; }
#whats-new-submit #aw-whats-new-submit { order: 2; flex-shrink: 0; }

.bpal-attach-label {
	font-size:   0.95rem;
	font-weight: 500;
	color:       #64748b;
	white-space: nowrap;
}

.bpal-attach-icons {
	display:     flex;
	align-items: center;
	gap:         2px;
}

.bpal-attach-icon-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           34px;
	height:          34px;
	background:      transparent;
	border:          none;
	border-radius:   6px;
	cursor:          pointer;
	color:           #64748b;
	padding:         0;
	transition:      background 0.12s, color 0.12s;
	position:        relative;
}

.bpal-attach-icon-btn:hover,
.bpal-attach-icon-btn[aria-expanded="true"] {
	background: #f1f5f9;
	color:      #7c3aed;
}

/* Tooltip via title attribute — browser default is fine; the title attr is set */

/* Post-form emoji picker (fixed, same as repost picker) */
.bpal-pf-emoji-picker {
	position:   fixed;
	z-index:    99999;
	width:      300px;
	max-height: 280px;
	background: #fff;
	border:     1px solid #ddd;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(0,0,0,.14);
	overflow:   hidden;
	display:    flex;
	flex-direction: column;
}

/* ---------------------------------------------------------------------------
   11. Post-form attachment preview area
   --------------------------------------------------------------------------- */

.bpal-attach-preview {
	border-top: 1px solid #f1f5f9;
	padding:    10px 0 6px;
}

/* Photo preview */
.bpal-preview-photo {
	position:    relative;
	display:     inline-block;
	line-height: 0;
	border-radius: 8px;
	overflow:    hidden;
	max-width:   100%;
}

.bpal-preview-img {
	max-width:  260px;
	max-height: 180px;
	width:      auto;
	height:     auto;
	object-fit: cover;
	border-radius: 8px;
	display:    block;
}

/* Gift preview in post form */
.bpal-preview-gift {
	display:      flex;
	align-items:  center;
	gap:          10px;
	padding:      8px 12px;
	background:   #f8fafc;
	border:       1px solid #e2e8f0;
	border-radius: 8px;
	position:     relative;
	max-width:    340px;
}

.bpal-pg-img-wrap {
	position:    relative;
	flex-shrink: 0;
	line-height: 0;
}

.bpal-pg-img {
	width:         64px;
	height:        64px;
	object-fit:    cover;
	border-radius: 6px;
}

.bpal-pg-fulfilled {
	position:   absolute;
	top:        2px;
	right:      2px;
	background: #7c3aed;
	color:      #fff;
	font-size:  0.6rem;
	font-weight: 700;
	width:      16px;
	height:     16px;
	border-radius: 50%;
	display:    flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.bpal-pg-title {
	font-size:   0.875rem;
	font-weight: 500;
	color:       #111827;
	flex:        1;
	min-width:   0;
	overflow:    hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Uploading state in preview */
.bpal-ap-uploading {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   0.85rem;
	color:       #64748b;
	padding:     6px 0;
}

/* Remove (×) button on photo/gift previews */
.bpal-preview-remove {
	position:      absolute;
	top:           4px;
	right:         4px;
	width:         22px;
	height:        22px;
	border-radius: 50%;
	background:    rgba(0,0,0,0.55);
	color:         #fff;
	border:        none;
	cursor:        pointer;
	font-size:     0.95rem;
	line-height:   1;
	display:       flex;
	align-items:   center;
	justify-content: center;
	padding:       0;
	transition:    background 0.12s;
}

.bpal-preview-remove:hover { background: rgba(0,0,0,0.8); }

/* ---------------------------------------------------------------------------
   12. Wider modal panel for the gift picker
   --------------------------------------------------------------------------- */

.bpal-modal-panel--wide {
	width: min(580px, 96vw);
}

/* Gift picker tabs */
.bpal-gp-body {
	display:        flex;
	flex-direction: column;
	gap:            0;
	padding:        0 !important;
}

.bpal-gp-tabs {
	display:         flex;
	justify-content: flex-start;
	gap:             0;
	border-bottom:   1px solid #e2e8f0;
	padding:         0;
	flex-shrink:     0;
	overflow-x:      auto;
}

.bpal-gp-tab {
	background:    none;
	border:        none;
	border-bottom: 2px solid transparent;
	padding:       10px 14px;
	font-size:     0.875rem;
	font-weight:   500;
	color:         #64748b;
	cursor:        pointer;
	white-space:   nowrap;
	transition:    color 0.12s, border-color 0.12s;
	flex-shrink:   0;
	margin-bottom: -1px;
}

.bpal-gp-tab:first-child {
	padding-left: 16px;
}

.bpal-gp-tab:hover { color: #7c3aed; }

.bpal-gp-tab--active {
	color:        #7c3aed;
	border-bottom-color: #7c3aed;
}

/* Gift grid */
.bpal-gp-grid {
	flex:       1;
	overflow-y: auto;
	padding:    14px 16px;
	min-height: 220px;
	max-height: 50vh;
}

.bpal-gp-items {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap:                   10px;
}

.bpal-gp-item {
	border:        2px solid #e2e8f0;
	border-radius: 8px;
	overflow:      hidden;
	cursor:        pointer;
	transition:    border-color 0.15s, box-shadow 0.15s;
	background:    #fff;
}

.bpal-gp-item:hover {
	border-color: #a78bfa;
}

.bpal-gp-item--selected {
	border-color: #7c3aed;
	box-shadow:   0 0 0 2px #ede9fe;
}

.bpal-gp-item-img-wrap {
	position:    relative;
	line-height: 0;
}

.bpal-gp-item-img {
	width:      100%;
	height:     80px;
	object-fit: cover;
	display:    block;
}

.bpal-gp-fulfilled-badge {
	position:      absolute;
	top:           4px;
	right:         4px;
	background:    #7c3aed;
	color:         #fff;
	font-size:     0.65rem;
	font-weight:   700;
	width:         18px;
	height:        18px;
	border-radius: 50%;
	display:       flex;
	align-items:   center;
	justify-content: center;
	line-height:   1;
}

.bpal-gp-item-no-img {
	height:          80px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       2rem;
	background:      #f8fafc;
}

.bpal-gp-item-title {
	font-size:     0.75rem;
	font-weight:   500;
	color:         #374151;
	padding:       5px 6px;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
	line-height:   1.3;
}

/* ---------------------------------------------------------------------------
   13. Activity photo in the feed
   --------------------------------------------------------------------------- */

.bpal-activity-photo {
	margin-top:    10px;
	border-radius: 10px;
	overflow:      hidden;
	line-height:   0;
}

.bpal-activity-photo-img {
	display:    block;
	width:      100%;
	max-height: 400px;
	object-fit: cover;
	border-radius: 10px;
}