.ai-app-shell {
  --ai-surface: var(--background-primary);
  --ai-soft: var(--background-secondary);
  --ai-ink: var(--text-primary);
  --ai-copy: var(--text-secondary);
  --ai-line: var(--border-color);
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: calc(100vh - 74px);
  color: var(--ai-copy);
  background:
    radial-gradient(circle at 85% 8%, color-mix(in srgb, var(--primary-color) 10%, transparent), transparent 28rem),
    var(--ai-soft);
}

.ai-app-shell a,
.ai-app-shell a:visited,
.ai-app-shell button {
  text-decoration: none;
}

.ai-app-sidebar {
  position: sticky;
  top: 74px;
  z-index: 3;
  height: calc(100vh - 74px);
  box-sizing: border-box;
  padding: 28px 18px;
  border-right: 1px solid var(--ai-line);
  background: color-mix(in srgb, var(--ai-surface) 94%, transparent);
  backdrop-filter: blur(18px);
}

.ai-app-back,
.ai-app-sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ai-copy);
  font-size: .78rem;
  font-weight: 650;
}

.ai-app-back { color: var(--ai-ink); white-space: nowrap; }
.ai-app-back .material-symbols-outlined { font-size: 19px; }
.ai-app-sidebar > p { margin: 30px 11px 10px; color: color-mix(in srgb, var(--ai-copy) 72%, transparent); font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.ai-app-sidebar nav { display: grid; gap: 6px; }
.ai-app-sidebar nav a { min-height: 44px; padding: 0 13px; border: 1px solid transparent; border-radius: 13px; transition: .18s ease; }
.ai-app-sidebar nav a:hover { color: var(--ai-ink); background: var(--ai-soft); }
.ai-app-sidebar nav a.is-active { color: var(--primary-color); border-color: color-mix(in srgb, var(--primary-color) 20%, var(--ai-line)); background: color-mix(in srgb, var(--primary-color) 10%, var(--ai-surface)); box-shadow: inset 3px 0 var(--primary-color); }
.ai-app-sidebar nav .material-symbols-outlined { font-size: 21px; }

.ai-app-usage { position: absolute; right: 18px; bottom: 24px; left: 18px; display: flex; gap: 10px; padding: 14px; border: 1px solid color-mix(in srgb, var(--primary-color) 17%, var(--ai-line)); border-radius: 16px; background: color-mix(in srgb, var(--primary-color) 7%, var(--ai-soft)); }
.ai-app-usage > .material-symbols-outlined { color: var(--primary-color); font-size: 21px; }
.ai-app-usage strong,.ai-app-usage small { display: block; }
.ai-app-usage strong { color: var(--ai-ink); font-size: .7rem; }
.ai-app-usage small { font-size: .6rem; }

.ai-app-main { min-width: 0; padding: clamp(26px, 4vw, 56px); }
.ai-app-heading { position: relative; display: grid; grid-template-columns:auto minmax(0,1fr) auto; align-items: center; gap: 17px; max-width: 1180px; margin: 0 auto 24px; padding: 8px 6px 22px; border-bottom: 1px solid var(--ai-line); overflow: visible; }
.ai-app-heading::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 92px; height: 2px; border-radius: 99px; background: var(--primary-color); }
.ai-app-heading-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50% 50% 50% 18px; color: #fff; background: linear-gradient(145deg, var(--primary-color-hover), var(--primary-color)); box-shadow: 0 12px 26px color-mix(in srgb, var(--primary-color) 28%, transparent); transform: rotate(-4deg); }
.ai-app-heading-icon span { font-size: 29px; transform: rotate(4deg); }
.ai-app-heading-copy p { margin: 0; color: var(--primary-color); font-size: .62rem; font-weight: 800; letter-spacing: .13em; }
.ai-app-heading-copy h1 { margin: 2px 0; color: var(--ai-ink); font-size: clamp(1.65rem, 3vw, 2.55rem); line-height: 1.15; }
.ai-app-heading-copy > span { display: block; max-width: 760px; font-size: .78rem; }
.ai-app-live { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid color-mix(in srgb, #22a06b 25%, var(--ai-line)); border-radius: 999px; color: #16805a; background: color-mix(in srgb, #22a06b 8%, var(--ai-surface)); font-size: .68rem; font-weight: 750; }
.ai-app-live i { width: 7px; height: 7px; border-radius: 50%; background: #22a06b; box-shadow: 0 0 0 4px color-mix(in srgb, #22a06b 15%, transparent); }

.ai-app-workspace { display: grid; grid-template-columns: minmax(340px, .8fr) minmax(0, 1.2fr); gap: 22px; max-width: 1180px; margin: auto; }
.ai-app-form,.ai-app-result { min-width: 0; border: 1px solid var(--ai-line); border-radius: 24px; background: var(--ai-surface); box-shadow: 0 20px 55px color-mix(in srgb, #0f172a 8%, transparent); }
.ai-app-form { display: grid; gap: 15px; align-content: start; padding: 24px; }
.ai-app-field { display: grid; gap: 7px; color: var(--ai-ink); font-size: .73rem; font-weight: 650; }
.ai-app-field small { color: var(--ai-copy); font-weight: 500; }
.ai-app-field input,.ai-app-field select,.ai-app-field textarea { width: 100%; box-sizing: border-box; padding: 12px 13px; border: 1px solid var(--ai-line); border-radius: 13px; outline: 0; color: var(--ai-ink); background: var(--ai-soft); font: 500 .75rem Poppins, sans-serif; }
.ai-app-field textarea { min-height: 280px; resize: vertical; line-height: 1.65; }
.ai-app-field input:focus,.ai-app-field select:focus,.ai-app-field textarea:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 14%, transparent); }
.ai-app-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ai-app-privacy { display: flex; gap: 9px; padding: 12px; border-radius: 13px; color: var(--ai-copy); background: color-mix(in srgb, var(--primary-color) 7%, var(--ai-soft)); font-size: .63rem; line-height: 1.55; }
.ai-app-privacy p { margin: 0; }
.ai-app-privacy .material-symbols-outlined { flex: 0 0 auto; color: var(--primary-color); font-size: 19px; }

.ai-dropzone { position: relative; display: grid; min-height: 210px; place-content: center; justify-items: center; gap: 8px; padding: 24px; border: 1.5px dashed color-mix(in srgb, var(--primary-color) 45%, var(--ai-line)); border-radius: 18px; color: var(--ai-copy); background: color-mix(in srgb, var(--primary-color) 5%, var(--ai-soft)); text-align: center; cursor: pointer; transition: .18s ease; }
.ai-dropzone:hover,.ai-dropzone.is-dragging { border-color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 10%, var(--ai-soft)); transform: translateY(-2px); }
.ai-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ai-dropzone > .material-symbols-outlined { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 17px; color: #fff; background: var(--primary-color); font-size: 29px; }
.ai-dropzone strong { color: var(--ai-ink); font-size: .84rem; }
.ai-dropzone span:not(.material-symbols-outlined),.ai-dropzone small { font-size: .66rem; }
.ai-file-preview { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--ai-line); border-radius: 14px; background: var(--ai-soft); }
.ai-file-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.ai-file-preview > .material-symbols-outlined { color: var(--primary-color); font-size: 28px; }
.ai-file-preview div { min-width: 0; }
.ai-file-preview strong,.ai-file-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-file-preview strong { color: var(--ai-ink); font-size: .73rem; }
.ai-file-preview small { font-size: .62rem; }

.ai-app-submit,.ai-export-button,.ai-result-action { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(120deg, var(--primary-color), var(--primary-color-hover)); box-shadow: 0 10px 22px color-mix(in srgb, var(--primary-color) 22%, transparent); font: 700 .74rem Poppins, sans-serif; cursor: pointer; }
.ai-app-submit:hover,.ai-export-button:hover,.ai-result-action:hover { color: #fff; filter: brightness(1.04); transform: translateY(-1px); }
.ai-app-submit:disabled,.ai-export-button:disabled { opacity: .62; cursor: wait; transform: none; }
.ai-app-status { min-height: 19px; margin: 0; font-size: .65rem; }
.ai-app-status.is-error { color: #dc2626; }

.ai-app-result { min-height: 580px; overflow: hidden; }
.ai-app-empty { display: grid; min-height: 580px; box-sizing: border-box; place-content: center; justify-items: center; padding: 34px; text-align: center; }
.ai-app-empty > .material-symbols-outlined { display: grid; width: 66px; height: 66px; place-items: center; border-radius: 50% 50% 18px 50%; color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 11%, var(--ai-soft)); font-size: 31px; }
.ai-app-empty h2 { margin: 15px 0 6px; color: var(--ai-ink); font-size: 1.05rem; }
.ai-app-empty p { max-width: 390px; margin: 0; font-size: .7rem; line-height: 1.65; }
.ai-result-body { max-height: 780px; overflow-y: auto; padding: 25px; }
.ai-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid var(--ai-line); }
.ai-result-head h2 { margin: 2px 0 0; color: var(--ai-ink); font-size: 1.35rem; }
.ai-result-head span { color: var(--primary-color); font-size: .6rem; font-weight: 800; letter-spacing: .08em; }
.ai-result-section { margin-top: 21px; }
.ai-result-section h3 { margin: 0 0 8px; color: var(--ai-ink); font-size: .86rem; }
.ai-result-section p,.ai-result-section li { font-size: .72rem; line-height: 1.7; }
.ai-result-section ul { display: grid; gap: 7px; padding-left: 20px; }
.ai-result-item { margin-top: 13px; padding: 15px; border: 1px solid var(--ai-line); border-radius: 15px; background: var(--ai-soft); }
.ai-result-item h3 { margin: 0 0 8px; color: var(--ai-ink); font-size: .82rem; }
.ai-result-item ol { padding-left: 20px; }
.ai-result-item li { font-size: .7rem; }
.ai-result-item .is-correct { color: #16813a; font-weight: 700; }
.ai-result-plain { margin: 20px 0 0; color: var(--ai-ink); white-space: pre-wrap; font-size: .78rem; line-height: 1.8; }
.ai-transcript-segments { display: grid; gap: 8px; margin-top: 18px; }
.ai-transcript-segments details { padding: 11px 13px; border: 1px solid var(--ai-line); border-radius: 12px; background: var(--ai-soft); }
.ai-transcript-segments summary { color: var(--ai-ink); font-size: .7rem; font-weight: 700; cursor: pointer; }
.ai-result-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.ai-result-action.is-secondary { color: var(--ai-ink); border: 1px solid var(--ai-line); background: var(--ai-soft); box-shadow: none; }
.ai-export-bar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 21px -25px -25px; padding: 15px 25px; border-top: 1px solid var(--ai-line); background: color-mix(in srgb, var(--ai-surface) 94%, transparent); backdrop-filter: blur(12px); }
.ai-export-bar p { margin: 0; font-size: .66rem; }
.ai-export-button { min-height: 40px; padding: 8px 13px; }
.ai-coach-day { display: grid; grid-template-columns: 66px 1fr; gap: 11px; margin-top: 8px; padding: 11px; border-radius: 12px; background: var(--ai-soft); font-size: .69rem; }
.ai-coach-day strong { color: var(--primary-color); }

[data-theme="dark"] .ai-app-form,
[data-theme="dark"] .ai-app-result { box-shadow: 0 20px 55px rgba(0, 0, 0, .22); }
[data-theme="dark"] .ai-app-live { color: #5ee0a5; }
[data-theme="dark"] .ai-result-item .is-correct { color: #65d98f; }

@media (max-width: 980px) {
  .ai-app-shell { grid-template-columns: 1fr; }
  .ai-app-sidebar { position: static; display: flex; height: auto; align-items: center; gap: 12px; overflow-x: auto; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--ai-line); }
  .ai-app-sidebar > p,.ai-app-usage { display: none; }
  .ai-app-sidebar nav { display: flex; gap: 5px; }
  .ai-app-sidebar nav a { white-space: nowrap; }
  .ai-app-main { padding-top: 30px; }
  .ai-app-workspace { grid-template-columns: 1fr; }
  .ai-app-result,.ai-app-empty { min-height: 420px; }
}

@media (max-width: 600px) {
  .ai-app-main { padding: 22px 14px 36px; }
  .ai-app-heading { grid-template-columns: auto 1fr; gap: 13px; }
  .ai-app-heading-icon { width: 49px; height: 49px; }
  .ai-app-heading-copy > span { font-size: .68rem; }
  .ai-app-live { display: none; }
  .ai-app-row { grid-template-columns: 1fr; }
  .ai-app-form { padding: 18px; border-radius: 19px; }
  .ai-app-field textarea { min-height: 240px; }
  .ai-dropzone { min-height: 180px; }
  .ai-export-bar { align-items: stretch; flex-direction: column; }
  .ai-export-button { width: 100%; }
}

/* Keep the app navigation and workspace comfortably inside the viewport. */
@media (min-width: 981px) {
  .ai-app-shell {
    grid-template-columns: 244px minmax(0, 1fr);
    gap: clamp(18px, 2.5vw, 34px);
    padding: clamp(22px, 3vw, 38px);
  }

  .ai-app-sidebar {
    top: 92px;
    height: calc(100vh - 116px);
    padding: 26px 18px;
    overflow-y: auto;
    border: 1px solid var(--ai-line);
    border-radius: 22px;
    box-shadow: 0 18px 50px color-mix(in srgb, #0f172a 8%, transparent);
  }

  .ai-app-main {
    padding: 8px 0 44px;
  }
}

@media (max-width: 980px) {
  .ai-app-shell {
    padding-top: 18px;
  }

  .ai-app-sidebar {
    margin-inline: clamp(14px, 3vw, 28px);
    border: 1px solid var(--ai-line);
    border-radius: 16px;
  }
}