/* =============================================================================
   popover.css — inline-kommentaren: ett flytande kort vid pinnen.
   =============================================================================

   Lager 4 (komponent). Importerar bara theme.css, aldrig app.css och aldrig
   en annan komponent. Alla färger kommer ur var(--color-*) / var(--note-*),
   alla tider ur var(--dur-*) — en hårdkodad ms-siffra kringgår
   prefers-reduced-motion, eftersom nollningen sker centralt på tokenen.

   Klassnamnen är prefixade `.pv-`. Prefixet är komponentens, inte
   tillståndets: `.is-open` utan prefix är ett namn tre filer vill ha, och den
   som laddas sist vinner. Tillstånd skrivs därför alltid sammansatt,
   `.pv-card.is-resolved`.
   ========================================================================== */

@import "./theme.css";

.pv-root {
  /* Mått och lägen. --pv-edge MÅSTE matcha EDGE i popover.js — kortet klampas
     i JS och ritas här, och två olika tal ger en pil som pekar bredvid. */
  --pv-edge: 12px;
  --pv-w: 344px;
  --pv-arrow: 10px;

  /* Pilens läge längs kortets kant. Sätts av popover.js vid varje
     omräkning; värdena här är bara ett rimligt utgångsläge. */
  --pv-ax: 50%;
  --pv-ay: 50%;

  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
}

.pv-root[hidden] { display: none; }

.pv-root *,
.pv-root *::before,
.pv-root *::after { box-sizing: border-box; }

.pv-scrim {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  animation: annot-fade var(--dur-base) var(--ease-out) both;
}

/* --------------------------------------------------------------- kortet */

.pv-card {
  position: absolute;
  left: var(--pv-edge);
  top: var(--pv-edge);
  width: min(var(--pv-w), calc(100vw - var(--pv-edge) * 2));
  max-height: min(560px, calc(100vh - var(--pv-edge) * 2));
  display: flex;
  flex-direction: column;
  min-height: 0;
  pointer-events: auto;

  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;

  animation: annot-rise var(--dur-base) var(--ease-out) both;
}

.pv-card:focus { outline: none; }

.pv-card button,
.pv-card input,
.pv-card textarea {
  font: inherit;
  color: inherit;
}

/* ------------------------------------------------------------------ pilen

   En roterad kvadrat med två kanter kvar — den hörnan pekar. Vilket hörn som
   pekar åt vilket håll efter rotate(45deg) är inte självklart: nedre vänstra
   hörnet hamnar till vänster, övre högra till höger. Därför de fyra reglerna
   nedan, en per sida, i stället för en generisk. */

.pv-arrow {
  position: absolute;
  width: var(--pv-arrow);
  height: var(--pv-arrow);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  transform: rotate(45deg);
  pointer-events: none;
}

.pv-arrow[hidden],
.pv-card[data-side="none"] .pv-arrow { display: none; }

.pv-card[data-side="right"] .pv-arrow {
  left: calc(var(--pv-arrow) / -2 - 1px);
  top: var(--pv-ay);
  margin-top: calc(var(--pv-arrow) / -2);
  border-top-color: transparent;
  border-right-color: transparent;
}

.pv-card[data-side="left"] .pv-arrow {
  right: calc(var(--pv-arrow) / -2 - 1px);
  top: var(--pv-ay);
  margin-top: calc(var(--pv-arrow) / -2);
  border-bottom-color: transparent;
  border-left-color: transparent;
}

.pv-card[data-side="bottom"] .pv-arrow {
  top: calc(var(--pv-arrow) / -2 - 1px);
  left: var(--pv-ax);
  margin-left: calc(var(--pv-arrow) / -2);
  border-right-color: transparent;
  border-bottom-color: transparent;
}

.pv-card[data-side="top"] .pv-arrow {
  bottom: calc(var(--pv-arrow) / -2 - 1px);
  left: var(--pv-ax);
  margin-left: calc(var(--pv-arrow) / -2);
  border-top-color: transparent;
  border-left-color: transparent;
}

/* ------------------------------------------------------------- handtaget

   Bara i bottenarksläge. Rent visuellt — stängningen sitter på krysset, på
   scrimen och på Esc, inte på ett drag man måste gissa sig till. */

