/*
  MMS UI — mms.css v5.1 10.16.2025
  Focused fixes:
  1) .sidebar-listIcon to 24px (size + flex)
  2) New button style for toggle placed inside #modeSegmented (right aligned, 24px icon)
     (keeps .sidebar-viewButton as a backwards-compatible alias)
  3) Modals reliably above all layers; visible when .is-open/.visible present
  4) Header layout so #profileBtn sits to the right of .tabs on the same line
  5) Ensure all header tabs (Clinical Study, Pipelines, etc.) are visible/scrollable
  6) Rightbar flyouts z-fixed + also support aria-expanded=true (touch)
  7) Chat button inside right rail + chat behaves like a modal with backdrop
  8) Chart area: resizable + safe bounds; JS snippet provided separately
*/

:root {
  --header-h: 64px;
  --footer-h: 48px;
  --rightbar-w: 64px;
  --sidebar-expanded: 280px;
  --sidebar-collapsed: 144px;
  --sidebar-w: var(--sidebar-expanded);/* default state */
  --z-modal: 5000;
  --z-chat: 4200;
  --z-rightbar: 1030;
  --z-header: 1020;
  --menu-h:56px;
  --chart-pad: 12px; --chrome-gap: 8px;       /* little breathing space */
  --ui-font: 14px;              /* your app base (fallback) */
  --metric-label-w:140px;
  --metric-value-w: 75px;      /* width of the value/input column */
  --metric-gap-x: 10px;         /* gap between label and value */
  --anx-header-h: 40px;
  --anx-header-bg: color-mix(in srgb, var(--main-container-bg) 85%, transparent);
  --nav-glow: 59 130 246; /* blue-500 as R G B */ 
}
html[data-theme="dark"] {
  --main-container-bg: #111827;  /* gray-900 */
  --analytics-panel-bg:rgba(255,255,255,0.5);
  --secondary-bg:      #1f2937;  /* gray-800 */
  --tertiary-bg: hsla(105 100% 60% / 0.18);
  --outlinecolor:      #e5e7eb;  /* gray-200 */
  --item-hover:        #374151;  /* gray-700 */
  --text-color:        #e5e7eb;  /* gray-200 */
  --muted-text:        #9ca3af;  /* gray-400 */
  --line:              #374151;  /* gray-700 */
  --btn-bg:            #E8FFD0;
  --btn-control:       #374151;
}
html[data-theme="light"] {
  --main-container-bg: #ffffff;
  --analytics-panel-bg:rgba(0,0,0,0.5);
  --secondary-bg:      #f3f4f6;
  --tertiary-bg: hsl(105 95% 86%); /* e.g., #E8FFD0-ish */
  --outlinecolor:      #111827;
  --item-hover:        #e5e7eb;
  --text-color:        #111827;
  --muted-text:        #6b7280;
  --line:              #e5e7eb;
  --btn-bg:            #E8FFD0;
  --btn-control:       #374151;
}


/* ------------------------------
   1) Header layout (brand, tabs, profile on one line)
-------------------------------*/
#main{
   color: var(--text-color)
}
#topRow {
position: fixed; inset: 0 0 auto 0;
height: var(--header-h); max-height: var(--header-h);
display: grid; grid-template-columns: max-content 1fr; align-items: center;
background: var(--main-container-bg); border-bottom: 1px solid var(--line);
z-index: var(--z-header);
padding-inline: 12px;
/* overflow: hidden; prevent children from increasing header box */
}
#brandbar { height: 100%; display: inline-flex; align-items: center; }
#brandbar #brandLogo { width: 118px; height: 48px; object-fit: contain; display: block; }
#row1Header { height: 100%; display: flex; align-items: center; gap: 12px; overflow: visible; }
#row1Header > h1 { margin: 0; line-height: 1.1; }

/* The main content starts exactly below the fixed header */
#monitoringGrid {
position: fixed !important; top: var(--header-h) !important; right: 0 !important; bottom: var(--footer-h) !important; left: 0 !important;
grid-template-rows: 1fr !important; grid-template-columns: auto 1fr !important; grid-template-areas: 'side work' !important;   padding-bottom: calc(var(--menu-h) * 2);
}
/* ----------------------------------
(3) Profile button footprint + popup menu
----------------------------------*/
#profileBtn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; }
#profileBtn img { width: 32px; height: 32px; border-radius: 50%; display: block; }
#profileBtn span { white-space: nowrap; }
/* Ensure menu is a floating layer and never contributes to header height */
#profileMenu.profile-menu {
position: absolute !important; z-index:var(--z-header); top: 40px; right: 0;
min-width: 240px; background: var(--main-container-bg); color: var(--text-color);
border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
padding: 8px; 
transition: transform 0.5s ease; 
display:none;/* explicitly hidden by default */
}
#profileMenu.visible, #profileMenu.is-open { display:block; transform: translateY(0); }
/* ----------------------------------
(6) Toggle-row switch (restore provided styles)
----------------------------------*/
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px; }
.toggle-row .switch {
position: relative; width: 36px; height: 20px; background: #ddd; border-radius: 10px;
}
.toggle-row .switch::after {
content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: left 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle-row .switch.on { background: #4f46e5; }
.toggle-row .switch.on::after { left: 18px; }

/* ----------------------------------
(4) Tabs styling (div.tabs > .tab)
----------------------------------*/
#row1Header .tabs { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: auto hidden; scrollbar-width: thin; }
#row1Header .tabs .tab {
border: 1px solid var(--line); border-bottom-color: color-mix(in srgb, var(--line), transparent 30%);
background: var(--secondary-bg); color: var(--text-color);
padding: 6px 10px; border-radius: 10px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
#row1Header .tabs .tab:hover { background: var(--item-hover); }
#row1Header .tabs .tab.active, #row1Header .tabs .tab[aria-selected="true"] {
border-color: var(--accent-1); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-1) 50%, transparent);
background: var(--main-container-bg);
}

