/* =========================================================================
   Knowledge Center v2 — application shell
   -------------------------------------------------------------------------
   Reset, page chrome and the header that every v2 screen shares. The header
   markup is generated by shell.js so the gear popover, role gating and
   active-section highlight stay identical everywhere; this file only styles
   it.

   Navigation model (from the design): the chat IS the home. There is no
   sidebar and no second nav — the gear popover doubles as the admin section
   switcher, and you always get back to the chat via logo / Nuova chat /
   Cronologia.
   ========================================================================= */

/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* `hidden` is the toggle used throughout v2, and the UA rule that implements
   it loses to any component rule that sets `display`. Make it win once here
   instead of remembering a `[hidden]` escape hatch on every flex component. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

/* dvh, not vh: on iOS `100vh` is the height the page would have if Safari's
   toolbars were hidden, so anything measured against it hangs below the screen
   while the toolbars are up — that is where the chat composer went. The vh
   line stays first as the fallback for browsers without dvh. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--kc-canvas);
  color: var(--kc-text);
  font-family: var(--kc-font);
  font-size: var(--kc-fs-base);
  -webkit-font-smoothing: antialiased;
}

input, textarea, select, button { font-family: inherit; }
button { cursor: pointer; }
a { color: var(--kc-link); text-decoration: none; }
a:hover { color: var(--kc-link-hover); }
/* A placeholder is text somebody has to read to know what goes in the
   field. It sat at 2.3:1. Real values are eight times darker, so it
   still reads as empty. */
::placeholder { color: var(--kc-faint); }

/* Focus: never remove the ring without a replacement. */
:focus-visible {
  outline: 2px solid var(--kc-accent);
  outline-offset: 2px;
}

/* The theme boot stub hides the document until tenant-theme.js resolves, so
   the tenant's colours and logo land before first paint. */
html[data-pre-theme] body { visibility: hidden; }

/* ---------- App frame ----------------------------------------------------- */
/* Screens that own their scrolling (chat) opt into .kc-app-fixed; document
   pages (history, admin) scroll normally. */
.kc-app-fixed {
  /* body's own min-height would win over the height below and stretch the
     frame back to the full viewport — exactly what we are trying not to do. */
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  /* Set by shell.js from the visual viewport: the only measurement that is
     right while Safari's toolbars — or the keyboard — are covering part of
     the screen. Falls back to dvh, then vh. */
  height: var(--kc-vvh, 100dvh);
  overflow: hidden;
}
.kc-app-fixed .kc-main {
  flex: 1;
  min-height: 0;
}
.kc-app {
  display: flex;
  flex-direction: column;
}

/* ---------- Header -------------------------------------------------------- */
.kc-header {
  height: var(--kc-header-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--kc-gutter);
  position: relative;
  z-index: 20;
}

.kc-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
}
.kc-header__logo {
  height: 20px;
  width: auto;
  max-width: 160px;
  display: block;
  object-fit: contain;
}
/* Written only next to a mark that does not already contain the name. Sized
   off the mark it stands beside, so the two read as one lockup. */
.kc-header__tenant {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--kc-text);
  white-space: nowrap;
}
.kc-header__tenant[hidden] { display: none; }

.kc-header__product {
  font-size: var(--kc-fs-13);
  font-weight: 400;
  color: var(--kc-muted);
  white-space: nowrap;
}

/* Only ever visible in the offline design demo. Quiet enough not to fight the
   page, loud enough that nobody reports a mockup status as a real one. */
.kc-header__demo {
  flex: none;
  padding: 3px 9px;
  border-radius: var(--kc-r-pill);
  background: var(--kc-danger-soft);
  color: var(--kc-danger);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
}

.kc-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kc-header__divider {
  width: 1px;
  height: 18px;
  background: var(--kc-divider);
  margin: 0 4px;
}

/* ---------- Pills --------------------------------------------------------- */
.kc-pill {
  white-space: nowrap;
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: var(--kc-r-pill);
  background: var(--kc-surface);
  color: var(--kc-text);
  font-size: var(--kc-fs-13);
  font-weight: 500;
  box-shadow: var(--kc-sh-pill);
  transition: box-shadow var(--kc-dur) var(--kc-ease),
              background var(--kc-dur) var(--kc-ease),
              color var(--kc-dur) var(--kc-ease);
}
.kc-pill:hover { box-shadow: var(--kc-sh-pill-hi); }

