/* MSI UX V8.5 CANONICAL — exact cascade consolidation.
   Generated from the previously loaded CSS chain in the same order.
   Do not hand-edit legacy source layers; edit the active source then regenerate. */

/* ===== SOURCE: mobile-sidebar-v2.css ===== */
/* MSI Mobile Navigation V2.4
   Structural responsive behavior only.
   Visual language comes from the same desktop/sidebar/UX layers so mobile is a mirror, not a separate product. */
@media (max-width:760px){
  html,body,#root{width:100%;max-width:100%;overflow-x:hidden}
  html.msi-mobile-nav-open,html.msi-mobile-nav-open body{overflow:hidden!important;overscroll-behavior:none}
  .app-shell{display:block!important;width:100%!important;min-height:100dvh!important}
  .content-shell{width:100%!important;min-width:0!important;padding-top:62px!important}

  .sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    z-index:120!important;
    width:min(88vw,286px)!important;
    height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    transform:translate3d(-104%,0,0)!important;
    transition:transform .18s ease-out!important;
    will-change:transform;
    contain:layout paint style;
  }
  html.msi-mobile-nav-open .sidebar{transform:translate3d(0,0,0)!important}

  .msi-mobile-menu-toggle{
    position:fixed;
    top:max(10px,env(safe-area-inset-top));
    left:10px;
    z-index:140;
    display:flex;
    align-items:center;
    gap:8px;
    min-height:42px;
    padding:0 12px;
    font:inherit;
    touch-action:manipulation;
  }
  .msi-mobile-menu-toggle .icon{font-size:20px;line-height:1}

  .msi-mobile-nav-backdrop{
    position:fixed;
    inset:0;
    z-index:110;
    display:none;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    touch-action:manipulation;
  }
  html.msi-mobile-nav-open .msi-mobile-nav-backdrop{display:block}

  .page,.chat-page{width:100%!important;max-width:100%!important}
  img{max-width:100%}
}

@media (prefers-reduced-motion:reduce) and (max-width:760px){
  .sidebar{transition:none!important}
}

@media (min-width:761px){
  .msi-mobile-menu-toggle,.msi-mobile-nav-backdrop{display:none!important}
}

