/* /app/styles.css — SafetyBot glass UI (cards/accordions/help/subbar/buttons/inputs) */

:root{
  --pad:16px; --gap:12px; --radius:14px;
  --muted:#aab0d6; --text:#e8eaff; --primary:#8b5cf6;

  /* стекло */
  --glass-bg: rgba(255,255,255,.05);
  --glass-border: rgba(255,255,255,.14);
  --glass-border-weak: rgba(255,255,255,.10);
  --glass-blur: 16px;
}

html, body { max-width:100%; overflow-x:hidden; }
html { -webkit-text-size-adjust:100%; touch-action: pan-y; }
body { overscroll-behavior: contain; color: var(--text); }

/* Общая обёртка */
.wrap{ max-width:1200px; margin:0 auto; padding:0 var(--pad); position:relative; z-index:1 }
body.webapp .wrap, body.mobile .wrap{
  width:100vw; max-width:100vw; padding-left:12px; padding-right:12px; box-sizing:border-box;
}

/* Хедер прячем в WebApp */
body.webapp .header{ display:none; }

/* ===== GLASS CORE ========================================================= */
.glass{
  position: relative;
  background: var(--glass-bg);
  background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 34%);
  border: 1px solid var(--glass-border-weak);
  border-top-color: var(--glass-border);
  border-left-color: var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 10px 30px rgba(0,0,0,.35);
}
.glass::before{ /* мягкий верхний блик как на скрине */
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 40%);
}

/* Карточки/таблицы */
.card{ border-radius:var(--radius); }
.card,
.table-wrapper,
details.acc,
.help,
#subbar,
#billing .card{ /* всё — стекло */
  composes: glass;
}
.table-wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ width:100%; border-collapse:collapse; table-layout:auto; }
.table th, .table td{ padding:10px 8px; vertical-align:top }
.table thead th{ color:#cbd5ff; font-weight:600; border-bottom:1px solid rgba(255,255,255,.06); white-space:nowrap }
.table tbody tr{ border-bottom:1px dashed rgba(255,255,255,.06) }
.table td:last-child{ word-break: break-word }

/* На 100% ширины */
#panel-card, #feed-card, #billing, .table, .table-wrapper, .card{ width:100%; max-width:100%; box-sizing:border-box; }
img, canvas, video{ max-width:100%; height:auto }

/* Формы/кнопки — такое же стекло */
select, .input, textarea,
.btn, .picker button, .chip{
  background: rgba(255,255,255,.08);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:8px 10px;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.10);
}
select:focus, .input:focus, textarea:focus,
.btn:focus, .picker button:focus{
  outline: 2px solid rgba(255,255,255,.25);
}
option { color:#0f1226; } /* список опций остаётся тёмным */

/* Сетка */
@media (min-width:1024px){
  body:not(.webapp) .grid.mod{
    display:grid; gap:var(--gap);
    grid-template-columns:1.4fr 1.6fr;
  }
}
@media (max-width:1023.98px){
  .grid.mod{ display:grid; grid-template-columns:1fr; gap:var(--gap); }
}
.grid.mod > *{ min-width:0; max-width:100% }

/* Селект чатов */
#chatSelect{ width:100%; }

/* Табы — перенос */
.row-tabs{ flex-wrap:wrap; }

/* Чипсы */
.chips{ display:flex; gap:6px; flex-wrap:wrap }
.chip .rm{ cursor:pointer; opacity:.8 } .chip .rm:hover{ opacity:1 }

/* Help-блоки (та же стеклянность) */
.help{ padding:8px 10px; }
.help summary{ cursor:pointer; font-weight:700; color:#dbe1ff }
.help p, .help ul{ margin:6px 0 }
.help code{ background:rgba(255,255,255,.08); padding:2px 6px; border-radius:6px }

/* Вкладка Billing */
#billing{ display:block; }
#billing .row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px }
#billing .title{ font-weight:600; font-size:18px }
#billing .badge{ font-size:12px; color:#fff; padding:4px 8px; border-radius:999px; background:var(--primary) }
#billing .alias{ color:var(--muted); font-size:13px; margin-bottom:6px }
#billing .sub{ font-size:14px; margin-bottom:8px }
#billing .plans{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
@media (max-width:860px){ #billing .plans{ grid-template-columns:1fr } }
body.webapp .plans, body.mobile .plans{ grid-template-columns:1fr !important; }
#billing .plan{ border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:10px; background:rgba(255,255,255,.05) }
#billing .p-title{ font-weight:600; margin-bottom:6px }

/* Верхняя мини-панель подписки */
#subbar{ display:none; margin-top:8px; align-items:center; gap:12px }
#subbar .title{ font-weight:700 } .subbar .muted{ margin-left:6px }
#subbar .grow{ flex:1 1 auto }
#subbar .picker{ display:flex; gap:6px }
#subbar .picker button{ border-radius:999px; padding:6px 10px }
#subbar .picker button.active{ outline:2px solid rgba(255,255,255,.25) }
#subbar .actions{ display:flex; gap:6px; flex-wrap:wrap }
@media (max-width:720px){
  #subbar{ flex-direction:column; align-items:stretch }
  #subbar .row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
  #subbar .actions{ width:100% }
}

/* Boot-line */
#boot-line{ height:3px; background:linear-gradient(90deg,#7aa6ff,#c084fc); background-size:200% auto;
  animation:tgShimmer 2.6s linear infinite; border-radius:999px; opacity:.35 }
@keyframes tgShimmer{ to{ background-position:-200% center } }

/* Запрет горизонтального скролла */
html, body { overflow-x:hidden; overscroll-behavior-x:none; }
body.webapp, body.mobile { overflow-x:hidden; }

body.webapp .wrap,
body.mobile .wrap{
  width:100vw; max-width:100vw;
  padding-left:max(12px, env(safe-area-inset-left));
  padding-right:max(12px, env(safe-area-inset-right));
  box-sizing:border-box;
}

/* Аккордеоны */
details.acc{ padding:8px 10px }
details.acc > summary{
  list-style:none; display:flex; align-items:center; gap:8px;
  cursor:pointer; font-weight:700; color:#dbe1ff;
}
details.acc > summary::-webkit-details-marker{ display:none }
details.acc > summary::after{
  content:'▾'; margin-left:auto; transition:transform .2s ease; opacity:.8;
}
details.acc[open] > summary::after{ transform:rotate(180deg); opacity:1 }
.acc-body{ margin-top:8px }

/* Jumpbar (НЕ липкий) */
.jumpbar{
  position:static; z-index:1; display:flex; flex-wrap:wrap; gap:8px;
  padding:8px; margin:8px 0 10px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border-weak);
  border-radius:12px;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
.jumpbar a{ padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); cursor:pointer; user-select:none }
.jumpbar a.active{ outline:2px solid rgba(255,255,255,.24) }

/* Отступ для якорей */
[id^="sec-"]{ scroll-margin-top:72px; }

/* Единый зазор между соседними секциями */
.section + .section { margin-top:12px; }

/* Десктоп: приятная читаемая ширина */
@media (min-width:1024px){
  body:not(.webapp) .wrap{ max-width:1200px; margin:0 auto; }
  body:not(.webapp) .grid.mod{ grid-template-columns:1.4fr 1.6fr; }
  body:not(.webapp) #panel-card, 
  body:not(.webapp) #feed-card{ max-width:880px; }
}
#billing .picker button.active { outline: 2px solid rgba(152,16,220,.9); }
body.webapp .footer { display: none; }
.toolbar{ display:flex; gap:6px; flex-wrap:wrap; }