/* Features bento */

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.4rem); }
.tile { grid-column: span 4; display: grid; align-content: start; gap: 1.5rem; padding: clamp(1.4rem, 2.4vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); min-width: 0; }
.tile:hover { box-shadow: var(--shadow-md); }
.tile--analysis { grid-column: span 7; }
.tile--feedback { grid-column: span 5; }
.tile__text { display: grid; gap: .5rem; }
.tile__text p { color: var(--text-soft); font-size: .98rem; }
.tile__foot { color: var(--text-faint); }

.meters { display: grid; gap: .8rem; }
.meters li { display: grid; grid-template-columns: 10.5rem 1fr 2rem; align-items: center; gap: 1rem; font-size: .93rem; }
.meters i { height: 8px; border-radius: 8px; background: var(--page-deep); position: relative; overflow: hidden; }
.meters i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: 8px; background: linear-gradient(90deg, var(--mint-300), var(--teal-500)); transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--ease-out); transition-delay: calc(var(--k, 0) * 70ms); }
.meters i.is-low::after { background: linear-gradient(90deg, #f6b8a6, var(--alert)); }
.tile.is-in .meters i::after { transform: scaleX(1); }
.meters b { text-align: right; font-weight: 600; color: var(--ink-900); }

.fb { display: grid; gap: .7rem; }
.fb .toast { font-size: .93rem; }

.ghostbox { aspect-ratio: 4 / 3.3; border-radius: var(--r-md); background: radial-gradient(120% 90% at 50% 0%, #fff 0%, var(--mint-50) 60%, var(--mint-100) 100%); position: relative; overflow: hidden; }
.ghostbox canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.chat { display: grid; gap: .7rem; font-size: .95rem; }
.chat p { padding: .8rem 1rem; border-radius: 16px; max-width: 92%; line-height: 1.45; }
.chat__me { justify-self: end; background: var(--ink-900); color: #fff; border-bottom-right-radius: 5px; }
.chat__ai { justify-self: start; background: var(--mint-100); color: var(--ink-900); border-bottom-left-radius: 5px; }

.datalist li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--text-soft); }
.datalist li:last-child { border-bottom: 0; }
.datalist b { color: var(--ink-900); font-weight: 600; white-space: nowrap; }

@media (max-width: 1000px) {
  .tile, .tile--analysis, .tile--feedback { grid-column: span 6; }
  .tile--data { grid-column: span 12; }
}
@media (max-width: 680px) {
  .tile, .tile--analysis, .tile--feedback, .tile--data { grid-column: span 12; }
  .meters li { grid-template-columns: 8.5rem 1fr 1.75rem; gap: .7rem; }
}