/* Narrow Sea — "Ask the desk": the site-wide Bridge drawer (assets/js/desk.js).
   Loaded on every layout: site page. Tokens and keyframes come from ns.css; everything here is prefixed desk. */

/* ---------- launcher ---------- */
.desk-launch {
  position: fixed; right: 24px; bottom: calc(24px + var(--desk-lift, 0px)); z-index: 50;
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; min-width: 44px; padding: 0 20px 0 16px;
  background: var(--navy); color: var(--white);
  border: 1px solid var(--gold); border-radius: var(--radius);
  font: 600 13px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; cursor: pointer;
  box-shadow: 0 10px 28px rgba(7, 28, 43, .24);
  transition: background-color .15s, opacity .2s;   /* visibility returns at once, so focus can land on close */
}
.desk-launch:hover { background: var(--ocean); }
.desk-launch:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white), 0 10px 28px rgba(7, 28, 43, .24); }
.desk-launch__ico { width: 18px; height: 18px; flex: none; color: var(--gold); }
.desk-launch.is-tucked { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility 0s linear .2s; }
html.desk-open .desk-launch { visibility: hidden; }
@media (max-width: 600px) {
  .desk-launch { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom) + var(--desk-lift, 0px)); height: 46px; padding: 0 16px 0 14px; }
}

/* ---------- drawer ---------- */
.desk { position: fixed; inset: 0; z-index: 90; }
.desk__scrim { position: absolute; inset: 0; background: rgba(7, 28, 43, .45); opacity: 0; transition: opacity .2s ease-out; }
.desk__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(448px, 100%);
  display: flex; flex-direction: column; background: var(--off); outline: 0;
  box-shadow: -24px 0 64px rgba(7, 28, 43, .22);
  transform: translateX(24px); opacity: 0; transition: transform .22s ease-out, opacity .22s ease-out;
}
.desk.is-open .desk__scrim { opacity: 1; }
.desk.is-open .desk__panel { transform: none; opacity: 1; }

.desk__head {
  flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  background: var(--navy); color: var(--white); border-bottom: 1px solid var(--gold); padding: 24px 16px 22px 32px;
}
@media (min-width: 1101px) { .desk__head { min-height: 105px; align-items: center; padding-top: 16px; padding-bottom: 16px; } }   /* lines up with the nav rule */
.desk__eyebrow { font: 600 11px/1.6 var(--sans); color: var(--gold); letter-spacing: .02em; }
.desk__title { font: 400 34px/1.08 var(--serif); color: var(--white); margin-top: 6px; }
.desk__x {
  flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius); color: var(--mist); cursor: pointer;
}
.desk__x:hover { color: var(--white); }
.desk__x:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; }
.desk__x svg { width: 18px; height: 18px; }

