/* NanoSys Chat R6.1 — canonical responsive shell
   One DOM/state for desktop + mobile. Layout changes belong here, not in device-specific JS. */
:root{
  --ns-shell-list-w:390px;
  --ns-shell-bg:#eef4f7;
  --ns-shell-surface:#fff;
  --ns-shell-line:#dbe6eb;
}
html,body{width:100%;height:100%}
body.ns-messenger{margin:0;overflow:hidden}
body.ns-nav-enabled #app{height:100dvh;min-height:100dvh;box-sizing:border-box}

/* Shared desktop/tablet shell */
#app .messenger{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  height:100dvh!important;
  min-height:100dvh!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:minmax(320px,var(--ns-shell-list-w)) minmax(0,1fr)!important;
  direction:rtl!important;
  overflow:hidden!important;
  background:var(--ns-shell-bg)!important;
}
#app .messenger>.sidebar{
  position:relative!important;
  inset:auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  background:var(--ns-shell-surface)!important;
  border-left:1px solid var(--ns-shell-line)!important;
  overflow:hidden!important;
}
#app .messenger>.chat-pane{
  position:relative!important;
  inset:auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  overflow:hidden!important;
}
#app .messenger .pane-body,
#app .messenger .messages{min-height:0!important}
#app .messenger .pane-body{overflow-y:auto!important;overscroll-behavior:contain}
#app .messenger .messages{overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#app .messenger .topbar,
#app .messenger .chat-head,
#app .messenger .composer-wrap{box-sizing:border-box;width:100%}

/* Keep all popovers attached to the same shell on every viewport. */
#app .messenger .menu{z-index:120!important;max-height:min(70dvh,620px);overflow-y:auto}

/* Organization workspace follows the same list -> conversation state model. */
.ns-org-workspace{max-width:100vw!important;overflow:hidden!important}
.ns-org-body{min-width:0!important}
.ns-org-list,.ns-org-main{min-width:0!important}

/* Phone: one surface at a time. Same DOM; no separate mobile renderer. */
@media(max-width:760px){
  html,body,#app{width:100%!important;max-width:100%!important;height:100%!important;overflow:hidden!important}
  body.ns-nav-enabled #app{width:100%!important;margin:0!important;height:100dvh!important;min-height:100dvh!important}
  #app .messenger{
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
  }
  #app .messenger>.sidebar,
  #app .messenger>.chat-pane{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    min-width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    border:0!important;
  }
  #app .messenger:not(.chat-open)>.sidebar{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    z-index:2!important;
  }
  #app .messenger:not(.chat-open)>.chat-pane{display:none!important}
  #app .messenger.chat-open>.sidebar{display:none!important}
  #app .messenger.chat-open>.chat-pane{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    z-index:3!important;
  }

  #app .messenger .sidebar .topbar{
    padding-top:max(8px,env(safe-area-inset-top))!important;
  }
  #app .messenger .pane-body{
    padding-bottom:calc(var(--nsnav-h,72px) + env(safe-area-inset-bottom) + 12px)!important;
  }
  #app .messenger .chat-head{
    padding-top:max(8px,env(safe-area-inset-top))!important;
    min-width:0!important;
  }
  #app .messenger .chat-head .identity{min-width:0!important;flex:1 1 auto!important}
  #app .messenger .chat-head .identity-copy{min-width:0!important}
  #app .messenger .chat-head .identity-copy h2,
  #app .messenger .chat-head .identity-copy p{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #app .messenger .icon-btn.back{display:inline-grid!important;place-items:center}
  #app .messenger .desktop-only{display:none!important}
  #app .messenger .composer-wrap{
    position:relative!important;
    inset:auto!important;
    padding-bottom:max(8px,env(safe-area-inset-bottom))!important;
  }
  #app .messenger .composer{
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  #app .messenger .composer textarea{
    min-width:0!important;
    max-width:100%!important;
  }
  #app .messenger .menu{
    position:absolute!important;
    top:calc(100% + 6px)!important;
    right:8px!important;
    left:auto!important;
    width:min(320px,calc(100vw - 16px))!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 120px)!important;
    overflow-y:auto!important;
  }
  body.ns-chat-open .ns-primary-nav{display:none!important}

  /* Same responsive state for organizational/patient workspace. */
  .ns-org-workspace{
    left:0!important;
    right:0!important;
    top:0!important;
    bottom:calc(var(--nsnav-h,72px) + env(safe-area-inset-bottom))!important;
    width:100%!important;
  }
  .ns-org-body{display:block!important;position:relative!important;overflow:hidden!important}
  .ns-org-list,.ns-org-main{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    max-width:none!important;
  }
  .ns-org-workspace:not(.chat-open) .ns-org-list{display:grid!important}
  .ns-org-workspace:not(.chat-open) .ns-org-main{display:none!important}
  .ns-org-workspace.chat-open .ns-org-list{display:none!important}
  .ns-org-workspace.chat-open .ns-org-main{display:block!important}
  .ns-org-chat{height:100%!important;min-height:0!important}
  .ns-org-messages{min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
}

