/* =========================================================================
   Eko / Amity — Chats screen mockup
   Values extracted from https://ekogreen.ekoapp.com/recents (computed styles)
   ========================================================================= */

:root {
  /* brand */
  --green:            #06C692;  /* active accent, unread badge */
  --green-send:       #17C999;  /* composer send button */
  --green-online:     #29CB72;  /* "13 People" link */
  --green-bar-bg:     #EAFAF1;  /* online users bar background */
  --blue:             #0F86FE;  /* "New" pill */

  /* nav rail */
  --rail-bg:          #212121;
  --rail-item-active: #424242;
  --rail-fg:          #FFFFFF;
  --rail-fg-dim:      #BDBDBD;
  --rail-w:           76px;
  --rail-item-h:      64px;

  /* surfaces */
  --white:            #FFFFFF;
  --border:           #ECECEC;
  --border-2:         #E5E5E5;
  --row-hover:        #FAFAFB;
  --row-selected:     #F0F2F4;
  --composer-bg:      #F5F5F5;
  --tool-tile:        #F5F5F5;  /* conversation tool rail button */
  --tool-tile-active: #E6F9F4;
  --notes-bg:         #FAFAFA;  /* Notes module body */

  /* type */
  --ink:              #212121;
  --ink-85:           rgba(0,0,0,.85);
  --ink-65:           rgba(0,0,0,.65);
  --muted:            #999999;
  --muted-2:          #707070;
  --muted-3:          #9E9E9E;
  --time:             #959B9F;
  --empty:            #BDBDBD;
  --icon-toolbar:     rgba(109,115,127,.8);
  --placeholder:      #9197A3;

  /* metrics */
  --header-h:         48px;
  --list-w:           18%;      /* live app: width 18%, min-width 300px */
  --list-min-w:       300px;
  --toolrail-w:       68px;
  --convo-header-h:   97px;

  /* the single breakpoint the live app uses is 768px */
  --bp:               768px;

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

.icon { width: 1em; height: 1em; fill: currentColor; display: block; }

/* ============================== app shell ============================== */

.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.body-row {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* ============================= left nav rail ============================= */

.rail {
  width: var(--rail-w);
  flex: 0 0 var(--rail-w);
  background: var(--rail-bg);
  padding-top: 8px;
  overflow-y: auto;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.rail-list { list-style: none; margin: 0; padding: 0; }

.rail-item { position: relative; }

.rail-item > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--rail-item-h);
  padding: 12px 0;
  color: var(--rail-fg-dim);
  text-decoration: none;
  border-left: 4px solid transparent;
}

.rail-item > a:hover { color: var(--rail-fg); }

.rail-item.is-active > a {
  background: var(--rail-item-active);
  border-left-color: var(--green);
  color: var(--rail-fg);
}

.rail-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}
.rail-icon .icon { width: 20px; height: 20px; }

/* red notification dot on the rail icon */
.rail-icon[data-dot]::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -6px;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #F72C40;
}

.rail-label {
  margin-top: 6px;
  font-size: 11px;
  line-height: 11px;
}

/* Assistants row uses the wide sparkle+pill mark */
.rail-item--assistants > a { height: 67px; }
.rail-item--assistants .rail-icon { width: 60px; height: 18px; }
.rail-item--assistants .rail-icon .icon { width: 60px; height: 18px; }

/* ============================== top header ============================== */

