/* Feedback Thread — IC reviews received feedback as a direct, multi-reviewer
   conversation. Asset reference on the left, the conversation on the right.
   Layered on bsp-tokens.css; shares the IC chat's visual vocabulary.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bsp-navy);
  font-family: var(--bsp-font-body);
  color: var(--bsp-fg);
  min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045; pointer-events: none; mix-blend-mode: overlay; z-index: 200;
}
.stage {
  min-height: 100vh; min-height: 100dvh;
  display: flex; justify-content: center; align-items: stretch;
  background:
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(255,210,0,0.04), transparent 65%),
    var(--bsp-navy);
}

/* ---------- Frame ---------- */
.thread {
  width: 100%; max-width: 100%;
  min-height: 100vh; min-height: 100dvh;
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ---------- Header ---------- */
.th-head {
  position: sticky; top: 0; z-index: 30;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 12px;
  background: linear-gradient(to bottom, rgba(var(--bsp-navy-rgb),0.97) 0%, rgba(var(--bsp-navy-rgb),0.9) 75%, transparent 100%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; gap: 12px;
}
.th-back {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--bsp-border-hi);
  color: var(--bsp-fg-muted); text-decoration: none;
  transition: background .25s var(--bsp-ease-out), border-color .25s, color .25s;
}
.th-back:hover { background: var(--bsp-bg-card); border-color: var(--bsp-yellow); color: var(--bsp-yellow); }

.th-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.th-title .t-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.th-title .t-name {
  font-size: 15px; font-weight: 500; color: var(--bsp-fg);
  letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.th-title .t-phase {
  font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bsp-yellow); padding: 2px 7px; border: 1px solid var(--bsp-border-gold);
  white-space: nowrap; flex-shrink: 0;
}
.th-title .t-sub {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--bsp-fg-dim);
}

/* participant stack */
.th-people { display: flex; align-items: center; flex-shrink: 0; }
.th-people .pavatar {
  width: 30px; height: 30px;
  border: 1px solid var(--bsp-navy);
  outline: 1px solid var(--bsp-border-hi);
  background: var(--bsp-navy-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--bsp-font-display); font-size: 11px; color: var(--bsp-yellow);
  margin-left: -8px;
}
.th-people .pavatar:first-child { margin-left: 0; }
.th-people .pavatar.me { background: var(--bsp-yellow); color: var(--bsp-navy); outline-color: var(--bsp-yellow); }

/* ---------- Body grid ---------- */
.th-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1fr;
  overflow: hidden;
}

/* ================= ASSET RAIL ================= */
.rail {
  display: none;
  flex-direction: column;
  border-right: 1px solid var(--bsp-border);
  background: linear-gradient(to bottom, var(--bsp-navy-light) 0%, var(--bsp-navy) 100%);
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--bsp-border-hi) transparent;
}
.rail::-webkit-scrollbar { width: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--bsp-border-hi); }
.rail-inner { padding: 22px clamp(18px,2vw,26px) 28px; display: flex; flex-direction: column; gap: 20px; }

.rail-eb {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--bsp-fg-dim);
}
.rail-asset {
  width: 100%; aspect-ratio: 4/5; max-height: 360px;
  background: linear-gradient(135deg, #f5ebd6 0%, #e8d8b8 100%);
  border: 1px solid var(--bsp-border); overflow: hidden;
  position: relative;
}
.rail-asset.video { background: linear-gradient(135deg, var(--bsp-navy-light), var(--bsp-navy)); aspect-ratio: 16/10; }
.rail-asset img { width: 100%; height: 100%; object-fit: cover; }
.rail-asset .mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--bsp-font-display); font-size: 46px; color: rgba(255,210,0,0.5); letter-spacing: 0.02em;
}
.rail-asset .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(var(--bsp-navy-rgb),0.65); border: 1px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center; color: var(--bsp-fg);
}
.rail-asset .vlabel {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; font-size: 10px; letter-spacing: 0.04em;
  color: var(--bsp-fg); background: linear-gradient(to top, rgba(6,21,24,0.85), transparent);
}

.rail-name { font-size: 16px; font-weight: 500; color: var(--bsp-fg); letter-spacing: -0.005em; }
.rail-meta { font-size: 12px; color: var(--bsp-fg-dim); margin-top: 3px; line-height: 1.5; }

