/* ==== knobs you can tweak ==== */
:root {
	--topbar-h: 64px;
	/* height of your top nav */
	--chat-top-gap: 16px;
	/* top space above card */
	--chat-max-width: 90%;
	/* center column width for bubbles/composer */
	--chat-side-padding: 1rem;
	/* smaller side padding per your request */
	--chat-bottom-gap: 10px;
	/* space from bottom of viewport */
	--footer-h: 32px;
	/* will be overwritten by JS */
	--composer-max-h: 40vh;
	--bubble-radius: 16px;
	--ai-bg: var(--bs-light-bg-subtle, #f5f7fb);
	--me-bg: var(--bs-primary-bg-subtle, #e7efff);
}

/* Flex ancestors must allow children to shrink */
html,
body {
	height: 100%;
	overflow: hidden;
}

.pc-container, .pc-content, .chat-wrapper { min-height: 0; overflow: hidden; }

/* NEW: the clipper must flex to take the remaining height */
.chat-scroll-clip{
  flex: 1 1 auto;        /* ← gives it height in the column */
  min-height: 0;         /* ← critical for scrolling */
  overflow: hidden;      /* ← clips the scrollbar to the rounded corners */
  display: flex;         /* so #messages can flex inside */
  border-radius: 42px;   /* your corner radius */
  background: var(--bs-body-bg);
}

/* footer stays visible */
.pc-footer {
	position: sticky;
	bottom: 0;
	z-index: 5;
}

/* flex ancestors must allow their children to shrink */
.pc-container,
.pc-content,
.chat-wrapper {
	height: calc(100dvh - var(--topbar-h));
	overflow: hidden;
	min-height: 0;
    border: 1px solid var(--chat-side-padding);
	/* ← add */
}

/* The chat card */
.chat-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	/* width + fixed gaps */
	max-width: var(--chat-max-width);
	margin: var(--chat-top-gap) auto var(--chat-bottom-gap);
	/* cap height so footer + 50px remain visible */
	max-height: calc(100dvh - var(--topbar-h) - var(--footer-h) - var(--chat-top-gap) - var(--chat-bottom-gap));

}

.chat-wrapper #msg-instructions {
	margin: 0 5% !important;
}

/* narrow/center the column for both messages and composer children */
.container-compact {
	max-width: var(--chat-max-width);
	margin: 0 auto;
}

/* The scroller itself */
#messages{
  flex: 1 1 auto;        /* ← fill the clipper */
  min-height: 0;         /* ← critical in flex layouts */
  overflow: auto;        /* ← scroll here */
  overscroll-behavior: contain;

  /* no radius here—parent clips the scrollbar */
  border-radius: 0;
  background: transparent;

  /* your padding etc. */
  padding: 12px var(--chat-side-padding) 16px !important;
}

/* subtle, thin scrollbar */
#messages {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, .2) transparent;
	scrollbar-gutter: stable both-edges;
}

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

#messages::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, .12);
	border-radius: 21px;
}

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

/* sticky composer; always visible */
/* Composer sits at bottom of the card */
.chat-composer {
	position: sticky;
	bottom: 0;
	/*background: var(--bs-body-bg);*/
	z-index: 10;
	padding: 12px 0px 16px 0px !important;
	/* your smaller side padding */
	border-top: none !important;
	border-bottom-left-radius: 2em;
	border-bottom-right-radius: 2em;
}

.chat-composer>* {
	margin: 0 auto;
}

#composer-form {
	display: flex;
	gap: 0px !important;
	width: 100%;
	background: var(--bs-body-bg);
	border-radius: 2em;
	padding: .5rem;
    transition: border-radius .12s ease;
}

#composer-form.pill { border-radius: 2em; }      /* single-line look */
#composer-form.multiline { border-radius: 2em; }  /* multi-line (boxy) */
#composer {
	flex: 1 1 auto;
	resize: none;
	overflow: hidden;
	min-height: 44px;
	max-height: var(--composer-max-h);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
	border-left: none !important;
	border-right: none !important;
    padding: .8rem 1rem;
    line-height: 1.35;
}

