/* Цветовое ядро = админка (backend/tenant_admin/assets/admin.css) */
:root {
  --bg: #fafaf9;
  --surface: #ffffff;
  --text: #1F1F1F;
  --muted: #6E6A63;
  --accent: #F40018;
  --accent-hover: #d10015;
  --border: #E8E6E3;
  --on-accent: #ffffff;

  --card: var(--surface);
  --softtext: var(--muted);
  --brand: var(--text);
  --brand2: var(--text);
  --ink: var(--text);
  --line: var(--border);
  --chip: rgba(0,0,0,.06);
  --accent-soft: rgba(244,0,24,.18);
  --accent-ring: rgba(0,0,0,.25);
  --accent-shadow: rgba(0,0,0,.08);
  --radius: 8px;
  --maxw: 980px;
  --sidew: 260px;
  --header-h: 64px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --icon-size: 20px;
  --transition: 0.2s ease;
}

html {
  scroll-behavior: smooth;
}

html,body{
    background:var(--bg);
    color:var(--text);
  }

  body::before, body::after{
    content:"";
    position:fixed;
    inset:auto;
    width:680px;
    height:680px;
    border-radius:999px;
    filter:blur(70px);
    opacity:.3;
    pointer-events:none;
    z-index:0;
  }
  body::before{
    left:-180px;
    top:-220px;
    background:radial-gradient(circle at 30% 30%, rgba(0,0,0,.04), transparent 60%);
  }
  body::after{
    right:-220px;
    top:-160px;
    background:radial-gradient(circle at 30% 30%, rgba(0,0,0,.03), transparent 62%);
  }


  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
    display:flex;
    min-height:100vh;
  }

  .section,
  .card{
    background: var(--surface);
    border: 1px solid var(--border);
  }

  .service-card,
  .specialist-card,
  .card {
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: 0.2s ease;
  }
  .service-card:hover,
  .specialist-card:hover,
  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  }

  .btn {
    background: var(--accent);
    color: var(--on-accent);
  }
  button {
    background: none;
    color: var(--text);
    border: none;
  }
  .btn:hover {
    background: var(--accent-hover);
  }

  .side-nav button,
  .side-system button {
    background: none;
    color: var(--text);
  }
  .side-nav button:hover,
  .side-system button:hover {
    color: var(--accent);
  }

  /* Unified button style */
  button,
  .btn,
  .hero-cta,
  .contact-button {
    border-radius: var(--radius);
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition);
  }
  .burger,
  .attach-btn,
  .manager-btn,
  .mic-btn {
    padding: 0;
    border-radius: var(--radius);
  }
  button:hover,
  .btn:hover,
  .hero-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }
  .burger:hover,
  .attach-btn:hover,
  .manager-btn:hover,
  .mic-btn:hover {
    transform: none;
  }

  /* Unified icon size */
  svg {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
  }

  .muted{
    color: var(--muted);
  }

  /* Sidebar / menu alignment */
  .sidebar-nav a,
  .side-nav button,
  .side-nav .nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 10px 14px;
    border-radius: var(--radius);
  }
  .sidebar-nav a:hover {
    background: rgba(0,0,0,0.05);
  }

  /* Container */
  .container {
    max-width: 1200px;
    margin: auto;
    padding: var(--space-lg);
  }

  /* ======== PAGE LOADER ======== */

  .page-loader{
    position:fixed;
    inset:0;
    background:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:3000;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .page-loader.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  .loader{
    display:flex;
    gap:6px;
    font-size:72px;
    font-weight:700;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
    color:var(--accent);
    perspective:700px;
  }

  .loader span{
    display:inline-block;
    transform-origin:0 70%;
    animation:flip 1.8s infinite linear;
  }

  .loader span:nth-child(2){ animation-delay:.15s; }
  .loader span:nth-child(3){ animation-delay:.30s; }
  .loader span:nth-child(4){ animation-delay:.45s; }
  .loader span:nth-child(5){ animation-delay:.60s; }
  .loader span:nth-child(6){ animation-delay:.75s; }

  @keyframes flip{
    0%   { transform:rotateX(0deg); }
    35%  { transform:rotateX(360deg); }
    100% { transform:rotateX(360deg); }
  }

  @media (max-width:600px){
    .loader{
      padding:16px 22px;
    }
    .loader > span{
      font-size:52px;
      letter-spacing:4px;
    }
  }

  /* ======== ОСНОВНОЙ UI ======== */

  /* Sidebar */
  .side{
    width:var(--sidew);
    min-width:var(--sidew);
    border-right:1px solid var(--line);
      background:linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(255,255,255,.98) 35%, var(--surface) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding:14px 10px 18px;
    display:flex;
    flex-direction:column;
    gap:12px;
    position:relative;
    z-index:20;
  }
  .brand{
    font-weight:600;
    font-size:15px;
    padding:8px 10px;
    color:var(--text);
  }
  .side .brand{
    display:flex;
    align-items:center;
    min-height:56px;
  }
  .side .brand .logo{
    display:block;
    width:auto;
    max-width:160px;
    max-height:44px;
    object-fit:contain;
  }
  .navhdr{
    font-size:12px;
    color:var(--muted);
    padding:6px 10px;
  }
  .nav{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:0 6px;
  }
  .nav button{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:10px 10px;
    border:0;
    background:transparent;
    border-radius:8px;
    cursor:pointer;
    color:var(--text);
    position:relative;
  }
  .nav button:hover{
    background:var(--accent-soft);
  }
  .nav button.active{
    background:var(--accent-soft);
  }

  .menu-item,
  .nav-item{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
  }
  .menu-item svg,
  .nav-item svg{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .menu-item span,
  .nav-item span{
    line-height: 1;
  }
  .menu-item:hover,
  .nav-item:hover{
    background: rgba(0,0,0,0.05);
    border-radius: 8px;
  }
  .nav button.nav-item{
    padding: 10px 14px;
  }

  .sidebar-nav a,
  .side-nav button,
  .side-nav .nav-item{
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 10px 14px;
    border-radius: var(--radius);
  }
  .sidebar-nav svg,
  .side-nav svg{
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
  }
  .sidebar-nav span,
  .side-nav span{
    line-height: 1;
  }
  .side-nav .ico{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .side-nav .ico svg{
    display: block;
    width: 20px;
    height: 20px;
  }
  .side-nav .nav-label{
    text-align: left;
    flex: 1;
    min-width: 0;
    line-height: 1.2;
  }
  .side-nav button{
    text-align: left;
    align-items: center;
    min-height: 40px;
  }

  .ico{
    width:20px;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 20px;
  }
  .ico svg{
    width:18px;
    height:18px;
    stroke:rgba(0,0,0,.55);
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
  }
  .nav button:hover .ico svg{
    stroke:rgba(0,0,0,.8);
  }
  .nav button.active .ico svg{
    stroke:var(--accent);
  }

  .side-system{
    margin-bottom:28px;
  }

  .side-divider{
    height:1px;
    background: var(--border);
    margin:12px 0 24px 0;
  }

  .side-nav,
  .side-system{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .side-nav button,
  .side-system button{
    width:100%;
    text-align:left;
    padding:10px 14px;
    border-radius:8px;
    background:transparent;
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    min-height:40px;
  }
  .side-system .sidebar-action{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    min-width:0;
    padding:0;
    cursor:pointer;
  }
  .side-system .sidebar-icon{
    width:20px;
    height:20px;
    min-width:20px;
    flex-shrink:0;
    color:#666;
  }
  .side-system .nav-label{
    text-align:left;
    flex:1;
    min-width:0;
    line-height:1.2;
  }
  .sidebar-action{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0;
    cursor:pointer;
  }
  .sidebar-icon{
    width:20px;
    height:20px;
    color:#666;
    flex:0 0 20px;
  }
  .side-system button:hover .sidebar-icon{
    color:#111;
  }
  .side-nav button:hover{
    background:var(--accent-soft);
  }
  .side-system button:hover{
    background:var(--chip);
  }

  .sep{
    height:1px;
    background:var(--line);
    margin:8px 6px;
  }

  .side-backdrop{
    display:none;
  }

  /* Responsive nav: >1200px = text menu (default above) */

  /* 1200–768px: icon-only menu */
  @media (min-width:769px) and (max-width:1200px){
    .side{
      width:72px;
      min-width:72px;
      padding:14px 8px;
    }
    .side-nav .nav-label,
    .side-system .nav-label{
      display:none;
    }
    .side .brand{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font-size:12px;
      padding:8px 4px;
    }
    .side .brand .logo{
      max-width:48px;
    }
  }

  /* Main */
  .main{
    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
  }
  @media (min-width:769px){
    .main{
      padding-left:24px;
    }
  }
  .header{
    padding:14px 18px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    gap:12px;
  }
  .header .brand{
    display:none;
  }
  .header .brand .logo{
    max-height:40px;
    max-width:120px;
    object-fit:contain;
  }
  .header .brand-text .site-title{
    font-size:1rem;
    font-weight:600;
    color:var(--text);
  }
  .header .header-actions{
    flex-shrink:0;
  }
  .burger{
    display:none;
  }
  .wrap{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    /* запас под фиксированный композер, чтобы интро/контент не обрезались снизу */
    padding-bottom:calc(var(--composer-h, 140px) + 24px);
  }
  .thread{
    flex:1;
    width:100%;
    padding:18px 26px 22px;
    max-width:1240px;
    margin:0 auto;
  }
  .msg{
    display:flex;
    gap:12px;
    margin:18px 0;
    width:100%;
  }
  .avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--chip);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    color: var(--text);
    flex:0 0 auto;
  }
  .body{
    flex:1;
    min-width:0;
  }
  /* Hero: same horizontal grid as .block sections inside .thread */
  .hero {
    padding: 48px 0 32px;
    border-radius: var(--radius);
    background: transparent;
    margin-bottom: 24px;
    width: 100%;
    box-sizing: border-box;
  }
  .hero-container {
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .hero-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
  }
  .hero-image {
    order: -1;
  }
  @media (min-width: 768px) {
    .hero-content {
      grid-template-columns: 1fr 2fr;
      gap: 40px;
    }
    .hero-image {
      order: 0;
    }
    .hero-text {
      max-width: 420px;
    }
  }
  /* Типографика: mobile-first. Hero H1 — главный заголовок страницы. */
  .hero-title {
    font-family: inherit;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin: 0 0 16px 0;
  }
  .hero-subline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 0;
  }
  .hero-subtitle,
  .hero-subtext {
    font-size: 18px;
    color: #555;
    margin-bottom: 24px;
    letter-spacing: 1px;
  }
  .hero-cta {
    margin-top: 0;
  }
  .hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 4px;
  }
  .hero-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
  }
  .hero .btn-primary,
  .header .btn-primary,
  .service-action .btn-primary,
  .specialist-action .btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 8px;
    padding: 10px 18px;
    border: none;
    font-weight: 500;
    cursor: pointer;
  }
  .hero .btn-secondary {
    background: var(--accent-soft);
    color: var(--text);
    border-radius: 8px;
    padding: 10px 18px;
    border: 1px solid var(--accent-ring);
    font-weight: 500;
    cursor: pointer;
  }
  @media (min-width: 768px) {
    .hero-title {
      font-size: 48px;
    }
  }
  @media (max-width: 900px) {
    .hero {
      padding: 40px 0 24px;
    }
    .hero-subtitle,
    .hero-subtext {
      font-size: 16px;
      margin-bottom: 20px;
    }
    .hero-image img {
      max-height: 320px;
      object-fit: cover;
    }
  }

  .block{
    margin-bottom:32px;
  }
  /* Заголовки секций (Услуги, Специалисты и т.д.): визуально ниже Hero. */
  .block-title{
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
  }
  @media (min-width: 768px) {
    .block-title {
      font-size: 28px;
    }
  }
  .services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:20px;
  }
  .service-card{
    background:var(--card);
    border-radius:var(--radius);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .service-media{
    aspect-ratio:3/2;
    width:100%;
    overflow:hidden;
    background:linear-gradient(135deg, var(--accent-soft), rgba(255,255,255,0.9));
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .service-media img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .service-content{
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
    min-height:0;
  }
  .service-title{
    font-weight:600;
    flex:0 0 auto;
  }
  .service-card-body{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    min-height:0;
  }
  .service-description{
    font-size:14px;
    color:var(--muted);
    line-height:1.45;
    flex:1 1 auto;
    min-height:3.6em;
  }
  .service-card-footer{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:auto;
  }
  .service-price-row{
    flex:0 0 auto;
    min-height:1.35em;
  }
  .service-price-row:empty{
    display:none;
  }
  .service-price{
    font-size:15px;
    font-weight:600;
    color:var(--text);
    line-height:1.3;
    letter-spacing:0.01em;
  }
  .service-full-desc{
    flex:0 0 auto;
    font-size:13px;
    color:var(--muted);
  }
  .service-full-desc summary{
    cursor:pointer;
    color:var(--accent);
  }
  .service-full-desc-body{
    margin-top:8px;
    font-size:14px;
    color:var(--text);
    line-height:1.45;
    white-space:pre-wrap;
  }
  .service-action{
    flex:0 0 auto;
  }
  .service-action button{
    width:100%;
  }

  /* Services horizontal slider */
  .services-slider{
    position:relative;
    width:100%;
  }
  .services-slider .services-track{
    display:flex;
    flex-wrap:nowrap;
    gap:20px;
    overflow-x:auto;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    align-items:stretch;
  }
  .services-slider .service-card{
    flex:0 0 260px;
    min-width:0;
  }
  .services-slider .specialist-card{
    flex:0 0 260px;
    min-width:0;
  }
  .services-slider .service-media{
    aspect-ratio:1/1;
  }
  .services-slider .slider-prev,
  .services-slider .slider-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
  }
  .services-slider .slider-prev:hover,
  .services-slider .slider-next:hover{
    background:var(--accent-soft);
    border-color:var(--accent);
  }
  .services-slider .slider-prev{
    left:-8px;
  }
  .services-slider .slider-next{
    right:-8px;
  }
  .services-slider.slider-buttons-hidden .slider-prev,
  .services-slider.slider-buttons-hidden .slider-next{
    display:none;
  }

  .specialists-grid{
    gap:18px;
  }
  .specialist-card{
    background:var(--card);
    border-radius:var(--radius);
    padding:18px;
    border:1px solid var(--border);
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:stretch;
  }
  .specialist-avatar{
    aspect-ratio:1/1;
    width:100px;
    margin:0 auto;
    align-self:center;
    border-radius:50%;
    overflow:hidden;
    background:var(--accent-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    font-size:28px;
    color:var(--accent);
    flex-shrink:0;
  }
  .specialist-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .specialist-name{
    font-weight:600;
    font-size:16px;
    text-align:center;
  }
  .specialist-role{
    font-size:14px;
    color:var(--muted);
    line-height:1.35;
    min-height:1.2em;
    text-align:center;
  }
  .specialist-rating-row{
    font-size:13px;
    color:var(--text);
    line-height:1.35;
    text-align:center;
  }
  .specialist-rating-row.specialist-rating-empty{
    color:var(--muted);
    font-style:italic;
  }
  .specialist-reviews-link{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    border:none;
    background:transparent;
    color:var(--accent);
    font-size:13px;
    font-weight:600;
    text-align:center;
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .specialist-reviews-link:hover{
    color:var(--accent-hover, var(--accent));
  }
  .specialist-reviews-modal__window{
    max-width:480px;
    width:calc(100% - 24px);
    max-height:min(88vh, 720px);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:18px 18px 16px;
  }
  .specialist-reviews-modal__close{
    position:absolute;
    top:10px;
    right:12px;
    border:none;
    background:transparent;
    color:var(--muted);
    font-size:24px;
    line-height:1;
    cursor:pointer;
    padding:4px;
  }
  .specialist-reviews-modal__close:hover{
    color:var(--text);
  }
  .specialist-reviews-trust-head{
    margin:0 0 2px;
    font-size:12px;
    font-weight:650;
    color:var(--text);
    line-height:1.3;
  }
  .specialist-reviews-trust-short{
    margin:0 0 5px;
    font-size:11px;
    font-weight:500;
    color:var(--muted);
    line-height:1.35;
  }
  .specialist-reviews-trust-details{
    margin:0 0 8px;
    font-size:11px;
    color:var(--muted);
    line-height:1.35;
  }
  .specialist-reviews-trust-details__summary{
    cursor:pointer;
    color:var(--muted);
    font-weight:600;
    font-size:11px;
    list-style:none;
  }
  .specialist-reviews-trust-details__summary:hover{
    color:var(--text);
  }
  .specialist-reviews-trust-details__summary::-webkit-details-marker{
    display:none;
  }
  .specialist-reviews-trust-details__text{
    margin:6px 0 0;
    font-size:11px;
    line-height:1.4;
    color:var(--muted);
  }
  .specialist-reviews-summary{
    margin:0 0 10px;
    font-size:14px;
    font-weight:600;
    color:var(--text);
  }
  .specialist-reviews-filters{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:0 0 12px;
  }
  .specialist-reviews-filter{
    flex:1;
    min-width:0;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    cursor:pointer;
    text-align:center;
  }
  .specialist-reviews-filter.active{
    border-color:var(--accent);
    color:var(--accent);
    font-weight:600;
  }
  .specialist-reviews-status{
    font-size:13px;
    color:var(--muted);
    margin:0 0 8px;
    min-height:1.2em;
  }
  .specialist-reviews-status--error{
    color:#b42318;
  }
  .specialist-reviews-list{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-right:2px;
    -webkit-overflow-scrolling:touch;
  }
  .specialist-review-card{
    border:1px solid rgba(31, 31, 31, 0.08);
    border-radius:14px;
    padding:14px;
    background:#fff;
    box-shadow:0 1px 3px rgba(31, 31, 31, 0.06);
  }
  .specialist-review-card__top{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    margin-bottom:8px;
  }
  .specialist-review-card__rating{
    font-size:13px;
    letter-spacing:.02em;
    white-space:nowrap;
  }
  .public-review-rating{
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .public-review-stars.review-stars{
    display:inline-flex;
    align-items:center;
    gap:1px;
    letter-spacing:0;
  }
  .review-stars__star--filled{
    color:#d97706;
    font-size:15px;
    line-height:1;
  }
  .review-stars__star--empty{
    color:rgba(217, 119, 6, 0.28);
    font-size:15px;
    line-height:1;
  }
  .public-review-rating__value{
    font-size:14px;
    font-weight:700;
    color:#b45309;
    line-height:1;
  }
  .specialist-review-card__date{
    font-size:11px;
    color:var(--muted);
    white-space:nowrap;
  }
  .specialist-review-card__comment{
    font-size:15px;
    line-height:1.5;
    color:var(--text);
    margin-bottom:8px;
    word-break:break-word;
  }
  .specialist-review-card__admin-reply,
  .public-review-admin-reply{
    margin:10px 0 0;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(198, 167, 94, 0.22);
    background:linear-gradient(180deg, rgba(198, 167, 94, 0.08) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow:0 1px 2px rgba(31, 31, 31, 0.04);
  }
  .specialist-review-card__admin-reply-label{
    font-size:11px;
    font-weight:600;
    letter-spacing:0;
    text-transform:none;
    color:rgba(110, 106, 99, 0.95);
    margin-bottom:5px;
  }
  .specialist-review-card__admin-reply-text{
    font-size:14px;
    line-height:1.5;
    color:rgba(31, 31, 31, 0.88);
    word-break:break-word;
  }
  .specialist-review-card__meta{
    font-size:11px;
    color:var(--muted);
    line-height:1.35;
  }
  .specialist-reviews-actions{
    margin-top:10px;
    flex-shrink:0;
  }
  .specialist-reviews-load-more{
    width:100%;
    border:1px solid rgba(198, 167, 94, 0.28);
    background:transparent;
    color:var(--muted);
    font-weight:500;
    font-size:13px;
    padding:8px 12px;
    border-radius:999px;
    box-shadow:none;
  }
  .specialist-reviews-load-more:hover:not(:disabled){
    background:var(--accent-soft);
    border-color:rgba(198, 167, 94, 0.42);
    color:var(--text);
  }
  .specialist-meta-label{
    font-size:11px;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:600;
    margin-bottom:4px;
  }
  .specialist-meta-placeholder{
    color:var(--muted);
    font-size:13px;
    line-height:1.35;
  }
  .specialist-branch-block{
    font-size:13px;
    line-height:1.4;
  }
  .specialist-branch-title{
    font-weight:600;
    color:var(--text);
  }
  .specialist-branch-sub{
    color:var(--muted);
    font-size:13px;
  }
  .specialist-services-block{
    font-size:13px;
  }
  .specialist-service-chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    max-height:84px;
    overflow:hidden;
  }
  .specialist-service-chip{
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    background:var(--accent-soft);
    border:1px solid rgba(0,0,0,.06);
    color:var(--text);
    font-size:12px;
    line-height:1.25;
    max-width:100%;
    white-space:normal;
    word-break:break-word;
  }
  .specialist-service-more{
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
  }
  .specialist-bio-details{
    text-align:left;
    font-size:13px;
    color:var(--muted);
  }
  .specialist-bio-details summary{
    cursor:pointer;
    color:var(--accent);
  }
  .specialist-bio-full{
    margin-top:8px;
    font-size:14px;
    color:var(--text);
    line-height:1.45;
    white-space:pre-wrap;
  }
  .specialist-action{
    margin-top:auto;
  }

  .specialists-branch-filter{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:16px;
  }
  .branch-filter-btn{
    padding:8px 14px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface);
    color:var(--text);
    font-size:14px;
    cursor:pointer;
  }
  .branch-filter-btn:hover{
    background:var(--accent-soft);
  }
  .branch-filter-btn.active{
    background:var(--accent);
    color:var(--on-accent);
    border-color:var(--accent);
  }

  .contacts-company{
    margin:16px 0 20px;
    padding:16px 18px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    text-align:left;
  }
  .contacts-about{
    font-size:15px;
    line-height:1.5;
    color:var(--text);
    margin-bottom:10px;
  }
  .contacts-company-phone,
  .contacts-company-email{
    font-size:15px;
    margin-top:6px;
  }
  .contacts-company-phone a,
  .contacts-company-email a{
    color:var(--accent);
    text-decoration:none;
  }
  .contacts-company-phone a:hover,
  .contacts-company-email a:hover{
    text-decoration:underline;
  }

  .contacts-branches{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:20px;
    margin-top:20px;
  }
  .contact-branch-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .contact-branch-title{
    font-weight:600;
    font-size:1.05rem;
  }
  .contact-branch-address,
  .contact-branch-phone{
    font-size:14px;
    color:var(--muted);
  }
  .contact-branch-phone a{
    color:var(--accent);
    text-decoration:none;
  }
  .contact-branch-phone a:hover{
    text-decoration:underline;
  }
  .contact-branch-route{
    margin-top:4px;
    align-self:flex-start;
  }

  /* Geo Discovery v1 — tenant locations (contacts section) */
  .geo-discovery{
    text-align:left;
  }
  .geo-discovery-header{
    margin-bottom:var(--space-md);
  }
  .geo-discovery-lead{
    margin:6px 0 0;
    color:var(--muted);
    font-size:14px;
    line-height:1.5;
    max-width:42rem;
  }
  .geo-discovery-section-label{
    margin:0 0 10px;
    font-size:13px;
    font-weight:650;
    color:var(--text);
  }
  .geo-discovery-anchor-alias{
    display:block;
    width:0;
    height:0;
    overflow:hidden;
    position:absolute;
    pointer-events:none;
  }
  .geo-discovery-shell{
    display:grid;
    gap:var(--space-md);
  }
  .geo-discovery-map-panel{
    position:relative;
    border-radius:calc(var(--radius) + 6px);
    border:1px solid rgba(244,0,24,.28);
    background:linear-gradient(155deg, rgba(244,0,24,.1) 0%, var(--card) 38%, var(--surface) 100%);
    box-shadow:0 14px 36px rgba(0,0,0,.06), 0 2px 8px rgba(244,0,24,.08);
    overflow:hidden;
    min-height:220px;
  }
  .geo-discovery-map-panel__inner{
    display:flex;
    flex-direction:column;
    gap:var(--space-md);
    padding:var(--space-md);
    min-height:220px;
    height:100%;
  }
  .geo-discovery-map-placeholder{
    position:relative;
    flex:1 1 auto;
    min-height:148px;
    border-radius:calc(var(--radius) + 2px);
    border:1px dashed rgba(244,0,24,.4);
    background:
      radial-gradient(circle at 72% 28%, rgba(244,0,24,.16) 0%, transparent 48%),
      radial-gradient(circle at 24% 68%, rgba(244,0,24,.08) 0%, transparent 42%),
      linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.15) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .geo-discovery-map-placeholder__grid{
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
    background-size:24px 24px;
    opacity:.55;
    pointer-events:none;
  }
  .geo-discovery-map-pin{
    position:relative;
    z-index:1;
    width:46px;
    height:46px;
    color:var(--accent);
    filter:drop-shadow(0 6px 14px rgba(244,0,24,.35));
  }
  .geo-discovery-map-placeholder__label{
    position:absolute;
    left:12px;
    top:12px;
    z-index:1;
    padding:4px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--muted);
    background:rgba(255,255,255,.82);
    border:1px solid var(--border);
  }
  .geo-discovery-map-caption{
    padding:14px 16px;
    border-radius:calc(var(--radius) + 2px);
    background:rgba(255,255,255,.88);
    border:1px solid var(--border);
    box-shadow:0 4px 14px rgba(0,0,0,.04);
  }
  .geo-discovery-map-caption__title{
    font-weight:600;
    font-size:15px;
    line-height:1.3;
    color:var(--text);
  }
  .geo-discovery-map-caption__sub{
    margin-top:6px;
    font-size:13px;
    line-height:1.45;
    color:var(--muted);
  }
  .geo-discovery-cards{
    min-width:0;
  }
  .geo-discovery-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }
  .geo-entity-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:calc(var(--radius) + 4px);
    padding:18px 16px 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    box-shadow:0 8px 22px rgba(0,0,0,.04);
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    cursor:pointer;
  }
  .geo-entity-card:hover{
    box-shadow:0 12px 28px rgba(0,0,0,.06);
  }
  .geo-entity-card--active,
  .geo-entity-card:focus-within{
    border-color:rgba(244,0,24,.62);
    box-shadow:0 14px 32px rgba(244,0,24,.14);
  }
  .geo-entity-card__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:24px;
  }
  .geo-entity-card__badges{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .geo-entity-card__badge{
    display:inline-flex;
    align-items:center;
    padding:3px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.02em;
    line-height:1.3;
  }
  .geo-entity-card__badge--nearest{
    color:#6b5a2e;
    background:rgba(244,0,24,.2);
    border:1px solid rgba(244,0,24,.42);
  }
  .geo-entity-card__distance{
    margin-left:auto;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .geo-entity-card__distance[data-geo-distance]:not(:empty):not([data-geo-distance="—"]){
    color:var(--accent);
  }
  .geo-entity-card__title{
    margin:0;
    font-size:1.06rem;
    font-weight:600;
    line-height:1.25;
    color:var(--text);
  }
  .geo-entity-card__address,
  .geo-entity-card__phone{
    margin:0;
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:14px;
    line-height:1.45;
    color:var(--muted);
  }
  .geo-entity-card__phone a{
    color:var(--text);
    text-decoration:none;
  }
  .geo-entity-card__phone a:hover{
    color:var(--accent);
  }
  .geo-entity-card__icon{
    flex:0 0 16px;
    width:16px;
    height:16px;
    margin-top:2px;
    color:var(--accent);
    opacity:.85;
  }
  .geo-entity-card__cta{
    width:100%;
    margin-top:4px;
  }
  .geo-entity-card__actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    margin-top:2px;
  }
  .geo-entity-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:44px;
    min-width:44px;
    padding:10px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    line-height:1.2;
    text-decoration:none;
    cursor:pointer;
    border:1px solid transparent;
    font-family:inherit;
    transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .geo-entity-action__icon{
    width:16px;
    height:16px;
    flex:0 0 16px;
  }
  .geo-entity-action--primary{
    background:var(--accent);
    color:var(--on-accent, #fff);
    border-color:var(--accent);
    box-shadow:0 6px 16px rgba(244,0,24,.28);
  }
  .geo-entity-action--primary:hover{
    background:var(--accent-hover);
    border-color:var(--accent-hover);
  }
  .geo-entity-action--ghost{
    background:var(--surface);
    color:var(--text);
    border-color:rgba(244,0,24,.38);
  }
  .geo-entity-action--ghost:hover:not(:disabled){
    background:var(--accent-soft);
    border-color:var(--accent);
  }
  .geo-entity-action:disabled{
    opacity:.45;
    cursor:not-allowed;
  }
  .geo-discovery-empty{
    color:var(--muted);
    font-size:14px;
    margin:8px 0 0;
    padding:16px;
    border-radius:var(--radius);
    border:1px dashed var(--border);
    background:var(--card);
  }
  .geo-discovery-company{
    margin-top:var(--space-md);
    padding:16px 18px;
    border-radius:calc(var(--radius) + 2px);
    border:1px solid var(--border);
    background:var(--card);
    font-size:14px;
    line-height:1.5;
    box-shadow:0 6px 18px rgba(0,0,0,.03);
  }
  .geo-discovery-company__email a{
    color:var(--accent);
    text-decoration:none;
  }
  .geo-discovery-company__phone{
    margin-top:8px;
  }
  .geo-discovery-company__phone a{
    color:var(--accent);
    text-decoration:none;
  }
  .geo-discovery-company__phone a:hover,
  .geo-discovery-company__email a:hover{
    text-decoration:underline;
  }
  @media (min-width:768px){
    .geo-discovery-shell{
      grid-template-columns:minmax(280px, 360px) minmax(0, 1fr);
      gap:var(--space-lg);
      align-items:stretch;
    }
    .geo-discovery-map-panel{
      min-height:100%;
    }
    .geo-discovery-map-panel__inner{
      min-height:100%;
      padding:var(--space-lg) var(--space-md);
    }
    .geo-discovery-map-placeholder{
      min-height:180px;
    }
    .geo-discovery-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:16px;
    }
  }
  @media (min-width:1100px){
    .geo-discovery-grid{
      grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    }
  }
  @media (max-width:599px){
    .geo-entity-card__actions{
      grid-template-columns:1fr;
    }
    .geo-entity-action{
      width:100%;
    }
  }

  /* If intro hero ever ends up inside a chat message, neutralize the avatar/role column so it stays centered. */
  .hero-host-msg{
    gap:0 !important;
    margin:0 !important;
  }
  .hero-host-msg .avatar,
  .hero-host-msg .role{
    display:none !important;
  }
  .hero-host-msg .body{
    flex:1 !important;
    max-width:100% !important;
  }

  .role{
    font-size:12px;
    color:var(--muted);
    margin-bottom:6px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }

  /* КНОПКА СКАЧАТЬ ОТДЕЛЬНОЕ СООБЩЕНИЕ АССИСТЕНТА */
  .msg-download-btn{
    flex:0 0 auto;
    margin-left:8px;
    width:24px;
    height:24px;
    border-radius:999px;
    border:0;
    background:var(--chip);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .msg-download-btn svg{
    width:16px;
    height:16px;
    stroke:var(--ink);
    stroke-width:2.4; /* ЖИРНАЯ СТРЕЛКА */
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
  }
  .msg-download-btn:hover{
    background:var(--accent-soft);
  }

  /* ассистент — без пузыря */
  .msg.assistant .msg-text{
    background:transparent;
    padding:0;
    border-radius:0;
    border:0;
    line-height:1.55;
  }
  /* пользователь — пузырь справа */
  .msg.user{justify-content:flex-end}
  .msg.user .avatar{order:3}
  .msg.user .body{max-width:70%;flex:0 0 auto;
margin-left:auto}
  .msg.user .msg-text{
    background: var(--ink);
    color: var(--on-accent);
    padding:10px 12px;
    border-radius:14px 14px 4px 14px;
    display:inline-block;
  }

  /* Scroll-to-bottom (tenant chat) */
  .ai-scroll-bottom-btn{
    position:fixed;
    left:var(--sidew);
    right:0;
    bottom:calc(var(--composer-h, 140px) + 16px);
    width:48px;
    height:48px;
    margin:0 auto;
    z-index:950;
    border:0;
    border-radius:50%;
    background:#fff;
    box-shadow:0 4px 16px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
    color:var(--text);
    font-size:22px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, visibility .2s ease, transform .2s ease, background .15s ease;
  }
  .ai-scroll-bottom-btn.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .ai-scroll-bottom-btn:hover{
    background:#f7f7f7;
  }
  .ai-scroll-bottom-btn:active{
    transform:scale(.96);
  }

  /* Composer */
  .composer{
    position:fixed;
    left:var(--sidew);
    right:0;
    bottom:0;
    z-index:900;
    border-top:1px solid var(--line);
    background:var(--bg);
    padding:14px 16px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -10px 28px rgba(0,0,0,.06);
  }
  .handoff-return-bar{
    max-width:var(--maxw);
    margin:0 auto 8px;
    display:flex;
    justify-content:flex-end;
  }
  .handoff-return-bar[hidden]{
    display:none !important;
  }
  .handoff-return-ai-btn{
    border:1px solid rgba(0,0,0,.12);
    border-radius:999px;
    background:#fff;
    color:var(--text);
    font-size:12px;
    line-height:1.2;
    padding:6px 12px;
    cursor:pointer;
    white-space:nowrap;
  }
  .handoff-return-ai-btn:hover{
    background:#f3efe6;
    border-color:rgba(0,0,0,.18);
  }
  .handoff-return-ai-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
  }
  .handoff-feedback-bar{
    max-width:var(--maxw);
    margin:0 auto 8px;
  }
  .handoff-feedback-bar[hidden]{
    display:none !important;
  }
  .handoff-feedback-inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 10px;
    padding:8px 12px;
    border:1px solid rgba(0,0,0,.1);
    border-radius:12px;
    background:#fff;
    box-shadow:0 4px 14px rgba(0,0,0,.04);
  }
  .handoff-feedback-q{
    font-size:13px;
    color:var(--text);
    font-weight:500;
  }
  .handoff-feedback-actions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-left:auto;
  }
  .handoff-feedback-btn{
    border:1px solid rgba(0,0,0,.12);
    border-radius:999px;
    background:#fff;
    color:var(--text);
    font-size:12px;
    line-height:1.2;
    padding:6px 12px;
    cursor:pointer;
    white-space:nowrap;
  }
  .handoff-feedback-btn:hover{
    background:#f3efe6;
    border-color:rgba(0,0,0,.18);
  }
  .handoff-feedback-btn--ghost{
    background:transparent;
    color:#666;
  }
  .handoff-feedback-comment-wrap{
    flex:1 1 100%;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .handoff-feedback-comment{
    width:100%;
    box-sizing:border-box;
    border:1px solid rgba(0,0,0,.12);
    border-radius:8px;
    padding:6px 8px;
    font-size:12px;
    resize:vertical;
    min-height:44px;
  }
  .handoff-feedback-msg{
    margin:0;
    padding:8px 12px;
    font-size:12px;
    color:var(--text);
    border:1px solid rgba(0,0,0,.08);
    border-radius:10px;
    background:#fff;
  }
  .handoff-feedback-msg--muted{
    color:#666;
  }
  .composer .inner{
    max-width:var(--maxw);
    margin:0 auto;
    display:flex;
    align-items:flex-end;
    gap:8px;
  }

  .attach-btn{
    width:34px;
    height:34px;
    border-radius:999px;
    border:0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    background:rgba(0,0,0,.04);
    color:rgba(0,0,0,.65);
    font-size:22px;
    flex:0 0 auto;
    line-height:1;
  }
  .attach-btn:hover{
    background:rgba(0,0,0,.08);
  }
  .attach-btn.has-file{
    background: var(--accent);
    color: var(--on-accent);
  }

  .manager-btn{
    width:34px;
    height:34px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    background:#f3efe6;
    color:#333;
    font-size:16px;
    flex:0 0 auto;
    line-height:1;
  }
  .manager-btn:hover{
    background:#f3efe6;
    border-color:rgba(0,0,0,.18);
  }
  .manager-btn.pending{
    border-color:rgba(0,0,0,.25);
    background:#f3efe6;
    color:#333;
  }
  .manager-btn.active{
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
  }

  .composer-input-wrap{
    position:relative;
    flex:1;
    min-width:0;
  }

  .composer-input-shell{
    position:relative;
    display:flex;
    align-items:flex-end;
    width:100%;
    border-radius:12px;
    border:2px solid var(--accent, #F40018);
    background:var(--surface);
    box-sizing:border-box;
    box-shadow:0 0 0 4px var(--composer-accent-glow, var(--accent-soft, rgba(244, 0, 24, 0.12)));
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .composer-input-shell:focus-within{
    border-color:var(--accent, #F40018);
    box-shadow:
      0 0 0 4px var(--accent-soft, rgba(244, 0, 24, 0.14)),
      0 10px 28px var(--composer-accent-glow, rgba(244, 0, 24, 0.1));
  }

  .composer-attach-wrap{
    position:relative;
    flex:0 0 auto;
    align-self:flex-end;
    padding:0 0 10px 8px;
  }

  .composer-attach-menu{
    position:absolute;
    left:0;
    bottom:calc(100% + 8px);
    min-width:220px;
    padding:6px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.08);
    background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    z-index:960;
  }
  .composer-attach-menu[hidden]{
    display:none !important;
  }
  .composer-attach-menu__item{
    display:block;
    width:100%;
    padding:10px 12px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--text);
    font-size:14px;
    line-height:1.3;
    text-align:left;
    cursor:pointer;
    white-space:nowrap;
  }
  .composer-attach-menu__item:hover,
  .composer-attach-menu__item:focus-visible{
    background:rgba(0,0,0,.04);
    outline:none;
  }
  .composer-attach-menu__item:disabled{
    opacity:.55;
    cursor:not-allowed;
  }
  .composer-attach-menu__item.pending{
    color:#333;
  }
  .composer-attach-menu__item.active{
    color:var(--accent);
    font-weight:600;
  }

  .composer-attachments{
    max-width:100%;
    margin:0 0 4px;
    font-size:12px;
    display:none;
    flex-wrap:wrap;
    gap:6px;
  }
  .composer-attachments span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    background:var(--chip);
    color:var(--text);
    white-space:nowrap;
  }
  .composer-attachments span button{
    border:0;
    background:transparent;
    cursor:pointer;
    font-size:13px;
    padding:0;
    line-height:1;
  }

  #ta{
    width:100%;
    flex:1;
    min-width:0;
    min-height:52px;
    max-height:160px;
    resize:vertical;
    padding:18px 52px 10px 4px;
    border-radius:0;
    border:0;
    background:transparent;
    color: var(--text);
    outline:none;
    text-transform:none !important;
  }
  #ta:focus{
    outline:none;
  }
  #ta::placeholder{
    text-transform:none;
    letter-spacing:0;
    color:#B9BDC6;
    font-size:12px;
  }

  .send-btn{
    position:absolute;
    right:10px;
    bottom:10px;
    width:32px;
    height:32px;
    border-radius:10px;
    border:0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    background:rgba(0,0,0,.04);
    color:rgba(0,0,0,.35);
    font-size:16px;
    transition:background .15s ease,color .15s.ease,transform .1s ease;
  }
  .send-btn.active{
    background: var(--accent, #F40018);
    color: var(--on-accent);
    box-shadow:0 6px 14px var(--composer-accent-glow, var(--accent-soft, rgba(244, 0, 24, 0.18)));
  }
  .send-btn:active{
    transform:translateY(1px);
  }

  /* Review draft: validate-only roundtrip (not chat send) */
  .aidronik-review-validate-row{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:10px;
    padding:6px 0 2px;
    width:100%;
    box-sizing:border-box;
  }
  .aidronik-review-validate-status{
    flex:1 1 160px;
    margin:0;
    padding-top:6px;
    font-size:13px;
    line-height:1.35;
    color:var(--softtext);
  }
  .aidronik-review-validate-status.is-error{
    color:#b71c1c;
  }
  .aidronik-review-validate-status.is-ok{
    color:#1b5e20;
  }

  .mic-btn{
    position:absolute;
    right:48px;
    bottom:10px;
    width:32px;
    height:32px;
    border-radius:10px;
    border:0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    background:rgba(0,0,0,.02);
    color:rgba(0,0,0,.5);
    font-size:16px;
    transition:background .15s ease,color .15s ease,transform .1s ease;
  }
  .mic-btn:hover{
    background:rgba(0,0,0,.05);
  }
  .mic-btn.listening{
    background: var(--text);
    color: var(--on-accent);
  }
  .mic-btn svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    stroke-width:1.8;
    fill:none;
  }

  .chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--chip);
    padding:6px 14px;
    border-radius:var(--radius);
    font-size:12px;
    cursor:pointer;
    margin-right:8px;
    border:1px solid rgba(0,0,0,.06);
    outline:none;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  .chip:hover{
    filter:none;
    background:var(--accent-soft);
    box-shadow:0 2px 6px rgba(0,0,0,.06);
  }
  .chip:focus-visible{
    outline:2px solid var(--accent-ring);
    outline-offset:2px;
  }

  .team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:10px;
    margin-top:10px;
  }

  .team-card{
    background:var(--card);
    border-radius:12px;
    border:1px solid(var(--line));
    padding:10px 12px;
    display:flex;
    gap:10px;
    align-items:flex-start;
    opacity:0;
    transform:translateY(8px) scale(.96);
    animation:cardPop .32s cubic-bezier(.16,.84,.44,1) forwards;
    animation-delay:var(--delay, 0s);
  }

  .team-photo{
    width:44px;
    height:44px;
    border-radius:999px;
    overflow:hidden;
    flex:0 0 44px;
    cursor:pointer;
  }
  .team-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .team-info{
    flex:1;
    min-width:0;
  }
  .team-name{
    font-size:14px;
    font-weight:600;
    margin-bottom:2px;
  }
  .team-role{
    font-size:12px;
    color:var(--muted);
    margin-bottom:4px;
  }
  .team-contacts{
    font-size:12px;
    color:var(--softtext);
    word-wrap:break-word;
    word-break:break-word;
  }
  .team-contacts a{
    color:var(--ink);
    text-decoration:none;
  }
  .team-contacts a:hover{
    text-decoration:underline;
  }

  @keyframes cardPop{
    0%{
      opacity:0;
      transform:translateY(8px) scale(.96);
    }
    100%{
      opacity:1;
      transform:translateY(0) scale(1);
    }
  }

  .json-block{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:12px 14px;
    margin-top:12px;
    font-size:14px;
    color:var(--text);
  }
  .json-block h2{
    margin:0 0 6px;
    font-size:16px;
    font-weight:600;
  }
  .json-block p{
    margin:4px 0;
    line-height:1.4;
  }
  .img-block{
    margin-top:8px;
  }
  .img-block img{
    width:100%;
    border-radius:var(--radius);
    display:block;
  }
  .contact-map{
    width:100%;
    border-radius:var(--radius);
    display:block;
    margin-bottom:8px;
  }
  .contact-info{
    font-size:14px;
    line-height:1.4;
  }
  
  .cases-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
  margin-top:10px;
}
.case-card{
  background:var(--card);
  border-radius:12px;
  border:1px solid var(--line);
  padding:12px;
}
.case-title{
  font-weight:700;
  margin-bottom:6px;
}
.case-meta{
  font-size:12px;
  color:var(--softtext);
  line-height:1.4;
}
.case-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.case-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  text-decoration:none;
  color: var(--brand);
  font-weight:600;
  font-size:13px;
  background: var(--surface);
}
.case-img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:10px;
  display:block;
}


  .news-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:16px;
    margin-top:12px;
  }
  .news-card{
    background:var(--card);
    border-radius:12px;
    border:1px solid(var(--line));
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.08);
    display:flex;
    flex-direction:column;
  }
  .news-image img{
    width:100%;
    height:160px;
    object-fit:cover;
    display:block;
  }
  .news-content{
    padding:12px;
  }
  .news-title{
    font-weight:600;
    margin-bottom:4px;
  }
  .news-snippet{
    font-size:14px;
    color:var(--softtext);
  }
  .news-link{
    font-size:14px;
    color:var(--brand);
    text-decoration:none;
    margin-top:6px;
    display:inline-block;
    font-weight:600;
  }

  @media (max-width:768px){
    .hero-banner{
      margin:6px 10px 0;
      padding:10px 12px;
      gap:10px;
    }
    .hero-banner .hero-title{font-size:16px;}
    .hero-sub{font-size:12px;}
  }

  /* ======== ILINK-LIKE INTRO HERO (AiDRONIK) ======== */

  /* Hero lives inside .thread.
     IMPORTANT: keep it aligned with the same column as chat messages.
     The earlier “bleed to edges” (negative margins) made the hero look shifted-left
     compared to the chat column, especially noticeable right after the first assistant answer.
  */
  .thread > .ilink-hero{ margin:0 0 18px; }

  /* Defensive: if the hero ever gets injected inside a chat message, remove bubble offsets so it doesn't look "shifted left". */
  .msg .ilink-hero{
    margin:0 !important;
    width:100% !important;
  }
  .msg .ilink-hero-shell{ max-width:1100px; margin:0 auto; }

  .ilink-hero{
    width:100%;
    position:relative;
    border-radius:18px;
    overflow:hidden;
    border-bottom:1px solid var(--line);
    padding:34px 26px 26px;
    background:transparent;
    /* IMPORTANT: не режем контент интро — высота должна расти по содержимому,
       иначе на некоторых экранах карточки обрываются из-за max-height + overflow:hidden */
    max-height:none;
    min-height:unset;
    transition: opacity .35s ease, padding .35s ease, border-color .35s ease;
  }
  .ilink-hero-shell{
    max-width:1100px;
    margin:0 auto;
    position:relative;
    z-index:2;
  }
  .ilink-hero-top{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    padding:2px 0 14px;
  }
  .ilink-logo{
    height:34px;
    width:auto;
    object-fit:contain;
    filter:drop-shadow(0 8px 18px rgba(15,23,42,.08));
  }

  .ilink-hero-grid{
    display:grid;
    grid-template-columns: 1.08fr .92fr;
    gap:18px;
    align-items:stretch;
  }

  .ilink-kicker{
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(45,62,54,.72);
    font-weight:700;
  }
  .ilink-title{
    margin:10px 0 0;
    /* Match platform hero typography: bigger + heavier, but responsive */
    font-size:clamp(34px, calc(4.2vw + 8px), 92px);
    font-weight:900;
    line-height:1.02;
    letter-spacing:-0.03em;
    color:var(--text);
  }
  .ilink-sub{
    margin:12px 0 0;
    font-size:clamp(15px, 1.05vw, 20px);
    line-height:1.5;
    color:rgba(45,62,54,.84);
    max-width:60ch;
  }
  /* extra breathing room between multiple subtitle paragraphs */
  .ilink-sub + .ilink-sub{ margin-top:16px; }

  .ilink-actions{
    display:flex;
    gap:10px;
    margin-top:18px;
    flex-wrap:wrap;
  }
  .ilink-btn{
    appearance:none;
    border:1px solid rgba(0,0,0,.08);
    background:rgba(255,255,255,.70);
    color:var(--text);
    padding:11px 14px;
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    backdrop-filter:blur(10px);
  }
  .ilink-btn.primary{
    border:0;
    color: var(--on-accent);
    background: var(--accent);
    box-shadow:0 14px 34px rgba(0,0,0,.12);
  }
  .ilink-btn.ghost{
    background:rgba(255,255,255,.55);
  }
  .ilink-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 44px rgba(15,23,42,.14);
    border-color:rgba(0,0,0,.15);
  }
  .ilink-btn:active{ transform:translateY(0); }

  .ilink-metrics{
    display:flex;
    gap:10px;
    margin-top:18px;
    flex-wrap:wrap;
  }
  .ilink-metric{
    background:rgba(255,255,255,.56);
    border:1px solid rgba(15,23,42,.10);
    border-radius:14px;
    padding:10px 12px;
    min-width:126px;
    backdrop-filter:blur(10px);
  }
  .ilink-metric .n{
    font-weight:900;
    font-size:14px;
    color:var(--text);
  }
  .ilink-metric .t{
    font-size:12px;
    color:rgba(45,62,54,.70);
    margin-top:2px;
  }

  .ilink-hero-cards{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }
  .ilink-card{
    text-align:left;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.62);
    border-radius:18px;
    padding:14px 14px;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    backdrop-filter:blur(10px);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .ilink-card::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:radial-gradient(120px 80px at 20% 10%, rgba(0,0,0,.04), transparent 70%);
    opacity:.55;
    pointer-events:none;
  }
  .ilink-card:hover{
    transform:translateY(-2px);
    box-shadow:0 22px 54px rgba(15,23,42,.16);
    border-color:rgba(0,0,0,.12);
  }
  .ilink-card-ico{
    width:36px;
    height:36px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--accent-soft);
    color:var(--ink);
    font-size:18px;
    font-weight:900;
    position:relative;
    z-index:2;
  }
  .ilink-card-title{
    margin-top:10px;
    font-weight:900;
    color:var(--text);
    position:relative;
    z-index:2;
  }
  .ilink-card-sub{
    margin-top:6px;
    color:rgba(45,62,54,.82);
    font-size:13px;
    line-height:1.35;
    position:relative;
    z-index:2;
  }
  .ilink-card-more{
    margin-top:10px;
    font-size:12px;
    color:var(--brand2);
    font-weight:800;
    position:relative;
    z-index:2;
  }



  /* =============================
     Online Admin block (home)
     ============================= */
  .site-admin{margin-top:16px;}
  .site-admin__shell{
    max-width:1100px;
    margin:0 auto;
    border-radius:22px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.66);
    box-shadow:0 14px 34px rgba(15,23,42,.08);
    padding:16px 16px 14px;
  }
  .site-admin__grid{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap:16px;
    align-items:stretch;
  }
  .site-admin__badge{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.12);
    background:var(--accent-soft);
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(15,23,42,.72);
  }
  .site-admin__title{
    margin:10px 0 0;
    /* Keep the same typography system as the rest of the site */
    font-size:clamp(30px, calc(2.6vw + 10px), 52px);
    line-height:1.02;
    font-weight:900;
    letter-spacing:-0.03em;
    color:var(--text);
  }
  .site-admin__lines{margin-top:12px; display:grid; gap:8px; color:rgba(45,62,54,.84); font-size:clamp(15px, 1.05vw, 18px); line-height:1.5; max-width:60ch;}
  .site-admin__cta{margin-top:12px;}
  .site-admin__trust{margin-top:10px; font-size:13px; color:rgba(45,62,54,.78);}

  .site-admin__right{
    border-radius:18px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.78);
    padding:14px;
  }
  .site-admin__miniTitle{font-weight:900; color:var(--text); margin:0 0 10px; font-size:14px;}
  .site-admin__steps{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px;}
  .site-admin__step{
    border-radius:16px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.86);
    padding:10px 10px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .site-admin__num{
    width:28px; height:28px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(0,0,0,.12);
    background:var(--accent-soft);
    color:rgba(15,23,42,.78);
    font-weight:900;
    flex:0 0 auto;
  }
  .site-admin__stepTxt{font-size:13px; font-weight:800; color:rgba(15,23,42,.72); line-height:1.2;}

  .site-admin__benefits{margin-top:14px; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px;}
  .site-admin__benefit{
    border-radius:18px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.74);
    padding:12px 12px;
    box-shadow:0 10px 22px rgba(15,23,42,.06);
  }
  .site-admin__benefitTitle{font-weight:900; color:var(--text); font-size:15px; margin:0;}
  .site-admin__benefitText{margin-top:6px; font-size:14px; color:rgba(45,62,54,.84); line-height:1.45;}

  .site-admin__strip{
    margin-top:12px;
    padding:10px 12px;
    border-radius:16px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(0,0,0,.04);
    color:rgba(15,23,42,.78);
    font-weight:800;
    font-size:14px;
  }

  @media (max-width: 820px){
    .site-admin__grid{grid-template-columns:1fr;}
    .site-admin__steps{grid-template-columns:1fr;}
    .site-admin__benefits{grid-template-columns:1fr;}
    /* clamp() already adapts; keep small screens readable */
    .site-admin__title{font-size:clamp(26px, 7.2vw, 36px);}
  }

  /* Order modal */
  .order-modal{max-width:420px;}
  .order-close{
    position:absolute;
    top:10px;
    right:10px;
    width:34px;
    height:34px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.08);
    background:rgba(0,0,0,.04);
    cursor:pointer;
    font-size:20px;
    line-height:1;
  }
  .order-close:hover{background:rgba(0,0,0,.06);}
  .order-help{margin-top:10px; font-size:12px; color:var(--softtext); line-height:1.45;}
  .order-status{margin-top:8px; font-size:12px; color:var(--softtext);}
  .order-success{padding-top:8px;}
  .order-success__title{font-size:16px; font-weight:900; margin:4px 0 6px; color:var(--text);}
  .order-success__text{font-size:13px; color:var(--softtext); line-height:1.45;}

  /* =============================
     Constructor promo (home hero)
     ============================= */
  .constructor-promo{margin-top:16px;}
  .constructor-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  .constructor-title{max-width:720px;}
  .constructor-h2{margin:8px 0 0;font-size:20px;line-height:1.18;color:var(--text);font-weight:900;letter-spacing:-.01em;}
  .constructor-sub{margin:8px 0 0;color:rgba(45,62,54,.82);font-size:13px;line-height:1.45;}
  .constructor-banner{margin-top:12px;border-radius:18px;overflow:hidden;border:1px solid rgba(15,23,42,.10);background:rgba(255,255,255,.62);}
  .constructor-banner img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
  .constructor-accordion{margin-top:12px;display:grid;gap:10px;}
  .constructor-faq{border:1px solid rgba(15,23,42,.10);background:rgba(255,255,255,.62);border-radius:18px;padding:12px 14px;backdrop-filter:blur(10px);}
  .constructor-faq summary{list-style:none;cursor:pointer;font-weight:900;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .constructor-faq summary::-webkit-details-marker{display:none;}
  .constructor-faq summary::after{content:"+";width:30px;height:30px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--text);font-weight:900;flex:0 0 auto;}
  .constructor-faq[open] summary::after{content:"–";}
  .constructor-faq__a{margin-top:10px;color:rgba(45,62,54,.82);font-size:13px;line-height:1.5;}

  @media (max-width:560px){
    .constructor-h2{font-size:18px;}
    .constructor-banner{border-radius:16px;}
    .constructor-faq{border-radius:16px;}
  }

  .ilink-blob{
    position:absolute;
    width:320px;
    height:320px;
    border-radius:999px;
    filter:blur(44px);
    opacity:.55;
    pointer-events:none;
    mix-blend-mode:multiply;
    animation:ilinkFloat 10s ease-in-out infinite;
  }
  .ilink-blob.b1{ left:-120px; top:-140px; background:rgba(0,0,0,.06); }
  .ilink-blob.b2{ right:-160px; top:-90px; background:rgba(0,0,0,.05); animation-duration:12s; }
  .ilink-blob.b3{ left:10%; bottom:-220px; background:rgba(24,34,28,.32); animation-duration:14s; }

  @keyframes ilinkFloat{
    0%,100%{ transform:translate3d(0,0,0) scale(1); }
    50%{ transform:translate3d(22px,-18px,0) scale(1.08); }
  }

  @media (max-width: 980px){
    /* clamp() handles scaling */
  }
  @media (max-width: 820px){
    .thread > .ilink-hero{ margin:0 0 16px; }
    .ilink-hero{ padding:26px 16px 22px; }
    .ilink-hero-grid{ grid-template-columns:1fr; }
    .ilink-hero-cards{ grid-template-columns:1fr; }
    /* clamp() handles scaling */
  }
  @media (max-width: 420px){
    .ilink-hero{ padding:18px 14px 20px; }
    .ilink-logo{ height:30px; }
  }

  .intro-slider{
    width:100%;
    max-width:none;
    margin:0;
    position:relative;
    height:min(220px, 40vh);
    overflow:hidden;
    opacity:1;
    transition:opacity .8s.ease, height .8s.ease, margin .8s.ease;
    border-radius:0;
  }
  .intro-slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 1.2s.ease-in-out;
    z-index:0;
  }
  .intro-slide.active{
    opacity:1;
    z-index:1;
  }
  .intro-slide img,
  .intro-slide video{
    width:100%;
    height:100%;
    display:block;
    border-radius:0;
    object-fit:cover;
    box-shadow:none;
    border:none;
  }

  @media (max-width:768px){
    .intro-slider{
      margin:0;
      height:min(180px, 36vh);
    }
  }

  .intro-director{
    max-width:var(--maxw);
    margin:16px auto 0;
    padding-top:4px;
    display:flex;
    gap:18px;
    align-items:stretch;
  }

  .director-video-wrap{
    position:relative;
    flex:0 0 auto;

    width:min(320px, 40vw);
    aspect-ratio:1/1;
    border-radius:18px;
    overflow:hidden;
    background:var(--bg);
  }

  .director-video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:0;
    transform:scale(1.02);
    transition:opacity .6s.ease, transform .6s.ease;
  }

  body.dir-video-ready .director-video-wrap{
    background: var(--text);
  }
  body.dir-video-ready .director-video{
    opacity:1;
    transform:scale(1);
  }

  .director-mute{
    position:absolute;
    left:10px;
    top:10px;
    width:32px;
    height:32px;
    border-radius:999px;
    border:0;
    padding:0;
    background: rgba(255,255,255,.75);
    color: var(--muted);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:16px;
    box-shadow:0 0 0 1px rgba(0,0,0,.06);
  }

  .director-copy{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  padding:6px 4px 6px 4px;
  overflow:hidden;

  /* ВАЖНО: по умолчанию текст видим */
  opacity:1;

  /* Анимация остаётся, но если она не сработает — текст не пропадёт */
  animation:textRevealDown 1.1s ease forwards;
  animation-delay:0.35s;
}

  @keyframes textRevealDown{
  0%{opacity:0; transform:translateY(-12px);}
  100%{opacity:1; transform:translateY(0);}
}


  .dir-word-main{
    font-size:clamp(36px, 7vw, 80px);
    line-height:0.9;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--brand);
    word-break:break-word;
  }
  .dir-word-sub-wrap{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .dir-word-sub{
    font-size:clamp(28px, 4.3vw, 42px);
    line-height:1.1;
    font-weight:500;
    color:var(--brand);
  }

  @media (max-width:768px){
    .intro-director{
      max-width:none;
      margin:10px 10px 0;
      padding-top:0;
      flex-direction:column;
      align-items:center;
    }
    .director-video-wrap{
      width:100%;
      max-width:360px;
    }
    .director-copy{
      display:none;
    }
  }

  .photo-modal{
    position:fixed;
    inset:0;
    padding:16px;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.6);
    z-index:1600;
  }
  .photo-modal.open{
    display:flex;
    animation:photoFade .22s.ease-out;
  }
  .photo-modal img{
    max-width:96vw;
    max-height:92vh;
    border-radius:18px;
    box-shadow:0 18px 40px rgba(0,0,0,.55);
    background: var(--text);
  }
  body.photo-open{
    overflow:hidden;
  }
  @keyframes photoFade{
    from{
      opacity:0;
      transform:scale(.94) translateY(8px);
    }
    to{
      opacity:1;
      transform:scale(1) translateY(0);
    }
  }

  .cam-modal{
    position:fixed;
    inset:0;
    padding:16px;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.75);
    z-index:1700;
  }
  .cam-modal.open{
    display:flex;
    animation:photoFade .22s.ease-out;
  }
  .cam-modal video{
    max-width:96vw;
    max-height:92vh;
    border-radius:18px;
    box-shadow:0 18px 40px rgba(0,0,0,.6);
    background: var(--text);
    display:block;
  }
  body.cam-open{
    overflow:hidden;
  }

  .cam-preview{
    margin-top:10px;
    border-radius:16px;
    overflow:hidden;
    background: var(--text);
    cursor:pointer;
    max-width:640px;
    box-shadow:0 6px 20px rgba(0,0,0,.18);
    position:relative;
  }
  .cam-preview video{
    width:100%;
    height:auto;
    display:block;
  }
  .cam-badge{
    position:absolute;
    left:10px;
    top:10px;
    padding:3px 8px;
    border-radius:999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .cam-caption{
    margin-top:6px;
    font-size:12px;
    color:var(--softtext);
  }

  @media (max-width:1100px) and (min-width:769px){
    :root{--sidew:64px}
    .navhdr{display:none}
    .nav button{
      justify-content:center;
      padding:10px 6px;
    }
    .nav button span.label{display:none}
    .composer{left:var(--sidew)}
    .msg.user .body{max-width:86%}
    .thread{padding-bottom:180px;}
    .burger{
      display:none;
    }
    .brand{
      display:none;
    }
    .nav button .ico{
      width:24px;
      height:24px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .nav button .ico svg{
      width:20px;
      height:20px;
      stroke:var(--text);
      stroke-width:1.8;
    }
    .nav button::after{
      content:attr(data-label);
      position:absolute;
      left:100%;
      top:50%;
      transform:translateY(-50%) translateX(8px);
      background: rgba(33,33,33,.96);
      color: var(--on-accent);
      font-size:11px;
      padding:4px 8px;
      border-radius:8px;
      white-space:nowrap;
      opacity:0;
      pointer-events:none;
      transition:opacity .15s.ease, transform .15s.ease;
      z-index:50;
    }
    .nav button:hover::after{
      opacity:1;
      transform:translateY(-50%) translateX(4px);
    }
  }

  @media (max-width:768px){
    html,body{
      height:100%;
      overflow:hidden;
    }
    body{
      display:flex;
      min-height:100vh;
    }
    .side{
      position:fixed;
      top:0;
      bottom:0;
      left:0;
      width:240px;
      min-width:240px;
      background:var(--bg);
      border-right:1px solid var(--line);
      flex-direction:column;
      overflow-y:auto;
      z-index:1200;
      transform:translateX(-100%);
      transition:transform .25s.ease;
    }
    .side.open{transform:translateX(0);}
    .main{margin-left:0;padding-left:0;}
    .header{
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index:1000;
      padding:6px 12px 6px 44px;
      min-height:40px;
      background:var(--bg);
    }
    .wrap{
      margin-top:40px;
    }
    .burger{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      position:absolute;
      left:12px;
      top:50%;
      transform:translateY(-50%);
      width:28px;
      height:28px;
      border-radius:999px;
      border:0;
      background:rgba(0,0,0,.08);
      cursor:pointer;
    }
    .thread{
      padding:10px 16px 190px;
    }
    .hero{
      padding-top:12px;
      padding-bottom:20px;
    }
    .navhdr{display:block;}
    .nav button span.label{display:inline;}
    .nav button{
      justify-content:flex-start;
      padding:10px 10px;
    }
    .side-backdrop{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.04);
      z-index:1100;
      display:none;
    }
    body.menu-open .side-backdrop{
      display:block;
    }
    .composer{left:0;}
    /* Иконка менеджера у композера: цвета сайта, без синего */
    .composer .manager-btn:not(.active){
      background:#f3efe6;
      color:#333;
      -webkit-tap-highlight-color:#f3efe6;
    }
    .composer .manager-btn:not(.active):hover,
    .composer .manager-btn:not(.active):active{
      background:#f3efe6;
      color:#333;
    }
  }

  .team-card,
  .hero-banner,
  .contact-card,
  .json-block,
  .team-photo,
  .intro-slide img,
  .intro-slide video {
    border:none !important;
    box-shadow:none !important;
  }
  .img-block img,
  .contact-map{
    border:none !important;
    box-shadow:none !important;
  }
  .msg .msg-text{
    font-size:16px;
  }
  
  /* === Markdown/структура ответа ассистента === */
.msg.assistant .msg-text p{ margin:8px 0; }
.msg.assistant .msg-text ul{ margin:8px 0 8px 20px; padding:0; }
.msg.assistant .msg-text li{ margin:6px 0; }
.msg.assistant .msg-text h2,
.msg.assistant .msg-text h3,
.msg.assistant .msg-text h4{ margin:10px 0 6px; }

.items-block{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.08);
}

  #ta{
    font-size:14px;
  }
  #ta::placeholder{
    font-size:14px;
  }

  .modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:2000;
  }
  .modal.shown{
    display:flex;
  }
  .modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
  }
  .modal__window{
    position:relative;
    background: var(--surface);
    padding:20px 22px;
    border-radius:var(--radius);
    max-width:360px;
    width:100%;
    box-shadow:0 18px 40px rgba(0,0,0,.18);
    z-index:1;
  }
  .modal__window h3{
    margin:0 0 8px;
    font-size:16px;
    font-weight:600;
  }
  .modal__window p{
    margin:0;
    font-size:13px;
    color:var(--softtext);
    line-height:1.5;
  }
  .modal__actions{
    display:flex;
    gap:10px;
    margin-top:16px;
    flex-wrap:wrap;
  }

  .btn{
    border-radius:8px;
    border:1px solid var(--border);
    background: var(--accent);
    color: var(--on-accent);
    padding:8px 12px;
    font-size:13px;
    cursor:pointer;
    flex:1;
    text-align:center;
  }
  .btn:hover{
    background: var(--accent-hover);
  }
  .btn.primary{background: var(--accent);border-color: var(--accent);color: var(--on-accent);}
  .btn.ghost{
    background:transparent;
    color: var(--text);
  }

  /* === Блок "Что производим?" – окно на 3–4 строки с ручным скроллом === */

  .wwp-scroll-container{
    width:100%;
    max-width:1100px;
    margin:0 auto 32px;
    padding:24px 20px 28px;
    display:flex;
    justify-content:center;
  }

  .wwp-window{
    width:100%;
    max-height:6em;
    min-height:3.2em;
    overflow-y:auto;
    overflow-x:hidden;
    margin:0 auto;
    scrollbar-width:thin;
  }

  .wwp-text-container{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:4px 0 16px;
  }

  .wwp-text{
    --direction:1;

    font-size:clamp(18px,2.6vw,26px);
    font-weight:700;
    text-transform:uppercase;
    text-align:center;
    letter-spacing:.06em;
    line-height:1.25;
    color:var(--softtext);

    opacity:.2;
    transform:
      translateX(calc(90px * var(--direction)))
      translateY(24px)
      rotate(calc(-10deg * var(--direction)))
      scale(1.02);

    will-change:transform,opacity;
    transition:transform .18s.linear, opacity .18s.linear;
  }

  .wwp-text:nth-child(even){
    --direction:-1;
  }

  @media (max-width:768px){
    .wwp-scroll-container{
      padding:18px 12px 22px;
    }
    .wwp-window{
      max-height:7em;
    }
    .wwp-text{
      font-size:16px;
      letter-spacing:.04em;
    }
  }