/* version history */
.rail-versions { display: flex; flex-direction: column; gap: 10px; }
.ver-row {
  display: flex; align-items: center; gap: 11px;
  padding: 8px; border: 1px solid var(--bsp-border); background: var(--bsp-bg-card);
}
.ver-row.current { border-color: var(--bsp-border-gold); background: rgba(255,210,0,0.04); }
.ver-thumb {
  width: 42px; height: 42px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, #f5ebd6, #e8d8b8); border: 1px solid var(--bsp-border);
}
.ver-thumb.dark { background: linear-gradient(135deg, var(--bsp-navy-light), var(--bsp-navy)); display:flex;align-items:center;justify-content:center; }
.ver-thumb.dark .vm { font-family: var(--bsp-font-display); font-size: 12px; color: rgba(255,210,0,0.6); }
.ver-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ver-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ver-info .vn { font-size: 12.5px; font-weight: 500; color: var(--bsp-fg); }
.ver-info .vw { font-size: 10.5px; color: var(--bsp-fg-dim); }
.ver-tag {
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bsp-fg-dim); white-space: nowrap;
}
.ver-row.current .ver-tag { color: var(--bsp-yellow); }

/* reviewers strip */
.rail-people { display: flex; flex-direction: column; gap: 9px; }
.rp-row { display: flex; align-items: center; gap: 10px; }
.rp-av {
  width: 30px; height: 30px; flex-shrink: 0;
  border: 1px solid var(--bsp-border-hi); background: var(--bsp-navy-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--bsp-font-display); font-size: 11px; color: var(--bsp-yellow);
}
.rp-text { display: flex; flex-direction: column; line-height: 1.25; }
.rp-text .n { font-size: 12.5px; font-weight: 500; color: var(--bsp-fg); }
.rp-text .r { font-size: 10.5px; color: var(--bsp-fg-dim); }

/* ================= CONVERSATION ================= */
.convo { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* mobile asset context strip (hidden on desktop) */
.asset-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--bsp-border);
  background: var(--bsp-navy-light); cursor: pointer;
  flex-shrink: 0;
}
.asset-strip .as-thumb {
  width: 40px; height: 40px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, #f5ebd6, #e8d8b8); border: 1px solid var(--bsp-border);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.asset-strip .as-thumb.dark { background: linear-gradient(135deg, var(--bsp-navy-light), var(--bsp-navy)); }
.asset-strip .as-thumb img { width: 100%; height: 100%; object-fit: cover; }
.asset-strip .as-thumb .vm { font-family: var(--bsp-font-display); font-size: 11px; color: rgba(255,210,0,0.6); }
.asset-strip .as-info { flex: 1; min-width: 0; }
.asset-strip .as-name { font-size: 13px; font-weight: 500; color: var(--bsp-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-strip .as-meta { font-size: 10.5px; color: var(--bsp-fg-dim); }
.asset-strip .as-chev { color: var(--bsp-fg-dim); flex-shrink: 0; transition: transform .25s var(--bsp-ease-out); }
.asset-strip.open .as-chev { transform: rotate(180deg); }
/* expanded asset under strip (mobile) */
.asset-expand { overflow: hidden; max-height: 0; transition: max-height .4s var(--bsp-ease-out); border-bottom: 1px solid var(--bsp-border); background: var(--bsp-navy-light); }
.asset-expand.open { max-height: 620px; }
.asset-expand-inner { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.convo-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 20px clamp(18px,3vw,28px) 12px;
  display: flex; flex-direction: column; gap: 20px;
  scrollbar-width: thin; scrollbar-color: var(--bsp-border-hi) transparent;
}
.convo-scroll::-webkit-scrollbar { width: 6px; }
.convo-scroll::-webkit-scrollbar-thumb { background: var(--bsp-border-hi); }

/* system divider */
.sys { display: flex; align-items: center; gap: 12px; }
.sys .line { flex: 1; height: 1px; background: var(--bsp-border); }
.sys .txt {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--bsp-fg-dim); white-space: nowrap;
}
.sys.gold .txt { color: var(--bsp-yellow); }
.sys.gold .line { background: var(--bsp-border-gold); }

/* message line */
.line-msg { display: flex; gap: 12px; animation: msgIn .4s var(--bsp-ease-out); }
@keyframes msgIn { from { transform: translateY(8px); } to { transform: translateY(0); } }
.avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--bsp-border-hi); background: var(--bsp-navy-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--bsp-font-display); font-size: 12px; color: var(--bsp-yellow);
}
.avatar.me { background: var(--bsp-yellow); color: var(--bsp-navy); border-color: var(--bsp-yellow); }
.msg-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.msg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.msg-head .who { font-size: 13px; font-weight: 600; color: var(--bsp-fg); letter-spacing: 0.005em; white-space: nowrap; }
.msg-head .role { font-size: 10.5px; color: var(--bsp-fg-dim); letter-spacing: 0.02em; }
.msg-head .time { font-size: 10px; color: var(--bsp-fg-dim); margin-left: auto; white-space: nowrap; }

