/* иконки интерфейса — премиум-эмодзи (см. ic() в components.js) */
.ic { display: inline-block; width: 18px; height: 18px; flex: none; opacity: .92; }
.ic--xs { width: 13px; height: 13px; opacity: .6; }

/* кнопки периодов: мягкое затухание справа — видно, что ряд листается */
.periods { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); padding-right: 40px; }
.btn .ic { width: 20px; height: 20px; opacity: .8; }

/* подпись пика под точкой, если пик у самого верха */
.area__box { margin-top: 8px; }
.area__tip--below { transform: translate(-50%, 70%); }

/* полоска человека: длина = всего сообщений, внутри доли «ты / тебе» */
.prow__fill { display: flex; height: 100%; gap: 1px; border-radius: 2px; overflow: hidden; }
.prow__fill i { display: block; height: 100%; min-width: 2px; background: #ededed; animation: none; }
.prow__fill i.them { background: var(--accent); }

/* «Кто ты» без полной версии — тизер вместо пустого размытия */
.persona-card--locked { width: 100%; text-align: left; }
.persona-card__mystery { width: 88px; height: 88px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 40px; font-weight: 500; color: var(--faint); background: var(--raised); border: 1px dashed var(--line-2); }
.persona-card__cta { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 10px !important; color: var(--accent) !important; font-weight: 500; }

/* поиск и сортировка в «Людях» */
.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap > .ic { position: absolute; left: 14px; color: var(--faint); pointer-events: none; }
.search-wrap .search { padding-left: 42px; }
.sorts { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.sorts::-webkit-scrollbar { display: none; }
.sort { flex: none; display: inline-flex; align-items: center; gap: 6px; transition: background-color .14s var(--ease), color .14s var(--ease); }

/* главный график — плавная линия */
.chart--area { padding: 0; border: 0; background: none; }
.area__box { position: relative; height: 170px; }
.area { width: 100%; height: 100%; display: block; overflow: visible; }
.area__grid { stroke: rgba(237, 237, 237, .06); stroke-width: 1; }
.area__line { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 1.1s var(--ease) .05s forwards; }
.area__fill { opacity: 0; animation: fadein-plain .6s var(--ease) .5s forwards; }
.area__peakline { stroke: rgba(106, 179, 243, .35); stroke-width: 1; stroke-dasharray: 3 3; }
.area__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(106, 179, 243, .18); }
.area__tip { position: absolute; transform: translate(-50%, -150%); padding: 4px 8px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line-2); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein-plain { to { opacity: 1; } }
.bars--short { height: 110px; gap: 12px; }
.bars--short i { border-radius: 6px 6px 2px 2px; }

/* достижения */
.ach-prev { display: flex; flex-direction: column; gap: 16px; text-align: left; width: 100%; padding: 16px; }
.ach-prev__head { display: flex; align-items: baseline; gap: 8px; }
.ach-prev__head b { font-weight: 500; font-size: 20px; }
.ach-prev__head span { color: var(--muted); font-size: 14px; flex: 1; }
.ach-prev__head .ic { align-self: center; color: var(--faint); }
.ach-prev__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ach-mini { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ach-mini .tge { width: 44px; height: 44px; }
.ach-mini span { font-size: 11px; color: var(--muted); line-height: 1.2; }
.ach-mini.off .tge, .ach.off .ach__e { filter: grayscale(1); opacity: .35; }
.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ach { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.ach__e { width: 48px !important; height: 48px !important; margin-bottom: 4px; }
.ach b { font-weight: 500; font-size: 15px; }
.ach span { font-size: 12px; color: var(--muted); line-height: 1.35; flex: 1; }
.ach small { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.ach:not(.off) small { color: var(--accent); }
.ach__bar { height: 3px; border-radius: 2px; background: var(--raised); overflow: hidden; margin-top: 6px; }
.ach__bar i { display: block; height: 100%; background: var(--accent); }
.ach.off .ach__bar i { background: #56565a; }

/* настроение */
.mood { display: flex; flex-direction: column; gap: 8px; }
.mood__bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #3a3a3d; }
.mood__bar .pos { background: var(--pos); }
.mood__bar .neg { flex: 1; background: #6b3f45; }

/* подарок */
.gift { display: flex; flex-direction: column; gap: 12px; }
.gift__text b { display: block; font-weight: 500; font-size: 16px; }
.gift__text span { font-size: 13px; color: var(--muted); }

/* премиум-цвета карточки */
.theme-pick button { position: relative; }
.theme-lock { position: absolute; inset: 0; border-radius: 50%; background: rgba(20, 20, 21, .55); }
.theme-lock::after { content: ''; position: absolute; inset: 8px; background: #ededed; --lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  -webkit-mask: var(--lock) center / contain no-repeat; mask: var(--lock) center / contain no-repeat; }

/* загрузка файла: настоящее поле поверх кнопки — тап попадает прямо в него */
.file-btn { position: relative; overflow: hidden; cursor: pointer; }
.file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.drop-hint { text-align: center; font-size: 13px; color: var(--faint); margin-top: -8px; }
.drop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(10, 10, 11, .78); opacity: 0; pointer-events: none; transition: opacity .16s var(--ease); }
.drop.on { opacity: 1; }
.drop__box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 32px; border-radius: var(--r-xl); border: 2px dashed rgba(106, 179, 243, .6); color: var(--text); font-size: 16px; font-weight: 500; }
.drop__box .ic { width: 32px; height: 32px; color: var(--accent); }

/* файл, присланный в чат */
.upload { display: flex; flex-direction: column; gap: 6px; border-color: rgba(106, 179, 243, .35); }
.upload__head { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.upload__head b { font-weight: 500; }
.upload__head .ic { color: var(--accent); opacity: 1; }
.upload__meta { font-size: 13px; color: var(--muted); }
.upload .row2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 8px; margin-top: 8px; }
.upload .btn { white-space: nowrap; padding: 0 12px; }