/* Narrow phones only tune density; they do not use another layout. */
@media(max-width:390px){
  :root{--ns-shell-list-w:100%}
  #app .messenger .chat-row{padding-inline:10px!important}
  #app .messenger .topbar{gap:6px!important}
}

/* R6.1 unified NanoSys visual system — shared by desktop and mobile */
:root{
  --ns-brand:#0b4f7a;
  --ns-brand-strong:#072d4a;
  --ns-brand-soft:#eaf5fb;
  --ns-accent:#f28b30;
  --ns-bg:#f3f7f9;
  --ns-surface:#ffffff;
  --ns-surface-2:#f8fbfc;
  --ns-line:#dce7ec;
  --ns-text:#173448;
  --ns-muted:#70808c;
  --ns-shadow:0 10px 28px rgba(10,50,76,.08);
  --ns-radius:18px;
}
body.ns-messenger{
  background:var(--ns-bg)!important;
  color:var(--ns-text)!important;
}
#app .messenger{background:var(--ns-bg)!important}
#app .messenger>.sidebar{
  background:rgba(255,255,255,.98)!important;
  box-shadow:-8px 0 30px rgba(12,45,67,.035)!important;
}
#app .messenger .topbar{
  min-height:72px!important;
  padding:12px 14px!important;
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--ns-line)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
#app .messenger .searchbox{
  background:#f2f6f8!important;
  border:1px solid transparent!important;
  border-radius:16px!important;
  min-height:46px!important;
  color:var(--ns-muted)!important;
  transition:.16s ease!important;
}
#app .messenger .searchbox:focus-within{
  background:#fff!important;
  border-color:#b9d7e6!important;
  box-shadow:0 0 0 4px rgba(11,79,122,.07)!important;
}
#app .messenger .searchbox input{
  color:var(--ns-text)!important;
  background:transparent!important;
}
#app .messenger .icon-btn{
  color:var(--ns-brand-strong)!important;
  border-radius:14px!important;
}
#app .messenger .icon-btn:hover{background:var(--ns-brand-soft)!important}
#app .messenger .chat-row{
  min-height:72px!important;
  padding:10px 13px!important;
  border-bottom:1px solid #edf2f4!important;
  background:#fff!important;
  transition:.14s ease!important;
}
#app .messenger .chat-row:hover{background:#f8fbfd!important}
#app .messenger .chat-row.active{
  background:linear-gradient(90deg,#eaf6fc,#f5fbfe)!important;
  box-shadow:inset -3px 0 0 var(--ns-brand)!important;
}
#app .messenger .chat-row .avatar,
#app .messenger .identity .avatar{
  box-shadow:0 5px 14px rgba(11,79,122,.13)!important;
}
#app .messenger .row-top b,
#app .messenger .identity-copy h2{color:var(--ns-text)!important}
#app .messenger .preview,
#app .messenger .row-top time,
#app .messenger .identity-copy p{color:var(--ns-muted)!important}
#app .messenger .badge{
  background:var(--ns-brand)!important;
  color:#fff!important;
  box-shadow:0 3px 8px rgba(11,79,122,.18)!important;
}
#app .messenger>.chat-pane{
  background:
    radial-gradient(circle at 20% 10%,rgba(11,79,122,.035),transparent 28%),
    linear-gradient(180deg,#edf5f8,#f7fafb)!important;
}
#app .messenger .chat-head{
  min-height:72px!important;
  padding:10px 16px!important;
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid var(--ns-line)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  box-shadow:0 4px 18px rgba(10,50,76,.035)!important;
}
#app .messenger .messages{
  padding:18px 20px!important;
  background:
    radial-gradient(circle at 1px 1px,rgba(11,79,122,.035) 1px,transparent 0) 0 0/22px 22px,
    linear-gradient(180deg,#edf5f8,#f6fafb)!important;
}
#app .messenger .msg{max-width:min(76%,720px)!important}
#app .messenger .bubble{
  background:#fff!important;
  border:1px solid #e2ebef!important;
  border-radius:18px 18px 18px 5px!important;
  box-shadow:0 5px 16px rgba(20,57,78,.055)!important;
  color:var(--ns-text)!important;
}
#app .messenger .msg.mine .bubble{
  background:#dff1fb!important;
  border-color:#c8e4f2!important;
  border-radius:18px 18px 5px 18px!important;
}
#app .messenger .reply-quote{
  border-right:3px solid var(--ns-brand)!important;
  background:rgba(11,79,122,.05)!important;
  border-radius:10px!important;
}
#app .messenger .msg-foot{color:var(--ns-muted)!important}
#app .messenger .checks.seen{color:var(--ns-brand)!important}
#app .messenger .composer-wrap{
  background:rgba(255,255,255,.97)!important;
  border-top:1px solid var(--ns-line)!important;
  box-shadow:0 -6px 18px rgba(10,50,76,.035)!important;
}
#app .messenger .composer{
  margin:8px 12px!important;
  padding:6px 8px!important;
  border:1px solid var(--ns-line)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 5px 18px rgba(10,50,76,.055)!important;
}
#app .messenger .composer textarea{
  color:var(--ns-text)!important;
  background:transparent!important;
}
#app .messenger .composer .send{
  background:var(--ns-brand)!important;
  color:#fff!important;
  border-radius:14px!important;
}
#app .messenger .fab{
  background:linear-gradient(145deg,#177caf,#0b5d8e)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(11,79,122,.25)!important;
}
#app .messenger .menu{
  background:rgba(255,255,255,.98)!important;
  border:1px solid var(--ns-line)!important;
  border-radius:18px!important;
  box-shadow:var(--ns-shadow)!important;
  padding:8px!important;
}
#app .messenger .menu button{
  min-height:44px!important;
  border-radius:12px!important;
  color:var(--ns-text)!important;
}
#app .messenger .menu button:hover{background:var(--ns-brand-soft)!important}
#app .messenger .menu button.danger{color:#b74848!important}
.modal-root:not([hidden]){
  background:rgba(5,24,38,.24)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
}
.modal-card{
  background:#fff!important;
  color:var(--ns-text)!important;
  border:1px solid rgba(220,231,236,.9)!important;
  border-radius:22px!important;
  box-shadow:0 22px 70px rgba(5,31,48,.18)!important;
}
.modal-head{border-bottom:1px solid #edf2f4!important}
.primary{
  background:var(--ns-brand)!important;
  border-color:var(--ns-brand)!important;
  color:#fff!important;
  border-radius:13px!important;
}
.secondary,.ghost{
  border-color:var(--ns-line)!important;
  background:#fff!important;
  color:var(--ns-text)!important;
}
.ns-primary-nav{
  background:rgba(255,255,255,.97)!important;
  border-color:var(--ns-line)!important;
}
.ns-primary-nav button.active{
  color:var(--ns-brand)!important;
  background:var(--ns-brand-soft)!important;
}
.ns-primary-nav .ns-nav-badge{background:var(--ns-accent)!important}

/* Organization/support share the same visual tokens. */
.ns-org-workspace{
  --org-navy:var(--ns-brand-strong);
  --org-blue:var(--ns-brand);
  --org-soft:var(--ns-brand-soft);
  --org-line:var(--ns-line);
  --org-orange:var(--ns-accent);
  --org-text:var(--ns-text);
  --org-muted:var(--ns-muted);
}
.ns-org-top,.ns-org-list,.ns-org-actions,.ns-org-composer{background:#fff!important}
.ns-org-main,.ns-org-chat{
  background:
    radial-gradient(circle at 1px 1px,rgba(11,79,122,.035) 1px,transparent 0) 0 0/22px 22px,
    linear-gradient(180deg,#edf5f8,#f7fafb)!important;
}
.ns-org-row.active{box-shadow:inset -3px 0 0 var(--ns-brand)!important}
.support-ticket-item{
  border:1px solid var(--ns-line)!important;
  border-radius:16px!important;
  background:#fff!important;
  margin:8px 0!important;
  overflow:hidden!important;
}
.support-history{
  border-top:1px solid var(--ns-line)!important;
  margin-top:14px!important;
  padding-top:12px!important;
}

/* Mobile keeps the exact same visual language; only density and navigation change. */
@media(max-width:760px){
  #app .messenger .messages{padding:12px 9px!important}
  #app .messenger .msg{max-width:88%!important}
  #app .messenger .chat-row{min-height:68px!important}
  #app .messenger .composer{margin:6px 8px!important;border-radius:18px!important}
  .modal-card{
    width:min(94vw,560px)!important;
    max-height:88dvh!important;
    overflow:auto!important;
  }
  .ns-primary-nav{
    border-radius:18px 18px 0 0!important;
    box-shadow:0 -8px 26px rgba(10,50,76,.09)!important;
  }
}