:root{
	--sideGap: 1px;             /* gap between drawer and chat card */
	--railW: 56px;               /* rail width */
	--panelW: 352px;             /* panel width */
	--appW: 48rem;               /* Tailwind max-w-3xl (width of #app on desktop) */
}

/* Freeze all transitions on first paint; we remove .no-anim in JS */
.no-anim, .no-anim * {
	transition: none !important;
	animation: none !important;
}


/* (kept) Toggle Switch Styling */
.switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 20px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.3s;
	border-radius: 9999px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 14px;
	width: 14px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: 0.3s;
	border-radius: 50%;
}

input:checked+.slider {
	background-color: #3b82f6;
}

input:checked+.slider:before {
	transform: translateX(20px);
}

/* (kept) textarea behavior */
textarea {
	max-height: 200px;
	overflow-y: hidden;
	resize: none;
	scrollbar-width: none;
}

textarea::-webkit-scrollbar {
	width: 0;
	height: 0;
}

/* System prompt: start small, scroll when needed */
#systemPrompt{
	height: auto;         /* respect rows attribute for initial size */
	min-height: 0;        /* don't force it taller than rows */
	max-height: 260px;    /* cap so it doesn't take over */
	overflow-y: auto;     /* enable internal scroll */
	resize: vertical;     /* user can drag taller/shorter */
	scrollbar-width: thin;/* Firefox: thin scrollbar */
}

/* WebKit scrollbar just for system prompt */
#systemPrompt::-webkit-scrollbar{ width: 8px; height: 8px; }
#systemPrompt::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:9999px; }
#systemPrompt::-webkit-scrollbar-track{ background:transparent; }



/* Structured outputs + Tools: compact start, scroll when content overflows */
#txtStructured,
#txtTools{
	height: auto;          /* respect the rows attr for initial size */
	min-height: 0;         /* don't force taller than rows */
	max-height: 260px;     /* cap so they don't take over the panel */
	overflow-y: auto;      /* show internal scrollbar when needed */
	resize: vertical;      /* allow drag to resize */
	scrollbar-width: thin; /* Firefox thin scrollbar */
	-webkit-overflow-scrolling: touch; /* smoother on iOS/Safari */
}

/* WebKit scrollbars for those two */
#txtStructured::-webkit-scrollbar,
#txtTools::-webkit-scrollbar{ width: 8px; height: 8px; }
#txtStructured::-webkit-scrollbar-thumb,
#txtTools::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:9999px; }
#txtStructured::-webkit-scrollbar-track,
#txtTools::-webkit-scrollbar-track{ background:transparent; }


/* (kept) model dropdown scroll */
#modelDropdown {
	max-height: none;
	overflow: visible;
}

/* (kept) input scrollbar fix */
#userInput {
	max-height: 200px;
	overflow-y: hidden;
	resize: none;
	scrollbar-width: thin;
}

#userInput::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

#userInput::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 9999px;
}

#userInput::-webkit-scrollbar-track {
	background: transparent;
}

/* (kept) model list scroller */
#modelList {
	max-height: min(60vh, 320px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

#modelList::-webkit-scrollbar {
	width: 8px;
}

#modelList::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 9999px;
}

#modelList::-webkit-scrollbar-track {
	background: transparent;
}

.param-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 12px;
}

@media (min-width: 640px) {
	.param-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

pre.debug {
	background: #0f172a;
	color: #e2e8f0;
	padding: 8px 10px;
	border-radius: 8px;
	overflow: auto;
	font-size: 11px;
	line-height: 1.25rem;
	max-height: 160px;
}

.help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 12px;
	border-radius: 9999px;
	margin-left: 6px;
	background: #e2e8f0;
	color: #334155;
	cursor: pointer;
}

/* (kept) tooltip */
.tooltip {
	position: absolute;
	z-index: 40;
	max-width: 320px;
	background: #f3f4f6;
	color: #111827;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 12px;
	line-height: 1.25rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	border: 1px solid #e5e7eb;
}