/* ------------------------------
   2) Sidebar + icons
-------------------------------*/
.sidebar-container { width: var(--sidebar-expanded); --sidebar-w:var(--sidebar-expanded);height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--main-container-bg); color: var(--text-color); border-right: 1px solid var(--line); }
.sidebar-container.shrink { width: var(--sidebar-collapsed); --sidebar-w:var(--sidebar-collapsed);}
.sidebar-wrapper { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; padding: 12px; }
.list-area { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* 24px icons */
.sidebar-listItem { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; }
.sidebar-listItem svg,
.sidebar-listIcon { width: 24px; height: 24px; flex: 0 0 24px; }
.sidebar-listItem .sidebar-listItemText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Nested records hidden by default; shown with .visible */
.nested-records { display: none; margin: 6px 0 8px 36px; max-height: 180px; overflow-y: auto; border-left: 2px solid var(--item-hover); padding-left: 10px; }
/* ----------------------------------
(5) Nested-records spacing
----------------------------------*/
.nested-records { display: none; margin-top: 6px; margin-left: 6px; padding-left: 0; max-height: 180px; overflow-y: auto; border-left: 2px solid var(--item-hover); }
.nested-records.visible { display: block; }

/* ------------------------------
   3) Segmented tabs + in-segment toggle button (right side)
-------------------------------*/
#modeSegmented.segmented { display: flex; align-items: center; gap: 6px; border-radius: 12px 0 0 0; padding-right: 6px; }
#modeSegmented .slider { border-radius: 12px 0 0 0; }
#modeSegmented button.tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; }

/* New inline toggle button to shrink/expand sidebar */
/* Use class="view-toggle-btn" when placing the button inside #modeSegmented */
#modeSegmented .view-toggle-btn,
#modeSegmented .sidebar-viewButton { /* alias for back-compat */
  margin-left: auto; width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center; border: 1px solid var(--line);
  background: var(--secondary-bg); color: var(--text-color);
}
#modeSegmented .view-toggle-btn svg,
#modeSegmented .sidebar-viewButton svg { width: 24px; height: 24px; }
#modeSegmented .view-toggle-btn:hover { background: var(--item-hover); }

/* ------------------------------
   4) Work area between header & footer
-------------------------------*/
#appFooter { position: fixed; inset: auto 0 0 0; height: var(--footer-h); display: flex; align-items: center; justify-content: center; background: var(--main-container-bg); border-top: 1px solid var(--line); z-index: 1010; }
/* #workpane{padding-bottom:calc(var(--menu-h));} */
#workpane{padding-bottom:var(--menu-h);min-height: 0;}
/* Workpane theme normalization */
#workpane .bg-gray-800, #workpane .bg-gray-900 { background: var(--main-container-bg) !important; }
#workpane .border-gray-700 { border-color: var(--line) !important; }
#workpane .text-gray-200, #workpane .text-gray-300 { color: var(--text-color) !important; }

/* Chart area (resizable); canvas fills parent */
#chartRow { position: relative; max-height:calc(100dvh- var(--header-h)- var(--footer-h)- var(--menu-h)- (var(--chart-pad) * 2)- var(--chrome-gap)); flex: 1 1 auto;  min-height: 240px; resize: vertical; overflow: hidden; /* auto;  */  background: var(--main-container-bg) !important;  border-color: var(--line) !important;   padding: var(--chart-pad); box-sizing:border-box}
/* #statusCharts { height: calc(100vh -  160px); } header/footer */
/* #statusCharts canvas { width: 100% !important; height: 100% !important; display:block; }
#statusChart { width: 100% !important; height: 100% !important; display: block; max-height:inherit; min-height:inherit} */
/* outer: fills available space, scrolls horizontally */
#statusCharts {
  /* position: relative; */
  width: 100%;
  height: calc(95vh - 160px); /* whatever you already use */
  min-height: 420px;
  overflow-x: auto;
  overflow-y: hidden; /* keep y tidy */
}

/* inner: defines the actual timeline width */
#statusChartsScroller {
  /* position: relative; */
  height: 100%;
  /* width will be set in JS based on seconds * pxPerSec */
}

/* canvas fills the inner scroller width/height */
#statusCharts canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