/* Secondary pill: same shape, quieter label (Cronologia). */
.kc-pill--quiet { color: var(--kc-text-2); }

/* Active section pill: flat, seated into the canvas. */
.kc-pill--on {
  background: var(--kc-segmented);
  color: var(--kc-text);
  box-shadow: none;
}
.kc-pill--on:hover { box-shadow: none; }

/* Icon-only pill (gear, mobile actions). */
.kc-icon-pill {
  white-space: nowrap;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--kc-r-pill);
  background: var(--kc-surface);
  color: var(--kc-text-2);
  box-shadow: var(--kc-sh-pill);
  transition: background var(--kc-dur) var(--kc-ease),
              color var(--kc-dur) var(--kc-ease),
              box-shadow var(--kc-dur) var(--kc-ease);
}
.kc-icon-pill:hover { box-shadow: var(--kc-sh-pill-hi); }

/* Gear while its popover is open, or while an admin section is on screen —
   it reads as "you are in administration". */
.kc-icon-pill--on {
  background: var(--kc-text);
  color: var(--kc-on-dark);
  box-shadow: none;
}
.kc-icon-pill--on:hover { box-shadow: none; }

/* Primary black pill (Salva, + Nuovo termine, Carica).
   Same height and padding as .kc-pill: every control in the chrome sits on
   one 36px line, so a primary action next to a pill or a search field reads
   as part of the same row instead of a taller object dropped into it. */
.kc-btn-primary {
  white-space: nowrap;
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: var(--kc-r-pill);
  background: var(--kc-text);
  color: var(--kc-on-dark);
  font-size: var(--kc-fs-13);
  font-weight: 500;
  transition: background var(--kc-dur) var(--kc-ease);
}
.kc-btn-primary:hover { background: #3a3a3c; }
.kc-btn-primary:disabled { opacity: .5; cursor: default; }
/* For the button that ends something: deactivating an account, deleting a
   manual. Same shape, so the dialog still reads as one decision — the colour
   is there to make you look once more, not to shout. */
.kc-btn--danger { background: var(--kc-danger); }
.kc-btn--danger:hover { background: #b81a20; }

/* ---------- Avatar -------------------------------------------------------- */
.kc-avatar {
  white-space: nowrap;
  width: 36px;
  height: 36px;
  border-radius: var(--kc-r-pill);
  border: 0;
  background: var(--kc-text);
  color: var(--kc-on-dark);
  font-size: var(--kc-fs-11);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Popovers ------------------------------------------------------ */
.kc-pop-anchor { position: relative; }

.kc-popover {
  position: absolute;
  top: 44px;
  right: 0;
  width: 232px;
  background: var(--kc-surface);
  border-radius: var(--kc-r-popover);
  box-shadow: var(--kc-sh-popover);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: 8px;
  display: flex;
  flex-direction: column;
  z-index: 30;
}
.kc-popover[hidden] { display: none; }

.kc-popover__kicker {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--kc-faint);
  padding: 8px 12px 6px;
}
.kc-popover__caption {
  font-size: var(--kc-fs-11);
  color: var(--kc-faint);
  padding: 8px 12px 6px;
}
.kc-popover__sep {
  height: 1px;
  background: var(--kc-hairline);
  margin: 4px 12px;
}
.kc-popover__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--kc-r-menu);
  background: transparent;
  color: var(--kc-text);
  font-size: var(--kc-fs-sm);
  font-weight: 400;
  text-align: left;
  transition: background var(--kc-dur) var(--kc-ease);
}
.kc-popover__item:hover { background: var(--kc-field); }
.kc-popover__item--on {
  background: var(--kc-field);
  font-weight: 600;
}
.kc-popover__item--danger { color: var(--kc-danger); }
.kc-popover__item--danger:hover { background: var(--kc-danger-soft); }

