/* Barney web app shell additions (Phase 68).
   Loaded AFTER css/styles.css so these rules win where they overlap. This sheet
   is deliberately small: it covers only the two shell changes the base sheet has
   no vocabulary for. Everything else still comes from styles.css, so the
   ChatGPT-style composer pill, sidebar, and project panel are untouched.
   All styling lives here because the CSP is style-src 'self': no inline style
   attribute and no external sheet is permitted anywhere in this app. */

/* ---- header brand as a real home button ----
   The logo + wordmark is now a <button> so it is keyboard focusable and
   announced as a button. A button does not inherit the page font, colour, or
   background, and arrives with a UA border and padding, so those are reset back
   to the .brand look. Font family and size are NOT set here: .brand already
   declares them, and restating them (or using the `font` shorthand, which would
   reset family and size to the body defaults) would silently undo it. */
.brand-home {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: inherit;          /* .topbar sets #fff; buttons do not inherit colour */
  line-height: 1.2;
  cursor: pointer;
  border-radius: 9px;
  /* Padding gives the focus ring and hover tint something to sit on. The equal
     negative left margin keeps the wordmark on the same x as before, so the
     header does not visibly shift. */
  padding: 5px 8px;
  margin: 0 0 0 -8px;
  transition: background .15s;
}
.brand-home:hover { background: rgba(255,255,255,.10); }
/* A visible ring for keyboard users. :focus is the fallback for browsers with
   no :focus-visible; the :not() rule then removes it again where :focus-visible
   IS supported, so a mouse click does not leave a ring behind. */
.brand-home:focus { outline: 2px solid #9cc0ff; outline-offset: 2px; }
.brand-home:focus:not(:focus-visible) { outline: none; }
.brand-home:focus-visible { outline: 2px solid #9cc0ff; outline-offset: 2px; }

/* ---- project panel: prominent "New chat" ----
   Full-width primary action at the top of the panel body, so starting a chat
   inside a project is the obvious thing to do rather than a small link in the
   Chats header. Matches the brand blue of the sidebar's New chat button. */
.pj-newchat-hero {
  font: inherit; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 16px;
  cursor: pointer; border-radius: 10px;
  background: var(--brand); color: #fff; border: 1px solid transparent;
  transition: background .15s;
}
.pj-newchat-hero:hover { background: var(--brand-dark); }
.pj-newchat-hero:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.pj-newchat-ic { font-size: 17px; line-height: 1; }