/* ============================================================
   EnVision: Feature panel content styles
   ============================================================ */

/* ---------- Generic sample "image" (procedural, no external assets) ---------- */
.ph-img { position: relative; overflow: hidden; background: var(--surface-3); }
.ph-img svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-img .ph-tag {
  position: absolute; left: 8px; bottom: 8px; font-size: 0.72rem; font-weight: 700; color: #fff;
  background: rgba(20,15,10,0.45); backdrop-filter: blur(4px); padding: 2px 8px; border-radius: 999px;
}

/* ---------- Overview ---------- */
.ov-hero {
  border-radius: var(--r-lg); overflow: hidden; border: 1.5px solid var(--line); position: relative;
  min-height: 200px; display: flex; align-items: flex-end; padding: 18px; color: #fff;
}
.ov-hero .ov-hero-meta { position: relative; z-index: 2; }
.ov-hero h2 { color: #fff; }
.ov-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ov-stat { padding: 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1.5px solid var(--line); }
.mini-card { padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 1.5px solid var(--line); }
.timeline-item { display: flex; gap: 12px; padding: 8px 0; }
.timeline-item .tl-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; flex: none; color: var(--accent); border: 1.5px solid var(--line); }
.timeline-item .tl-dot svg { width: 1em; height: 1em; }

/* ---------- Inspiration board (masonry) ---------- */
.insp-masonry { columns: 4; column-gap: 12px; }
.insp-card { break-inside: avoid; margin-bottom: 12px; border-radius: var(--r-md); overflow: hidden; border: 1.5px solid var(--line); background: var(--surface); position: relative; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.insp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.insp-card .ph-img { width: 100%; }
.insp-card .insp-info { padding: 8px 10px; }
.insp-card .insp-info .t { font-weight: 600; font-size: 0.85rem; }
.insp-card .insp-info .s { font-size: 0.75rem; color: var(--text-3); }
.insp-like { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(20,15,10,0.35); color: #fff; display: grid; place-items: center; backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--dur) var(--ease); }
.insp-card:hover .insp-like { opacity: 1; }
.insp-like.liked { background: var(--accent); opacity: 1; }
.insp-like svg { width: 1em; height: 1em; }
@media (max-width: 1200px) { .insp-masonry { columns: 3; } }
@media (max-width: 800px) { .insp-masonry { columns: 2; } }

/* ---------- Mood board (free canvas) ---------- */
.mood-stage { position: relative; width: 100%; height: 100%; min-height: 460px; overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--line-strong) 50%, transparent) 1px, transparent 0) 0 0/24px 24px,
    var(--bg-3);
}
.mood-item {
  position: absolute; border-radius: var(--r-sm); box-shadow: var(--shadow-2); cursor: grab; overflow: hidden;
  border: 3px solid #fff; background: #fff;
}
[data-color-scheme="dark"] .mood-item { border-color: var(--surface); background: var(--surface); }
.mood-item.dragging { cursor: grabbing; box-shadow: var(--shadow-4); z-index: 50 !important; }
.mood-item.selected { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.mood-item .ph-img { width: 100%; height: 100%; }
.mood-swatch { border-radius: var(--r-sm); box-shadow: var(--shadow-2); border: 3px solid #fff; }
.mood-note {
  padding: 12px 14px; font-family: var(--font-hand); font-size: 1.25rem; font-weight: 600;
  letter-spacing: 0.02em; line-height: 1.25; color: var(--charcoal);
  background: #fdf6c7; box-shadow: var(--shadow-2); border: none; transform: rotate(-2deg); line-height: 1.2;
}
.mood-text { padding: 6px 10px; font-family: var(--font-display); font-weight: 600; background: transparent; border: none; box-shadow: none; color: var(--text); }

/* ---------- Floor plan ---------- */
.fp-wrap { position: relative; width: 100%; height: 100%; min-height: 460px; overflow: hidden; }
.fp-canvas { position: absolute; inset: 0; }
.fp-legend { position: absolute; left: 12px; bottom: 12px; background: var(--elevated); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; box-shadow: var(--shadow-2); font-size: 0.78rem; }
.fp-legend .row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.fp-legend .sw { width: 14px; height: 14px; border-radius: 4px; }
.fp-tools { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); }
.fp-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; }

/* ---------- 3D preview ---------- */
.td-wrap { position: relative; width: 100%; height: 100%; min-height: 460px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, var(--surface-2), var(--bg-3)); }
.td-canvas { position: absolute; inset: 0; cursor: grab; }
.td-canvas.grabbing { cursor: grabbing; }
.td-hud { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; }
.td-daynight { position: absolute; right: 12px; top: 12px; }
.hud-card { background: var(--elevated); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 10px; box-shadow: var(--shadow-2); }

/* ---------- Materials / palette ---------- */
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mat-card { border-radius: var(--r-md); overflow: hidden; border: 1.5px solid var(--line); background: var(--surface); transition: transform var(--dur) var(--ease); }
.mat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.mat-swatch { height: 96px; position: relative; }
.mat-swatch .finish { position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay; }
.mat-info { padding: 10px; }
.mat-info .n { font-weight: 600; font-size: 0.86rem; }
.mat-info .m { font-size: 0.75rem; color: var(--text-3); }

