/* Pollo home fidelity (v22), compared with research/homepage-v2.12/pollo/dom-home-desktop.json + source-home-desktop-safe.png.
   Additive only: the runtime files are untouched. */

/* The project / session switcher sat above the logo and pushed the whole sidebar 37px down (real Home row: y=113).
   It lives in the top bar instead, next to History. */
.p-sidebar > details[data-production-workspace-menu] {
  position: fixed; top: 26px; left: 312px; z-index: 60; margin: 0; width: auto; max-width: 360px;
  font-size: 13px; color: rgba(255, 255, 255, .85);
}
.p-sidebar > details[data-production-workspace-menu] > summary {
  height: 32px; padding: 0 12px; border-radius: 8px; display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); cursor: pointer; list-style: none;
}
.p-sidebar > details[data-production-workspace-menu] > summary::-webkit-details-marker { display: none; }

/* composer bottom bar: the real one reads "Pollo 2.0 | On | 16:9 / 5s / 480p / 1 | settings ... credits" */
.home-pollo [data-p-media-controls] [data-production-media-caption] { font-size: 13px; font-weight: 300; color: #fff; }
.home-pollo [data-p-media-settings] { position: relative; padding-left: 14px; }
.home-pollo [data-p-media-settings]::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 1px; background: rgba(255, 255, 255, .15); }
.home-pollo [data-p-credit] { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: rgba(255, 255, 255, .55); }
.home-pollo [data-p-credit][data-fidelity-credits]::before {
  content: ''; width: 12px; height: 12px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .35));
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 4px); mask: repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 4px);
}