#btn-send {
	flex: 1 1 auto;
	resize: none;
	overflow: hidden;
	min-height: 44px;
	max-height: var(--composer-max-h);
    border-radius: 2em;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#btn-attach {
	min-height: 44px;
	max-height: var(--composer-max-h);
	border-radius: 2em 0 0 2em;
    border: var(--bs-border-width) solid #aebcc3;
	border-right: none !important;
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 .9rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .12s ease, color .12s ease;
}
#btn-attach:hover,
#btn-attach:focus {
	box-shadow: none;
	background: var(--bs-tertiary-bg);
	color: var(--bs-body-color);
}
[data-bs-theme="dark"] #btn-attach {
	background: var(--bs-body-bg);
	border-color: var(--bs-border-color);
	color: var(--bs-body-color);
}
[data-bs-theme="dark"] #btn-attach:hover,
[data-bs-theme="dark"] #btn-attach:focus {
	background: var(--bs-tertiary-bg);
}

[data-bs-theme="light"] #btn-attach:hover,
[data-bs-theme="light"] #btn-attach:focus {
	border-color: #80c2ed;
}

.attachment-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.attachment-list.d-none {
	display: none !important;
}
.attachment-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .6rem;
	border-radius: 999px;
	background: var(--bs-body-bg);
	border: 1px solid var(--bs-body-color, rgba(0,0,0,.12));
	font-size: .85rem;
    margin: 0 5% !important;
}
.attachment-chip .attachment-name {
	max-width: 12rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.attachment-chip button {
	border: none;
	background: transparent;
	color: inherit;
	font-size: 1rem;
	line-height: 1;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.attachment-chip button:hover {
	opacity: .7;
}

/* ===== BUBBLES (direct children of #messages) ===== */
/* vertical gap between consecutive messages */
#messages>.message-bubble+.message-bubble {
	margin-top: 10px;
}

@media (max-width: 600px) {
	.message-bubble {
		max-width: 92%;
	}
}

/* bubble width cap and alignment (unchanged) */
.message-bubble {
	max-width: min(80%, 780px);
	border-radius: 16px;
	padding: .75rem .9rem;
	white-space: normal;
	overflow-wrap: anywhere;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .02);
}

.message-bubble.ai {
	background: var(--ai-bg);
	margin-left: 3%;
	margin-right: auto;
	margin-bottom: 1%;
	border-top-left-radius: 8px;
}

.message-bubble.me {
	background: var(--me-bg);
	margin-left: auto;
	margin-right: 3%;
	margin-bottom: 1%;
	border-top-right-radius: 8px;
	white-space: pre-wrap; /* keep user text line breaks */
}

/* nice spacing inside */
.message-bubble p {
	margin: 0 0 .6rem;
}

.message-bubble p:last-child {
	margin-bottom: 0;
}

.message-bubble ul,
.message-bubble ol {
	margin: 0 0 .6rem 1.25rem;
}
/* Ensure bullets and numbers show consistently */
.message-bubble ul { list-style: disc !important; list-style-position: outside; padding-left: 1.25rem !important; }
.message-bubble ol { list-style: decimal !important; list-style-position: outside; padding-left: 1.25rem !important; }
.message-bubble li { margin: .25rem 0; }

/* Inline code and fenced code blocks */
.message-bubble code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	background: rgba(0,0,0,.06);
	padding: 0 .25rem;
	border-radius: .25rem;
}
.message-bubble pre {
	background: rgba(0,0,0,.06);
	padding: .75rem .9rem;
	border-radius: .5rem;
	overflow: auto;
	line-height: 1.4;
	position: relative;
}
.message-bubble pre code { background: transparent; padding: 0; display: block; white-space: pre; }

