/* ===========================================================================
   Ask WWK9
   The student side of the training assistant.

   Built for someone standing in a yard with a leash in one hand. Bottom sheet
   on a phone, docked panel on a desktop, big tap targets, and the composer
   pinned where a thumb reaches.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   The button
--------------------------------------------------------------------------- */

.wk-fab {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 20px 0 17px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-size: .93rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(16, 36, 68, .32);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wk-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(16, 36, 68, .38); }
.wk-fab:active { transform: translateY(0); }
.wk-fab svg { flex: 0 0 auto; }
.wk-fab[hidden] { display: none; }

@media (max-width: 560px) {
  .wk-fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .wk-fab .label { display: none; }
  .wk-fab { padding: 0; width: 54px; height: 54px; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   The panel
--------------------------------------------------------------------------- */

.wk-scrim {
  /* Above the school's own header, which sits at 9999 and is sticky.

     This did not matter while the panel was a bottom sheet, because it started
     below the header and the two never overlapped. Full height put the panel's
     header underneath the site's, which hid the close button: tapping where it
     should be hit the nav instead, which is why reaching for it opened the
     menu. Below the boot splash at 12000, which must cover everything. */
  position: fixed; inset: 0; z-index: 11800;
  background: rgba(16, 36, 68, .34);
  backdrop-filter: blur(2px);
}
.wk-scrim[hidden] { display: none; }

.wk-panel {
  position: fixed;
  z-index: 11850;
  display: flex;
  flex-direction: column;
  background: var(--paper, #f7f5f1);
  overflow: hidden;
}
.wk-panel[hidden] { display: none; }

/* Docked to the right on a desktop, so a student can read the lesson and the
   answer at the same time. */
@media (min-width: 901px) {
  .wk-panel {
    top: 0; right: 0; bottom: 0;
    width: 420px;
    box-shadow: -14px 0 40px rgba(16, 36, 68, .18);
  }
}

/* Full height on a phone, anchored to the top and the bottom rather than given
   a height.

   It was a bottom sheet at 86dvh, which is correct in a browser and wrong
   inside the app: there, dvh measures the whole device screen rather than the
   area the page can actually use, so 86dvh came out taller than the visible
   viewport and the sheet hung off the top of it. The composer stayed pinned to
   the bottom of a panel that was 155px too tall, which is what put all that
   dead space between the greeting and the box you type in.

   Anchoring top and bottom sidesteps the question. The panel is sized by the
   distance between two edges that are definitionally on screen, so it cannot
   be taller than the viewport whatever any unit reports. It also gives the
   conversation the whole screen, which is the right shape for the thing
   anyway: a student reading an answer is reading, not glancing.

   The head carries the top inset itself, since the panel now reaches the
   status bar. */
@media (max-width: 900px) {
  .wk-panel {
    left: 0; right: 0; top: var(--app-vtop, 0px); bottom: auto;
    border-radius: 0;
    box-shadow: 0 -12px 40px rgba(16, 36, 68, .22);

    /* Height, not bottom: 0.

       Anchoring to the bottom edge assumes the bottom edge moves when the
       keyboard opens. In this webview it does not: the layout viewport stays
       the full height of the screen, so the composer stayed pinned to the
       bottom of it, underneath the keyboard, which is the one place it must
       never be.

       --app-vh is published from visualViewport.height, which is the part of
       the page that is actually visible and does shrink when the keyboard
       comes up. Sizing from the top by that height puts the composer directly
       above the keyboard and moves it back down when the keyboard closes. */
    /* --app-kbvh, not --app-vh. This is the one element that should shrink
       when the keyboard opens, so the composer sits above the keys rather
       than behind them. Page layout uses --app-vh, which ignores the
       keyboard. */
    height: var(--app-kbvh, 100dvh);
  }
}

.wk-head {
  flex: 0 0 auto;
  background: var(--navy);
  color: #fff;
  padding: 14px 16px 13px;
}

/* After the rule above, not before it. The base .wk-head sets padding on the
   shorthand, and at equal specificity the later rule wins, so declaring this
   earlier in the file would have been silently discarded and the panel's
   header would have sat under the status bar.

   Only on phones: the desktop panel is docked beside the page and never
   reaches the top edge of the screen. */
@media (max-width: 900px) {
  .wk-head { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
}
.wk-grab {
  width: 38px; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  margin: 0 auto 11px;
}
@media (min-width: 901px) { .wk-grab { display: none; } }

.wk-head-row { display: flex; align-items: center; gap: 12px; }
.wk-head h2 {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.06rem; font-weight: 600; margin: 0; color: #fff;
}
.wk-close {
  margin-left: auto; background: none; border: 0; color: rgba(255,255,255,.75);
  cursor: pointer; padding: 6px; line-height: 0; border-radius: 8px;
}
.wk-close:hover { color: #fff; background: rgba(255,255,255,.12); }

.wk-context {
  margin-top: 8px; font-size: .77rem; color: rgba(255,255,255,.72);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.wk-context select {
  background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 8px;
  padding: 4px 8px; font: inherit; font-size: .77rem; cursor: pointer;
}
.wk-context select option { color: var(--navy); }

/* Fixed here rather than in school.css, because ask-wwk9.css loads after it
   and would win at equal specificity. At 12px iOS zooms the whole page the
   moment this picker is focused, and the assistant is exactly where a student
   is most likely to tap one. Padding comes down to hold the size. */
@media (max-width: 900px) {
  .wk-context select { font-size: 16px; padding: 3px 8px; }
}

/* ---------------------------------------------------------------------------
   Messages
--------------------------------------------------------------------------- */

.wk-thread {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wk-hello {
  background: var(--card, #fff);
  border: 1px solid var(--line, #e4e0d8);
  border-radius: 14px;
  padding: 16px;
  color: var(--muted, #6c7381);
  font-size: .9rem;
  line-height: 1.6;
}
.wk-hello b { display: block; color: var(--navy); margin-bottom: 5px; font-size: .95rem; }

.wk-msg { max-width: 88%; }
.wk-msg.me { align-self: flex-end; }
.wk-msg.them { align-self: flex-start; max-width: 100%; }

.wk-bubble {
  padding: 12px 15px;
  border-radius: 15px;
  font-size: .93rem;
  line-height: 1.62;
  white-space: pre-wrap;
}
.wk-msg.me .wk-bubble {
  background: var(--navy); color: #fff; border-bottom-right-radius: 5px;
}
.wk-msg.them .wk-bubble {
  background: var(--card, #fff); color: var(--navy);
  border: 1px solid var(--line, #e4e0d8); border-bottom-left-radius: 5px;
}

.wk-thinking { display: flex; gap: 5px; padding: 4px 2px; }
.wk-thinking span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted, #6c7381); opacity: .4;
  animation: wk-bounce 1.3s infinite;
}
.wk-thinking span:nth-child(2) { animation-delay: .18s; }
.wk-thinking span:nth-child(3) { animation-delay: .36s; }
@keyframes wk-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-5px); opacity: .8; }
}

/* ---------------------------------------------------------------------------
   Citations
--------------------------------------------------------------------------- */

.wk-cites { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.wk-cite {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(107, 185, 75, .13);
  border: 1px solid rgba(107, 185, 75, .4);
  color: var(--green-deep, #3d7a28);
  border-radius: 999px; padding: 7px 13px;
  font: inherit; font-size: .8rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
}
.wk-cite:hover { background: rgba(107, 185, 75, .22); }
.wk-cite .at { opacity: .75; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Feedback and handover
--------------------------------------------------------------------------- */

.wk-acts { display: flex; gap: 8px; margin-top: 11px; align-items: center; }
.wk-act {
  background: none; border: 1px solid var(--line, #e4e0d8);
  border-radius: 999px; padding: 6px 13px;
  font: inherit; font-size: .79rem; font-weight: 700;
  color: var(--muted, #6c7381); cursor: pointer;
}
.wk-act:hover { border-color: var(--navy); color: var(--navy); }
.wk-act.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.wk-act.stuck:hover { border-color: #c0492c; color: #96341f; }

.wk-said { font-size: .79rem; color: var(--muted, #6c7381); margin-top: 11px; }

.wk-handover {
  margin-top: 12px; padding: 14px;
  background: rgba(192, 73, 44, .07);
  border: 1px solid rgba(192, 73, 44, .25);
  border-radius: 13px;
}
.wk-handover p { font-size: .87rem; color: var(--navy); line-height: 1.6; margin: 0 0 11px; }
.wk-handover .what {
  font-size: .78rem; color: var(--muted, #6c7381); line-height: 1.55;
  margin: 0 0 12px;
}
.wk-handover .row { display: flex; gap: 9px; flex-wrap: wrap; }
.wk-handover button {
  border: 0; border-radius: 10px; padding: 10px 16px;
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.wk-handover .go { background: var(--green, #6bb94b); color: #0d2410; }
.wk-handover .no { background: transparent; color: var(--muted, #6c7381); }

.wk-sent {
  margin-top: 12px; padding: 13px 15px;
  background: rgba(107, 185, 75, .12);
  border: 1px solid rgba(107, 185, 75, .3);
  border-radius: 13px; font-size: .87rem; color: var(--green-deep, #3d7a28);
  line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   Composer
--------------------------------------------------------------------------- */

.wk-compose {
  flex: 0 0 auto;
  border-top: 1px solid var(--line, #e4e0d8);
  background: var(--card, #fff);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; align-items: flex-end;
}
.wk-compose textarea {
  flex: 1 1 auto;
  border: 1px solid var(--line, #e4e0d8);
  border-radius: 13px;
  padding: 11px 13px;
  /* 16px exactly. Below that iOS zooms the page in the moment this is
     focused and never zooms back out, which pushes the close button off the
     right edge of the screen. */
  font: inherit; font-size: 16px; line-height: 1.5;
  resize: none; max-height: 132px; min-height: 46px;
  background: var(--paper-2, #f2efe9); color: var(--navy);
}
.wk-compose textarea:focus {
  outline: none; border-color: var(--green, #6bb94b); background: #fff;
}
.wk-send {
  flex: 0 0 auto; width: 46px; height: 46px; border: 0; border-radius: 13px;
  background: var(--green, #6bb94b); color: #0d2410;
  cursor: pointer; display: grid; place-items: center;
}
.wk-send:disabled { opacity: .4; cursor: default; }

.wk-limit {
  font-size: .74rem; color: var(--muted, #6c7381);
  padding: 0 16px 10px; text-align: center;
}