.app{position:relative; z-index:1;}

/* --- Content pages (Tariffs / Contacts) --- */
.page-view{width:100%;}
.page-view[hidden]{display:none !important;}
.pv-shell{
  width:calc(100% - 32px);
  max-width:1120px;
  margin:20px auto 26px;
  border-radius:24px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 18px 46px rgba(0,0,0,.08);
  overflow:hidden;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.pv-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.pv-title{font-size:18px; font-weight:800;}
.pv-close{
  width:36px;height:36px;border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.06);
  cursor:pointer;
}
.pv-close:hover{background:rgba(0,0,0,.06);}
.pv-body{padding:18px;}
.pv-grid{display:grid; gap:14px; grid-template-columns: repeat(4, minmax(0, 1fr));}
.pv-card{
  background:rgba(255,255,255,.74);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:14px 14px 12px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.pv-card h3{margin:0 0 4px; font-size:16px; font-weight:900;}
.pv-price{margin:0 0 10px; font-size:14px; font-weight:800; color:var(--brand);}
.pv-card ul{margin:0; padding-left:18px; color:var(--text);}
.pv-card li{margin:6px 0;}
.pv-note{margin-top:12px; color:var(--muted); font-size:13px;}

.pv-form{display:grid; gap:12px; margin-top:8px;}
.pv-row{display:grid; gap:8px;}
.pv-row label{display:grid; gap:6px; font-size:13px; color:var(--muted);}
.pv-row.cols2{grid-template-columns:1fr 1fr;}
@media (max-width:720px){
  .pv-row.cols2{grid-template-columns:1fr;}
}
.pv-row input,.pv-row textarea,.pv-row select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.88);
  outline:none;
  font:inherit;
}
.pv-row textarea{min-height:110px; resize:vertical;}
.pv-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}
.pv-actions .btn{border-radius:8px; padding:12px 14px;}

