/* Shared brand layer for the six non-Pollo replicas. Everything is driven by the tokens in the per-brand
   token file (production-brand-tokens.css). Styles only the existing runtime markup; no layout rewrite. */

/* ---- workspace bar (project / session switcher) ---- */
html[data-competitor] details[data-production-workspace-menu] {
  background: var(--b-bar, var(--b-bg));
  color: var(--b-text);
  border-bottom: 1px solid var(--b-line);
}
html[data-competitor] details[data-production-workspace-menu] > summary {
  cursor: pointer;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--b-muted);
  list-style: none;
}
html[data-competitor] details[data-production-workspace-menu] > summary:hover { color: var(--b-text); }
html[data-competitor] details[data-production-workspace-menu][open] { background: var(--b-surface); }
html[data-competitor] details[data-production-workspace-menu] button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 8px 14px;
  cursor: pointer;
}
html[data-competitor] details[data-production-workspace-menu] button:hover:not(:disabled) { background: var(--b-hover); }
html[data-competitor] details[data-production-workspace-menu] button:disabled { opacity: .4; cursor: not-allowed; }

/* ---- dialogs: login, new project, new session, media ---- */
html[data-competitor] dialog.production-workspace-dialog,
html[data-competitor] dialog[data-production-media-dialog] {
  width: min(400px, calc(100vw - 32px)) !important;
  padding: 32px 28px 24px !important;
  border-radius: calc(var(--b-radius) + 8px) !important;
  background-color: var(--b-surface) !important;
  color: var(--b-text) !important;
  border: 1px solid var(--b-line);
  box-shadow: 0 28px 90px var(--b-shadow);
}
html[data-competitor] dialog.production-workspace-dialog::backdrop,
html[data-competitor] dialog[data-production-media-dialog]::backdrop { background: var(--b-backdrop); backdrop-filter: blur(6px); }
html[data-competitor] dialog.production-workspace-dialog form,
html[data-competitor] dialog[data-production-media-dialog] > div { display: grid; gap: 16px; }
html[data-competitor] dialog.production-workspace-dialog form::before {
  content: var(--b-name);
  justify-self: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--b-text);
}
html[data-competitor] dialog.production-workspace-dialog h2 { margin: 0; text-align: center; font-size: 22px; font-weight: 600; color: var(--b-text) !important; }
html[data-competitor] dialog.production-workspace-dialog label { display: grid; gap: 6px; font-size: 13px; color: var(--b-muted) !important; }
html[data-competitor] dialog.production-workspace-dialog input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--b-line-strong) !important;
  border-radius: var(--b-radius) !important;
  background: var(--b-input) !important;
  color: var(--b-text) !important;
  font: inherit;
  outline: 0;
}
html[data-competitor] dialog.production-workspace-dialog input:focus { border-color: var(--b-text) !important; }
html[data-competitor] dialog.production-workspace-dialog p[role="alert"] { margin: 0; min-height: 0; font-size: 13px; color: var(--b-danger); }
html[data-competitor] dialog.production-workspace-dialog footer { display: grid; gap: 10px; }
html[data-competitor] dialog.production-workspace-dialog footer button { min-height: 44px; border-radius: var(--b-radius) !important; font: inherit; font-weight: 600; cursor: pointer; }
html[data-competitor] dialog.production-workspace-dialog footer button[type="submit"] {
  order: -1;
  border: 0 !important;
  background: var(--b-accent) !important;
  color: var(--b-accent-text) !important;
}
html[data-competitor] dialog.production-workspace-dialog footer button[type="submit"]:hover { filter: brightness(1.06); }
html[data-competitor] dialog.production-workspace-dialog footer button:not([type="submit"]) {
  border: 0 !important;
  background: transparent !important;
  color: var(--b-muted) !important;
}
html[data-competitor] dialog.production-workspace-dialog [data-workspace-toggle] { color: var(--b-muted) !important; text-decoration: underline; }

/* ---- agent chat ---- */
html[data-competitor] .production-chat-message { display: grid; gap: 4px; }
html[data-competitor] .production-chat-message[data-production-message="user"] { justify-items: end; }
html[data-competitor] .production-chat-message[data-production-message="user"] > b { display: none; }
html[data-competitor] .production-chat-message[data-production-message="user"] [data-production-message-body] {
  max-width: 88%;
  margin: 0;
  padding: 10px 14px;
  border-radius: calc(var(--b-radius) + 4px) calc(var(--b-radius) + 4px) 4px calc(var(--b-radius) + 4px);
  background: var(--b-hover);
  overflow-wrap: anywhere;
}
html[data-competitor] .production-chat-message[data-production-message="assistant"] > b {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--b-muted);
}
html[data-competitor] [data-production-message-copy] { opacity: .55; }
html[data-competitor] [data-production-message-copy]:hover { opacity: 1; }
/* model chip must shrink instead of wrapping letter by letter */
html[data-competitor] [data-chat-form] button[data-p-model],
html[data-competitor] [data-chat-form] button:has(> [data-production-native-model-caption]) {
  min-width: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-competitor] [data-production-native-label] { font-size: 12px; color: var(--b-muted); white-space: nowrap; }
html[data-competitor] div.production-brand-menu {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--b-line);
  border-radius: calc(var(--b-radius) + 4px);
  background: var(--b-surface);
  color: var(--b-text);
  box-shadow: 0 20px 60px var(--b-shadow);
}
html[data-competitor] div.production-brand-menu button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--b-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
html[data-competitor] div.production-brand-menu button:hover { background: var(--b-hover); }

/* generation / task buttons */
html[data-competitor] [data-production-media-task-open],
html[data-competitor] [data-production-media-result-open] {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--b-line-strong);
  border-radius: 999px;
  background: var(--b-accent);
  color: var(--b-accent-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
html[data-competitor] [data-media-history-refresh] {
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid var(--b-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--b-text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* ---- assets page ---- */
html[data-competitor] section[data-production-content="assets"] { display: grid; gap: 16px; align-content: start; color: var(--b-text); }
html[data-competitor] [data-production-asset-grid] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
html[data-competitor] [data-production-asset-grid] > article { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--b-line); border-radius: calc(var(--b-radius) + 4px); background: var(--b-surface); overflow: hidden; }
html[data-competitor] [data-production-asset-grid] video { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 320px; object-fit: cover; border-radius: var(--b-radius); background: var(--b-bg); }
html[data-competitor] [data-production-asset-grid] > article > p { margin: 0; font-size: 12px; color: var(--b-muted); }
html[data-competitor] [data-production-asset-actions] { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-competitor] [data-production-asset-actions] button { min-height: 32px; padding: 0 12px; border: 1px solid var(--b-line-strong); border-radius: 999px; background: transparent; color: var(--b-text); font: inherit; font-size: 12px; cursor: pointer; }
html[data-competitor] [data-production-asset-actions] [data-production-asset-add] { border-color: transparent; background: var(--b-accent); color: var(--b-accent-text); }

/* ---- session / sign-in banner ---- */
html[data-competitor] [data-production-session-banner] {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  transform: translateX(-50%);
  border: 1px solid var(--b-line-strong);
  border-radius: calc(var(--b-radius) + 4px);
  background: var(--b-surface);
  color: var(--b-text);
  font-size: 13px;
  line-height: 18px;
  box-shadow: 0 12px 40px var(--b-shadow);
}
html[data-competitor] [data-production-session-banner][hidden] { display: none; }
html[data-competitor] [data-production-session-banner] button { flex: none; min-height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--b-accent); color: var(--b-accent-text); font: inherit; font-weight: 600; cursor: pointer; }