:root {
	--bg: #131318;
	--bg-panel: #1b1b22;
	--bg-elevated: #23232c;
	--border: #32323e;
	--text: #e6e6ea;
	--text-muted: #8f8f9c;
	--accent: #4a8fe7;
	--accent-soft: #2b4568;
	--cyan: #39c5cf;
	--green: #4caf7d;
	--red: #e0605e;
	--yellow: #d9a842;
}

* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0;
}

body {
	height: 100vh;
	height: 100dvh;
	display: flex;
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 15px;
}

.hidden {
	display: none !important;
}

/* ---- sidebar ---- */

#sidebar {
	width: 280px;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	background: var(--bg-panel);
	border-right: 1px solid var(--border);
}

#sidebar-backdrop {
	display: none;
}

#sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
}

#sidebar-title {
	font-weight: 700;
	font-size: 17px;
}

#new-conversation {
	background: var(--accent-soft);
	color: var(--text);
	border: 1px solid var(--accent);
	border-radius: 8px;
	width: 28px;
	height: 28px;
	padding: 0;
	cursor: pointer;
	font-size: 17px;
	line-height: 1;
}

#new-conversation:hover {
	background: var(--accent);
}

#conversation-list {
	list-style: none;
	margin: 0;
	padding: 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
	flex: 1;
}

.conversation-item,
.librarian-item {
	padding: 8px 10px;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 2px;
	position: relative;
}

.conversation-item:hover,
.librarian-item:hover {
	background: var(--bg-elevated);
}

.conversation-item.active,
.librarian-item.active {
	background: var(--accent-soft);
}

/* Librarian run history: a compact section pinned under the conversations. */
#librarian-section {
	border-top: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	max-height: 40%;
}

#librarian-section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* The title doubles as the collapse toggle: a button rather than a click handler
   on the row, so the icons next to it are not part of the hit area. */
#librarian-toggle {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 4px 0;
	margin: -4px 0;
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	text-align: left;
}

#librarian-toggle:hover {
	color: var(--text);
}

#librarian-caret {
	display: inline-block;
	font-size: 9px;
	transition: transform 0.15s ease;
}

#librarian-section:not(.collapsed) #librarian-caret {
	transform: rotate(90deg);
}

/* Collapsed (the boot state): only the title row survives, so the runs list stops
   claiming its 40% of the sidebar. The icons live outside the body and stay. */
#librarian-section.collapsed #librarian-body {
	display: none;
}

#librarian-body {
	display: flex;
	flex-direction: column;
	/* Lets the body shrink inside the section's max-height so the list scrolls. */
	overflow: hidden;
}

#librarian-section-icons {
	flex: none;
	display: flex;
	align-items: center;
	gap: 2px;
}

/* Wiki inbox quick-upload and on-demand wiki sync. Both carry their own handler
   (not .librarian-btn, which app.js auto-binds to data-command), so they get
   their own quiet icon styling. */
#inbox-upload-btn,
#wiki-sync-btn {
	flex: none;
	background: none;
	border: none;
	padding: 0 2px;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.55;
	border-radius: 4px;
}

#inbox-upload-btn:hover,
#wiki-sync-btn:hover {
	opacity: 1;
	background: var(--bg-elevated);
}

#inbox-upload-btn:disabled,
#wiki-sync-btn:disabled {
	cursor: default;
	opacity: 0.3;
}

#librarian-list {
	list-style: none;
	margin: 0;
	padding: 4px 8px 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.librarian-item .conv-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.librarian-item .conv-when {
	font-size: 11px;
	color: var(--text-muted);
}

/* Read-only Librarian run view: no composer, the transcript is a replay. */
body.run-view #composer {
	display: none;
}

.conversation-item .conv-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Room for the two hover icons (rename + delete). */
	padding-right: 48px;
}

.conversation-item .conv-when {
	font-size: 11px;
	color: var(--text-muted);
}

.conversation-item .conv-rename,
.conversation-item .conv-delete {
	position: absolute;
	top: 8px;
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 13px;
	visibility: hidden;
}

.conversation-item .conv-delete {
	right: 6px;
}

.conversation-item .conv-rename {
	right: 28px;
}

.conversation-item:hover .conv-rename,
.conversation-item:hover .conv-delete {
	visibility: visible;
}

.conversation-item .conv-delete:hover {
	color: var(--red);
}

.conversation-item input.conv-rename-input {
	background: var(--bg);
	color: var(--text);
	border: 1px solid var(--accent);
	border-radius: 6px;
	padding: 3px 6px;
	font-size: 14px;
	width: 100%;
}

/* ---- main ---- */

#main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

#header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--border);
	background: var(--bg-panel);
}

#thread-name {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 30%;
}

#busy-spinner::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid var(--yellow);
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	vertical-align: middle;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

