/* Companion panel — see companion-panel.js for why it opens on intent, never on a timer. */

/* The inline ask. Deliberately quiet: it is an offer sitting next to the work, not a
   call to action competing with it. */
.ws-ask {
  margin-top: 14px;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  color: rgba(124, 196, 255, 0.85);
  background: none;
  border: 0;
  border-bottom: 1px dashed rgba(124, 196, 255, 0.4);
  padding: 2px 0;
  min-height: 44px;
  cursor: pointer;
}

.ws-ask:hover {
  color: #a5d8ff;
  border-bottom-color: rgba(165, 216, 255, 0.8);
}

/* ---------------------------------------------------------------------------
   Panel. Desktop: docked right rail — the single-column 860px content measure
   was chosen to leave this room. Mobile: a bottom sheet, NOT a squeezed rail.
   --------------------------------------------------------------------------- */
.cp-panel {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: #141a22;
  color: #eef2f7;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.cp-panel[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Desktop: a PERSISTENT column, not a floating card. A panel that appears over the
   page reads as a pop-up however politely it arrives; one that has always been
   there reads as part of the room. So the page reserves its width and the rail
   runs full height — it never covers anything and never announces itself.
   Every body child except the site header is inset, because the hero and the
   closing CTA live outside <main>.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root { --cp-rail: 380px; }

  /* The rail itself and the offer card must be excluded, or they inherit the very
     inset that exists to make room for them — the panel ends up 380px of padding
     inside a 380px column and its content collapses to nothing. */
  body.ifs-worksheets-page > *:not(.site-header):not(.cp-panel):not(.cp-offer):not(script) {
    padding-right: var(--cp-rail);
  }

  .cp-panel {
    top: 70px;                  /* under the site header, down to the floor */
    right: 0;
    bottom: 0;
    width: var(--cp-rail);
    border-radius: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: none;
  }

  /* Nothing to dismiss when the column is part of the layout. (The panel is left
     un-hidden by JS at this width rather than overridden here — a [hidden] element
     forced visible with CSS still reads as hidden to assistive tech.) */
  .cp-close { display: none; }

  /* At this width the stall prompt appears inside the rail, not as a card over the
     page — the whole point of a permanent column is that nothing has to pop up. */
  .cp-offer.cp-offer-inline {
    position: static;
    max-width: none;
    margin: 0 16px 12px;
    box-shadow: none;
    background: rgba(124, 196, 255, 0.1);
    border-color: rgba(124, 196, 255, 0.3);
    animation: none;
  }
}

@media (max-width: 1023px) {
  .cp-panel {
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 78vh;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
  }
}

.cp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cp-head strong { display: block; font-size: 0.98rem; }

.cp-sub {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}

.cp-close {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}

.cp-close:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   Cover — the resting state. A greeting bubble sitting over a live composer says
   "a conversation is waiting on you"; in a column that never leaves the screen
   that pressure would be permanent. This explains what is here and then waits.
   The starters matter as much as the button: a blank input in a sidebar has the
   same problem the worksheets had — nothing to actually do with it.
   --------------------------------------------------------------------------- */
.cp-cover {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
}

.cp-cover[hidden] { display: none; }

.cp-cover-lead {
  margin: 0 0 20px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.cp-cover-label {
  margin: 0 0 9px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.36);
}

.cp-starters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.cp-starter {
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: left;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  padding: 11px 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cp-starter:hover {
  background: rgba(124, 196, 255, 0.12);
  border-color: rgba(124, 196, 255, 0.4);
  color: #fff;
}

.cp-cover-start {
  margin-top: auto;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  color: #0a1a2e;
  background: #7cc4ff;
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  min-height: 44px;
  cursor: pointer;
}

.cp-cover-start:hover { background: #a5d8ff; }

/* Chat column fills the panel once activated. */
.cp-chat {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cp-chat[hidden] { display: none; }

.cp-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
}

.cp-msg {
  padding: 10px 13px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  max-width: 92%;
}

.cp-assistant {
  background: rgba(255, 255, 255, 0.06);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.cp-user {
  background: rgba(124, 196, 255, 0.16);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.cp-err { color: #ff9a9a; }

.cp-streaming::after {
  content: '▌';
  opacity: 0.6;
  animation: cp-blink 1s steps(2) infinite;
}

@keyframes cp-blink { 50% { opacity: 0; } }

/* What is being sent, named on screen. The worksheets promise answers stay on the
   device, so anything leaving it has to be visible and refusable. */
.cp-context {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 16px;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(124, 196, 255, 0.1);
  border: 1px solid rgba(124, 196, 255, 0.25);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
}

.cp-context[hidden] { display: none; }

.cp-detach {
  margin-left: auto;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.76rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

.cp-detach:hover { color: #fff; }

.cp-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px 6px;
  align-items: flex-end;
}

.cp-input {
  flex: 1 1 auto;
  font: inherit;
  font-size: 0.9rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 9px 11px;
  resize: none;
  max-height: 120px;
}

.cp-input:focus {
  outline: none;
  border-color: rgba(124, 196, 255, 0.7);
}

.cp-send {
  flex: 0 0 auto;
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  color: #0a1a2e;
  background: #7cc4ff;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
}

.cp-send:disabled { opacity: 0.5; cursor: not-allowed; }

.cp-foot {
  margin: 0;
  padding: 0 16px 12px;
  font-size: 0.7rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.35);
}

/* ---------------------------------------------------------------------------
   The single stall offer. Small, corner-anchored, self-dismissing after 20s —
   it must never behave like the page-load nudge it is replacing.
   --------------------------------------------------------------------------- */
.cp-offer {
  position: fixed;
  z-index: 75;
  right: 20px;
  bottom: 20px;
  max-width: 300px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #1b2129;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  animation: cp-rise 0.22s ease-out;
}

@keyframes cp-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.cp-offer p {
  margin: 0 0 12px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #eef2f7;
}

.cp-offer-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cp-offer-yes,
.cp-offer-no {
  font: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 9px 15px;
  min-height: 44px;
  cursor: pointer;
}

.cp-offer-yes {
  color: #0a1a2e;
  background: #7cc4ff;
  border: 0;
}

.cp-offer-no {
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

@media (max-width: 1023px) {
  .cp-offer { left: 16px; right: 16px; max-width: none; }
}

/* iOS Safari zooms the viewport when a focused field is under 16px, which on a bottom
   sheet yanks the whole page around mid-sentence. The page sets 16px for inputs under
   768px; .cp-input's own font-size was overriding it. */
@media (max-width: 768px) {
  .cp-input { font-size: 16px; }
}

/* ---------------------------------------------------------------------------
   Mobile launcher. Without this the Companion is only reachable from a button
   inside a worksheet item — you would have to scroll to a tool to discover it
   exists, and the cover card with its starters would never be seen at all. That
   is the same "present but invisible" failure as the nudge it replaces.
   It is a launcher, not a nudge: fixed, silent, never expands by itself, never
   covers the text column, and it disappears while the sheet is open.
   --------------------------------------------------------------------------- */
.cp-launcher {
  position: fixed;
  z-index: 70;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #eef2f7;
  background: rgba(20, 26, 34, 0.94);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(124, 196, 255, 0.4);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.cp-launcher-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7cc4ff;
  flex: 0 0 auto;
}

@media (min-width: 1024px) {
  .cp-launcher { display: none; }   /* the rail is always there instead */
}

body.cp-open .cp-launcher { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cp-offer { animation: none; }
  .cp-streaming::after { animation: none; }
}