.brand-button {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.brand-button > span:last-child {
  display: grid;
}

.brand-button b {
  font-size: 19px;
}

.brand-button small {
  margin-top: 2px;
  color: #869591;
  font-size: 12px;
}

.app-view {
  min-width: 0;
}

.eyebrow {
  letter-spacing: 0;
}

.page-view {
  min-height: 620px;
  padding: 42px 4px 24px;
}

.view-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid #dfe9e6;
}

.view-heading h2 {
  margin: 6px 0 0;
  color: #203c39;
  font-size: 29px;
  letter-spacing: 0;
}

.view-badge {
  padding: 6px 9px;
  color: #126b5a;
  background: #dff2ec;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
}

.quick .quick-item {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 1px 8px;
  min-width: 0;
  padding: 13px 10px;
  border: 0;
  color: inherit;
  background: #ffffff;
  border-radius: 8px;
  text-align: left;
  box-shadow: 0 5px 18px #1f4d400c;
  cursor: pointer;
}

.quick .quick-item .quick-icon {
  grid-row: 1 / 3;
}

.quick .quick-item b {
  font-size: 12px;
}

.quick .quick-item small {
  color: #94a19e;
  font-size: 10px;
}

.result-chat-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding-top: 17px;
  border-top: 1px solid #e4ece9;
}

.result-chat-entry span,
.result-chat-entry b {
  display: block;
}

.result-chat-entry .section-title {
  margin: 0 0 4px;
}

.result-chat-entry button,
.empty-state button {
  padding: 9px 13px;
  border: 0;
  color: #ffffff;
  background: #126b5a;
  border-radius: 7px;
  font-weight: 700;
  cursor: pointer;
}

.chat-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0;
  padding: 11px 0;
  border-bottom: 1px solid #e6eeeb;
}

.chat-context small,
.chat-context b {
  display: block;
}

.chat-context small {
  margin-bottom: 3px;
  color: #879693;
  font-size: 10px;
}

.chat-context b {
  max-width: 560px;
  overflow: hidden;
  color: #304944;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-button {
  flex: none;
  padding: 6px 9px;
  border: 1px solid #cddbd7;
  color: #526b66;
  background: transparent;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
}

.chat-empty {
  padding: 68px 0 54px;
  text-align: center;
}

.chat-empty h3 {
  margin: 0 0 18px;
  color: #29433e;
  font-size: 20px;
}

.prompt-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.prompt-list button {
  padding: 8px 11px;
  border: 1px solid #d7e3df;
  color: #49615d;
  background: #ffffff;
  border-radius: 7px;
  cursor: pointer;
}

.chat-thread {
  min-height: 280px;
  padding: 8px 0 22px;
}

.chat-composer {
  position: sticky;
  bottom: 76px;
  z-index: 3;
  margin-top: 18px !important;
  padding: 12px 0 4px !important;
  background: linear-gradient(to bottom, #f1f6f400, #f1f6f4 18%);
}

.followup-message.streaming .followup-bubble::after {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 4px;
  background: #16816a;
  vertical-align: -2px;
  content: "";
  animation: stream-caret .8s steps(1) infinite;
}

.followup-message.stopped .followup-bubble {
  color: #687a76;
}

.chat-composer button.stop {
  background: #8f5047;
}

@keyframes stream-caret {
  50% { opacity: 0; }
}

.record-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 22px 0;
  border-top: 1px solid #e0e9e6;
  border-bottom: 1px solid #e0e9e6;
}

.sync-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid #d8e5e1;
  background: #f8fbfa;
  border-radius: 8px;
}

.sync-note b,
.sync-note span {
  display: block;
}

.sync-note b {
  color: #31514b;
  font-size: 12px;
}

.sync-note span {
  margin-top: 3px;
  color: #85938f;
  font-size: 10px;
}

.sync-note button {
  flex: none;
  padding: 7px 11px;
  border: 0;
  color: #ffffff;
  background: #126b5a;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

.record-stats div {
  padding: 17px 10px;
  text-align: center;
}

.record-stats div + div {
  border-left: 1px solid #e0e9e6;
}

.record-stats strong,
.record-stats span {
  display: block;
}

.record-stats strong {
  color: #174f45;
  font-size: 23px;
}

.record-stats span {
  margin-top: 3px;
  color: #879592;
  font-size: 11px;
}

.record-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.segmented {
  display: flex;
  padding: 3px;
  background: #e5eeeb;
  border-radius: 7px;
}

.segmented button {
  padding: 6px 11px;
  border: 0;
  color: #6c7d79;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
}

.segmented button.active {
  color: #174f45;
  background: #ffffff;
  box-shadow: 0 2px 7px #24483d14;
  font-weight: 700;
}

#recordSearch {
  width: min(280px, 45%);
  padding: 8px 10px;
  border: 1px solid #d7e2df;
  background: #ffffff;
  border-radius: 7px;
  font: inherit;
}

.record-list {
  display: grid;
}

.record-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 17px 2px;
  border-bottom: 1px solid #dfe9e6;
}

.record-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #899793;
  font-size: 10px;
}

.record-subject,
.record-video-badge {
  padding: 3px 6px;
  color: #126b5a;
  background: #dff2ec;
  border-radius: 4px;
  font-weight: 700;
}

.record-video-badge {
  color: #80541e;
  background: #fff0dc;
}