.kc-popover__identity {
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.kc-popover__name  { font-size: var(--kc-fs-sm); font-weight: 600; }
.kc-popover__email { font-size: var(--kc-fs-12); color: var(--kc-muted); }
.kc-popover__role  { font-size: 11.5px; color: var(--kc-faint); }

/* Click-anywhere-to-close layer under any open popover.
   z-index must stay BELOW .kc-header: the header creates its own stacking
   context (position:relative + z-index), so a popover nested inside it can
   never out-stack a scrim painted at a higher document level — the scrim
   would swallow every click on the menu. */
.kc-scrim {
  position: fixed;
  inset: 0;
  background: var(--kc-scrim);
  z-index: 15;
  border: 0;
  padding: 0;
}
.kc-scrim--clear { background: transparent; }
.kc-scrim[hidden] { display: none; }

/* ---------- Page layout (internal pages) ---------------------------------- */
/* One container everywhere, and it is the SAME container as the header:
   same gutters, no max width. Content therefore starts under the logo and
   ends under the avatar on any screen — which is the alignment rule the
   whole layout is read against. A capped width left a dead margin on the
   right that made every card look like it had stopped short. */
.kc-page {
  width: 100%;
  padding: 0 var(--kc-gutter) var(--kc-gutter);
}
.kc-page__inner {
  width: 100%;
}
.kc-page__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0 20px;
}
/* Whatever follows the title — actions, a search field, a live badge — is
   pushed to the right edge, and anything after that sits beside it. One rule
   instead of every page remembering which of its elements claims the space. */
.kc-page__head > .kc-page__title + * { margin-left: auto; }
.kc-page__title {
  margin: 0;
  font-size: var(--kc-fs-title);
  font-weight: 600;
  letter-spacing: var(--kc-ls-title);
}
.kc-page__count {
  font-size: var(--kc-fs-13);
  color: var(--kc-muted);
  white-space: nowrap;
}

.kc-card {
  background: var(--kc-surface);
  border-radius: var(--kc-r-card);
  box-shadow: var(--kc-sh-card);
}

/* ---------- Shared form + overlay primitives ------------------------------ */
/* These started life inside login, chat and history. They are the same
   shapes everywhere — a field, a modal, a search pill — so they live here
   rather than being re-cut per page and drifting apart. */

/* Field: no borders, tinted surface, 12px radius. */
.kc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kc-field label {
  font-size: var(--kc-fs-12);
  font-weight: 500;
  color: var(--kc-text-2);
}
.kc-field input {
  height: 46px;
  border: 0;
  border-radius: var(--kc-r-input);
  background: var(--kc-field);
  padding: 0 16px;
  font-size: var(--kc-fs-base);
  color: var(--kc-text);
  outline: none;
  transition: box-shadow var(--kc-dur) var(--kc-ease);
}
.kc-field input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--kc-accent);
}


/* Search pill: sits on a page title row, at the right edge — the list is
   the content, the filter is a tool. */
.kc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--kc-r-pill);
  background: var(--kc-surface);
  box-shadow: var(--kc-sh-pill);
  color: var(--kc-glyph);
  width: min(280px, 40vw);
}
.kc-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-size: var(--kc-fs-13);
  color: var(--kc-text);
}
.kc-search input::-webkit-search-cancel-button { -webkit-appearance: none; }


/* Modal ------------------------------------------------------------------- */
.kc-modal {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--kc-scrim);
  display: grid;
  place-items: center;
  padding: 20px;
}
.kc-modal[hidden] { display: none; }
.kc-modal__card {
  width: 380px;
  max-width: 100%;
  background: var(--kc-surface);
  border-radius: var(--kc-r-modal);
  box-shadow: var(--kc-sh-modal);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* The card is focused when the dialog opens (see confirmDialog) so that focus
   leaves the page behind. It is not in the tab order, so it never needs a ring
   of its own. */
.kc-modal__card:focus { outline: none; }
.kc-modal__title {
  margin: 0;
  font-size: var(--kc-fs-lg);
  font-weight: 600;
  letter-spacing: var(--kc-ls-title);
}
.kc-modal__intro {
  margin: 0;
  font-size: var(--kc-fs-13);
  line-height: 1.5;
  color: var(--kc-muted);
}
.kc-modal__error {
  font-size: 12.5px;
  color: var(--kc-danger);
}
.kc-modal__error[hidden] { display: none; }
.kc-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.kc-modal__ghost {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--kc-r-pill);
  background: var(--kc-field);
  color: var(--kc-text);
  font-size: var(--kc-fs-13);
  font-weight: 500;
  transition: background var(--kc-dur) var(--kc-ease);
}
.kc-modal__ghost:hover { background: var(--kc-field-hover); }