#header-controls {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

#header-controls select {
	background: var(--bg-elevated);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 5px 8px;
	font-size: 13px;
	max-width: 180px;
}

/* Context occupancy badge (share of the model window the conversation uses). */
#context-badge {
	color: var(--green);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 4px 7px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	cursor: default;
}

#context-badge.warn {
	color: var(--yellow);
}

#context-badge.danger {
	color: var(--red);
}

.librarian-btn {
	background: var(--bg-elevated);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 5px 10px;
	cursor: pointer;
	font-size: 13px;
}

.librarian-btn:hover {
	border-color: var(--cyan);
}

/* Sidebar copy of the Librarian buttons: mobile-only (the header copy hides there). */
#librarian-actions {
	display: none;
	gap: 6px;
	padding: 4px 14px 8px;
}

#librarian-actions .librarian-btn {
	flex: 1 1 0;
	min-width: 0;
	padding: 8px 4px;
}

/* ---- transcript ---- */

#transcript {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px 0 30px;
}

#transcript > * {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.msg-user {
	display: flex;
	justify-content: flex-end;
	margin: 14px auto 6px;
}

.msg-user .bubble {
	background: var(--accent-soft);
	border-radius: 14px 14px 4px 14px;
	padding: 9px 14px;
	max-width: 75%;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.msg-user .bubble img {
	display: block;
	max-width: 100%;
	max-height: 260px;
	border-radius: 8px;
	margin: 4px 0;
}

.msg-user .bubble a.attachment-link,
.msg-attachment a.attachment-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 6px 10px;
	margin: 4px 0;
	font-size: 13px;
	color: var(--text);
	text-decoration: none;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.msg-user .bubble a.attachment-link:hover,
.msg-attachment a.attachment-link:hover {
	border-color: var(--accent);
}

.msg-user .bubble.command {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 13px;
	color: var(--cyan);
	background: var(--bg-elevated);
}

.msg-time {
	font-size: 11px;
	color: var(--text-muted);
	opacity: 0.7;
	margin: 2px auto 8px;
	user-select: none;
}

.msg-time.right {
	text-align: right;
}

.msg-time.left {
	text-align: left;
}

.msg-assistant {
	margin: 6px auto;
	line-height: 1.55;
	overflow-wrap: break-word;
}

.msg-assistant + .msg-assistant {
	margin-top: 0;
}

.msg-assistant pre {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 10px 12px;
	overflow-x: auto;
	font-size: 13px;
}

.msg-assistant code {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.92em;
	background: var(--bg-panel);
	border-radius: 4px;
	padding: 1px 4px;
}

.msg-assistant pre code {
	background: none;
	padding: 0;
}

.msg-assistant .table-wrap {
	overflow-x: auto;
	max-width: 100%;
	margin: 8px 0;
}

.msg-assistant table {
	border-collapse: collapse;
}

.msg-assistant th, .msg-assistant td {
	border: 1px solid var(--border);
	padding: 5px 10px;
}

.msg-assistant blockquote {
	border-left: 3px solid var(--border);
	margin: 8px 0;
	padding-left: 12px;
	color: var(--text-muted);
}

.msg-assistant a {
	color: var(--accent);
}

.msg-image img {
	max-width: 100%;
	border-radius: 10px;
	margin: 6px 0;
}

.msg-attachment {
	margin: 6px auto;
}

.msg-attachment img {
	max-width: 100%;
	max-height: 320px;
	border-radius: 10px;
	margin: 6px 0;
}

.msg-system {
	font-size: 13px;
	margin: 4px auto;
	color: var(--text-muted);
}

.msg-system.success {
	color: var(--green);
}

.msg-system.info {
	color: var(--text);
}

.msg-error {
	font-size: 13px;
	margin: 4px auto;
	color: var(--red);
}

/* ---- reasoning ---- */

details.reasoning {
	margin: 6px auto;
	font-size: 13px;
	color: var(--text-muted);
}

details.reasoning summary {
	cursor: pointer;
	user-select: none;
	list-style: none;
}

details.reasoning summary::-webkit-details-marker {
	display: none;
}

details.reasoning .reasoning-body {
	white-space: pre-wrap;
	border-left: 2px solid var(--border);
	margin-top: 6px;
	padding-left: 12px;
	overflow-wrap: break-word;
}

details.reasoning.active summary {
	color: var(--yellow);
}

/* ---- tool rows ---- */

.tool-row {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 13px;
	margin: 3px auto;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tool-row .glyph.pending::after {
	content: '';
	display: inline-block;
	width: 9px;
	height: 9px;
	border: 2px solid var(--yellow);
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.tool-row .glyph.ok {
	color: var(--green);
}

.tool-row .glyph.fail {
	color: var(--red);
}

.tool-row .tool-name {
	color: var(--text);
	font-weight: 600;
}

.tool-error {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 12px;
	margin: 0 auto 3px;
	padding-left: 40px;
	color: var(--red);
	opacity: 0.8;
	white-space: pre-wrap;
}

/* Collapsible tool input/output (debug view) — same disclosure idiom as reasoning. */
details.tool-input,
details.tool-output {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 12px;
	margin: 0 auto 3px;
	padding-left: 40px;
	color: var(--text-muted);
}

details.tool-input summary,
details.tool-output summary {
	cursor: pointer;
	user-select: none;
	opacity: 0.7;
}

details.tool-input pre,
details.tool-output pre {
	margin: 4px 0 6px;
	padding: 6px 10px;
	border-left: 2px solid var(--border);
	max-height: 300px;
	overflow: auto;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

/* ---- sub-agent box ---- */

.subagent {
	border: 1px solid var(--cyan);
	border-radius: 10px;
	margin: 10px auto;
	padding: 10px 14px;
}

.subagent .subagent-header {
	font-weight: 600;
	color: var(--cyan);
	margin-bottom: 6px;
}

.subagent .subagent-header .glyph.pending::after {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 2px solid var(--cyan);
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin-left: 6px;
}

.subagent .subagent-header .glyph.ok {
	color: var(--green);
	margin-left: 6px;
}

.subagent .subagent-header .glyph.fail {
	color: var(--red);
	margin-left: 6px;
}

.subagent .msg-assistant,
.subagent .tool-row,
.subagent .msg-error {
	padding-left: 0;
	padding-right: 0;
	font-size: 13px;
}

.subagent details.tool-input,
.subagent details.tool-output {
	padding-left: 18px;
}

/* ---- composer ---- */

#composer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 820px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px calc(18px + env(safe-area-inset-bottom, 0px));
}

#composer-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

#composer.dragover #composer-input {
	border-color: var(--accent);
	border-style: dashed;
}

#attachment-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.attachment-thumb {
	position: relative;
}

.attachment-thumb img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--border);
}