.msg-text { font-size: 14.5px; font-weight: 300; line-height: 1.55; color: var(--bsp-fg); letter-spacing: -0.003em; text-wrap: pretty; }
.line-msg.me .msg-text {
  background: rgba(255,210,0,0.045); border-left: 2px solid var(--bsp-yellow);
  padding: 9px 13px; white-space: pre-wrap;
}

/* feedback card (structured) */
.fbcard {
  border: 1px solid var(--bsp-border-hi); border-top: 2px solid var(--bsp-yellow);
  background: var(--bsp-bg-card); padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 13px;
}
.fbcard .fb-eb {
  font-size: 9px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bsp-yellow);
}
.fbcard .fb-headline { font-size: 15.5px; font-weight: 500; line-height: 1.35; color: var(--bsp-fg); letter-spacing: -0.005em; }
.fbcard .fb-prose { font-size: 13.5px; font-weight: 300; line-height: 1.55; color: var(--bsp-fg-muted); letter-spacing: 0.005em; text-wrap: pretty; }
.fb-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.fb-action { display: grid; grid-template-columns: 16px 1fr; gap: 11px; align-items: start; font-size: 13.5px; font-weight: 300; line-height: 1.5; color: var(--bsp-fg); letter-spacing: 0.005em; text-wrap: pretty; }
.fb-action .num { font-family: var(--bsp-font-display); font-size: 12px; color: var(--bsp-yellow); letter-spacing: 0.04em; line-height: 1.7; }

/* sectioned (video) */
.fb-sections { display: flex; flex-direction: column; gap: 14px; }
.fb-sec { display: flex; flex-direction: column; gap: 8px; }
.fb-sec-head { display: flex; align-items: center; gap: 10px; }
.fb-sec-tag {
  font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bsp-yellow); padding: 2px 8px; border: 1px solid var(--bsp-border-gold); white-space: nowrap;
}
.fb-sec-rule { flex: 1; height: 1px; background: var(--bsp-border); }
.fb-sec .fb-prose { font-size: 13px; }

/* IC reaction chip (inline) */
.reaction {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border: 1px solid var(--bsp-border-gold);
  background: rgba(255,210,0,0.06); color: var(--bsp-yellow);
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
}
.reaction .rdot { width: 5px; height: 5px; border-radius: 50%; background: var(--bsp-yellow); }

/* version share card */
.vshare {
  display: flex; gap: 13px; align-items: center;
  border: 1px solid var(--bsp-border-gold); background: rgba(255,210,0,0.04);
  padding: 11px;
}
.vshare .vs-thumb { width: 56px; height: 56px; flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg, #f5ebd6, #e8d8b8); border: 1px solid var(--bsp-border); display:flex;align-items:center;justify-content:center; }
.vshare .vs-thumb.dark { background: linear-gradient(135deg, var(--bsp-navy-light), var(--bsp-navy)); }
.vshare .vs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vshare .vs-thumb .vm { font-family: var(--bsp-font-display); font-size: 13px; color: rgba(255,210,0,0.6); }
.vshare .vs-info { flex: 1; min-width: 0; }
.vshare .vs-eb { font-size: 9px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bsp-yellow); margin-bottom: 4px; }
.vshare .vs-name { font-size: 14px; font-weight: 500; color: var(--bsp-fg); }
.vshare .vs-note { font-size: 12px; color: var(--bsp-fg-dim); margin-top: 2px; }