.topbar {
  height: var(--header-h);
  flex: 0 0 var(--header-h);
  background: var(--white);
  padding: 0 20px;
  box-shadow: 0 0 8px 0 rgba(0,0,0,.06);
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* hamburger — only exists below the breakpoint, where the rail is hidden */
.hamburger {
  display: none;
  width: 14px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.hamburger .icon { width: 14px; height: 16px; }

.workspace {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.workspace img { height: 28px; width: auto; display: block; }
.workspace .icon { width: 11px; height: 18px; color: var(--ink); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 30px;
}

.avatar-me {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: #FCE8F1 center/cover no-repeat;
  display: block;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #757575;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icon-btn:hover { background: rgba(0,0,0,.04); }
.icon-btn .icon { width: 16px; height: 16px; }

/* ============================== chat list ============================== */

.chatlist {
  width: var(--list-w);
  min-width: var(--list-min-w);
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* -- search row -- */
.chatlist-head {
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search {
  position: relative;
  flex: 1;
}
.search .icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink-65);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 30px;
  padding: 4px 10px 4px 32px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-65);
  background: var(--white);
  border: 1px solid #D9D9D9;
  border-radius: 4px;
  outline: none;
}
.search input::placeholder { color: var(--ink-65); }

.head-btn {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 0;
  background: none;
  border-radius: 4px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.head-btn:hover { background: rgba(0,0,0,.04); }
.head-btn .icon { width: 16px; height: 16px; }
.head-btn--compose { color: var(--green); }

/* -- filter tabs -- */
.tabs {
  height: 45px;
  flex: 0 0 45px;
  border-bottom: 1px solid var(--border-2);
  display: flex;
  justify-content: space-evenly;
}

.tab {
  height: 44px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-3);
  border-bottom: 2px solid transparent;
  background: none;
  border-top: 0; border-left: 0; border-right: 0;
  font-family: inherit;
  cursor: pointer;
}
.tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--green);
}
.tab .icon { width: 14px; height: 13px; }

/* gradient wordmark used on the Assistants tab */
.gradient-text {
  background-image: linear-gradient(90deg,
    #47BF9D 0%, #A5D94A 20%, #F2C920 30%, #F0AE31 40%,
    #A5D94A 60%, #47BF9D 90%, #EC8F5D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 500;
}
.tab--assistants .icon { color: #47BF9D; }

/* -- online bar -- */
.online-bar {
  height: 37px;
  flex: 0 0 37px;
  padding: 8px 12px;
  background: var(--green-bar-bg);
  font-size: 14px;
  font-weight: 500;
  color: #000;
}
.online-bar a { color: inherit; text-decoration: none; }
.online-bar ins { color: var(--green-online); text-decoration: none; }

/* -- scrollable rows -- */
.rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.row > a {
  display: block;
  padding: 10px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.row > a:hover { background: var(--row-hover); }
.row.is-selected > a { background: var(--row-selected); }

.row-inner { display: flex; }

/* 56px column holding a 50px avatar inset 6px from the left, dropped 6px from
   the row top, then an 8px gap before the text — the live app uses
   margin: 0 8px 0 0 on this column. */
.row-avatar {
  flex: 0 0 56px;
  height: 50px;
  margin: 6px 8px 0 0;
  padding-left: 6px;
}
.row-avatar span {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 9999px;
  background: #EEEEFA center/cover no-repeat;
}

/* Fixed 62px box that clips whatever overflows — this is what caps the row at
   83px and trims the last preview line, exactly as the live app does. */
.row-content {
  flex: 1;
  min-width: 0;
  height: 62px;
  overflow: hidden;
}

.row-time {
  float: right;
  margin-top: 2px;          /* live: the time sits 2px below the content top */
  margin-left: 12px;
  font-size: 11px;
  line-height: 16.5px;
  color: var(--time);
  white-space: nowrap;
}

/* Live: the h4 box is 24px tall with the 22.4px line box pushed 2px down, so
   the thread and preview lines land at +34 and +54 from the row top. */
.row-title {
  margin: 0;
  height: 24px;
  padding-top: 2px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  color: var(--ink-85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Live wraps these lines normally and lets .row-content clip them — there is
   no ellipsis on either. */
.row-thread,
.row-preview {
  margin: 0;
  font-size: 14px;
  line-height: 19.6px;
}
.row-thread  { font-weight: 500; color: var(--muted-2); }
.row-preview { font-weight: 400; color: var(--muted); }

/* sits on the thread line; -2px lines it up with the live badge at +32 */
.row-badges {
  float: right;
  margin-top: -2px;
  margin-left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.badge--mute { background: #BDBDBD; }

/* ============================ conversation ============================ */

.convo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* -- conversation header -- */
.convo-header {
  height: var(--convo-header-h);
  flex: 0 0 var(--convo-header-h);
  padding: 24px;
  border-bottom: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* back chevron — only shown below the breakpoint (single-pane) */
.convo-back {
  display: none;
  width: 10px;
  height: 20px;
  flex: 0 0 10px;
  margin-right: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.convo-back .icon { width: 10px; height: 20px; }

.group-info { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.group-info > .group-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 9999px;
  background: #EEEEFA center/cover no-repeat;
}
.group-meta { display: flex; flex-direction: column; min-width: 0; }
.group-name {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group-sub { font-size: 14px; line-height: 21px; color: var(--muted); }

.convo-actions { display: flex; align-items: center; gap: 24px; }
.convo-actions button {
  border: 0;
  background: none;
  padding: 6px;
  color: var(--icon-toolbar);
  cursor: pointer;
  display: inline-flex;
}
.convo-actions .icon { width: 18px; height: 16px; }
.convo-actions .mobile-only { display: none; }

/* -- lower area: tool rail + messages -- */
.convo-body { flex: 1; min-height: 0; display: flex; }

.toolrail {
  width: var(--toolrail-w);
  flex: 0 0 var(--toolrail-w);
  padding: 16px 16px 0;
  display: flex;
  flex-direction: column;
}
/* Each tool sits on a filled 36px tile — #F5F5F5 normally, a green tint when
   active. The fill does not change on hover/active/focus; only the icon
   darkens to #1A1A1A. */
.toolrail button {
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  border: 0;
  border-radius: 8px;
  background: var(--tool-tile);
  color: #424242;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.toolrail button:hover { color: #1A1A1A; }

.toolrail button.is-active,
.toolrail button.is-active:hover {
  background: var(--tool-tile-active);
  color: var(--green);
}

/* the collapse control at the top of the rail has no tile */
.toolrail button.toolrail-collapse,
.toolrail button.toolrail-collapse:hover { background: none; }

.toolrail .icon { width: 16px; height: 16px; }

.convo-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 24px 0 0;
}

/* system event pill ("… started a call", "Call ended 0:13") */
.event {
  margin: 6px 0;
  text-align: center;
}
.event span {
  display: inline-block;
  padding: 2px 14px;
  font-size: 12px;
  line-height: 20px;
  color: #525658;
  background: #ECF6FD;
  border-radius: 15px;
}

/* structural placeholder — no chat history is reproduced in this mockup */
.messages-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D5D9DE;
  font-size: 13px;
}

/* -- composer -- */
.composer-wrap { padding: 16px 24px 24px; }

.composer {
  min-height: 45px;
  padding: 6px 6px 6px 12px;
  background: var(--composer-bg);
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.composer-tools { display: flex; align-items: center; gap: 8px; }
.composer-tools button {
  border: 0;
  background: none;
  padding: 4px;
  color: #424242;
  cursor: pointer;
  display: inline-flex;
}
.composer-tools .icon { width: 16px; height: 18px; }

.composer-input {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  padding: 6px 0;
}
.composer-input:empty::before {
  content: attr(data-placeholder);
  color: var(--placeholder);
}

.enter-to-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9A9A9A;
  white-space: nowrap;
}
.enter-to-send input { accent-color: var(--green); margin: 0; }

.send-btn {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 50%;
  background: var(--green-send);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.send-btn .icon { width: 14px; height: 14px; }

/* ====================== side panel (Topics, etc.) ======================
   Occupies the same slot as .convo-main — replaces the message area and
   composer rather than sitting beside them.
   ====================================================================== */

.panel {
  flex: 1;
  min-width: 280px;
  padding: 10px 10px 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel-head {
  height: 50px;
  flex: 0 0 50px;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* back chevron — mobile only, mirrors .convo-back */
.panel-back {
  display: none;
  width: 10px;
  height: 20px;
  flex: 0 0 10px;
  padding: 0;
  margin-right: 6px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.panel-back .icon { width: 10px; height: 20px; }

.panel-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ink);
  margin-right: auto;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.panel-actions button {
  padding: 0 2px;
  border: 0;
  background: none;
  color: #424242;
  cursor: pointer;
  display: inline-flex;
}
.panel-actions button:hover { color: #1A1A1A; }
.panel-actions .icon          { width: 16px; height: 16px; }
.panel-actions .icon--wide    { width: 18px; height: 16px; }

.panel-rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* -- topic row -- */
.topic > a {
  display: block;
  padding: 10px;
  background: var(--white);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.topic > a::after { content: ""; display: table; clear: both; }
.topic > a:hover { background: var(--row-hover); }
.topic.is-selected > a { background: var(--row-selected); }

.topic-time {
  float: right;
  margin-left: 12px;
  font-size: 12px;
  line-height: 18px;
  color: var(--time);
  white-space: nowrap;
}

.topic-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  color: var(--ink-85);
  /* the live app clamps the title to two lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topic-preview {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================ empty state ============================ */

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.empty-state img { width: 70px; height: 70px; }
.empty-state p {
  margin: 0;
  max-width: 220px;
  text-align: center;
  font-size: 14px;
  color: var(--empty);
}

/* ========================= 1:1 call panel =========================
   Captured from a live outgoing voice call: a 700x585 black card centred
   in the viewport, the callee's photo blurred behind it, a 160px avatar,
   a 96px self-view bottom-right, two 28px buttons top-right and three
   controls bottom-centre.
   ================================================================= */

.call-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 700x585 on desktop; never larger than the viewport on small screens */
  width: min(700px, calc(100vw - 24px));
  height: min(585px, calc(100vh - 24px));
  z-index: 50;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 30px 2px rgba(0, 0, 0, .4);
}

/* the callee's photo, blurred, filling the card */
.call-backdrop {
  position: absolute;
  inset: -40px;                     /* over-inset so the blur has no soft edge */
  /* stands in for the callee's photo, which the live app blurs behind the card.
     A two-tone gradient reads as a blurred photograph; swap in a real image
     with background-image if you want one. */
  background:
    radial-gradient(60% 55% at 32% 28%, #8E7280 0%, rgba(142,114,128,0) 70%),
    radial-gradient(55% 50% at 74% 72%, #55414C 0%, rgba(85,65,76,0) 70%),
    #6E5561;
  filter: blur(28px);
  opacity: .95;
}

/* -- stage: the avatar sits dead-centre in the panel, exactly as the live
      app places it. Name and status are absolutely positioned beneath it so
      they cannot shift it. (The live outgoing screen shows no label at all;
      these are added for the demo.) -- */
.call-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.call-avatar {
  width: 160px;
  height: 160px;
  border-radius: 9999px;
  background: #8C6C7A center/cover no-repeat;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .25);
}

.call-name,
.call-status {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.call-name {
  top: calc(50% + 100px);
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.call-status {
  top: calc(50% + 126px);
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
  font-variant-numeric: tabular-nums;
}

/* -- self view -- */
.call-self {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 96px;
  height: 96px;
  border-radius: 9999px;
  background: #1B2B3A center/cover no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

/* -- top-right controls -- */
.call-top {
  position: absolute;
  top: 14px;
  right: 10px;
  display: flex;
  gap: 10px;
}
.call-top-btn {
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  border-radius: 4px;
  background: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.call-top-btn:hover { background: rgba(255, 255, 255, .15); }
.call-top-btn .icon { width: 22px; height: 22px; }

/* -- bottom controls -- */
.call-controls {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}

.call-btn {
  width: 50px;
  height: 38px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  background: #fff;
  color: #212121;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.call-btn .icon { width: 30px; height: 30px; }

/* a control that is off / disabled reads as grey */
.call-btn[aria-pressed="false"] { background: #D7D7D7; }

.call-btn--hangup {
  width: 48px;
  border-radius: 3px;
  background: #FF5555;
  color: #fff;
}
.call-btn--hangup:hover { background: #F04444; }

/* video mode shows the camera on and a live self view */
.call[data-mode="video"] .call-self { background-color: #2A3F52; }

/* =============================== MITY ===============================
   Cloned from https://eko-dev.ekoapp.com/ekoagentic — a 240px sub-nav
   beside either the new-chat hero or one of three panel views. The top-bar
   workspace logo stays Amity on purpose.
   =================================================================== */

.mity {
  flex: 1;
  min-width: 0;
  display: flex;
  min-height: 0;
  /* the module backdrop is #F5F5F5; the panels below sit on top of it */
  background: #F5F5F5;
}

/* -- sub-nav -- */
.mity-side {
  width: 240px;
  flex: 0 0 240px;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mity-collapse {
  width: 32px;
  height: 32px;
  margin: 22px 0 34px 6px;   /* puts the first menu item at y=136, as live */
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mity-collapse .icon { width: 20px; height: 20px; }

.mity-menu { display: flex; flex-direction: column; gap: 2px; }

.mity-item {
  height: 36px;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}
/* live: transparent by default, .04 on hover, .08 while pressed, and plain
   white once active — no shadow */
.mity-item:hover  { background: rgba(0, 0, 0, .04); }
.mity-item:active { background: rgba(0, 0, 0, .08); }
.mity-item.is-active,
.mity-item.is-active:hover { background: var(--white); }
.mity-item .icon { flex: 0 0 20px; width: 20px; height: 16px; color: #424242; }
.mity-item span { line-height: 20px; }

.mity-recent {
  margin-top: 32px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: .5px;
  color: var(--muted-3);
}
.mity-no-topics {
  margin: 36px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--empty);
}

/* -- main area -- */
.mity-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* the new-chat pane is a rounded #FAFAFA panel inset 8px from the module */
.mity-main[data-view-panel="chat"] {
  margin: 8px 8px 8px 0;
  background: #FAFAFA;
  border-radius: 12px;
}

/* new chat hero */
/* live centres the hero and composer together rather than pinning the
   composer to the bottom */
.mity-main[data-view-panel="chat"] {
  justify-content: center;
  gap: 15px;
  /* live parks the group slightly above centre */
  padding-bottom: 24px;
}
.mity-hero {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  /* and slightly left of centre */
  margin-right: 30px;
}
/* the greeting starts just inside the mascot's right edge in the live layout */
.mity-greet { margin-left: -9px; }
.mity-mascot { width: 250px; height: 250px; flex: 0 0 250px; }

.mity-greet h1 {
  margin: 0;
  font-size: 36px;
  font-weight: 500;
  line-height: 48px;
  color: var(--ink-85);
}
.mity-greet p {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

/* ============================================================
   MITY — the + source menu, and the conversation flow
   (question -> Internal Library -> thinking -> answer -> sources)
   All values below were read off eko-dev.ekoapp.com/ekoagentic.
   ============================================================ */

/* -- the two states of the chat panel -- */
.mity-toggles { display: none; }
.mity-thread  { display: none; }

/* live: ContentWrapper is max-width 800px, margin auto, padding 24px 0;
   the scroller inside is padded 40px 20px and the composer section 0 20px 40px,
   which is what leaves 64px of air under the composer */
.mity-main[data-state="chat"] {
  justify-content: flex-start;
  gap: 0;
  padding: 24px 0;
}
.mity-main[data-state="chat"] .mity-thread,
.mity-main[data-state="chat"] .mity-composer {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.mity-main[data-state="chat"] .mity-composer { padding: 0 20px 40px; }
.mity-main[data-state="chat"] .mity-hero { display: none; }
.mity-main[data-state="chat"] .mity-thread { display: block; }
.mity-main[data-state="chat"] .mity-toggles { display: flex; }

/* the Skills / Workspace files pills, top-right of the pane */
.mity-toggles {
  position: absolute;
  top: 12px;
  right: 16px;
  gap: 8px;
  z-index: 2;
}
.mity-toggle {
  height: 34px;
  padding: 6px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 9999px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: #0F172A;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.mity-toggle:hover { background: #F8FAFC; }
.mity-toggle .icon { width: 14px; height: 14px; }

/* the chat panel becomes the positioning context for the pills */
.mity-main[data-view-panel="chat"] { position: relative; }

/* -- composer: default is one row, gaining a second row once a source
      is attached (live: 44px tall -> 90px tall) -- */
.mity-composer .composer {
  display: grid;
  grid-template-columns: 20px 1fr 32px;
  column-gap: 12px;
  align-items: center;
  padding: 6px 6px 6px 12px;
  position: relative;
}
.composer-plus-wrap { position: relative; display: inline-flex; }
.composer-plus {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.composer-plus .icon { width: 14px; height: 18px; }
.composer-sources { display: none; }

/* attached-source state */
.mity-composer .composer.is-sourced {
  grid-template-columns: 1fr 32px;
  grid-template-rows: 24px 36px;
  row-gap: 6px;
  align-items: center;
  padding: 12px 6px 12px 16px;
}
.composer.is-sourced .mity-input      { grid-area: 1 / 1 / 2 / 3; }
.composer.is-sourced .composer-plus-wrap { grid-area: 2 / 1 / 3 / 2; justify-self: start; align-self: center; }
.composer.is-sourced .composer-sources{
  grid-area: 2 / 1 / 3 / 2;
  display: flex;
  align-items: center;
  gap: 4px;
  /* sits after the + button: 20px button + 4px gap + 2px optical */
  margin-left: 26px;
}
.composer.is-sourced .mity-send       { grid-area: 2 / 2 / 3 / 3; }

/* the attached-source chip */
.src-chip {
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 20px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #699286;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.src-chip .icon { width: 12px; height: 14px; }

/* -- the + dropdown -- */
.src-menu {
  /* antd3 placement topLeft: flush with the trigger's left edge, its bottom
     8px above the trigger */
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: 264px;
  padding: 10px 0;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  z-index: 20;
}
.src-menu ul { margin: 0; padding: 0; list-style: none; }
.src-menu-item {
  height: 32px;
  padding: 5px 12px;
  font-size: 14px;
  line-height: 22px;
  color: rgba(0, 0, 0, .65);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
.src-menu-item:hover { background: #F5F5F5; }
.src-menu-item .icon { flex: 0 0 14px; width: 14px; height: 14px; }
.src-menu-item.is-disabled {
  color: rgba(0, 0, 0, .25);
  cursor: default;
}
.src-menu-item.is-disabled:hover { background: none; }
.src-menu-sep {
  height: 2px;              /* live box is 2px (border-box) */
  margin: 8px 0;
  border-top: 1px solid #F5F5F5;
}
.src-menu-head {
  height: 32px;
  padding: 5px 12px;
  font-size: 11px;
  line-height: 22px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
}

/* -- the thread -- */
.mity-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 40px 20px; }
/* 40px here plus the scroller's 40px puts the first message 80px down, as live */
.thread-col { padding: 40px 0 20px; }

.msg { margin-bottom: 24px; }

/* the question, right-aligned */
.msg--me { display: flex; justify-content: flex-end; }
.msg--me .bubble {
  max-width: 560px;
  padding: 12px 16px;
  border-radius: 18px;
  background: #F5F5F5;
  font-size: 16px;
  line-height: 20px;
  color: var(--ink);
}

/* the transient "Thinking…" row */
.msg--loading {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-3);
  font-size: 14px;
}
.watch-live {
  height: 20px;
  padding: 2px 4px 2px 6px;
  border: 0;
  border-radius: 3px;
  background: #F5F5F5;
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* live uses a right chevron; the sprite carries the left one, so mirror it */
.watch-live .icon { width: 6px; height: 10px; transform: scaleX(-1); }
.msg-avatar { width: 40px; height: 40px; flex: 0 0 40px; }
.load-sep { color: var(--muted-3); }
.load-preview {
  font-size: 11.9px;
  color: var(--muted-3);
  white-space: nowrap;
  overflow: hidden;
}

/* the answer */
.msg--bot .msg-avatar { display: block; margin-bottom: 8px; }

/* the tool / source card. live caps its wrapper at 520px */
.tool-card {
  max-width: 520px;
  margin: 12px 0;
  padding: 12px 14px 12px 20px;
  border: 1px solid #E5E5E5;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tool-head {
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tool-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  color: var(--ink);
}
.tool-title .icon { width: 14px; height: 16px; }
.tool-expand {
  height: 16px;
  padding: 4px 6px;
  border: 0;
  border-radius: 3px;
  background: #F5F5F5;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  color: var(--muted-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: content-box;
}
.tool-expand .icon { width: 11px; height: 8px; }
.tool-card[data-open="false"] .tool-body { display: none; }
.tool-body {
  width: 100%;
  /* live: 24px below the header, 12px above the card's bottom padding */
  margin: 24px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tool-label {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -.1px;
  color: var(--muted-3);
}
.tool-sources { display: flex; flex-direction: column; gap: 2px; }
.source {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.source:hover { background: #FAFAFA; }
.source-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.source-left .icon { flex: 0 0 9px; width: 9px; height: 12px; color: #424242; }
.source-name {
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -.2px;
  color: #616161;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.source-loc {
  flex-shrink: 0;
  max-width: 120px;
  margin-left: 12px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -.1px;
  color: var(--muted-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the answer body — live renders markdown at 16px/28px */
.md p  { margin: 0 0 8px; font-size: 16px; line-height: 28px; color: var(--ink); }
.md ul { margin: 6px 0; padding-left: 20px; }
.md li { margin: 8px 0; font-size: 16px; line-height: 28px; color: var(--ink); }

.msg-rule {
  height: 0;
  margin: 28px 0 12px;
  border: 0;
  border-top: 1px solid #E5E5E5;
}
.msg-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--muted-3); }
.msg-acts { margin-top: 10px; display: flex; align-items: center; gap: 14px; }
.msg-acts button {
  padding: 0;
  border: 0;
  background: none;
  color: #BDBDBD;
  cursor: pointer;
  display: inline-flex;
}
.msg-acts .icon { width: 16px; height: 16px; }
.msg-acts button:first-child .icon { width: 18px; }
.msg-acts button:hover { color: #616161; }

/* -- the file viewer --
   Live opens a 730px white drawer, 8px clear of the chat pane, and collapses
   the sub-nav to a 60px icon rail to make room. -->  */
.file-viewer {
  /* 730px at 1440, as live; below that it gives ground rather than squeezing
     the conversation out of existence (an extension — no live reference) */
  flex: 0 1 730px;
  max-width: 60%;
  min-width: 0;
  margin: 8px 8px 8px 0;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.file-viewer[hidden] { display: none; }

.fv-head {
  flex: 0 0 49px;
  height: 49px;
  padding: 12px 16px;
  background: #FAFBFC;
  display: flex;
  align-items: center;
  gap: 12px;
}
.fv-name {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fv-tools { display: flex; align-items: center; gap: 20px; }
.fv-tools button {
  padding: 0;
  border: 0;
  background: none;
  color: #555555;
  cursor: pointer;
  display: inline-flex;
}
.fv-tools .icon { width: 15px; height: 15px; }
.fv-tools button:hover { color: var(--ink); }

/* the document area. Live hands the file to the browser's PDF plugin; the
   pages below are an HTML facsimile. */
.fv-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  background: #F5F5F5;
}
.page {
  max-width: 620px;
  margin: 0 auto 20px;
  padding: 0 0 32px;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  font-size: 11px;
  line-height: 18px;
  color: #1F2937;
}
.pg-band {
  padding: 16px 22px;
  background: #1E3A6B;
  border-bottom: 3px solid #E8B23A;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pg-mark {
  flex: 0 0 42px;
  height: 42px;
  border-radius: 6px;
  background: var(--white);
  font-size: 13px;
  font-weight: 700;
  color: #1E3A6B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pg-org { display: flex; flex-direction: column; color: var(--white); }
.pg-org strong { font-size: 16px; line-height: 22px; }
.pg-org span   { font-size: 10px; line-height: 15px; opacity: .9; }
.pg-org em     { font-size: 8px; line-height: 13px; font-style: normal; opacity: .75; }

.page h3 {
  margin: 18px 22px 6px;
  font-size: 12px;
  font-weight: 700;
  color: #1E3A6B;
}
.page p  { margin: 0 22px 8px; }
.page ul { margin: 0 22px 8px; padding-left: 14px; }
.page li { margin: 2px 0; }

.pg-meta, .pg-table {
  width: calc(100% - 44px);
  margin: 16px 22px 0;
  border-collapse: collapse;
  font-size: 10px;
  line-height: 15px;
}
.pg-meta { background: #F7F8FA; }
.pg-meta th, .pg-meta td {
  padding: 6px 8px;
  border: 1px solid #E2E6EC;
  text-align: left;
  vertical-align: top;
}
.pg-meta th { font-weight: 700; color: #1E3A6B; white-space: nowrap; }
.pg-table { margin-bottom: 4px; }
.pg-table th {
  padding: 6px 8px;
  border: 1px solid #1E3A6B;
  background: #1E3A6B;
  color: var(--white);
  text-align: left;
  font-weight: 600;
}
.pg-table td { padding: 6px 8px; border: 1px solid #E2E6EC; }
.pg-table tbody tr:nth-child(even) { background: #F7F8FA; }

.pg-rule { margin-top: 22px !important; padding-top: 14px; border-top: 1px solid #E2E6EC; }
.pg-signs { margin: 26px 22px 0; display: flex; gap: 40px; }
.pg-signs div { flex: 1; text-align: center; }
.pg-line { display: block; color: #6B7280; }
.pg-line::after { content: " ......................................"; }
.pg-signs em { font-style: normal; font-size: 10px; color: #6B7280; }

.fv-fallback {
  max-width: 320px;
  margin: 96px auto;
  text-align: center;
  color: var(--muted-3);
}
.fv-fallback .icon { width: 28px; height: 36px; color: #BDBDBD; }
.fv-fallback p { margin: 12px 0 0; font-size: 13px; line-height: 20px; }
.fv-fallback strong { color: var(--ink); font-size: 14px; }
.fv-fallback code {
  padding: 1px 4px;
  border-radius: 3px;
  background: #F1F5F9;
  font-size: 12px;
}

/* narrow screens: the viewer covers the pane instead (extension) */
@media (max-width: 768px) {
  .mity.is-viewing .mity-side { display: none; }
  .file-viewer {
    position: absolute;
    inset: 8px 8px 8px 0;
    max-width: none;
    z-index: 30;
  }
  .mity { position: relative; }
}

/* with the viewer open the sub-nav shrinks to icons only */
.mity.is-viewing .mity-side {
  width: 60px;
  flex: 0 0 60px;
  padding: 0;
  align-items: center;
}
.mity.is-viewing .mity-collapse { margin-left: 0; }
.mity.is-viewing .mity-menu { width: 100%; align-items: center; }
.mity.is-viewing .mity-item {
  width: 36px;
  padding: 8px;
  justify-content: center;
}
.mity.is-viewing .mity-item span,
.mity.is-viewing .mity-recent,
.mity.is-viewing .mity-chats,
.mity.is-viewing .mity-no-topics { display: none; }

/* -- the RECENT CHATS entry the send creates -- */
.mity-chats { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.mity-chat {
  height: 36px;
  padding: 8px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mity-chat:hover { background: rgba(0, 0, 0, .04); }
.mity-chat.is-active, .mity-chat.is-active:hover { background: #E5E5E5; }
.mity-chat span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mity-chat .icon { flex: 0 0 14px; width: 14px; height: 4px; color: #616161; }

.mity-composer { padding: 0 24px; }
.mity-composer .composer {
  width: 760px;
  max-width: 100%;
  margin: 0 auto;
  min-height: 44px;
}
.mity-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  resize: none;
  background: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}
.mity-input::placeholder { color: var(--placeholder); }

/* the send button here is a muted green, not the chat composer's */
.mity-send {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 50%;
  background: #73998E;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* live: #73998E while the composer is empty, #699286 once it has text */
.mity-send.is-ready { background: #699286; }
.mity-send:hover { background: #628679; }
.mity-send .icon { width: 14px; height: 14px; }

/* -- panel shell shared by Skills / Files / Connectors -- */
.mity-shell {
  flex: 1;
  min-height: 0;
  margin: 20px 20px 20px 12px;
  background: #FAFAFA;   /* same panel tone as the chat pane */
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mity-shell-head {
  padding: 16px 24px;
  background: var(--white);
  display: flex;
  /* live vertically centres the back button against the title block */
  align-items: center;
  gap: 12px;
}

.mity-back {
  flex: 0 0 auto;
  line-height: 20px;
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mity-back:hover { background: #F1F5F9; }
.mity-back .icon { width: 14px; height: 14px; }

.mity-shell-title { flex: 1; min-width: 0; }
.mity-shell-title h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  color: #0F172A;
}
.mity-shell-title p {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: #6B7280;
}

.mity-shell-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px 24px;
}
.mity-shell-body--centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 49px;   /* puts the empty heading at y=198, as live */
}

.mity-empty-h {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: #6B7280;
  text-align: center;
}
.mity-empty-p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: #6B7280;
  text-align: center;
}
.mity-empty-h--files { margin-top: 52px; }

.btn-dark {
  height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 6px;
  background: #111827;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.btn-dark:hover { background: #1F2937; }
.btn-dark .icon { width: 12px; height: 14px; }
.mity-shell-body--centre .btn-dark { margin-top: 16px; }

/* -- workspace files filters -- */
.mity-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mity-field {
  height: 34px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  color: #111827;
  background: var(--white);
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  outline: none;
}
.mity-field--grow { flex: 1; min-width: 0; }
.mity-field::placeholder { color: #9CA3AF; }

.mity-reset {
  padding: 6px 10px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: #CBD5E1;
  cursor: not-allowed;
}

/* -- connector rows -- */
.connector {
  padding: 12px;
  background: var(--white);
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.connector + .connector { margin-top: 12px; }

/* the brand marks are square PNGs, boxed at 24px and letterboxed by object-fit
   so a non-square source can never stretch */
.connector-logo {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.connector-text { flex: 1; min-width: 0; }
.connector-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.connector-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  color: #111827;
}
.connector-tag {
  padding: 1px 6px;
  border-radius: 4px;
  background: #F1F5F9;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #64748B;
}
.connector-desc {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: #6B7280;
}

.connector-status {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #F1F5F9;
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
  color: #475569;
}

/* ============================= WORKFLOWS =============================
   /workflows — a 50px header over a 300px workflow list beside a pane that
   shows an empty-state glyph. Create Workflow opens a template picker, and
   picking a template opens that template's form.
   ==================================================================== */

.wf {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wf-head {
  height: 50px;
  flex: 0 0 50px;
  padding: 0 12px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wf-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ink-85);
}

.btn-outline {
  height: 30px;
  padding: 0 7px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--green);
  background: none;
  border: 1px solid var(--green);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-outline:hover { background: rgba(6, 198, 146, .06); }
.btn-outline .icon { width: 9px; height: 12px; }

.wf-body { flex: 1; min-height: 0; display: flex; }

/* -- workflow list -- */
.wf-list {
  width: 300px;
  min-width: 300px;
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wf-list-head {
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
}

.wf-search {
  position: relative;
  width: 230px;
  flex: 0 0 230px;
}
.wf-search .icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--ink-65);
  pointer-events: none;
}
.wf-search input {
  width: 100%;
  height: 28px;
  padding: 4px 0 4px 27px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-65);
  background: var(--white);
  border: 0;
  border-radius: 4px;
  outline: none;
}

.wf-tool {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: #424242;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wf-tool .icon { width: 14px; height: 14px; }

.wf-rows { flex: 1; min-height: 0; overflow-y: auto; position: relative; }

.wf-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 48%;
  transform: translateY(-50%);
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--empty);
}

/* a created workflow row */
.wf-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.wf-row:hover { background: var(--row-hover); }
.wf-row.is-selected { background: var(--row-selected); }
.wf-row-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-85);
}
.wf-row-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted-3);
}

.wf-pane {
  flex: 1;
  min-width: 0;
  padding: 20px;
  display: flex;
}
.wf-pane .empty-state { flex: 1; }
.wf-pane .empty-state img { width: 70px; height: 70px; }

/* ---------------------- template picker modal ---------------------- */

/* doubled class: the base .modal-box rule is declared later in this file.
   Both workflow modals sit 60px from the top in the live app, not centred. */
.modal-box.modal-box--picker { width: 420px; top: 60px; }
.modal-box.modal-box--form   { width: 550px; top: 60px; }

/* the workflow modals rule off the header */
.modal-head--ruled { border-bottom: 1px solid #E8E8E8; }

.wf-tpl-search { margin-top: 14px; }
.wf-tpl-search input { height: 28px; font-size: 14px; }

.wf-tabs {
  margin-top: 14px;
  display: flex;
  border-bottom: 1px solid var(--border);
}
.wf-tab {
  height: 38px;
  padding: 8px 10px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #8B8B8B;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.wf-tab.is-active {
  color: #333;
  border-bottom-color: var(--green);
}

.wf-templates { padding-top: 6px; }

/* live keeps the picker body a fixed 439px tall, so the card is always 488 */
.modal-box--picker .modal-body { min-height: 426px; }

.wf-template {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.wf-template-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #F0F0F0;
  color: #9E9E9E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wf-template-icon .icon { width: 11px; height: 11px; }
.wf-template-name {
  flex: 1;
  min-width: 0;
  height: 35px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #404040;
  border-bottom: 1px solid var(--border);
}
.wf-template:hover .wf-template-name { color: var(--green); }

/* ------------------------- template form ------------------------- */

.wf-form-body {
  padding: 12px 20px 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.wf-label {
  display: block;
  margin: 16px 0 6px;
  font-size: 14px;
  color: var(--ink-85);
}
.wf-label:first-child { margin-top: 0; }
.wf-req { color: #F5222D; font-style: normal; margin-right: 4px; }

.wf-date { position: relative; width: 232px; }
.wf-date .icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #BFBFBF;
  pointer-events: none;
}
.wf-date input {
  width: 100%;
  height: 48px;
  padding: 12px 12px 12px 45px;
  font-family: inherit;
  font-size: 16px;
  color: #17181C;
  background: var(--white);
  border: 1px solid #D5D6D9;
  border-radius: 6px;
  outline: none;
}
.wf-date input::placeholder { color: #BFBFBF; }

.wf-select {
  height: 40px;
  padding: 0 11px;
  background: var(--white);
  border: 1px solid #D9D9D9;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--ink-65);
  cursor: pointer;
}
.wf-select--sm { width: 328px; }
.wf-select .icon--flag { width: 14px; height: 14px; color: #BFBFBF; }
.wf-select .icon--caret { width: 10px; height: 14px; margin-left: auto; color: rgba(0,0,0,.25); }
.wf-select .is-placeholder { color: #BFBFBF; }

.wf-form-section {
  margin: 24px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: var(--muted);
}

.wf-add {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #D9D9D9;
  border-radius: 50%;
  background: var(--white);
  color: #8C8C8C;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wf-add:hover { border-color: var(--green); color: var(--green); }
.wf-add .icon { width: 14px; height: 14px; }

.wf-input {
  width: 100%;
  height: 40px;
  padding: 4px 11px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #D9D9D9;
  border-radius: 4px;
  outline: none;
}
.wf-input:focus { border-color: #40A9FF; }
.wf-textarea { height: auto; padding: 8px 11px; resize: vertical; }

.wf-form-footer {
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.btn-plain,
.btn-submit {
  width: 100px;
  height: 38px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
}
.btn-plain {
  color: var(--ink-65);
  background: var(--white);
  border: 1px solid #D9D9D9;
}
.btn-plain:hover { color: var(--green); border-color: var(--green); }
.btn-submit {
  color: #fff;
  background: var(--green);
  border: 1px solid var(--green);
}
.btn-submit:hover { background: #05B384; border-color: #05B384; }

/* ============================== PORTAL ==============================
   /portal — like Library, the live app serves this module from an iframe on
   its file host, so the grid responds to the content width. Only the
   Portals section is reproduced; the Folders section above it is omitted.
   =================================================================== */

.portal {
  flex: 1;
  min-width: 0;
  background: var(--white);
  overflow-y: auto;
  /* No padding here on purpose: an inline-size container is measured on its
     content box, so padding would shift the 768px breakpoint by 48px. The
     gutters live on the children instead. */
  container-type: inline-size;
}

/* -- header -- */
.portal-head {
  padding: 24px 24px 0;
  display: flex;
  /* live top-aligns the 24px title against the 40px search box */
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.portal-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: #212529;
}
.portal-title .icon { width: 20px; height: 20px; }

.portal-search {
  position: relative;
  width: 563px;
  max-width: 55%;
}
.portal-search input {
  width: 100%;
  height: 40px;
  padding: 3px 40px 4px 17px;
  font-family: inherit;
  font-size: 14px;
  color: #495057;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
}
.portal-search input::placeholder { color: #868E96; }
.portal-search .icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: #868E96;
  pointer-events: none;
}

.portal-section {
  margin: 40px 0 16px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
  color: var(--ink);
}

/* -- app grid: bootstrap col-6 / col-md-3 with 8px gutters -- */
.app-grid {
  padding: 0 24px 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@container (min-width: 768px) { .app-grid { grid-template-columns: repeat(4, 1fr); } }

.app-card {
  height: 201px;
  background: var(--white);
  border: 1px solid #E8E8E8;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.app-card:hover { border-color: #D0D0D0; }

.app-cover {
  flex: 0 0 112px;
  /* stands in for the portal's preview image */
  background:
    radial-gradient(90% 120% at 25% 20%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%),
    var(--tint, #C6D8EE);
}
/* apps with no preview get the app's mint placeholder + white glyph */
.app-cover--empty {
  background: #E5EFF0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-cover--empty .icon { width: 32px; height: 26px; color: #fff; }

.app-body { padding: 12px; min-width: 0; }

.app-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: #494D55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-desc {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #494D55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================== LIBRARY ==============================
   /library — the live app embeds this module in a cross-origin iframe from
   the knowledge-management host, so its grid responds to the *content*
   width, not the window. Container queries reproduce that faithfully.
   ==================================================================== */

.library {
  flex: 1;
  min-width: 0;
  background: var(--white);
  overflow-y: auto;
  container-type: inline-size;
}

/* -- hero -- */
.library-hero {
  height: 268px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;

  /* The live hero is a 2408x536 PNG: a mint field under a diagonal lattice of
     green dots, with two large soft discs. Rebuilt in CSS from colours
     sampled off that image — #B8E1D7 base, #89E0A8 dots, ~12px pitch at
     1440px wide. */
  background-color: #B8E1D7;
  background-image:
    radial-gradient(circle, #89E0A8 2.6px, transparent 2.7px),
    radial-gradient(circle, #89E0A8 2.6px, transparent 2.7px),
    radial-gradient(120% 190% at 6% 50%, #ACE4D3 0 58%, transparent 59%),
    radial-gradient(80% 150% at 101% 50%, #8AE1CD 0 55%, transparent 56%);
  background-size: 12px 12px, 12px 12px, auto, auto;
  background-position: 0 0, 6px 6px, 0 0, 0 0;
}

.library-heading {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 42px;
  color: #fff;
  text-align: center;
}

.library-search {
  position: relative;
  width: 450px;
  max-width: 100%;
}
.library-search .icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #979797;
  pointer-events: none;
}
.library-search input {
  width: 100%;
  height: 40px;
  padding: 4px 35px 4px 46px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #D9D9D9;
  border-radius: 20px;
  outline: none;
}
.library-search input::placeholder { color: rgba(0, 0, 0, .35); }

/* -- folders -- */
.library-body { padding: 10px 30px; }

.library-section {
  margin: 0;
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #494D55;
}

/* antd grid: 14px gutters, 1 / 2 / 3 / 4 columns at 576 / 768 / 992 */
.folder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px 14px;
}
@container (min-width: 576px) { .folder-grid { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 768px) { .folder-grid { grid-template-columns: repeat(3, 1fr); } }
@container (min-width: 992px) { .folder-grid { grid-template-columns: repeat(4, 1fr); } }

.folder {
  height: 200px;
  background: var(--white);
  border: 1px solid #E8E8E8;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.folder:hover { border-color: #D0D0D0; }

.folder-cover {
  position: relative;
  flex: 1;
  min-height: 0;
  /* stands in for the folder's cover image */
  background:
    radial-gradient(90% 120% at 25% 20%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%),
    var(--tint, #C9D3DE);
}

.folder-badge {
  position: absolute;
  top: 10px;
  left: -5px;
  height: 30px;
  padding: 0 12px;
  border-radius: 4px;
  background: #01B3E4;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
}

.folder-menu {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: #979797;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.folder-menu .icon { width: 4px; height: 18px; }

.folder-info {
  flex: 0 0 60px;
  padding: 0 5px 0 15px;
  background: var(--white);
  border-radius: 0 0 4px 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.folder-info .icon--folder {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--ink-65);
}
.folder-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================== PEOPLE ==============================
   /directory — a 300px contact list beside a pane that shows either an
   empty state or the selected contact's profile card.
   =================================================================== */

.people {
  width: 300px;
  min-width: 300px;
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.people-head {
  height: 50px;
  flex: 0 0 50px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
.people-head .search { flex: 1; padding-right: 6px; }  /* live input is 269 in a 275 box */
.people-head .search input { color: var(--ink-65); }
.people-head .search .icon { color: var(--muted); }

.people-rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* group divider, e.g. "Active (18)" */
.people-group {
  height: 35px;
  padding: 0 12px 0 9px;
  background: #F9F9F9;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-65);
}
.people-group .icon--globe { width: 14px; height: 14px; }
.people-group .icon--caret { width: 10px; height: 14px; margin-left: 2px; }
.people-group-label { margin-right: auto; }

/* -- contact row: same 10px-padded link the chat list uses -- */
.person > a {
  display: block;
  padding: 10px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.person > a:hover { background: var(--row-hover); }
.person.is-selected > a { background: var(--row-selected); }

.person-inner { display: flex; }

.person-avatar {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin: 4px 8px 0 0;
}
.person-avatar span {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #E6F8FA center/cover no-repeat;
}
/* the green presence pip, 2px white ring, pinned bottom-right */
.person-online {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green-online);
  border: 2px solid var(--white);
}

.person-main { flex: 1; min-width: 0; height: 47px; overflow: hidden; }

.person-name {
  margin: 0;
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  color: var(--ink-85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.person-role {
  display: block;
  font-size: 13px;
  line-height: 19.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------- right-hand pane ------------------------- */

.person-pane {
  flex: 1;
  min-width: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.person-pane .empty-state { flex: 1; }

.profile-presence {
  margin: 0 0 16px;
  text-align: center;
  font-size: 14px;
  color: var(--time);
}

.profile-card {
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  overflow: hidden;
  flex-shrink: 0;
}

/* -- cover -- */
.profile-cover {
  position: relative;
  height: 320px;
  background: #EFEFEF;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* live sits the avatar 80px down rather than centring the block */
  justify-content: flex-start;
  padding-top: 80px;
  /* stands in for the member's cover photo */
  background-image:
    radial-gradient(70% 60% at 30% 25%, #4A5A72 0%, rgba(74,90,114,0) 70%),
    radial-gradient(60% 55% at 75% 75%, #22303F 0%, rgba(34,48,63,0) 70%),
    linear-gradient(160deg, #35455C, #1D2836);
}
.profile-star {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .9);
  cursor: pointer;
}
.profile-star .icon { width: 20px; height: 20px; }

.profile-avatar {
  width: 104px;
  height: 104px;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, .85);
  background: #7C8CA0 center/cover no-repeat;
}
.profile-name,
.profile-role {
  align-self: stretch;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  color: #fff;
}
.profile-name {
  margin-top: 4px;
  font-size: 28px;
  font-weight: 500;
  line-height: 42px;
}
.profile-role {
  font-size: 18px;
  line-height: 22px;
  color: rgba(255, 255, 255, .9);
}

/* -- rank / points + action buttons -- */
.profile-actions {
  height: 60px;
  padding: 17px 25px 0;
  background: var(--white);
  display: flex;
  align-items: flex-start;
  gap: 45px;
}
.profile-stat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
}
.profile-stat .icon { width: 22px; height: 22px; color: #616161; }

.profile-buttons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-buttons button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(235, 237, 240, .5);
  color: var(--icon-toolbar);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.profile-buttons button:hover { background: rgba(235, 237, 240, .9); }
.profile-buttons .icon { width: 15px; height: 15px; }

/* -- details -- */
.profile-details {
  padding: 10px 25px 25px;
  background: var(--white);
}
.profile-section {
  margin: 0;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ink-85);
  border-bottom: 1px solid var(--border);
}
.profile-field { margin-top: 16px; }
.profile-label {
  font-size: 14px;
  line-height: 17px;
  color: #666;
}
.profile-value {
  margin-top: 8px;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink);
}

.profile-photos {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-photos span {
  width: 96px;
  height: 96px;
  border-radius: 4px;
  background: #E0E0E0;
}

/* ============================== NOTES ==============================
   /notes — a 60px white header over a #FAFAFA body holding a centred
   680px column of white cards. Opening the editor (/notes/new) shrinks
   the list to 300px and puts the editor beside it.
   ================================================================== */

.notes {
  flex: 1;
  min-width: 0;
  background: var(--notes-bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* -- header -- */
.notes-head {
  height: 60px;
  flex: 0 0 60px;
  padding: 14px 16px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notes-filter {
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.notes-filter .icon { width: 14px; height: 16px; }
.notes-filter .icon--caret { width: 10px; height: 16px; }

.notes-actions { display: flex; align-items: center; gap: 10px; }

.btn-ghost,
.btn-create {
  height: 32px;
  padding: 0 15px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-ghost {
  background: var(--white);
  color: var(--ink);
  border: 1px solid #D9D9D9;
}
.btn-ghost:hover { border-color: #BFBFBF; }
.btn-ghost--icon {
  padding: 0 10px;
  border-color: var(--border-2);
  color: var(--ink-65);
}
.btn-ghost .icon, .btn-create .icon { width: 14px; height: 14px; }

.btn-create {
  background: var(--green);
  color: #fff;
  border: 1px solid var(--green);
}
.btn-create:hover { background: #05B384; border-color: #05B384; }
.btn-create .icon { width: 11px; height: 14px; }

/* -- scrolling card column -- */
.notes-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 0;
}
.notes-col {
  width: 680px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
}

.note-card {
  background: var(--white);
  border: 1px solid #F5F5F5;
  border-radius: 12px;
  padding: 8px;
}
.note-card + .note-card { margin-top: 16px; }

/* -- pinned collapse -- */
.note-collapse-head {
  height: 38px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-85);
}
.note-collapse-head .icon--pin { width: 12px; height: 16px; }
.note-collapse-head .icon--chev {
  width: 12px;
  height: 12px;
  margin-left: auto;
  transform: rotate(90deg);
  color: var(--ink-65);
}
.note-collapse-body { padding-top: 4px; }

/* -- a note row -- */
.note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.note:hover { background: #FAFAFA; }
.note.is-selected { background: var(--row-selected); }

.note-main { flex: 1; min-width: 0; }

/* hairline between rows: spans the full content width, inset by the row's
   16px padding — live puts it on the content wrapper at bottom: -16px */
.note { position: relative; }
.note::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  border-bottom: 1px solid #F5F5F5;
}
.note-card > .note:last-child::after,
.note-collapse-body .note:last-child::after { border-bottom-color: transparent; }

.note-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-foot {
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--muted-3);
}
.note-flag { color: #FF5252; display: inline-flex; }
.note-flag .icon { width: 11px; height: 12px; }

.note-thread {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--blue);
}
.note-thread .icon { width: 12px; height: 12px; }

/* -- right-hand slot: unread dot + thumbnail -- */
.note-aside {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 20px;
}
.note-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #FF5252;
}
.note-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: #E0E0E0 center/cover no-repeat;
}

/* ============================ NOTE EDITOR ============================ */

.editor {
  flex: 1;
  min-width: 0;
  background: var(--white);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.editor-head {
  height: 60px;
  flex: 0 0 60px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.editor-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;   /* live h4 box is 24px tall */
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-actions { display: flex; align-items: center; gap: 16px; }
.editor-actions button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: rgba(0, 0, 0, .25);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.editor-actions button:hover { background: #F7F7F7; }
.editor-actions .icon { width: 16px; height: 16px; }
.editor-actions .icon--close { width: 10px; height: 16px; }
.editor-actions button:last-child { color: #424242; }

.editor-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 14px 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  outline: none;
}
.editor-body:empty::before {
  content: attr(data-placeholder);
  color: #BDBDBD;
}

.editor-toolbar {
  flex: 0 0 auto;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.editor-toolbar button {
  width: 17px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: #424242;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.editor-toolbar .icon { width: 17px; height: 17px; }

/* -- with the editor open the list shrinks to a 300px column -- */
body[data-view="notes"].editing .notes {
  flex: 0 0 300px;
  width: 300px;
  min-width: 0;
}
body[data-view="notes"].editing .notes-scroll { padding: 16px 0; }
body[data-view="notes"].editing .notes-col {
  width: auto;
  max-width: none;
  margin: 0 8px;
}
/* the wide "Last Updated" / "Create Note" labels collapse to icon buttons */
body[data-view="notes"].editing .btn-label { display: none; }
body[data-view="notes"].editing .btn-ghost,
body[data-view="notes"].editing .btn-create { padding: 0 10px; gap: 0; }
body[data-view="notes"].editing .note-title { white-space: normal; }

/* ============================== modal ==============================
   The live app uses Ant Design 3 modals. Values below are its computed
   styles for the "Name your topic" dialog.
   ================================================================== */

.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .45);
}

.modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 1001;
  overflow: auto;
}

.modal-box {
  position: relative;
  top: 220px;
  width: 320px;
  margin: 0 auto;
  padding-bottom: 24px;
}

.modal-content {
  position: relative;
  background: var(--white);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.modal-head {
  height: 48px;
  padding: 13px 16px;
  border-radius: 4px 4px 0 0;
}
.modal-title {
  /* antd nudges the title down 8px and pulls the same back off the bottom,
     so the header stays 48px tall */
  margin: 8px 0 -8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--ink-85);
}

.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  border: 0;
  padding: 0;
  background: none;
  color: rgba(0, 0, 0, .45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover { color: rgba(0, 0, 0, .75); }
.modal-close .icon { width: 14px; height: 22px; }

.modal-body { padding: 0 18px 13px; }

.modal-input {
  width: 100%;
  height: 32px;
  margin-top: 4px;
  padding: 4px 11px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-85);
  background: var(--white);
  border: 1px solid #D9D9D9;
  border-radius: 4px;
  outline: none;
}
.modal-input:focus { border-color: #40A9FF; }
.modal-input::placeholder { color: rgba(0, 0, 0, .25); }

.modal-actions {
  margin-top: 9px;
  display: flex;
  justify-content: flex-end;
}

.btn-primary {
  height: 32px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  background: var(--green);
  border: 1px solid #fff;
  border-radius: 4px;
  cursor: pointer;
}
.btn-primary:disabled {
  background: #F5F5F5;
  color: rgba(0, 0, 0, .25);
  border-color: #D9D9D9;
  cursor: not-allowed;
}

/* hidden variant toggle */
[hidden] { display: none !important; }

/* =========================================================================
   RESPONSIVE
   The live app has exactly one layout breakpoint: 768px.

   >= 768px  three panes — nav rail (76px) + chat list (18%, min 300px)
             + conversation. Chat list shrinks to its 300px floor at ~1666px
             and below, so 768–1666px all show a 300px list.

   <= 767px  single pane — the nav rail is replaced by a hamburger in the top
             header, the visible pane fills the width, and the conversation
             header collapses to: back chevron, 40px avatar, name, and two
             round action buttons (topics + more).
   ========================================================================= */

@media (max-width: 767px) {

  /* --- nav rail becomes a hamburger in the header --- */
  .rail { display: none; }
  .hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .topbar { padding: 0 14px; }
  .topbar-right { gap: 20px; }

  /* --- single pane: the chat list fills the width --- */
  .chatlist {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }

  /* on the list route the right-hand pane is pushed off-screen entirely */
  .body-row > .convo { display: none; }

  /* --- any non-list route: the list collapses, the right pane fills --- */
  body:not([data-view="list"]) .chatlist { display: none; }
  body:not([data-view="list"]) .body-row > .convo {
    display: flex;
    flex: 1 1 auto;
  }

  /* compact conversation header: 62px, 10px 16px padding */
  .convo-header {
    height: 62px;
    flex-basis: 62px;
    padding: 10px 16px 10px 14px;
    gap: 0;
  }
  .convo-back { display: inline-flex; align-items: center; justify-content: center; }

  .group-info > .group-avatar { width: 40px; height: 40px; flex-basis: 40px; }
  .group-name { font-size: 16px; line-height: 20px; }
  .group-sub  { font-size: 13px; line-height: 18px; }

  /* only Topics + More survive, as filled round buttons */
  .convo-actions { gap: 8px; }
  .convo-actions .desktop-only { display: none; }
  .convo-actions .mobile-only { display: inline-flex; }
  .convo-actions button {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    background: rgba(235, 237, 240, .5);
    align-items: center;
    justify-content: center;
  }
  .convo-actions .icon { width: 14px; height: 14px; }

  /* the vertical tool rail is desktop-only */
  .toolrail { display: none; }

  .messages { padding: 16px 16px 0; }

  /* composer loses the "Enter to Send" toggle */
  .composer-wrap { padding: 16px 24px 24px; }
  .composer { min-height: 48px; }
  .enter-to-send { display: none; }

  /* --- Topics route: no conversation header at all, the panel owns the screen
         and grows its own header with a back chevron + separator. --- */
  body[data-view="topics"] .convo-header { display: none; }

  .panel {
    min-width: 0;
    padding: 0;
  }
  .panel-head {
    padding: 0 8px;
    gap: 0;
    border-bottom: 1px solid var(--border);
  }
  /* the live back button carries a 4px left inset, putting the chevron at x=12 */
  .panel-back {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 14px;
    flex-basis: 14px;
    padding-left: 4px;
  }

  /* --- Notes: single pane, same as the rest of the app. (Not captured from
         the live app at this width — this follows the 768px pattern used
         everywhere else.) --- */
  body[data-view="notes"] .notes-col { width: auto; max-width: none; margin: 0 8px; }
  body[data-view="notes"] .btn-label { display: none; }
  body[data-view="notes"] .btn-ghost,
  body[data-view="notes"] .btn-create { padding: 0 10px; gap: 0; }

  body[data-view="notes"].editing .notes { display: none; }
  body[data-view="notes"].editing .editor { flex: 1 1 auto; }

  /* --- People: single pane. The list fills the screen until a contact is
         opened, then the profile takes over. (Pattern-based, not captured.) --- */
  body[data-view="people"] .people { width: 100%; min-width: 0; flex: 1 1 auto; }
  body[data-view="people"] .person-pane { display: none; }
  body[data-view="people"].viewing-profile .people { display: none; }
  body[data-view="people"].viewing-profile .person-pane { display: flex; flex: 1 1 auto; padding: 12px; }
  body[data-view="people"] .profile-cover { height: 240px; }
  body[data-view="people"] .profile-actions { gap: 20px; }

  /* --- Library: shorter hero and tighter gutters on small screens.
         (Pattern-based; the live module was measured at desktop only.) --- */
  body[data-view="library"] .library-hero { height: 200px; gap: 14px; }
  body[data-view="library"] .library-heading { font-size: 22px; line-height: 32px; }
  body[data-view="library"] .library-body { padding: 10px 16px; }

  /* --- Portal: header stacks and gutters tighten on small screens.
         (Pattern-based; the live module was measured at desktop only.) --- */
  body[data-view="portal"] .portal-head { padding: 16px 16px 0; }
  body[data-view="portal"] .portal-section { padding: 0 16px; }
  body[data-view="portal"] .app-grid { padding: 0 16px 16px; }
  body[data-view="portal"] .portal-head { flex-direction: column; align-items: stretch; gap: 12px; }
  body[data-view="portal"] .portal-search { width: 100%; max-width: none; }
  body[data-view="portal"] .portal-section { margin-top: 28px; }

  /* --- Workflows: single pane, list first then the detail. --- */
  body[data-view="workflows"] .wf-list { width: 100%; min-width: 0; flex: 1 1 auto; }
  body[data-view="workflows"] .wf-pane { display: none; }
  body[data-view="workflows"] .modal-box.modal-box--picker,
  body[data-view="workflows"] .modal-box.modal-box--form { width: min(550px, calc(100vw - 24px)); }
  body[data-view="workflows"] .wf-select--sm,
  body[data-view="workflows"] .wf-date { width: 100%; }

  /* --- Mity: the sub-nav collapses away and the main area fills. --- */
  body[data-view="mity"] .mity-side { display: none; }
  body[data-view="mity"] .mity-hero { flex-direction: column; gap: 16px; padding: 24px; }
  body[data-view="mity"] .mity-mascot { width: 160px; height: 160px; flex-basis: 160px; }
  body[data-view="mity"] .mity-greet { text-align: center; }
  body[data-view="mity"] .mity-greet h1 { font-size: 26px; line-height: 34px; }
  body[data-view="mity"] .mity-composer { padding: 0 12px 20px; }
  body[data-view="mity"] .mity-shell { margin: 12px; }
  body[data-view="mity"] .mity-shell-head { padding: 12px 14px; flex-direction: column; gap: 8px; }
  body[data-view="mity"] .mity-shell-body { padding: 14px; }
  body[data-view="mity"] .mity-filters { flex-wrap: wrap; }
  body[data-view="mity"] .connector { flex-wrap: wrap; gap: 12px; }

  /* empty state sits in the hidden pane, so nothing to do there */
}

/* Very narrow phones — the live app keeps the same layout, just tighter gutters. */
@media (max-width: 480px) {
  .composer-wrap { padding: 12px 12px 16px; }
  .messages { padding: 12px 12px 0; }
  .convo-header { padding: 10px 12px; }
}