/* Base — ported from the design's helmet block. */
html, body { margin: 0; padding: 0; height: 100%; }
* { box-sizing: border-box; }
body { font-family: 'Schibsted Grotesk', sans-serif; background: #F4F1EA; color: #16201B; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(94, 102, 95, 0.24);
  border-radius: 20px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(94, 102, 95, 0.42); background-clip: padding-box; }

textarea { font-family: inherit; }
textarea::placeholder, input::placeholder { color: #9AA39B; }

/* Hover states. The prototype framework applied these via a style-hover attr;
   here they're plain CSS keyed to the base inline styles. */
.rg-newchat:hover { background: rgba(143, 186, 169, 0.18) !important; }
.rg-nav:hover { background: rgba(237, 234, 225, 0.06) !important; }
.rg-hist:hover { background: rgba(237, 234, 225, 0.06) !important; }
.rg-hist-row:hover .rg-hist-arc { opacity: 1 !important; }
.rg-hist-arc:hover { color: #EDEAE1 !important; }
.rg-suggestion:hover { border-color: #2C5F4F !important; background: #FFFFFF !important; }
.rg-draft:hover { border-color: #2C5F4F !important; background: #F0F4F1 !important; }
.rg-attach:hover { background: #EFEBE1 !important; color: #2C5F4F !important; }
.rg-attach-x:hover { color: #16201B !important; }
.rg-upgrade:hover { filter: brightness(1.12); }
.rg-banner-x:hover { opacity: 1 !important; }

/* Workflows tab. */
.rg-wfcard:hover { border-color: #2C5F4F !important; box-shadow: 0 4px 18px rgba(14, 31, 25, 0.07); }
.rg-wfrow:hover { background: rgba(44, 95, 79, 0.03) !important; }
.rg-wfback:hover { color: #2C5F4F !important; }
.rg-wfrun:hover { background: #234C3F !important; }
.rg-wfghost:hover { border-color: #2C5F4F !important; background: #F0F4F1 !important; }
.rg-wfdiscuss:hover { background: #16382A !important; }
/* Spinner on the active stage of the workflow processing animation. */
.rg-wfspin { animation: rg-spin 0.7s linear infinite; }
@keyframes rg-spin { to { transform: rotate(360deg); } }

@keyframes rg-blink { to { visibility: hidden; } }

/* Streaming caret on the in-progress assistant message. */
.rg-streaming::after { content: '▋'; color: #8FBAA9; animation: rg-blink 1s steps(2, start) infinite; }

/* Ring spinner on the active "thinking" step (light ring, dark leading arc). */
.rg-step-spin { box-sizing: border-box; border: 2.5px solid #DAD4C6; border-top-color: #0E1F19; border-radius: 50%; animation: rg-spin 0.7s linear infinite; }
/* Collapsed steps summary: hide the native disclosure marker, rotate our caret. */
.rg-steps-done > summary { list-style: none; }
.rg-steps-done > summary::-webkit-details-marker { display: none; }
.rg-steps-done > summary:hover { color: #3A423C; }
.rg-steps-caret { display: inline-block; transition: transform 0.15s ease; }
.rg-steps-done[open] .rg-steps-caret { transform: rotate(90deg); }

/* Drag-and-drop attach overlay. Shown full-window while a file is dragged over
   the page in chat view; toggled via body.rg-drag from initDragDrop in app.js. */
#rg-drop {
  display: none;
  position: fixed; inset: 0;
  z-index: 70;
  align-items: center; justify-content: center;
  background: rgba(14, 31, 25, 0.42);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
body.rg-drag #rg-drop { display: flex; opacity: 1; }
#rg-drop > div {
  display: flex; align-items: center; gap: 12px;
  padding: 28px 44px;
  border: 2px dashed #8FBAA9;
  border-radius: 22px;
  background: rgba(252, 251, 247, 0.97);
  color: #2C5F4F;
  font-size: 17px; font-weight: 600;
  box-shadow: 0 24px 60px rgba(8, 19, 15, 0.32);
}

/* ── Responsive: below 820px the sidebar becomes an off-canvas drawer so the
   main content (brief / chat / settings) is full-width and actually visible. */
.rg-hamburger { display: none; }
#rg-backdrop { display: none; }

@media (max-width: 820px) {
  #rg-sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    height: 100% !important;
    margin: 0 !important;
    width: 300px !important;
    max-width: 86vw;
    border-radius: 0 26px 26px 0 !important;
    z-index: 60;
    transform: translateX(-105%) !important;
    transition: transform 0.25s ease;
    box-shadow: 0 20px 60px rgba(8, 19, 15, 0.45);
  }
  body.rg-nav-open #rg-sidebar { transform: translateX(0px) !important; }

  #rg-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(14, 31, 25, 0.42);
    z-index: 55;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.rg-nav-open #rg-backdrop { opacity: 1; pointer-events: auto; }

  .rg-hamburger { display: inline-flex !important; }

  /* Stack the brief's Schedule / Tasks / Follow-ups columns on narrow screens. */
  .rg-grid2 { grid-template-columns: 1fr !important; }
}

/* ── Entrance (Claude Design "Reign — Entrance", ported) ───────────────────────
   Dark landing gate. Keyframes from the handoff: the gull draws itself in, the
   wordmark/CTA rise, the glow + client mark fade, a sage pulse and ambient rain
   loop. One exit animation (rg-ent-out) plays when the gate is dismissed. */
@keyframes enDraw  { to { stroke-dashoffset: 0; } }
@keyframes enRise  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes enFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes enRain  { 0% { transform: translateY(-130%); opacity: 0; } 18% { opacity: .5; } 82% { opacity: .5; } 100% { transform: translateY(150%); opacity: 0; } }
@keyframes enPulse { 0% { transform: scale(.5); opacity: .4; } 70% { opacity: 0; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes rg-ent-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-12px); } }
#rg-entrance .rg-ent-leaving { animation: rg-ent-out 0.44s cubic-bezier(0.7, 0, 0.84, 0) forwards; }
.rg-ent2-cta:hover { background: #A8D0BF !important; transform: translateY(-1px); }
.rg-ent2-cta:focus-visible { outline: 2px solid #8FBAA9; outline-offset: 4px; }

/* Respect reduced motion: skip the entrance animations, but force the elements
   that animate in from opacity:0 to their resting state, and draw the gull. */
@media (prefers-reduced-motion: reduce) {
  #rg-entrance * { animation: none !important; }
  #rg-entrance .rg-ent2-stack > *, #rg-entrance .rg-ent2-foot { opacity: 1 !important; transform: none !important; }
  #rg-entrance .rg-ent2-gull { stroke-dashoffset: 0 !important; }
  #rg-entrance .rg-ent2-rain { display: none !important; }
}

/* Vendor Performance scorecard — expandable "View N issues" disclosure.
   Strip the native triangle (Chrome/Safari + Firefox) and rotate our caret on open. */
details.rg-vissues summary::-webkit-details-marker { display: none; }
details.rg-vissues summary::marker { content: ''; }
details.rg-vissues[open] .rg-vissues-car { transform: rotate(90deg); }

/* ── Events page (viewProjects) ────────────────────────────────────────────── */
/* Card hover lift + the date-filter segmented control. Inline styles cover the
   rest; these are the bits that need :hover / pseudo-states. */
.rg-event-card { transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.rg-event-card:hover { box-shadow: 0 8px 26px -14px rgba(14,31,25,0.30); border-color: #D2CCBD; }
.rg-seg { display: inline-flex; background: #F0EDE4; border: 1px solid #E0DBCF; border-radius: 11px; padding: 3px; gap: 2px; }
.rg-seg button { border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: #5E665F; padding: 7px 13px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background .14s ease, color .14s ease; }
.rg-seg button:hover { color: #16201B; }
.rg-seg button[aria-pressed="true"] { background: #FFFFFF; color: #16201B; box-shadow: 0 1px 3px rgba(14,31,25,0.10); }
.rg-evfilter { font-family: inherit; font-size: 13px; color: #16201B; border: 1px solid #D6D1C6; border-radius: 10px; padding: 8px 11px; background: #FFFFFF; cursor: pointer; outline: none; }
.rg-newevent summary::-webkit-details-marker { display: none; }
.rg-newevent summary::marker { content: ''; }
.rg-newevent[open] .rg-newevent-car { transform: rotate(90deg); }