@media (max-width: 1000px){
  .pv-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 560px){
  .pv-shell{width:calc(100% - 20px); border-radius:20px;}
  .pv-grid{grid-template-columns: 1fr;}
  .pv-body{padding:14px;}
}
/* === Menu card (no shadow / no border) === */
.menu-card{
  display:flex;
  align-items:center;
  gap:20px;
  padding:0;
  margin:18px 0 0;
  background:transparent;
  border:none;
  box-shadow:none;
}

.menu-card.is-alt{ flex-direction:row-reverse; }

.menu-card__img{
  width:min(420px, 44%);
  max-width:44%;
  border-radius:18px;
  overflow:hidden;
  background:transparent;
  border:none;
  box-shadow:none;
}
.menu-card__img img{
  width:100%;
  height:auto;
  display:block;
}

.menu-card__body{ flex:1; min-width:0; }

.menu-card__kicker{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.72;
  margin-bottom:8px;
}

.menu-card__title{
  margin:0 0 10px;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height:1.12;
}

.menu-card__text{
  margin:0 0 12px;
  opacity:.92;
}

.menu-card__list{
  margin:0 0 14px;
  padding-left:18px;
}
.menu-card__list li{ margin:6px 0; }

.menu-card__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  background: var(--accent);
  color: var(--on-accent);
}
.menu-card__cta:hover{ filter:brightness(0.98); }

