/**
 * WH Phoebee — front-end styles (2.2.0, Hive-converged design).
 *
 * Tokens are lifted from the Hive dashboard (kynd-hive.css .khv-wrap) so the
 * tray, the full-page overlay, and the Library read as the same product as the
 * rest of Work Hub: system font stack (no DM Sans), --khe palette values,
 * 12px/6px radii, and the frosted-glass + aurora treatment from the Hive's AI
 * card (owner-approved 2026-07 redesign). Phoebee now OWNS this design
 * language — the Hive's embedded chat (and its khv-ai styles) were removed in
 * The Hive 1.13.0.
 *
 * Docked tray = compact; expanded = full-page takeover (same-page overlay).
 */

.whph-scope {
	/* Hive design tokens (khv-wrap), plus legacy aliases used below. */
	--whph-brand: #439BC0; --whph-brand-dark: #357C9B; --whph-brand-soft: #E8F3F8;
	--whph-bg: #F5F7F9; --whph-card: #FFFFFF; --whph-bd: #E6E9EC; --whph-bd-strong: #D1D5DB;
	--whph-text: #222222; --whph-muted: #555555; --whph-faint: #888888;
	--whph-navy: #1D3040; --whph-blue800: #1D4A60; --whph-blue300: #7EC4D8;
	--whph-blue200: #B3DDE9; --whph-blue100: #D9EFF5; --whph-blue-light: #F4FBFC;
	--whph-teal: #1EC1A1; --whph-purple: #924CD8; --whph-pink: #DE3C7A; --whph-amber: #F5C842;
	--whph-red: #B00020; --whph-success: #1E6E3A; --whph-success-bg: #E8F5EC;
	--whph-radius: 12px; --whph-radius-sm: 6px;
	--whph-shadow: 0 2px 8px rgba(0, 0, 0, .06); --whph-shadow-hover: 0 6px 18px rgba(0, 0, 0, .10);
	--whph-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
	/* Back-compat aliases (older names referenced across components). */
	--whph-primary: var(--whph-brand); --whph-body: var(--whph-muted);
	--whph-meta: #8A9BAB; --whph-border: var(--whph-bd); --whph-alt: var(--whph-bg);
}

/* --- Sparkle launcher in the BuddyBoss top header --- */
#whph-nav-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 8px; margin: 0 2px;
	border-radius: 999px; cursor: pointer; color: #439BC0; line-height: 0;
}
#whph-nav-icon:hover { background: #F4FBFC; }
#whph-nav-icon svg { display: block; width: 24px; height: 24px; }
#whph-nav-icon.is-active { background: #D9EFF5; }

/* --- Tray shell: [rail | main]; docked = compact, expanded = full-page.
       Frosted glass over the page — the Hive khv-ai-card recipe applied to
       the whole panel. --- */
.whph-tray {
	position: fixed; top: 56px; right: 0; z-index: 99991;
	width: 400px; max-width: 100vw; height: calc(100vh - 56px);
	display: flex; flex-direction: row;
	background: rgba(251, 253, 254, .97);
	backdrop-filter: blur(20px) saturate(1.3);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	/* Integrated dock (2.10.0): a single hairline seam + a barely-there shadow,
	   so the tray reads attached to the page instead of floating over it. */
	border-left: 1px solid var(--whph-bd);
	box-shadow: -8px 0 24px -22px rgba(29, 48, 64, .16);
	font-family: var(--whph-font); color: var(--whph-text); overflow: hidden;
	animation: whph-tray-in .18s ease-out;
	transition: width .34s cubic-bezier(.4, .02, .2, 1);
}
@keyframes whph-tray-in { from { transform: translateX(16px); opacity: .4; } to { transform: none; opacity: 1; } }
.whph-tray[hidden] { display: none; }
/* Integrated dock (2.10.0): the floating pop-over caret is removed. */
.whph-tray::before { display: none; }
.whph-tray.is-expanded { width: 100vw; box-shadow: none; border-left: 0; background: rgba(251, 253, 254, .92); }
.whph-tray.is-expanded::before { display: none; }
@media (max-width: 480px) { .whph-tray { width: 100vw; } .whph-tray::before { display: none; } }

/* --- Aurora glow set (Hive khv-ai-aurora) — behind the composer area --- */
.whph-aurora { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; overflow: hidden; pointer-events: none; z-index: 0; }
.whph-aurora span { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .45; }
.whph-aurora .g1 { width: 250px; height: 250px; background: radial-gradient(circle, var(--whph-brand), transparent 64%); bottom: -110px; left: -50px; animation: whph-aur1 13s ease-in-out infinite alternate; }
.whph-aurora .g2 { width: 230px; height: 230px; background: radial-gradient(circle, var(--whph-teal), transparent 64%); bottom: -120px; right: -30px; animation: whph-aur2 15s ease-in-out infinite alternate; }
.whph-aurora .g3 { width: 210px; height: 210px; background: radial-gradient(circle, var(--whph-purple), transparent 64%); bottom: -40px; right: 110px; opacity: .3; animation: whph-aur3 17s ease-in-out infinite alternate; }
.whph-aurora .g4 { width: 190px; height: 190px; background: radial-gradient(circle, var(--whph-pink), transparent 64%); bottom: -90px; left: 130px; opacity: .25; animation: whph-aur1 19s ease-in-out infinite alternate; }
@keyframes whph-aur1 { to { transform: translate(40px, 30px) scale(1.15); } }
@keyframes whph-aur2 { to { transform: translate(-40px, -20px) scale(1.12); } }
@keyframes whph-aur3 { to { transform: translate(-30px, 40px) scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .whph-aurora span, .whph-mark::after, .whph-tc-spin { animation: none !important; } }

/* --- Left rail (full-page only) --- */
.whph-rail { display: none; }
.whph-tray.is-expanded .whph-rail {
	display: flex; flex-direction: column; flex: 0 0 240px; width: 240px;
	background: rgba(245, 247, 249, .82); border-right: 1px solid var(--whph-bd);
	padding: 16px 12px; position: relative; z-index: 1;
}
.whph-rail-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--whph-meta); margin: 6px 10px 10px; }
.whph-rail-nav { display: flex; flex-direction: column; gap: 2px; }
.whph-rail-link { display: flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 13.5px; color: var(--whph-muted); padding: 9px 11px; border-radius: 9px; text-align: left; transition: all .15s; }
.whph-rail-link svg { width: 17px; height: 17px; flex: none; }
.whph-rail-link:hover { background: #fff; }
.whph-rail-link.is-active { background: var(--whph-brand); color: #fff; box-shadow: 0 4px 12px rgba(67, 155, 192, .28); }
.whph-ctx { margin: 16px 4px 0; background: #fff; border: 1px solid var(--whph-bd); border-radius: var(--whph-radius); padding: 11px 12px; }
.whph-ctx[hidden] { display: none; }
.whph-ctx-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--whph-meta); margin-bottom: 6px; }
.whph-ctx-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--whph-navy); }
/* 2.5.0: richer context card — sub line + detach control. */
.whph-ctx-sub { margin: 4px 0 0 16px; font-size: 12px; color: var(--whph-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whph-ctx-x { margin-left: auto; flex-shrink: 0; border: 0; background: none; color: var(--whph-meta); font-size: 15px; line-height: 1; padding: 2px 5px; border-radius: 6px; cursor: pointer; }
.whph-ctx-x:hover { color: #E24B4A; background: #fdf1f1; }
.whph-ctx-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--whph-brand); flex: none; }

/* --- Main column --- */
.whph-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.whph-main > .whph-panel-head, .whph-main > .whph-body { position: relative; z-index: 1; }

/* --- Head: pulsing mark + name + badge + segmented switcher + expand + close --- */
.whph-panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--whph-bd); background: #fff; }
.whph-mark { position: relative; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: linear-gradient(135deg, #eaf6fb, #e6f8f3); color: var(--whph-brand-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 4px 14px rgba(67, 155, 192, .22); }
.whph-mark svg { width: 21px; height: 21px; }
.whph-mark::after { content: ""; position: absolute; inset: -4px; border-radius: 15px; border: 1.5px solid rgba(67, 155, 192, .4); opacity: 0; animation: whph-pulse 3.2s ease-out infinite; }
@keyframes whph-pulse { 0% { opacity: .4; transform: scale(.92); } 70% { opacity: 0; transform: scale(1.16); } 100% { opacity: 0; } }
.whph-head-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--whph-navy); }
.whph-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--whph-brand); color: #fff; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