.tooltip a {
	color: #1d4ed8;
	text-decoration: underline;
}

.tooltip code {
	background: #e5e7eb;
	color: #111827;
	padding: 0 4px;
	border-radius: 4px;
}

.tooltip .codewrap pre {
	background: #f8fafc;
	color: #111827;
}

.tooltip .code-copy {
	display: none;
}

.tooltip h1,
.tooltip h2,
.tooltip h3,
.tooltip h4,
.tooltip h5,
.tooltip h6 {
	margin: 4px 0;
}

.tooltip p {
	margin: 4px 0;
}

/* (kept) assistant bubble + copy */
.assistant-bubble {
	position: relative;
}

.copy-btn {
	font-size: 11px;
	padding: 2px 6px;
	border-radius: 9999px;
	background: #e5e7eb;
	color: #111827;
	cursor: pointer;
}

.assistant-copy {
	position: absolute;
	right: 8px;
	bottom: 6px;
}

.assistant-reasoning {
	margin-top: 6px;
	padding: 8px;
	border-left: 3px solid #94a3b8;
	background: #f1f5f9;
	border-radius: 8px;
	font-size: 12px;
	color: #334155;
	white-space: pre-wrap;
}

.markdown-body {
	white-space: normal;
	line-height: 1.6;
}

.markdown-body p {
	margin: 0.5rem 0;
}

.markdown-body ul,
.markdown-body ol {
	margin: 0.5rem 0 0.5rem 1.25rem;
	padding-left: 1.25rem;
}

.markdown-body ul {
	list-style-type: disc;
}

.markdown-body ol {
	list-style-type: decimal;
}

.markdown-body blockquote {
	border-left: 3px solid #cbd5f5;
	padding: 0.25rem 0.75rem;
	margin: 0.75rem 0;
	background: #f8fafc;
}

.markdown-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0.75rem 0;
	font-size: 0.95em;
}

.markdown-body th,
.markdown-body td {
	border: 1px solid #d1d5db;
	padding: 0.5rem;
	text-align: left;
}

.markdown-body thead {
	background: #e5e7eb;
	font-weight: 600;
}

.markdown-body code {
	background: #e2e8f0;
	padding: 0.1rem 0.35rem;
	border-radius: 0.375rem;
	font-size: 0.875rem;
}

.markdown-body pre code {
	background: transparent;
	padding: 0;
}

.row {
	display: flex;
	flex-direction: column;
}

.mini {
	font-size: 10px;
	color: #64748b;
}

/* (kept) code copy */
.codewrap {
	position: relative;
	display: block;
}

.codewrap pre {
	margin: 0;
	padding-right: 56px;
	padding-bottom: 28px;
}

.code-copy {
	position: absolute;
	right: 12px;
	bottom: 10px;
	font-size: 11px;
	padding: 2px 6px;
	border-radius: 9999px;
	background: #e5e7eb;
	color: #111827;
	cursor: pointer;
	opacity: .9;
}

.code-copy:hover {
	opacity: 1;
}

/* Base drawer geometry is set by JS (top/left/height).
	We just manage width + show/hide of panel content. */
#drawer {
	transition: none !important;
	will-change: auto; /* no GPU push to avoid “bump” easing artifacts */
	box-sizing: border-box; /* include the 1px border in the declared width */
}

/* States */
#drawer[data-state="collapsed"] { width: var(--railW); }
#drawer[data-state="expanded"]  { width: calc(var(--railW) + var(--panelW)); }

/* Hide the panel when collapsed */
#drawer[data-state="collapsed"] .panel { display: none; }
#drawer[data-state="expanded"]  .panel { display: flex; }