#menuBar{position: sticky; bottom: 0; z-index: 10; height: var(--menu-h); display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--main-container-bg); border-top: 1px solid var(--line); backdrop-filter: saturate(140%) blur(6px); 
}
#menuBar .rb-item{position:relative;display:inline-flex;flex-direction:column;align-items:center;margin:0 4px;}
#menuBar .rb-btn--cta {display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--secondary-bg); color: var(--text-color); border: 1px solid var(--line);white-space: nowrap;}
#menuBar .rb-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--secondary-bg);color:var(--text-color);border:1px solid var(--line);}
#menuBar .rb-btn:focus-visible{outline:2px solid #22d3ee;outline-offset:2px;}
#menuBar .rb-flyout{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%, 8px) scale(.98);opacity:0;pointer-events:none;transition:transform .16s ease, opacity .16s ease;display:inline-flex;align-items:center;gap:8px;background:var(--main-container-bg);color:var(--text-color);border:1px solid var(--line);border-radius:16px;padding:6px 10px;box-shadow:0 10px 30px rgba(0,0,0,.18);white-space:nowrap;}
#menuBar .rb-flyout::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:10px;height:10px;background:var(--main-container-bg);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform-origin:center;transform:translateX(-50%) rotate(45deg);}
#menuBar .rb-item:hover .rb-flyout,
#menuBar .rb-item:focus-within .rb-flyout,#menuBar .rb-btn[aria-expanded="true"] + .rb-flyout{opacity:1;pointer-events:auto;transform:translate(-50%, 0) scale(1);}
#menubar .chat-button { position: absolute; bottom: 12px; right: 12px; width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.2); z-index: var(--z-chat);    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); transition: all 0.3s ease; z-index: 1000; border: none; }


.predict-btn {display: inline-flex; pointer-events: auto; align-items: center; width:200px; gap: 8px; padding: 8px 12px; border-radius: 7px; border: 1px solid var(--line); background: var(--secondary-bg); color: var(--text-color); font-size: 14px; font-weight: 600; box-shadow: 0 6px 16px rgba(0,0,0,.12);}
.predict-btn:hover { background: var(--item-hover); }
.predict-btn[disabled] { opacity: .5; cursor: not-allowed; }
.predict-btn svg { flex: 0 0 18px; }

#analyticsRow{position:fixed!important;flex-direction: column;top:calc(var(--header-h) + 12px)!important;right:16px!important;width:min(280px, 92vw)!important;max-height:calc(100vh - var(--header-h) - var(--footer-h) - var(--menu-h) - 24px)!important;display:none;flex-direction:column;gap:10px;padding:12px;background:var(--analytics-panel-bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.28);overflow:auto;z-index:calc(var(--z-rightbar) + 10);}
#analyticsRow.is-open{display:flex;}
#analyticsRow{flex:none!important;min-height:0!important;}


/* 1) Analytics panel font: exactly 2px smaller than base */
#analyticsRow{font-size: calc(var(--ui-font, 14px) - 2px); line-height: 1.25;}

/* Optional: slightly tighter section headings in the panel */
#analyticsRow h3, #analyticsRow h4{ margin: 10px 0 6px; line-height: 1.2;}

/* two fixed columns: label | value */
#analyticsRow .metric-row{
  display: grid;
  grid-template-columns: var(--metric-label-w) var(--metric-value-w);
  column-gap: var(--metric-gap-x);
  align-items: start;              /* top-align multi-line labels */
}

/* let labels wrap within the fixed label column */
#analyticsRow .metric-row > .metric-label,
#analyticsRow .metric-row > label:first-child,
#analyticsRow .metric-row > span:first-child{
  white-space: normal;             /* was: nowrap */
  overflow-wrap: anywhere;         /* break long tokens if needed */
}

/* keep inputs aligned to same left edge */
#analyticsRow .metric-row > input,
#analyticsRow .metric-row > select,
#analyticsRow .metric-row > .metric-value,
#analyticsRow .metric-row > .value{
  justify-self: start;
  width: 100%;
  max-width: var(--metric-value-w);
  box-sizing: border-box;
}

/* Responsive tweak: narrow value column on small screens */
@media (max-width: 480px){:root{ --metric-value-w: 130px; }}


/* Header bar */
#analyticsRow .anx-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--anx-header-h);
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  background: var(--anx-header-bg);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

#analyticsRow .anx-title{
  font-weight: 600;
  font-size: calc((var(--ui-font,14px) - 2px) + 1px);
}

/* Header buttons */
#analyticsRow .anx-controls{ display: inline-flex; gap: 6px; }
#analyticsRow .anx-btn{
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--secondary-bg); color: var(--text-color);
}
#analyticsRow .anx-btn:hover{ filter: brightness(1.05); }

/* Body area scrolls; transition for collapse */
#analyticsRow .anx-body{
  overflow: auto;                 /* your panel already had overflow; keep it on body */
  padding: 12px;
  max-height: calc(100% - var(--anx-header-h));
  transition: max-height .18s ease, padding .18s ease;
}