.desk__log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  position: relative; padding: 28px 32px 24px; display: flex; flex-direction: column; gap: 24px; outline: 0;
}
.desk__lead { font: 400 22px/1.3 var(--serif); color: var(--navy); }
.desk__quick { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.desk__q {
  width: 100%; min-height: 52px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  font: 600 13px/1.3 var(--sans); color: var(--navy); text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color .15s;
}
.desk__q:hover { border-color: var(--navy); }
.desk__q svg { width: 16px; height: 16px; flex: none; color: var(--slate); }
.desk__q:hover svg { color: var(--navy); }

/* ---------- conversation ---------- */
.desk__msgs { display: flex; flex-direction: column; gap: 16px; }
.desk__msgs:empty, .desk__slot:empty { display: none; }
.desk__msg { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.desk__who { font: 600 11px/1.6 var(--sans); color: var(--slate); letter-spacing: .02em; }
.desk__text { font: 400 14px/1.6 var(--sans); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.desk__card {
  background: var(--white); border: 1px solid var(--line); border-left: 2px solid var(--gold);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
}
.desk__msg--err .desk__card { border-left-color: var(--err); }
.desk__msg--ok .desk__card { border-left-color: var(--ok); }
.desk__msg--you { align-self: flex-end; align-items: flex-end; max-width: 88%; }
.desk__msg--you .desk__text { background: var(--navy); color: var(--white); padding: 12px 16px; border-radius: var(--radius); }
.desk__msg--you .desk__text.is-clamped { max-height: calc(14px * 1.6 * 6 + 24px); overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.desk__more { background: none; border: 0; padding: 10px 0; min-height: 44px; font: 600 12px/1 var(--sans); color: var(--navy); cursor: pointer; }
.desk__more:hover { text-decoration: underline; }

.desk__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.desk__act {
  min-height: 44px; padding: 10px 14px; display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--slate); border-radius: var(--radius);
  font: 600 13px/1.3 var(--sans); color: var(--navy); text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.desk__act:hover { border-color: var(--navy); }
.desk__act svg { width: 14px; height: 14px; flex: none; }
.desk__act--primary { background: var(--gold); border-color: var(--gold); }
.desk__act--primary:hover { background: #b8955c; border-color: #b8955c; }

.desk__readh { font: 600 11px/1.6 var(--sans); color: var(--slate); letter-spacing: .02em; }
.desk__read { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: -8px 0 0; font: 400 13px/1.5 var(--sans); }
.desk__read dt { color: var(--slate); }
.desk__read dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.desk__missing { font: 400 12px/1.6 var(--sans); color: var(--slate); }

.desk__typing { display: flex; align-items: center; gap: 8px; font: 400 13px/1.6 var(--sans); color: var(--slate); }
.desk__typing::before { content: "◌"; display: inline-block; color: var(--gold); animation: ns-spin 1s linear infinite; }

/* ---------- talk to an underwriter ---------- */
.desk__uw {
  background: var(--white); border: 1px solid var(--line); border-left: 2px solid var(--gold);
  padding: 20px 18px; display: flex; flex-direction: column; gap: 14px;
}
.desk__uw-t { font: 400 24px/1.15 var(--serif); color: var(--navy); }
.desk__f { display: flex; flex-direction: column; gap: 6px; }
.desk__f > label { font: 600 12px/1.6 var(--sans); color: var(--ink); }
.desk__f .input[aria-invalid="true"] { border-color: var(--err); }
.desk__err { font: 400 12px/1.5 var(--sans); color: var(--err); }
.desk__err:empty { display: none; }
.desk__uw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 4px; }
.desk__uw-row .btn--text { padding-left: 8px; padding-right: 8px; }
.desk__uw .notice { padding: 14px 16px; }
.desk__uw .notice a { color: var(--navy); font-weight: 600; }

/* ---------- composer ---------- */
.desk__compose {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 12px;
  background: var(--white); border-top: 1px solid var(--line); padding: 16px 24px 14px;
}
.desk__in {
  display: block; width: 100%; min-height: 48px; max-height: 176px; resize: none;
  background: var(--off); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; font: 400 14px/1.5 var(--sans); color: var(--ink);
}
.desk__in::placeholder { color: #75868f; }
.desk__in:focus { outline: 2px solid var(--navy); outline-offset: -1px; background: var(--white); }
.desk__in.is-paste { min-height: 168px; }
.desk__compose .btn { height: 48px; }
.desk__fine { grid-column: 1 / -1; font: 400 11px/1.6 var(--sans); color: var(--slate); }

/* ---------- mobile: full-screen sheet ---------- */
@media (max-width: 600px) {
  .desk__panel { width: 100%; box-shadow: none; transform: translateY(24px); }
  .desk__head { padding: 16px 8px 16px 24px; }
  .desk__title { font-size: 28px; margin-top: 4px; }
  .desk__log { padding: 24px 24px 20px; gap: 20px; }
  .desk__lead { font-size: 21px; }
  .desk__compose { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .desk__compose .btn { padding: 0 18px; }
  .desk__in, .desk__f .input { font-size: 16px; }   /* no zoom on focus (iOS) */
  .desk__msg--you { max-width: 92%; }
  html.desk-open, html.desk-open body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .desk__panel, .desk__scrim, .desk-launch { transition: none; }
  .desk__typing::before { animation: none; }
}
@media print { .desk-launch, .desk { display: none !important; } }

/* Toasts sit at the top: the bottom edge belongs to the launcher, the calculator's Continue bar and the submit row
   (QA 31 Oct: a toast covered "Ask the desk" and, on phones, "Continue"). */
.toast-host { top: 24px; bottom: auto; }
@media (max-width: 600px) { .toast-host { top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 12px; max-width: none; } }

@supports (-webkit-touch-callout: none) {
  @media (max-width: 600px) {
    .desk-launch { bottom: calc(76px + env(safe-area-inset-bottom) + var(--desk-lift, 0px)); }
  }
}