/* orange accent (small) */
.menu-card__title::after{
  content:"";
  display:block;
  width:44px;
  height:3px;
  border-radius:99px;
  margin-top:10px;
  background: var(--brand); /* accent */
  opacity:.9;
}

@media (max-width: 820px){
  .menu-card{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }
  .menu-card__img{
    width:100%;
    max-width:100%;
  }
}



/* MENU CARD LAYOUT (desktop: image left, text right) */
.mc-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.mc-media img{
  width:100%;
  height:auto;
  border-radius:14px;
  display:block;
}
@media (min-width: 980px){
  .mc-card{ flex-direction:row; align-items:flex-start; }
  .mc-media{ flex:0 0 46%; max-width:560px; }
  .mc-body{ flex:1 1 auto; min-width:0; }
}


/* === MOBILE STABILITY: simplify intro hero to prevent flicker/jitter on scroll/orientation === */
@media (max-width: 920px), (max-height: 520px){
  /* remove expensive blur/backdrop effects on mobile */
  .ilink-hero{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:none !important;
    background:transparent !important;
    contain: layout paint;
  }
  .ilink-btn,
  .ilink-metric,
  .ilink-card{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .ilink-btn{ transition:none !important; }
  .ilink-btn:hover{ transform:none !important; box-shadow:none !important; }
  .ilink-logo{ filter:none !important; }
}

/* During orientation changes some Android browsers repaint aggressively; reduce transitions globally */
@media (max-width: 920px){
  *{ scroll-behavior:auto; }
}

/* ===== Manager handoff button ===== */
.manager-btn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:#f3efe6;
  color:#333;
  font-size:16px;
  flex:0 0 auto;
  line-height:1;
}
.manager-btn:hover{ background:#f3efe6; border-color:rgba(0,0,0,.18); }
.manager-btn.pending{
  border-color:rgba(0,0,0,.25);
  background:#f3efe6;
  color:#333;
}
.manager-btn.active{
  border-color:transparent;
  background: linear-gradient(135deg, var(--brand) 0%, var(--ink) 100%);
  color: var(--on-accent);
}
.composer .manager-btn svg,
.composer svg{
  color:#333;
}

/* =========================================================
   DARK BUTTONS OVERRIDE (AiDRONIK)
   Replace light-green CTAs with near-black dark green + white text
   Paste this at the VERY END of the CSS file.
========================================================= */

:root{
  --btn-dark: var(--accent);
  --btn-dark-hover: var(--text);
  --btn-dark-ring: var(--accent-ring);
  --btn-dark-shadow: rgba(0,0,0,.12);
}

/* Main primary CTAs across pages */
.ilink-btn.primary,
.btn.primary,
.menu-card__cta{
  background: var(--btn-dark) !important;
  border-color: var(--btn-dark) !important;
  color: var(--on-accent) !important;
  box-shadow: 0 14px 34px var(--btn-dark-shadow) !important;
}

.ilink-btn.primary:hover,
.btn.primary:hover,
.menu-card__cta:hover{
  background: var(--btn-dark-hover) !important;
  border-color: var(--btn-dark-hover) !important;
  color: var(--on-accent) !important;
}

/* Buttons that looked like “light green pills” inside content */
.case-link{
  /* если это была кнопка-ссылка с белым фоном — оставляем белой,
     но текст делаем тёмным (у тебя и так ок). НИЧЕГО не меняем тут. */
}

/* Manager button: нейтральный стиль (как desktop), без синего/салатового */
.manager-btn{
  background: #f3efe6;
  border-color: rgba(0,0,0,.12);
  color: #333;
}
.manager-btn:hover{
  background: #f3efe6;
  border-color: rgba(0,0,0,.18);
}
.manager-btn.pending{
  border-color: rgba(0,0,0,.25);
  background: #f3efe6;
  color: #333;
}
.manager-btn.active{
  background: var(--btn-dark) !important;
  border-color: transparent !important;
  color: var(--on-accent) !important;
  box-shadow: 0 10px 26px var(--btn-dark-shadow) !important;
}

/* Attach button when file selected: убрать зелёный градиент */
.attach-btn.has-file{
  background: linear-gradient(135deg, var(--btn-dark) 0%, var(--btn-dark-hover) 60%, var(--btn-dark) 100%) !important;
  color: var(--on-accent) !important;
}

/* Download icon button in assistant messages */
.msg-download-btn{
  background: var(--accent-soft) !important;
}
.msg-download-btn:hover{
  background: rgba(0,0,0,.12) !important;
}

/* Optional: focus ring on dark buttons with green accent */
.ilink-btn.primary:focus-visible,
.btn.primary:focus-visible,
.menu-card__cta:focus-visible,
.manager-btn:focus-visible{
  outline: 2px solid var(--btn-dark-ring) !important;
  outline-offset: 2px !important;
}

/* =====================
   Demo dialog UI
   ===================== */
.demo-banner{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.06);
}
.demo-banner__left{display:flex; align-items:center; gap:10px;}
.demo-banner__dot{width:8px; height:8px; border-radius: 50%; background: var(--accent);}
.demo-banner__title{font-weight: 700; font-size: 13px; opacity: .9;}
.demo-banner__btn{
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  font-weight: 700;
  font-size: 13px;
}
.demo-banner__btn:hover{background: rgba(0,0,0,0.09);} 