/* Minimized state: collapse the body but keep header visible */
#analyticsRow.is-minimized .anx-body{
  max-height: 0;
  padding-top: 0; padding-bottom: 0;
  overflow: hidden;
}

/* Flip the chevron when minimized */
#analyticsRow.is-minimized #anxMinBtn svg{ transform: rotate(180deg); transition: transform .18s; }
#anxMinBtn svg{ transition: transform .18s; }

/* ------------------------------
   5) Modals (generic + legacy) — top-most and visible with .is-open/.visible
-------------------------------*/
.app-modal__backdrop, .modal-backdrop {
  position: fixed !important; inset: 0 !important; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.5);
  z-index: var(--z-modal) !important;
}
.app-modal__backdrop.is-open,
.modal-backdrop.is-open,
.app-modal__backdrop.visible,
.modal-backdrop.visible { display: flex !important; }
.app-modal { background: var(--main-container-bg); color: var(--text-color); width: min(560px, 92vw); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.35); max-height: 85vh; overflow: hidden; }

/* ------------------------------
   6) Rightbar + flyouts (hover and aria-expanded)
-------------------------------*/


/* ------------------------------
   7) Chat in right rail + modal visualization
-------------------------------*/
/* When chat button is placed inside #rightbar */


/* Chat behaves like a modal overlay when active */
.chat-modal { position: fixed; inset: 0; display: none; z-index: calc(var(--z-chat) + 1); }
.chat-modal.active { display: flex; /*! align-items: flex-end; */ justify-content: flex-end; padding: 16px; justify-content: center;}
.chat-modal.active::before { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: -1; }
.chat-container { background: white; border-radius: 20px; /*! width: min(420px, 96vw); */ /*! height: min(70vh, 760px); */ /*width: 100%; */ /*! height: 100%; */ display: flex; flex-direction: column; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); overflow: hidden; animation: slideUp 0.3s ease;
    
}
@keyframes slideUp {from {transform: translateY(50px);opacity: 0;} to {transform: translateY(0); opacity: 1;}}

.chat-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; display: flex; align-items: center; justify-content: space-between; }
.chat-header h3 { margin: 0; font-size: 18px; font-weight: 600; }
.close-btn { background: none; border: none; color: white; font-size: 20px; cursor: pointer; padding: 5px; border-radius: 50%; transition: background 0.3s ease; }
.close-btn:hover { background: rgba(255, 255, 255, 0.2); }