/* Copy button inside code blocks */
.message-bubble .code-copy-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: .75rem;
	line-height: 1;
	padding: .25rem .5rem;
	border-radius: .3rem;
	border: 1px solid rgba(0,0,0,.15);
	background: rgba(255,255,255,.85);
	color: inherit;
	cursor: pointer;
}
[data-bs-theme="dark"] .message-bubble .code-copy-btn {
	background: rgba(0,0,0,.35);
	border-color: rgba(255,255,255,.2);
}
.message-bubble .code-copy-btn:hover { opacity: .9; }

/* ===== Optional: empty-chat center (keep if you like it) ===== */
#messages:empty {
	display: none;
}

/* the wrapper becomes the positioning context when empty */
.chat-wrapper:has(#messages:empty) {
	position: relative;
	background: transparent;
	border: none;
	box-shadow: none;
}

/* center the composer INSIDE the wrapper */
.chat-wrapper:has(#messages:empty) .chat-composer {
	position: absolute;
	inset-inline: 0;
	/* left:0; right:0; */
	top: 55%;
	transform: translateY(-50%);
	background: transparent;
	box-shadow: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* size the form, not the composer block */
.chat-wrapper:has(#messages:empty) #composer-form {
	width: 100%;
	max-width: var(--chat-max-width);
	/* matches wrapper cap */
	margin: 0 !important;
	border-radius: 2em;
	background: var(--bs-body-bg);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

/* size the form, not the composer block */
.chat-wrapper:has(#messages:empty) .chat-scroll-clip {

	background: transparent !important;

}

/* size the form, not the composer block */
.chat-wrapper:has(#messages:empty) #msg-instructions {

	margin: 0 5% !important;

}
/* THEME-AWARE PRELOADER IMAGE SWAP */
.preloader img.theme-dark { display: none; }
[data-bs-theme="dark"] .preloader img.theme-light { display: none; }
[data-bs-theme="dark"] .preloader img.theme-dark { display: inline-block; }


/* THEME-AWARE PRELOADER BACKGROUND */
.preloader.loader-bg {
  background-color: var(--bs-body-bg) !important; /* uses Bootstrap var for current theme */
}
[data-bs-theme="dark"] .preloader.loader-bg {
  background-color: var(--bs-body-bg) !important; /* ensure dark mode maps to dark body bg */
}

/* Typing indicator styles for AI bubble */
.message-bubble.ai.typing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bs-body-color);
}
.message-bubble.ai .typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.message-bubble.ai .typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: .35;
  display: inline-block;
  animation: typing-blink 1.2s infinite ease-in-out;
}
.message-bubble.ai .typing-dots span:nth-child(2) { animation-delay: .2s; }
.message-bubble.ai .typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typing-blink {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40% { transform: translateY(-2px); opacity: .9; }
}

/* When the composer textarea is focused, also highlight the attach button border */
#composer-form:has(#composer:focus) #btn-attach {
  border-color: #80c2ed; !important;
}

/* Settings modal tweaks */
#settings-modal-wrapper .settings-panel {
  outline: none;
}

/* Keep settings modal content a consistent height by overlaying panels */
#settings-modal-wrapper .settings-panels {
  display: grid;
  position: relative;
}
#settings-modal-wrapper .settings-panels .settings-panel {
  grid-area: 1 / 1;
  width: 100%;
}
#settings-modal-wrapper .settings-panels .settings-panel:not(.active) {
  visibility: hidden;
  pointer-events: none;
}

#settingsModal .nav-pills .nav-link {
  border-radius: .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

#settingsModal .nav-pills .nav-link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

#settingsModal [data-settings-save][aria-busy="true"] {
  position: relative;
  pointer-events: none;
}

#settingsModal [data-settings-save][aria-busy="true"]::after {
  content: "";
  position: absolute;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-left-color: currentColor;
  animation: settings-spin 0.7s linear infinite;
}

@keyframes settings-spin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

#settings-toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1080;
  pointer-events: none;
}

#settings-toast-container .toast {
  pointer-events: auto;
}