.palette-bar { display: flex; height: 64px; border-radius: var(--r-md); overflow: hidden; border: 1.5px solid var(--line-strong); box-shadow: var(--shadow-1); }
.palette-bar span { flex: 1; position: relative; transition: flex var(--dur) var(--ease); }
.palette-bar span:hover { flex: 1.6; }
.palette-bar span small { position: absolute; bottom: 6px; left: 8px; font-size: 0.68rem; font-family: var(--font-mono); color: rgba(255,255,255,0.85); opacity: 0; transition: opacity var(--dur) var(--ease); }
.palette-bar span:hover small { opacity: 1; }

/* ---------- Products ---------- */
.prod-row { display: grid; grid-template-columns: 56px 1fr auto auto auto; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); }
.prod-thumb { width: 56px; height: 56px; border-radius: var(--r-sm); overflow: hidden; border: 1.5px solid var(--line); }
.prod-name { font-weight: 600; font-size: 0.9rem; }
.prod-meta { font-size: 0.78rem; color: var(--text-3); }

/* ---------- Garden ---------- */
.garden-wrap { position: relative; width: 100%; height: 100%; min-height: 460px; }
.garden-canvas { position: absolute; inset: 0; }
.plant-chip { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); cursor: grab; }
.plant-chip:hover { border-color: var(--accent-3); background: var(--accent-3-soft); }
.plant-ic { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent-3-soft); color: var(--olive-deep); flex: none; }
.plant-ic svg { width: 1.15em; height: 1.15em; }
.sun-badge { font-size: 0.7rem; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-3); }

/* ---------- Budget ---------- */
.budget-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.budget-bar { display: flex; height: 30px; border-radius: 999px; overflow: hidden; border: 1.5px solid var(--line); }
.budget-bar span { position: relative; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; color: #fff; min-width: 0; }
.table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.table th { text-align: left; padding: 10px 12px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); border-bottom: 1.5px solid var(--line); vertical-align: middle; }
.table td { padding: 10px 12px; border-bottom: 1.5px solid var(--line); vertical-align: middle; }
.table tr:hover td { background: var(--surface-2); }
.table .num { text-align: right; font-family: var(--font-mono); }
.table tfoot td { font-weight: 700; border-top: 2px solid var(--line-strong); border-bottom: none; }

/* ---------- Client review ---------- */
.review-thread { display: flex; flex-direction: column; gap: 12px; }
.comment { display: flex; gap: 10px; }
.comment .bubble { background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 10px 12px; flex: 1; }
.comment .bubble .c-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.comment .bubble .c-name { font-weight: 700; font-size: 0.85rem; }
.comment .bubble .c-time { font-size: 0.72rem; color: var(--text-3); }
.comment .bubble p { color: var(--text); font-size: 0.9rem; }
.approve-row { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: var(--r-md); border: 1.5px dashed var(--line-strong); background: var(--surface-2); }
.pin-marker { position: absolute; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; background: var(--accent); transform: rotate(-45deg); border: 2px solid #fff; box-shadow: var(--shadow-2); display: grid; place-items: center; }
.pin-marker span { transform: rotate(45deg); color: #fff; font-size: 0.7rem; font-weight: 700; }

/* ---------- Exports ---------- */
.export-card { display: flex; gap: 14px; padding: 16px; border-radius: var(--r-lg); border: 1.5px solid var(--line); background: var(--surface); transition: all var(--dur) var(--ease); }
.export-card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.export-card .ex-ic { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-2); color: var(--accent); flex: none; }
.export-card .ex-ic svg { width: 1.4em; height: 1.4em; }

/* Assistant panel */
.assist-msg { display: flex; gap: 10px; margin-bottom: 12px; }
.assist-msg .a-av { width: 30px; height: 30px; border-radius: var(--r-md); display: grid; place-items: center; background: linear-gradient(145deg, var(--teal), var(--olive)); color: #fff; flex: none; }
.assist-msg .a-av svg { width: 1em; height: 1em; }
.assist-msg .a-body { background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 4px 12px 12px 12px; padding: 9px 12px; font-size: 0.88rem; }
.assist-msg.me .a-body { background: var(--accent-soft); border-color: transparent; }
.assist-suggest { display: flex; flex-wrap: wrap; gap: 6px; }

/* Layers panel */
.layer-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--r-sm); font-size: 0.85rem; }
.layer-row:hover { background: var(--surface-2); }
.layer-row .l-vis { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--text-3); }
.layer-row .l-vis:hover { background: var(--surface-3); color: var(--text); }
.layer-row.hidden .l-name { opacity: 0.4; text-decoration: line-through; }

/* Properties panel rows */
.prop-row { display: grid; grid-template-columns: 90px 1fr; gap: 8px; align-items: center; padding: 5px 0; font-size: 0.85rem; }
.prop-row label { color: var(--text-3); font-weight: 600; font-size: 0.8rem; }
.prop-group-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); font-weight: 700; margin: 12px 0 4px; }