* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; background: #111; color: #eee; overscroll-behavior-y: none; }
/* #app is the element main.tsx renders into, so the rows (tab strip, transcript,
   composer) are its direct flex children. The flex column must live here and not
   on body: a wrapper between the column and the rows makes them ordinary blocks,
   and then the transcript's flex/min-height/overflow rules do nothing and nothing
   scrolls at all. The app fills the viewport exactly and never scrolls as a whole:
   the tab bar and composer are fixed rows and only the transcript scrolls between. */
#app { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
button { touch-action: manipulation; }

.SessionTabs > button, .SessionTabs-row > button, .PromptComposer > button, .PromptComposer > input { font: inherit; padding: 8px; background: #222; color: inherit; border: 1px solid #555; }
.SessionTabs > button, .SessionTabs-row > button, .PromptComposer > button { cursor: pointer; }

.AuthGate {
	max-width: 36rem;
	margin: 15vh auto;
}
.AuthGate > form {
	display: flex;
	gap: .5rem;
}
.AuthGate > form > input {
	flex: 1;
}
.AuthGate > form > input, .AuthGate > form > button {
	background: #181818;
	border: 1px solid #444;
	border-radius: .25rem;
	color: inherit;
	padding: .6rem;
	font-size: 16px;
}
.AuthGate > form > button { cursor: pointer; }

/* Tab strip is a fixed row at the top and wraps onto extra rows so every tab
   stays visible without horizontal panning (which fights browser swipe gestures).
   On phones the individual tabs hide and only ☰ remains; its sheet lists
   everything with close and new-tab actions. */
.SessionTabs {
	flex: none;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 8px calc(8px + env(safe-area-inset-left));
	background: #111;
	border-bottom: 1px solid #444;
}
.SessionTabs > .SessionTabs-menu { flex: none; min-width: 44px; min-height: 44px; }
.SessionTabs > .SessionTabs-title { display: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; color: #ccc; }
.SessionTabs > .SessionTabs-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}
.SessionTabs-row > button { display: inline-flex; gap: 6px; align-items: baseline; text-align: left; max-width: 100%; }
.SessionTabs-row > button.selected { background: #456; }
.SessionTabs-dot { width: 8px; height: 8px; border-radius: 50%; background: #7c7; align-self: center; animation: SessionTabs-pulse 1.2s ease-in-out infinite; }
@keyframes SessionTabs-pulse { 50% { opacity: .3; } }
.SessionTabs-close { color: #99a; padding: 0 2px; }
.SessionTabs-new { min-width: 44px; min-height: 44px; }

@media (max-width: 48em) {
	.SessionTabs > .SessionTabs-row { display: none; }
	.SessionTabs > .SessionTabs-title { display: block; }
}
@media (min-width: 48.01em) {
	.SessionTabs > .SessionTabs-menu { display: none; }
}

/* Full-screen session sheet, opened from ☰ on narrow screens. */
.SessionTabs-sheet {
	position: fixed;
	inset: 0;
	z-index: 3;
	background: rgb(0 0 0 / .6);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: calc(24px + env(safe-area-inset-top)) 12px 12px;
}
.SessionTabs-sheet > .SessionTabs-panel { width: min(100%, 32rem); max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain; }
.SessionTabs-panel > div { display: flex; gap: 6px; margin-bottom: 6px; }
.SessionTabs-panel > div.selected > .SessionTabs-open { background: #456; }
.SessionTabs-open {
	flex: 1;
	min-height: 44px;
	text-align: left;
}
.SessionTabs-panel > div > .SessionTabs-close {
	flex: none;
	width: 44px;
	min-height: 44px;
	color: #c66;
}

/* The only scrolling region. min-height:0 lets a flex child shrink below its
   content height, which is what allows it to scroll instead of pushing the
   composer off-screen. */
.Transcript {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	width: min(100%, 900px);
	margin: 0 auto;
	padding: 12px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.TranscriptItem { padding: 10px 0; border-bottom: 1px solid #333; }
.TranscriptItem.user { color: #9cf; }
.TranscriptItem.assistant { color: #eee; }
.TranscriptItem.log, .TranscriptItem.info { color: #aaa; }
.TranscriptItem > label { font-size: 12px; color: #aaa; }

.PromptComposer {
	flex: none;
	width: min(100%, 900px);
	margin: 0 auto;
	display: flex;
	gap: 8px;
	padding: 12px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom));
	background: #111;
	border-top: 1px solid #444;
}
.PromptComposer > input { flex: 1; min-width: 0; font-size: 16px; }