/* Desktop: push the app so nothing overlaps */
@media (min-width:1024px){
  /* Place the drawer correctly at first paint (prevents the jump) */
  #drawer{
    left: calc(50% - ((var(--railW) + var(--sideGap) + var(--appW)) / 2)) !important;
  }
  body.side-expanded #drawer{
    left: calc(50% - ((var(--railW) + var(--panelW) + var(--sideGap) + var(--appW)) / 2)) !important;
  }

  /* Keep #app centered, then nudge it by half of (drawer + gap) so the pair is centered */
  #app{
    transition: none;
    margin-left: auto;  /* cancel previous "push right" behavior */
    margin-right: auto;
    transform: translateX(calc((var(--railW) + var(--sideGap)) / 2));
  }
  body.side-expanded #app{
    transform: translateX(calc((var(--railW) + var(--panelW) + var(--sideGap)) / 2));
  }

  #overlay{ display:none !important; } /* overlay is desktop-off */
}

/* Mobile: never push the app; we’ll use overlay */
@media (max-width:1023.98px){
	body.side-collapsed #app,
	body.side-expanded  #app{ margin-left: 0; }
	  /* MOBILE: hide the rail entirely when collapsed */
  #drawer[data-state="collapsed"] {
    display: none !important;
  }

  /* MOBILE: when opened from the menu, make the list fit the screen */
  #drawer[data-state="expanded"] {
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: none !important; /* safety */
  }

  /* MOBILE: don’t show the vertical rail at all */
  #drawer .rail {
    display: none !important;
  }

  /* MOBILE: make the chat list panel fill the viewport width */
  #drawer .panel {
    width: 100% !important;     /* overrides the inline 22rem */
    max-width: 100% !important;
    overflow: auto;             /* allow scrolling if needed */
  }

  /* MOBILE: prevent horizontal scrolling while the drawer is open */
  html, body {
    overflow-x: hidden;
  }

  /* MOBILE: show the top-bar search icon to open the drawer */
  #searchBtn {
    display: inline-flex !important;
  }
}


#overlay {
	background: rgba(0, 0, 0, .35);
}

.badge {
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 9999px;
	background: #e2e8f0;
	color: #334155;
}

.list-item:hover {
	background: #f8fafc;
}

.truncate-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.truncate-1 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


#sharedBanner {
	display: none;
}

body.shared-view #sharedBanner {
	display: block;
}

/* (kept) icon buttons */
.icon-btn {
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	background: #fff;
	border: 1px solid #e5e7eb;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	transition: background .15s ease, border-color .15s ease, transform .05s ease;
}


.icon-btn .bi {
  font-size: 1.05rem;
  line-height: 1;
  color: #334155;
}

/* === Top bar model action buttons — compact (≈30% smaller) === */
.topbar-icon {
  width: 28px;          /* was 40px base / 34px prev — now compact */
  height: 28px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}


.topbar-icon i {
  font-size: 14px;      /* ensure smaller than .icon-btn .bi */
  line-height: 1;
}

.topbar-icon + .topbar-icon {
  margin-left: 4px;     /* tighter spacing between the icons */
}


/* Favorite ON look: subtle amber hint, consistent with star meaning */
#modelFavBtn[data-state="on"] {
  background-color: #fff7ed;           /* amber-50 */
  border-color: #f59e0b;               /* amber-500 */
}
#modelFavBtn[data-state="on"] i {
  color: #f59e0b;                       /* amber-500 */
}

/* Disabled “open model page” (when no permaslug) will already be dimmed via inline styles;
   keep hover neutral for clarity */
#modelLinkBtn[disabled],
#modelLinkBtn[disabled]:hover {
  cursor: not-allowed;
  opacity: .4;
  background: transparent;
}

.icon-btn:hover {
	background: #f3f4f6;
	border-color: #d1d5db;
}

.icon-btn:active {
	transform: scale(.98);
}

.icon-btn .bi {
	font-size: 1.05rem;
	line-height: 1;
	color: #334155;
}