.chat-messages { flex: 1; padding: 20px; overflow-y: auto; background: #f8f9fa; }
.message { margin-bottom: 15px; display: flex; align-items: flex-start; }
.message.user { justify-content: flex-end; }
.message-bubble { max-width: 80%; padding: 12px 16px; border-radius: 18px; font-size: 14px; line-height: 1.4; white-space: pre-wrap;}
.message.bot .message-bubble { background: white; color: #333; border-bottom-left-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.message.user .message-bubble { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-bottom-right-radius: 6px; }

.chat-input-container { padding: 20px; background: rgb(255, 255, 255); border-top: 1px solid #e1e5e9; display: flex; gap: 10px; }
.chat-input { flex: 1; padding: 12px 16px; border: 2px solid #e1e5e9; border-radius: 25px; font-size: 14px; outline: none; transition: border-color 0.3s ease; }
.chat-input:focus { border-color: #667eea; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-10px); opacity: 1; } }

.send-btn { width: 45px; height: 45px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 50%; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
.send-btn:hover { transform: scale(1.05); }
.typing-indicator { display: none; padding: 10px 16px; background: white; border-radius: 18px; border-bottom-left-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); max-width: 80px; }
.typing-dots { display: flex; gap: 4px; }
.typing-dots span { width: 8px; height: 8px; background: #667eea; border-radius: 50%; animation: typing 1.4s infinite; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

/*new functions*/
 .chat-modal{   border-radius:12px; overflow:hidden; box-shadow:010px 30px rgba(0,0,0,0.2); } 
.chat-modal.active{display:grid;}
.chat-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; padding:15px 20px; display:flex; align-items:center; justify-content:space-between;}
.flex{display:flex;}
.items-center{align-items:center;}
.mr-3{margin-right:15px;}
.bot-avatar{width:40px; height:40px; border-radius:50%; overflow:hidden; background:white; display:flex; align-items:center; justify-content:center;}
.header-actions{display:flex; gap:10px;}
.chatmax-btn,.close-btn,.toggle-details-btn{background:rgba(255,255,255,0.2); border:none; color:white; width:32px; height:32px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.3s ease;}
.chatmax-btn:hover,.close-btn:hover,.toggle-details-btn:hover{background:rgba(255,255,255,0.3);   }    /*Three-column layout*/
.chat-content{display:flex; }    /*Leftcolumn-Details*/
.left-column{flex:1; background:#f0f2f5; border-right:1px solid #e1e5e9; display:none; flex-direction:column; order:1;}
.left-column.visible{display:flex;}
.details-header{padding:15px; background:white; border-bottom:1pxsolid#e1e5e9; font-weight:600; color:#6a11cb; display:flex; justify-content:space-between; align-items:center;}
.details-content{flex:1; padding:15px; overflow-y:auto;}
.detail-section{margin-bottom:20px;}
.detail-sectionh4{margin-bottom:10px; color:#6a11cb;}
.detail-item{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #eee;}
.detail-item:last-child{border-bottom:none;}    /*Middlecolumn-Chat*/
.middle-column{flex:2; display:flex; flex-direction:column; order:2;}
.chat-messages{flex:1 1 0; padding:20px; overflow-y:auto; background:#f8f9fa;}
.message{margin-bottom:15px; display:flex; align-items:flex-start;}
.message.user{justify-content:flex-end;}
.message-bubble{max-width:80%; padding:12px 16px; border-radius:18px; font-size:14px; line-height:1.4;}
.message.bot.message-bubble{background:white; color:#333; border-bottom-left-radius:6px; box-shadow:02px 8px rgba(0,0,0,0.1);}
.message.user.message-bubble{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; border-bottom-right-radius:6px;}
.chat-input-container{padding:20px; background:white; border-top:1pxsolid#e1e5e9; display:flex; gap:10px;}
.chat-input{flex:1; padding:12px 16px; border:2px solid#e1e5e9; border-radius:25px; font-size:14px; outline:none; transition:border-color 0.3s ease;}
.chat-input:focus{border-color:#667eea;}
.send-btn{width:45px; height:45px; background:linear-gradient(135deg,#667eea 0%, #764ba2 100%); border:none; border-radius:50%; color:white; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform 0.2s ease;}
.send-btn:hover{transform:scale(1.05);}    /*Rightcolumn*/
.right-column{width:180px; background:#f8f9fa; border-left:1px solid #e1e5e9; display:flex; flex-direction:column; order:3;}
.mpe-container{background:white; padding:15px 10px; flex:1; display:flex; flex-direction:column;}
.mpe-header{font-weight:600; margin-bottom:12px; color:#6a11cb; font-size:14px; padding:05px; text-align:center;}
.mpe-content{flex:1; background:#f8f9fa; border-radius:6px; padding:10px; display:flex; flex-direction:column;}
.mpe-item{padding:10px 5px; margin:6px0; background:white; border-radius:6px; cursor:pointer; transition:all 0.2s ease; border:1px solid #e1e5e9; font-size:13px; text-align:center; display:flex; flex-direction:column; align-items:center;}
.mpe-itemi{margin-bottom:5px; font-size:16px;}
.mpe-item:hover{background:#6a11cb; color:white; transform:translateY(-2px); box-shadow:04px8px rgba(106,17,203,0.3);}
.mpe-item.active{background:#6a11cb; color:white;}
.open-chat-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; border:none; padding:15px 30px; border-radius:30px; font-size:18px; cursor:pointer; box-shadow:05px 15px rgba(0,0,0,0.2); transition:all 0.3s ease;}
.open-chat-btn:hover{transform:translateY(-3px); box-shadow:08px 20px rgba(0,0,0,0.3);}
@media(max-width:992px){
  .chat-content{flex-direction:column; height:auto;}
  .left-column,
  .right-column{border:none; border-bottom:1pxsolid#e1e5e9; width:100%;}
  .right-column{order:1;}.middle-column{order:2;}.left-column{order:3;}
  .mpe-container{min-height:auto;}
  .mpe-content{flex-direction:row; flex-wrap:wrap; gap:10px; justify-content:center;}
  .mpe-item{width:45%; margin:5px 0;}.left-column{min-height:250px;}
}
/* ----------------------------------
(7) Modals stay above all (re-affirm)
----------------------------------*/
.app-modal__backdrop, .modal-backdrop { position: fixed !important; inset: 0 !important; z-index: var(--z-modal) !important; display: none; }
.app-modal__backdrop.is-open, .modal-backdrop.is-open, .app-modal__backdrop.visible, .modal-backdrop.visible { display: flex !important; align-items: center; justify-content: center; background: rgba(0,0,0,.5); }
.app-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid #eee;
}
.app-modal__title { margin: 0; font-size: 16px; font-weight: 600; }
.app-modal__close {
  border: 0; background: transparent; cursor: pointer; padding: 6px; border-radius: 8px;
}
.app-modal__close:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }

.app-modal__body { padding: 16px 18px; overflow: auto; }
.app-field { display: grid; gap: 6px; margin-bottom: 12px; }
.app-field label { font-size: 12px; color: #555; }
.app-field input, .app-field select, .app-field textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #ddd; font: inherit;background:var(--secondary-bg);
}

.app-row { display: flex; gap: 12px; }
.app-row > * { flex: 1; }

.app-modal__footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px; border-top: 1px solid #eee;
}
.modal-btn {
  border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer; font: inherit;
}
.modal-btn.secondary { background: var(--secondary-bg,#f3f4f6); outline: 1px solid var(--outlinecolor);}
.modal-btn.primary { background: var(--primary-bg,#251d33); color: #fff; outline: 1px solid var(--outlinecolor); }
.modal-btn:focus-visible { outline: 2px solid var(--outlinecolor); outline-offset: 2px; }
.modal-btn:hover { outline: 2px solid var(--outlinecolor); outline-offset: 2px; }
/* Keep chat above header but below modals */
.chat-button { z-index: var(--z-chat) !important; }
.chat-modal { z-index: calc(var(--z-chat) + 1) !important; align-content: end;}
/* ------------------------------
   8) Focus-visible + scrollbars (keep)
-------------------------------*/
:where(a, button, [role="button"], .sidebar-listItem, .segmented button, .rb-btn):focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--secondary-bg); }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-color) 20%, transparent); border-radius: 10px; border: 2px solid var(--secondary-bg); }

.sidebar-listItem.active{background:var(--secondary-bg)}

/*-------------------------------------
SCREENS
--------------------------------------*/
/* The screen container should be able to take an explicit height */
.screen {display: flex; flex-direction: column; min-height: 0;}  

/* The iframe should fill whatever height we give the screen */
.screen iframe, .screen .embed-frame {flex: 1 1 auto; min-height: 0; width: 100%; height: auto; border: 0;}


.mini-remove-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:6px; border-radius:50%;
  border:1px solid var(--border-color, #060505);
  background: var(--btn-bg, #f6f6f6);
  color:var(--btn-control,#000000);
  font-size:12px; line-height:1; cursor:pointer; opacity:.75;
}
.mini-remove-btn:hover{ opacity:1; }
.mini-remove-btn.selected{
  background: var(--btn-selected-bg, #ffecec);
  border-color: var(--btn-selected-border, #e88);
}


/* to modify chat modal */
/* === Chat sizing + compact paddings + tunable columns === */
#chatModal {
  /* Scoped variables so you can override per-instance if ever needed */
  --chat-w: 920px;          /* overall modal width */
  --chat-h: 560px;          /* overall modal height */
  --chat-pad: 8px;          /* compact internal padding */
  --chat-left-w: 380px;     /* left column width (px) */
  --chat-right-w: 100px;    /* keep your existing right column width */
  --chat-mid-flex: 1 1 auto;/* middle column flex (e.g. "0 0 520px" to fix width) */
}

/* Smaller dialog box by default */
#chatModal .chat-container {
  width: min(var(--chat-w), 96vw);
  height: min(var(--chat-h), 90vh);
  border-radius: 14px;
}

/* Make the backdrop padding tighter (was 16px) */
#chatModal.chat-modal.active { padding: 12px; }

/* Compact internals */
#chatModal .chat-header { padding: calc(var(--chat-pad) + 4px) var(--chat-pad); }
#chatModal .chat-messages { padding: var(--chat-pad); }
#chatModal .chat-input-container { padding: var(--chat-pad); gap: 8px; }
#chatModal .chat-input { padding: 10px 12px; }

/* Columns — turn ratios into explicit, customizable widths */
#chatModal .chat-content { display: flex; min-height: 0; }
#chatModal .left-column  { flex: 0 0 var(--chat-left-w); min-width: 0; }
#chatModal .middle-column{ flex: var(--chat-mid-flex); min-width: 0; }
#chatModal .right-column { flex: 0 0 var(--chat-right-w); width: var(--chat-right-w); }

/* Maximize state uses the existing JS 'is-max' class */
#chatModal.is-max .chat-container {
  width: min(96vw, 1400px);
  height: min(92vh, 1000px);
  border-radius: 12px;
}

/*nav bar buttong glow */
/* --- Nav toggle glow (top menuBar) --- */


#menuBar .rb-btn {
  transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

/* ON state: aria-expanded/pressed or helper class .is-on */
#menuBar .rb-btn[aria-expanded="true"],
#menuBar .rb-btn[aria-pressed="true"],
#menuBar .rb-btn.is-on {
  border-color: rgb(var(--nav-glow) / 0.55);
  box-shadow:
    0 0 0 2px rgb(var(--nav-glow) / 0.45),
    0 0 0 6px rgb(var(--nav-glow) / 0.20),
    0 8px 24px rgb(var(--nav-glow) / 0.22);
  background: color-mix(in srgb, var(--secondary-bg), rgb(var(--nav-glow)) 10%);
}

/* OFF state */
#menuBar .rb-btn[aria-expanded="false"],
#menuBar .rb-btn[aria-pressed="false"] {
  box-shadow: none;
}

/* If you have a dedicated nav toggle id (optional) */
#navToggle[aria-expanded="true"],
#navToggle[aria-pressed="true"] { 
  border-color: rgb(var(--nav-glow) / 0.55);
  box-shadow:
    0 0 0 2px rgb(var(--nav-glow) / 0.45),
    0 0 0 6px rgb(var(--nav-glow) / 0.20),
    0 8px 24px rgb(var(--nav-glow) / 0.22);
  background: color-mix(in srgb, var(--secondary-bg), rgb(var(--nav-glow)) 10%);
}


/* Gestational Age in the Sidebar*/
/* Tiny GA badge shown before the patient icon */

/* Positioning wrapper for the icon so the pill can overlay it */
.sidebar-listItem .icon-wrap{
  position: relative;
  display: inline-grid;       /* centers the icon nicely */
  place-items: center;
  inline-size: 24px;          /* match your icon size */
  block-size: 24px;
  margin-right: 8px;          /* spacing before the label */
}

/* Ensure the SVG fits the wrapper */
.sidebar-listItem .icon-wrap .sidebar-listIcon{
  width: 100%;
  height: 100%;
  display: block;
}

/* GA pill styled as a small corner tag layered on the icon */
.pill.ga-pill{
  position: absolute;
  top: -10px;                  /* nudge to sit on the corner */
  left: 3px;
  transform: translate(0, 0);
  padding: 1px 5px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  border-radius: 999px;

  /* Theme-aware colors (falls back if a var is missing) */
  color: var(--text-color, #111);
  background: var(--tertiary-bg, #f6f7f9);
  border: 1px solid var(--line, #dcdfe4);

  /* Layer above the icon, but ignore mouse so row remains clickable */
  z-index: 1;
  pointer-events: none;

  /* Subtle depth */
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.pill.ga-pill.is-empty{ opacity: .6; font-weight: 600; }


/* Chart segment selection tools */
#chartRow{
   position:relative;
}

/* Toolbar */
.ap-toolbar{ display:grid; grid-template-columns: repeat(4, 1fr); gap:.5rem; }
.tool-btn{
  border:1px solid color-mix(in srgb, var(--text-color,#111) 15%, transparent);
  background: color-mix(in srgb, var(--surface,#fff), var(--text-color,#111) 3%);
  border-radius: 12px; padding:.4rem .5rem; cursor:pointer; font-size:16px;
}
.tool-btn[aria-pressed="true"]{
  outline:2px solid color-mix(in srgb, var(--accent,#6c5ce7), white 30%);
  outline-offset: 2px;
}

/* List header */
.ap-list-head{
  margin-top:.25rem;
  padding:.35rem .6rem; text-align:center;
  font: 700 13px/1 var(--ui-font, system-ui);
  color: var(--text-subtle, #222);
  background: color-mix(in srgb, var(--surface,#fff), var(--text-color,#111) 4%);
  border-radius: 10px;
}

/* List */
.ap-list{
  flex:1; overflow:auto; padding:.25rem; border-radius:10px;
  background: color-mix(in srgb, var(--surface,#fff), var(--text-color,#111) 6%);
  border:1px solid color-mix(in srgb, var(--text-color,#111) 10%, transparent);
}

/* List item */
.seg-item{
  display:grid; grid-template-columns: 28px 1fr auto 130px;
  align-items:center; gap:.4rem; padding:.35rem .4rem;
  border-radius:8px; border:1px solid transparent; margin:.25rem 0;
  user-select:none; cursor:pointer;
  background: color-mix(in srgb, var(--surface,#fff), var(--text-color,#111) 2%);
}
.seg-item:hover{ border-color: color-mix(in srgb, var(--text-color,#111) 12%, transparent); }
.seg-item.active{
  background: color-mix(in srgb, var(--accent,#6c5ce7), white 78%);
  border-color: color-mix(in srgb, var(--accent,#6c5ce7), white 40%);
}
.seg-eye{ width:26px; height:26px; display:grid; place-items:center; border-radius:6px; border:1px solid color-mix(in srgb, var(--text-color,#111) 12%, transparent); background:transparent; }
.seg-eye[data-hidden="true"]{ opacity:.45; }
.seg-kind{ font: 700 12px/1 var(--ui-font, system-ui); padding:.15rem .4rem; border-radius:6px; background:#2f80ed1c; }
.seg-range{ font: 12px/1.2 var(--ui-font, system-ui); color:#333; }
.seg-anno{
  width: 128px; border-radius:8px; padding:.25rem .3rem;
  border:1px solid color-mix(in srgb, var(--text-color,#111) 15%, transparent);
  background: white;
}


/**************************************************************************/
/* Annotate Panel */
/* ==== Annotate Pane (floating, draggable, minimizable) ==== */
#annotatePane{
  position: fixed !important;
  top: calc(var(--header-h) + 32px) !important;
  left: 290px !important;
  width: min(320px, 92vw) !important;
  max-height: calc(100vh - var(--header-h) - var(--footer-h) - var(--menu-h) - 24px) !important;
  display: none; /* toggled via .is-open */
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: var(--analytics-panel-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
  overflow: hidden; /* header pinned, body scrolls */
  z-index: calc(var(--z-rightbar) + 11);
  font-size: calc(var(--ui-font, 14px) - 2px);
}
#annotatePane.is-open { display: flex; }

#annotatePane .ap-header{
  display:flex; align-items:center; justify-content:space-between;
  height: var(--anx-header-h);
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  background: var(--anx-header-bg);
  cursor: move; /* drag handle */
  user-select: none;
}
#annotatePane .ap-title{ font-weight:600; }

#annotatePane .ap-controls{ display:inline-flex; gap:6px; }
#annotatePane .ap-btn{
  display:inline-grid; place-items:center;
  width:28px; height:28px;
  border-radius:8px; border:1px solid var(--line);
  background: var(--secondary-bg); color: var(--text-color);
}
#annotatePane .ap-btn:hover{ filter: brightness(1.05); }

#annotatePane .ap-body{
  overflow:auto;
  padding: 10px;
  max-height: calc(100% - var(--anx-header-h) - 44px); /* footer 44px */
  transition: max-height .18s ease, padding .18s ease;
}
/* Minimized: keep header, collapse body+footer */
#annotatePane.is-minimized .ap-body{ max-height: 0; padding-top:0; padding-bottom:0; overflow:hidden; }
#annotatePane.is-minimized .ap-foot{ display:none; }
#apMinBtn svg{ transition: transform .18s; }
#annotatePane.is-minimized #apMinBtn svg { transform: rotate(180deg); }

#annotatePane .ap-toolbar{ display:flex; gap:6px; margin-bottom:8px; }
#annotatePane .tool-btn{
  display:inline-grid; place-items:center;
  min-width:28px; height:28px; border-radius:8px;
  border:1px solid var(--line); background: var(--secondary-bg); color: var(--text-color);
}
#annotatePane .tool-btn[aria-pressed="true"]{ outline: 2px solid color-mix(in srgb, var(--nav-glow) 60%, transparent); }

#annotatePane .ap-list-head{ font-weight:600; margin:6px 0 4px; }
#annotatePane .ap-list{ display:flex; flex-direction:column; gap:6px; }

#annotatePane .ap-foot{
  display:flex; gap:6px; padding: 6px 10px; border-top:1px solid var(--line); background: var(--main-container-bg);
}
#annotatePane .icon-btn{
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:8px; border:1px solid var(--line);
  background: var(--secondary-bg); color: var(--text-color);
}
#annotatePane .icon-btn.danger{ border-color:#b91c1c; }

/* Drag feedback */
#annotatePane.is-dragging{ opacity:.92; cursor: grabbing; }
/*************************************************************************/
#chartRow{
  display:grid;
  grid-template-rows: 2fr 1fr; /* 2/3 + 1/3 */
  height:100%;
  overflow:hidden;
}
#chartRow > div{ min-height:0; }            /* allow shrink */
#chartRow canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

/****************NOTES****************/
/* Make backdrop lighter (more transparent) just for notes modal */
#notesModal.modal-backdrop {
  background: rgba(0, 0, 0, 0.25); /* adjust 0.25–0.35 to taste */
}

/* Large modal sizing like profile/settings, with flexible body area */
#notesModal .app-modal {
  position: fixed;                 /* enables drag positioning */
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(960px, 96vw);         /* large width */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/* Body fills remaining space, textarea fills body */
#notesModal .app-modal__body {
  padding: 12px 16px;
  flex: 1 1 auto;
  display: flex;
  min-height: 200px;
}

/* Full-width, flexible-height textarea */
#notesModal #notesTextarea {
  flex: 1 1 auto;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 180px;
  box-sizing: border-box;
  resize: vertical; /* keep vertical resize, or change to both */
}

/* Optional: show “grabbable” cursor on header to hint dragging */
#notesModal .app-modal__header { cursor: move; }

/* Show/hide control via class, consistent with your other modals */
#notesModal.is-open { display: block; }
#notesModal[hidden] { display: none !important; }

/* While dragging, we remove the centering transform; keep it stable */
#notesModal .app-modal.dragging { transition: none; }

/* ── Zoom Panel: top-right of #chartRow ───────────────────────────────────── */
#chartRow { position: relative; } /* ensure the panel anchors correctly */

#ctgZoomPanel {
  position: absolute;
  top: 8px;
  left: 8px; /*calc(var(--sidebar-w) + 8px);*/ /* logical “left” */
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--main-container-bg, #111) 85%, #000 15%);
  /* nice translucent glass if supported */
  background: rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line, rgba(255,255,255,0.14));
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  color: var(--text-color, #e5e7eb);
  user-select: none;
}
/* Only for the zoom panel */
#ctgZoomPanel.hidden,
#ctgZoomPanel[aria-hidden="true"] {
  display: none;
}


#ctgZoomPanel button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 6px;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 0;
}

#ctgZoomPanel button:hover { background: rgba(255,255,255,0.08); }
#ctgZoomPanel button:active { transform: translateY(1px); }
#ctgZoomPanel button:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

#ctgZoomPanel svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

#ctgZoomPanel .divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.14);
  margin: 0 4px;
}

#ctgZoomPanel .zoom-label {
  min-width: 46px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  opacity: 0.9;
}

/* High-contrast / light theme friendliness */
@media (prefers-color-scheme: light) {
  #ctgZoomPanel {
    background: rgba(255,255,255,0.75);
    color: #111827;
    border-color: rgba(0,0,0,0.12);
  }
  #ctgZoomPanel button:hover { background: rgba(0,0,0,0.06); }
  #ctgZoomPanel .divider { background: rgba(0,0,0,0.12); }
}