/* ═══════════════════════════════════════════════════════════════════
   Loraa AI Operations Center — premium enterprise command center.
   Three columns: workspaces · operations · context. Light glass surface
   over the blurred NutriDMS app. Tone system: ok/info/warn/block/run.
   ═══════════════════════════════════════════════════════════════════ */

.loc-modal {
  /* Loraa brand — cyan → blue → indigo */
  --loraa-grad: linear-gradient(135deg, #35B0FF 0%, #3D6FF2 52%, #4C39E6 100%);
  --loraa-solid: #3D6FF2;
  --loraa-deep: #4C39E6;
  --loraa-tint: #EEF3FF;
  --loraa-ring: rgba(61,111,242,.16);
  /* Panel widths. The four columns are declared exactly once; opening or
     closing a panel only re-points one of these widths, so the track count can
     never drift away from the four children and the dashboard is always
     whatever is left over. Panels also shrink with the viewport instead of
     squeezing the dashboard into a sliver once several are open. */
  --loc-side-w: clamp(212px, 17vw, 260px);
  --loc-chat-w: 0px;
  --loc-ctx-w: clamp(238px, 20vw, 288px);
  /* The frame is a fixed size: panels are carved out of it rather than bolted
     onto it, so toggling one never resizes the modal under the pointer. */
  --loc-modal-w: min(1480px, calc(100vw - 160px));
  /* ...and the dashboard is a fixed-width section centred in whatever the panels
     leave it, so its contents never resize either. 548px is the room left when
     all three panels are open at full size, which makes it the widest section
     that every combination can honour. */
  --loc-section-w: 548px;
  position: fixed; z-index: 201; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: var(--loc-modal-w);
  height: min(760px, 92vh);
  display: grid; overflow: hidden;
  grid-template-columns:
    minmax(0, var(--loc-side-w)) minmax(0, var(--loc-chat-w))
    minmax(min(var(--loc-section-w), 100%), 1fr) minmax(0, var(--loc-ctx-w));
  grid-template-rows: minmax(0, 1fr);
  border-radius: 24px; border: 1px solid rgba(255,255,255,.7);
  background: linear-gradient(160deg, rgba(255,255,255,.94), rgba(247,250,244,.9));
  backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: 0 48px 130px -32px rgba(12,26,16,.62), inset 0 1px 0 rgba(255,255,255,.8);
  animation: locIn .36s cubic-bezier(.22,1,.36,1);
  color: var(--gray-900);
  transition: width .38s cubic-bezier(.22,1,.36,1), grid-template-columns .38s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.22,1,.36,1);
}
@keyframes locIn { from { opacity: 0; transform: translate(-50%,-47%) scale(.98); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
/* Panel toggles change one width each -- the eight hand-written track lists
   these replace could not stay in agreement, and the more specific ones beat
   the responsive overrides below. A panel at 0 also has to give up its own
   padding and border: a grid item stretched into a 0px track still lays those
   out, which is what used to leave a 25px strip of the collapsed sidebar
   showing at the modal's edge. */
.loc-modal.chat-open { --loc-chat-w: clamp(330px, 27vw, 384px); }
.loc-modal.side-hidden { --loc-side-w: 0px; }
.loc-modal.ctx-hidden { --loc-ctx-w: 0px; }

/* ─────────── Left: workspaces ─────────── */
.loc-side {
  min-width: 0; min-height: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column;
  padding: 16px min(12px, var(--loc-side-w));
  background: linear-gradient(180deg, #1A1D3D, #101128); color: #E8EAFB;
  border-right: 1px solid rgba(255,255,255,.06);
  border-right-width: min(1px, var(--loc-side-w));
  transition: padding .38s cubic-bezier(.22,1,.36,1);
}
.loc-side-brand { display: flex; align-items: center; gap: 9px; padding: 2px 6px 14px; }
.loc-side-name { font-weight: 800; font-size: 15px; color: #fff; letter-spacing: -.01em; }
.loc-side-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #7FA6FF; }
.loc-side-live i { width: 7px; height: 7px; border-radius: 50%; background: #7FA6FF; animation: locPulse 1.9s ease-out infinite; }
@keyframes locPulse { 0% { box-shadow: 0 0 0 0 rgba(61,111,242,.6); } 70% { box-shadow: 0 0 0 7px rgba(61,111,242,0); } 100% { box-shadow: 0 0 0 0 rgba(61,111,242,0); } }
.loc-newconv { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 38px; margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: rgba(255,255,255,.08); color: #E8EAFB;
  font-weight: 700; font-size: 12.5px; font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
.loc-newconv:hover { background: rgba(61,111,242,.28); border-color: rgba(120,150,255,.6); }
.loc-history-search {
  display: flex; align-items: center; gap: 7px; min-height: 35px; margin: 0 0 10px; padding: 0 9px;
  border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.055); color: #8A8FC4;
}
.loc-history-search:focus-within { border-color: rgba(127,166,255,.72); box-shadow: 0 0 0 3px rgba(61,111,242,.15); }
.loc-history-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #F4F5FF; font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; }
.loc-history-search input::placeholder { color: #7F84B1; }
.loc-history-search button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #9FA4CD; cursor: pointer; }
.loc-history-search button:hover { background: rgba(255,255,255,.09); color: #fff; }
.loc-history-loading { display: flex; flex-direction: column; gap: 7px; padding: 7px 5px 12px; }
.loc-history-loading i { display: block; height: 38px; border-radius: 10px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04)); background-size: 220% 100%; animation: locHistoryLoad 1.3s ease infinite; }
@keyframes locHistoryLoad { to { background-position: -220% 0; } }
.loc-side-scroll { flex: 1; overflow-y: auto; margin: 2px -4px; padding: 0 4px; }
.loc-side-scroll::-webkit-scrollbar { width: 6px; }
.loc-side-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; }
.loc-ws-group { margin-bottom: 10px; }
.loc-ws-h { padding: 6px 8px 4px; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #8A8FC4; }
.loc-ws { position: relative; display: flex; align-items: center; width: 100%; padding: 2px; border: 0; border-radius: 10px; background: transparent;
  color: #CFD3F2; text-align: left; font-family: inherit; transition: background .14s; margin-bottom: 1px; }
.loc-ws:hover { background: rgba(255,255,255,.07); }
.loc-ws.on { background: rgba(61,111,242,.26); }
.loc-ws-open { min-width: 0; flex: 1; display: flex; align-items: center; gap: 9px; padding: 6px 7px; border: 0; background: transparent; color: inherit; text-align: left; font-family: inherit; cursor: pointer; }
.loc-ws-tools { display: none; align-items: center; gap: 1px; padding-right: 3px; }
.loc-ws:hover .loc-ws-tools, .loc-ws:focus-within .loc-ws-tools { display: flex; }
.loc-ws-tools button { display: grid; place-items: center; width: 23px; height: 23px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #9FA4CD; cursor: pointer; }
.loc-ws-tools button:hover { background: rgba(255,255,255,.11); color: #fff; }
.loc-ws-ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.loc-ws-ic.ok { background: rgba(61,111,242,.22); color: #9FB6FF; }
.loc-ws-ic.info { background: rgba(62,143,212,.22); color: #8FC4F2; }
.loc-ws-ic.warn { background: rgba(224,150,60,.22); color: #F0C088; }
.loc-ws-ic.block { background: rgba(224,80,80,.22); color: #F0A0A0; }
.loc-ws-ic.run { background: rgba(255,255,255,.12); color: #cfd3f2; }
.loc-ws-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.loc-ws-tx strong { font-size: 12.5px; font-weight: 600; color: #EDEFFB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-ws-tx small { font-size: 10.5px; color: #8A8FC4; }
.loc-ws-count { flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.loc-ws-dot { position: absolute; right: 8px; top: 8px; width: 6px; height: 6px; border-radius: 50%; display: none; }
.loc-ws-dot.block { display: block; background: #F87171; }
.loc-side-foot { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.loc-side-avs { display: flex; margin-bottom: 7px; }
.loc-av { width: 26px; height: 26px; margin-left: -7px; border-radius: 50%; border: 2px solid #101128; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; color: #0b1a12; }
.loc-av:first-child { margin-left: 0; }
.loc-av.av-0 { background: #7ED0C4; } .loc-av.av-1 { background: #7FA8F5; } .loc-av.av-2 { background: #A98BF0; } .loc-av.av-3 { background: #F4C86A; } .loc-av.av-4 { background: #F58BB0; }
.loc-side-work strong { display: block; font-size: 13.5px; font-weight: 800; color: #9FB6FF; }
.loc-side-work span { font-size: 11px; color: #9a9fc8; }

/* ─────────── Center: main ─────────── */
.loc-main { min-width: 0; min-height: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; background: rgba(255,255,255,.35); position: relative;
  container: locmain / inline-size; }
/* Header and body hold their contents to --loc-section-w and centre them, while
   the elements themselves still span the column so the header's rule reaches
   both edges. The inset collapses to the plain gutter once the column is
   narrower than the section, which is when the section shrinks to fit. */
.loc-head { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(15,40,24,.08);
  padding: 12px max(14px, calc((100% - var(--loc-section-w)) / 2 + 14px)); }
.loc-head-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.loc-head-title > div { min-width: 0; flex: 1; }
.loc-head-title strong { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.loc-head-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.loc-head-sub .loc-live-dot { flex-shrink: 0; }
.loc-head-tools { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 2px; max-width: 100%; }
.loc-icbtn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--gray-500); cursor: pointer; transition: background .14s, color .14s; }
.loc-icbtn:hover { background: rgba(15,40,24,.07); color: var(--gray-900); }
.loc-icbtn.on { background: var(--loraa-ring); color: var(--loraa-solid); }
.loc-body { flex: 1; overflow-y: auto; padding: 20px max(22px, calc((100% - var(--loc-section-w)) / 2 + 22px)); }
.loc-body::-webkit-scrollbar { width: 8px; } .loc-body::-webkit-scrollbar-thumb { background: rgba(15,40,24,.14); border-radius: 8px; }

/* Executive summary */
.loc-exec { margin-bottom: 22px; }
.loc-exec-top { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
.loc-exec-top h2 { font-family: var(--serif, inherit); font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; color: var(--gray-900); }
.loc-exec-top p { font-size: 13px; color: var(--gray-600); margin: 0; line-height: 1.5; }
.loc-gauges { display: flex; gap: 10px; }
.loc-gauge { flex: 1 1 0; min-width: 0; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid rgba(15,40,24,.08); text-align: center; }
.loc-gauge-v { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.loc-gauge-v.ok { color: #3D6FF2; } .loc-gauge-v.info { color: #2a6fb5; }
.loc-gauge-k { font-size: 10.5px; font-weight: 600; color: var(--gray-500); }
.loc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.loc-tile { padding: 14px 12px; border-radius: 14px; border: 1px solid rgba(15,40,24,.08); background: rgba(255,255,255,.72); text-align: left; cursor: pointer; font-family: inherit;
  transition: transform .16s, box-shadow .16s, border-color .16s; position: relative; overflow: hidden; }
.loc-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.loc-tile.ok::before { background: #3D6FF2; } .loc-tile.info::before { background: #3E8FD4; } .loc-tile.warn::before { background: #E0963C; } .loc-tile.block::before { background: #E45858; }
.loc-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -16px rgba(12,26,16,.4); border-color: rgba(15,40,24,.16); }
.loc-tile-v { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-bottom: 5px; color: var(--gray-900); }
.loc-tile-k { font-size: 11.5px; font-weight: 600; color: var(--gray-600); line-height: 1.3; }

/* Section headers */
.loc-sec-h { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 12px; }
.loc-sec-h span { font-size: 13px; font-weight: 800; letter-spacing: -.01em; color: var(--gray-800); text-transform: uppercase; letter-spacing: .04em; }
.loc-sec-h small { font-size: 11.5px; color: var(--gray-400); }

/* Operations feed */
.loc-feed { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.loc-card { display: flex; gap: 13px; padding: 13px 15px; border-radius: 15px; width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  border: 1px solid rgba(15,40,24,.08); background: rgba(255,255,255,.72); position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s; animation: locCardIn .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes locCardIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.loc-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.loc-card.ok::before { background: #3D6FF2; } .loc-card.info::before { background: #3E8FD4; } .loc-card.warn::before { background: #E0963C; } .loc-card.block::before { background: #E45858; } .loc-card.run::before { background: #9AA6B8; }
.loc-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(12,26,16,.42); border-color: rgba(15,40,24,.18); }
.loc-card-ic { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; }
.loc-card-ic.ok { background: #E7EDFF; color: #2f47c8; }
.loc-card-ic.info { background: #E4EDFD; color: #2a6fb5; }
.loc-card-ic.warn { background: #FDECD8; color: #b47212; }
.loc-card-ic.block { background: #FDE0E0; color: #c0392b; }
.loc-card-ic.run { background: #EEF1F4; color: #6b7a8d; }
.loc-card-body { flex: 1; min-width: 0; }
.loc-card-top { display: flex; align-items: center; gap: 10px; }
.loc-card-top strong { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--gray-900); }
.loc-status { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.loc-status.ok { background: #E7EDFF; color: #2f47c8; }
.loc-status.info { background: #E4EDFD; color: #2a54a5; }
.loc-status.warn { background: #FDECD8; color: #9a5b12; }
.loc-status.block { background: #FDE0E0; color: #b42318; }
.loc-status.run { background: #EEF1F4; color: #5b6a7d; }
.loc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.loc-chip { font-size: 11px; font-weight: 600; color: var(--gray-600); background: rgba(15,40,24,.06); border-radius: 6px; padding: 3px 8px; }
.loc-card-meta { font-size: 12px; color: var(--gray-500); margin-top: 5px; }
.loc-card-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.loc-time { font-size: 11px; color: var(--gray-400); }
.loc-open { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--loraa-solid, #3D6FF2); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.loc-card:hover .loc-open { opacity: 1; transform: none; }
.loc-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(107,122,141,.3); border-top-color: #6b7a8d; animation: locSpin .8s linear infinite; }
@keyframes locSpin { to { transform: rotate(360deg); } }

/* Recommendations */
.loc-recs { display: flex; flex-wrap: wrap; gap: 8px; }
.loc-rec { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(15,40,24,.1); background: rgba(255,255,255,.72);
  font-size: 12.5px; font-weight: 600; font-family: inherit; color: var(--gray-700); cursor: pointer; transition: border-color .15s, background .15s, color .15s, transform .15s; }
.loc-rec svg { color: var(--loraa-solid); }
.loc-rec:hover { border-color: var(--loraa-solid); background: var(--loraa-tint); color: var(--loraa-deep); transform: translateY(-1px); }

/* Chat thread */
.loc-thread-wrap { display: flex; flex-direction: column; }
.loc-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(15,40,24,.1); background: rgba(255,255,255,.7); font-size: 12.5px; font-weight: 700; font-family: inherit; color: var(--gray-700); cursor: pointer; }
.loc-back:hover { border-color: var(--loraa-solid); color: var(--loraa-deep); }
.loc-thread { display: flex; flex-direction: column; gap: 14px; }
.loc-msg { display: flex; gap: 10px; align-items: flex-start; }
.loc-msg.user { justify-content: flex-end; }
.loc-bubble { max-width: 74%; padding: 11px 15px; border-radius: 16px; font-size: 13.5px; line-height: 1.55; }
.loc-msg.loraa .loc-bubble { background: #fff; border: 1px solid rgba(15,40,24,.1); color: var(--gray-800); border-top-left-radius: 5px; }
.loc-msg.user .loc-bubble { background: var(--loraa-grad); color: #fff; border-top-right-radius: 5px; }
.loc-msg.loraa .loc-bubble:has(.loc-agent-answer) {
  width: min(100%, 760px); max-width: 100%; padding: 16px 17px; border-radius: 18px;
  border-top-left-radius: 7px; border-color: rgba(61,111,242,.15);
  background: linear-gradient(145deg, #fff 0%, #FCFDFF 68%, #F5F8FF 100%);
  box-shadow: 0 14px 38px -28px rgba(37,54,117,.46);
}
.loc-agent-answer { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.loc-agent-answer > span { font-size: 13.5px; line-height: 1.7; color: var(--gray-800); white-space: pre-wrap; }
.loc-agent-grounding { overflow: hidden; border: 1px solid rgba(61,111,242,.12); border-radius: 12px; background: rgba(238,243,255,.48); }
.loc-agent-grounding summary { display: flex; align-items: center; gap: 7px; padding: 9px 11px; color: var(--loraa-deep); font-size: 11.5px; font-weight: 800; cursor: pointer; list-style: none; }
.loc-agent-grounding summary::-webkit-details-marker { display: none; }
.loc-agent-grounding > div { padding: 0 11px 10px; }
.loc-agent-grounding p { margin: 5px 0 0; color: var(--gray-600); font-size: 11px; line-height: 1.45; }
.loc-agent-source { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; background: #fff; color: #2B5E44; font-size: 9.5px; font-weight: 800; }
.loc-agent-actions { display: flex; flex-direction: column; gap: 7px; }
.loc-agent-actions-h { display: flex; align-items: center; gap: 6px; color: var(--gray-500); font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.loc-agent-action { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto 16px; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid rgba(15,40,24,.1); border-radius: 12px; background: #fff; text-align: left; color: var(--gray-800); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.loc-agent-action:hover { transform: translateY(-1px); border-color: rgba(61,111,242,.4); box-shadow: 0 10px 24px -18px rgba(37,54,117,.58); }
.loc-agent-action > span { min-width: 0; }
.loc-agent-action strong, .loc-agent-action small { display: block; }
.loc-agent-action strong { font-size: 12px; }
.loc-agent-action small { margin-top: 2px; color: var(--gray-500); font-size: 10.5px; line-height: 1.35; }
.loc-agent-action em { padding: 4px 7px; border-radius: 999px; background: rgba(61,111,242,.08); color: var(--loraa-deep); font-family: inherit; font-size: 9px; font-weight: 800; line-height: 1; white-space: nowrap; }
.loc-agent-action.risk-high em { background: rgba(224,80,58,.1); color: #B23320; }
.loc-agent-followups { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.loc-agent-followups button { min-height: 31px; padding: 6px 10px; border: 1px solid rgba(61,111,242,.22); border-radius: 999px; background: rgba(238,243,255,.5); color: var(--loraa-deep); font-family: inherit; font-size: 10.5px; font-weight: 700; line-height: 1.25; cursor: pointer; text-align: left; }
.loc-agent-followups button:hover { background: rgba(61,111,242,.11); border-color: rgba(61,111,242,.42); }
.loc-agent-meta { display: flex; align-items: center; gap: 8px; padding-top: 2px; color: var(--gray-400); }
.loc-agent-meta > span { width: 68px; height: 4px; border-radius: 999px; overflow: hidden; background: rgba(61,111,242,.12); }
.loc-agent-meta > span i { display: block; height: 100%; border-radius: inherit; background: var(--loraa-grad); }
.loc-agent-meta em { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-style: normal; font-weight: 700; }
.loc-typing { display: flex; gap: 4px; }
.loc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-400); animation: locBlink 1.2s ease-in-out infinite; }
.loc-typing i:nth-child(2) { animation-delay: .15s; } .loc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes locBlink { 0%,80%,100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.1); } }

/* Command bar */
.loc-foot { padding: 12px 16px 14px; border-top: 1px solid rgba(15,40,24,.08); background: rgba(255,255,255,.55); position: relative; }
.loc-slash { margin-bottom: 8px; background: #fff; border: 1px solid rgba(15,40,24,.1); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px -22px rgba(12,26,16,.5); }
.loc-slash-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 13px; border: 0; background: transparent; text-align: left; font-family: inherit; cursor: pointer; transition: background .12s; }
.loc-slash-item:hover, .loc-slash-item.on { background: var(--loraa-tint); }
.loc-slash-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--loraa-ring); color: var(--loraa-solid); }
.loc-slash-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.loc-slash-tx strong { font-size: 13px; font-weight: 700; color: var(--gray-900); font-family: ui-monospace, monospace; }
.loc-slash-tx small { font-size: 11.5px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-slash-enter { color: var(--gray-300); flex-shrink: 0; }
.loc-input { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(15,40,24,.14); border-radius: 14px; padding: 10px 12px 10px 14px; transition: border-color .15s, box-shadow .15s; }
.loc-input:focus-within { border-color: var(--loraa-solid); box-shadow: 0 0 0 3px var(--loraa-ring); }
.loc-input-ic { color: var(--loraa-solid); flex-shrink: 0; }
.loc-input input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; font-family: inherit; color: var(--gray-900); }
.loc-input input::placeholder { color: var(--gray-400); }
.loc-send { flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: var(--loraa-grad); transition: opacity .15s, transform .15s; }
.loc-send:disabled { opacity: .4; cursor: default; }
.loc-send:not(:disabled):hover { transform: translateY(-1px); }
.loc-foot-note { margin-top: 8px; font-size: 10.5px; color: var(--gray-400); text-align: center; line-height: 1.4; }

/* ─────────── Slide-out chat drawer ─────────── */
/* ─────────── Chat column (inline; between sidebar and dashboard) ─────────── */
.loc-chat {
  min-width: 0; min-height: 0; height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,251,246,.99));
  border-right: 1px solid rgba(15,40,24,.1);
  border-right-width: min(1px, var(--loc-chat-w));
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.loc-modal.chat-open .loc-chat { opacity: 1; pointer-events: auto; transition: opacity .3s ease .12s; }
.loc-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid rgba(15,40,24,.08); }
.loc-chat-head-t { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.loc-chat-head-t strong { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.loc-chat-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--gray-500); }
.loc-chat-body { flex: 1; overflow-y: auto; padding: 18px 16px; }
.loc-chat-body::-webkit-scrollbar { width: 8px; } .loc-chat-body::-webkit-scrollbar-thumb { background: rgba(15,40,24,.14); border-radius: 8px; }
.loc-chat-empty { text-align: center; padding: 18px 4px 14px; }
.loc-chat-empty .loc-orb { margin: 0 auto; }
.loc-chat-empty h3 { font-family: var(--serif, inherit); font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 12px 0 6px; color: var(--gray-900); }
.loc-chat-empty p { font-size: 12.5px; color: var(--gray-500); margin: 0 auto 13px; max-width: 340px; line-height: 1.5; }
.loc-chat-sugg { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; justify-content: center; text-align: left; }
.loc-chat-sugg .loc-rec { min-height: 42px; height: auto; padding: 8px 10px; justify-content: flex-start; line-height: 1.3; }
.loc-ai-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 0 auto 13px; max-width: 390px; }
.loc-ai-trust span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 999px; background: rgba(61,111,242,.07); border: 1px solid rgba(61,111,242,.13); color: var(--loraa-deep); font-size: 9.5px; font-weight: 750; }
.loc-ai-trust svg { color: var(--loraa-solid); }
.loc-ai-boundary { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 12px auto 0; max-width: 350px; padding: 8px 10px; border-radius: 10px; color: var(--gray-500); background: rgba(15,40,24,.035); font-size: 10px; line-height: 1.35; }
.loc-chat-foot { padding: 12px 14px 14px; border-top: 1px solid rgba(15,40,24,.08); background: rgba(255,255,255,.6); position: relative; }

/* Right: context */
.loc-ctx { min-width: 0; min-height: 0; height: 100%; overflow-y: auto; padding: 16px min(14px, var(--loc-ctx-w)); border-left: 1px solid rgba(15,40,24,.08); border-left-width: min(1px, var(--loc-ctx-w)); background: rgba(250,252,248,.6); transition: padding .38s cubic-bezier(.22,1,.36,1); }
.loc-ctx::-webkit-scrollbar { width: 6px; } .loc-ctx::-webkit-scrollbar-thumb { background: rgba(15,40,24,.14); border-radius: 6px; }
.loc-ctx-h { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); margin: 6px 4px 9px; }
.loc-ctx-h:not(:first-child) { margin-top: 20px; }
.loc-ctx-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.loc-ctx-metric { padding: 11px 12px; border-radius: 12px; background: #fff; border: 1px solid rgba(15,40,24,.08); }
.loc-ctx-v { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1; margin-bottom: 4px; }
.loc-ctx-v.ok { color: #3D6FF2; } .loc-ctx-v.info { color: #2a6fb5; } .loc-ctx-v.warn { color: #b47212; } .loc-ctx-v.block { color: #c0392b; } .loc-ctx-v.run { color: #6b7a8d; }
.loc-ctx-metric span:last-child { font-size: 11px; font-weight: 600; color: var(--gray-500); }
.loc-ctx-notifs { display: flex; flex-direction: column; gap: 7px; }
.loc-notif { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border-radius: 13px; background: #fff; border: 1px solid rgba(15,40,24,.09); box-shadow: 0 1px 2px rgba(15,30,60,.03); transition: border-color .13s, box-shadow .13s, transform .13s; }
.loc-notif:hover { border-color: rgba(61,111,242,.32); box-shadow: 0 6px 16px -8px rgba(15,30,60,.18); transform: translateY(-1px); }
.loc-notif-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; }
.loc-notif-dot.ok { background: #3D6FF2; } .loc-notif-dot.info { background: #3E8FD4; } .loc-notif-dot.warn { background: #E0963C; } .loc-notif-dot.block { background: #E45858; } .loc-notif-dot.run { background: #9AA6B8; }
.loc-notif-tx { flex: 1; font-size: 12px; color: var(--gray-700); line-height: 1.4; }
.loc-notif small { font-size: 10.5px; color: var(--gray-400); flex-shrink: 0; }
.loc-ctx-links { display: flex; flex-direction: column; gap: 4px; }
.loc-ctx-link { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 11px; border: 1px solid rgba(15,40,24,.08); border-radius: 11px; background: #fff; font-size: 12.5px; font-weight: 600; font-family: inherit; color: var(--gray-700); cursor: pointer; transition: border-color .14s, background .14s, color .14s; }
.loc-ctx-link svg:first-child { color: var(--loraa-solid); }
.loc-ctx-link:hover { border-color: var(--loraa-solid); background: var(--loraa-tint); color: var(--loraa-deep); }
.loc-ctx-link-arr { margin-left: auto; color: var(--gray-300); }

/* Loraa orb (logo) */
.loc-orb { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.9); flex-shrink: 0; }
.loc-orb img { width: 78%; height: 78%; object-fit: contain; }
.loc-orb.sm { width: 30px; height: 30px; }
.loc-orb.xs { width: 26px; height: 26px; }
.loc-side .loc-orb { background: rgba(255,255,255,.14); }

/* ─────────── Dark mode ─────────── */
.app[data-theme="dark"] .loc-modal { background: rgba(22,24,22,.94); border-color: rgba(120,132,205,.16); color: #E7ECEA; }
.app[data-theme="dark"] .loc-main { background: rgba(30,32,30,.4); }
.app[data-theme="dark"] .loc-head, .app[data-theme="dark"] .loc-foot { border-color: rgba(120,132,205,.14); background: transparent; }
.app[data-theme="dark"] .loc-head-title strong, .app[data-theme="dark"] .loc-exec-top h2, .app[data-theme="dark"] .loc-tile-v, .app[data-theme="dark"] .loc-card-top strong, .app[data-theme="dark"] .loc-ctx-v { color: #F5F5F5; }
.app[data-theme="dark"] .loc-tile, .app[data-theme="dark"] .loc-card, .app[data-theme="dark"] .loc-gauge, .app[data-theme="dark"] .loc-rec, .app[data-theme="dark"] .loc-ctx-metric, .app[data-theme="dark"] .loc-ctx-link { background: rgba(38,40,38,.7); border-color: rgba(120,132,205,.16); }
.app[data-theme="dark"] .loc-icbtn:hover { background: rgba(255,255,255,.08); color: #F5F5F5; }
.app[data-theme="dark"] .loc-ctx { background: rgba(26,28,26,.5); border-color: rgba(120,132,205,.14); }
.app[data-theme="dark"] .loc-input, .app[data-theme="dark"] .loc-slash, .app[data-theme="dark"] .loc-msg.loraa .loc-bubble { background: rgba(38,40,38,.9); border-color: rgba(120,132,205,.18); }
.app[data-theme="dark"] .loc-chat { background: linear-gradient(180deg, rgba(30,32,30,.99), rgba(26,28,26,.99)); border-color: rgba(120,132,205,.16); }
.app[data-theme="dark"] .loc-chat-head, .app[data-theme="dark"] .loc-chat-foot { border-color: rgba(120,132,205,.14); background: transparent; }
.app[data-theme="dark"] .loc-chat-head-t strong, .app[data-theme="dark"] .loc-chat-empty h3 { color: #F5F5F5; }
.app[data-theme="dark"] .loc-input input { color: #F5F5F5; }
.app[data-theme="dark"] .loc-chip { background: rgba(255,255,255,.08); color: #c7d0cb; }

/* ─────────── Agent: provider chip + popover ─────────── */
.loc-prov-wrap { position: relative; }
.loc-prov-label { display: none; }
.loc-prov { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: 9px; border: 1px solid rgba(15,40,24,.12); background: #fff; cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--gray-700); transition: border-color .15s, background .15s; }
.loc-prov:hover { border-color: var(--loraa-solid); }
.loc-prov.on { border-color: var(--loraa-solid); color: var(--loraa-deep); background: rgba(61,111,242,.06); }
.loc-prov-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-300); }
.loc-prov-dot.ready { background: #2F9E63; box-shadow: 0 0 0 3px rgba(47,158,99,.16); }
.loc-prov-pop { position: absolute; top: 38px; right: 0; width: min(330px, calc(100cqw - 20px)); z-index: 40; background: #fff; border: 1px solid rgba(15,40,24,.12); border-radius: 16px; box-shadow: 0 20px 50px rgba(15,30,60,.22); padding: 15px; animation: locPop .16s ease; }
@keyframes locPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.loc-prov-pop-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.loc-prov-pop-title > span:last-child { display: flex; flex-direction: column; }
.loc-prov-pop-title small { margin-top: 2px; color: var(--gray-500); font-size: 10.5px; }
.loc-prov-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: var(--loraa-grad); color: #fff; box-shadow: 0 7px 16px rgba(61,111,242,.22); }
.loc-prov-pop-h { font-size: 13px; font-weight: 800; color: var(--gray-900); }
.loc-prov-pop-sub { font-size: 11.5px; color: var(--gray-500); line-height: 1.5; margin: 4px 0 12px; }
.loc-prov-status { display: flex; align-items: center; gap: 9px; padding: 10px 11px; margin-bottom: 9px; border-radius: 11px; border: 1px solid; }
.loc-prov-status > i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; }
.loc-prov-status > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.loc-prov-status strong { font-size: 11.5px; color: var(--gray-900); }
.loc-prov-status small { font-size: 10px; color: var(--gray-500); overflow-wrap: anywhere; }
.loc-prov-status.connected { background: rgba(47,158,99,.07); border-color: rgba(47,158,99,.2); }
.loc-prov-status.connected > i { background: #2F9E63; box-shadow: 0 0 0 4px rgba(47,158,99,.12); }
.loc-prov-status.setup { background: rgba(224,150,60,.08); border-color: rgba(224,150,60,.24); }
.loc-prov-status.setup > i { background: #E0963C; box-shadow: 0 0 0 4px rgba(224,150,60,.12); }
.loc-prov-security { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--gray-600); font-size: 10.5px; line-height: 1.35; }
.loc-prov-security svg { color: #2F9E63; flex: 0 0 auto; }
.loc-prov-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 10px; }
.loc-prov-meta span { display: flex; flex-direction: column; gap: 1px; padding: 7px 5px; border-radius: 9px; text-align: center; background: rgba(15,40,24,.035); color: var(--gray-500); font-size: 9px; }
.loc-prov-meta strong { color: var(--gray-800); font-size: 10.5px; }
.loc-prov-opt { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px; border-radius: 10px; border: 1.5px solid rgba(15,40,24,.1); background: #fff; cursor: pointer; margin-bottom: 8px; color: var(--gray-700); transition: border-color .14s, background .14s; }
.loc-prov-opt:hover { border-color: rgba(61,111,242,.5); }
.loc-prov-opt.on { border-color: var(--loraa-solid); background: rgba(61,111,242,.05); }
.loc-prov-opt:disabled { cursor: not-allowed; opacity: .54; }
.loc-prov-opt span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.loc-prov-opt strong { font-size: 12.5px; color: var(--gray-900); }
.loc-prov-opt small { font-size: 10.5px; color: var(--gray-500); }
.loc-prov-check { color: var(--loraa-solid); flex-shrink: 0; }
.loc-prov-form { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 12px; }
.loc-prov-form label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); margin-top: 6px; }
.loc-prov-form input, .loc-prov-form select { height: 34px; border: 1px solid rgba(15,40,24,.14); border-radius: 8px; padding: 0 10px; font-size: 12.5px; color: var(--gray-800); background: #fff; }
.loc-prov-form input:focus, .loc-prov-form select:focus { outline: none; border-color: var(--loraa-solid); }
.loc-prov-note { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--gray-400); margin-top: 8px; }
.loc-prov-connect { width: 100%; height: 38px; border: 0; border-radius: 10px; background: var(--loraa-grad); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: opacity .15s, transform .15s; }
.loc-prov-connect:hover:not(:disabled) { transform: translateY(-1px); }
.loc-prov-connect:disabled { opacity: .45; cursor: default; }
.loc-prov-refresh { width: 100%; height: 35px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(15,40,24,.12); border-radius: 9px; background: #fff; color: var(--gray-700); font-size: 11px; font-weight: 700; cursor: pointer; }
.loc-prov-refresh:hover:not(:disabled) { border-color: var(--loraa-solid); color: var(--loraa-deep); }
.loc-prov-refresh:disabled { opacity: .6; cursor: progress; }

/* ─────────── Agent: live monitor + learning (context panel) ─────────── */
.loc-ctx-live { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: #2F9E63; font-weight: 800; }
.loc-ctx-live i { width: 6px; height: 6px; border-radius: 50%; background: #2F9E63; animation: locBlink 1.4s ease-in-out infinite; }
.loc-ctx-crawl { display: flex; flex-direction: column; gap: 7px; }
.loc-crawl-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-700); padding: 10px 12px; border-radius: 13px; background: #fff; border: 1px solid rgba(15,40,24,.09); box-shadow: 0 1px 2px rgba(15,30,60,.03); }
.loc-crawl-row svg { color: var(--loraa-solid); }
.loc-crawl-stats { display: flex; gap: 8px; padding: 2px 0; }
.loc-crawl-stats span { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: var(--gray-500); padding: 11px; border-radius: 12px; background: #fff; border: 1px solid rgba(15,40,24,.09); box-shadow: 0 1px 2px rgba(15,30,60,.03); overflow: visible; line-height: 1.2; }
.loc-crawl-stats strong { display: block; font-size: 17px; font-weight: 800; color: var(--gray-900); line-height: 1.15; }
.loc-crawl-obs { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border-radius: 13px; border: 1px solid rgba(15,40,24,.09); background: #fff; box-shadow: 0 1px 2px rgba(15,30,60,.03); cursor: pointer; text-align: left; width: 100%; transition: background .12s; }
.loc-crawl-obs:hover { border-color: rgba(61,111,242,.32); box-shadow: 0 6px 16px -8px rgba(15,30,60,.18); transform: translateY(-1px); }
.loc-crawl-sources { display: flex; flex-wrap: wrap; gap: 5px; }
.loc-crawl-sources span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid rgba(15,40,24,.08); border-radius: 999px; background: #fff; color: var(--gray-600); font-size: 9px; font-weight: 700; }
.loc-crawl-sources i { width: 5px; height: 5px; border-radius: 50%; background: #2F9E63; box-shadow: 0 0 0 3px rgba(47,158,99,.1); }
.loc-crawl-sources b { color: var(--gray-900); font-size: 9px; }
.loc-daily-brief-btn { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 0; border-radius: 10px; background: var(--loraa-grad); color: #fff; font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 20px -15px rgba(61,111,242,.9); }
.loc-daily-brief-btn svg:last-child { margin-left: auto; }
.loc-daily-brief-btn:hover { transform: translateY(-1px); }
.loc-learn-bar { height: 6px; border-radius: 6px; background: rgba(15,40,24,.08); overflow: hidden; }
.loc-learn-bar span { display: block; height: 100%; border-radius: 6px; background: var(--loraa-grad); transition: width .6s cubic-bezier(.22,1,.36,1); }
.loc-learn-sub { font-size: 11px; color: var(--gray-500); margin-top: 7px; line-height: 1.4; }
.loc-learn-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.loc-learn-tag { font-size: 10.5px; font-weight: 700; color: var(--loraa-deep); background: rgba(61,111,242,.09); border-radius: 6px; padding: 3px 8px; }
.loc-ctx-facts { display: flex; flex-direction: column; gap: 5px; }
.loc-fact { display: flex; align-items: flex-start; gap: 8px; padding: 8px 9px; border-radius: 9px; background: rgba(61,111,242,.05); border: 1px solid rgba(61,111,242,.12); }
.loc-fact svg:first-child { color: var(--loraa-solid); flex-shrink: 0; margin-top: 1px; }
.loc-fact span { flex: 1; font-size: 11.5px; color: var(--gray-700); line-height: 1.4; }
.loc-fact-x { flex-shrink: 0; border: 0; background: transparent; color: var(--gray-400); cursor: pointer; padding: 1px; border-radius: 5px; }
.loc-fact-x:hover { color: #E45858; background: rgba(228,88,88,.1); }

.app[data-theme="dark"] .loc-prov, .app[data-theme="dark"] .loc-prov-pop, .app[data-theme="dark"] .loc-prov-opt, .app[data-theme="dark"] .loc-prov-refresh, .app[data-theme="dark"] .loc-prov-form input, .app[data-theme="dark"] .loc-prov-form select { background: #1e201e; border-color: rgba(120,132,205,.18); color: #E5E5E5; }
.app[data-theme="dark"] .loc-prov-pop-h, .app[data-theme="dark"] .loc-prov-opt strong, .app[data-theme="dark"] .loc-prov-status strong, .app[data-theme="dark"] .loc-prov-meta strong, .app[data-theme="dark"] .loc-crawl-stats strong { color: #F5F5F5; }
.app[data-theme="dark"] .loc-ai-boundary, .app[data-theme="dark"] .loc-prov-meta span { background: rgba(255,255,255,.05); }

/* ─────────── Enterprise structured answer (inside chat bubble) ─────────── */
.loc-rich { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.loc-rich-head { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 800; color: var(--loraa-deep); letter-spacing: -.01em; }
.loc-rich-head svg { color: var(--loraa-solid); }
.loc-rich-sec { display: flex; flex-direction: column; gap: 6px; }
.loc-rich-lbl { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-400); }
.loc-rich-sum { font-size: 13px; line-height: 1.55; color: var(--gray-800); margin: 0; font-weight: 500; }
.loc-rich-p { font-size: 12.5px; line-height: 1.55; color: var(--gray-600); margin: 0; }
.loc-rich-reveal { animation: locRichReveal .24s ease both; }
@keyframes locRichReveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.loc-rich-details { border: 1px solid rgba(15,40,24,.09); border-radius: 11px; background: rgba(15,40,24,.025); overflow: hidden; }
.loc-rich-details > summary, .loc-rich-refs > summary { display: flex; align-items: center; gap: 7px; padding: 10px 11px; list-style: none; cursor: pointer; color: var(--gray-700); user-select: none; }
.loc-rich-details > summary::-webkit-details-marker, .loc-rich-refs > summary::-webkit-details-marker { display: none; }
.loc-rich-details > summary span, .loc-rich-refs > summary span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 750; }
.loc-rich-details > summary em, .loc-rich-refs > summary em { margin-left: auto; font-size: 10.5px; font-style: normal; color: var(--gray-400); }
.loc-rich-details > summary > svg:last-child, .loc-rich-refs > summary > svg:last-child { color: var(--gray-400); transition: transform .18s ease; }
.loc-rich-details[open] > summary > svg:last-child, .loc-rich-refs[open] > summary > svg:last-child { transform: rotate(180deg); }
.loc-rich-details[open] > summary, .loc-rich-refs[open] > summary { border-bottom: 1px solid rgba(15,40,24,.08); }
.loc-rich-details[open] > summary em, .loc-rich-refs[open] > summary em { font-size: 0; }
.loc-rich-details[open] > summary em::after, .loc-rich-refs[open] > summary em::after { content: "Hide"; font-size: 10.5px; }
.loc-rich-details-body { display: flex; flex-direction: column; gap: 7px; padding: 10px 11px 12px; }
/* stats */
.loc-rich-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.loc-rich-stat { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 11px; background: rgba(61,111,242,.05); border: 1px solid rgba(61,111,242,.1); }
.loc-rich-stat strong { font-size: 18px; font-weight: 800; color: var(--gray-900); letter-spacing: -.02em; }
.loc-rich-stat span { font-size: 10.5px; color: var(--gray-500); line-height: 1.2; }
.loc-rich-stat.ok strong { color: #2F9E63; } .loc-rich-stat.ok { background: rgba(47,158,99,.06); border-color: rgba(47,158,99,.14); }
.loc-rich-stat.warn strong { color: #C77700; } .loc-rich-stat.warn { background: rgba(245,166,35,.07); border-color: rgba(245,166,35,.16); }
.loc-rich-stat.block strong { color: #D8442F; } .loc-rich-stat.block { background: rgba(216,68,47,.06); border-color: rgba(216,68,47,.14); }
/* records — clean list cards with thumb, lead line, meta chips */
.loc-rich-recs { display: flex; flex-direction: column; gap: 10px; }
.loc-rec { border: 1px solid rgba(15,40,24,.1); border-radius: 14px; padding: 13px 14px; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.loc-rec:hover { border-color: rgba(61,111,242,.35); box-shadow: 0 8px 22px rgba(15,30,60,.08); transform: translateY(-1px); }
.loc-rec.is-crit { border-left: 3px solid #E0503A; }
.loc-rec.is-warn { border-left: 3px solid #F0A82E; }
.loc-rec-main { display: flex; gap: 12px; align-items: flex-start; }
.loc-rec-thumb { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #6E86F0, #4C39E6); }
.loc-rec-thumb.ok { background: linear-gradient(135deg, #46C07E, #2F9E63); }
.loc-rec-thumb.warn { background: linear-gradient(135deg, #F5B94D, #E0902A); }
.loc-rec-thumb.block { background: linear-gradient(135deg, #F0705A, #D8442F); }
.loc-rec-head { flex: 1; min-width: 0; }
.loc-rec-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.loc-rec-title { font-size: 13.5px; font-weight: 800; color: var(--gray-900); letter-spacing: -.01em; }
.loc-rec-badge { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.loc-rec-badge.ok { color: #1E7A49; background: rgba(47,158,99,.12); }
.loc-rec-badge.warn { color: #9A5B00; background: rgba(245,166,35,.16); }
.loc-rec-badge.block { color: #B23320; background: rgba(216,68,47,.12); }
.loc-rec-badge.info { color: var(--loraa-deep); background: rgba(61,111,242,.1); }
.loc-rec-lead { font-size: 12px; color: var(--gray-600); margin-top: 3px; line-height: 1.4; }
.loc-rec-lead.block { color: #C0392B; font-weight: 600; } .loc-rec-lead.warn { color: #B7791F; font-weight: 600; }
.loc-rec-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.loc-rec-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 9px; border-radius: 8px; background: rgba(15,40,24,.045); }
.loc-rec-chip em { font-style: normal; color: var(--gray-400); font-weight: 700; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; }
.loc-rec-chip b { color: var(--gray-800); font-weight: 700; }
.loc-rec-chip b.t-ok { color: #2F9E63; } .loc-rec-chip b.t-warn { color: #C77700; } .loc-rec-chip b.t-block { color: #D8442F; } .loc-rec-chip b.t-info { color: var(--loraa-deep); }
.loc-rec-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(15,40,24,.07); }
.loc-rec-act { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 6px 11px; border-radius: 9px; border: 1px solid rgba(15,40,24,.12); background: #fff; color: var(--gray-700); cursor: pointer; transition: background .13s, border-color .13s, transform .13s, color .13s; }
.loc-rec-act:hover { border-color: rgba(61,111,242,.4); color: var(--loraa-deep); transform: translateY(-1px); }
.loc-rec-act.primary { border-color: transparent; background: var(--loraa-grad); color: #fff; }
.loc-rec-act.primary:hover { opacity: .93; color: #fff; transform: translateY(-1px); }
.loc-rec-act.primary svg { opacity: 1; }
.loc-rec-act svg { opacity: .8; }
/* risks */
.loc-rich-risks { display: flex; flex-direction: column; gap: 6px; }
.loc-risk { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--gray-700); line-height: 1.45; }
.loc-risk .loc-notif-dot { margin-top: 5px; flex-shrink: 0; }
/* recommendations list */
.loc-rich-recs-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.loc-rich-recs-list li { font-size: 12.5px; line-height: 1.5; color: var(--gray-700); }
/* permission note */
.loc-rich-perm { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #9A5B00; background: rgba(245,166,35,.08); border: 1px solid rgba(245,166,35,.18); border-radius: 9px; padding: 8px 10px; }
/* references */
.loc-rich-refs { border: 1px solid rgba(15,40,24,.09); border-radius: 11px; background: rgba(15,40,24,.025); overflow: hidden; }
.loc-rich-refs-body { display: flex; flex-direction: column; gap: 7px; padding: 10px 11px 12px; }
.loc-ref-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.loc-ref-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-400); margin-right: 2px; }
.loc-ref-chip { font-size: 10.5px; font-weight: 600; color: var(--gray-600); background: #fff; border: 1px solid rgba(15,40,24,.12); border-radius: 6px; padding: 2px 7px; }
.loc-ref-chip.ext { color: var(--loraa-deep); border-color: rgba(61,111,242,.25); background: rgba(61,111,242,.05); }
/* confidence */
.loc-rich-conf { display: flex; flex-direction: column; gap: 5px; padding: 10px 11px; border-radius: 11px; background: rgba(61,111,242,.05); border: 1px solid rgba(61,111,242,.1); }
.loc-conf-top { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--gray-600); }
.loc-conf-top strong { font-size: 15px; font-weight: 800; color: var(--loraa-deep); }
.loc-conf-bar { height: 6px; border-radius: 6px; background: rgba(61,111,242,.14); overflow: hidden; }
.loc-conf-bar span { display: block; height: 100%; border-radius: 6px; background: var(--loraa-grad); transition: width .7s cubic-bezier(.22,1,.36,1); }
.loc-conf-basis { font-size: 10.5px; color: var(--gray-500); }
/* final CTAs */
.loc-rich-cta { display: flex; flex-wrap: wrap; gap: 7px; }
.loc-rich-cta-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 8px 12px; border-radius: 10px; border: 0; background: var(--loraa-grad); color: #fff; cursor: pointer; transition: transform .14s, opacity .14s; }
.loc-rich-cta-btn:hover { transform: translateY(-1px); opacity: .95; }

.app[data-theme="dark"] .loc-rec, .app[data-theme="dark"] .loc-ref-chip { background: #1e201e; border-color: rgba(120,132,205,.16); }
.app[data-theme="dark"] .loc-rec-title, .app[data-theme="dark"] .loc-rich-stat strong, .app[data-theme="dark"] .loc-rich-sum { color: #F5F5F5; }
.app[data-theme="dark"] .loc-rich-refs, .app[data-theme="dark"] .loc-rich-details { background: rgba(255,255,255,.03); border-color: rgba(120,132,205,.15); }

/* ─────────── Chat: rich answers full-width, typewriter, thinking, expand ─────────── */
/* Structured answers need the whole column — the 74% cap caused field overlap. */
.loc-msg.loraa .loc-bubble:has(.loc-rich) { max-width: 100%; width: 100%; }
.loc-chat.expanded .loc-rich-recs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Follow-up question chips */
.loc-rich-follow { margin-top: 4px; padding-top: 13px; border-top: 1px solid rgba(15,40,24,.08); }
.loc-follow-lbl { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 9px; }
.loc-follow-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.loc-follow-chip { font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(61,111,242,.25); background: rgba(61,111,242,.04); color: var(--loraa-deep); cursor: pointer; font-family: inherit; transition: background .14s, transform .14s, border-color .14s; }
.loc-follow-chip:hover { background: rgba(61,111,242,.11); transform: translateY(-1px); border-color: rgba(61,111,242,.5); }
.app[data-theme="dark"] .loc-follow-chip { background: rgba(120,140,240,.08); color: #9db4ff; }

/* Left-panel empty state (no conversation history yet) */
.loc-ws-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 18px; color: rgba(255,255,255,.5); }
.loc-ws-empty svg { color: rgba(255,255,255,.35); margin-bottom: 2px; }
.loc-ws-empty p { margin: 0; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.72); }
.loc-ws-empty span { font-size: 11.5px; line-height: 1.45; }

/* Fix flow: manual entry + fallback confidence */
.loc-fix-manual-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 9px; border: 1px dashed rgba(61,111,242,.4); background: transparent; color: var(--loraa-deep); cursor: pointer; }
.loc-fix-manual-toggle:hover { background: rgba(61,111,242,.06); }
.loc-fix-manual { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.loc-fix-manual-in { flex: 1; min-width: 180px; height: 36px; border: 1px solid rgba(15,40,24,.16); border-radius: 9px; padding: 0 12px; font-size: 13px; font-family: inherit; }
.loc-fix-manual-in:focus { outline: none; border-color: var(--loraa-solid); }
.loc-fix-manual-go { height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--loraa-grad); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.loc-fix-manual-go:disabled { opacity: .5; cursor: default; }
.loc-fix-manual-note { width: 100%; display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--gray-500); }
.loc-fix-conf { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.loc-fix-conf-bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(15,40,24,.09); overflow: hidden; max-width: 200px; }
.loc-fix-conf-bar i { display: block; height: 100%; border-radius: 999px; }
.loc-fix-conf.ok .loc-fix-conf-bar i { background: #2F9E63; } .loc-fix-conf.warn .loc-fix-conf-bar i { background: #E0902A; } .loc-fix-conf.low .loc-fix-conf-bar i { background: #E0503A; }
.loc-fix-conf-tx { font-size: 11.5px; font-weight: 800; color: var(--gray-600); }

/* Proactive learning suggestion — Loraa offers to automate a pattern */
.loc-learn-sug { display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(100deg, rgba(53,176,255,.1), rgba(76,57,230,.08)); border: 1px solid rgba(61,111,242,.22); }
.loc-learn-sug-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--loraa-grad); color: #fff; }
.loc-learn-sug-tx { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--gray-800); font-weight: 500; }
.loc-learn-sug-actions { flex-shrink: 0; display: flex; gap: 7px; }
.loc-learn-yes { font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 9px; border: 0; background: var(--loraa-grad); color: #fff; cursor: pointer; transition: transform .14s, opacity .14s; }
.loc-learn-yes:hover { transform: translateY(-1px); opacity: .95; }
.loc-learn-no { font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 9px; border: 1px solid rgba(15,40,24,.14); background: transparent; color: var(--gray-600); cursor: pointer; }
.loc-learn-no:hover { background: rgba(15,40,24,.05); }
@media (max-width: 640px) { .loc-learn-sug { flex-wrap: wrap; } .loc-learn-sug-actions { width: 100%; } }
.loc-text-conf { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-400); }
.loc-tc-bar { display: inline-block; width: 70px; height: 5px; border-radius: 5px; background: rgba(61,111,242,.15); overflow: hidden; }
.loc-tc-bar i { display: block; height: 100%; border-radius: 5px; background: var(--loraa-grad); }

/* ─────────── Interactive Fix-Findings flow ─────────── */
.loc-fix { display: flex; flex-direction: column; gap: 12px; min-width: 300px; }
.loc-fix { position: relative; display: flex; flex-direction: column; gap: 13px; padding: 15px; overflow: hidden; border: 1px solid rgba(61,111,242,.14); border-radius: 17px; background: linear-gradient(145deg, #fff, #F4F7FF); box-shadow: 0 18px 42px -30px rgba(43,57,132,.56); }
.loc-fix::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--loraa-grad); }
.loc-fix-head { display: flex; align-items: flex-start; gap: 10px; }
.loc-fix-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #6E86F0, #4C39E6); }
.loc-fix-head > div { flex: 1; min-width: 0; }
.loc-fix-title { font-size: 13.5px; font-weight: 800; color: var(--gray-900); letter-spacing: -.01em; }
.loc-fix-sub { font-size: 11.5px; color: #C0392B; font-weight: 600; margin-top: 2px; }
.loc-fix-step { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--loraa-deep); background: rgba(61,111,242,.09); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.loc-fix-note { font-size: 12.5px; line-height: 1.5; color: var(--gray-700); margin: 0; }
.loc-fix-opts { display: flex; flex-direction: column; gap: 8px; }
.loc-fix-opt { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 12px; border: 1px solid rgba(15,40,24,.12); background: #fff; cursor: pointer; text-align: left; transition: border-color .14s, box-shadow .14s, transform .14s; }
.loc-fix-opt:hover { border-color: var(--loraa-solid); box-shadow: 0 6px 16px rgba(61,111,242,.12); transform: translateY(-1px); }
.loc-fix-opt-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(61,111,242,.09); color: var(--loraa-deep); }
.loc-fix-opt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.loc-fix-opt-body b { font-size: 12.5px; font-weight: 700; color: var(--gray-900); }
.loc-fix-opt-body em { font-style: normal; font-size: 11px; color: var(--gray-500); line-height: 1.35; }
.loc-fix-opt-arr { color: var(--gray-300); flex-shrink: 0; }
.loc-fix-q { font-size: 12.5px; font-weight: 700; color: var(--gray-800); margin-bottom: 9px; }
.loc-fix-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.loc-fix-choice { font-size: 12px; font-weight: 600; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(61,111,242,.3); background: rgba(61,111,242,.05); color: var(--loraa-deep); cursor: pointer; transition: background .13s, transform .13s; }
.loc-fix-choice:hover { background: rgba(61,111,242,.13); transform: translateY(-1px); }
.loc-fix-diff { border: 1px solid rgba(15,40,24,.1); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.8); }
.loc-fix-diff-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; font-size: 12.5px; }
.loc-fix-diff-row + .loc-fix-diff-row { border-top: 1px solid rgba(15,40,24,.08); }
.loc-fix-diff-lbl { flex-shrink: 0; width: 66px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-400); padding-top: 1px; }
.loc-fix-was { color: #B23320; text-decoration: line-through; text-decoration-color: rgba(178,51,32,.5); }
.loc-fix-now { color: #1E7A49; font-weight: 600; }
.loc-fix-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.loc-fix-apply { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 9px 16px; border-radius: 10px; border: 0; background: linear-gradient(135deg, #35B0FF, #4C39E6); color: #fff; cursor: pointer; transition: transform .14s, opacity .14s; }
.loc-fix-apply:hover { transform: translateY(-1px); opacity: .95; }
.loc-fix-cancel, .loc-fix-open { font-size: 12px; font-weight: 700; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(15,40,24,.14); background: #fff; color: var(--gray-700); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.loc-fix-cancel:hover, .loc-fix-open:hover { border-color: var(--loraa-solid); color: var(--loraa-deep); }
.loc-fix-done { display: flex; flex-direction: column; gap: 8px; }
.loc-fix-done-badge { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 12.5px; font-weight: 800; color: #294FC2; background: rgba(61,111,242,.11); padding: 7px 13px; border-radius: 999px; }
.loc-fix-done p { font-size: 12.5px; line-height: 1.5; color: var(--gray-700); margin: 0; }
.app[data-theme="dark"] .loc-fix-opt, .app[data-theme="dark"] .loc-fix-diff { background: #1e201e; border-color: rgba(120,132,205,.18); }
.app[data-theme="dark"] .loc-fix-title, .app[data-theme="dark"] .loc-fix-opt-body b { color: #F5F5F5; }

/* Human intro line above a structured report */
.loc-rich-intro { font-size: 13.5px; line-height: 1.6; color: var(--gray-800); margin: 0 0 2px; font-weight: 500; }

/* Typewriter caret */
.loc-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: text-bottom; background: var(--loraa-solid); border-radius: 1px; animation: locCaret .8s step-end infinite; }
@keyframes locCaret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
/* Word-by-word soft reveal */
.loc-word-in { animation: locWordIn .32s ease both; }
@keyframes locWordIn { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: blur(0); } }
/* Structured answer builds in, section by section */
.loc-rich > * { animation: locSecIn .5s cubic-bezier(.22,1,.36,1) both; }
.loc-rich > *:nth-child(1){animation-delay:.02s} .loc-rich > *:nth-child(2){animation-delay:.14s}
.loc-rich > *:nth-child(3){animation-delay:.26s} .loc-rich > *:nth-child(4){animation-delay:.38s}
.loc-rich > *:nth-child(5){animation-delay:.5s} .loc-rich > *:nth-child(6){animation-delay:.62s}
.loc-rich > *:nth-child(7){animation-delay:.74s} .loc-rich > *:nth-child(8){animation-delay:.86s}
.loc-rich > *:nth-child(9){animation-delay:.98s} .loc-rich > *:nth-child(n+10){animation-delay:1.1s}
@keyframes locSecIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .loc-rich > *, .loc-word-in { animation: none !important; } }

/* Thinking bubble */
.loc-think { display: flex; flex-direction: column; gap: 9px; min-width: 220px; }
.loc-think-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--loraa-deep); }
.loc-think-orb { display: inline-flex; gap: 3px; }
.loc-think-orb i { width: 5px; height: 5px; border-radius: 50%; background: var(--loraa-solid); animation: locBlink 1.1s ease-in-out infinite; }
.loc-think-orb i:nth-child(2){ animation-delay:.15s; } .loc-think-orb i:nth-child(3){ animation-delay:.3s; }
.loc-think-steps { display: flex; flex-direction: column; gap: 6px; }
.loc-think-step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-500); animation: locStepIn .28s ease; }
.loc-think-step.active { color: var(--gray-800); font-weight: 600; }
.loc-think-step.done { color: var(--gray-500); }
@keyframes locStepIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.loc-think-ic { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; color: #2F9E63; }
.loc-think-step.done .loc-think-ic { background: rgba(47,158,99,.14); }
.loc-think-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(61,111,242,.25); border-top-color: var(--loraa-solid); animation: locSpin .7s linear infinite; }
@keyframes locSpin { to { transform: rotate(360deg); } }

/* Chat header tools + expand */
.loc-chat-head-tools { display: flex; align-items: center; gap: 2px; }
.loc-chat { transition: opacity .28s ease; }
.app[data-theme="dark"] .loc-think-head { color: #9db4ff; }
.app[data-theme="dark"] .loc-think-step.active { color: #F5F5F5; }

/* Expanded: the answer board takes the dashboard's room inside the same fixed
   frame. One rule covers every case -- --loc-side-w already carries whatever
   the sidebar toggle and the breakpoints below decided, and zeroing the context
   width makes that rail shed its padding along with its track. */
.loc-modal.chat-open:has(.loc-chat.expanded) { --loc-ctx-w: 0px; grid-template-columns: var(--loc-side-w) minmax(0, 1fr) 0 0; }
.loc-chat.expanded .loc-chat-body { padding: 22px clamp(20px, 6%, 80px); }
.loc-chat.expanded .loc-thread { max-width: 900px; margin: 0 auto; }
.loc-chat.expanded .loc-msg.loraa .loc-bubble:has(.loc-rich) { max-width: 100%; }

/* Chat answer text: render OpenAI markdown cleanly (bold + line breaks, no raw **) */
.loc-mdtext { white-space: pre-wrap; word-break: break-word; }
.loc-mdtext strong { font-weight: 700; }

/* ─────────── Premium agent receipt ─────────── */
.loc-agent-receipt {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px;
  border: 1px solid rgba(61,111,242,.13); border-radius: 11px;
  background: linear-gradient(100deg, rgba(53,176,255,.055), rgba(76,57,230,.045));
}
.loc-agent-receipt span {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px;
  border-radius: 7px; background: rgba(255,255,255,.72);
  color: var(--gray-600); font-size: 10px; font-weight: 750;
}
.loc-agent-receipt svg { color: var(--loraa-solid); }

/* ─────────── In-agent NutriDMS workspace ─────────── */
.loc-msg.loraa .loc-bubble:has(.loc-workspace) { width: 100%; max-width: 100%; }
.loc-workspace {
  min-width: 0; display: flex; flex-direction: column; gap: 13px;
  padding: 2px; animation: locSecIn .36s cubic-bezier(.22,1,.36,1);
}
.loc-workspace-head { display: grid; grid-template-columns: 40px minmax(0,1fr) 30px; align-items: flex-start; gap: 11px; }
.loc-workspace-icon {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  color: #fff; background: var(--loraa-grad); box-shadow: 0 10px 20px -12px rgba(61,111,242,.8);
}
.loc-workspace-head h4 { margin: 1px 0 3px; color: var(--gray-900); font-size: 16px; letter-spacing: -.015em; }
.loc-workspace-head p { margin: 0; color: var(--gray-500); font-size: 11.5px; line-height: 1.45; }
.loc-workspace-kicker { color: var(--loraa-deep); font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.loc-workspace-close { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(15,40,24,.1); border-radius: 9px; background: #fff; color: var(--gray-500); cursor: pointer; }
.loc-workspace-close:hover { border-color: rgba(61,111,242,.4); color: var(--loraa-deep); }
.loc-workspace-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px,1fr)); gap: 7px; }
.loc-workspace-metric { position: relative; overflow: hidden; padding: 10px 11px; border: 1px solid rgba(15,40,24,.085); border-radius: 11px; background: #fff; }
.loc-workspace-metric::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #3D6FF2; }
.loc-workspace-metric.ok::before { background: #2F9E63; }
.loc-workspace-metric.warn::before { background: #E8A029; }
.loc-workspace-metric.block::before { background: #E0503A; }
.loc-workspace-metric strong { display: block; color: var(--gray-900); font-size: 18px; line-height: 1; }
.loc-workspace-metric span { display: block; margin-top: 4px; color: var(--gray-500); font-size: 10px; font-weight: 650; }
.loc-workspace-list { display: flex; flex-direction: column; gap: 7px; }
.loc-workspace-row {
  width: 100%; display: grid; grid-template-columns: 8px minmax(0,1fr) auto auto; align-items: center; gap: 10px;
  padding: 10px 11px; border: 1px solid rgba(15,40,24,.09); border-radius: 11px;
  background: #fff; text-align: left; transition: border-color .14s, box-shadow .14s, transform .14s;
}
.loc-workspace-row:hover { border-color: rgba(61,111,242,.34); box-shadow: 0 8px 20px -13px rgba(34,52,118,.4); transform: translateY(-1px); }
.loc-workspace-row-main { min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.loc-workspace-row strong { display: block; color: var(--gray-850, #18241d); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-workspace-row small { display: block; margin-top: 2px; color: var(--gray-500); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-workspace-row em { padding: 3px 7px; border-radius: 999px; background: rgba(61,111,242,.08); color: var(--loraa-deep); font-size: 9.5px; font-style: normal; font-weight: 800; white-space: nowrap; }
.loc-workspace-row em.ok { background: rgba(47,158,99,.1); color: #1E7A49; }
.loc-workspace-row em.warn { background: rgba(240,168,46,.14); color: #9A5B00; }
.loc-workspace-row em.block { background: rgba(224,80,58,.1); color: #B23320; }
.loc-workspace-row > svg { color: var(--gray-300); }
.loc-workspace-review-actions { display: inline-flex; align-items: center; gap: 5px; }
.loc-workspace-review-actions button { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 8px; border: 1px solid rgba(61,111,242,.18); border-radius: 8px; background: #fff; color: var(--gray-700); font-size: 9.5px; font-weight: 800; cursor: pointer; }
.loc-workspace-review-actions button.approve { border-color: rgba(47,158,99,.22); background: rgba(47,158,99,.08); color: #1E7A49; }
.loc-workspace-review-actions button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 12px -8px rgba(34,52,118,.5); }
.loc-workspace-review-actions button:disabled { opacity: .55; cursor: wait; }
.loc-workspace-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px; border: 1px dashed rgba(15,40,24,.14); border-radius: 12px; text-align: center; }
.loc-workspace-empty svg { color: #2F9E63; }
.loc-workspace-empty strong { font-size: 12px; color: var(--gray-800); }
.loc-workspace-empty span { font-size: 10.5px; color: var(--gray-500); }
.loc-workspace-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.loc-workspace-actions button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 35px; padding: 0 12px;
  border: 1px solid rgba(15,40,24,.12); border-radius: 9px; background: #fff;
  color: var(--gray-700); font-size: 11.5px; font-weight: 750; cursor: pointer;
}
.loc-workspace-actions button:hover { border-color: rgba(61,111,242,.4); color: var(--loraa-deep); }
.loc-workspace-actions button.primary { border-color: transparent; background: var(--loraa-grad); color: #fff; }

/* ─────────── Explainable personalization ─────────── */
.loc-ctx-learn { padding: 12px; border: 1px solid rgba(61,111,242,.14); border-radius: 14px; background: linear-gradient(145deg, #fff, rgba(238,243,255,.72)); }
.loc-learn-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.loc-learn-top > span { min-width: 0; display: flex; flex-direction: column; }
.loc-learn-top b { color: var(--loraa-deep); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.loc-learn-top strong { color: var(--gray-900); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-learn-top em { color: var(--loraa-deep); font-size: 17px; font-style: normal; font-weight: 850; }
.loc-learn-explain {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding: 7px 0 0; border: 0; border-top: 1px solid rgba(61,111,242,.1);
  background: transparent; color: var(--loraa-deep); font-size: 10.5px; font-weight: 750; cursor: pointer;
}
.loc-learn-details { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(61,111,242,.1); }
.loc-learn-details > p { margin: 0; color: var(--gray-600); font-size: 10.5px; line-height: 1.4; }
.loc-learn-components { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.loc-learn-components span { display: flex; flex-direction: column; padding: 7px; border: 1px solid rgba(15,40,24,.07); border-radius: 8px; background: rgba(255,255,255,.8); }
.loc-learn-components em { color: var(--gray-500); font-size: 8.5px; font-style: normal; line-height: 1.2; }
.loc-learn-components b { margin-top: 2px; color: var(--gray-800); font-size: 10.5px; }
.loc-learn-signals { display: flex; flex-direction: column; gap: 4px; }
.loc-learn-signals span { display: flex; align-items: center; gap: 5px; color: var(--gray-600); font-size: 9.5px; }
.loc-learn-signals svg { color: #2F9E63; }
.loc-learn-controls { display: flex; gap: 6px; }
.loc-learn-controls button { flex: 1; min-height: 30px; border: 1px solid rgba(15,40,24,.1); border-radius: 8px; background: #fff; color: var(--gray-600); font-size: 9.5px; font-weight: 750; cursor: pointer; }
.loc-learn-controls button:hover { border-color: rgba(61,111,242,.35); color: var(--loraa-deep); }

.app[data-theme="dark"] .loc-workspace-metric,
.app[data-theme="dark"] .loc-workspace-row,
.app[data-theme="dark"] .loc-workspace-close,
.app[data-theme="dark"] .loc-workspace-actions button,
.app[data-theme="dark"] .loc-ctx-learn,
.app[data-theme="dark"] .loc-learn-components span,
.app[data-theme="dark"] .loc-learn-controls button,
.app[data-theme="dark"] .loc-agent-receipt span { background: #1e201e; border-color: rgba(120,132,205,.18); }
.app[data-theme="dark"] .loc-workspace-head h4,
.app[data-theme="dark"] .loc-workspace-metric strong,
.app[data-theme="dark"] .loc-workspace-row strong,
.app[data-theme="dark"] .loc-learn-top strong { color: #f5f5f5; }

/* ─────────── Squeezed section ───────────
   Below the section's fixed width the column *is* the section, so measuring the
   column measures the section. Only the tightest combinations reach here. */
@container locmain (max-width: 460px) {
  .loc-body { padding: 18px 16px; }
  .loc-exec-top h2 { font-size: 20px; }
  .loc-gauges { flex-wrap: wrap; }
  .loc-gauge { flex: 1 1 40%; }
  .loc-prov > svg { display: none; }
  .loc-recs .loc-rec { flex: 1 1 100%; justify-content: flex-start; }
  .loc-card { padding: 12px; gap: 10px; }
}

/* ─────────── Responsive ─────────── */
/* Progressive collapse: the context rail folds away first, then the history
   rail. The grid already guarantees the section its width, so these exist to
   keep a rail from thinning to a stub on the way there -- each threshold is the
   width below which that rail can no longer be full-size beside the section.
   They only zero a panel width, so they hold for every toggle combination; the
   two-track overrides they replace lost to the more specific toggle rules, and
   when they did win they dropped the dashboard onto a second implicit row
   beside the sidebar. */
@media (max-width: 1640px) { .loc-modal.chat-open { --loc-ctx-w: 0px; } }
@media (max-width: 1264px) { .loc-modal.chat-open { --loc-side-w: 0px; } }
@media (max-width: 1160px) { .loc-modal { --loc-ctx-w: 0px; } }
@media (max-width: 920px) { .loc-modal { --loc-side-w: 0px; } }
/* Too narrow to show the answer board beside the section: chat takes the whole
   modal rather than splitting it into two unusable halves. */
@media (max-width: 1040px) { .loc-modal.chat-open { grid-template-columns: 0 minmax(0, 1fr) 0 0; } }
@media (max-width: 760px) {
  .loc-modal { --loc-side-w: 0px; --loc-ctx-w: 0px; --loc-modal-w: 96vw; height: 92vh; }
  .loc-workspace-metrics { grid-template-columns: repeat(2, 1fr); }
  .loc-workspace-row { grid-template-columns: 8px minmax(0,1fr) auto; }
  .loc-workspace-row em { display: none; }
  .loc-workspace-review-actions { grid-column: 2 / -1; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .loc-modal, .loc-card { animation: none; }
  .loc-side-live i, .loc-live-dot, .loc-spin { animation: none; }
}

/* Governed action review — scoped to Loraa response actions only */
.loc-action-review-wrap {
  position: absolute; z-index: 12; inset: 0; display: grid; place-items: center; padding: 24px;
  background: rgba(10,18,33,.48); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.loc-action-review { width: min(590px, 100%); overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 22px; background: #fff; box-shadow: 0 40px 100px -30px rgba(9,20,52,.72); animation: locReviewIn .25s cubic-bezier(.22,1,.36,1); }
@keyframes locReviewIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.loc-action-review-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(15,40,24,.08); background: linear-gradient(135deg, #F2F7FF, #F8F5FF); }
.loc-action-review-head > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--loraa-grad); color: #fff; }
.loc-action-review-head > div { flex: 1; }
.loc-action-review-head small { display: block; color: var(--loraa-deep); font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.loc-action-review-head h3 { margin: 3px 0 0; color: var(--gray-900); font-size: 17px; }
.loc-action-review-head > button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: rgba(15,40,24,.05); color: var(--gray-500); cursor: pointer; }
.loc-action-review-body { padding: 20px; }
.loc-action-review-body h4 { margin: 0; color: var(--gray-900); font-size: 16px; }
.loc-action-review-body > p { margin: 7px 0 16px; color: var(--gray-600); font-size: 13px; line-height: 1.55; }
.loc-action-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.loc-action-review-grid span { min-width: 0; padding: 11px 12px; border: 1px solid rgba(61,111,242,.1); border-radius: 11px; background: rgba(238,243,255,.46); }
.loc-action-review-grid small, .loc-action-review-grid strong { display: block; }
.loc-action-review-grid small { color: var(--gray-400); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.loc-action-review-grid strong { margin-top: 3px; overflow: hidden; color: var(--gray-800); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.loc-action-cron, .loc-action-boundary { display: flex; align-items: flex-start; gap: 7px; margin-top: 11px; padding: 9px 10px; border-radius: 10px; color: var(--gray-600); background: rgba(15,40,24,.035); font-size: 11px; line-height: 1.4; }
.loc-action-cron { color: var(--loraa-deep); background: rgba(61,111,242,.06); }
.loc-action-error { margin-top: 10px; padding: 9px 10px; border: 1px solid rgba(224,80,58,.18); border-radius: 9px; background: rgba(224,80,58,.06); color: #B23320; font-size: 11.5px; }
.loc-action-review-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid rgba(15,40,24,.07); }
.loc-action-review-foot button:disabled { opacity: .55; cursor: wait; }

@media (max-width: 760px) {
  .loc-action-review-grid { grid-template-columns: 1fr; }
  .loc-action-review-wrap { padding: 12px; }
}


/* Loraa continuity, attachments and registered-user messenger */
.loc-ws-h {
  display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: transparent;
  cursor: pointer; text-align: left; font-family: inherit;
}
.loc-ws-h span { flex: 1; }
.loc-ws-h em {
  min-width: 20px; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.075);
  color: #AEB3DD; font-size: 9px; font-style: normal; text-align: center; letter-spacing: 0;
}
.loc-ws-h:hover { color: #C7CBED; }
.loc-ws > .loc-ws-pin {
  display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; margin-right: 4px;
  border: 0; border-radius: 7px; background: transparent; color: #8F94C0; cursor: pointer;
}
.loc-ws > .loc-ws-pin:hover, .loc-ws > .loc-ws-pin.on { background: rgba(255,255,255,.1); color: #fff; }

.loc-input { align-items: flex-end; padding: 8px 10px; }
.loc-input textarea {
  flex: 1; min-width: 0; max-height: 132px; min-height: 34px; padding: 7px 0 5px;
  resize: none; overflow-y: auto; border: 0; outline: 0; background: transparent;
  color: var(--gray-900); font: inherit; font-size: 14px; line-height: 1.45;
}
.loc-input textarea::placeholder { color: var(--gray-400); }
.loc-file-input { display: none !important; }
.loc-attach {
  display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 10px; background: rgba(61,111,242,.07); color: var(--loraa-solid); cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.loc-attach:hover { background: rgba(61,111,242,.13); transform: translateY(-1px); }
.loc-attachment-tray { display: flex; gap: 8px; margin-bottom: 8px; overflow-x: auto; padding: 2px; }
.loc-attachment-chip {
  display: flex; align-items: center; gap: 8px; min-width: 170px; max-width: 260px; padding: 7px 8px;
  border: 1px solid rgba(61,111,242,.14); border-radius: 11px; background: rgba(238,243,255,.6); color: var(--gray-700);
}
.loc-attachment-chip > img {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px; object-fit: cover; background: #fff;
}
.loc-attachment-chip > span { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.loc-attachment-chip strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.loc-attachment-chip small { margin-top: 2px; color: var(--gray-400); font-size: 9.5px; }
.loc-attachment-chip button {
  display: grid; place-items: center; width: 23px; height: 23px; border: 0; border-radius: 7px;
  background: transparent; color: var(--gray-400); cursor: pointer;
}
.loc-attachment-chip button:hover { background: rgba(15,40,24,.06); color: var(--gray-700); }
.loc-attachment-error {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 8px 10px;
  border: 1px solid rgba(224,80,58,.16); border-radius: 9px; background: rgba(224,80,58,.055);
  color: #B23320; font-size: 11px;
}
.loc-msg-attachments { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.loc-msg-attachment {
  display: flex; align-items: center; gap: 7px; max-width: 245px; padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.25); border-radius: 9px; background: rgba(255,255,255,.12);
}
.loc-msg-attachment > img { width: 38px; height: 38px; border-radius: 7px; object-fit: cover; }
.loc-msg-attachment > span { display: flex; min-width: 0; flex-direction: column; }
.loc-msg-attachment strong { overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.loc-msg-attachment small { margin-top: 1px; font-size: 9px; opacity: .72; }
.loc-foot-note { display: flex; justify-content: space-between; gap: 12px; text-align: left; }
.loc-foot-note span:last-child { text-align: right; }

.loraa-messenger {
  position: fixed; right: 22px; bottom: 22px; z-index: 940; width: min(380px, calc(100vw - 28px));
  overflow: hidden; border: 1px solid rgba(111,119,226,.18); border-radius: 20px;
  background: rgba(255,255,255,.97); box-shadow: 0 28px 80px -24px rgba(12,20,62,.48);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  animation: loraaMessengerIn .28s cubic-bezier(.22,1,.36,1);
}
@keyframes loraaMessengerIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.loraa-messenger-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 15px 10px;
  background: linear-gradient(135deg, rgba(238,243,255,.85), rgba(248,246,255,.9));
}
.loraa-messenger-logo {
  display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 11px; background: #fff; box-shadow: 0 7px 18px rgba(61,111,242,.14);
}
.loraa-messenger-logo img { width: 24px; height: 24px; object-fit: contain; }
.loraa-messenger-head > span:nth-child(2) { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.loraa-messenger-head strong { color: var(--gray-900); font-size: 13.5px; }
.loraa-messenger-head small { margin-top: 2px; color: var(--gray-500); font-size: 10px; }
.loraa-messenger-close {
  display: grid; place-items: center; width: 29px; height: 29px; border: 0; border-radius: 9px;
  background: rgba(15,40,24,.045); color: var(--gray-500); font-size: 20px; line-height: 1; cursor: pointer;
}
.loraa-messenger-close:hover { background: rgba(15,40,24,.09); color: var(--gray-800); }
.loraa-messenger > p { margin: 0; padding: 12px 15px 13px; color: var(--gray-700); font-size: 13px; line-height: 1.55; }
.loraa-messenger-actions { display: flex; gap: 8px; padding: 0 15px 15px; }
.loraa-messenger-actions button {
  flex: 1; min-height: 38px; border: 0; border-radius: 11px; background: var(--loraa-grad);
  color: #fff; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
}
.loraa-messenger-actions button.secondary {
  flex: 0 0 auto; padding: 0 14px; border: 1px solid rgba(15,40,24,.11); background: #fff; color: var(--gray-600);
}
.loraa-messenger-actions button:hover { filter: brightness(.98); transform: translateY(-1px); }

@media (max-width: 760px) {
  .loc-foot-note { display: block; text-align: center; }
  .loc-foot-note span { display: block; }
  .loc-foot-note span:last-child { margin-top: 3px; text-align: center; }
  .loraa-messenger { right: 14px; bottom: 14px; }
}


/* Organization-level Loraa Messenger policy */
.loraa-messenger-timer {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 3px;
  transform-origin: left center;
  background: linear-gradient(90deg, #35b0ff, #4a3df0);
  animation-name: loraaMessengerCountdown;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  pointer-events: none;
}
@keyframes loraaMessengerCountdown {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.lmp-policy-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  margin: 4px 0 8px;
  padding: 18px;
  border: 1px solid rgba(61, 111, 242, .16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 4% 15%, rgba(53, 176, 255, .12), transparent 31%),
    linear-gradient(135deg, rgba(241, 246, 255, .95), rgba(247, 245, 255, .96));
}
.lmp-policy-hero.is-disabled {
  border-color: var(--gray-200);
  background: linear-gradient(135deg, var(--gray-50), #fff);
}
.lmp-policy-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(61, 111, 242, .16);
}
.lmp-policy-icon img { width: 31px; height: 31px; object-fit: contain; }
.lmp-policy-copy { min-width: 0; }
.lmp-policy-copy .lmp-policy-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #4b56d9;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.lmp-policy-copy strong {
  display: block;
  color: var(--gray-900);
  font-size: 15px;
}
.lmp-policy-copy p {
  max-width: 650px;
  margin: 5px 0 0;
  color: var(--gray-600);
  font-size: 12.5px;
  line-height: 1.5;
}
.lmp-policy-switch {
  position: relative;
  width: 48px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--gray-300);
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.lmp-policy-switch.on {
  background: linear-gradient(135deg, #27b979, #2676eb);
  box-shadow: 0 7px 18px rgba(38, 118, 235, .22);
}
.lmp-policy-switch:disabled { cursor: not-allowed; opacity: .58; }
.lmp-policy-switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(17, 24, 39, .2);
  transition: transform .18s ease;
}
.lmp-policy-switch.on span { transform: translateX(21px); }
.lmp-duration-select { min-width: 170px; }
.lmp-policy-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 12px 13px;
  border-radius: 12px;
  background: var(--gray-50);
  color: var(--gray-600);
  font-size: 12px;
  line-height: 1.45;
}
.lmp-policy-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--green-700); }
.lmp-policy-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}
.lmp-policy-actions > span { color: var(--gray-500); font-size: 12px; }
.lmp-policy-actions .btn:disabled { cursor: not-allowed; opacity: .5; }

@media (max-width: 680px) {
  .lmp-policy-hero { grid-template-columns: auto 1fr; }
  .lmp-policy-switch { grid-column: 1 / -1; justify-self: end; }
  .lmp-policy-actions { align-items: stretch; flex-direction: column; }
  .lmp-duration-select { min-width: 140px; }
}