:root {
  --msg-accent: var(--af-accent, #6d3df5);
  --msg-accent-strong: var(--af-accent-strong, #5427d8);
  --msg-accent-soft: var(--af-accent-soft, #f3efff);
  --msg-ink: var(--af-ink, #211a2e);
  --msg-muted: var(--af-muted, #797181);
  --msg-border: var(--af-border, #e8e3ef);
  --msg-canvas: var(--af-canvas, #f7f5fa);
  --msg-surface: #ffffff;
  --main-blue: var(--msg-accent);
  --main-blue-hover: var(--msg-accent-strong);
  --main-bg: var(--msg-canvas);
  --radius: var(--af-radius-lg, 19px);
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  color: var(--msg-ink);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--msg-accent) 9%, transparent), transparent 27rem),
    var(--msg-canvas);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

header {
  position: sticky;
  top: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--msg-border) 88%, transparent);
  background: color-mix(in srgb, var(--msg-canvas) 90%, transparent);
  box-shadow: none;
  backdrop-filter: blur(16px);
}

.header-row {
  width: min(1440px, calc(100% - 40px));
  max-width: none;
  padding: 26px 0 18px;
  gap: 14px;
}

.header-title {
  margin-right: auto;
  color: var(--msg-ink);
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  font-weight: 850;
  letter-spacing: -0.04em;
}

.header-search {
  flex: 0 1 320px;
}

.search-input {
  width: 100%;
  max-width: none;
  min-height: 43px;
  padding: 0 14px;
  border: 1px solid var(--msg-border);
  border-radius: 13px;
  color: var(--msg-ink);
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.84rem;
  box-shadow: 0 8px 24px rgba(45, 31, 70, 0.04);
}

.search-input:focus {
  border-color: color-mix(in srgb, var(--msg-accent) 50%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--msg-accent) 10%, transparent);
}

.header-tools {
  gap: 9px;
}

.counter {
  min-height: 41px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--msg-accent) 23%, white);
  border-radius: 999px;
  color: var(--msg-accent-strong);
  background: var(--msg-accent-soft);
  font-size: 0.74rem;
  font-weight: 750;
}

.btn-refresh {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--msg-accent), var(--msg-accent-strong));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--msg-accent) 20%, transparent);
  font-size: 0.76rem;
  font-weight: 780;
}

.btn-refresh:hover {
  background: var(--msg-accent-strong);
}

.container-main {
  width: min(1440px, calc(100% - 40px));
  max-width: none;
  padding: 18px 0 48px;
}

.filters-box {
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid var(--msg-border);
  border-radius: var(--af-radius-lg, 18px);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 40px rgba(45, 31, 70, 0.055);
}

.filter-label {
  color: #4b4358;
  font-size: 0.75rem;
  font-weight: 750;
}

.filter-select {
  min-height: 38px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--msg-border);
  border-radius: var(--af-radius-md, 11px);
  color: var(--msg-ink);
  background: #fbfafd;
  font-size: 0.76rem;
}

.filter-checkbox {
  width: 17px;
  height: 17px;
  padding: 0;
  accent-color: var(--msg-accent);
}

.conversation-block {
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid var(--msg-border);
  border-radius: var(--af-radius-xl, 22px);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 46px rgba(45, 31, 70, 0.06);
}

.conversation-header {
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--msg-border);
}

.conversation-title {
  color: var(--msg-ink);
  font-size: 0.82rem;
  font-weight: 820;
}

.conversation-title::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #28b982;
  box-shadow: 0 0 0 4px rgba(40, 185, 130, 0.1);
  content: "";
}

.conversation-buttons {
  gap: 7px;
}

.btn-copy,
.btn-order,
.btn-audio {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--msg-border);
  border-radius: var(--af-radius-md, 10px);
  color: #51495d;
  background: #faf9fc;
  font-size: 0.7rem;
  font-weight: 720;
}

.btn-copy:hover,
.btn-order:hover,
.btn-audio:hover {
  color: var(--msg-accent-strong);
  border-color: color-mix(in srgb, var(--msg-accent) 28%, white);
  background: var(--msg-accent-soft);
}

.btn-fav {
  color: #e8ad2d;
  font-size: 1.2rem;
}

.conversation-body .msg {
  margin: 0 0 9px;
  padding: 12px 14px;
  border-radius: 14px;
  color: #41394d;
  background: #faf9fc;
  font-size: 0.79rem;
  line-height: 1.55;
}

.conversation-body .msg:nth-of-type(even) {
  background: linear-gradient(135deg, var(--msg-accent-soft), color-mix(in srgb, var(--msg-accent-soft) 36%, white));
}

.msg strong,
.conversation-body strong {
  color: var(--msg-accent-strong);
}

.msg-date {
  padding: 4px 2px 8px;
  color: var(--msg-muted);
  font-size: 0.68rem;
}

.msg-cost {
  color: #51495d;
  font-size: 0.7rem;
}

a[href] {
  color: var(--msg-accent-strong);
}

mark {
  color: #5e4311;
  background: #fff0b8;
}

#copyNotification,
.notification {
  border-radius: 999px;
  background: #18815f;
  box-shadow: 0 16px 40px rgba(45, 31, 70, 0.16);
  font-size: 0.75rem;
  font-weight: 750;
}

@media (max-width: 760px) {
  .header-row,
  .container-main {
    width: min(100% - 24px, 1440px);
  }

  .header-row {
    align-items: stretch;
    flex-direction: column;
  }

  .header-search {
    flex-basis: auto;
  }

  .header-tools {
    justify-content: space-between;
  }

  .conversation-block {
    padding: 15px;
    border-radius: 18px;
  }

  .msg-date {
    align-items: flex-start;
    flex-direction: column;
  }
}