/* AI-репетитор виджетом на всех экранах (js/tutor-widget.js, ROADMAP-26.09 §41). Чат внутри — те же .tt и .msg,
   что у репетитора конспекта (css/tutor.css): один репетитор, один вид. */

.tw-fab {
  position: fixed;
  right: 24px;
  bottom: calc(24px + var(--tabbar-offset, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-dropdown);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5) 0 var(--s-4);
  border: 0;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.tw-fab[hidden] { display: none; }
.tw-fab svg { width: 18px; height: 18px; }
@media (hover: hover) { .tw-fab:hover { transform: translateY(-2px); } }
.tw-fab:active { transform: translateY(0) scale(0.98); }
.tw-fab:focus-visible { outline: none; box-shadow: var(--shadow-md), var(--focus-ring); }

.tw-panel {
  position: fixed;
  right: 24px;
  bottom: calc(24px + var(--tabbar-offset, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-dropdown);
  width: min(400px, calc(100vw - 32px));
  height: min(580px, calc(100dvh - 120px - var(--tabbar-offset, 0px)));
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  animation: tw-in 220ms var(--ease-out);
}
.tw-panel[hidden] { display: none; }
@keyframes tw-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .tw-panel { animation: none; } }

/* The tutor card fills the panel; its own max-height is for the note column. */
.tw-tt { height: 100%; min-height: 0; max-height: none; background: var(--surface-raised); }
.tw-tt .tt__head > div { min-width: 0; }
.tw-tt .tt__log { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.tw-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tw-chips .chip-f { font-size: var(--fs-12); }

.tw-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
}
.tw-act svg { width: 12px; height: 12px; }
.tw-act:hover { text-decoration: underline; }

/* The backdrop is the phone's: on a computer a click outside closes the chat without dimming the page. */
.tw-backdrop { display: none; }

/* Phone: a round button above the tab bar; the chat is a bottom sheet over everything, tab bar included, with a
   dimmed page behind it. Its height follows the keyboard (--tw-vh from visualViewport, js/tutor-widget.js). */
@media (max-width: 599px) {
  /* --tw-lift: something else is at the bottom (js/tutor-widget.js `lift`) — the button rides above it. */
  .tw-fab {
    right: 16px;
    bottom: max(calc(12px + var(--tabbar-offset, 0px) + env(safe-area-inset-bottom, 0px)), var(--tw-lift, 0px));
    width: 52px;
    min-height: 52px;
    padding: 0;
    justify-content: center;
    transition: transform 0.28s var(--ease-out), opacity 0.2s ease, bottom 0.28s var(--ease-out);
  }
  .tw-fab span { display: none; }
  /* Reading down the page: the button steps aside, the first move up brings it back. */
  .tw-fab.is-away { transform: translateY(calc(100% + 24px)) scale(0.9); opacity: 0; pointer-events: none; }

  .tw-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: block;
    background: rgb(20 16 30 / 0.42);
    animation: tw-fade 200ms var(--ease-out);
  }
  .tw-backdrop[hidden] { display: none; }

  .tw-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: calc(var(--z-overlay) + 1);
    width: auto;
    height: min(calc(var(--tw-vh, 100dvh) - 48px), 720px);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    animation: tw-up 260ms var(--ease-out);
  }
  .tw-tt { border-bottom: 0; border-radius: inherit; padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); }
  /* 16px stops iOS zooming into the field on focus. */
  .tw-tt .tt__input { font-size: 16px; }
  /* Suggestions scroll sideways in one row instead of eating four lines of the chat. */
  .tw-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4); scrollbar-width: none; }
  .tw-chips::-webkit-scrollbar { display: none; }
  .tw-chips .chip-f { flex: none; min-height: 36px; }

  html.tw-open, html.tw-open body { overflow: hidden; overscroll-behavior: none; }
}
@keyframes tw-fade { from { opacity: 0; } }
@keyframes tw-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .tw-backdrop, .tw-panel { animation: none; } .tw-fab { transition: none; } }

@media print { .tw-fab, .tw-panel { display: none !important; } }