/* Conversation history sidebar — a glass drawer that slides in from the left, matching the
   cockpit's lavender/glass aesthetic. Scoped under .hist-* so it never collides with the
   concurrently-edited styles.css. */

/* scrim behind the drawer */
.hist-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(46, 36, 92, .26);
  backdrop-filter: blur(2px);
  animation: histFade .2s ease;
}
@keyframes histFade { from { opacity: 0; } to { opacity: 1; } }

/* the drawer */
.hist-drawer {
  position: fixed; top: 0; left: 0; z-index: 90;
  width: 320px; max-width: 86vw; height: 100%;
  display: flex; flex-direction: column;
  padding: 18px 16px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 245, 255, .9));
  backdrop-filter: saturate(170%) blur(22px);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  border-right: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 28px 0 70px -30px rgba(76, 63, 143, .55);
  transform: translateX(-104%);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.hist-drawer.open { transform: translateX(0); }

.hist-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hist-title {
  font-family: var(--serif); font-size: 12px; font-weight: 700; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--lav-600);
}
.hist-close {
  border: none; background: transparent; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--mute-2); padding: 0 4px; border-radius: 8px;
}
.hist-close:hover { color: var(--ink-2); }

.hist-new {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  width: 100%; margin-bottom: 14px; padding: 11px 14px;
  font-family: var(--sans); font-size: 13px; font-weight: 700; color: #fff;
  border: none; border-radius: 12px; cursor: pointer;
  background: var(--brand-grad); background-size: 160% 160%;
  box-shadow: 0 8px 22px -8px rgba(99, 102, 241, .5);
  transition: transform .14s ease, box-shadow .18s ease, background-position .4s ease;
}
.hist-new:hover { transform: translateY(-1px); background-position: 100% 0; box-shadow: 0 12px 26px -8px rgba(99, 102, 241, .6); }