/* (kept) STOP */
.stop-fab {
	position: absolute;
	top: 0;
	right: 0;
	width: 36px;
	height: 36px;
	border-radius: 9999px;
	background: #ef4444;
	color: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translate(65%, -65%) scale(.92);
	pointer-events: none;
	transition: transform .18s ease, opacity .18s ease;
	z-index: 5;
}
.stop-fab[data-show="true"] {
	opacity: 1;
	transform: translate(65%, -65%) scale(1);
	pointer-events: auto;
}

/* --- Soft pulse on the mic while Whisper is transcribing --- */
#micBtn { position: relative; } /* anchor pseudo-elements just for the mic */

#micBtn.pulsing::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:9999px;
  box-shadow:0 0 0 2px rgba(34,197,94,.45); /* soft inner glow */
}

#micBtn.pulsing::after{
  content:"";
  position:absolute;
  inset:-6px;                     /* sit *outside* the button */
  border-radius:9999px;
  border:2px solid rgba(34,197,94,.8); /* green-500 vibe */
  animation: micSoftPulse 1.6s ease-out infinite;
  pointer-events:none;
}

@keyframes micSoftPulse{
  0%   { transform:scale(1);   opacity:.5; }
  100% { transform:scale(1.35); opacity:0; }
}


/* (kept) Menu consistency */
.menu-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .5rem 1rem;
	font-size: .8125rem;
}

.menu-row:hover {
	background: #f1f5f9;
}

.menu-label {
	color: #334155;
}

.menu-icon {
	font-size: 1.05rem;
	line-height: 1;
	color: #475569;
}

.menu-row.danger .menu-label {
	color: #dc2626;
}

.menu-row.danger .menu-icon {
	color: #dc2626;
}

.menu-sep {
	height: 1px;
	background: #e5e7eb;
	margin: .25rem 0;
}

/* (kept) VU overlay */
#vuCanvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
	background: transparent;
}

/* === NEW: small avatar circle + login icon === */
.avatar {
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	background: #e2e8f0;
	color: #1f2937;
	border: 1px solid #e5e7eb;
	cursor: pointer;
	/* <-- add this */
}

.avatar-menu {
	position: absolute;
	right: 0;
	top: 120%;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: .75rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	min-width: 160px;
	z-index: 30;
}

.avatar-menu .row {
	padding: .5rem .75rem;
	cursor: pointer;
}

.avatar-menu .row:hover {
	background: #f1f5f9;
}

/* === NEW: item kebab menu === */
.kebab {
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 6px;
}

.kebab:hover {
	background: #e5e7eb;
}

/* Compact "More" menu: one line per item, smaller icons */
/* Compact item menu — solid white panel, overlays without resizing card */
.item-menu{
	position:absolute;
	top:0;              /* JS sets exact top */
	right:.5rem;        /* right aligned inside the card */
	background:#fff;
	border:1px solid #e5e7eb;
	border-radius:.5rem;
	box-shadow:0 8px 24px rgba(0,0,0,.12);
	z-index:1000;       /* above neighbors */
	min-width: 180px;
	padding:4px 0;
}

/* Compact, single-line actions in the item menu */
.item-menu .row{
	display:flex;
	flex-direction:row !important;   /* <- force horizontal */
	align-items:center;
	gap:.5rem;
	padding:.35rem .6rem;             /* smaller height */
	font-size:.875rem;
	line-height:1.2;
	white-space:nowrap;
}

.item-menu .row i.bi{
	font-size:1rem;
	line-height:1; 
	flex:0 0 auto;                    /* don’t stretch */
}

.item-menu .row .label{      /* lets text fill the row neatly */
	flex: 1 1 auto;
}

.item-menu .row span{
	display:inline-block;             /* keep on one line */
}