.record-item h3 {
  display: -webkit-box;
  margin: 8px 0 5px;
  overflow: hidden;
  color: #29433e;
  font-size: 15px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.record-item p {
  margin: 0;
  color: #778783;
  font-size: 11px;
}

.record-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.record-actions button {
  width: 34px;
  height: 34px;
  border: 1px solid #d9e4e0;
  color: #60736e;
  background: #ffffff;
  border-radius: 7px;
  cursor: pointer;
}

.record-actions button.favorite {
  color: #a76821;
  background: #fff5e8;
}

.record-actions button.open-record {
  width: auto;
  padding: 0 10px;
  color: #ffffff;
  background: #126b5a;
  border-color: #126b5a;
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 70px 0;
  color: #82918d;
  text-align: center;
}

.empty-state.hidden,
.followup-thread.hidden {
  display: none;
}

.empty-state strong {
  color: #3e5752;
}

.empty-state button {
  margin-top: 8px;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 25px 0;
  border-bottom: 1px solid #dfe9e6;
}

.profile-logout {
  margin-left: auto;
}

.auth-panel {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #d9e5e1;
  background: #ffffff;
  border-radius: 8px;
}

.auth-tabs {
  width: max-content;
  margin-bottom: 14px;
}

.auth-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 10px;
}

.auth-form label,
.auth-form label span {
  display: block;
}

.auth-form label span {
  margin-bottom: 5px;
  color: #657671;
  font-size: 11px;
  font-weight: 700;
}

.auth-form input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #cfddd9;
  background: #fbfdfc;
  border-radius: 7px;
  font: inherit;
}

.auth-form > button {
  height: 40px;
  padding: 0 17px;
  border: 0;
  color: #ffffff;
  background: #126b5a;
  border-radius: 7px;
  font-weight: 700;
  cursor: pointer;
}

.auth-form > button:disabled {
  background: #a9bdb7;
  cursor: wait;
}

.auth-submit {
  grid-column: 1 / -1;
}

.auth-code-control {
  display: flex !important;
  gap: 7px;
  margin: 0 !important;
}

.auth-code-control input {
  flex: 1;
}

.auth-code-control button {
  flex: none;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #bfd2cc;
  color: #126b5a;
  background: #edf6f3;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.auth-code-control button:disabled {
  color: #82938e;
  cursor: wait;
}

.auth-link {
  margin-top: 10px;
  padding: 0;
  border: 0;
  color: #667a75;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}

.auth-message {
  min-height: 18px;
  margin: 9px 0 0;
  color: #8a5d26;
  font-size: 11px;
}

.auth-message.error {
  color: #a24e45;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #ffffff;
  background: #126b5a;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 800;
}

.profile-identity b,
.profile-identity small {
  display: block;
}

.profile-identity small {
  margin-top: 4px;
  color: #8a9895;
}

.profile-section {
  padding: 22px 0 8px;
  border-bottom: 1px solid #dfe9e6;
}

.profile-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.profile-section-title h3 {
  margin: 0;
  font-size: 14px;
}

.profile-section-title span {
  color: #8b9996;
  font-size: 10px;
}

.usage-list > div,
.setting-row,
.danger-row,
.setting-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  border-bottom: 1px solid #e7eeec;
}

.usage-list > div:last-child,
.profile-section > :last-child {
  border-bottom: 0;
}

.usage-list span {
  color: #62736f;
  font-size: 13px;
}

.usage-list strong {
  color: #23433d;
  font-size: 13px;
}

.setting-row b,
.setting-row small,
.danger-row b,
.danger-row small,
.setting-action b,
.setting-action small {
  display: block;
}

.setting-row small,
.danger-row small,
.setting-action small {
  margin-top: 3px;
  color: #8c9996;
  font-size: 10px;
}

.setting-row input {
  width: 40px;
  height: 22px;
  accent-color: #126b5a;
}

.danger-row {
  width: 100%;
  padding: 0;
  border: 0;
  color: #a24e45;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.setting-action {
  width: 100%;
  padding: 0;
  border: 0;
  color: #126b5a;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.setting-action:disabled {
  color: #91a19d;
  cursor: default;
}

@media (max-width: 620px) {
  .auth-form {
    grid-template-columns: 1fr;
  }

  .auth-form button {
    width: 100%;
  }

  .record-tools {
    align-items: stretch;
    flex-direction: column;
  }

  #recordSearch {
    width: 100%;
  }
}

footer nav button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

footer nav .nav-item {
  display: grid;
  gap: 2px;
  place-items: center;
  min-width: 62px;
  color: #9aa8a5;
  font-size: 18px;
}

footer nav .nav-item > span {
  color: inherit;
}

footer nav .nav-item.active {
  color: #126b5a;
}

footer nav .nav-item small {
  font-size: 10px;
}

@media (max-width: 520px) {
  .page-view {
    min-height: 650px;
    padding-top: 30px;
  }

  .view-heading h2 {
    font-size: 25px;
  }

  .quick .quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }

  .result-chat-entry {
    align-items: flex-start;
  }

  .chat-empty {
    padding: 54px 0 42px;
  }

  .record-tools {
    align-items: stretch;
    flex-direction: column;
  }

  #recordSearch {
    width: 100%;
  }

  .record-item {
    grid-template-columns: 1fr;
  }

  .record-actions {
    justify-content: flex-end;
  }
}