/* Keep the frame inside the visual viewport; only the conversation scrolls. */
html.chat-active {
  overflow: hidden;
  overscroll-behavior: none;
}
body.chat-active {
  position: fixed;
  top: var(--chat-top, 0px);
  left: 0;
  width: 100%;
  height: var(--chat-height, 100dvh);
  overflow: hidden;
}
.chat-active .workspace {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chat-active .topbar {
  height: 54px;
  flex: 0 0 54px;
  padding: 0 24px;
}
.chat-active main {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 12px 24px max(12px, env(safe-area-inset-bottom));
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chat-active main > footer {
  display: none;
}
.chat-active .notice {
  flex-shrink: 0;
  margin: 0 0 8px;
  padding: 8px 12px;
  font-size: 11px;
}
.chat-active #chat-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chat-active .page-heading {
  flex-shrink: 0;
  gap: 12px;
  margin: 0 0 10px;
}
.chat-active .page-heading > div {
  min-width: 0;
}
.chat-active .page-heading .eyebrow {
  display: none;
}
.chat-active .page-heading h1 {
  font-size: 21px;
  margin: 0 0 5px;
}
.chat-active #chat-description {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}
.chat-active #new-chat {
  flex-shrink: 0;
  min-height: 40px;
}
.chat-active .chat-layout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.chat-active .practice-settings {
  order: -1;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  border: 0;
  background: none;
  border-radius: 0;
  padding: 0 0 2px;
  overflow: visible;
}
.chat-active .practice-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.chat-active .practice-control label {
  margin: 0;
  white-space: nowrap;
  font-size: 11px;
}
.chat-active .practice-control select {
  width: auto;
  min-width: 78px;
  padding: 9px 10px;
  min-height: 38px;
  max-width: 240px;
  text-overflow: ellipsis;
}
.chat-active .audio-status {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
}
.chat-active .chat-panel {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.chat-active .chat-toolbar {
  padding: 10px 16px;
}
.chat-active .chat-toolbar small {
  display: none;
}
.chat-active .tutor-avatar {
  width: 30px;
  height: 30px;
}
.chat-active .messages {
  height: auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 18px;
}
.chat-active .messages > * {
  flex-shrink: 0;
}
.chat-active #chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
}
.chat-active #message-input {
  resize: none;
  height: 56px;
  min-height: 0;
  max-height: none;
  padding: 10px 12px;
  font-size: 16px;
}
.chat-active .composer-bottom {
  display: contents;
}
.chat-active .composer-bottom > span {
  display: none;
}
.chat-active #send-button {
  min-height: 44px;
  align-self: end;
}
.chat-active .sidebar {
  height: var(--chat-height, 100dvh);
  top: var(--chat-top, 0px);
  bottom: auto;
  padding-top: 24px;
  overflow: hidden;
}
.chat-active .sidebar .brand-label {
  margin: 14px 0 18px;
}
.chat-active .sidebar .nav {
  padding-top: 8px;
  padding-bottom: 8px;
}
.chat-active .sidebar .nav-label {
  margin-top: 14px;
}
.chat-active .sidebar-bottom {
  padding-top: 12px;
}
@media (max-height: 800px) {
  .chat-active .sidebar-bottom,
  .chat-active .sidebar .brand-label {
    display: none;
  }
  .chat-active .sidebar nav {
    margin-top: 20px;
    gap: 3px;
  }
  .chat-active .sidebar .nav-label {
    margin: 9px 12px 2px;
  }
}
@media (max-width: 850px), (max-height: 580px) {
  .chat-active .sidebar {
    display: none;
  }
  .chat-active .workspace {
    margin-left: 0;
  }
  .chat-active .topbar {
    padding: 0 12px;
    height: 48px;
    flex-basis: 48px;
    gap: 10px;
  }
  .chat-active .topbar-breadcrumb {
    display: none;
  }
  .chat-active .account {
    gap: 7px;
  }
  .chat-active .account > span:last-child {
    display: none;
  }
  .chat-active main {
    padding: 8px 10px max(8px, env(safe-area-inset-bottom));
  }
  .chat-active .page-heading {
    align-items: center;
    margin-bottom: 8px;
  }
  .chat-active .page-heading h1 {
    font-size: 18px;
    margin: 0;
  }
  .chat-active #chat-description {
    display: none;
  }
  .chat-active .practice-settings {
    gap: 8px;
  }
  .chat-active .practice-settings:has(#book-options:not([hidden])) {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .chat-active .practice-settings:has(#book-options:not([hidden])) .practice-control {
    grid-column: span 2;
  }
  .chat-active .practice-settings #book-options,
  .chat-active .practice-settings #unit-options {
    grid-column: span 3;
  }
  .chat-active .practice-control {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
  }
  .chat-active .practice-control label {
    display: block;
    font-size: 10px;
  }
  .chat-active .practice-control select {
    width: 100%;
    min-width: 0;
    font-size: 16px;
    padding: 7px;
    max-width: none;
  }
  .chat-active .audio-status {
    display: none;
  }
  .chat-active .chat-toolbar {
    padding: 7px 10px;
  }
  .chat-active .chat-toolbar .pill {
    padding: 6px 10px;
  }
  .chat-active .messages {
    padding: 12px;
    gap: 12px;
  }
  .chat-active #chat-form {
    padding: 8px;
    gap: 7px;
  }
  .chat-active #message-input {
    height: 48px;
  }
  .chat-active #send-button {
    padding: 10px 12px;
  }
  .chat-active .message {
    max-width: 96%;
    padding: 12px;
  }
}
@media (max-height: 500px) {
  .chat-active .topbar {
    height: 42px;
    flex-basis: 42px;
  }
  .chat-active main {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .chat-active .page-heading {
    margin-bottom: 4px;
  }
  .chat-active .page-heading h1 {
    font-size: 16px;
  }
  .chat-active #new-chat {
    min-height: 32px;
    padding: 7px;
  }
  .chat-active .practice-control {
    flex-direction: row;
    align-items: center;
  }
  .chat-active .practice-control label {
    font-size: 9px;
  }
  .chat-active .practice-control select {
    min-height: 32px;
    padding: 4px;
  }
  .chat-active .chat-toolbar {
    display: none;
  }
  .chat-active .chat-layout {
    gap: 5px;
  }
  .chat-active .notice {
    font-size: 10px;
    padding: 4px 8px;
    margin-bottom: 4px;
  }
  .chat-active #chat-form {
    padding: 5px;
  }
  .chat-active #message-input {
    height: 44px;
  }
  .chat-active .chat-panel {
    grid-template-rows: minmax(0, 1fr) auto;
  }
}