.item-menu .row:hover{ background:#f8fafc; }
.item-menu .row.danger{ color:#dc2626; }

/* optional: make a favorited star look "active" */
.item-menu .row i.bi-star-fill{ color:#f59e0b; }

/* Keep the menu inside the drawer and a tidy width */
.item-menu{
	position: fixed;          /* we’ll position it by coordinates */
	width: 220px;             /* FIXED width so it never stretches */
	box-sizing: border-box;
	z-index: 1000;
}
.item-menu .menu-row{ padding: .5rem 1.25rem; } /* comfy space between text & right icon */

/* === NEW: small star icon button in list === */
.star {
	font-size: 1rem;
	line-height: 1;
	color: #f59e0b;
}

/* amber-500 */
.star.inactive {
	color: #cbd5e1;
}

/* slate-300, when just as indicator */


/* Nudge the chat card a bit taller so it visually matches the anchored drawer */
#app { /* previous h-[90vh] is OK, we’ll bump via Tailwind class below, but keep a safety here */
	min-height: 88vh;
}

/* PRO users: thin green ring around the avatar circle (outer, no inner space loss) */
.avatar.pro {
  box-shadow: 0 0 0 2px #22c55e; /* green-500 */
}

/* Multi-attach pills */
.file-pill{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #e5e7eb; background:#fff; color:#334155;
  border-radius:9999px; padding:2px 8px;
  max-width: 220px;
}
.file-pill b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-pill .x{ cursor:pointer; font-size:12px; color:#64748b; }
.file-pill .x:hover{ color:#111827; }


.attach-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .5rem;
}

.attach-chip {
  display: inline-flex;
  align-items: center;
  font-size: .75rem;
  line-height: 1;
  padding: .35rem .5rem;
  border-radius: 9999px;
  background: #f1f5f9; /* slate-100 */
  color: #0f172a;      /* slate-900 */
  border: 1px solid #e2e8f0; /* slate-200 */
  text-decoration: none;
  white-space: nowrap;
}
.attach-chip:hover { background: #e2e8f0; } /* slate-200 */


/* === Bubble sizing & code width ======================================== */
/* Tweak these if you want slightly more/less width */
:root{
  --bubbleMax-mobile: 92%;
  --bubbleMax-tablet: 90%;
  --bubbleMax-desktop: 86%;
}

/* A generic class we’ll add to both assistant & user bubbles */
.chat-bubble{
  max-width: var(--bubbleMax-mobile);
}
@media (min-width:640px){  /* ≥ sm */
  .chat-bubble{ max-width: var(--bubbleMax-tablet); }
}
@media (min-width:1024px){ /* ≥ lg */
  .chat-bubble{ max-width: var(--bubbleMax-desktop); }
}

/* Make fenced code use the *full* bubble width (inside the bubble padding) */
.chat-bubble .codewrap pre{
  width: 100%;
  box-sizing: border-box;
  display: block;
}

/* Optional: user bubble class for any future styling symmetry */
.user-bubble{ /* currently empty on purpose */ }

/* Anchor the right-aligned button and keep the native arrow */
#featurePanel > summary {
  position: relative;      /* for absolute button positioning */
  display: list-item;      /* ensures the arrow shows even if a reset CSS changed it */
}

/* Right-aligned button; only show when the panel is open */
#featurePanel > summary .summary-button {
  display: none;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}
#featurePanel[open] > summary .summary-button {
  display: inline-flex;
}

/* Breathing room under the header when open */
#featurePanel[open] > summary {
  margin-bottom: 10px;
}

/* === Activity modal: light overlay + rounded panel (match app look) === */
.modal-overlay-light{
	position:fixed; inset:0;
	background: rgba(255,255,255,.7);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	display:none; align-items:center; justify-content:center;
	z-index:50;
}
.modal-overlay-light:not(.hidden){
	display:flex;
}

.modal-panel{
	background:#fff; border:1px solid #e5e7eb; border-radius:12px;
	box-shadow:0 20px 40px rgba(0,0,0,.12);
	display:flex; flex-direction:column;
}

/* Small utility “input” and “toolbar-btn” matching existing tone */
.input{
	border:1px solid #e5e7eb; border-radius:.5rem; padding:.35rem .5rem;
	outline:none; background:#fff;
}
.input:focus{ box-shadow:0 0 0 2px rgba(37,99,235,.12); }

