/*
 * Luminate AI Desk 固有の追加 CSS（k386.css の後に読む）。
 * 画面の写真がまだ無いため、画面構成を CSS で描いた「疑似スクリーンショット」だけを置く。
 * 色は k386.css の変数を使い、ここでは再定義しない。
 */
.l-mock { background: var(--surface-2); font-size: 0.72rem; line-height: 1.4; color: var(--ink-2); user-select: none; }
.l-mock__bar { display: flex; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--rule); background: var(--surface); }
.l-mock__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-strong); }
.l-mock__cols { display: grid; grid-template-columns: 27% minmax(0, 1fr) 28%; min-height: 340px; }
.l-mock__nav, .l-mock__main, .l-mock__ai { padding: 10px; min-width: 0; }
.l-mock__nav { border-right: 1px solid var(--rule); background: var(--paper-2); display: flex; flex-direction: column; gap: 3px; }
.l-mock__rec { background: var(--accent); color: var(--accent-ink); border-radius: 6px; padding: 4px 6px; font-weight: 700; margin-bottom: 4px; text-align: center; }
.l-mock__item { display: flex; justify-content: space-between; padding: 3px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; }
.l-mock__item b { font-weight: 400; color: var(--muted); }
.l-mock__item--on { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.l-mock__main { display: flex; flex-direction: column; gap: 6px; }
.l-mock__title { font-size: 0.9rem; font-weight: 800; color: var(--ink); }
.l-mock__tools { display: flex; flex-wrap: wrap; gap: 4px; }
.l-mock__tools span { border: 1px solid var(--rule-strong); border-radius: 999px; padding: 1px 7px; background: var(--surface); white-space: nowrap; }
.l-mock__group { font-weight: 700; color: var(--muted); margin-top: 4px; }
.l-mock__row { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 4px 7px; display: flex; justify-content: space-between; gap: 6px; }
.l-mock__row i { font-style: normal; color: var(--warn); white-space: nowrap; }
.l-mock__ai { border-left: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.l-mock__ai-head { font-weight: 800; color: var(--ink); }
.l-mock__chip { align-self: flex-start; border-radius: 999px; padding: 1px 7px; background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.l-mock__bubble { background: var(--paper-2); border-radius: 8px; padding: 6px 7px; }
.l-mock__input { margin-top: auto; border: 1px solid var(--rule-strong); border-radius: 6px; padding: 5px 7px; color: var(--muted); }
@media (max-width: 520px) {
  .l-mock__cols { grid-template-columns: 30% minmax(0, 1fr); }
  .l-mock__ai { display: none; }
}