body.demo-mode #ta{opacity: .65;}
body.demo-mode #sendBtn, body.demo-mode #attachBtn, body.demo-mode #composerInviteManagerBtn{opacity: .65;}

/* --- KB mobile scroll FIX (scoped) --- */
@supports selector(html:has(.kb-wrap)) {
  html:has(.kb-wrap),
  body:has(.kb-wrap) {
    height: auto !important;
    min-height: 100% !important;
    overflow: auto !important;
    overflow-y: auto !important;
    position: static !important;
  }
}

@media (max-width: 768px) {
  .kb-wrap {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
}

/* =====================================================================
   PERFORMANCE / MOBILE STABILITY (AiDRONIK)
   Fix “frosted glass / blurred glass” flicker on mobile (especially iOS).
   We disable expensive blur/backdrop + giant blurred background blobs.
   --------------------------------------------------------------------- */

@media (max-width: 1024px), (max-height: 700px){
  /* remove global blurred blobs */
  body::before,
  body::after{
    display:none !important;
    filter:none !important;
  }

  /* disable backdrop-filter everywhere it matters */
  .side,
  .ilink-hero,
  .ilink-btn,
  .ilink-metric,
  .ilink-card,
  .constructor-faq,
  .demo-banner{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* keep visuals clean but cheap to render */
  .side{ background: rgba(255,255,255,.92) !important; }
  .ilink-hero{ background: transparent !important; }
  .ilink-card{ background: rgba(255,255,255,.88) !important; }

  /* remove transform/transition micro-animations that cause repaints */
  .ilink-btn,
  .ilink-card{
    transition:none !important;
  }
  .ilink-btn:hover,
  .ilink-card:hover{
    transform:none !important;
    box-shadow:none !important;
  }
}


/* ================================
   AiDRONIK Constructor Promo — Typography FIX
   (делает шрифт/размер как на сайте)
   ВСТАВИТЬ В КОНЕЦ styles.css
================================ */

/* если у блока другой контейнер-класс — оставь обе группы селекторов */
.constructor-promo,
.promo-hero,
.constructor-promo * ,
.promo-hero * {
  font-family: inherit !important;
  letter-spacing: inherit !important;
}

/* общий текст в блоке */
.constructor-promo,
.promo-hero {
  font-size: 18px !important;       /* базовый размер как “на сайте” */
  line-height: 1.55 !important;
  color: inherit !important;
}

/* заголовок блока (H2/H3) */
.constructor-promo h2,
.constructor-promo h3,
.promo-hero h2,
.promo-hero h3 {
  font-size: 34px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  margin: 0 0 10px !important;
}

/* подпояснение/лид под заголовком */
.constructor-promo .promo-lead,
.promo-hero .promo-lead,
.constructor-promo p,
.promo-hero p {
  font-size: 18px !important;
  line-height: 1.55 !important;
}

/* АККОРДЕОН: заголовки пунктов (summary / кнопка строки) */
.constructor-promo details > summary,
.promo-hero details > summary,
.constructor-promo .accordion__title,
.promo-hero .accordion__title {
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

/* АККОРДЕОН: текст внутри раскрытия */
.constructor-promo details > div,
.constructor-promo details .accordion__body,
.promo-hero details > div,
.promo-hero details .accordion__body {
  font-size: 18px !important;
  line-height: 1.55 !important;
}

/* кнопка в блоке — neutral black primary */
.constructor-promo .promo-cta,
.promo-hero .promo-cta,
.constructor-promo a.btn,
.promo-hero a.btn {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: 1px solid rgba(0,0,0,.2) !important;
  font-weight: 800 !important;
}
.constructor-promo .promo-cta:hover,
.promo-hero .promo-cta:hover,
.constructor-promo a.btn:hover,
.promo-hero a.btn:hover {
  background: var(--text) !important;
}

/* мобильная адаптация: чтобы не “мельчило” */
@media (max-width: 720px){
  .constructor-promo,
  .promo-hero {
    font-size: 16px !important;
  }
  .constructor-promo h2,
  .constructor-promo h3,
  .promo-hero h2,
  .promo-hero h3 {
    font-size: 26px !important;
  }
  .constructor-promo details > summary,
  .promo-hero details > summary {
    font-size: 18px !important;
  }
  .constructor-promo details > div,
  .promo-hero details > div {
    font-size: 16px !important;
  }
}



/* =====================================================
   GLOBAL FIX: remove "frosted glass" / blur effects (ALL)
   ===================================================== */

/* 1) Disable heavy blurred background blobs */
body::before,
body::after{
  display:none !important;
  filter:none !important;
  background:none !important;
}

/* 2) Disable animated blur blobs */
.ilink-blob{
  display:none !important;
  filter:none !important;
  animation:none !important;
}

/* 3) Disable backdrop-filter everywhere (glass effect) */
*,
*::before,
*::after{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 4) Make common "glass" surfaces more solid (keep style, remove translucency) */
.side,
.pv-shell,
.demo-banner,
.constructor-faq,
.constructor-banner,
.pv-card,
.order-modal__inner,
.order-modal__box,
.card,
.ilink-card,
.site-admin__shell,
.site-admin__benefit,
.site-admin__strip{
  background: rgba(255,255,255,.96) !important;
}

/* Keep borders readable after removing transparency */
.side,
.pv-shell,
.demo-banner,
.constructor-faq,
.constructor-banner,
.pv-card,
.order-modal__inner,
.order-modal__box,
.ilink-card,
.site-admin__shell,
.site-admin__benefit{
  border-color: rgba(0,0,0,.08) !important;
}

/* ==============================
   Lead to purchase (3 cards)
   ============================== */
.lead-section{
  padding: 72px 0 84px;
}
.lead-title{
  text-align:center;
  margin: 0 0 40px;
  letter-spacing: -0.02em;
  font-weight: 900;
  line-height: 1.02;
  font-size: clamp(40px, 6vw, 88px);
  color: var(--text);
}
.lead-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.lead-card{
  border-radius: 28px;
  padding: 28px 28px 22px;
  border: 0;
  box-shadow: none;
  background: var(--surface);
  display:flex;
  flex-direction:column;
  min-height: 260px;
}
.lead-card h3{
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(22px, 2vw, 34px);
  color: var(--text);
}
.lead-card p{
  margin: 0 0 18px;
  color: rgba(16, 40, 28, 0.82);
  font-size: 17px;
  line-height: 1.55;
}
.lead-card--light{ background: var(--surface); }
.lead-card--mint{ background: var(--accent-soft); }
.lead-card--dark{
  background: var(--accent);
}
.lead-card--dark h3,
.lead-card--dark p{
  color: var(--on-accent);
}

.lead-cta{
  margin-top:auto;
  align-self:flex-start;
  border: 0;
  cursor:pointer;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  transition: transform 160ms ease, background 160ms ease;
}
.lead-cta:hover{ transform: translateY(-1px); background: var(--accent-soft); }
.lead-cta:active{ transform: translateY(0px); }
.lead-cta--light{
  background: rgba(255,255,255,0.14);
  color: var(--on-accent);
}
.lead-cta--light:hover{ background: rgba(255,255,255,0.18); }

@media (max-width: 1024px){
  .lead-section{ padding: 60px 0 72px; }
  .lead-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .lead-title{ margin-bottom: 28px; }
  .lead-cards{ grid-template-columns: 1fr; }
  .lead-card{ padding: 22px 18px 18px; border-radius: 22px; min-height: 0; }
  .lead-card p{ font-size: 16px; }
}

/* --- Customer «Мои записи» (customer_bookings.php?ui=1) --- */
/* Отдельный документ: не наследовать display:flex от body основного сайта (ломает высоту/скролл). */
body.customer-bookings-body{
  margin: 0;
  display: block;
  min-height: 100vh;
  background: var(--bg, #fafaf9);
  color: var(--text, #1F1F1F);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
}
.customer-bookings-body--boot{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.customer-bookings{
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  box-sizing: border-box;
}
.customer-bookings--narrow{
  max-width: 520px;
}
.customer-bookings--boot{
  text-align: center;
}
.customer-bookings__header{
  margin-bottom: 20px;
}
.customer-bookings__title{
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.customer-bookings__lead{
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted, #6E6A63);
  line-height: 1.45;
}
.customer-bookings__tabs{
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 20px 0 16px;
  padding: 4px 0 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--border, #E8E6E3);
}
.customer-bookings__tab{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border, #E8E6E3);
  background: var(--surface, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.customer-bookings__tab:hover{
  border-color: rgba(0,0,0,.18);
  background: var(--accent-soft, rgba(244,0,24,.18));
}
.customer-bookings__tab--active{
  border-color: var(--accent, #F40018);
  background: var(--accent-soft, rgba(244,0,24,.22));
  color: var(--text, #1F1F1F);
  font-weight: 600;
}
.customer-bookings__tab-count{
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.75;
  min-width: 1.25em;
  text-align: center;
}
.customer-bookings__panel--hidden{
  display: none !important;
}
.customer-bookings__empty{
  margin: 12px 0 0;
  padding: 20px 16px;
  text-align: center;
  color: var(--muted, #6E6A63);
  font-size: 0.95rem;
  background: var(--surface, #fff);
  border: 1px dashed var(--border, #E8E6E3);
  border-radius: var(--radius, 8px);
}
.customer-bookings__cards{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.customer-bookings-card{
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E8E6E3);
  border-radius: 12px;
  padding: 18px 18px 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,.05);
}
.customer-bookings-card__service{
  margin: 0 0 14px;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text, #1F1F1F);
}
.customer-bookings-card__meta{
  margin: 0;
  padding: 0;
}
.customer-bookings-card__row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 6px 0;
  border-top: 1px solid var(--border, #E8E6E3);
  font-size: 0.92rem;
}
.customer-bookings-card__row:first-of-type{
  border-top: 0;
  padding-top: 0;
}
.customer-bookings-card__row dt{
  margin: 0;
  min-width: 5.5rem;
  color: var(--muted, #6E6A63);
  font-weight: 500;
}
.customer-bookings-card__row dd{
  margin: 0;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.customer-bookings-card__status{
  font-weight: 600;
}
.customer-bookings-card__reference{
  display:grid;
  gap:8px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border, #e8e6e3);
}
.customer-bookings-card__reference-label{
  margin:0;
  font-size:13px;
  font-weight:600;
  color:var(--text, #1f1f1f);
}
.customer-bookings-card__reference-media{
  display:block;
  border-radius:12px;
  overflow:hidden;
  line-height:0;
  max-width:220px;
}
.customer-bookings-card__reference-img{
  display:block;
  width:100%;
  height:auto;
  max-height:280px;
  object-fit:cover;
}
.customer-bookings-card__reference-title{
  margin:0;
  font-size:15px;
  font-weight:600;
}
.customer-bookings-card__reference-note{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:var(--muted, #7b7e80);
}
.customer-bookings-card__review{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #E8E6E3);
}
.customer-bookings-card__review-top{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 8px;
}
.customer-bookings-card__review-heading{
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted, #6E6A63);
  letter-spacing: 0.01em;
}
.customer-bookings-card__review-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.customer-bookings-card__review-badge{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid var(--border, #E8E6E3);
  background: var(--surface, #fff);
  color: var(--muted, #6E6A63);
}
.customer-bookings-card__review-badge--pending{
  border-color: rgba(244,0,24,.45);
  background: var(--accent-soft, rgba(244,0,24,.18));
  color: var(--text, #1F1F1F);
}
.customer-bookings-card__review-badge--approved{
  border-color: rgba(80,140,90,.4);
  background: rgba(80,140,90,.12);
  color: #1a3d24;
}
.customer-bookings-card__review-badge--rejected{
  border-color: rgba(180,90,90,.35);
  background: rgba(180,90,90,.1);
  color: #5c2a2a;
}
.customer-bookings-card__review-badge--neutral{
  font-weight: 500;
}
.customer-bookings-card__review-reason{
  margin: 0 0 12px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted, #6E6A63);
}
.customer-bookings-card__btn--review{
  width: 100%;
  flex: 1 1 100%;
  min-height: 48px;
  border-color: rgba(244,0,24,.55);
  background: var(--accent-soft, rgba(244,0,24,.22));
}
.customer-bookings-card__btn--review:not(:disabled):hover{
  background: rgba(244,0,24,.32);
}
.customer-bookings-card__btn--review:disabled{
  opacity: 0.58;
  cursor: not-allowed;
}
.customer-bookings-card__actions{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #E8E6E3);
}
.customer-bookings-card__btn{
  flex: 1 1 calc(50% - 6px);
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  border: 1px solid var(--border, #E8E6E3);
  background: var(--surface, #fff);
  color: var(--text, #1F1F1F);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.customer-bookings-card__btn--primary{
  border-color: rgba(244,0,24,.55);
  background: var(--accent-soft, rgba(244,0,24,.22));
}
.customer-bookings-card__btn--primary:hover{
  background: rgba(244,0,24,.32);
}
.customer-bookings-card__btn--danger{
  border-color: #e8d4d4;
  background: #fff8f8;
  color: #6b2a2a;
}
.customer-bookings-card__btn--danger:hover{
  background: #ffefef;
}
.customer-bookings__hint{
  margin: 28px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted, #6E6A63);
}
.customer-bookings__footer{
  margin: 12px 0 0;
}
.customer-bookings__home{
  color: var(--accent, #F40018);
  font-weight: 600;
  text-decoration: none;
}
.customer-bookings__home:hover{
  text-decoration: underline;
}
.customer-bookings__boot-msg{
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.customer-bookings__boot-msg--err{
  color: #5c3d3d;
}
.customer-bookings__boot-actions{
  margin-top: 16px;
}

/*
 * Главный сайт на mobile: @media (max-width:768px) задаёт html,body { height:100%; overflow:hidden }
 * для чат-оболочки (.wrap скроллится). Страница «Мои записи» — отдельный HTML с тем же styles.css;
 * без этого документ не прокручивается. Маркер: <html class="customer-bookings-html">.
 */
@media (max-width: 768px){
  html.customer-bookings-html,
  html.customer-bookings-html body{
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  html.customer-bookings-html body.customer-bookings-body{
    display: block !important;
  }
}

@media (min-width: 720px){
  .customer-bookings{
    max-width: 640px;
    padding-top: 32px;
  }
  .customer-bookings__tabs{
    flex-wrap: wrap;
    overflow: visible;
    gap: 10px;
    padding-bottom: 12px;
  }
  .customer-bookings__tab{
    padding: 10px 18px;
  }
  .customer-bookings-card__actions{
    flex-wrap: nowrap;
  }
  .customer-bookings-card__btn{
    flex: 0 1 auto;
    min-width: 140px;
  }
}

/* Mobile: полная ширина контента, горизонтальный скролл вкладок до края экрана, удобные тапы */
@media (max-width: 719px){
  .customer-bookings{
    max-width: none;
    width: 100%;
    padding: 16px 16px 40px;
  }
  .customer-bookings--narrow{
    max-width: none;
  }
  .customer-bookings__tabs{
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 2px;
    padding-bottom: 10px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .customer-bookings__tab{
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 44px;
    padding: 10px 14px;
    align-self: center;
  }
  .customer-bookings-card{
    padding: 16px 16px 14px;
    border-radius: 14px;
  }
  .customer-bookings-card__service{
    font-size: 1.05rem;
    margin-bottom: 12px;
  }
  .customer-bookings-card__row{
    padding: 8px 0;
    font-size: 0.9rem;
  }
  .customer-bookings-card__row dt{
    min-width: 5rem;
  }
}

@media (max-width: 640px){
  .customer-bookings-card__actions{
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
  }
  .customer-bookings-card__btn{
    flex: 1 1 auto;
    width: 100%;
    min-height: 48px;
  }
}

/* Tenant customer profile (optional display name, tenant-scoped) */
.tenant-profile-modal__window{
  max-width: 400px;
}
.tenant-profile-modal__hint{
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--softtext, #6e6a63);
  line-height: 1.45;
}
.tenant-profile-field{
  margin-bottom: 12px;
}
.tenant-profile-field label{
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text, #1f1f1f);
}
.tenant-profile-field input{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #e8e6e3);
  font: inherit;
  font-size: 14px;
  background: var(--surface, #fff);
  color: var(--text, #1f1f1f);
}
.tenant-profile-field input[readonly]{
  background: rgba(0,0,0,.04);
  color: var(--softtext, #6e6a63);
}
.tenant-profile-status{
  min-height: 1.25em;
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--softtext, #6e6a63);
}
.tenant-profile-status.is-error{
  color: #b42318;
}

/* Tenant chat — MVP-1 branch choice cards (booking_choice) */
.chat-choice-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
  width:100%;
  max-width:100%;
}
.chat-beauty-look-msg .msg-text{
  max-width:100%;
}
.chat-beauty-look-card{
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  max-width:min(100%, 360px);
}
.chat-beauty-look-card.is-active-reference{
  border-color:var(--accent, #F40018);
  box-shadow:0 0 0 1px var(--accent, #F40018);
}
.chat-beauty-look-card__media{
  display:block;
  border-radius:12px;
  overflow:hidden;
  line-height:0;
}
.chat-beauty-look-card__img{
  display:block;
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:cover;
}
.chat-beauty-look-card__title{
  margin:0;
  font-size:16px;
  font-weight:600;
}
.chat-beauty-look-card__desc{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:var(--text);
}
.chat-beauty-look-card__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chat-beauty-look-card__btn{
  flex:1 1 auto;
  min-width:120px;
}
.chat-beauty-look-pending{
  margin:0;
  font-size:14px;
  color:var(--muted, #7b7e80);
}
.chat-beauty-look-msg--selected-ref .msg-text{
  max-width:100%;
}
.chat-beauty-ref-selected-card{
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid var(--accent, #F40018);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 0 0 1px var(--accent, #F40018);
  max-width:min(100%, 360px);
}
.chat-beauty-ref-selected-card__heading{
  margin:0;
  font-size:15px;
  font-weight:600;
}
.chat-beauty-ref-selected-card__media{
  display:block;
  border-radius:12px;
  overflow:hidden;
  line-height:0;
}
.chat-beauty-ref-selected-card__img{
  display:block;
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:cover;
}
.chat-beauty-ref-selected-card__style{
  margin:0;
  font-size:16px;
  font-weight:600;
}
.chat-beauty-ref-selected-card__note{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:var(--text);
}
.chat-choice-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  padding:12px 14px;
  border-radius:var(--radius, 8px);
  border:1px solid var(--border, #e8e6e3);
  background:var(--surface, #fff);
  box-shadow:0 1px 2px var(--accent-shadow, rgba(0,0,0,.06));
}
.chat-choice-title{
  font-weight:600;
  font-size:15px;
  color:var(--text, #1f1f1f);
  line-height:1.3;
}
.chat-choice-subtitle{
  font-size:13px;
  line-height:1.35;
  color:var(--muted, #6e6a63);
}
.chat-choice-button{
  align-self:flex-start;
  margin-top:2px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--accent, #F40018);
  background:rgba(244,0,24,.12);
  color:var(--text, #1f1f1f);
  font:inherit;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition: background var(--transition, 0.2s ease), border-color var(--transition, 0.2s ease);
}
.chat-choice-button:hover,
.chat-choice-button:focus-visible{
  background:rgba(244,0,24,.22);
  border-color:var(--accent-hover, #d10015);
  outline:none;
}

/* Tenant chat — MVP-2 service choice cards (booking_choice.field = service_id); branch styles unchanged */
/* MVP-3 specialist cards: dedicated mobile-first layout (field = specialist_id). */
.chat-choice-list--services{
  gap:10px;
}
.chat-choice-list--specialists{
  gap:12px;
}
.chat-choice-list--datetime{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:8px;
  width:100%;
  max-width:100%;
}
.chat-choice-datetime-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border, #e8e6e3);
  background:var(--surface, #fff);
  color:var(--text, #1f1f1f);
  font:inherit;
  font-weight:600;
  font-size:15px;
  line-height:1.2;
  cursor:pointer;
  text-align:center;
  word-break:break-word;
  transition: background var(--transition, 0.2s ease), border-color var(--transition, 0.2s ease);
}
.chat-choice-datetime-chip:hover,
.chat-choice-datetime-chip:focus-visible{
  background:rgba(244,0,24,.18);
  border-color:var(--accent, #F40018);
  outline:none;
}
.chat-choice-datetime-chip--expired{
  opacity:.42;
  cursor:not-allowed;
  pointer-events:none;
  background:var(--surface, #fff);
  border-color:var(--border, #e8e6e3);
  color:var(--text-muted, #8a8782);
}
.chat-choice-list--datetime-active .chat-choice-datetime-chip:not(.chat-choice-datetime-chip--expired){
  border-color:rgba(244,0,24,.55);
}
.chat-choice-card--service{
  min-width:0;
}
.chat-choice-card--specialist{
  min-width:0;
  padding:14px 16px;
  border-radius:14px;
  gap:0;
  box-shadow:0 2px 8px var(--accent-shadow, rgba(0,0,0,.08));
}
.chat-choice-spl-layout{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:12px;
  width:100%;
  min-width:0;
}
.chat-choice-spl-media{
  flex-shrink:0;
  width:72px;
  height:72px;
  border-radius:14px;
  overflow:hidden;
  background:var(--surface-2, #f3f1ed);
  border:1px solid var(--border, #e8e6e3);
}
.chat-choice-spl-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.chat-choice-spl-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:0.02em;
  color:var(--accent-hover, #8f7a40);
  background:linear-gradient(145deg, rgba(244,0,24,.2), rgba(244,0,24,.05));
}
.chat-choice-spl-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.chat-choice-spl-top{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:6px 10px;
}
.chat-choice-spl-name{
  font-weight:700;
  font-size:1rem;
  line-height:1.25;
  color:var(--text, #1f1f1f);
  flex:1;
  min-width:0;
  word-break:break-word;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.chat-choice-spl-rating{
  display:inline-flex;
  align-items:center;
  gap:3px;
  flex-shrink:0;
  font-size:12px;
  font-weight:600;
  color:var(--text, #1f1f1f);
  white-space:nowrap;
}
.chat-choice-spl-rating-star{
  color:var(--accent-hover, #d10015);
  font-size:11px;
  line-height:1;
}
.chat-choice-spl-rating-value{
  font-variant-numeric:tabular-nums;
}
.chat-choice-spl-rating-count{
  font-weight:500;
  color:var(--muted, #6e6a63);
  font-size:11px;
}
.chat-choice-spl-role{
  font-size:13px;
  line-height:1.35;
  color:var(--muted, #6e6a63);
}
.chat-choice-spl-branch{
  font-size:12px;
  line-height:1.35;
  color:var(--muted, #6e6a63);
  padding-left:1em;
  position:relative;
}
.chat-choice-spl-branch::before{
  content:'';
  position:absolute;
  left:0;
  top:0.45em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent, #F40018);
  opacity:.85;
}
.chat-choice-spl-chips{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:2px;
}
.chat-choice-spl-chip{
  display:inline-block;
  max-width:100%;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  line-height:1.35;
  font-weight:500;
  color:var(--text, #1f1f1f);
  background:rgba(244,0,24,.12);
  border:1px solid rgba(244,0,24,.28);
  overflow:hidden;
  word-break:break-word;
  hyphens:auto;
}
.chat-choice-spl-meta{
  font-size:12px;
  line-height:1.35;
  color:var(--muted, #6e6a63);
  margin-top:1px;
}
.chat-choice-button--service{
  padding:7px 12px;
  font-size:13px;
}
.chat-choice-button--specialist{
  align-self:stretch;
  width:100%;
  max-width:100%;
  margin-top:8px;
  min-height:44px;
  padding:10px 16px;
  border-radius:12px;
  font-size:15px;
  text-align:center;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (min-width: 600px){
  .chat-choice-card--specialist{
    padding:16px 18px;
  }
  .chat-choice-spl-media{
    width:88px;
    height:88px;
  }
}
@media (max-width: 560px){
  .chat-choice-card.chat-choice-card--service{
    padding:11px 12px;
  }
  .chat-choice-button--service{
    align-self:stretch;
    text-align:center;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
}

/* Composer dock: opaque full-width mask over scrolling page content (mobile + narrow viewports) */
@media (max-width: 1100px){
  .composer{
    background:var(--bg) !important;
    z-index:900;
    padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .composer .inner,
  .composer .handoff-return-bar{
    position:relative;
    z-index:1;
  }
}
@media (max-width: 768px){
  .composer{
    left:0;
    right:0;
    width:100%;
    padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .ai-scroll-bottom-btn{
    left:0;
  }
}

/* === AI Beauty Preview (consultation flow) === */
.beauty-preview-modal .beauty-preview-modal__window{
  max-width:min(720px, calc(100vw - 24px));
  width:100%;
  max-height:calc(100dvh - 24px);
  overflow:hidden;
  padding:0;
  display:flex;
  flex-direction:column;
}
.beauty-preview-modal__body{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.beauty-preview-step{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.beauty-preview-step__scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:48px 20px 12px;
}
.beauty-preview-action-dock{
  flex-shrink:0;
  display:grid;
  gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 -8px 24px rgba(0,0,0,.06);
}
.beauty-preview-action-dock__primary{
  width:100%;
  min-height:52px;
  font-size:16px;
  font-weight:600;
  border-radius:14px;
}
.beauty-preview-action-dock__secondary-row,
.beauty-preview-action-dock__tertiary-row{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.beauty-preview-action-dock__secondary{
  flex:1 1 auto;
  min-width:120px;
  min-height:44px;
}
.btn-link.beauty-preview-action-dock__tertiary{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  line-height:1.3;
  padding:8px 10px;
  min-height:auto;
  box-shadow:none;
  cursor:pointer;
}
.btn-link.beauty-preview-action-dock__tertiary:hover,
.btn-link.beauty-preview-action-dock__tertiary:focus-visible{
  color:var(--text);
  background:transparent;
  box-shadow:none;
}
.beauty-preview-lead--compact{
  margin-bottom:10px;
  font-size:12px;
}
.beauty-preview-modal__close{
  position:absolute;
  top:10px;
  right:12px;
  width:36px;
  height:36px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.beauty-preview-modal__close:hover{
  background:var(--accent-soft);
  color:var(--text);
  transform:none;
  box-shadow:none;
}
.beauty-preview-lead{
  margin:0 0 14px;
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}
.beauty-preview-disclaimer{
  margin:14px 0 0;
  padding:10px 12px;
  border-radius:10px;
  background:var(--accent-soft);
  border:1px solid rgba(0,0,0,.06);
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}
.beauty-preview-disclaimer--capture{
  margin-top:0;
  margin-bottom:8px;
  background:rgba(244,0,24,.12);
}
.beauty-preview-lead--muted{
  font-size:12px;
  margin-bottom:8px;
}
.beauty-preview-progress{
  display:flex;
  gap:6px;
  margin:0 0 16px;
  padding:0;
  list-style:none;
  counter-reset:beauty-step;
}
.beauty-preview-progress__item{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  color:var(--muted);
  font-size:11px;
  line-height:1.2;
}
.beauty-preview-progress__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:2px solid var(--border);
  background:var(--surface);
  box-sizing:border-box;
}
.beauty-preview-progress__item.is-current{
  color:var(--text);
  font-weight:600;
}
.beauty-preview-progress__item.is-current .beauty-preview-progress__dot{
  border-color:var(--accent);
  background:var(--accent);
}
.beauty-preview-progress__item.is-done{
  color:var(--text);
}
.beauty-preview-progress__item.is-done .beauty-preview-progress__dot{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.beauty-preview-selfie-guide{
  display:grid;
  gap:14px;
}
.beauty-preview-camera-frame{
  position:relative;
  aspect-ratio:3/4;
  max-height:320px;
  margin:0 auto;
  width:min(100%, 280px);
  border-radius:18px;
  overflow:hidden;
  background:#111;
  border:1px solid var(--border);
}
.beauty-preview-camera-viewport{
  display:grid;
  gap:10px;
}
.beauty-preview-camera-error{
  margin:0;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(180,60,60,.08);
  border:1px solid rgba(180,60,60,.18);
  color:var(--text);
  font-size:12px;
  line-height:1.45;
}
.beauty-preview-video,
.beauty-preview-captured{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#111;
}
.beauty-preview-video[hidden],
.beauty-preview-captured[hidden]{
  display:none !important;
}
.beauty-preview-mask{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.beauty-preview-step--capture .beauty-preview-selfie-guide{
  margin-bottom:8px;
}
.beauty-preview-step--capture .beauty-preview-disclaimer{
  margin-bottom:0;
}
.beauty-preview-camera-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:12px;
  font-size:12px;
  color:rgba(0,0,0,.45);
  text-align:center;
  pointer-events:none;
}
.beauty-preview-mask__hair-zone{
  position:absolute;
  left:50%;
  top:8%;
  width:72%;
  height:28%;
  transform:translateX(-50%);
  border:2px dashed rgba(255,255,255,.85);
  border-bottom:0;
  border-radius:999px 999px 0 0;
  box-shadow:inset 0 0 0 999px rgba(0,0,0,.08);
}
.beauty-preview-mask__oval{
  position:absolute;
  left:50%;
  top:24%;
  width:58%;
  height:52%;
  transform:translateX(-50%);
  border:3px solid rgba(255,255,255,.95);
  border-radius:50%;
  box-shadow:0 0 0 999px rgba(0,0,0,.18);
}
.beauty-preview-mask--attention .beauty-preview-mask__oval,
.beauty-preview-mask--attention .beauty-preview-mask__hair-zone{
  border-color:rgba(255,210,120,.98);
}
.beauty-preview-mask--shake .beauty-preview-mask__oval,
.beauty-preview-mask--shake .beauty-preview-mask__hair-zone{
  animation:beauty-preview-overlay-shake .55s ease;
}
@keyframes beauty-preview-overlay-shake{
  0%,100%{ transform:translateX(-50%); }
  20%{ transform:translateX(calc(-50% - 6px)); }
  40%{ transform:translateX(calc(-50% + 5px)); }
  60%{ transform:translateX(calc(-50% - 4px)); }
  80%{ transform:translateX(calc(-50% + 3px)); }
}
.beauty-preview-photo-quality{
  margin:0 0 14px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,170,60,.08);
  border:1px solid rgba(255,170,60,.22);
}
.beauty-preview-photo-quality__desc{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.5;
  color:var(--text);
}
.beauty-preview-photo-quality__checklist{
  margin:0;
  padding-left:18px;
  font-size:13px;
  line-height:1.55;
  color:var(--text);
}
.beauty-preview-photo-quality__item + .beauty-preview-photo-quality__item{
  margin-top:4px;
}
.beauty-preview-step--photo-quality-error .beauty-preview-selfie-guide{
  margin-top:4px;
}
.beauty-preview-mask__eye-line{
  position:absolute;
  left:14%;
  right:14%;
  top:42%;
  height:0;
  border-top:2px dashed rgba(255,255,255,.9);
}
.beauty-preview-mask--angle45 .beauty-preview-mask__head-angle{
  position:absolute;
  left:34%;
  top:22%;
  width:48%;
  height:54%;
  border:3px solid rgba(255,255,255,.95);
  border-radius:46% 54% 52% 48%;
  transform:rotate(18deg);
  box-shadow:0 0 0 999px rgba(0,0,0,.18);
}
.beauty-preview-mask--angle45 .beauty-preview-mask__temple-zone{
  position:absolute;
  left:18%;
  top:36%;
  width:22%;
  height:24%;
  border:2px dashed rgba(255,255,255,.9);
  border-radius:12px;
  transform:rotate(12deg);
}
.beauty-preview-mask--angle45 .beauty-preview-mask__hair-side{
  position:absolute;
  left:8%;
  top:8%;
  width:46%;
  height:30%;
  border:2px dashed rgba(255,255,255,.85);
  border-right:0;
  border-radius:999px 0 0 999px;
  transform:rotate(-8deg);
}
.beauty-preview-camera-frame--angle45{
  background:linear-gradient(135deg, #dfe6ee 0%, #bcc6d2 100%);
}
.beauty-preview-hints{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.beauty-preview-hints li{
  position:relative;
  padding-left:18px;
  font-size:13px;
  color:var(--text);
  line-height:1.35;
}
.beauty-preview-hints li::before{
  content:'•';
  position:absolute;
  left:0;
  color:var(--accent);
  font-weight:700;
}
.beauty-preview-type-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}
.beauty-preview-type-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  width:100%;
  padding:16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  text-align:left;
  cursor:pointer;
  transition:var(--transition, .15s ease);
}
.beauty-preview-type-card:hover{
  border-color:var(--accent);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.beauty-preview-type-card__title{
  font-size:15px;
  font-weight:600;
  color:var(--text);
}
.beauty-preview-type-card__hint{
  font-size:12px;
  color:var(--muted);
}
.beauty-preview-style-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:12px;
}
.beauty-preview-style-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
}
.beauty-preview-style-card.is-selected{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.beauty-preview-style-card__thumb{
  aspect-ratio:4/3;
  border-radius:10px;
  background:
    linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.12)),
    repeating-linear-gradient(-45deg, #eceae6 0 8px, #f7f5f1 8px 16px);
}
.beauty-preview-style-card__title{
  margin:0;
  font-size:14px;
  font-weight:600;
}
.beauty-preview-style-card__hint{
  margin:0;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
  flex:1;
}
.beauty-preview-style-card__btn{
  width:100%;
  flex:initial;
}
.beauty-preview-style-card--catalog .beauty-preview-style-card__meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:11px;
  color:var(--muted);
  line-height:1.35;
}
.beauty-preview-style-card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.beauty-preview-tag{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  background:var(--accent-soft);
  border:1px solid rgba(0,0,0,.06);
  font-size:11px;
  color:var(--text);
  line-height:1.2;
}
.beauty-preview-style-grid--catalog{
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.beauty-preview-ref-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  background:var(--surface);
  display:grid;
  gap:12px;
}
.beauty-preview-ref-card__head{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.beauty-preview-ref-card__title{
  margin:0;
  font-size:18px;
  font-weight:600;
}
.beauty-preview-ref-card__desc{
  margin:0;
  font-size:13px;
  color:var(--text);
  line-height:1.45;
}
.beauty-preview-ref-card__media{
  border-radius:12px;
  overflow:hidden;
  background:var(--surface-2, rgba(0,0,0,.04));
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.beauty-preview-ref-card__media--empty{
  min-height:200px;
}
.beauty-preview-ref-card__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.beauty-preview-ref-card__details{
  margin:0;
  display:grid;
  gap:10px;
}
.beauty-preview-ref-detail{
  display:grid;
  gap:2px;
}
.beauty-preview-ref-detail__label{
  margin:0;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
}
.beauty-preview-ref-detail__value{
  margin:0;
  font-size:13px;
  line-height:1.4;
  color:var(--text);
}
.beauty-preview-ref-card__barber{
  padding:12px;
  border-radius:10px;
  background:var(--accent-soft);
  border:1px solid rgba(0,0,0,.06);
}
.beauty-preview-ref-card__barber-title{
  margin:0 0 6px;
  font-size:13px;
  font-weight:600;
}
.beauty-preview-ref-card__barber-text{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:var(--text);
}
.beauty-preview-disclaimer--reference{
  margin-top:12px;
  background:rgba(244,0,24,.1);
}
.beauty-preview-ref-card{
  margin-bottom:8px;
}
.beauty-preview-badge{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  padding:4px 10px;
  border-radius:999px;
  background:var(--accent);
  color:var(--on-accent);
  font-size:11px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.02em;
}
.beauty-preview-style-card--catalog.is-recommended{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.beauty-preview-catalog-section{
  display:grid;
  gap:10px;
  margin-bottom:16px;
}
.beauty-preview-catalog-section__title{
  margin:0;
  font-size:14px;
  font-weight:600;
}
.beauty-preview-face-result{
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  background:var(--surface);
  display:grid;
  gap:8px;
}
.beauty-preview-face-result__label{
  margin:0;
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.beauty-preview-face-result__shape{
  margin:0;
  font-size:20px;
  font-weight:600;
}
.beauty-preview-face-result__desc{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:var(--text);
}
.beauty-preview-face-reco{
  display:grid;
  gap:10px;
}
.beauty-preview-face-reco__title{
  margin:0;
  font-size:14px;
  font-weight:600;
}
.beauty-preview-face-reco__grid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
.beauty-preview-face-reco-card{
  position:relative;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:var(--surface);
  display:grid;
  gap:6px;
}
.beauty-preview-face-reco-card__title{
  margin:0;
  font-size:14px;
  font-weight:600;
}
.beauty-preview-face-reco-card__hint{
  margin:0;
  font-size:12px;
  line-height:1.35;
  color:var(--muted);
}
.beauty-preview-disclaimer--face-analysis{
  margin-top:0;
  margin-bottom:8px;
  background:rgba(244,0,24,.1);
}
.beauty-preview-success-msg{
  margin:0 0 8px;
  font-size:14px;
  color:var(--text);
  line-height:1.45;
}
.beauty-preview-success-meta{
  margin:0;
  font-size:13px;
  color:var(--muted);
}
body.beauty-preview-open{
  overflow:hidden;
}
.beauty-preview-persona-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  margin:16px 0;
}
.beauty-preview-persona-card{
  display:grid;
  gap:8px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.beauty-preview-persona-card:hover,
.beauty-preview-persona-card:focus-visible{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
  outline:none;
}
.beauty-preview-persona-card__name{
  font-size:16px;
  font-weight:600;
  color:var(--text);
}
.beauty-preview-persona-card__desc{
  font-size:13px;
  line-height:1.45;
  color:var(--text);
}
.beauty-preview-persona-card.is-selected{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.beauty-preview-style-grid--picker{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin:14px 0 18px;
}
.beauty-preview-style-grid.beauty-preview-style-grid--picker{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.beauty-preview-style-grid--gallery{
  gap:12px;
}
.beauty-preview-style-card--tile{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  width:100%;
  min-height:0;
  padding:6px;
  border-radius:14px;
  border:2px solid var(--border);
  background:var(--surface);
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
  font:inherit;
  color:inherit;
}
.beauty-preview-style-grid--picker{
  align-items:start;
}
.beauty-preview-style-card--visual{
  overflow:hidden;
  height:100%;
}
.beauty-preview-style-card--visual .beauty-preview-style-card__thumb{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/5;
  flex:0 0 auto;
  border-radius:10px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.06)),
    var(--surface-2, #f3f0ea);
}
.beauty-preview-style-card--visual .beauty-preview-style-card__img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center top;
}
.beauty-preview-style-card--tile:hover,
.beauty-preview-style-card--tile:focus-visible{
  border-color:var(--accent);
  outline:none;
  box-shadow:0 0 0 2px var(--accent-soft);
}
.beauty-preview-style-card--tile.is-selected{
  border-color:var(--accent);
  background:var(--surface);
  box-shadow:0 0 0 2px var(--accent), 0 4px 14px rgba(244,0,24,.22);
}
.beauty-preview-style-card--tile .beauty-preview-style-card__title{
  font-size:12px;
  line-height:1.3;
  font-weight:600;
  padding:8px 4px 4px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
}
.beauty-preview-style-card--tile .beauty-preview-style-card__hint{
  display:none;
}
.beauty-preview-style-card--visual.is-selected{
  transform:translateY(-1px);
}
.beauty-preview-style-card--visual.is-selected .beauty-preview-style-card__thumb{
  box-shadow:inset 0 0 0 2px var(--accent);
}
@media (max-width: 640px){
  .beauty-preview-style-grid--picker,
  .beauty-preview-style-grid.beauty-preview-style-grid--picker{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px;
  }
  .beauty-preview-style-card--tile{
    padding:6px;
  }
  .beauty-preview-style-card--tile .beauty-preview-style-card__title{
    font-size:12px;
  }
}
@media (min-width: 641px){
  .beauty-preview-style-grid--picker,
  .beauty-preview-style-grid.beauty-preview-style-grid--picker{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}
.beauty-preview-persona-grid--compact{
  grid-template-columns:1fr;
  max-width:360px;
  margin-left:auto;
  margin-right:auto;
}
.beauty-preview-persona-card--compact{
  padding:14px 16px;
}
.beauty-preview-compare{
  display:grid;
  gap:10px;
  margin:0 0 14px;
}
.beauty-preview-compare__title{
  margin:0;
  font-size:14px;
  font-weight:600;
}
.beauty-preview-compare__scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}
.beauty-preview-compare__track{
  display:flex;
  gap:10px;
  min-width:min-content;
}
.beauty-preview-compare-thumb{
  flex:0 0 auto;
  width:88px;
  padding:0;
  border:2px solid transparent;
  border-radius:12px;
  background:var(--surface);
  cursor:pointer;
  display:grid;
  gap:6px;
  text-align:center;
}
.beauty-preview-compare-thumb:hover,
.beauty-preview-compare-thumb:focus-visible{
  border-color:rgba(0,0,0,.12);
}
.beauty-preview-compare-thumb.is-active{
  border-color:var(--accent, #F40018);
  box-shadow:0 0 0 1px var(--accent, #F40018);
}
.beauty-preview-compare-thumb__frame{
  display:block;
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:1;
  background:var(--surface-2, rgba(0,0,0,.04));
}
.beauty-preview-compare-thumb__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.beauty-preview-compare-thumb__empty{
  display:block;
  width:100%;
  height:100%;
  min-height:72px;
  background:var(--surface-2, rgba(0,0,0,.06));
}
.beauty-preview-compare-thumb__label{
  display:block;
  font-size:10px;
  line-height:1.2;
  color:var(--text);
  padding:0 4px 6px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.beauty-preview-look-card--hero{
  cursor:default;
  pointer-events:none;
}
.beauty-preview-looks-grid--single{
  max-width:320px;
  margin-left:auto;
  margin-right:auto;
}
.beauty-preview-error{
  margin:12px 0 0;
  font-size:13px;
  line-height:1.45;
  color:#b42318;
}
.beauty-preview-error--block{
  margin:0;
  text-align:center;
  font-size:14px;
  font-weight:500;
}
.beauty-preview-generation-actions{
  margin-top:0;
}
.beauty-preview-look-card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
  display:block;
}
.beauty-preview-look-card__preview-empty{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:var(--muted);
}
.beauty-preview-loading{
  display:grid;
  justify-items:center;
  gap:16px;
  padding:32px 16px;
  margin:16px 0;
}
.beauty-preview-loading__spinner{
  width:44px;
  height:44px;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:beauty-preview-spin .8s linear infinite;
}
@keyframes beauty-preview-spin{
  to{ transform:rotate(360deg); }
}
.beauty-preview-loading__message{
  margin:0;
  font-size:15px;
  font-weight:500;
  text-align:center;
  color:var(--text);
}
.beauty-preview-looks-grid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
  margin:8px 0 12px;
}
.beauty-preview-look-card{
  display:grid;
  gap:0;
  padding:0;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  overflow:hidden;
  cursor:pointer;
  text-align:left;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.beauty-preview-look-card:hover,
.beauty-preview-look-card:focus-visible{
  border-color:var(--accent);
  outline:none;
}
.beauty-preview-look-card.is-selected{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.beauty-preview-look-card__preview{
  position:relative;
  aspect-ratio:4/5;
  background:linear-gradient(145deg, rgba(244,0,24,.12), rgba(0,0,0,.04));
}
.beauty-preview-look-card__meta{
  padding:12px 14px 14px;
  display:grid;
  gap:4px;
}
.beauty-preview-look-card__badge{
  position:absolute;
  top:10px;
  left:10px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--accent);
  color:var(--on-accent);
  font-size:11px;
  font-weight:600;
}
.beauty-preview-look-card__title{
  margin:0;
  font-size:15px;
  font-weight:600;
}
.beauty-preview-look-card__vibe{
  margin:0;
  font-size:12px;
  line-height:1.35;
  color:var(--muted);
}
.beauty-preview-look-card__helper{
  margin:6px 0 0;
  font-size:11px;
  line-height:1.35;
  color:var(--text);
  opacity:.78;
}
.beauty-preview-ref-card__helper{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.4;
  color:var(--muted);
}
.beauty-preview-refine{
  display:grid;
  gap:8px;
  margin:4px 0 12px;
  padding-top:4px;
}
.beauty-preview-refine__title{
  margin:0;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.beauty-preview-refine__scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 -20px;
  padding:0 20px 2px;
  scrollbar-width:none;
}
.beauty-preview-refine__scroll::-webkit-scrollbar{
  display:none;
}
.beauty-preview-refine__chips{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  width:max-content;
}
.beauty-preview-refine-chip{
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  font-size:12px;
  line-height:1.2;
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .15s ease, background .15s ease;
}
.beauty-preview-refine-chip:hover,
.beauty-preview-refine-chip:focus-visible{
  border-color:var(--accent);
  outline:none;
}
.beauty-preview-refine-chip.is-active{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.beauty-preview-ref-card__persona{
  margin:0;
  font-size:13px;
  color:var(--muted);
}
.beauty-preview-disclaimer--consultation{
  margin-top:12px;
  background:rgba(244,0,24,.08);
}
@media (max-width: 640px){
  .hero-cta-group{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-cta-group .hero-cta{
    width:100%;
  }
  .beauty-preview-step__scroll{
    padding-left:16px;
    padding-right:16px;
  }
  .beauty-preview-refine__scroll{
    margin-left:-16px;
    margin-right:-16px;
    padding-left:16px;
    padding-right:16px;
  }
  .beauty-preview-action-dock{
    padding-left:12px;
    padding-right:12px;
  }
  .beauty-preview-style-grid{
    grid-template-columns:1fr;
  }
  .beauty-preview-persona-grid,
  .beauty-preview-looks-grid{
    grid-template-columns:1fr;
  }
}
@media (min-width: 641px){
  .beauty-preview-looks-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

.service-card--preview-flow-action{
  border:1px solid var(--accent-soft, rgba(244,0,24,.35));
  background:linear-gradient(180deg, rgba(244,0,24,.08), transparent);
}
.service-media--preview-flow{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-soft, rgba(244,0,24,.12));
}
.service-preview-flow-badge{
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--accent, #F40018);
}
.chat-choice-card--preview-flow-action{
  border-color:var(--accent-soft, rgba(244,0,24,.35));
  background:rgba(244,0,24,.06);
}
.chat-choice-button--preview-flow-action{
  border-color:var(--accent, #F40018);
}