.attachment-file {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 8px 26px 8px 10px;
	font-size: 13px;
	max-width: 220px;
}

.attachment-file .attachment-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.attachment-remove {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: 50%;
	color: var(--text);
	font-size: 10px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.attachment-remove:hover {
	border-color: var(--red);
	color: var(--red);
}

#attach-button {
	background: var(--bg-elevated);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 10px;
	width: 42px;
	height: 42px;
	flex: none;
	font-size: 16px;
	cursor: pointer;
}

#attach-button:hover {
	border-color: var(--accent);
}

#attach-button:disabled {
	opacity: 0.4;
	cursor: default;
}

#composer-input {
	flex: 1;
	background: var(--bg-elevated);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 15px;
	resize: none;
	max-height: 220px;
	line-height: 1.4;
}

#composer-input:focus {
	outline: none;
	border-color: var(--accent);
}

#composer-input:disabled {
	opacity: 0.55;
}

#send-button {
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 10px;
	width: 42px;
	height: 42px;
	font-size: 16px;
	cursor: pointer;
}

#send-button:disabled {
	opacity: 0.4;
	cursor: default;
}

/* ---- auth modal (tool permissions) + token modal (LLM credentials) ---- */

/* Both sit below #login-screen (z-index 40): an expired session must never leave
   a modal floating over the login form. */
#auth-modal,
#token-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
}

#auth-modal-box,
#token-modal-box {
	background: var(--bg-panel);
	border: 1px solid var(--yellow);
	border-radius: 12px;
	padding: 20px 24px;
	max-width: 560px;
	width: 90%;
}

#token-modal-box {
	border-color: var(--accent);
}

#auth-modal-title,
#token-modal-title {
	font-weight: 600;
	margin-bottom: 10px;
}

#token-provider,
#token-value {
	width: 100%;
	box-sizing: border-box;
	background: var(--bg);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 8px 10px;
	margin-bottom: 10px;
	font-size: 14px;
}

#token-value {
	font-family: ui-monospace, Consolas, monospace;
	resize: vertical;
}

#auth-modal-tools {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 13px;
	color: var(--text-muted);
	max-height: 40vh;
	overflow-y: auto;
}

#auth-modal-tools li {
	padding: 3px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#auth-modal-buttons,
#token-status {
	font-size: 13px;
	color: var(--text-muted);
	margin-bottom: 12px;
	min-height: 16px;
}

#token-modal-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

/* Pushed to the far left, away from Salva/Annulla: it destroys a credential. */
#token-delete:not(.hidden) {
	margin-right: auto;
}

#auth-modal-buttons button,
#token-modal-buttons button {
	background: var(--bg-elevated);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 8px 14px;
	cursor: pointer;
}

