:root {
  --semyon-green: #315b43;
  --semyon-light: #f5f1e8;
  --semyon-border: #d7dfd8;
  --semyon-text: #23382b;
}

.semyon-demo { margin: 0; min-height: 100vh; background: #eee9df; font-family: Arial, sans-serif; }
.semyon-demo__content { max-width: 900px; margin: auto; padding: 60px 24px; color: #445248; }
body.semyon-page-locked { position: fixed; right: 0; left: 0; width: 100%; overflow: hidden; }
.semyon-widget, .semyon-widget * { box-sizing: border-box; }
.semyon-widget { position: fixed; z-index: 99999; right: 22px; bottom: 10px; font-family: Arial, sans-serif; color: var(--semyon-text); }
.semyon-launcher { display: block; border: 0; border-radius: 999px; padding: 15px 22px; background: var(--semyon-green); color: white; font-size: 17px; font-weight: 700; box-shadow: 0 8px 24px #0003; cursor: pointer; }
.semyon-panel { display: flex; flex-direction: column; width: min(420px, calc(100vw - 24px)); height: min(880px, calc(100vh - 20px)); overflow: hidden; border: 1px solid var(--semyon-border); border-radius: 22px; background: #fff; box-shadow: 0 18px 55px #0003; overscroll-behavior: contain; }
.semyon-panel[hidden] { display: none; }
.semyon-panel[hidden] + * { display: block; }
.semyon-header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--semyon-green); color: white; }
.semyon-header div:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.semyon-header strong { font-size: 19px; }
.semyon-header span { font-size: 13px; opacity: .85; }
.semyon-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 50%; background: #fff; color: var(--semyon-green); box-shadow: inset 0 0 0 1px #ffffff80; }
.semyon-avatar svg { display: block; width: 38px; height: 38px; }
.semyon-avatar__bg { fill: #fffaf2; }
.semyon-avatar__flower { transform-origin: 24px 24px; }
.semyon-avatar__petal { fill: #315b43; opacity: .9; }
.semyon-avatar__center { fill: #fffaf2; stroke: #d2b06a; stroke-width: 1.8; }
.semyon-avatar__letter { fill: #315b43; font-family: Arial, sans-serif; font-size: 13px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.semyon-close { border: 0; background: transparent; color: white; font-size: 30px; cursor: pointer; }
.semyon-messages { flex: 1; overflow-y: auto; padding: 14px; background: #faf9f5; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.semyon-message { max-width: 90%; margin: 0 0 10px; padding: 10px 12px; border-radius: 15px; font-size: 15px; line-height: 1.34; white-space: pre-wrap; }
.semyon-message--assistant { border: 1px solid var(--semyon-border); border-bottom-left-radius: 4px; background: white; }
.semyon-message--user { margin-left: auto; border-bottom-right-radius: 4px; background: var(--semyon-green); color: white; }
.semyon-waiting { color: #66756b; }
.semyon-products { display: grid; gap: 10px; margin: 0 0 15px; }
.semyon-product { display: flex; gap: 10px; padding: 9px; border: 1px solid var(--semyon-border); border-radius: 14px; background: white; color: var(--semyon-text); text-decoration: none; }
.semyon-product img { width: 66px; height: 76px; border-radius: 9px; object-fit: cover; }
.semyon-product span { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.semyon-product strong { font-size: 15px; }
.semyon-product em { color: var(--semyon-green); font-style: normal; font-weight: 700; }
.semyon-comparison { display: grid; gap: 9px; margin: 0 0 13px; padding: 10px; border: 1px solid var(--semyon-border); border-radius: 16px; background: #fff; }
.semyon-comparison__title { font-size: 15px; }
.semyon-comparison__grid { display: grid; gap: 10px; }
.semyon-comparison-card { display: grid; gap: 6px; padding: 9px; border: 1px solid #e1e7e2; border-radius: 13px; background: #fbfcfa; }
.semyon-comparison-card img { width: 100%; max-height: 104px; border-radius: 10px; object-fit: cover; }
.semyon-comparison-card strong { font-size: 14px; line-height: 1.25; }
.semyon-comparison-card em { color: var(--semyon-green); font-style: normal; font-weight: 700; }
.semyon-comparison-card ul { display: grid; gap: 3px; margin: 0; padding-left: 17px; color: #445248; font-size: 12px; line-height: 1.28; }
.semyon-comparison-card a { color: var(--semyon-green); font-size: 12px; font-weight: 700; text-decoration: none; }
.semyon-comparison p { margin: 0; color: #66756b; font-size: 12px; line-height: 1.3; }
.semyon-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 15px; }
.semyon-links a { padding: 8px 10px; border-radius: 9px; background: #e8efe9; color: var(--semyon-green); font-size: 14px; font-weight: 700; text-decoration: none; }
.semyon-quick-shell { border-top: 1px solid var(--semyon-border); background: white; }
.semyon-quick-shell[hidden] { display: none; }
.semyon-quick-toggle { width: 100%; border: 0; border-bottom: 1px solid #edf1ed; padding: 6px 14px; background: #f8faf7; color: #52675a; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
.semyon-quick { display: flex; gap: 6px; overflow-x: auto; padding: 7px 10px; background: white; }
.semyon-quick-shell--collapsed .semyon-quick { display: none; }
.semyon-quick button { flex: 0 0 auto; border: 1px solid #b5c5b9; border-radius: 999px; padding: 6px 9px; background: white; color: var(--semyon-green); font-size: 12px; font-weight: 700; cursor: pointer; }
.semyon-form { padding: 12px 14px 14px; border-top: 1px solid var(--semyon-border); background: white; }
.semyon-form label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.semyon-form div { display: flex; gap: 8px; }
.semyon-form input { min-width: 0; flex: 1; border: 1px solid #9aac9e; border-radius: 11px; padding: 12px; font-size: 16px; }
.semyon-form button { border: 0; border-radius: 11px; padding: 0 14px; background: var(--semyon-green); color: white; font-size: 15px; font-weight: 700; cursor: pointer; }

@media (max-width: 520px) {
  .semyon-widget { right: 8px; bottom: calc(10px + env(safe-area-inset-bottom)); left: 8px; }
  .semyon-launcher { margin-left: auto; padding: 13px 18px; font-size: 16px; }
  .semyon-panel { width: 100%; height: min(800px, calc(100dvh - 72px - env(safe-area-inset-bottom))); max-height: calc(100dvh - 72px - env(safe-area-inset-bottom)); border-radius: 18px; }
  @supports not (height: 100dvh) {
    .semyon-panel { height: min(800px, calc(100vh - 72px)); max-height: calc(100vh - 72px); }
  }
  .semyon-header { min-height: 64px; padding: 12px 14px; }
  .semyon-close { min-width: 44px; min-height: 44px; font-size: 34px; line-height: 1; }
  .semyon-message { font-size: 14px; }
  .semyon-quick-toggle { padding: 5px 12px; font-size: 12px; }
  .semyon-quick { flex-wrap: wrap; gap: 5px; overflow-x: visible; padding: 6px 8px; }
  .semyon-quick button { flex: 1 1 calc(50% - 5px); padding: 6px 7px; font-size: 12px; line-height: 1.15; white-space: normal; }
}