/* 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}}