#auth-modal-buttons button:hover,
#token-modal-buttons button:hover {
	border-color: var(--accent);
}

#auth-modal-buttons button.danger:hover,
#token-modal-buttons button.danger:hover {
	border-color: var(--red);
	color: var(--red);
}

#token-modal-buttons button:disabled {
	opacity: 0.4;
	cursor: default;
}

/* ---- toast ---- */

#toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--bg-elevated);
	border: 1px solid var(--red);
	color: var(--text);
	border-radius: 10px;
	padding: 10px 18px;
	font-size: 14px;
	z-index: 30;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

/* ---- login ---- */

/* Opaque, not the translucent scrim of #auth-modal: this covers the app rather
   than layering over it. Above #toast (30) so nothing can peek through. */
#login-screen {
	position: fixed;
	inset: 0;
	background: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 40;
}

#login-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 24px;
	width: 90%;
	max-width: 320px;
}

#login-title {
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 4px;
}

#login-form input {
	background: var(--bg-elevated);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 10px 12px;
	/* 16px: anything smaller makes iOS zoom in on focus. */
	font-size: 16px;
	font-family: inherit;
}

#login-form input:focus {
	outline: none;
	border-color: var(--accent);
}

#login-submit {
	background: var(--accent-soft);
	color: var(--text);
	border: 1px solid var(--accent);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 16px;
	font-family: inherit;
	cursor: pointer;
	margin-top: 4px;
}

#login-submit:hover {
	background: var(--accent);
}

#login-error {
	color: var(--red);
	font-size: 14px;
	text-align: center;
}

#sidebar-header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

#sidebar-menu-wrap {
	position: relative;
}

#sidebar-menu-btn {
	background: none;
	border: none;
	color: var(--text-muted);
	font-size: 17px;
	cursor: pointer;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 6px;
	line-height: 1;
}

#sidebar-menu-btn:hover,
#sidebar-menu-btn[aria-expanded="true"] {
	background: var(--bg-elevated);
	color: var(--text);
}

#sidebar-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	min-width: 190px;
	padding: 4px;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

#sidebar-menu button {
	background: none;
	border: none;
	color: var(--text);
	font-size: 14px;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	padding: 8px 10px;
	border-radius: 6px;
}

#sidebar-menu button:hover {
	background: var(--accent-soft);
}

#logout-btn:hover {
	color: var(--red);
}

#timeline-btn:disabled {
	cursor: default;
	opacity: 0.4;
}

/* ---- mobile ---- */

#sidebar-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--text);
	font-size: 20px;
	cursor: pointer;
	padding: 8px 12px;
}

@media (max-width: 720px) {
	#sidebar {
		position: fixed;
		top: 0;
		left: 0;
		/* Not `bottom: 0`: fixed elements can resolve against the large viewport
		   (URL bar hidden) on mobile, pushing the pinned Librarian section off-screen.
		   dvh tracks the *visible* viewport, like the body. */
		height: 100vh;
		height: 100dvh;
		z-index: 10;
		width: min(280px, 85vw);
		min-width: 0;
		transform: translateX(-100%);
		transition: transform 0.2s ease;
		box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4);
	}

	/* viewport-fit=cover extends under the gesture bar: keep the pill off the runs. */
	#librarian-section {
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	#sidebar.open {
		transform: translateX(0);
	}

	#sidebar.open + #sidebar-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 9;
		background: rgba(0, 0, 0, 0.45);
	}

	#sidebar-toggle {
		display: inline-block;
	}

	#header-controls .librarian-btn {
		display: none;
	}

	#librarian-actions {
		display: flex;
	}

	#header {
		flex-wrap: wrap;
		padding: 8px 12px;
	}

	#thread-name {
		flex: 1;
		min-width: 0;
		max-width: none;
	}

	#header-controls {
		flex: 1 0 100%;
		margin-left: 0;
	}

	#header-controls select {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
	}

	#new-conversation,
	#sidebar-menu-btn {
		width: 36px;
		height: 36px;
	}

	/* Below 16px iOS zooms the page on focus. */
	#composer-input,
	#header-controls select,
	#token-provider,
	#token-value,
	.conversation-item input.conv-rename-input {
		font-size: 16px;
	}
}

/* Touch devices: no hover, so the rename/delete affordances must always be
   visible — and big enough to hit. */
@media (hover: none) {
	.conversation-item .conv-rename,
	.conversation-item .conv-delete {
		visibility: visible;
		font-size: 16px;
		padding: 6px 8px;
		top: 2px;
	}

	.conversation-item .conv-delete {
		right: 0;
	}

	.conversation-item .conv-rename {
		right: 32px;
	}

	.conversation-item .conv-title {
		padding-right: 68px;
	}

	.attachment-remove {
		width: 24px;
		height: 24px;
		font-size: 13px;
	}
}