.toolbar-btn{
	display:inline-flex; align-items:center; gap:.4rem;
	padding:.35rem .6rem; border:1px solid #e5e7eb; border-radius:.5rem;
	background:#fff; cursor:pointer;
}
.toolbar-btn:hover{ background:#f8fafc; }

/* Small dropdown panel */
.dropdown-panel{
	position:absolute; top:calc(100% + 6px); left:0;
	background:#fff; border:1px solid #e5e7eb; border-radius:.5rem;
	box-shadow:0 8px 24px rgba(0,0,0,.12); padding:.5rem; z-index:60;
	min-width: 220px;
}

#activityModelsPanel{
	left:auto;
	right:0;
	max-width:min(260px, calc(100vw - 64px));
}

#activityModelsPanel input{
	font-size:12px;
}

.kv-table{
	width:100%;
	border-collapse:collapse;
}

.kv-table tr:not(:last-child){
	border-bottom:1px solid #e2e8f0;
}

.kv-table td{
	padding:.625rem .75rem;
	vertical-align:top;
}

.kv-table .kv-key{
	width:28%;
	font-weight:600;
	color:#0f172a;
	word-break:break-word;
}

.kv-table .kv-value{
	color:#1f2937;
}

.kv-pre{
	margin:0;
	background:#0f172a;
	color:#e2e8f0;
	padding:.5rem .65rem;
	border-radius:.5rem;
	font-size:.75rem;
	line-height:1.3;
	max-height:240px;
	overflow:auto;
}

.kv-muted{
	color:#64748b;
}

/* Activity list rows */
.activity-row{
	display:flex; align-items:center; justify-content:space-between;
	gap:.5rem; padding:.5rem .5rem; border-bottom:1px dashed #e5e7eb;
}
.activity-row .meta{ display:flex; align-items:center; gap:.5rem; }
.activity-row .badge{
	border:1px solid #e5e7eb; border-radius:.375rem; padding:.15rem .4rem; font-size:.75rem;
	background:#fff;
}
.activity-row .dim{ color:#64748b; font-size:.85rem; }

/* Outline button for "Load more" */
.btn-outline{
	border:1px solid #e5e7eb; border-radius:.5rem; padding:.5rem .75rem; background:#fff;
}
.btn-outline:hover{ background:#f8fafc; }


/* activity info */
.modal-content.lg { max-width: 900px; }
.json-pre {
  background:#0b1020;
  color:#cfe3ff;
  padding:12px;
  border-radius:12px;
  overflow:auto;
  max-height:60vh;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:12px;
  line-height:1.4;
}


/* Activity overlay: top-aligned with same vertical breathing room as the page (p-6 => 24px) */
#activityOverlay.modal-overlay-light {
  position: fixed;
  inset: 0;
  /* display handled by .modal-overlay-light/.hidden */
  align-items: flex-start;
  justify-content: center;
  padding: 24px 24px;
  background: rgba(0, 0, 0, 0.04);
  z-index: 40;
}


/* Fixed, stable panel size; scroll inside content, not the panel */
#activityOverlay .modal-panel {
  width: min(1100px, 96vw);
  height: calc(100vh - 48px);          /* 24 top + 24 bottom = 48px */
  max-height: none !important;         /* override inline max-h if present */
  display: flex;
  flex-direction: column;
}

/* Ensure list area can scroll while header/toolbar/footer stay put */
#activityList {
  flex: 1 1 auto !important;
  overflow: auto !important;
}

/* === Auth/Privacy modal: ensure the panel scrolls on small screens === */
#authModal > .relative {
  /* Constrain height to viewport and allow internal scrolling */
  max-height: calc(100vh - 48px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
@supports (padding: max(0px)) {
  /* Respect iOS safe areas if present */
  #authModal > .relative {
    max-height: calc(100vh - max(48px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  }
}
@media (max-height: 520px) {
  /* Reduce top margin on very short screens so more content is visible */
  #authModal > .relative { margin-top: 16px !important; }
}