/* typing indicator */
.typing { display: inline-flex; align-items: center; gap: 4px; padding: 10px 13px; background: var(--bsp-bg-card); border-left: 2px solid var(--bsp-border-hi); align-self: flex-start; }
.typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--bsp-fg-dim); animation: tDot 1.2s ease-in-out infinite; }
.typing span:nth-child(2){ animation-delay:.15s; } .typing span:nth-child(3){ animation-delay:.3s; }
@keyframes tDot { 0%,100%{opacity:.3;transform:scale(.7);} 50%{opacity:1;transform:scale(1);} }

/* ================= COMPOSER ================= */
.composer {
  border-top: 1px solid var(--bsp-border);
  padding: 12px clamp(16px,3vw,26px) calc(env(safe-area-inset-bottom,0px) + 14px);
  background: var(--bsp-navy); flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.quick-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--bsp-border-hi);
  background: transparent; color: var(--bsp-fg-muted);
  font-family: var(--bsp-font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  white-space: nowrap; flex-shrink: 0;
  transition: border-color .2s, color .2s, background .2s;
}
.qchip:hover { border-color: var(--bsp-yellow); color: var(--bsp-yellow); background: rgba(255,210,0,0.04); }
.qchip.version { margin-left: auto; border-color: var(--bsp-border-gold); color: var(--bsp-yellow); }
.qchip.version:hover { background: rgba(255,210,0,0.08); }
.qchip:disabled { opacity: 0.4; cursor: not-allowed; }

.composer-inner {
  display: flex; align-items: flex-end; gap: 10px;
  background: var(--bsp-bg-card); border: 1px solid var(--bsp-border); padding: 8px 8px 8px 14px;
}
.composer-inner[data-rec="true"] { border-color: var(--bsp-border-gold); }
.c-textarea {
  flex: 1 1 0; min-width: 0; background: transparent; border: none; outline: none; resize: none;
  color: var(--bsp-fg); font-family: var(--bsp-font-body); font-size: 14.5px; font-weight: 300;
  line-height: 1.5; padding: 6px 4px; min-height: 26px; max-height: 140px; letter-spacing: -0.003em;
}
.c-textarea::placeholder { color: var(--bsp-fg-dim); font-weight: 300; }
.c-rec { flex: 1; display: flex; align-items: center; gap: 12px; padding: 4px 2px; }
.c-rec-meta { display: flex; align-items: center; gap: 7px; }
.c-rec-meta .rdot { width: 7px; height: 7px; border-radius: 50%; background: var(--bsp-yellow); animation: tDot 1s infinite; }
.c-rec-meta .rlbl { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bsp-yellow); }
.c-rec-meta .rtime { font-size: 11px; color: var(--bsp-fg-dim); font-variant-numeric: tabular-nums; }

.waveform { flex: 1; display: flex; align-items: center; gap: 2px; height: 24px; overflow: hidden; }
.wave-bar { flex: 1; min-width: 1.5px; background: var(--bsp-yellow); opacity: 0.5; height: 30%; transform-origin: center; animation: wave 1s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: scaleY(var(--s,0.4)); opacity: .35; } 50% { transform: scaleY(1); opacity: .85; } }

.c-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.c-mic, .c-send { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; appearance: none; -webkit-appearance: none; cursor: pointer; flex-shrink: 0; }
.c-mic { border: 1px solid var(--bsp-border-hi); background: transparent; color: var(--bsp-fg-dim); }
.c-mic:hover { border-color: var(--bsp-yellow); color: var(--bsp-yellow); }
.c-mic.recording { border-color: var(--bsp-yellow); background: var(--bsp-yellow); color: var(--bsp-navy); }

/* ================= RESPONSIVE ================= */
@media (min-width: 860px) {
  html, body { overflow: hidden; height: 100vh; }
  .thread { max-width: var(--app-max); height: 100vh; margin: 0 auto; }
  .th-head { padding: 18px clamp(20px,3vw,34px) 14px; }
  .th-body { grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.1fr); }
  .rail { display: flex; }
  .asset-strip, .asset-expand { display: none; }
}
@media (max-width: 859px) {
  .asset-strip { display: flex; }
}