/* Segmented pill switcher (Hive khv-ai-seg). */
.whph-mode-tabs { display: inline-flex; margin-left: auto; background: rgba(247, 250, 251, .9); border: 1px solid var(--whph-bd); border-radius: 999px; padding: 3px; }
.whph-tab { border: 0; background: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 12.5px; color: var(--whph-meta); padding: 6px 13px; border-radius: 999px; line-height: 1; transition: all .15s; }
.whph-tab.is-active { background: var(--whph-brand); color: #fff; }

.whph-panel-head .whph-expand { width: 34px; height: 34px; border: 1px solid var(--whph-bd); background: rgba(255, 255, 255, .9); color: var(--whph-muted); cursor: pointer; padding: 0; line-height: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; transition: all .15s; }
.whph-panel-head .whph-expand:hover { border-color: var(--whph-brand); color: var(--whph-brand-dark); background: #fff; }
.whph-panel-head .whph-close { border: 0; background: none; color: var(--whph-meta); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 4px; border-radius: 8px; }
.whph-panel-head .whph-close:hover { color: var(--whph-red); }

/* Docked (compact) header: five controls share 400px, so everything slims
   down — no badge, smaller mark/title, tighter pills, and the expand/close
   buttons become plain icon buttons instead of bordered squares (v2.2.1). */
.whph-tray:not(.is-expanded) .whph-panel-head { gap: 7px; padding: 12px 10px 12px 14px; }
.whph-tray:not(.is-expanded) .whph-badge { display: none; }
.whph-tray:not(.is-expanded) .whph-head-title { font-size: 15.5px; }
.whph-tray:not(.is-expanded) .whph-mark { width: 32px; height: 32px; border-radius: 10px; }
.whph-tray:not(.is-expanded) .whph-mark svg { width: 18px; height: 18px; }
.whph-tray:not(.is-expanded) .whph-mark::after { border-radius: 13px; }
.whph-tray:not(.is-expanded) .whph-tab { padding: 6px 10px; font-size: 12px; }
.whph-tray:not(.is-expanded) .whph-expand { width: 30px; height: 30px; border: 0; background: none; border-radius: 8px; }
.whph-tray:not(.is-expanded) .whph-expand:hover { background: var(--whph-brand-soft); }

/* --- Body / views --- */
.whph-body { flex: 1; min-height: 0; display: flex; }
.whph-view { flex: 1; min-height: 0; display: none; flex-direction: column; width: 100%; }
.whph-view.is-active { display: flex; }

/* --- Chat — Canvas layout (2.9.0): bubble-less AI turns + three-sparkle avatar.
   Same DOM in the docked tray and the expanded full-page, so one rule set styles
   both. Phoebee's replies sit open on the canvas; your messages are a soft
   right-aligned pill. --- */
.whph-chat-list { display: flex; flex-direction: column; gap: 18px; padding: 20px 16px; overflow-y: auto; flex: 1; }
.whph-tray.is-expanded .whph-chat-list { max-width: 720px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 26px 16px; }

/* Phoebee's turn: avatar + open text, no bubble. */
.whph-msg { display: flex; gap: 11px; align-items: flex-start; max-width: 100%; font-size: 14.5px; color: var(--whph-text); }
.whph-av { flex: none; width: 27px; height: 27px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--whph-brand); background: linear-gradient(135deg, #EAF6FB, #E6F8F3); box-shadow: inset 0 0 0 1px rgba(67, 155, 192, .18), 0 1px 3px rgba(29, 48, 64, .06); }
.whph-av svg { width: 15px; height: 15px; }
.whph-msg-in { flex: 1 1 auto; min-width: 0; }
.whph-msg-name { font-size: 11.5px; font-weight: 800; color: var(--whph-navy); margin-bottom: 4px; letter-spacing: .01em; }
.whph-msg-text { line-height: 1.58; overflow-wrap: break-word; }
.whph-msg-text b, .whph-msg-text strong { color: var(--whph-navy); font-weight: 700; }

/* Your turn: right-aligned soft pill, no avatar or name. */
.whph-msg.is-mine { justify-content: flex-end; }
.whph-msg.is-mine .whph-msg-in { flex: 0 1 auto; max-width: 80%; background: #EAF1F5; border: 1px solid #E0E9EF; color: var(--whph-navy); border-radius: 16px 16px 6px 16px; padding: 10px 15px; box-shadow: 0 1px 2px rgba(29, 48, 64, .04); }

.whph-mention { background: var(--whph-blue100); color: var(--whph-blue800); border-radius: 6px; padding: 1px 5px; font-weight: 700; }
/* Clickable links inside a message (2.10.0). */
.whph-link { color: var(--whph-brand-dark); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; font-weight: 600; }
.whph-link:hover { color: var(--whph-brand); }
.whph-msg.is-mine .whph-link { color: var(--whph-brand-dark); }

/* Greeting: a light, borderless intro — no box. */
.whph-chat-empty { font-size: 14.5px; color: var(--whph-muted); line-height: 1.55; padding: 4px 2px; }

/* Approvals stay a distinct card inside the bot turn. */
.whph-msg.whph-approval .whph-msg-in { background: #fff; border: 1px solid var(--whph-bd); border-radius: 14px; padding: 12px 14px; box-shadow: 0 2px 8px rgba(29, 48, 64, .06); }
.whph-msg.whph-thinking .whph-msg-in { padding-top: 3px; }

/* Composer: sparkle lead + gradient send (Hive khv-ai-inputwrap/send). */
.whph-composer { position: relative; display: flex; align-items: flex-end; gap: 10px; margin: 12px; padding: 7px 7px 7px 16px; background: rgba(255, 255, 255, .85); border: 1.5px solid rgba(126, 196, 216, .55); border-radius: 13px; box-shadow: 0 2px 10px rgba(29, 48, 64, .05); }
.whph-composer:focus-within { border-color: var(--whph-brand); box-shadow: 0 0 0 3px rgba(67, 155, 192, .16); }
.whph-tray.is-expanded .whph-composer { max-width: 760px; width: 100%; margin: 12px auto 16px; box-sizing: border-box; }
.whph-lead { color: var(--whph-brand); display: inline-flex; align-self: center; flex: none; }
.whph-lead svg { width: 20px; height: 20px; }
.whph-input { flex: 1; border: 0; background: transparent; resize: none; outline: none; font-family: inherit; font-size: 15px; color: var(--whph-navy); padding: 9px 4px; min-height: 24px; max-height: 120px; }
.whph-composer .whph-send { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; background: linear-gradient(135deg, #4fb3d6, var(--whph-teal)); box-shadow: 0 3px 12px rgba(79, 179, 214, .4); transition: filter .15s; }
.whph-composer .whph-send:hover { filter: brightness(1.06); }
.whph-composer .whph-send svg { width: 19px; height: 19px; }
.whph-composer .whph-send:disabled { opacity: .5; cursor: default; filter: none; }

/* Base pill send (approvals, run) */
.whph-send { border: 0; border-radius: 8px; background: var(--whph-brand); color: #fff; font-weight: 700; font-size: 13px; padding: 9px 14px; cursor: pointer; font-family: inherit; }
.whph-send:hover { background: var(--whph-brand-dark); }
.whph-send:disabled { opacity: .5; cursor: default; }

/* Neutral chips */
.whph-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--whph-bg); color: var(--whph-muted); border: 1px solid var(--whph-bd); }

/* Thinking dots */
.whph-thinking .whph-dots { display: inline-flex; gap: 4px; align-items: center; height: 12px; }
.whph-thinking .whph-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--whph-blue300); display: inline-block; animation: whph-blink 1.2s infinite ease-in-out both; }
.whph-thinking .whph-dots span:nth-child(2) { animation-delay: .2s; }
.whph-thinking .whph-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes whph-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.whph-empty, .whph-error, .whph-loading { font-size: 13px; color: var(--whph-meta); padding: 12px 4px; }
.whph-error { color: var(--whph-red); }

/* --- Tools picker (search + admin cog + category chips + cards) --- */
.whph-tools-head { padding: 16px 16px 10px; display: flex; flex-direction: column; gap: 10px; }
.whph-tray.is-expanded .whph-tools-head { max-width: 940px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.whph-tools-toprow { display: flex; align-items: center; gap: 8px; }
.whph-search { flex: 1; min-width: 0; box-sizing: border-box; border: 1px solid var(--whph-bd); border-radius: 11px; padding: 11px 15px; font-family: inherit; font-size: 14px; color: var(--whph-navy); background: rgba(255, 255, 255, .9); outline: none; }
.whph-search:focus { border-color: var(--whph-brand); box-shadow: 0 0 0 3px rgba(67, 155, 192, .14); }
/* Admin-only cog → Library. Square icon button, Hive khv-ai-expand recipe. */
.whph-lib-cog { position: relative; width: 42px; height: 42px; flex: none; border: 1px solid var(--whph-bd); border-radius: 11px; background: rgba(255, 255, 255, .9); color: var(--whph-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: all .15s; }
.whph-lib-cog:hover { border-color: var(--whph-brand); color: var(--whph-brand-dark); background: #fff; }
.whph-lib-cog > svg { width: 18px; height: 18px; }
/* Real admin-lock badge (a glyph, not a bare dot — v2.2.1 fix). */
.whph-lib-lock { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--whph-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.whph-lib-lock svg { width: 9px; height: 9px; display: block; }
.whph-cat-row { display: flex; flex-wrap: wrap; gap: 7px; }
.whph-cat { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid var(--whph-bd); background: rgba(255, 255, 255, .85); color: var(--whph-muted); font-family: inherit; font-weight: 600; font-size: 12.5px; border-radius: 999px; padding: 6px 12px; transition: all .15s; }
.whph-cat .whph-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--whph-blue300); }
.whph-cat:hover { border-color: var(--whph-blue200); background: var(--whph-brand-soft); color: var(--whph-brand-dark); }
.whph-cat.is-active { border-color: var(--whph-brand); background: var(--whph-brand); color: #fff; }
.whph-cat.is-active .whph-dot { background: #fff; }

.whph-tool-list { flex: 1; overflow-y: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.whph-tray.is-expanded .whph-tool-list { max-width: 940px; width: 100%; margin: 0 auto; box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 11px; align-content: start; }
.whph-tool-row { display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; border: 1px solid var(--whph-bd); border-radius: 12px; padding: 12px; background: rgba(255, 255, 255, .9); font-family: inherit; width: 100%; transition: border-color .15s, box-shadow .15s, transform .15s; }
.whph-tool-row:hover { border-color: var(--whph-blue200); box-shadow: 0 5px 16px rgba(29, 48, 64, .08); transform: translateY(-1px); }
.whph-tool-ic { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--whph-brand-soft); color: var(--whph-brand-dark); font-size: 0; line-height: 1; flex: none; }
.whph-tool-ic svg { width: 17px; height: 17px; }
.whph-tool-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.whph-tool-name { font-weight: 700; color: var(--whph-navy); font-size: 13px; }
.whph-tool-desc { color: var(--whph-meta); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whph-tool-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.whph-tool-sec { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--whph-meta); margin: 4px 2px -2px; }
.whph-chip-ext { background: #FEF7E6; color: #8A6D1A; border-color: var(--whph-amber); }

/* Category tile colors (canonical palette). */
.whph-bg-brand  { background: var(--whph-brand-soft); color: var(--whph-brand-dark); }
.whph-bg-teal   { background: #e2f7f2; color: #0f8a72; }
.whph-bg-purple { background: #f0e7fb; color: #6f34b0; }
.whph-bg-pink   { background: #fce4ee; color: #b52a63; }
.whph-bg-amber  { background: #fdf3d4; color: #a67c07; }
.whph-cd-brand  { background: var(--whph-brand); }
.whph-cd-teal   { background: var(--whph-teal); }
.whph-cd-purple { background: var(--whph-purple); }
.whph-cd-pink   { background: var(--whph-pink); }
.whph-cd-amber  { background: var(--whph-amber); }

/* --- Run view --- */
.whph-view-run { padding: 16px; overflow-y: auto; }
.whph-tray.is-expanded .whph-view-run { max-width: 760px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.whph-back { border: 0; background: none; color: var(--whph-brand-dark); cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; padding: 0 0 10px; }
.whph-back:hover { color: var(--whph-blue800); }
.whph-run-title { font-weight: 700; color: var(--whph-navy); font-size: 16px; display: flex; align-items: center; gap: 8px; }
.whph-run-desc { color: var(--whph-muted); font-size: 13px; margin: 6px 0 12px; }
.whph-chip-safe { background: #E7F7F2; color: #128069; border-color: var(--whph-teal); }
.whph-chip-review { background: #FEF7E6; color: #8A6D1A; border-color: var(--whph-amber); }
.whph-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.whph-field-label { font-size: 13px; font-weight: 700; color: var(--whph-navy); }
.whph-req { color: var(--whph-red); }
.whph-field-input { width: 100%; box-sizing: border-box; border: 1px solid var(--whph-bd-strong); border-radius: var(--whph-radius-sm); padding: 9px 11px; font-family: inherit; font-size: 14px; color: var(--whph-navy); background: #fff; outline: none; resize: vertical; }
.whph-field-input:focus { border-color: var(--whph-brand); }
.whph-field-input.whph-invalid { border-color: var(--whph-red); }
.whph-run-go { width: 100%; padding: 11px; font-size: 14px; margin-top: 4px; }
.whph-run-result { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }

/* --- Quick-action starter chips (Hive khv-ai-chip) --- */
.whph-quickrow { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 12px 6px; position: relative; z-index: 1; }
.whph-quickrow[hidden] { display: none; }
.whph-tray.is-expanded .whph-quickrow { max-width: 760px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.whph-quick { border: 1px solid var(--whph-bd); background: rgba(255, 255, 255, .85); color: var(--whph-muted); font-family: inherit; font-weight: 600; font-size: 12.5px; padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: all .15s; }
.whph-quick:hover { background: var(--whph-brand-soft); border-color: var(--whph-blue200); color: var(--whph-brand-dark); }
/* 2.6.2 — "More"/"Less" expander chip for the starter row. Dashed + tinted so it
   reads as a control, not another prompt. */
.whph-quick-more { border-style: dashed; color: var(--whph-brand-dark); background: rgba(255, 255, 255, .6); }
.whph-quick-more:hover { border-style: dashed; }

/* --- Active-skill banner (conversational run) --- */
.whph-active { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 7px 8px 7px 11px; background: var(--whph-blue-light); border: 1px solid var(--whph-blue200); border-radius: 10px; position: relative; z-index: 1; }
.whph-active[hidden] { display: none; }
.whph-tray.is-expanded .whph-active { max-width: 760px; width: 100%; margin: 0 auto 8px; box-sizing: border-box; }
.whph-active-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--whph-blue800); flex: 1; }
.whph-active-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--whph-brand); }
.whph-active-x { border: 0; background: none; color: var(--whph-meta); font-family: inherit; font-weight: 700; font-size: 12px; cursor: pointer; padding: 3px 7px; border-radius: 6px; }
.whph-active-x:hover { color: var(--whph-red); background: #fff; }

/* --- History view (Hive khv-ai-hrow) --- */
.whph-view-history { padding: 14px 12px; overflow-y: auto; }
.whph-tray.is-expanded .whph-view-history { max-width: 760px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.whph-history-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 12px; }
.whph-history-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--whph-meta); }
.whph-newchat { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--whph-bd); background: rgba(255, 255, 255, .9); color: var(--whph-brand-dark); font-family: inherit; font-weight: 700; font-size: 12.5px; padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: all .15s; }
.whph-newchat:hover { border-color: var(--whph-brand); background: #fff; }
.whph-history-list { display: flex; flex-direction: column; gap: 8px; }
.whph-history-row { display: flex; align-items: stretch; gap: 6px; }
.whph-history-open { flex: 1; min-width: 0; text-align: left; border: 1px solid var(--whph-bd); border-radius: 11px; background: rgba(255, 255, 255, .9); padding: 11px 13px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 3px; transition: all .15s; }
.whph-history-open:hover { border-color: var(--whph-blue200); box-shadow: 0 4px 14px rgba(29, 48, 64, .07); }
.whph-history-t { font-weight: 700; color: var(--whph-navy); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whph-history-m { font-size: 11.5px; color: var(--whph-meta); }
.whph-history-del { border: 1px solid var(--whph-bd); background: rgba(255, 255, 255, .9); color: var(--whph-meta); border-radius: 10px; width: 38px; cursor: pointer; font-size: 16px; line-height: 1; flex: none; transition: all .15s; }
.whph-history-del:hover { color: var(--whph-red); border-color: #f3c9c9; background: #fdf1f1; }

/* --- In-chat tool run card (Hive khv-ai-run) --- */
.whph-toolcall { align-self: flex-end; display: inline-flex; align-items: center; gap: 10px; max-width: 85%; background: #fff; border: 1px solid var(--whph-bd); border-radius: var(--whph-radius-sm); padding: 8px 10px; box-shadow: 0 1px 2px rgba(29, 48, 64, .05); }
.whph-tc-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.whph-tc-ic svg { width: 16px; height: 16px; }
.whph-tc-body { display: flex; flex-direction: column; min-width: 0; }
.whph-tc-name { font-size: 13px; font-weight: 700; color: var(--whph-navy); }
.whph-tc-desc { font-size: 11px; color: var(--whph-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whph-tc-spin { width: 15px; height: 15px; border: 2px solid var(--whph-blue200); border-top-color: var(--whph-brand); border-radius: 50%; animation: whph-sp .7s linear infinite; flex: none; display: inline-flex; align-items: center; justify-content: center; }
@keyframes whph-sp { to { transform: rotate(360deg); } }
.whph-toolcall.is-done .whph-tc-spin { border: 0; animation: none; color: var(--whph-success); }
.whph-toolcall.is-done .whph-tc-spin::after { content: "\2713"; font-weight: 700; font-size: 15px; }

/* ==========================================================================
   Library manager (admin authoring — full-page overlay only).
   Plain white cards on the Hive's calm patterns: no aurora here on purpose;
   authoring is a focused task, the magic stays on the member surfaces.
   ========================================================================== */
.whph-view-library { overflow-y: auto; }
.whph-lib-root { max-width: 980px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 20px 18px 40px; position: relative; }

.whph-lib-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 12px; }
.whph-lib-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--whph-navy); }
.whph-lib-title b { color: var(--whph-brand); }
.whph-lib-adminpill { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--whph-navy); border-radius: 999px; padding: 3px 10px; }
.whph-lib-tabs { display: flex; gap: 4px; background: var(--whph-brand-soft); border-radius: var(--whph-radius-sm); padding: 4px; margin-left: auto; }
.whph-lib-tab { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--whph-muted); padding: 6px 16px; border-radius: 6px; transition: all .15s; }
.whph-lib-tab.is-active { background: #fff; color: var(--whph-brand-dark); box-shadow: var(--whph-shadow); }
.whph-lib-intro { background: var(--whph-brand-soft); border: 1px solid #d8eaf2; border-radius: var(--whph-radius); padding: 12px 16px; margin-bottom: 16px; font-size: 13px; color: var(--whph-brand-dark); }

.whph-lib-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.whph-lib-search { flex: 1; max-width: 340px; display: flex; align-items: center; gap: 9px; height: 40px; background: #fff; border: 1px solid var(--whph-bd); border-radius: 10px; padding: 0 13px; color: var(--whph-meta); }
.whph-lib-search input { flex: 1; border: 0; background: transparent; outline: none; font-family: inherit; font-size: 13.5px; color: var(--whph-navy); }
.whph-lib-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--whph-brand); color: #fff; border: none; border-radius: var(--whph-radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; padding: 10px 16px; cursor: pointer; margin-left: auto; }
.whph-lib-btn:hover { background: var(--whph-brand-dark); }
.whph-lib-btn:disabled { opacity: .6; cursor: default; }
.whph-lib-ghost { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--whph-muted); border: 1px solid var(--whph-bd-strong); border-radius: var(--whph-radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; cursor: pointer; }
.whph-lib-ghost:hover { background: var(--whph-bg); }
.whph-lib-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.whph-lib-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--whph-bd); background: #fff; color: var(--whph-muted); font-family: inherit; font-weight: 600; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.whph-lib-chip:hover { background: var(--whph-brand-soft); }
.whph-lib-chip.is-active { background: var(--whph-brand); border-color: var(--whph-brand); color: #fff; }
.whph-lib-sq { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }

.whph-lib-scroll { max-height: none; }
.whph-lib-list { display: flex; flex-direction: column; gap: 10px; }
.whph-lib-card { display: flex; gap: 13px; align-items: flex-start; border: 1px solid var(--whph-bd); border-radius: var(--whph-radius); background: #fff; padding: 14px 16px; cursor: pointer; position: relative; box-shadow: var(--whph-shadow); transition: border-color .15s, box-shadow .15s, transform .15s; }
.whph-lib-card:hover { border-color: var(--whph-blue200); box-shadow: var(--whph-shadow-hover); transform: translateY(-1px); }
.whph-lib-card-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--whph-blue-light); color: var(--whph-brand); display: flex; align-items: center; justify-content: center; flex: none; }
.whph-lib-card-bd { flex: 1; min-width: 0; }
.whph-lib-card-r1 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.whph-lib-card-nm { font-size: 14.5px; font-weight: 700; color: var(--whph-navy); }
.whph-lib-card-ds { font-size: 12.5px; color: var(--whph-muted); margin-top: 4px; line-height: 1.5; }
.whph-lib-card-mt { font-size: 11.5px; color: var(--whph-meta); margin-top: 7px; }
.whph-lib-card-x { position: absolute; top: 12px; right: 12px; border: 0; background: none; color: var(--whph-meta); cursor: pointer; padding: 5px; border-radius: 7px; opacity: 0; transition: opacity .15s ease; display: inline-flex; }
.whph-lib-card:hover .whph-lib-card-x { opacity: 1; }
.whph-lib-card-x:hover { color: var(--whph-red); background: #fdf1f1; }
@media (hover: none) { .whph-lib-card-x { opacity: 1; } }
.whph-lib-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--whph-muted); background: var(--whph-bg); border: 1px solid var(--whph-bd); border-radius: 999px; padding: 2px 9px; }
.whph-lib-empty { text-align: center; padding: 34px 16px; color: var(--whph-meta); font-size: 13.5px; background: #fff; border: 1px dashed var(--whph-bd-strong); border-radius: var(--whph-radius); }
.whph-lib-empty h3 { margin: 10px 0 4px; font-size: 16px; color: var(--whph-navy); }
.whph-lib-empty p { margin: 0; }
.whph-lib-ei { width: 44px; height: 44px; border-radius: 12px; background: var(--whph-brand-soft); color: var(--whph-brand-dark); display: inline-flex; align-items: center; justify-content: center; }

/* Editor: two-pane list + form (Docs & Files layout, ported). */
.whph-lib-editor { background: #fff; border: 1px solid var(--whph-bd); border-radius: var(--whph-radius); box-shadow: var(--whph-shadow); overflow: hidden; }
.whph-lib-edtop { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--whph-bd); background: var(--whph-bg); }
.whph-lib-edtitle { font-size: 15px; font-weight: 700; color: var(--whph-navy); }
.whph-lib-spacer { flex: 1; }
.whph-lib-edbody { display: flex; align-items: stretch; }
.whph-lib-edmain { flex: 1; min-width: 0; padding: 20px 22px; }
.whph-lib-edside { flex: 0 0 280px; border-left: 1px solid var(--whph-bd); background: #fbfcfd; padding: 20px 18px; }
@media (max-width: 820px) { .whph-lib-edbody { flex-direction: column; } .whph-lib-edside { flex-basis: auto; border-left: 0; border-top: 1px solid var(--whph-bd); } }
.whph-lib-fld { margin-bottom: 16px; }
.whph-lib-fld > label, .whph-lib-sfld > label { display: block; font-size: 13px; font-weight: 700; color: var(--whph-text); margin-bottom: 7px; }
.whph-lib-sfld { margin-bottom: 18px; }
.whph-lib-inp { width: 100%; box-sizing: border-box; height: 36px; padding: 0 11px; border: 1px solid var(--whph-bd-strong); border-radius: var(--whph-radius-sm); font-family: inherit; font-size: 13.5px; color: var(--whph-text); outline: none; background: #fff; }
.whph-lib-inp:focus { border-color: var(--whph-brand); }
.whph-lib-ta { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13.5px; padding: 10px 12px; border: 1px solid var(--whph-bd-strong); border-radius: var(--whph-radius-sm); resize: vertical; min-height: 120px; color: var(--whph-text); outline: none; line-height: 1.55; }
.whph-lib-ta:focus { border-color: var(--whph-brand); }
.whph-lib-fhelp { font-size: 12px; color: var(--whph-meta); margin-top: 6px; line-height: 1.45; }
.whph-lib-addfield { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--whph-brand-dark); background: var(--whph-brand-soft); border: 1px dashed #bcdcea; border-radius: var(--whph-radius-sm); padding: 7px 12px; cursor: pointer; margin-top: 8px; }
.whph-lib-addfield:hover { background: #dceef6; }
.whph-lib-inrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.whph-lib-inrow .whph-in-label { flex: 1; }
.whph-lib-inrow .whph-in-type { width: 110px; flex: none; height: 36px; }
.whph-lib-req { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--whph-muted); white-space: nowrap; }
.whph-lib-inrow-x { border: 0; background: none; color: var(--whph-meta); cursor: pointer; padding: 5px; border-radius: 6px; display: inline-flex; }
.whph-lib-inrow-x:hover { color: var(--whph-red); background: #fdf1f1; }
.whph-lib-radio, .whph-lib-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--whph-muted); font-weight: 500; margin-bottom: 7px; cursor: pointer; }
.whph-lib-radio input, .whph-lib-check input { accent-color: var(--whph-brand); margin: 0; }
.whph-lib-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--whph-meta); background: var(--whph-bg); border: 1px solid var(--whph-bd); border-radius: 9px; padding: 9px 11px; line-height: 1.45; }
.whph-lib-note svg { flex: none; margin-top: 1px; }

/* Category picker */
.whph-lib-catpick { display: flex; flex-direction: column; gap: 5px; }
.whph-lib-catopt { display: flex; align-items: center; gap: 8px; border: 1px solid var(--whph-bd); background: #fff; border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--whph-muted); cursor: pointer; text-align: left; }
.whph-lib-catopt:hover { border-color: var(--whph-blue200); }
.whph-lib-catopt.is-sel { border-color: var(--whph-brand); background: var(--whph-brand-soft); color: var(--whph-brand-dark); }
.whph-lib-catlbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whph-lib-catlock { color: var(--whph-meta); display: inline-flex; }
.whph-lib-catdel { color: var(--whph-meta); display: inline-flex; padding: 2px; border-radius: 5px; }
.whph-lib-catdel:hover { color: var(--whph-red); background: #fdf1f1; }
.whph-lib-catnew { margin-top: 10px; background: #fff; border: 1px solid var(--whph-bd); border-radius: 9px; padding: 11px; }
.whph-lib-catnew[hidden] { display: none; }
.whph-lib-swatches { display: flex; gap: 7px; margin: 10px 0; }
.whph-lib-swatch { width: 24px; height: 24px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.whph-lib-swatch.is-sel { border-color: var(--whph-navy); }
.whph-lib-catnew-row { display: flex; gap: 8px; justify-content: flex-end; }

/* Draft-with-Phoebee assist row */
.whph-lib-assist { display: flex; align-items: center; gap: 9px; background: var(--whph-blue-light); border: 1px solid var(--whph-blue200); border-radius: 11px; padding: 9px 11px; margin-bottom: 18px; }
.whph-lib-assist-spk { color: var(--whph-brand); display: inline-flex; flex: none; }
.whph-lib-assist input { flex: 1; border: 0; background: transparent; outline: none; font-family: inherit; font-size: 13px; color: var(--whph-navy); }
.whph-lib-assist .whph-lib-btn { margin-left: 0; padding: 8px 13px; font-size: 12.5px; }

/* Toasts */
.whph-lib-toast { position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 12px); background: var(--whph-navy); color: #fff; font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(20, 30, 60, .3); opacity: 0; transition: all .25s; z-index: 100001; pointer-events: none; }
.whph-lib-toast.show { opacity: 1; transform: translate(-50%, 0); }
.whph-lib-toast.is-err { background: var(--whph-red); }

/* ============================================================
   Universal Search (2.4.0) — tray Search mode + ⌘P palette
   Style Guide: DM Sans, flat color, one scope dot per row,
   red reserved for genuine urgency, color on a budget.
   Self-contained (hex literals) so it never depends on token
   names elsewhere in the file.
   ============================================================ */

/* Make room for the 4th tab in the docked tray by dropping the badge
   (it returns in the roomy full-page view). */
.whph-tray:not(.is-expanded) .whph-badge { display: none; }
.whph-mode-tabs .whph-tab { padding: 5px 10px; }

/* Module scope dots (one accent per source). */
.whph-sd { width: 8px; height: 8px; border-radius: 999px; flex: none; display: inline-block; background: #8A9BAB; }
.whph-sd-crm { background: #DE3C7A; }
.whph-sd-tasks { background: #1EC1A1; }
.whph-sd-email { background: #924CD8; }
.whph-sd-notes { background: #347EA0; }
.whph-sd-calendar { background: #F5C842; }
.whph-sd-docs { background: #1D3040; }

.whph-kbd { font-family: inherit; font-size: 11px; font-weight: 700; color: #1D4A60; background: #D9EFF5; border: 1px solid #B3DDE9; border-radius: 5px; padding: 1px 6px; line-height: 1.5; white-space: nowrap; }

/* --- tray Search view --- */
.whph-srch-head { padding: 12px 14px 8px; border-bottom: 1px solid #D0DCE6; display: flex; flex-direction: column; gap: 9px; flex: none; }
.whph-srch-box { display: flex; align-items: center; gap: 9px; border: 1.5px solid #7EC4D8; background: #fff; border-radius: 999px; padding: 8px 13px; box-shadow: 0 0 0 4px rgba(126,196,216,.16); }
.whph-srch-ic { color: #439BC0; flex: none; display: inline-flex; }
.whph-srch-ic svg { width: 18px; height: 18px; display: block; }
.whph-srch-input { flex: 1; border: 0; background: transparent; outline: none; font-family: inherit; font-size: 14px; color: #1D3040; padding: 2px 0; }
.whph-srch-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.whph-srch-lenses { display: flex; flex-wrap: wrap; gap: 6px; }
.whph-lens-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.whph-lens { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid #D0DCE6; background: #fff; color: #5A6A7A; font-family: inherit; font-weight: 700; font-size: 11.5px; border-radius: 999px; padding: 3px 10px; }
.whph-lens:hover { border-color: #7EC4D8; background: #F4FBFC; }
.whph-lens.is-active { border-color: #439BC0; background: #439BC0; color: #fff; }

/* 2.6.4 — the search filter is a single dropdown multiselect on BOTH desktop and
   mobile (owner preference: cleaner than a 17-pill wrap row). The pill row is
   retired from view; the dropdown is the one control everywhere. */
.whph-lens-pills { display: none; }
.whph-lens-drop { display: block; position: relative; }
.whph-lensbtn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1px solid #D0DCE6; background: #fff; color: #3A4A5A; font-family: inherit; font-weight: 700; font-size: 13px; border-radius: 999px; padding: 8px 14px; }
.whph-lensbtn:hover { border-color: #7EC4D8; background: #F4FBFC; }
.whph-lensbtn-cv { color: #8A9BAB; font-size: 11px; }
.whph-lensmenu { position: absolute; z-index: 6; top: calc(100% + 6px); left: 0; min-width: 220px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #D0DCE6; border-radius: 12px; box-shadow: 0 12px 30px -8px rgba(29, 48, 64, .28); padding: 6px; }
.whph-lensopt { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #3A4A5A; font-weight: 600; }
.whph-lensopt:hover { background: #F4FBFC; }
.whph-lensopt input { width: 17px; height: 17px; accent-color: #439BC0; flex: none; margin: 0; }

/* 2.6.4 — Chat starter prompts: one "Can you help me with…" launcher pill whose
   menu opens UPWARD into the chat space, instead of a row of chips. */
.whph-quicklauncher { position: relative; display: inline-block; }
.whph-quicklaunch { display: inline-flex; align-items: center; gap: 7px; }
.whph-quicklaunch-spark { width: 15px; height: 15px; display: inline-flex; color: var(--whph-brand); }
.whph-quicklaunch-spark svg { width: 15px; height: 15px; }
.whph-quicklaunch-cv { color: var(--whph-meta); font-size: 11px; }
.whph-quickmenu { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 6; min-width: 260px; max-width: min(340px, 80vw); max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--whph-bd); border-radius: 14px; box-shadow: 0 -12px 34px -10px rgba(29, 48, 64, .30); padding: 6px; animation: whph-qm-in .14s ease-out; }
.whph-quickmenu[hidden] { display: none; }
@keyframes whph-qm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.whph-quickmenu-item { display: block; width: 100%; text-align: left; border: 0; background: none; font-family: inherit; font-size: 14px; color: var(--whph-navy); padding: 10px 12px; border-radius: 9px; cursor: pointer; }
.whph-quickmenu-item:hover { background: var(--whph-brand-soft); color: var(--whph-brand-dark); }

.whph-srch-results { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 10px 16px; }
.whph-srch-hint, .whph-srch-empty { font-size: 12.5px; color: #8A9BAB; padding: 12px 6px; }
.whph-srch-group { margin: 2px 0 12px; }
.whph-srch-eyebrow { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #8A9BAB; padding: 0 4px 6px; }
.whph-srch-count { color: #5A6A7A; letter-spacing: 0; }

/* shared result row (tray + palette) */
.whph-sr { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; text-decoration: none; }
.whph-sr:hover, .whph-sr.is-sel { border-color: #7EC4D8; background: #F4FBFC; }
.whph-sr .whph-sd { margin-top: 5px; }
.whph-sr-main { flex: 1; min-width: 0; overflow: hidden; }
.whph-sr-t { display: block; font-size: 13.5px; font-weight: 700; color: #1D3040; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whph-sr-s { display: block; font-size: 12px; color: #8A9BAB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.whph-sr-meta { flex: none; font-size: 10.5px; font-weight: 700; color: #5A6A7A; background: #F7FAFB; border: 1px solid #D0DCE6; border-radius: 999px; padding: 2px 8px; margin-top: 2px; white-space: nowrap; }

/* ask-Phoebee escalation row */
.whph-askrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; padding: 10px 11px; border: 1.5px solid #B3DDE9; background: #F4FBFC; border-radius: 11px; margin: 2px 2px 12px; font-family: inherit; }
.whph-askrow.is-sel { border-color: #439BC0; }
.whph-askrow-ic { color: #439BC0; flex: none; display: inline-flex; }
.whph-askrow-ic svg { width: 18px; height: 18px; display: block; }
.whph-askrow-main { flex: 1; min-width: 0; }
.whph-askrow-t { display: block; font-size: 13.5px; font-weight: 700; color: #1D3040; }
.whph-askrow-t b { color: #347EA0; }
.whph-askrow-s { display: block; font-size: 11.5px; color: #8A9BAB; margin-top: 1px; }
.whph-askrow-go { flex: none; }

/* Ask-Phoebee synthesis block ("both": summary over the source rows) */
.whph-synth { border: 1.5px solid #B3DDE9; background: #F4FBFC; border-radius: 13px; padding: 12px 13px; margin: 2px 2px 14px; }
.whph-synth.is-loading { display: flex; align-items: center; gap: 9px; }
.whph-synth-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.whph-synth-spark { color: #439BC0; display: inline-flex; }
.whph-synth-spark svg { width: 16px; height: 16px; display: block; }
.whph-synth-nm { font-size: 12.5px; font-weight: 800; color: #1D3040; }
.whph-synth-meta { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8A9BAB; background: #fff; border: 1px solid #D0DCE6; border-radius: 999px; padding: 2px 7px; }
.whph-synth-body { font-size: 13.5px; color: #5A6A7A; }
.whph-synth-err { color: #8A9BAB; }
.whph-synth-more { margin-top: 9px; border: 0; background: none; color: #347EA0; font-family: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 0; }
.whph-synth-more:hover { color: #1D4A60; }

/* --- ⌘P command palette --- */
body.whph-pal-open { overflow: hidden; }
.whph-palette { position: fixed; inset: 0; z-index: 100000; font-family: "DM Sans", sans-serif; }
.whph-palette[hidden] { display: none; }
.whph-pal-scrim { position: absolute; inset: 0; background: rgba(29,48,64,.46); animation: whph-pal-fade .12s ease-out; }
@keyframes whph-pal-fade { from { opacity: 0; } to { opacity: 1; } }
.whph-pal-box { position: absolute; top: 9vh; left: 50%; transform: translateX(-50%); width: min(600px, 92vw); max-height: 78vh; display: flex; flex-direction: column; background: #fff; border: 1px solid #D0DCE6; border-radius: 16px; overflow: hidden; box-shadow: 0 44px 90px -26px rgba(29,48,64,.6); animation: whph-pal-in .14s ease-out; }
@keyframes whph-pal-in { from { transform: translate(-50%, -8px); opacity: .6; } to { transform: translate(-50%, 0); opacity: 1; } }
.whph-pal-search { display: flex; align-items: center; gap: 12px; padding: 15px 17px; border-bottom: 1px solid #D0DCE6; }
.whph-pal-ic { color: #439BC0; flex: none; display: inline-flex; }
.whph-pal-ic svg { width: 20px; height: 20px; display: block; }
.whph-pal-input { flex: 1; border: 0; background: transparent; outline: none; font-family: inherit; font-size: 17px; color: #1D3040; }
.whph-pal-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.whph-pal-results { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 9px; }
.whph-pal-results .whph-askrow, .whph-pal-results .whph-srch-group { margin-left: 3px; margin-right: 3px; }
.whph-pal-foot { display: flex; align-items: center; gap: 16px; padding: 9px 15px; border-top: 1px solid #D0DCE6; background: #F7FAFB; font-size: 11.5px; color: #8A9BAB; font-weight: 600; }
.whph-pf { display: inline-flex; align-items: center; gap: 6px; }
.whph-pf-spacer { margin-left: auto; }
.whph-pf-brand .whph-pf-spark { color: #439BC0; display: inline-flex; }
.whph-pf-brand .whph-pf-spark svg { width: 14px; height: 14px; display: block; }
@media (max-width: 520px) {
	.whph-pal-box { top: 0; left: 0; transform: none; width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; animation: none; }
	.whph-pal-foot { display: none; }
}

/* 2.4.1 — neutralize BuddyBoss theme bleed into the search inputs:
   its input[type=search] background magnifier (doubled icon) and its blue
   rounded-rectangle focus ring inside our fully-rounded pill. */
.whph-srch-input, .whph-pal-input {
	-webkit-appearance: none !important; appearance: none !important;
	background: transparent !important; background-image: none !important;
	box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
	padding-left: 0 !important;
}
.whph-srch-input:focus, .whph-pal-input:focus,
.whph-srch-input:focus-visible, .whph-pal-input:focus-visible {
	outline: 0 !important; box-shadow: none !important; border: 0 !important; background: transparent !important;
}
.whph-srch-input::-webkit-search-decoration,
.whph-srch-input::-webkit-search-cancel-button,
.whph-srch-input::-webkit-search-results-button,
.whph-pal-input::-webkit-search-decoration,
.whph-pal-input::-webkit-search-cancel-button { display: none !important; -webkit-appearance: none !important; }
/* Keep the focus ring on the pill/box, never the raw input. */
.whph-srch-box:focus-within { border-color: #439BC0; box-shadow: 0 0 0 4px rgba(67,155,192,.18); }

/* 2.4.2 — move the Chat/Search/Tools/History switcher to its own row under the
   title, so the header keeps room for the expand + close buttons (the close was
   getting pushed off-screen in the docked tray at 4 tabs). */
.whph-panel-head .whph-expand { margin-left: auto; }
.whph-panel-head { border-bottom: 0; }
.whph-tabrow { display: flex; align-items: center; padding: 8px 12px 10px; border-bottom: 1px solid #D0DCE6; flex: none; }
.whph-tabrow .whph-mode-tabs { margin-left: 0; }
.whph-srch-err { color: #E24B4A; }

/* 2.4.4 — palette close button (essential on mobile, where the palette is
   full-screen and the scrim/Esc aren't reachable). */
.whph-pal-close { flex: none; border: 0; background: none; color: #8A9BAB; font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.whph-pal-close:hover { color: #E24B4A; background: #F7FAFB; }
@media (max-width: 520px) {
	.whph-pal-kbd { display: none; }        /* no physical keyboard shortcut on touch */
	.whph-pal-close { font-size: 26px; padding: 4px 8px; }
}

/* 2.4.5 — mobile: iOS Safari auto-zooms when a focused input is under 16px, which
   left the tray zoomed after every tap. Force 16px on all Phoebee inputs on small
   screens so focus never triggers the zoom. */
@media (max-width: 640px) {
	.whph-scope input, .whph-scope textarea, .whph-scope select,
	.whph-palette input, .whph-palette textarea { font-size: 16px !important; }
}

/* 2.4.6 — mobile tray: keep it a simple full-screen sheet (header + Chat/Search/
   Tools/History switcher + chat + composer). Hide the full-page/expand affordance
   and its left rail (no room for it on a phone).
   2.6.4: the starter prompts are no longer hidden on mobile — they collapsed into
   a single "Can you help me with…" launcher pill (see .whph-quicklauncher), which
   is compact enough to keep. */
@media (max-width: 640px) {
	.whph-tray { width: 100vw; left: 0; right: 0; border-left: 0; }
	.whph-tray::before { display: none; }
	.whph-expand { display: none !important; }
	.whph-rail { display: none !important; }
}

/* 2.6.0 — embedded full-screen surface ([phoebee_fullscreen] shortcode).
   The panel host renders in the page flow instead of docking as the fixed
   corner tray: it fills its container as a full page with no overlay chrome,
   no launcher, no close. The inner expanded layout is reused verbatim, so the
   existing responsive rules apply (left rail on desktop, tab switcher on
   mobile). Height comes from the inline style the shortcode sets on the panel;
   these rules only own position + appearance. Two-class selectors so they
   outrank the base .whph-tray and the .whph-tray.is-expanded rules above. */
.whph-embed-host { display: block; width: 100%; box-sizing: border-box; }
.whph-embed-signin { padding: 44px 20px; text-align: center; color: var(--whph-muted); font-family: var(--whph-font); font-size: 15px; }

.whph-tray.whph-embed {
	position: relative; top: 0; right: auto; left: auto; z-index: 1;
	width: 100%; max-width: 100%;
	box-shadow: none; border-left: 0;
	background: rgba(251, 253, 254, 1);
	backdrop-filter: none; -webkit-backdrop-filter: none;
	animation: none;
}
.whph-tray.whph-embed::before { display: none; }

/* No overlay affordances in embed — it's a page, not a poppable tray. */
.whph-tray.whph-embed .whph-expand,
.whph-tray.whph-embed .whph-close { display: none !important; }

/* Mobile embed: a fixed full-viewport sheet (JS sets top+height from the visual
   viewport), so it fills from the very top of the web view — under the app's
   native header, no blue gap — and never depends on where the shortcode sits in
   the theme's page flow. */
@media (max-width: 640px) {
	/* Fixed sheet; JS sizes top+height from the visual viewport. min-height MUST be
	   cleared here — the shortcode sets min-height:100vh as a desktop dvh fallback,
	   but on mobile that forced the panel taller than the visible viewport when the
	   keyboard opened, pushing the composer way above the keyboard. */
	.whph-tray.whph-embed { position: fixed; top: 0; left: 0; right: 0; min-height: 0 !important; z-index: 99991; }
	/* Lift the composer above the app's floating bottom nav while the keyboard is
	   down. When the keyboard is up (.whph-kb-open) the composer sits directly on
	   the keyboard, so the clearance is removed. --whph-embed-navgap is set by the
	   shortcode's nav_offset attribute; tune it to your app's nav height. */
	.whph-tray.whph-embed:not(.whph-kb-open) .whph-composer {
		margin-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--whph-embed-navgap, 80px));
	}
	/* Keep touch scrolling inside the panel's own scroll areas — stops the page
	   behind the fixed sheet from taking the gesture (the reverse-scroll jitter). */
	.whph-tray.whph-embed .whph-chat-list,
	.whph-tray.whph-embed .whph-srch-results,
	.whph-tray.whph-embed .whph-tool-list,
	.whph-tray.whph-embed .whph-history-list {
		overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
	}
	/* Lock the background page while the mobile embed is up (the embed IS the page,
	   so nothing behind it should scroll). Scoped to the media query so desktop
	   embed keeps normal in-flow scrolling. */
	body.whph-embed-active { overflow: hidden !important; }
}

/* 2.7.0 — desktop anchored top search bar. Rendered into a menu item the admin
   tags with `.whph-search-anchor`; on Enter it hands the query to the ⌘P palette.
   Matches the palette input styling (WH - Work Hub Style Guide: DM Sans, brand
   #439BC0, 12px pill radius). Desktop only — the anchor menu item's original
   content is restored on smaller screens, where the icon hijack takes over. */
.whph-search-anchor-host {
	display: flex !important; align-items: center; list-style: none;
	/* Grow to fill the available header space up to a sensible cap, so the bar
	   uses the room the wide desktop header actually has instead of sitting in a
	   narrow menu-item slot. */
	flex: 1 1 auto; min-width: 0; max-width: 640px; margin: 0; padding: 0;
}
.whph-search-anchor-host > .whph-topbar { width: 100%; }
.whph-topbar {
	display: flex; align-items: center; gap: 8px;
	box-sizing: border-box;
	/* Width FLOOR via min-width: the host rule sets width:100% (higher specificity
	   than a plain `width`), so a `width` cap alone is ignored. min-width forces the
	   shrink-to-fit menu item to be at least this wide regardless, then width:100%
	   fills any extra space the menu grants — capped by the host max-width above so
	   it's comfortably wide without spanning the whole header. */
	min-width: clamp(360px, 42vw, 640px);
	width: clamp(360px, 42vw, 640px);
	height: 40px; padding: 0 16px;
	background: #fff;
	border: 1px solid var(--whph-bd-strong, #D1D5DB);
	border-radius: 999px;
	font-family: "DM Sans", var(--whph-font, sans-serif);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.whph-topbar:focus-within {
	border-color: #439BC0;
	box-shadow: 0 0 0 4px rgba(67, 155, 192, .18);
}
.whph-topbar-ic { flex: none; display: inline-flex; color: #439BC0; cursor: text; }
.whph-topbar-ic svg { width: 18px; height: 18px; display: block; }
.whph-topbar-input {
	flex: 1 1 auto; min-width: 0;
	-webkit-appearance: none !important; appearance: none !important;
	border: 0 !important; outline: 0 !important;
	background: transparent !important; background-image: none !important;
	box-shadow: none !important;
	font-family: inherit; font-size: 15px; color: #1D3040;
	padding: 0 !important; line-height: 1.2;
}
.whph-topbar-input::placeholder { color: #8A9BAB; opacity: 1; }
.whph-topbar-input::-webkit-search-decoration,
.whph-topbar-input::-webkit-search-cancel-button,
.whph-topbar-input::-webkit-search-results-button { display: none !important; -webkit-appearance: none !important; }

/* Desktop only. Below the breakpoint the bar is hidden and JS restores the
   anchor menu item's original content, so mobile falls back to the icon hijack. */
@media (max-width: 1024px) {
	.whph-topbar { display: none !important; }
}

/* Bulk approval affordance (2.7.6) — the record count is the point; make it unmissable. */
.whph-approval-bulk { border-left: 3px solid #E24B4A; }
.whph-approval-scope { margin: 6px 0 2px; font-size: 13px; color: #1D3040; }
.whph-approval-scope strong { font-weight: 800; }
.whph-approval-cap { color: #8A9BAB; font-weight: 500; }
.whph-approval-unknown { color: #b5322f; }
.whph-approval-sample { font-size: 12px; color: #8A9BAB; margin-bottom: 2px; }

/* Content-write approval card (2.13.0) — knowledge / tool writes. The body is the
   decision, so it is shown verbatim and given room; an update shows what it
   replaces above what replaces it, muted and struck-through-adjacent so the
   direction of the change reads at a glance. */
.whph-card {
	margin: 8px 0 2px; padding: 10px 12px; border-radius: var(--whph-radius-sm);
	background: var(--whph-blue-light); border: 1px solid var(--whph-bd);
	border-left: 3px solid var(--whph-brand);
}
.whph-card.is-update { border-left-color: var(--whph-amber); background: #FFFDF5; }
.whph-card-hd { margin-bottom: 6px; }
.whph-card-kind {
	font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--whph-meta);
}
.whph-card-title { font-size: 14px; font-weight: 700; color: var(--whph-navy); margin-top: 2px; }
.whph-card-metas { margin-top: 3px; }
.whph-card-meta { font-size: 11px; color: var(--whph-meta); margin-right: 10px; }
.whph-card-meta b { font-weight: 600; }
.whph-card-lbl {
	font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--whph-meta); margin: 6px 0 3px;
}
.whph-card-body {
	font-size: 13px; line-height: 1.5; color: var(--whph-text);
	white-space: pre-wrap; word-break: break-word;
	max-height: 260px; overflow-y: auto;
	background: var(--whph-card); border: 1px solid var(--whph-bd);
	border-radius: var(--whph-radius-sm); padding: 8px 10px;
}
.whph-card-before { color: var(--whph-faint); background: #FAFAFA; max-height: 150px; }
.whph-card-note { font-size: 11px; color: var(--whph-meta); margin-top: 6px; }