/* Attachments share the fixed composer; previews scroll with messages. */
.chat-active #chat-form {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.chat-active #attach-button {
  grid-column: 1;
  grid-row: 1;
}
.chat-active #message-input {
  grid-column: 2;
  grid-row: 1;
}
.chat-active #send-button {
  grid-column: 3;
  grid-row: 1;
}
#attach-button {
  min-width: 36px;
  min-height: 44px;
  font-size: 24px;
}
#attachment-selection {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  height: 24px;
  font-size: 12px;
}
.attachment-open {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  margin-top: 8px;
}
.attachment-preview {
  display: block;
  max-width: 100%;
  max-height: 280px;
  margin-top: 8px;
  object-fit: contain;
}
/* The level picker sits in the heading beside "Nova conversa" (moved there by app.js). */
.chat-active .page-heading {
  flex-wrap: nowrap;
}
.chat-active .page-heading > div {
  flex: 1 1 auto;
  min-width: 0;
}
.chat-active .page-heading h1,
.chat-active #chat-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-active .page-heading .heading-level {
  flex: 0 0 auto;
  margin-left: auto;
}
/* Safari draws its own small select; drawing it here matches the "Nova conversa" button beside it. */
.chat-active .heading-level select {
  -webkit-appearance: none;
  appearance: none;
  width: 78px;
  height: 41px;
  min-height: 41px;
  padding: 0 28px 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231c244b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 10px center / 10px 7px;
  color: var(--navy);
  font-size: 13px;
  line-height: 39px;
}
.chat-active .practice-settings:not(:has(> .practice-control:not([hidden]))) {
  display: none;
}
@media (max-width: 850px) {
  .chat-active .page-heading .heading-level select {
    width: 72px;
  }
}
/* Computers: mode switch, title, level and "Nova conversa" share one row above the conversation. */
@media (min-width: 851px) {
  .chat-active #chat-view {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 24px;
    align-items: center;
  }
  .chat-active .chat-mode-switch {
    width: 300px;
    margin: 0 0 10px;
  }
  .chat-active .page-heading {
    margin: 0 0 10px;
  }
  .chat-active .chat-layout {
    grid-column: 1 / -1;
    align-self: stretch;
  }
  /* Without the switches (text correction), the heading spans the row so its controls stay on the right. */
  .chat-active #chat-view:has(.chat-mode-switch[hidden]) .page-heading {
    grid-column: 1 / -1;
  }
}
/* Voice off: no tutor row above the messages (it stays when it holds the level and "Nova conversa"). */
.chat-active #chat-view:has(#voice-screen[hidden]) .chat-toolbar:not(.with-controls) {
  display: none;
}
.chat-active #chat-view:has(#voice-screen[hidden]) .chat-panel:has(> .chat-toolbar:not(.with-controls)) {
  grid-template-rows: minmax(0, 1fr) auto;
}