/* Labs block and Refer & Earn (real: Labs header above App / API / MCP, "+20" badge on MCP, card at y=660) */
.home-pollo .p-labs-title { margin: 14px 12px 6px; font-size: 13px; color: rgba(255, 255, 255, .45); }
.p-side-links { position: relative; margin-top: 18px !important; }
.p-labs-badge {   /* sits above the MCP icon, in the gap above the row, never over the previous item */
  position: absolute; right: calc(16.66% - 26px); top: -16px; padding: 1px 6px; border-radius: 6px; font-size: 11px; line-height: 16px;
  background: #f15a24; color: #fff; font-weight: 500;
}
.p-refer {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: calc(100% - 0px); margin: 10px 0 0;
  padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .85); font: inherit; text-align: left; cursor: pointer; position: relative;
}
.p-refer b { font-size: 14px; font-weight: 400; color: #fff; }
.p-refer span { font-size: 12px; color: rgba(255, 255, 255, .55); }
.p-refer i { position: absolute; right: -6px; top: -8px; font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: #f15a24; color: #fff; }

[data-fidelity-hidden] { display: none !important; }
/* top bar: the project and account buttons render empty until a project is chosen; the real top bar has no empty pills */
.p-topbar > button:has(> [data-production-caption]:empty):not(:has(svg, img)) { display: none; }

/* Agent view: the runtime's first-use hint under the composer is not on the real page (other status messages still show) */
[data-production-chat-context] p[data-production-native-first-help] { display: none; }
[data-production-chat-context]:not(:has(p:not([data-production-native-first-help]))) { min-height: 0; padding: 0; margin: 0; }
[data-p-agent-controls] [data-p-model] { font-size: 13px; color: rgba(255, 255, 255, .85); }

/* collapsed sidebar (real Pollo: icon rail) */
.p-sidebar.p-collapsed { width: 72px !important; overflow: hidden; }
.p-sidebar.p-collapsed .p-nav-item > span:not(.p-icon), .p-sidebar.p-collapsed .p-nav-item small, .p-sidebar.p-collapsed .p-nav-heading,
.p-sidebar.p-collapsed .p-labs-title, .p-sidebar.p-collapsed .p-refer, .p-sidebar.p-collapsed .p-side-links, .p-sidebar.p-collapsed [aria-label="Pollo AI"] { display: none !important; }
body:has(.p-sidebar.p-collapsed) .p-shell { margin-left: 72px !important; }

/* Director start cards (real: centred, icon in a 58px rounded tile, bold 18px title, one-line note) */
.p-start-card {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0 !important;
}
.p-start-tile {
  width: 58px; height: 58px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 38px;
  background: linear-gradient(180deg, #2b2b31, #1d1d22); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 6px 16px rgba(0, 0, 0, .35);
}
.p-start-tile > .p-icon { width: 26px !important; height: 26px !important; margin: 0 !important; background-color: #fff !important; }
.p-start-card { position: relative; }
.p-start-card > strong { font-size: 18px !important; font-weight: 600 !important; line-height: 1.3 !important; margin: 0 0 4px !important; }
.p-start-card > p { font-size: 12px !important; line-height: 1.5 !important; color: rgba(255, 255, 255, .5) !important; white-space: nowrap; margin: 0 !important; }

/* outside the home sidebar (Director, canvas, assets...) the project / session switcher sits at the top right */
details[data-production-workspace-menu]:not(.p-sidebar > details) {
  position: fixed; top: 10px; right: 24px; z-index: 60; margin: 0; font-size: 13px; color: rgba(255, 255, 255, .85);
}
details[data-production-workspace-menu]:not(.p-sidebar > details) > summary {
  height: 30px; padding: 0 12px; border-radius: 8px; display: flex; align-items: center; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08); cursor: pointer; list-style: none;
}

/* v22.1 — compared with the official Agent page (verification/pixel-audit-v1/reference-live-pollo-agent-1512.png) */
/* the selected-skill token belongs to the Agent composer only */
.home-pollo:not([data-creation-mode="agent"]) [data-production-pollo-selected-skill] { display: none !important; }
[data-production-pollo-selected-skill] {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; margin: 0 0 6px; border-radius: 8px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: #fff; width: max-content;
}
[data-production-pollo-selected-skill] > button { background: none; border: 0; color: rgba(255, 255, 255, .6); cursor: pointer; font-size: 14px; padding: 0 4px; }
/* Skills button: always "📖 Skills ⌄" like the real page (the runtime writes the chosen skill into it; the token shows that) */
[data-p-skills-toggle] { font-size: 0 !important; display: inline-flex !important; align-items: center; gap: 6px; }
[data-p-skills-toggle]::before {
  content: ''; width: 14px; height: 14px; background: rgba(255, 255, 255, .85);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' d='M12 6.5C10 5 7.5 4.5 4 4.5v13c3.5 0 6 .5 8 2 2-1.5 4.5-2 8-2v-13c-3.5 0-6 .5-8 2zm0 0v13'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' d='M12 6.5C10 5 7.5 4.5 4 4.5v13c3.5 0 6 .5 8 2 2-1.5 4.5-2 8-2v-13c-3.5 0-6 .5-8 2zm0 0v13'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-p-skills-toggle]::after { content: 'Skills  ⌄'; font-size: 13px; color: rgba(255, 255, 255, .85); white-space: pre; }
/* signed out: disabled controls pass the click to their container, which opens sign-in (production-pollo-fidelity.js) */
[data-p-agent-controls] [data-p-model] { display: inline-flex; align-items: center; gap: 6px; }
[data-p-agent-controls] [data-p-model]::before {   /* Pollo glyph before "Auto" */
  content: ''; width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, #ff7a3d, #f15a24);
}
/* the top bar: History and the project switcher sit at the right, like the real credits / project pills */
.p-sidebar > details[data-production-workspace-menu] { left: auto !important; right: 24px; top: 14px !important; }
[data-production-pollo-history-home-toggle] { position: fixed !important; top: 14px !important; right: 260px; left: auto !important; z-index: 60; }
/* the runtime status toast sat under the "internal replica" note at the bottom-right corner */
[data-production-runtime-status] { bottom: 40px !important; }

/* ---- conversation view (official: chat list on the left, project + "Open Generations" at the top right) ---- */
[data-production-native-model-caption][data-fid-short] { font-size: 0 !important; }
[data-production-native-model-caption][data-fid-short]::after { content: attr(data-fid-short); font-size: 13px; }
/* clarification card: the answer is typed in the composer (it is aria-labelledby the card) — say so, and mark the composer */
section[data-production-interaction-question] p[id^="production-interaction-label"] { font-weight: 600; }
section[data-production-interaction-question] p[id^="production-interaction-label"]::after { content: '  ·  type it in the box below and press Enter'; font-weight: 400; color: rgba(255, 255, 255, .5); }
.p-composer:has([data-chat-input][aria-labelledby^="production-interaction-label"]) { box-shadow: 0 0 0 1px #f15a24, 0 0 24px rgba(241, 90, 36, .25) !important; }
.p-composer [data-chat-input][aria-labelledby^="production-interaction-label"]:empty::before { content: 'Enter the product name…' !important; color: rgba(255, 255, 255, .45); }