/* ===== SOURCE: sidebar-v4.css ===== */
/* MSI Sidebar V4.1 — desktop: spacious, brand-led and visually continuous. */
@media (min-width: 761px) {
  .app-shell {
    grid-template-columns: 286px minmax(0,1fr) !important;
    background: #f6f8fb !important;
  }

  .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    padding: 28px 24px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    color: #334155 !important;
    background: rgba(255,255,255,.97) !important;
    border: 0 !important;
    border-right: 1px solid #e7edf4 !important;
    box-shadow: 8px 0 30px rgba(15,23,42,.035) !important;
    backdrop-filter: blur(14px) !important;
  }

  .sidebar-brand {
    display: block !important;
    padding: 0 4px 24px !important;
    border: 0 !important;
    border-bottom: 1px solid #edf1f6 !important;
  }

  /* Desktop uses the official brand asset directly — no artificial logo box. */
  .sidebar-brand-lockup { display: none !important; }
  .sidebar-mobile-logo {
    display: block !important;
    width: 204px !important;
    height: 78px !important;
    max-width: 100% !important;
    margin: 0 0 13px !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .sidebar-product-name {
    display: block !important;
    margin: 0 !important;
    color: #183653 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 760 !important;
    letter-spacing: -.012em !important;
  }

  .sidebar .tenant-label {
    display: block !important;
    margin: 5px 0 0 !important;
    color: #8292a7 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 520 !important;
  }

  .sidebar nav {
    display: grid !important;
    gap: 3px !important;
    width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  .sidebar nav button {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 26px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 11px !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #66758a !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 630 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .sidebar nav button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    bottom: 13px;
    width: 3px;
    border-radius: 999px;
    background: transparent;
  }

  .sidebar nav button:hover {
    color: #173b70 !important;
    background: #f7f9fc !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .sidebar nav button.active {
    color: #123f76 !important;
    background: linear-gradient(90deg,#edf4fc 0%,#f6f9fd 100%) !important;
    box-shadow: none !important;
  }

  .sidebar nav button.active::before { background: #3e78bb !important; }

  .sidebar .nav-icon {
    width: 25px !important;
    height: 25px !important;
    display: grid !important;
    place-items: center !important;
    color: inherit !important;
    font-size: 16px !important;
    opacity: .94 !important;
  }

  .sidebar-footer {
    margin-top: auto !important;
    display: grid !important;
    gap: 7px !important;
    padding: 21px 4px 0 !important;
    border: 0 !important;
    border-top: 1px solid #edf1f6 !important;
  }

  .sidebar .signed-user {
    display: block !important;
    padding: 0 4px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 650 !important;
  }

  .sidebar-footer button.secondary {
    width: fit-content !important;
    min-height: 34px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
  }

  .sidebar-footer button.secondary:hover {
    color: #173b70 !important;
    background: transparent !important;
    text-decoration: underline !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .content-shell {
    min-width: 0 !important;
    background: linear-gradient(180deg,#fcfdff 0%,#f6f8fb 100%) !important;
  }

  .native-suggestions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 2px;
  }

  .native-suggestion {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #dbe4ef;
    background: #fff;
    color: #173b70;
    font-size: 13px;
    font-weight: 720;
    box-shadow: 0 5px 16px rgba(15,23,42,.04);
  }

  .native-suggestion:hover {
    background: #f5f8fc;
    box-shadow: 0 7px 18px rgba(15,23,42,.06);
  }

  .native-suggestions > span { color: #8a9aaf; font-size: 12px; }
}

@media (max-width:760px) {
  .sidebar-brand-lockup { display: none !important; }
  .sidebar-mobile-logo { display: block !important; }
  .native-suggestions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .native-suggestion { min-height:36px; padding:0 12px; border-radius:999px; background:#fff; color:#173b70; border:1px solid #dbe4ef; font-size:12px; box-shadow:none; }
  .native-suggestions > span { color:#94a3b8; font-size:11px; }
}

/* ===== SOURCE: ux-v5.css ===== */
/* MSI UX V5 — additive only. Desktop sidebar V4.1 is a frozen baseline. */

.sidebar-agent-summary {
  display: grid;
  gap: 2px;
  margin-top: 7px;
  min-width: 0;
}
.sidebar-agent-summary > span {
  color: #93a1b2;
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.sidebar-agent-summary > strong {
  color: #52657a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.sidebar-agent-summary > small {
  color: #9aa7b6;
  font-size: 10.5px;
  line-height: 1.3;
}

.conversation-agent-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
  color: #7b8a9c;
  font-size: 12px;
}
.conversation-agent-context strong { color: #385675; font-size: 12px; }
.conversation-agent-context .context-dot { color: #c4ccd6; }

.conversation-history {
  display: grid;
  gap: 8px;
  padding: 0;
}
.conversation-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.conversation-history-heading strong { color: #64748b; font-size: 12px; }
.conversation-history-heading button {
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #315d8f !important;
  box-shadow: none !important;
  font-size: 12px !important;
}
.conversation-history-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 4px;
  scrollbar-width: thin;
}
.conversation-history-item {
  flex: 0 0 min(230px, 76vw);
  min-height: 58px !important;
  padding: 9px 12px !important;
  display: grid !important;
  gap: 3px !important;
  align-content: center !important;
  text-align: left !important;
  color: #334155 !important;
  background: #fff !important;
  border: 1px solid #e4e9f0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transform: none !important;
}
.conversation-history-item:hover { background: #f8fafc !important; border-color: #cfd8e5 !important; }
.conversation-history-item.current { background: #f2f6fb !important; border-color: #b9cae0 !important; }
.conversation-history-item strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #334155;
  font-size: 12px;
}
.conversation-history-item span { color: #94a3b8; font-size: 10.5px; }

.message-content { display: grid; gap: 7px; }
.message-content p { margin: 0; line-height: 1.62; }
.message-heading {
  display: block !important;
  margin: 8px 0 1px !important;
  color: inherit !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
}
.message-list-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 8px;
  align-items: start;
  line-height: 1.6;
}
.message-list-marker {
  min-width: 18px;
  color: #66809d;
  font-weight: 750;
  text-align: right;
}
.message-list-row p { margin: 0; }
.message-content code {
  padding: 1px 5px;
  border-radius: 5px;
  background: #eef2f7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
}
.message-content strong { font-weight: 760; }
.message-spacer { height: 2px; }

.native-suggestions {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex-wrap: wrap !important;
  padding: 0 2px !important;
}
.native-suggestion {
  min-height: 44px !important;
  padding: 7px 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  border-radius: 12px !important;
  border: 1px solid #dbe3ed !important;
  background: #fff !important;
  color: #334e6c !important;
  box-shadow: none !important;
  transform: none !important;
  text-align: left !important;
}
.native-suggestion:hover { background: #f7f9fc !important; border-color: #c8d4e2 !important; box-shadow: none !important; }
.native-suggestion-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  border-radius: 9px;
  background: #edf4fc;
  color: #356ea9;
  font-size: 13px;
}
.native-suggestion-copy { display: grid; gap: 1px; }
.native-suggestion-copy strong { color: #314d6c; font-size: 12px; font-weight: 750; }
.native-suggestion-copy small { color: #8796a8; font-size: 10.5px; font-weight: 550; }
.native-suggestions > .native-suggestion-hint { color: #94a3b8; font-size: 11px; }

.assistant-tabs-single { margin-top: 4px; }
.assistant-tabs-single .assistant-tab {
  pointer-events: none !important;
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #475569 !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 14px !important;
  font-weight: 760 !important;
}
.assistant-tabs-single::before {
  content: 'Agente configurado';
  display: block;
  margin-bottom: 3px;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.ai-plan-note { color: #94a3b8; font-size: 10.5px; }

@media (max-width:760px) {
  .content-shell { padding-top: 66px !important; }

  .sidebar {
    background: #ffffff !important;
    color: #334155 !important;
    border-right: 1px solid #e5ebf2 !important;
    box-shadow: 12px 0 34px rgba(15,23,42,.14) !important;
  }
  .sidebar-brand { border-bottom-color: #edf1f6 !important; }
  .sidebar-logo {
    width: 190px !important;
    height: 72px !important;
    padding: 0 !important;
    margin: 0 0 4px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  .sidebar-brand > strong { color: #183653 !important; font-size: 16px !important; }
  .sidebar .tenant-label { color: #8796a8 !important; }
  .sidebar-agent-summary > strong { color: #52657a !important; }

  .sidebar nav button {
    color: #64748b !important;
    background: transparent !important;
    border-color: transparent !important;
  }
  .sidebar nav button:hover { color: #173b70 !important; background: #f7f9fc !important; }
  .sidebar nav button.active {
    color: #123f76 !important;
    background: #edf4fc !important;
    border-color: #dce8f6 !important;
  }
  .sidebar .nav-icon { color: inherit !important; }
  .sidebar-footer { border-top-color: #edf1f6 !important; }
  .signed-user { color: #64748b !important; }
  .sidebar-footer .secondary {
    width: fit-content !important;
    min-height: 36px !important;
    padding: 0 4px !important;
    background: transparent !important;
    color: #64748b !important;
    border: 0 !important;
  }

  .msi-mobile-menu-toggle {
    top: max(12px, env(safe-area-inset-top)) !important;
    left: 12px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.96) !important;
    color: #183653 !important;
    border: 1px solid #dbe3ec !important;
    box-shadow: 0 6px 18px rgba(15,23,42,.10) !important;
  }
  .msi-mobile-nav-backdrop { background: rgba(15,23,42,.32) !important; }

  .conversation-history-list { margin-right: -18px; padding-right: 18px; }
  .native-suggestions { align-items: stretch !important; }
  .native-suggestion { width: 100% !important; }
  .native-suggestions > .native-suggestion-hint { display: none; }
}

/* ===== SOURCE: assistant-hierarchy-v6.css ===== */
/* MSI Assistant Hierarchy V6 — scalable assistant/ability information architecture. */

/* Sidebar: brand first, dynamic assistants below. */
.sidebar-assistant-matrix {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  min-width: 0;
}
.sidebar-assistant-matrix > .sidebar-section-label {
  color: #8a99ab;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: .065em;
}
.sidebar-assistant-head,
.sidebar-assistant-row {
  display: grid !important;
  grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr) !important;
  align-items: center !important;
  gap: 9px !important;
}
.sidebar-assistant-head {
  padding: 0 7px 2px;
  color: #9aa7b7;
  font-size: 9.5px;
  font-weight: 730;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.sidebar-assistant-row {
  width: 100%;
  min-height: 38px !important;
  padding: 7px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #52657a !important;
  box-shadow: none !important;
  transform: none !important;
  text-align: left !important;
}
.sidebar-assistant-row:hover {
  background: #f7f9fc !important;
  border-color: #e8edf3 !important;
  box-shadow: none !important;
  transform: none !important;
}
.sidebar-assistant-row.active {
  background: #f1f6fc !important;
  border-color: #dce8f5 !important;
}
.sidebar-assistant-row strong,
.sidebar-assistant-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-assistant-row strong {
  color: #294965;
  font-size: 11px;
  font-weight: 750;
}
.sidebar-assistant-row span {
  color: #74859a;
  font-size: 10.5px;
  font-weight: 600;
}
.sidebar-footer { grid-template-columns: 1fr !important; }
.sidebar-footer button.secondary { justify-self: start; }

/* Conversation: assistant identity is prominent and metadata is always horizontal. */
.chat-page header h1 {
  font-size: clamp(40px,4.2vw,52px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.032em !important;
  color: #0b2342 !important;
}
.chat-subtitle {
  max-width: 760px !important;
  margin-top: 12px !important;
}
.conversation-identity-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  width: min(100%, 560px);
  gap: 12px;
  margin-top: 15px;
}
.conversation-identity-grid > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 0 0 0 11px;
  border-left: 2px solid #dce7f3;
}
.conversation-identity-grid span {
  color: #8a99ab;
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.conversation-identity-grid strong {
  min-width: 0;
  color: #365875;
  font-size: 13px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Plan/profile: assistant and configured ability stay as columns at every viewport. */
.assistant-plan-card {
  padding: 24px !important;
  gap: 18px !important;
}
.assistant-plan-summary {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}
.assistant-plan-summary h2 { margin-top: 1px; }
.assistant-plan-summary p { margin-top: 6px !important; }
.assistant-plan-count {
  flex: none;
  display: grid;
  gap: 2px;
  text-align: right;
  color: #7f8da0;
  font-size: 11px;
}
.assistant-plan-count strong {
  color: #294965;
  font-size: 15px;
}
.assistant-config-table {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.assistant-config-head,
.assistant-config-row {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  align-items: center !important;
  gap: 18px !important;
}
.assistant-config-head {
  padding: 0 14px 5px;
  color: #91a0b2;
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.assistant-config-row {
  width: 100%;
  min-height: 48px !important;
  padding: 11px 14px !important;
  border: 1px solid #e4eaf1 !important;
  border-radius: 12px !important;
  background: #fbfcfe !important;
  color: #334155 !important;
  text-align: left !important;
  box-shadow: none !important;
  transform: none !important;
}
.assistant-config-row:hover {
  background: #f6f9fc !important;
  border-color: #cfdae7 !important;
  box-shadow: none !important;
  transform: none !important;
}
.assistant-config-row.active {
  background: #f1f6fc !important;
  border-color: #bcd0e5 !important;
  box-shadow: inset 3px 0 0 #3f77b0 !important;
}
.assistant-config-row strong,
.assistant-config-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assistant-config-row strong {
  color: #244664;
  font-size: 13px;
  font-weight: 760;
}
.assistant-config-row span {
  color: #65778c;
  font-size: 13px;
  font-weight: 620;
}
.assistant-plan-add { width: fit-content !important; }

@media (max-width:760px) {
  .sidebar-assistant-matrix { margin-top: 7px; }
  .sidebar-assistant-head { font-size: 9px; }
  .sidebar-assistant-row { min-height: 36px !important; }
  .sidebar-assistant-row strong,
  .sidebar-assistant-row span { font-size: 10px; }

  .chat-page header h1 { font-size: 36px !important; }
  .conversation-identity-grid {
    width: 100%;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 8px;
  }
  .conversation-identity-grid > div { padding-left: 8px; }
  .conversation-identity-grid strong { font-size: 12px; }

  .assistant-plan-card { padding: 18px !important; }
  .assistant-plan-summary { align-items: start; }
  .assistant-plan-count { font-size: 10px; }
  .assistant-config-head,
  .assistant-config-row {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 10px !important;
  }
  .assistant-config-head { padding-left: 10px; padding-right: 10px; font-size: 9px; }
  .assistant-config-row { padding: 10px !important; }
  .assistant-config-row strong,
  .assistant-config-row span { font-size: 11px; }
}

/* ===== SOURCE: ux-v7.css ===== */
/* MSI UX V7 — conversation workspace + responsive mirror. Additive; no domain/runtime changes. */
:root{--v7-navy:#173b70;--v7-text:#183653;--v7-muted:#7a8a9d;--v7-border:#dfe6ef;--v7-soft:#f7f9fc;--v7-blue-soft:#edf4fc}

/* Sidebar: product identity only. Same visual system on desktop and mobile. */
.sidebar-product-name{font-size:17px!important;line-height:1.25!important;font-weight:780!important;color:var(--v7-text)!important}
.sidebar-agent-summary,.sidebar-assistant-matrix,.sidebar .tenant-label,.sidebar .signed-user{display:none!important}
.sidebar-footer{margin-top:auto!important}
.sidebar-footer .secondary{font-weight:700!important}

/* Conversation page uses the viewport instead of stacking large sections. */
.chat-page{width:min(100%,1120px)!important;min-height:100dvh!important;padding-top:28px!important;padding-bottom:18px!important;gap:12px!important;grid-template-rows:auto auto auto minmax(0,1fr) auto auto!important}
.chat-page>header{padding:0 0 12px!important;border-bottom:1px solid #e8edf3!important}
.chat-page>header .eyebrow{margin-bottom:5px!important}
.chat-page>header h1{font-size:clamp(32px,3.4vw,44px)!important;line-height:1.03!important;letter-spacing:-.035em!important;margin:0!important}
.chat-subtitle{margin:8px 0 0!important;max-width:760px!important;font-size:15px!important;line-height:1.45!important}
.conversation-agent-context,.conversation-context-bar{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important;margin-top:8px!important;font-size:11.5px!important;color:#7f8fa3!important}
.conversation-agent-context strong,.conversation-context-bar strong{color:#365675!important;font-size:11.5px!important}
.context-dot{color:#c5ced8!important}

/* Optional selectors stay compact and do not push the conversation below the fold. */
.conversation-options{display:flex!important;align-items:flex-end!important;gap:10px!important;flex-wrap:wrap!important;padding:0!important;margin:0!important}
.conversation-options label{min-width:210px!important;max-width:320px!important;font-size:11.5px!important;color:#738399!important}
.conversation-options select{min-height:40px!important;margin-top:4px!important;padding-top:7px!important;padding-bottom:7px!important}
.conversation-options small{display:none!important}

/* Capability CTA goes above history, compact and explicit. */
.native-suggestions,.conversation-capability-cta{display:flex!important;align-items:center!important;gap:8px!important;padding:0!important;margin:0!important}
.native-suggestion,.conversation-capability-cta button{min-height:44px!important;padding:0 14px!important;border-radius:12px!important;border:1px solid #cfdbe9!important;background:#fff!important;color:#214e7f!important;box-shadow:none!important;font-size:13px!important;font-weight:760!important;transform:none!important}
.native-suggestion:hover,.conversation-capability-cta button:hover{background:#f5f8fc!important;border-color:#b8c9dd!important}
.native-suggestion-icon{width:25px!important;height:25px!important;flex:0 0 25px!important;border-radius:8px!important;font-size:12px!important}
.native-suggestion-copy{display:flex!important;align-items:center!important;gap:8px!important}
.native-suggestion-copy strong{font-size:13px!important}
.native-suggestion-copy small,.native-suggestion-hint{display:none!important}

/* Recent conversations are a compact utility row, not a hero block. */
.conversation-history{display:grid!important;gap:6px!important;padding:0!important;margin:0!important;min-width:0!important}
.conversation-history-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-height:26px!important}
.conversation-history-heading strong{font-size:11.5px!important;color:#6f8196!important;text-transform:none!important;letter-spacing:0!important}
.conversation-history-heading button{min-height:30px!important;padding:0 8px!important;border-radius:8px!important;font-size:11.5px!important}
.conversation-history-list{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(190px,1fr)!important;gap:8px!important;overflow-x:auto!important;padding:0 0 4px!important;scrollbar-width:thin!important;scroll-snap-type:x proximity!important}
.conversation-history-item{scroll-snap-align:start!important;min-height:62px!important;height:62px!important;padding:9px 11px!important;border-radius:10px!important;background:#fff!important;border:1px solid #e1e7ef!important;box-shadow:none!important;display:grid!important;gap:3px!important;align-content:center!important;text-align:left!important;overflow:hidden!important}
.conversation-history-item:hover{background:#f8fafc!important;border-color:#cbd6e3!important}
.conversation-history-item.current{background:#f2f6fb!important;border-color:#b8c9dd!important}
.conversation-history-item strong{font-size:12px!important;line-height:1.25!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#304963!important}
.conversation-history-item span{font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#91a0b1!important}

/* Main conversation canvas: internal scroll keeps composer visible. */
.messages{width:100%!important;max-width:none!important;min-height:300px!important;height:clamp(300px,46dvh,650px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding:20px 22px!important;border-radius:18px!important;border:1px solid #e2e8f0!important;background:#fff!important;scrollbar-width:thin!important;scroll-padding-bottom:28px!important}
.empty-conversation{display:grid!important;place-items:center!important}
.conversation-welcome{max-width:540px!important;text-align:center!important;padding:18px!important}
.conversation-welcome .conversation-mark{width:38px!important;height:38px!important;margin:0 auto 8px!important}
.conversation-welcome strong{font-size:21px!important}
.conversation-welcome p{margin-top:6px!important;font-size:14px!important;line-height:1.5!important}
.message{max-width:min(82%,800px)!important;padding:15px 17px!important;border-radius:16px!important}
.message.user{max-width:min(72%,700px)!important;margin-left:auto!important}
.message.assistant{margin-right:auto!important}
.message>span{font-size:10.5px!important;letter-spacing:.045em!important}
.message-content p,.message-list-row{font-size:15px!important;line-height:1.58!important}

/* Composer is always close to the conversation. */
.attachment-chips{margin:0!important;min-height:0!important}
.composer{position:sticky!important;bottom:max(8px,env(safe-area-inset-bottom))!important;z-index:20!important;width:100%!important;max-width:none!important;margin:0!important;padding:8px!important;border-radius:16px!important;box-shadow:0 10px 28px rgba(15,23,42,.08)!important;background:rgba(255,255,255,.97)!important;backdrop-filter:blur(10px)!important}
.composer textarea{min-height:48px!important;max-height:150px!important;padding-top:12px!important;padding-bottom:10px!important;line-height:1.45!important;resize:vertical!important}
.composer button,.file-button,.ai-profile-select{min-height:48px!important}
.composer-hint{margin-top:-5px!important;font-size:10.5px!important;color:#97a4b3!important}

/* Keyboard and accessibility. */
.chat-page button:focus-visible,.chat-page select:focus-visible,.chat-page textarea:focus-visible,.sidebar button:focus-visible{outline:3px solid rgba(20,101,217,.28)!important;outline-offset:2px!important}

/* Mobile is the same product DOM and hierarchy, only responsive. */
@media(max-width:760px){
  html,body,#root{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  .content-shell{padding-top:62px!important;background:linear-gradient(180deg,#fcfdff 0%,#f6f8fb 100%)!important}
  .page,.chat-page{width:100%!important;max-width:100%!important;padding:18px 14px calc(16px + env(safe-area-inset-bottom))!important}
  .chat-page{min-height:calc(100dvh - 62px)!important;gap:10px!important}
  .chat-page>header{padding-bottom:10px!important}
  .chat-page>header h1{font-size:30px!important}
  .chat-subtitle{font-size:13.5px!important;margin-top:6px!important}
  .conversation-agent-context,.conversation-context-bar{font-size:10.5px!important;margin-top:6px!important}

  /* Mirror desktop sidebar palette and spacing; drawer is only a size adaptation. */
  .sidebar{width:min(88vw,286px)!important;background:#fff!important;color:#334155!important;border-right:1px solid #e7edf4!important;box-shadow:12px 0 34px rgba(15,23,42,.14)!important;padding:max(72px,calc(54px + env(safe-area-inset-top))) 20px max(18px,env(safe-area-inset-bottom))!important;justify-content:flex-start!important;gap:0!important}
  .sidebar-brand{display:block!important;padding:0 4px 20px!important;border-bottom:1px solid #edf1f6!important}
  .sidebar-logo{width:194px!important;height:70px!important;max-width:100%!important;margin:0 0 10px!important;padding:0!important;object-fit:contain!important;object-position:left center!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:none!important}
  .sidebar-product-name{color:var(--v7-text)!important;font-size:17px!important}
  .sidebar nav{display:grid!important;gap:3px!important;margin:20px 0 0!important;padding:0!important;background:transparent!important}
  .sidebar nav button{grid-template-columns:26px minmax(0,1fr)!important;gap:11px!important;min-height:48px!important;padding:0 12px!important;border-radius:11px!important;background:transparent!important;color:#66758a!important;border:0!important;font-size:14px!important}
  .sidebar nav button:hover{background:#f7f9fc!important;color:#173b70!important}
  .sidebar nav button.active{background:#edf4fc!important;color:#123f76!important}
  .nav-icon{color:inherit!important}
  .sidebar-footer{width:100%!important;margin-top:auto!important;padding:18px 4px 0!important;border-top:1px solid #edf1f6!important}
  .sidebar-footer .secondary{width:auto!important;min-height:40px!important;padding:0 4px!important;border:0!important;background:transparent!important;color:#64748b!important;text-align:left!important}
  .msi-mobile-menu-toggle{top:max(10px,env(safe-area-inset-top))!important;left:10px!important;min-height:42px!important;padding:0 12px!important;border-radius:11px!important;background:#fff!important;color:#183653!important;border:1px solid #dbe3ec!important;box-shadow:0 6px 18px rgba(15,23,42,.10)!important}
  .msi-mobile-nav-backdrop{background:rgba(15,23,42,.30)!important}

  .conversation-options{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .conversation-options label{width:100%!important;max-width:none!important}
  .native-suggestions,.conversation-capability-cta{width:100%!important}
  .native-suggestion,.conversation-capability-cta button{width:100%!important;justify-content:flex-start!important}
  .conversation-history-heading{min-height:24px!important}
  .conversation-history-list{grid-auto-columns:minmax(210px,82vw)!important;gap:7px!important;margin-right:-14px!important;padding-right:14px!important}
  .conversation-history-item{height:58px!important;min-height:58px!important}
  .messages{height:clamp(280px,44dvh,560px)!important;min-height:280px!important;padding:15px!important;border-radius:15px!important}
  .message{max-width:95%!important;padding:13px 14px!important}
  .message.user{max-width:90%!important}
  .message-content p,.message-list-row{font-size:14.5px!important}
  .composer{grid-template-columns:auto minmax(0,1fr) auto!important;padding:7px!important;border-radius:14px!important;backdrop-filter:none!important}
  .ai-profile-select{grid-column:2/3!important;width:100%!important;min-height:42px!important}
  .composer>button{grid-column:3!important;grid-row:1/3!important;min-width:76px!important}
  .file-button{align-self:start!important;width:44px!important;height:44px!important;min-height:44px!important}
  .composer-hint{display:none!important}
}

@media(max-width:420px){
  .chat-page{padding-left:11px!important;padding-right:11px!important}
  .chat-page>header h1{font-size:28px!important}
  .conversation-history-list{grid-auto-columns:minmax(196px,86vw)!important;margin-right:-11px!important;padding-right:11px!important}
  .messages{padding:12px!important}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}


/* MSI_SIDEBAR_BRAND_SCALE_V2 */
.sidebar-brand-lockup{display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;padding:2px 2px 14px!important}
.sidebar-brand-icon{width:64px!important;height:64px!important;flex:0 0 64px!important;object-fit:contain!important;display:block!important}
.sidebar-brand-copy{display:grid!important;gap:2px!important;min-width:0!important;line-height:1.05!important}
.sidebar-brand-copy strong{font-size:18px!important;line-height:1.05!important;letter-spacing:-.015em!important;color:#173b70!important}
.sidebar-brand-copy span{font-size:12px!important;line-height:1.25!important;color:#718096!important;font-weight:650!important}
.sidebar-mobile-logo{display:none!important}
@media(max-width:1024px) and (min-width:761px){
  .sidebar-brand-lockup{gap:10px!important}
  .sidebar-brand-icon{width:56px!important;height:56px!important;flex-basis:56px!important}
  .sidebar-brand-copy strong{font-size:16px!important}
  .sidebar-brand-copy span{font-size:11px!important}
}
@media(max-width:760px){
  .sidebar-brand-lockup{width:auto!important;padding:0 2px 18px!important;gap:10px!important}
  .sidebar-brand-icon{width:50px!important;height:50px!important;flex-basis:50px!important}
  .sidebar-brand-copy strong{font-size:16px!important}
  .sidebar-brand-copy span{font-size:10.5px!important}
  .sidebar-mobile-logo{display:none!important}
}


/* MSI_SIDEBAR_COLLAPSE_V1 */
.app-shell{transition:grid-template-columns .18s ease}
.app-shell.sidebar-is-collapsed{grid-template-columns:84px minmax(0,1fr)!important}
.sidebar{transition:width .18s ease,padding .18s ease}
.sidebar-brand{position:relative}
.sidebar-collapse-toggle{position:absolute!important;top:2px!important;right:-10px!important;z-index:4!important;width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;padding:0!important;border-radius:999px!important;background:#fff!important;color:#334155!important;border:1px solid #dbe3ec!important;box-shadow:0 4px 14px rgba(15,23,42,.08)!important;display:grid!important;place-items:center!important;font-size:20px!important;line-height:1!important}
.sidebar-collapse-toggle:hover{transform:none!important;background:#f8fafc!important;box-shadow:0 5px 16px rgba(15,23,42,.11)!important}
.sidebar.is-collapsed{padding-left:12px!important;padding-right:12px!important;align-items:stretch!important}
.sidebar.is-collapsed .sidebar-brand-lockup{justify-content:center!important;padding-left:0!important;padding-right:0!important}
.sidebar.is-collapsed .sidebar-brand-copy,.sidebar.is-collapsed .sidebar-assistant-matrix,.sidebar.is-collapsed .nav-label{display:none!important}
.sidebar.is-collapsed .sidebar-brand-icon{width:48px!important;height:48px!important;flex:0 0 48px!important}
.sidebar.is-collapsed nav{width:100%!important}
.sidebar.is-collapsed nav button{display:grid!important;place-items:center!important;padding:0!important;width:48px!important;min-width:48px!important;margin:0 auto!important;text-align:center!important}
.sidebar.is-collapsed .nav-icon{margin:0!important;font-size:18px!important}
.sidebar.is-collapsed .sidebar-footer{justify-items:center!important}
.sidebar.is-collapsed .sidebar-footer .secondary{width:48px!important;min-width:48px!important;padding:0!important;font-size:0!important}
.sidebar.is-collapsed .sidebar-footer .secondary::before{content:'↪';font-size:17px!important}
.sidebar.is-collapsed .sidebar-collapse-toggle{right:-18px!important}
@media(max-width:760px){
  .app-shell.sidebar-is-collapsed{grid-template-columns:1fr!important}
  .sidebar-collapse-toggle{display:none!important}
  .sidebar.is-collapsed{padding:10px 12px!important;align-items:center!important}
  .sidebar.is-collapsed nav button{display:flex!important;width:auto!important;min-width:0!important;margin:0!important;padding:0 9px!important}
  .sidebar.is-collapsed .sidebar-footer .secondary{width:auto!important;min-width:0!important;padding:0 10px!important;font-size:inherit!important}
  .sidebar.is-collapsed .sidebar-footer .secondary::before{content:none!important}
}

/* ===== SOURCE: ux-v7-1.css ===== */
/* MSI UX V7.1 — corrective layer for assistant hierarchy and conversation flow. */

/* Keep configured assistant/skill information visible below the logo. */
.sidebar-product-name,
.sidebar-agent-summary,
.sidebar .tenant-label,
.sidebar .signed-user {
  display: none !important;
}
.sidebar-assistant-matrix {
  display: grid !important;
  gap: 6px !important;
  margin-top: 10px !important;
  min-width: 0 !important;
}
.sidebar-assistant-head,
.sidebar-assistant-row {
  display: grid !important;
  grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr) !important;
  gap: 8px !important;
  align-items: center !important;
}
.sidebar-assistant-head {
  padding: 0 6px 2px !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
}
.sidebar-assistant-row {
  min-height: 36px !important;
  padding: 6px !important;
  border-radius: 8px !important;
}
.sidebar-assistant-row strong {
  font-size: 10.8px !important;
}
.sidebar-assistant-row span {
  font-size: 10.2px !important;
}

/* WCAG AA corrective contrast without changing the approved geometry. */
.sidebar .sidebar-section-label,
.sidebar .sidebar-assistant-head span,
.sidebar .sidebar-assistant-row span,
.sidebar .sidebar-assistant-row.active span,
.sidebar nav button span:not(.nav-icon),
.assistant-plan-count > span,
.assistant-config-head span,
.assistant-config-row span,
.assistant-config-row.active span {
  color: #475569 !important;
}

/* The assistant name is context, not a hero title. */
.chat-page > header h1 {
  font-size: clamp(30px, 2.8vw, 38px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.026em !important;
}
.chat-page > header .eyebrow {
  margin-bottom: 4px !important;
}
.chat-subtitle {
  margin-top: 7px !important;
  font-size: 14px !important;
}

/* Previous conversations belong after the active conversation and stay compact. */
.conversation-history {
  align-self: start !important;
  margin: 10px 0 0 !important;
  gap: 5px !important;
}
.conversation-history-heading {
  min-height: 22px !important;
}
.conversation-history-heading strong,
.conversation-history-heading button {
  font-size: 11px !important;
}
.conversation-history-list {
  align-items: start !important;
  grid-auto-columns: minmax(190px, 210px) !important;
  gap: 7px !important;
  padding-bottom: 2px !important;
}
.conversation-history-item {
  min-height: 46px !important;
  height: 46px !important;
  padding: 6px 9px !important;
  border-radius: 9px !important;
  gap: 2px !important;
}
.conversation-history-item strong {
  font-size: 11px !important;
  line-height: 1.18 !important;
}
.conversation-history-item span {
  font-size: 9.5px !important;
  line-height: 1.15 !important;
}

@media (max-width: 760px) {
  .sidebar-assistant-matrix {
    margin-top: 8px !important;
  }
  .sidebar-assistant-row {
    min-height: 34px !important;
  }
  .chat-page > header h1 {
    font-size: 28px !important;
  }
  .conversation-history-list {
    grid-auto-columns: minmax(178px, 74vw) !important;
  }
  .conversation-history-item {
    min-height: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 420px) {
  .chat-page > header h1 {
    font-size: 26px !important;
  }
}

/* ===== SOURCE: ux-v7-2.css ===== */
/* MSI UX V7.2 — home density and typography refinement.
   Goal: reduce visual weight, improve scanability and preserve the approved MSI hierarchy. */

/* Home hero: product name behaves like a product title, not a campaign headline. */
.home-page {
  padding-top: 42px !important;
}
.home-brand-lockup {
  margin-bottom: 12px !important;
}
.home-brand-logo {
  width: min(100%, 250px) !important;
  height: 66px !important;
}
.home-hero {
  max-width: 760px !important;
  padding-top: 2px !important;
}
.home-welcome-title {
  gap: 1px !important;
}
.home-welcome-title > span {
  font-size: clamp(18px, 1.55vw, 23px) !important;
  line-height: 1.25 !important;
  font-weight: 620 !important;
  color: #64748b !important;
}
.home-welcome-title > strong {
  font-size: clamp(38px, 3.7vw, 50px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.03em !important;
  font-weight: 790 !important;
}
.home-hero .lead {
  margin-top: 14px !important;
  font-size: clamp(19px, 1.9vw, 25px) !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
}
.home-hero .intro-copy {
  margin-top: 12px !important;
  max-width: 720px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}
.home-actions {
  margin: 22px 0 30px !important;
}

/* Skills: compact cards inspired by current productivity/SaaS discovery patterns. */
.capability-section {
  margin-top: 22px !important;
}
.section-heading {
  margin-bottom: 12px !important;
}
.capability-grid {
  gap: 10px !important;
}
.capability-card {
  min-height: 142px !important;
  padding: 15px 16px !important;
  gap: 7px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
}
.capability-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(7,27,61,.10) !important;
}
.capability-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
}
.capability-card strong {
  font-size: 15px !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
}
.capability-card > span:not(.capability-icon) {
  font-size: 12.5px !important;
  line-height: 1.42 !important;
  font-weight: 480 !important;
}
.capability-card em {
  margin-top: auto !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-weight: 720 !important;
}

/* Sidebar matrix remains informative without competing with navigation. */
.sidebar-assistant-matrix {
  gap: 5px !important;
  margin-top: 8px !important;
}
.sidebar-assistant-head {
  padding-bottom: 1px !important;
  font-size: 8.5px !important;
}
.sidebar-assistant-row {
  min-height: 32px !important;
  padding: 5px 6px !important;
}
.sidebar-assistant-row strong {
  font-size: 10.2px !important;
}
.sidebar-assistant-row span {
  font-size: 9.7px !important;
}

@media (min-width: 761px) and (max-width: 1180px) {
  .home-page {
    padding-top: 36px !important;
  }
  .home-welcome-title > strong {
    font-size: clamp(36px, 4vw, 46px) !important;
  }
  .capability-card {
    min-height: 136px !important;
  }
}

@media (max-width: 760px) {
  .home-page {
    padding-top: 24px !important;
  }
  .home-brand-lockup {
    margin-bottom: 8px !important;
  }
  .home-brand-logo {
    width: min(72vw, 220px) !important;
    height: 58px !important;
  }
  .home-welcome-title > span {
    font-size: 17px !important;
  }
  .home-welcome-title > strong {
    font-size: clamp(32px, 10vw, 40px) !important;
  }
  .home-hero .lead {
    margin-top: 12px !important;
    font-size: 19px !important;
  }
  .home-hero .intro-copy {
    font-size: 14px !important;
  }
  .home-actions {
    margin: 18px 0 24px !important;
  }
  .capability-section {
    margin-top: 18px !important;
  }
  .capability-grid {
    gap: 9px !important;
  }
  .capability-card {
    min-height: 126px !important;
    padding: 14px !important;
  }
}

/* ===== SOURCE: ux-v8-topnav.css ===== */
/* MSI UX V8 — top navigation layout only. Brand tokens and page components remain unchanged. */
.topnav-shell.app-shell{display:block!important;min-height:100vh!important;grid-template-columns:none!important}
.top-navigation{position:sticky;top:0;z-index:60;width:100%;background:rgba(255,255,255,.97);border-bottom:1px solid #dbe3ec;backdrop-filter:blur(14px);box-shadow:0 2px 14px rgba(15,23,42,.035)}
.top-navigation-main{width:min(100%,1480px);min-height:68px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:18px}
.top-brand-button{min-height:52px;min-width:max-content;padding:4px 8px 4px 2px!important;border:0!important;background:transparent!important;color:#173b70!important;box-shadow:none!important;display:flex;align-items:center;gap:10px;text-align:left}
.top-brand-button:hover{transform:none!important;box-shadow:none!important;background:#f8fafc!important}
.top-brand-icon{display:block;width:48px;height:48px;object-fit:contain;flex:0 0 48px}
.top-brand-copy{display:grid;gap:1px;line-height:1.02}
.top-brand-copy strong{font-size:16px;letter-spacing:-.015em;color:#173b70}
.top-brand-copy small{font-size:10px;font-weight:700;color:#718096;white-space:nowrap}
.top-nav-links{display:flex;align-items:center;gap:3px;min-width:0;flex:1;justify-content:flex-end}
.top-nav-links button{min-height:40px;padding:0 10px;border-radius:10px;background:transparent;color:#475569;box-shadow:none;white-space:nowrap;font-size:13px;font-weight:720;display:flex;align-items:center;gap:6px}
.top-nav-links button:hover{transform:none;box-shadow:none;background:#f8fafc;color:#0f172a}
.top-nav-links button.active{background:#eef2f7;color:#173b70}
.top-nav-links .nav-icon{font-size:14px;line-height:1}
.top-nav-logout{margin-left:4px!important;border-left:1px solid #e2e8f0!important;border-radius:0 10px 10px 0!important;padding-left:14px!important}
.top-nav-menu-toggle{display:none;min-height:40px!important;padding:0 12px!important;background:#fff!important;color:#334155!important;border:1px solid #dbe3ec!important;box-shadow:none!important;gap:7px!important}
.top-context-strip{width:min(100%,1480px);margin:0 auto;padding:0 24px 8px;display:flex;align-items:center;gap:12px;min-width:0}
.top-context-label{flex:none;text-transform:uppercase;letter-spacing:.09em;font-size:10px;font-weight:800;color:#94a3b8}
.top-assistant-pills{display:flex;gap:7px;overflow-x:auto;min-width:0;scrollbar-width:thin;padding:1px 0}
.top-assistant-pill{min-height:32px!important;padding:4px 10px!important;border-radius:999px!important;border:1px solid #dbe3ec!important;background:#fff!important;color:#475569!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:6px!important;white-space:nowrap!important}
.top-assistant-pill:hover{transform:none!important;box-shadow:none!important;background:#f8fafc!important}
.top-assistant-pill.active{border-color:#b9c9df!important;background:#eef4fb!important;color:#173b70!important}
.top-assistant-pill strong{font-size:11px;line-height:1.1}
.top-assistant-pill span{font-size:10px;color:#718096;font-weight:650}
.topnav-shell>.content-shell{min-width:0;width:100%}
.topnav-shell .page,.topnav-shell .chat-page{width:min(100%,1220px)}

@media(max-width:1180px) and (min-width:961px){
  .top-navigation-main{padding:0 16px;gap:10px}
  .top-brand-copy small{display:none}
  .top-nav-links button{padding:0 7px;font-size:12px;gap:4px}
  .top-context-strip{padding-left:16px;padding-right:16px}
}

@media(max-width:960px){
  .top-navigation-main{min-height:60px;padding:0 14px;gap:10px;justify-content:space-between;position:relative;flex-wrap:wrap}
  .top-brand-button{min-height:48px;padding-right:2px!important}
  .top-brand-icon{width:42px;height:42px;flex-basis:42px}
  .top-brand-copy strong{font-size:15px}
  .top-brand-copy small{font-size:9.5px}
  .top-nav-menu-toggle{display:flex!important;align-items:center!important}
  .top-nav-links{display:none;order:3;flex:0 0 calc(100% + 28px);margin:0 -14px;border-top:1px solid #e2e8f0;background:#fff;padding:8px 12px 12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .top-nav-links.is-open{display:grid}
  .top-nav-links button{width:100%;justify-content:flex-start;min-height:42px;padding:0 12px;font-size:13px}
  .top-nav-logout{margin-left:0!important;border-left:0!important;border-top:1px solid #e2e8f0!important;border-radius:10px!important;grid-column:1/-1;margin-top:3px!important}
  .top-context-strip{padding:6px 14px 8px;gap:8px;border-top:1px solid rgba(226,232,240,.75)}
  .top-context-label{font-size:9px}
  .top-assistant-pill{min-height:30px!important}
  .topnav-shell .page,.topnav-shell .chat-page{padding-top:30px}
}

@media(max-width:560px){
  .top-navigation-main{padding:0 10px}
  .top-brand-copy small{display:none}
  .top-brand-icon{width:40px;height:40px;flex-basis:40px}
  .top-nav-menu-toggle{padding:0 10px!important}
  .top-nav-links{flex-basis:calc(100% + 20px);margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px;grid-template-columns:1fr}
  .top-context-strip{padding-left:10px;padding-right:10px}
  .top-context-label{display:none}
  .top-assistant-pills{width:100%}
  .top-assistant-pill strong{font-size:10.5px}
  .topnav-shell .page,.topnav-shell .chat-page{padding-top:24px}
}

@media(prefers-reduced-motion:reduce){.top-navigation *{transition:none!important}}

/* ===== SOURCE: ux-v8-1-topnav.css ===== */
/* MSI UX V8.1 — top navigation refinement.
   Layout only. Uses the official MSI logo asset and keeps existing brand tokens/business logic. */

/* Header becomes one calm navigation surface, not a row of CTA rectangles. */
.top-navigation{background:rgba(255,255,255,.985)!important;border-bottom:1px solid #e4eaf1!important;box-shadow:0 3px 16px rgba(15,23,42,.035)!important}
.top-navigation-main{width:min(100%,1480px)!important;min-height:66px!important;padding:0 30px!important;gap:28px!important}

/* Official brand asset only. No reconstructed logo, icon box or replacement typography. */
.top-brand-button{min-height:58px!important;min-width:178px!important;padding:3px 4px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;transform:none!important}
.top-brand-button:hover{background:transparent!important;box-shadow:none!important;transform:none!important}
.top-brand-logo{display:block!important;width:174px!important;height:48px!important;max-width:100%!important;object-fit:contain!important;object-position:left center!important;filter:none!important;opacity:1!important}
.top-brand-icon,.top-brand-copy{display:none!important}

/* Desktop navigation = text navigation with active underline, not individual pills/buttons. */
.top-nav-links{display:flex!important;align-items:stretch!important;justify-content:flex-end!important;gap:0!important;min-width:0!important;flex:1!important;height:66px!important}
.top-nav-links button{position:relative!important;min-height:66px!important;height:66px!important;padding:0 13px!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;color:#536274!important;box-shadow:none!important;transform:none!important;white-space:nowrap!important;font-size:14px!important;line-height:1!important;font-weight:650!important;letter-spacing:-.006em!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;text-shadow:none!important;opacity:1!important}
.top-nav-links button::after{content:''!important;position:absolute!important;left:13px!important;right:13px!important;bottom:0!important;height:2px!important;border-radius:999px 999px 0 0!important;background:transparent!important}
.top-nav-links button:hover{background:transparent!important;background-image:none!important;color:#173b70!important;box-shadow:none!important;transform:none!important}
.top-nav-links button:hover::after{background:#d6e2f1!important}
.top-nav-links button.active{background:transparent!important;background-image:none!important;color:#123f76!important;font-weight:750!important;box-shadow:none!important}
.top-nav-links button.active::after{background:#3e78bb!important}
.top-nav-links .nav-icon{font-size:13px!important;line-height:1!important;color:#7d8ca0!important;opacity:.82!important;margin:0!important}
.top-nav-links button.active .nav-icon{color:#3e78bb!important;opacity:1!important}
.top-nav-logout{margin-left:8px!important;padding-left:18px!important;border-left:1px solid #e5eaf0!important;border-radius:0!important;color:#64748b!important}
.top-nav-logout::after{display:none!important}

/* Secondary context strip behaves like a light sub-navigation, not a large pill row. */
.top-context-strip{width:min(100%,1480px)!important;min-height:38px!important;margin:0 auto!important;padding:0 30px 7px!important;display:flex!important;align-items:center!important;gap:14px!important;border-top:0!important}
.top-context-label{font-size:9.5px!important;letter-spacing:.105em!important;font-weight:800!important;color:#94a3b8!important}
.top-assistant-pills{display:flex!important;align-items:center!important;gap:14px!important;overflow-x:auto!important;padding:0!important}
.top-assistant-pill{position:relative!important;min-height:30px!important;height:30px!important;padding:0 2px!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;color:#66758a!important;box-shadow:none!important;transform:none!important;gap:5px!important}
.top-assistant-pill::after{content:''!important;position:absolute!important;left:2px!important;right:2px!important;bottom:0!important;height:1.5px!important;background:transparent!important}
.top-assistant-pill:hover{background:transparent!important;color:#173b70!important;box-shadow:none!important;transform:none!important}
.top-assistant-pill.active{border:0!important;background:transparent!important;color:#173b70!important;box-shadow:none!important}
.top-assistant-pill.active::after{background:#9bb8d9!important}
.top-assistant-pill strong{font-size:11.5px!important;line-height:1!important;font-weight:730!important;color:inherit!important}
.top-assistant-pill span{font-size:10.5px!important;line-height:1!important;font-weight:580!important;color:#7f8ea1!important}

/* Keep page canvas calm and aligned with the full-width navigation. */
.topnav-shell .page,.topnav-shell .chat-page{width:min(100%,1220px)!important}

@media(max-width:1180px) and (min-width:961px){
  .top-navigation-main{padding:0 18px!important;gap:14px!important}
  .top-brand-button{min-width:150px!important}
  .top-brand-logo{width:148px!important;height:44px!important}
  .top-nav-links button{padding:0 9px!important;font-size:12.5px!important;gap:4px!important}
  .top-nav-links button::after{left:9px!important;right:9px!important}
  .top-context-strip{padding-left:18px!important;padding-right:18px!important}
}

/* Tablet/mobile: compact header + proper menu sheet. No blue rectangular button wall. */
@media(max-width:960px){
  .top-navigation-main{min-height:60px!important;padding:0 14px!important;gap:12px!important;justify-content:space-between!important;flex-wrap:wrap!important}
  .top-brand-button{min-width:0!important;min-height:54px!important;padding:2px!important}
  .top-brand-logo{width:150px!important;height:44px!important}
  .top-nav-menu-toggle{display:flex!important;align-items:center!important;justify-content:center!important;min-height:38px!important;height:38px!important;padding:0 11px!important;border:1px solid #dbe3ec!important;border-radius:10px!important;background:#fff!important;background-image:none!important;color:#334155!important;box-shadow:none!important;font-size:13px!important;font-weight:700!important}
  .top-nav-menu-toggle:hover{background:#f8fafc!important;transform:none!important;box-shadow:none!important}
  .top-nav-links{display:none!important;order:3!important;flex:0 0 calc(100% + 28px)!important;height:auto!important;margin:0 -14px!important;padding:7px 14px 12px!important;border-top:1px solid #e8edf3!important;background:#fff!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 22px!important}
  .top-nav-links.is-open{display:grid!important}
  .top-nav-links button{width:100%!important;height:44px!important;min-height:44px!important;padding:0 2px!important;justify-content:flex-start!important;border-bottom:1px solid #edf1f5!important;font-size:13.5px!important;color:#475569!important}
  .top-nav-links button::after{left:2px!important;right:auto!important;width:28px!important;bottom:-1px!important}
  .top-nav-links button.active{color:#173b70!important}
  .top-nav-logout{grid-column:1/-1!important;margin:4px 0 0!important;padding-left:2px!important;border-left:0!important;border-bottom:0!important;color:#64748b!important}
  .top-context-strip{min-height:34px!important;padding:2px 14px 7px!important;gap:10px!important;border-top:0!important}
  .top-assistant-pills{gap:12px!important}
  .top-assistant-pill{height:28px!important;min-height:28px!important}
}

@media(max-width:560px){
  .top-navigation-main{padding:0 10px!important}
  .top-brand-logo{width:138px!important;height:40px!important}
  .top-nav-menu-toggle{height:36px!important;min-height:36px!important;padding:0 10px!important}
  .top-nav-links{flex-basis:calc(100% + 20px)!important;margin-left:-10px!important;margin-right:-10px!important;padding-left:12px!important;padding-right:12px!important;grid-template-columns:1fr!important;gap:0!important}
  .top-nav-links button{height:43px!important;min-height:43px!important;font-size:13.5px!important}
  .top-context-strip{padding-left:10px!important;padding-right:10px!important}
  .top-context-label{display:none!important}
  .top-assistant-pills{width:100%!important}
}

@media(prefers-reduced-motion:reduce){.top-navigation *{transition:none!important}}

/* ===== SOURCE: ux-v8-2-header.css ===== */
/* MSI UX V8.2 — header alignment and local view refinement only. */

/* Global authenticated header: one clean row, larger official logo, consistent alignment. */
.top-navigation{min-height:76px!important}
.top-navigation-main{width:min(100%,1480px)!important;min-height:76px!important;height:76px!important;padding:0 30px!important;gap:34px!important;align-items:center!important}
.top-brand-button{min-height:70px!important;min-width:220px!important;padding:4px 0!important;align-items:center!important}
.top-brand-logo{width:214px!important;height:58px!important;object-fit:contain!important;object-position:left center!important}
.top-nav-links{height:76px!important;align-items:stretch!important}
.top-nav-links button{height:76px!important;min-height:76px!important;padding:0 14px!important;font-size:14.5px!important;line-height:1!important;align-items:center!important}
.top-nav-links button::after{bottom:0!important}
.top-nav-logout{margin-left:12px!important}
.top-context-strip{display:none!important}

/* Profile plan header: integrated with the card instead of floating labels. */
.assistant-plan-summary{align-items:flex-end!important;gap:24px!important;padding-bottom:18px!important;margin-bottom:16px!important;border-bottom:1px solid #e7edf4!important}
.assistant-plan-inline{display:flex!important;align-items:baseline!important;gap:7px!important;margin:0 0 7px!important;color:#173b70!important}
.assistant-plan-inline span{font-size:15px!important;line-height:1.2!important;font-weight:700!important;color:#64748b!important}
.assistant-plan-inline strong{font-size:20px!important;line-height:1.15!important;font-weight:790!important;letter-spacing:-.018em!important;color:#0f2748!important}
.assistant-plan-summary>div>p{margin:0!important;color:#64748b!important}
.assistant-config-head{padding:0 16px 8px!important}
.assistant-config-row{min-height:58px!important}

/* Conversation: one aligned action row; discovery remains first and primary. */
.conversation-capability-cta{display:none!important}
.conversation-quick-actions-unified{display:flex!important;align-items:center!important;gap:9px!important;flex-wrap:wrap!important;margin:14px 0 14px!important;padding:0!important}
.conversation-quick-actions-unified .native-suggestion{min-height:42px!important;margin:0!important}
.conversation-primary-action{order:-1!important;border-color:#c8d9ec!important;background:#f7fbff!important;color:#123f76!important;font-weight:760!important}
.conversation-primary-action .native-suggestion-icon{background:#eaf3fd!important;color:#1e5b99!important}

@media(max-width:1180px) and (min-width:961px){
  .top-navigation-main{padding:0 18px!important;gap:18px!important}
  .top-brand-button{min-width:180px!important}
  .top-brand-logo{width:178px!important;height:52px!important}
  .top-nav-links button{padding:0 9px!important;font-size:12.8px!important}
}

@media(max-width:960px){
  .top-navigation{min-height:64px!important}
  .top-navigation-main{height:auto!important;min-height:64px!important;padding:0 14px!important;gap:12px!important;align-items:center!important}
  .top-brand-button{min-height:58px!important;min-width:0!important}
  .top-brand-logo{width:168px!important;height:48px!important}
  .top-nav-links{height:auto!important}
  .top-nav-links button{height:44px!important;min-height:44px!important}
  .conversation-quick-actions-unified{gap:8px!important}
}

@media(max-width:560px){
  .top-navigation-main{padding:0 10px!important}
  .top-brand-logo{width:154px!important;height:44px!important}
  .conversation-quick-actions-unified{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .conversation-quick-actions-unified .native-suggestion{width:100%!important;justify-content:flex-start!important}
  .assistant-plan-summary{align-items:flex-start!important;gap:12px!important}
}

@media(prefers-reduced-motion:reduce){.top-navigation *{transition:none!important}}

/* ===== SOURCE: ux-v8-3-home.css ===== */
/* MSI UX V8.3 — brand legibility, home refinement and title hierarchy.
   Layout/visual layer only. Official MSI identity and business logic remain untouched. */

/* Header brand: official asset only, enlarged inside the current topbar height. */
.top-navigation-main{gap:22px!important}
.top-brand-button{width:250px!important;min-width:250px!important;height:76px!important;min-height:76px!important;padding:0!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;outline:none!important}
.top-brand-button:hover{background:transparent!important;box-shadow:none!important;transform:none!important}
.top-brand-button:focus-visible{outline:2px solid #b8cce2!important;outline-offset:-3px!important;border-radius:8px!important}
.top-brand-logo{width:250px!important;height:68px!important;max-width:none!important;object-fit:contain!important;object-position:left center!important;transform:scale(2.10)!important;transform-origin:left center!important;filter:none!important;opacity:1!important}

/* Home owns content only; brand belongs exclusively to the topbar. */
.home-brand-lockup,.home-brand-logo{display:none!important}
.home-page{padding-top:38px!important}
.home-hero{padding-top:0!important}

/* Global page title hierarchy: stronger eyebrow, calmer page title. */
.topnav-shell .page>.eyebrow,.topnav-shell .chat-page>header .eyebrow{font-size:13.5px!important;line-height:1.2!important;letter-spacing:.115em!important;font-weight:820!important;color:#50647c!important;margin-bottom:10px!important}
.topnav-shell .page>h1,.topnav-shell .chat-page>header h1{font-size:clamp(31px,2.8vw,40px)!important;line-height:1.06!important;letter-spacing:-.025em!important}
.home-welcome-title>span{font-size:clamp(21px,1.8vw,25px)!important;line-height:1.22!important;font-weight:660!important;color:#5e7085!important}
.home-welcome-title>strong{font-size:clamp(36px,3.1vw,44px)!important;line-height:1.03!important;letter-spacing:-.028em!important}
.home-hero .lead{font-size:clamp(19px,1.75vw,24px)!important}

/* Section titles on Home: compact, editorial and aligned with the new navigation language. */
.home-page .section-heading{margin-bottom:12px!important;align-items:flex-end!important}
.home-page .section-heading .eyebrow{font-size:12.5px!important;letter-spacing:.11em!important;color:#6c7f95!important;margin-bottom:6px!important}
.home-page .section-heading h2{font-size:22px!important;line-height:1.14!important;letter-spacing:-.018em!important;color:#17314f!important}

/* Recent conversations: lighter work-resumption cards, less CTA-like. */
.home-recent-section{margin-top:24px!important}
.home-recent-section .capability-grid{gap:12px!important}
.home-recent-card{min-height:112px!important;padding:16px 17px!important;border-radius:16px!important;background:linear-gradient(180deg,#ffffff 0%,#f8fbfe 100%)!important;border:1px solid #dce6f0!important;box-shadow:0 5px 16px rgba(27,55,87,.035)!important;gap:6px!important}
.home-recent-card:hover{background:#f7fbff!important;border-color:#c8d8e8!important;box-shadow:0 8px 20px rgba(27,55,87,.065)!important;transform:translateY(-1px)!important}
.home-recent-card .capability-icon{display:none!important}
.home-recent-card strong{font-size:15.5px!important;line-height:1.28!important;color:#17314f!important}
.home-recent-card>span:not(.capability-icon){font-size:12px!important;line-height:1.4!important;color:#718399!important}
.home-recent-card em{font-size:11.5px!important;color:#476d95!important;font-weight:730!important}

/* Capability discovery: same elegant language, softer blue-grey surfaces and restrained icon treatment. */
.home-skills-section{margin-top:28px!important}
.home-skills-section .capability-grid{gap:12px!important}
.home-skill-card{min-height:126px!important;padding:16px 17px!important;border-radius:16px!important;background:#fbfcfe!important;border:1px solid #e0e7ef!important;box-shadow:none!important;gap:7px!important}
.home-skill-card:hover{background:#f6f9fc!important;border-color:#cad8e6!important;box-shadow:0 8px 20px rgba(27,55,87,.055)!important;transform:translateY(-1px)!important}
.home-skill-card .capability-icon{width:30px!important;height:30px!important;border-radius:10px!important;background:#edf4fa!important;color:#3f6f9e!important;font-size:14px!important}
.home-skill-card strong{font-size:15px!important;line-height:1.25!important;color:#1c3551!important}
.home-skill-card>span:not(.capability-icon){font-size:12.2px!important;line-height:1.42!important;color:#687b90!important}
.home-skill-card em{font-size:11.5px!important;color:#52779d!important;font-weight:720!important}

/* Profile / multi-assistant: clear plan hierarchy, discoverable add flow, compact scalable list. */
.assistant-plan-inline{display:flex!important;align-items:baseline!important;gap:6px!important;line-height:1.2!important}
.assistant-plan-inline span,.assistant-plan-inline strong{font-size:15px!important;line-height:1.2!important}
.assistant-plan-inline span{font-weight:680!important;color:#53677e!important}
.assistant-plan-inline strong{font-weight:800!important;color:#17314f!important}
.assistant-plan-actions{display:flex!important;align-items:center!important;gap:12px!important;flex-wrap:wrap!important;margin-top:14px!important}
.assistant-plan-add{min-height:40px!important;padding:0 14px!important;border-radius:11px!important}
.assistant-plan-limit{font-size:12.5px!important;color:#6d8095!important;font-weight:620!important}
.assistant-config-table{max-height:332px!important;overflow:auto!important;overscroll-behavior:contain!important;scrollbar-gutter:stable!important}
.assistant-config-head{position:sticky!important;top:0!important;z-index:2!important;background:#fff!important}
.assistant-config-row{min-height:54px!important}

@media(max-width:1240px) and (min-width:961px){
  .top-brand-button{width:225px!important;min-width:225px!important}
  .top-brand-logo{width:225px!important;height:68px!important;transform:scale(1.95)!important}
  .top-navigation-main{gap:14px!important}
  .top-nav-links button{padding-left:8px!important;padding-right:8px!important;font-size:12.6px!important}
}

@media(max-width:960px){
  .top-brand-button{width:198px!important;min-width:198px!important;height:64px!important;min-height:64px!important}
  .top-brand-logo{width:198px!important;height:60px!important;transform:scale(1.80)!important}
  .home-page{padding-top:28px!important}
  .topnav-shell .page>h1,.topnav-shell .chat-page>header h1{font-size:clamp(30px,5vw,37px)!important}
}

@media(max-width:760px){
  .home-recent-section .capability-grid,.home-skills-section .capability-grid{grid-template-columns:1fr!important}
  .home-recent-card,.home-skill-card{min-height:104px!important}
  .home-welcome-title>span{font-size:19px!important}
  .home-welcome-title>strong{font-size:clamp(32px,9vw,39px)!important}
  .assistant-config-table{max-height:286px!important}
  .assistant-plan-actions{align-items:flex-start!important;flex-direction:column!important}
}

@media(max-width:560px){
  .top-brand-button{width:170px!important;min-width:170px!important}
  .top-brand-logo{width:170px!important;height:56px!important;transform:scale(1.65)!important}
  .topnav-shell .page>.eyebrow,.topnav-shell .chat-page>header .eyebrow{font-size:12.5px!important}
  .topnav-shell .page>h1,.topnav-shell .chat-page>header h1{font-size:30px!important}
}

@media(prefers-reduced-motion:reduce){.top-navigation *, .capability-card{transition:none!important}}

/* ===== SOURCE: ux-v8-4-assistant-lifecycle.css ===== */
/* MSI UX V8.4 — assistant lifecycle. Compact, accessible, no plan/billing changes. */
.assistant-name-cell{display:inline-flex!important;align-items:center!important;gap:8px!important;min-width:0!important}
.assistant-name-cell>span:first-child{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.assistant-default-badge{display:inline-flex!important;align-items:center!important;min-height:22px!important;padding:0 8px!important;border-radius:999px!important;background:#edf4fa!important;border:1px solid #d6e3ef!important;color:#486b8f!important;font-size:10.5px!important;line-height:1!important;font-weight:760!important;letter-spacing:.02em!important;flex:none!important}
.assistant-plan-archive{min-height:40px!important;padding:0 14px!important;border-radius:11px!important;background:#fff!important;color:#8b3f4e!important;border-color:#ead4d9!important;box-shadow:none!important}
.assistant-plan-archive:hover{background:#fff8f9!important;border-color:#dfbdc5!important;transform:none!important;box-shadow:none!important}
@media(max-width:760px){.assistant-default-badge{font-size:10px!important}.assistant-plan-archive{width:100%!important}}

/* ===== SOURCE: ux-v8-5-billing-gate.css ===== */
/* MSI UX V8.5 — billing access gate. Financial authorization only; no business-rule styling leaks. */
.billing-gate-shell{min-height:100dvh;display:grid;place-items:center;padding:32px 20px;background:linear-gradient(180deg,#f8fbfe 0%,#f3f7fb 100%)}
.billing-gate-card{width:min(680px,100%);background:#fff;border:1px solid #dbe5ef;border-radius:22px;padding:30px;box-shadow:0 18px 44px rgba(24,49,79,.08);display:grid;gap:18px}
.billing-gate-brand{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid #edf2f6}
.billing-gate-brand img{width:210px;height:58px;object-fit:contain;object-position:left center}
.billing-gate-status{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border-radius:999px;background:#fff4df;color:#865c13;border:1px solid #f0d49c;font-size:12px;font-weight:760;letter-spacing:.02em;white-space:nowrap}
.billing-gate-copy{display:grid;gap:10px}
.billing-gate-copy .eyebrow{margin:0;color:#60748a;font-size:12.5px;letter-spacing:.12em;font-weight:800;text-transform:uppercase}
.billing-gate-copy h1{margin:0;color:#102a4a;font-size:clamp(30px,5vw,42px);line-height:1.05;letter-spacing:-.025em}
.billing-gate-copy p{margin:0;color:#5d7086;line-height:1.55;font-size:15px}
.billing-gate-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.billing-gate-summary article{border:1px solid #e1e9f1;border-radius:14px;padding:14px 15px;background:#fbfdff;display:grid;gap:4px}
.billing-gate-summary span{font-size:11.5px;color:#73869b;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.billing-gate-summary strong{font-size:16px;color:#17314f}
.billing-gate-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:2px}
.billing-gate-actions button{min-height:44px;padding:0 16px;border-radius:12px}
.billing-gate-security{padding:12px 14px;border-radius:12px;background:#f4f8fc;color:#5c7087;font-size:12.5px;line-height:1.45}
.billing-validation-error .billing-gate-status{background:#fff1f0;color:#9a3d38;border-color:#efc4c0}
@media(max-width:620px){.billing-gate-card{padding:22px;border-radius:18px}.billing-gate-brand{align-items:flex-start;flex-direction:column}.billing-gate-brand img{width:190px}.billing-gate-summary{grid-template-columns:1fr}.billing-gate-actions{flex-direction:column}.billing-gate-actions button{width:100%}}