.pv-grip {
  flex: 0 0 auto;
  align-self: center;
  width: 36px;
  height: 4px;
  margin: var(--space-2) 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-line-2);
}

.pv-grip[hidden] { display: none; }

/* ------------------------------------------------------------- rubrikrad */

.pv-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  flex: 0 0 auto;
  min-width: 0;
}

.pv-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--note-issue);
}
.pv-dot[data-type="opportunity"] { background: var(--note-opportunity); }
.pv-dot[data-type="question"]    { background: var(--note-question); }
.pv-dot[data-type="heuristic"]   { background: var(--note-heuristic); }

.pv-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv-card.is-resolved .pv-title {
  color: var(--color-ink-muted);
  text-decoration: line-through;
}

.pv-tag {
  flex: 0 0 auto;
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.pv-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ----------------------------------------------------------- ikonknappar

   28 px synligt, 44 px träffyta via ett osynligt ::before med negativ inset:
   28 + 8 + 8 = 44. Att i stället sätta min-width: 44px spräcker rubrikraden
   på 390 px — tre knappar á 44 plus rubrik får inte plats.

   Gapet mellan knapparna är space-2 (8px) = 2 × inseten, alltså precis så
   mycket att träffytorna inte överlappar. Krymps gapet måste inseten med. */

.pv-ibtn {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.pv-ibtn::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.pv-ibtn:hover { background: var(--color-surface-2); color: var(--color-ink); }
.pv-ibtn.is-on { color: var(--color-success); }
.pv-ibtn.is-danger:hover { color: var(--color-danger); background: var(--color-danger-soft); }
.pv-ibtn svg { width: 16px; height: 16px; display: block; }

/* -------------------------------------------------------- kommentarslista */

.pv-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pv-empty {
  margin: 0;
  padding: var(--space-2) 0;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.pv-c { min-width: 0; }
.pv-c.is-pending { opacity: 0.6; }

.pv-c-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* Avataren tintas ur paletten, inte ur en uträknad hsl. En färg som räknas
   fram i JS följer inte med när temat byts och kan hamna var som helst i
   kontrastskalan — sex semantiska ytor räcker för att skilja personer åt. */
.pv-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.pv-avatar[data-tint="1"] { background: var(--color-info-soft); }
.pv-avatar[data-tint="2"] { background: var(--color-success-soft); }
.pv-avatar[data-tint="3"] { background: var(--color-warning-soft); }
.pv-avatar[data-tint="4"] { background: var(--color-brand-soft); }
.pv-avatar[data-tint="5"] { background: var(--color-danger-soft); }

.pv-c-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-medium);
}

.pv-time {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--color-faint);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.pv-c-body {
  margin-top: var(--space-1);
  padding-left: calc(22px + var(--space-2));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- bilagor */

.pv-atts {
  margin-top: var(--space-2);
  padding-left: calc(22px + var(--space-2));
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pv-att {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  max-width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  background: var(--color-surface-2);
  color: var(--color-ink-muted);
  text-decoration: none;
  overflow: hidden;
}

.pv-att-img { padding: 0; border-color: transparent; }
.pv-att-img img {
  display: block;
  max-width: 160px;
  max-height: 120px;
  object-fit: cover;
}

.pv-att-video {
  max-width: 100%;
  border-radius: var(--radius-md);
}

.pv-att-file { padding: var(--space-1-5) var(--space-2); font-size: var(--text-xs); }
.pv-att-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv-ico { display: inline-flex; }
.pv-ico svg { width: 14px; height: 14px; display: block; }

/* ------------------------------------------------------------ svarsfältet */

/* Formuläret bor i en egen värd så att omritningen kan byta ut hela
   <form> utan att röra kortets flex-fördelning. */
.pv-formhost {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pv-composer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-3) var(--space-3);
  border-top: 1px solid var(--color-line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.pv-composer.is-drop { background: var(--color-accent-soft); }

/* Släpp-etiketten syns bara medan något dras över fältet. Ett fast synligt
   råd tar plats på 390 px utan att någonsin behövas av den som redan vet. */
.pv-drop {
  display: none;
  padding-top: var(--space-1);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.pv-composer.is-drop .pv-drop { display: block; }

.pv-input {
  width: 100%;
  min-height: 38px;
  max-height: 140px;
  resize: none;
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.pv-input::placeholder { color: var(--color-faint); }

.pv-file { display: none; }

.pv-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pv-hint {
  color: var(--color-faint);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv-spacer { flex: 1 1 auto; }

.pv-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.pv-btn-label { white-space: nowrap; }

.pv-btn::before { content: ""; position: absolute; inset: -6px; }
.pv-btn:active { transform: scale(0.97); }
.pv-btn[disabled] { opacity: 0.5; cursor: default; }

.pv-btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

/* ------------------------------------------------------------- utkastet */

.pv-draft {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pv-draft[hidden] { display: none; }

.pv-dchip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  max-width: 100%;
  padding: var(--space-1) var(--space-1-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  font-size: var(--text-xs);
}

.pv-dchip.is-error { border-color: var(--color-danger); }

.pv-dthumb {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-bg);
}

.pv-dthumb-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-muted);
}
.pv-dthumb-file svg { width: 14px; height: 14px; }

.pv-dplay {
  position: absolute;
  left: var(--space-2);
  top: 50%;
  margin-top: -6px;
  color: var(--color-surface);
  pointer-events: none;
}
.pv-dplay svg { width: 12px; height: 12px; display: block; }

.pv-dname {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-ink-muted);
}

.pv-derr { color: var(--color-danger); }

.pv-dspin {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-line);
  border-top-color: var(--color-accent);
  animation: pv-spin var(--dur-slower) linear infinite;
}

@keyframes pv-spin { to { transform: rotate(360deg); } }

/* Knappen som tar bort en bilaga sitter tätt intill grannchipet. Ett ::before
   med −8 hade lagt sig ovanpå nästa chip, så den här får en mindre inset och
   en större synlig yta i stället. */
.pv-ibtn.pv-dx { width: 20px; height: 20px; }
.pv-ibtn.pv-dx::before { inset: -6px; }
.pv-ibtn.pv-dx svg { width: 12px; height: 12px; }

/* ---------------------------------------------------------------- toast */

.pv-toast {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-surface);
  font-size: var(--text-xs);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.pv-toast.is-on { opacity: 1; transform: none; }

/* ------------------------------------------------------------ pekvänligt

   Inmatningsmetod, inte skärmbredd: en iPad i liggande läge är 1024 px och
   styrs med ett finger. Knappen växer synligt, inseten krymper — summan är
   fortfarande 44. Ändras det ena utan det andra krymper träffytan tyst. */

@media (pointer: coarse) {
  .pv-ibtn { width: 34px; height: 34px; }
  .pv-ibtn::before { inset: -5px; }
  .pv-btn { padding-block: var(--space-2-5); }
  .pv-input { min-height: 44px; }
}

/* ------------------------------------------------------------- bottenark

   Under 820 px slutar kortet peka på pinnen: på den bredden täcker det
   ändå halva bilden, och en pil mot något som ligger bakom arket hjälper
   ingen. Samma brytpunkt som comments.js BREAKPOINTS.phone. */

@media (max-width: 819px) {
  .pv-root.is-sheet .pv-card {
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: min(82vh, calc(100vh - var(--space-10)));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: 0;
    padding-bottom: var(--safe-b);
    animation: pv-sheet-in var(--dur-slow) var(--ease-out) both;
  }

  .pv-root.is-sheet .pv-arrow { display: none; }
  .pv-root.is-sheet .pv-composer { border-radius: 0; }
  .pv-root.is-sheet .pv-hint { display: none; }
}

@keyframes pv-sheet-in {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}

/* Rörelse stängs av var för sig: en animation med noll duration hoppar
   fortfarande till slutläget. */
@media (prefers-reduced-motion: reduce) {
  .pv-card,
  .pv-scrim,
  .pv-root.is-sheet .pv-card { animation: none; }
  .pv-btn:active { transform: none; }
  .pv-dspin { animation: none; }
}