/* IELTS Core AI Tutor — a chat app layout: a list of chats, a thin top bar, one reading column, and a composer
   docked at the bottom. With no messages the greeting and composer sit in the middle of the screen, like ChatGPT or Claude. */

body.instructor-page { background: #fff !important; }
.instructor-page .app-footer { display: none !important; }

body.instructor-page .tutor-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
/* The shared page widths and paddings (some marked important) do not apply: the tutor fills the space beside the site menu. */
html body.instructor-page .tutor-shell.page { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.tutor-main { display: flex; flex-direction: column; min-width: 0; padding: 0 24px; }

/* Chat list */
.tutor-side { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 12px 10px 14px; border-right: 1px solid #eef2f6; background: #fafbfc; }
.tutor-side-head { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 6px 0 8px; }
.tutor-side-title { display: flex; align-items: center; gap: 9px; font: 600 15px 'DM Sans', Arial, sans-serif; letter-spacing: -0.01em; color: #10233f; }
.tutor-panel-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.tutor-new { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; margin: 12px 0 8px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: #10233f; font: 500 14px 'DM Sans', Arial, sans-serif; text-align: left; cursor: pointer; }
.tutor-new:hover { background: #eef2f6; }
.tutor-new .material-symbols-outlined { font-size: 20px; color: #5b6b80; }
.tutor-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.tutor-list-group { margin: 16px 10px 4px; font: 600 12px 'DM Sans', Arial, sans-serif; color: #7a8799; }
.tutor-list-group:first-child { margin-top: 4px; }
.tutor-list-items { margin: 0; padding: 0; list-style: none; }
.tutor-list-empty { margin: 8px 10px; font-size: 13px; line-height: 1.5; color: #7a8799; }
.tutor-chat { position: relative; display: flex; align-items: center; border-radius: 10px; }
.tutor-chat:hover, .tutor-chat:focus-within { background: #eef2f6; }
.tutor-chat.is-active { background: #e6ecf5; }
.tutor-chat-open { flex: 1; min-width: 0; height: 36px; padding: 0 6px 0 10px; overflow: hidden; border: 0; background: none; color: #334155; font: 400 14px 'DM Sans', Arial, sans-serif; text-align: left; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.tutor-chat.is-active .tutor-chat-open { color: #10233f; font-weight: 500; }
.tutor-chat-delete { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-right: 3px; border: 0; border-radius: 8px; background: none; color: #7a8799; cursor: pointer; opacity: 0; }
.tutor-chat:hover .tutor-chat-delete, .tutor-chat:focus-within .tutor-chat-delete, .tutor-chat.is-active .tutor-chat-delete { opacity: 1; }
.tutor-chat-delete:hover { background: #e2e8f0; color: #10233f; }
.tutor-chat-delete .material-symbols-outlined { font-size: 18px; }
.tutor-chat.is-confirming { background: #fef3f2; }
.tutor-chat.is-confirming .tutor-chat-delete { opacity: 1; background: #b42318; color: #fff; }
.tutor-side-note { margin: 10px 10px 0; font-size: 12px; line-height: 1.5; color: #7a8799; }
.tutor-scrim { display: none; }
@media (hover: none) { .tutor-chat-delete { opacity: 1; } }

/* Top bar */
.tutor-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; height: 60px; margin: 0 -24px; padding: 0 24px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tutor-bar-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; font: 600 16px 'DM Sans', Arial, sans-serif; letter-spacing: -0.01em; color: #10233f; white-space: nowrap; text-overflow: ellipsis; }
.tutor-icon-btn { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: #5b6b80; cursor: pointer; }
.tutor-icon-btn:hover { background: #f1f5f9; color: #10233f; }
.tutor-icon-btn .material-symbols-outlined { font-size: 20px; }
.tutor-open-side, .tutor-bar-new { display: none; }

/* Wide screens: the chat list column can be hidden with the panel button; the bar then offers the list and a new chat.
   With the list open and no chat yet, the bar has no title (the list already says AI Tutor). */
@media (min-width: 1181px) {
  body.instructor-page .tutor-shell.side-collapsed { grid-template-columns: minmax(0, 1fr); }
  .tutor-shell.side-collapsed .tutor-side { display: none; }
  .tutor-shell.side-collapsed .tutor-open-side,
  .tutor-shell.side-collapsed .tutor-bar-new { display: grid; }
  .tutor-shell.is-empty:not(.side-collapsed) .tutor-bar-title { visibility: hidden; }
}

/* Reading column */
.tutor-thread { flex: 1; display: flex; flex-direction: column; gap: 28px; width: 100%; max-width: 760px; margin: 0 auto; padding: 20px 0 28px; }
.tutor-dock { position: sticky; bottom: 0; z-index: 4; width: 100%; max-width: 760px; margin: 0 auto; padding: 14px 0 16px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 22px); }

/* Empty state: greeting, composer and starters centred on the screen. */
.tutor-shell.is-empty .tutor-thread { flex: 0 0 auto; margin-top: auto; padding: 0 0 24px; }
.tutor-shell.is-empty .tutor-dock { position: static; margin-bottom: auto; padding-bottom: 12vh; background: none; }
.tutor-hero { text-align: center; }
.tutor-hero h2 { margin: 0 0 8px; font: 600 30px/1.2 'DM Sans', Arial, sans-serif; letter-spacing: -0.025em; color: #10233f; }
.tutor-hero p { margin: 0; font-size: 16px; line-height: 1.55; color: #5b6b80; }

/* Composer */
.tutor-composer { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 10px 18px; border: 1px solid #dce3ed; border-radius: 24px; background: #fff; box-shadow: 0 6px 24px rgba(16, 35, 63, .06), 0 1px 2px rgba(16, 35, 63, .05); transition: border-color .15s ease, box-shadow .15s ease; }
.tutor-composer:focus-within { border-color: #a9bfe6; box-shadow: 0 8px 28px rgba(16, 35, 63, .09), 0 1px 2px rgba(16, 35, 63, .05); }
.tutor-composer textarea { width: 100%; min-height: 26px; max-height: 200px; padding: 2px 6px 2px 0; border: 0; outline: 0; resize: none; background: transparent; color: #10233f; font: 400 16px/1.5 'DM Sans', Arial, sans-serif; }
/* The whole composer shows focus (above), so the site-wide focus ring is not drawn around the text box inside it. */
.member-layout .tutor-composer textarea:focus-visible { outline: none !important; box-shadow: none !important; }
.tutor-composer textarea::placeholder { color: #8b97a8; }
.tutor-composer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tutor-composer-tools { display: flex; align-items: center; gap: 2px; margin-left: -8px; }
.tutor-tool { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: #5b6b80; cursor: pointer; }
.tutor-tool:hover { background: #f1f5f9; color: #10233f; }
.tutor-tool .material-symbols-outlined { font-size: 20px; }
.tutor-lang { font: 600 12px 'DM Sans', Arial, sans-serif; letter-spacing: .05em; }
.tutor-tool.is-listening { background: #fef3f2; color: #b42318; }
.tutor-tool[hidden] { display: none; }
.tutor-send { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #245bc7; color: #fff; cursor: pointer; transition: background .15s ease; }
.tutor-send:hover { background: #2446a9; }
.tutor-send .material-symbols-outlined { font-size: 20px; }
.tutor-composer:has(textarea:placeholder-shown) .tutor-send,
.tutor-send:disabled { background: #d5deec; cursor: default; }

/* Starters (empty state only) */
.tutor-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.tutor-starters[hidden] { display: none; }
.tutor-starter { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #334155; font: 500 14px 'DM Sans', Arial, sans-serif; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.tutor-starter:hover { background: #f7f9fd; border-color: #d5deec; }
.tutor-starter .material-symbols-outlined { font-size: 18px; color: #7a8799; }
.tutor-starter.is-personal { border-color: #c5d4f0; color: #10233f; }
.tutor-starter.is-personal .material-symbols-outlined { color: #245bc7; }
.tutor-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #7a8799; text-align: center; }

/* Messages */
.t-msg { display: flex; flex-direction: column; }
.t-user { align-self: flex-end; max-width: 80%; }
.t-bubble { padding: 10px 16px; border-radius: 20px; background: #f1f3f6; color: #10233f; font-size: 16px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.t-ai { align-items: stretch; }
.t-content { color: #1f2f46; font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.t-content > :first-child { margin-top: 0; }
.t-content > :last-child { margin-bottom: 0; }
.t-content p { margin: 0 0 14px; }
.t-content h3 { margin: 22px 0 8px; font: 600 18px/1.35 'DM Sans', Arial, sans-serif; color: #10233f; }
.t-content h4 { margin: 18px 0 6px; font: 600 16px/1.35 'DM Sans', Arial, sans-serif; color: #10233f; }
.t-content ul, .t-content ol { margin: 0 0 14px; padding-left: 24px; }
.t-content li { margin: 6px 0; }
.t-content li::marker { color: #7a8799; }
.t-content strong { color: #10233f; font-weight: 600; }
.t-content a { color: #245bc7; font-weight: 600; text-decoration: underline; text-decoration-color: #c5d4f0; text-underline-offset: 3px; }
.t-content a:hover { text-decoration-color: #245bc7; }
.t-content hr { margin: 20px 0; border: 0; border-top: 1px solid #eef2f6; }
.t-content blockquote { margin: 0 0 14px; padding: 2px 0 2px 16px; border-left: 3px solid #d5deec; color: #334155; }
.t-content blockquote.is-warning { border-left-color: #e0a75a; }
.t-content code { padding: 2px 6px; border-radius: 6px; background: #f1f3f6; font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: .87em; }
.t-content pre { margin: 0 0 14px; padding: 14px 16px; overflow-x: auto; border-radius: 12px; background: #f6f8fa; }
.t-content pre code { padding: 0; background: none; }
.t-table { margin: 0 0 14px; overflow-x: auto; }
.t-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.t-table th, .t-table td { padding: 9px 12px; border-bottom: 1px solid #e8edf3; text-align: left; vertical-align: top; }
.t-table th { color: #10233f; font-weight: 600; border-bottom-color: #d5deec; }

.t-actions { display: flex; gap: 2px; margin: 6px 0 0 -6px; }
.t-action { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: #8b97a8; cursor: pointer; }
.t-action:hover { background: #f1f5f9; color: #10233f; }
.t-action .material-symbols-outlined { font-size: 18px; }

.t-followups { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: -14px; padding-top: 10px; border-top: 1px solid #eef2f6; }
.t-followup { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: #334155; font: 500 14px/1.4 'DM Sans', Arial, sans-serif; text-align: left; cursor: pointer; }
.t-followup:hover { background: #f5f7fa; color: #245bc7; }
.t-followup .material-symbols-outlined { font-size: 18px; color: #8b97a8; }

.t-shimmer { display: inline-block; font: 500 15px 'DM Sans', Arial, sans-serif; color: #7a8799; background: linear-gradient(90deg, #94a3b8 0%, #10233f 45%, #94a3b8 90%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: t-shimmer 1.6s linear infinite; }
@keyframes t-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.t-error-text { margin: 0 0 10px; color: #1f2f46; font-size: 16px; line-height: 1.6; }
.t-retry { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 34px; padding: 0 12px; border: 1px solid #dce3ed; border-radius: 10px; background: #fff; color: #10233f; font: 600 14px 'DM Sans', Arial, sans-serif; cursor: pointer; }
.t-retry:hover { background: #f5f7fa; }
.t-retry .material-symbols-outlined { font-size: 18px; }

/* Below this width the chat list becomes a panel opened from the top bar. */
@media (max-width: 1180px) {
  body.instructor-page .tutor-shell { grid-template-columns: minmax(0, 1fr); }
  /* Above the site's mobile top bar (9980), below the site menu panel. */
  .tutor-side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 10001; width: min(300px, 86vw); height: auto; border-right: 0; box-shadow: 0 0 40px rgba(16, 35, 63, .18); transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  .tutor-shell.side-open .tutor-side { transform: none; visibility: visible; transition: transform .2s ease; }
  .tutor-open-side, .tutor-bar-new { display: grid; }
  .tutor-shell.side-open .tutor-scrim { display: block; position: fixed; inset: 0; z-index: 10000; background: rgba(8, 14, 26, .35); }
  .tutor-bar { padding-left: 14px; }
}

/* The site's mobile top bar (56px, sticky) appears below 900px; the tutor bar sticks just under it. */
@media (max-width: 900px) {
  .tutor-bar { top: 56px; }
}

/* On phones the site sets overflow-x: hidden on html and body, which makes body its own scroll box and stops the
   top bar and composer from sticking. "clip" hides sideways overflow the same way without that side effect. */
@media (max-width: 830px) {
  html:has(> body.instructor-page), html > body.instructor-page { overflow-x: clip !important; overflow-y: visible !important; }
}

@media (max-width: 720px) {
  .tutor-main { padding: 0 16px; }
  .tutor-bar { margin: 0 -16px; padding: 0 8px; height: 54px; }
  .tutor-bar-title { font-size: 15px; }
  .tutor-hero h2 { font-size: 24px; }
  .tutor-hero p { font-size: 15px; }
  .tutor-shell.is-empty .tutor-dock { padding-bottom: 6vh; }
  .tutor-starter:nth-child(n+5) { display: none; }
  .tutor-composer { border-radius: 20px; }
  .t-user { max-width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .t-shimmer { animation: none; -webkit-text-fill-color: #7a8799; }
}

/* Dark theme */
html[data-theme="dark"] body.instructor-page { background: #1c1d1e !important; }
html[data-theme="dark"] .tutor-bar { background: rgba(28, 29, 30, .92); }
html[data-theme="dark"] .tutor-dock { background: linear-gradient(to bottom, rgba(28, 29, 30, 0), #1c1d1e 22px); }
html[data-theme="dark"] .tutor-shell.is-empty .tutor-dock { background: none; }
html[data-theme="dark"] .tutor-bar-title,
html[data-theme="dark"] .tutor-hero h2,
html[data-theme="dark"] .tutor-composer textarea,
html[data-theme="dark"] .t-bubble,
html[data-theme="dark"] .t-content h3,
html[data-theme="dark"] .t-content h4,
html[data-theme="dark"] .t-content strong,
html[data-theme="dark"] .t-table th,
html[data-theme="dark"] .tutor-starter.is-personal,
html[data-theme="dark"] .t-retry { color: #e1e2e5; }
html[data-theme="dark"] .t-content,
html[data-theme="dark"] .t-error-text { color: #dedfe2; }
html[data-theme="dark"] .t-content blockquote,
html[data-theme="dark"] .tutor-starter,
html[data-theme="dark"] .t-followup { color: #d4d5d8; }
html[data-theme="dark"] .tutor-hero p,
html[data-theme="dark"] .tutor-hint,
html[data-theme="dark"] .tutor-icon-btn,
html[data-theme="dark"] .tutor-new .material-symbols-outlined,
html[data-theme="dark"] .tutor-list-group,
html[data-theme="dark"] .tutor-list-empty,
html[data-theme="dark"] .tutor-side-note,
html[data-theme="dark"] .tutor-chat-delete,
html[data-theme="dark"] .tutor-tool { color: #94a3b8; }
html[data-theme="dark"] .tutor-side { background: #202122; border-right-color: #2e2f31; }
html[data-theme="dark"] .tutor-side-title,
html[data-theme="dark"] .tutor-new,
html[data-theme="dark"] .tutor-chat.is-active .tutor-chat-open { color: #e1e2e5; }
html[data-theme="dark"] .tutor-chat-open { color: #d4d5d8; }
html[data-theme="dark"] .tutor-new:hover,
html[data-theme="dark"] .tutor-chat:hover,
html[data-theme="dark"] .tutor-chat:focus-within { background: #2a2b2d; }
html[data-theme="dark"] .tutor-chat.is-active { background: #313234; }
html[data-theme="dark"] .tutor-chat-delete:hover { background: #3a3b3d; color: #e1e2e5; }
html[data-theme="dark"] .tutor-chat.is-confirming { background: #261618; }
html[data-theme="dark"] .tutor-chat.is-confirming .tutor-chat-delete { background: #bd453c; color: #e1e2e5; }
html[data-theme="dark"] .tutor-composer { background: #262728; border-color: #363739; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .tutor-composer:focus-within { border-color: #3c5d90; }
html[data-theme="dark"] .tutor-composer:has(textarea:placeholder-shown) .tutor-send,
html[data-theme="dark"] .tutor-send:disabled { background: #3a3b3d; color: #7a8799; }
html[data-theme="dark"] .tutor-starter,
html[data-theme="dark"] .t-retry { background: #212223; border-color: #363739; }
html[data-theme="dark"] .tutor-starter.is-personal { border-color: #46474a; }
html[data-theme="dark"] .tutor-starter.is-personal .material-symbols-outlined,
html[data-theme="dark"] .t-content a { color: #9aaed6; }
html[data-theme="dark"] .tutor-icon-btn:hover,
html[data-theme="dark"] .tutor-tool:hover,
html[data-theme="dark"] .tutor-starter:hover,
html[data-theme="dark"] .t-followup:hover,
html[data-theme="dark"] .t-action:hover,
html[data-theme="dark"] .t-retry:hover { background: #272829; color: #e1e2e5; }
html[data-theme="dark"] .t-bubble { background: #2e2f31; }
html[data-theme="dark"] .t-content code,
html[data-theme="dark"] .t-content pre { background: #272829; }
html[data-theme="dark"] .t-content hr,
html[data-theme="dark"] .t-followups { border-top-color: #313234; }
html[data-theme="dark"] .t-table th, html[data-theme="dark"] .t-table td { border-bottom-color: #363739; }
html[data-theme="dark"] .t-content blockquote { border-left-color: #46474a; }
html[data-theme="dark"] .t-shimmer { background-image: linear-gradient(90deg, #535558 0%, #e1e2e5 45%, #535558 90%); }