/* ---------- Toast --------------------------------------------------------- */
.kc-toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + var(--kc-vv-bottom, 0px));
  transform: translateX(-50%) translateY(8px);
  background: var(--kc-text);
  color: var(--kc-on-dark);
  font-size: var(--kc-fs-13);
  padding: 10px 18px;
  border-radius: var(--kc-r-pill);
  box-shadow: var(--kc-sh-pager);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--kc-dur) var(--kc-ease),
              transform var(--kc-dur) var(--kc-ease);
  z-index: 60;
}
.kc-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Mobile -------------------------------------------------------- */
/* The desktop rule is "one 36px line for every inline control". A finger is
   not a cursor: below the breakpoint the same controls grow to 44px, which is
   the smallest target that can be hit reliably. It looks like the same design
   because the shape and the spacing are unchanged — only the touch area grows. */
@media (max-width: 720px) {
  :root { --kc-gutter: 16px; --kc-header-h: 72px; }

  .kc-header { gap: 8px; }
  .kc-header__product { display: none; }
  .kc-pill {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .kc-pill__label { display: none; }
  .kc-icon-pill,
  .kc-avatar { width: 44px; height: 44px; }
  /* The two dialog buttons are one pair and grow together. Listing only the
     primary here left the ghost 4px narrower in its padding — the same kind of
     drift that comes from touching one half of a component. */
  .kc-btn-primary,
  .kc-modal__ghost { height: 44px; padding: 0 20px; }
  .kc-search { height: 44px; width: 100%; }
  /* The pill is what the eye aims at; without this the field inside it is
     21px tall and half the taps land on nothing. */
  .kc-search input { align-self: stretch; }
  /* The logo is the way back to the chat — it needs a tappable height, not
     just the height of the artwork. */
  .kc-header__brand { min-height: 44px; }
  .kc-card { border-radius: var(--kc-r-card-m); }

  /* A page title and its primary action can't share one line on a phone —
     let them stack instead of squeezing the title to two words. */
  /* The action stays on the title's line and keeps the right edge, exactly as
     on a wide screen; wrapping is only the fallback for when it genuinely
     does not fit. */
  .kc-page__head { flex-wrap: wrap; align-items: center; }
  .kc-page__head > .kc-page__title { min-width: 0; }
  .kc-page__head > .kc-page__title + * { flex: none; }

  /* A menu anchored to a 44px pill would hang off the top of the screen with
     its items out of thumb reach. Same list, docked to the bottom edge where
     the hand already is. */
  .kc-popover {
    position: fixed;
    top: auto;
    right: 0;
    /* Not 0: on iOS that is the bottom of a viewport that continues behind
       Safari's toolbar, and the menu docks underneath it. */
    bottom: var(--kc-vv-bottom, 0px);
    left: 0;
    width: auto;
    border: 0;
    border-radius: var(--kc-r-sheet) var(--kc-r-sheet) 0 0;
    padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .18);
  }
  .kc-popover__item { min-height: 48px; padding: 12px; }
  .kc-popover__kicker { padding: 10px 12px 6px; }
  .kc-popover__sep { margin: 6px 12px; }

  /* Modals are sheets too: a centred card on a phone leaves a strip of scrim
     top and bottom and pushes the fields under the keyboard. */
  .kc-modal { place-items: end stretch; padding: 0 0 var(--kc-vv-bottom, 0px); }
  .kc-modal__card {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    border-radius: var(--kc-r-sheet) var(--kc-r-sheet) 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .kc-modal__actions { flex-wrap: wrap; }
  .kc-modal__actions > * { flex: 1 1 auto; min-height: 44px; }
  /* 16px is not a style choice: iOS zooms the page in on any focused field
     smaller than that, and never zooms back out. */
  .kc-field input,
  .kc-field select,
  .kc-field textarea,
  .kc-search input { font-size: 16px; }
  .kc-field input,
  .kc-field select { min-height: 44px; }
}

/* Small phones (SE-class, 320pt). Four 44px controls plus a wordmark do not
   fit at the normal gutter — the logo gives way, not the touch targets. */
@media (max-width: 380px) {
  :root { --kc-gutter: 12px; }
  .kc-header { gap: 6px; }
  .kc-header__actions { gap: 6px; }
  .kc-header__divider { margin: 0 2px; }
  .kc-header__logo { max-width: 80px; }
}

/* Anything revealed by hover is unreachable on a touch screen: there is no
   hover state to enter, so the control simply never appears. */
@media (hover: none) {
  .kc-hover-reveal { opacity: 1 !important; }
}