.hist-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding-right: 2px; }
.hist-list { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.hist-list::-webkit-scrollbar { width: 8px; }
.hist-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.hist-empty { color: var(--mute-2); font-size: 12.5px; line-height: 1.7; text-align: center; padding: 26px 12px; }

.hist-item {
  position: relative; display: flex; align-items: flex-start; gap: 8px;
  padding: 11px 12px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(221, 214, 254, .7);
  transition: border-color .16s ease, background .16s ease, transform .12s ease, box-shadow .16s ease;
}
.hist-item:hover { border-color: var(--lav-400); background: rgba(255, 255, 255, .82); transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgba(124, 58, 237, .45); }
.hist-item.active { border-color: var(--lav-500); background: #f5f3ff; box-shadow: inset 0 0 0 1px var(--lav-400); }

.hist-item-main { min-width: 0; flex: 1; }
.hist-item-title { font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hist-item-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11px; color: var(--mute-2); flex-wrap: wrap; }
.hist-dot { opacity: .6; }
.hist-item-dim { margin-top: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: var(--lav-600); text-transform: uppercase; }

.hist-badge { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.hist-badge.band-High { background: #f0fdf4; color: var(--emerald); }
.hist-badge.band-Medium { background: #fff7ed; color: var(--gold); }
.hist-badge.band-Low { background: var(--rose-soft, #fef2f2); color: var(--rose); }

.hist-del {
  flex: none; border: none; background: transparent; cursor: pointer;
  font-size: 17px; line-height: 1; color: var(--mute-2); padding: 0 2px; border-radius: 7px;
  opacity: 0; transition: opacity .14s ease, color .14s ease;
}
.hist-item:hover .hist-del { opacity: .8; }
.hist-del:hover { color: var(--rose); opacity: 1; }

@media (max-width: 720px) {
  .hist-drawer { width: 86vw; }
}

/* ===== Shift #3 — client switcher, grouped list, team-picture modal ===== */
.hist-switch { position: relative; margin-bottom: 10px; }
.hist-switch-label { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mute-2); margin-bottom: 4px; }
.hist-switch-btn {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 11px;
  border-radius: 11px; cursor: pointer; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  background: rgba(255,255,255,.62); border: 1px solid rgba(221,214,254,.8);
}
.hist-switch-btn:hover { border-color: var(--lav-400); }
.hist-switch-static { cursor: default; }
.hist-switch-static:hover { border-color: rgba(221,214,254,.8); }
.hist-switch-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-switch-btn svg { color: var(--lav-600); flex: none; }
.hist-menu {
  position: absolute; left: 0; right: 0; top: 56px; z-index: 30;
  background: rgba(255,255,255,.98); border: 1px solid rgba(221,214,254,.9); border-radius: 12px;
  box-shadow: 0 18px 40px -16px rgba(76,15,148,.4); padding: 5px; max-height: 280px; overflow: auto;
}
.hist-menu-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.hist-menu-item svg { color: var(--lav-600); flex: none; }
.hist-menu-item:hover { background: rgba(237,233,254,.7); }
.hist-menu-item.on { background: rgba(221,214,254,.55); font-weight: 700; }
.hist-menu-item.add { color: var(--lav-600); font-weight: 700; border-top: 1px solid var(--line); margin-top: 3px; }
.hist-menu-sub { margin-left: auto; font-size: 11px; color: var(--mute-2); font-weight: 400; }
.hist-team {
  width: 100%; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px; border-radius: 10px; cursor: pointer; font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  color: var(--lav-600); background: rgba(237,233,254,.5); border: 1px solid rgba(221,214,254,.8);
}
.hist-team:hover { background: rgba(221,214,254,.7); }
.hist-group { margin-bottom: 14px; }
.hist-group-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 6px; }
.hist-group-name { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--mute-2); }
.hist-group-team {
  display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--lav-600);
  background: transparent; border: none; cursor: pointer; padding: 2px 4px; border-radius: 7px;
}
.hist-group-team:hover { background: rgba(237,233,254,.7); }
.hist-group.on .hist-group-name { color: var(--lav-600); }
.hist-group-acts { display: flex; align-items: center; gap: 2px; }
.hist-group-remove {
  font-size: 11px; font-weight: 700; color: var(--mute-2); background: transparent; border: none;
  cursor: pointer; padding: 2px 6px; border-radius: 7px;
}
.hist-group-remove:hover { background: rgba(220,38,38,.10); color: #dc2626; }
.hist-client-hint { font-size: 12px; color: var(--mute-2); line-height: 1.4; margin: 2px 2px 10px; }
.hist-client-hint b { color: var(--ink-2); font-weight: 700; }
.hist-empty-sm { padding: 10px; font-size: 12px; text-align: left; }

/* team-picture modal */
.team-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.team-modal[hidden] { display: none; }
.team-scrim { position: absolute; inset: 0; background: rgba(31,22,64,.5); backdrop-filter: blur(3px); }
.team-card {
  position: relative; width: min(560px, 92vw); max-height: 86vh; overflow: auto;
  background: linear-gradient(180deg,#fff,#faf8ff); border: 1px solid rgba(221,214,254,.9);
  border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(46,36,92,.6); padding: 26px 28px;
}
.team-x { position: absolute; top: 14px; right: 16px; border: none; background: transparent; font-size: 24px; line-height: 1; color: var(--mute-2); cursor: pointer; }
.team-x:hover { color: var(--ink-2); }
.team-loading, .team-note { color: var(--mute-2); font-size: 13.5px; line-height: 1.7; padding: 10px 0; }
.team-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--lav-600); }
.team-title { font-family: var(--serif); font-size: 26px; font-weight: 800; color: var(--ink-2); margin: 4px 0 16px; }
.team-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.team-stat { background: rgba(237,233,254,.45); border-radius: 11px; padding: 11px 12px; }
.ts-n { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--ink-2); line-height: 1; }
.ts-s { font-size: 13px; color: var(--mute-2); }
.ts-l { font-size: 10.5px; color: var(--mute-2); margin-top: 5px; line-height: 1.3; }
.team-people { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.team-chip { font-size: 11.5px; color: var(--ink-2); background: rgba(255,255,255,.7); border: 1px solid rgba(221,214,254,.8); border-radius: 999px; padding: 3px 10px; }
.team-chip i { color: var(--lav-600); font-style: normal; font-weight: 700; }
.team-section { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--mute-2); margin: 8px 0 10px; }
.team-div { border: 1px solid rgba(221,214,254,.8); border-left: 3px solid var(--lav-600); border-radius: 11px; padding: 11px 13px; margin-bottom: 9px; background: rgba(255,255,255,.6); }
.team-div-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.team-div-name { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.team-div-spread { font-size: 11px; font-weight: 700; color: var(--lav-600); }
.team-div-views { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tv { border-radius: 9px; padding: 8px 10px; font-size: 12px; color: var(--ink-2); background: rgba(255,255,255,.75); }
.tv.hi { border-left: 3px solid #00A651; } .tv.lo { border-left: 3px solid #E2231A; }
.tv b { font-size: 12px; } .tvq { margin-top: 4px; font-style: italic; color: var(--mute-2); font-size: 11.5px; line-height: 1.5; }
.team-deck {
  width: 100%; margin-top: 18px; padding: 11px; border-radius: 12px; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: #fff; border: none;
  background: var(--brand-grad); background-size: 160% 160%;
}
.team-deck:hover { background-position: 100% 0; }
.team-deck:disabled { opacity: .7; cursor: default; }
@media (max-width: 560px) { .team-stats { grid-template-columns: repeat(2, 1fr); } .team-div-views { grid-template-columns: 1fr; } }