:root {
   color-scheme: light dark;
   --transition-duration: 0.25s;
   --footer-control-offset: 12px;
   /* === PALETTE: BASE COLORS & RGBS === */
   /* Light theme neutrals */
   --palette-app-bg-light: #f4f5f7;
   --palette-surface-light: #ffffff;
   --palette-message-bg-light: #ffffff;
   --palette-text-main-light: #172b4d;
   --palette-text-muted-light: #5e6c84;
   --palette-border-subtle-light: #dfe1e6;
   /* Dark theme neutrals */
   --palette-app-bg-dark: #15171b;
   --palette-surface-dark: #1b1d21;
   --palette-message-bg-dark: #1b1d21;
   --palette-text-main-dark: #f4f5f7;
   --palette-text-muted-dark: #c1c7d0;
   --palette-border-subtle-dark: #2c2f36;
   /* Code & inline code */
   --palette-code-block-bg-light: #f4f5f7;
   --palette-code-block-bg-dark: #101218;
   --palette-inline-code-rgb-light: 9, 30, 66;
   --palette-inline-code-rgb-dark: 255, 255, 255;
   --palette-code-border-rgb-light: 9, 30, 66;
   --palette-code-border-rgb-dark: 255, 255, 255;
   /* Accent/link */
   --palette-accent: #006569;
   --palette-accent-hover-light: #003838;
   --palette-accent-hover-dark: #6eedda;
   --palette-link: #006569;
   --palette-link-hover-light: #003838;
   --palette-link-hover-dark: #6eedda;
   /* Inputs & settings surfaces */
   --palette-input-bg-light: #ffffff;
   --palette-input-bg-dark: #15171b;
   --palette-input-border-rgb-light: 9, 30, 66;
   --palette-input-border-rgb-dark: 255, 255, 255;
   --palette-settings-panel-bg-light: #ffffff;
   --palette-settings-panel-bg-dark: #1b1d21;
   --palette-settings-inline-panel-bg-dark-rgb: 255, 255, 255;
   /* Feedback colors */
   --palette-error: #b71c1c;
   --palette-success-border-light: #2e7d32;
   --palette-success-border-dark: #66bb6a;
   --palette-success-bg-light-rgb: 46, 125, 50;
   --palette-success-bg-dark-rgb: 102, 187, 106;
   --palette-success-text-dark: #c8e6c9;
   /* Shadows & outlines */
   --palette-shadow-base-rgb: 9, 30, 66;
   --palette-shadow-strong-rgb: 0, 0, 0;
   --palette-focus-ring-light-rgb: 0, 82, 204;
   --palette-focus-ring-dark-rgb: 76, 154, 255;
   /* Common */
   --palette-on-accent: #ffffff;
   --palette-backdrop: transparent;
   /* === SEMANTIC COLORS (DEFAULT = LIGHT) === */
   --color-bg-app: var(--palette-app-bg-light);
   --color-bg-header: var(--palette-surface-light);
   --color-bg-footer: var(--palette-surface-light);
   --color-text-main: var(--palette-text-main-light);
   --color-text-muted: var(--palette-text-muted-light);
   --color-border-subtle: var(--palette-border-subtle-light);
   --color-message-bg: var(--palette-message-bg-light);
   --color-accent: var(--palette-accent);
   --color-accent-hover: var(--palette-accent-hover-light);
   --color-link: var(--palette-link);
   --color-link-hover: var(--palette-link-hover-light);
   --color-on-accent: var(--palette-on-accent);
   --color-inline-code-bg: rgba(var(--palette-inline-code-rgb-light), 0.06);
   --color-code-block-bg: var(--palette-code-block-bg-light);
   --color-code-border: rgba(var(--palette-code-border-rgb-light), 0.15);
   --color-backdrop: var(--palette-backdrop);
   --color-input-bg: var(--palette-input-bg-light);
   --color-input-border: rgba(var(--palette-input-border-rgb-light), 0.2);
   --color-input-border-focus: var(--color-accent);
   --color-input-focus-ring: rgba(var(--palette-focus-ring-light-rgb), 0.4);
   --color-settings-panel-bg: var(--palette-settings-panel-bg-light);
   --color-settings-inline-panel-bg: transparent;
   --color-settings-button-bg: var(--palette-surface-light);
   --color-settings-button-hover-bg: rgba(var(--palette-shadow-base-rgb), 0.04);
   --color-toggle-hover-bg: rgba(var(--palette-shadow-base-rgb), 0.04);
   --color-error-text: var(--palette-error);
   --color-danger-border: var(--palette-error);
   --color-success-border: var(--palette-success-border-light);
   --color-success-bg: rgba(var(--palette-success-bg-light-rgb), 0.08);
   --color-success-text: var(--palette-success-border-light);
   --color-project-manage-bg: var(--palette-surface-light);
   --color-shadow-soft: 0 1px 1px rgba(var(--palette-shadow-base-rgb), 0.08);
   --color-shadow-card-strong: 0 2px 4px rgba(var(--palette-shadow-strong-rgb), 0.4);
   --color-shadow-footer: 0 -1px 2px rgba(var(--palette-shadow-base-rgb), 0.1);
}

html[data-theme="dark"] {
   --color-bg-app: var(--palette-app-bg-dark);
   --color-bg-header: var(--palette-surface-dark);
   --color-bg-footer: var(--palette-surface-dark);
   --color-text-main: var(--palette-text-main-dark);
   --color-text-muted: var(--palette-text-muted-dark);
   --color-border-subtle: var(--palette-border-subtle-dark);
   --color-message-bg: var(--palette-message-bg-dark);
   --color-accent: var(--palette-accent);
   --color-accent-hover: var(--palette-accent-hover-dark);
   --color-link: var(--palette-link);
   --color-link-hover: var(--palette-link-hover-dark);
   --color-inline-code-bg: rgba(var(--palette-inline-code-rgb-dark), 0.08);
   --color-code-block-bg: var(--palette-code-block-bg-dark);
   --color-code-border: rgba(var(--palette-code-border-rgb-dark), 0.2);
   --color-input-bg: var(--palette-input-bg-dark);
   --color-input-border: rgba(var(--palette-input-border-rgb-dark), 0.3);
   --color-input-focus-ring: rgba(var(--palette-focus-ring-dark-rgb), 0.5);
   --color-settings-panel-bg: var(--palette-settings-panel-bg-dark);
   --color-settings-inline-panel-bg: rgba(var(--palette-settings-inline-panel-bg-dark-rgb), 0.03);
   --color-settings-button-bg: var(--palette-input-bg-dark);
   --color-settings-button-hover-bg: rgba(var(--palette-inline-code-rgb-dark), 0.06);
   --color-toggle-hover-bg: rgba(var(--palette-inline-code-rgb-dark), 0.06);
   --color-success-border: var(--palette-success-border-dark);
   --color-success-bg: rgba(var(--palette-success-bg-dark-rgb), 0.2);
   --color-success-text: var(--palette-success-text-dark);
   --color-project-manage-bg: var(--palette-surface-dark);
   --color-shadow-soft: 0 2px 4px rgba(var(--palette-shadow-strong-rgb), 0.4);
   --color-shadow-card-strong: 0 2px 6px rgba(var(--palette-shadow-strong-rgb), 0.7);
   --color-shadow-footer: 0 -2px 4px rgba(var(--palette-shadow-strong-rgb), 0.5);
}

html,
body {
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
   display: flex;
   flex-direction: column;
   background-color: var(--color-bg-app);
   color: var(--color-text-main);
}

/* Header */
.header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
   padding-right: 6px;
   box-sizing: border-box;
   z-index: 20;
   background-color: var(--color-bg-header);
   border-bottom: 1px solid var(--color-border-subtle);
}

.header-title {
   font-size: 16px;
   font-weight: 400;
   color: var(--color-text-main);
   cursor: default;
   display: flex;
   align-items: baseline;
}

.header-title-strong {
   font-weight: 600;
   margin-right: 4px;
}

#appHeaderTitleSuffix {
   font-weight: 100;
}

/* Header project select in the middle, max 250px */
.header-project-select {
   flex: 1 1 250px;
   display: flex;
   justify-content: right;
   margin: 0 8px;
   margin-right: 4px;
}

.header-project-select-input {
   max-width: 250px;
   font-size: 13px;
}
#projectSelect {
   text-align: right;
   border: 0px;
   background: transparent;
}
#projectSelect:focus {
    outline:none;
}

.header-spacer {
   height: 48px;
   flex-shrink: 0;
}

.burger-button {
   width: 32px;
   height: 32px;
   border: none;
   background: none;
   cursor: pointer;
   padding: 0;
   padding-bottom: 4px;
   outline: none;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-text-main);
   font-size: 20px;
   line-height: 1;
}

/* App + chat layout */
.app-container {
   display: flex;
   flex-direction: column;
   height: 100%;
}

.chat-container {
   flex: 1 1 auto;
   overflow-y: auto;
   box-sizing: border-box;
   padding: 0 0 20px 0;
   display: flex;
   justify-content: center;
   margin-bottom: 82px;
}

.chat-shell {
   width: 100%;
   max-width: 960px;
   box-sizing: border-box;
   padding: 4px 16px 24px;
}

.chat-card {
   padding-bottom: 45px;
}

.messages {
   width: 100%;
   box-sizing: border-box;
}

.message {
   margin: 20px auto 0;
   max-width: min(90%, 700px);
   box-sizing: border-box;
}

.message-sender {
   font-size: 12px;
   font-weight: 600;
   margin: 0 0 10px 2px;
   color: var(--color-text-muted);
   cursor: default;
   text-align: left;
}

.message-sender-you {
   text-align: right;
}

/* AIMS sender + timer */
.message-sender-aims {
   display: inline-flex;
   align-items: baseline;
}

.message-sender-label {
   font-weight: 600;
}

.message-sender-timer {
   margin-left: 6px;
   font-size: 11px;
   font-weight: 400;
   opacity: 1;
   transition: opacity 0.15s ease;
   color: var(--color-text-main);
}

.message[data-aims-timer="running"] .message-sender-timer {
   opacity: 1;
   color: var(--color-text-main);
}

.message[data-aims-timer="done"] .message-sender-timer {
   opacity: 0;
   color: var(--color-text-muted);
}

.message[data-aims-timer="done"]:hover .message-sender-timer {
   opacity: 1;
}

.message-content {
   font-size: 14px;
   line-height: 1.5;
   word-wrap: break-word;
   color: var(--color-text-main);
   background-color: var(--color-message-bg);
   border-radius: 6px;
   border: 1px solid var(--color-border-subtle);
   box-shadow: var(--color-shadow-soft);
   padding: 20px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   position: relative;
}

.message:not([data-welcome=true]) .message-content.bot {
   /* reserved for future directional tweaks */
}

.message-content.user {
   /* reserved for future directional tweaks */
}

html[data-theme="dark"] .message-content {
   box-shadow: var(--color-shadow-card-strong);
}

.message-content-inner {
   flex: 1 1 auto;
   position: relative;
}

.message-content-inner hr {
   border-color: var(--color-bg-app);
   opacity: 0.3;
   margin-top: 16px;
   margin-bottom: 16px;
   margin-left: -21px;
   margin-right: -21px;
}

.message-content-inner li {
   margin-top: 8px;
}

.message-content-controls {
   margin-top: 6px;
   display: flex;
   justify-content: center;
}

.message-toggle-button {
   border-radius: 999px;
   border: 1px solid var(--color-border-subtle);
   background: none;
   font-size: 11px;
   padding: 3px 10px;
   cursor: pointer;
   color: var(--color-text-main);
}

.message-toggle-button:hover {
   background-color: var(--color-toggle-hover-bg);
}

.message-content-inner.collapsed {
   max-height: 50vh;
   overflow-y: auto;
}

.message-content-inner.collapsed::after {
   content: "";
   position: sticky;
   bottom: 0;
   left: 0;
   right: 0;
   height: 32px;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--color-message-bg) 100%);
   pointer-events: none;
   display: block;
}

/* Markdown defaults */
.message-content p {
   margin: 0 0 0.5em;
}

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

.message-content code {
   font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 0.85em;
   background-color: var(--color-inline-code-bg);
   padding: 0.1em 0.3em;
   border-radius: 3px;
}

.message-content pre {
   margin: 0.5em 0;
   padding: 8px;
   border-radius: 4px;
   overflow-x: auto;
   border: 1px solid var(--color-code-border);
   background-color: var(--color-code-block-bg);
}

.message-content pre code {
   white-space: pre;
   display: block;
   background: none;
   padding: 0;
}

.message-content a {
   text-decoration: underline;
   color: var(--color-link);
}

.message-content a:hover {
   color: var(--color-link-hover);
}

/* Markdown headings inside messages */
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
   font-weight: 400;
   margin: 1em 0 0.3em;
   color: var(--color-text-main);
}

.message-content h1 {
   font-size: 20px;
}

.message-content h2 {
   font-size: 18px;
}

.message-content h3 {
   font-size: 16px;
}

.message-content h4 {
   font-size: 15px;
}

.message-content h5,
.message-content h6 {
   font-size: 14px;
}

.message-content > h1:first-child,
.message-content > h2:first-child,
.message-content > h3:first-child,
.message-content > h4:first-child,
.message-content > h5:first-child,
.message-content > h6:first-child,
.message-content-inner > h1:first-child,
.message-content-inner > h2:first-child,
.message-content-inner > h3:first-child,
.message-content-inner > h4:first-child,
.message-content-inner > h5:first-child,
.message-content-inner > h6:first-child {
   margin-top: 0;
}

/* Markdown tables inside messages */
.message-content table {
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
   margin: 12px 0 8px;
}

.message-content th,
.message-content td {
   padding: 8px;
   border: 1px solid var(--color-border-subtle);
}

.message-content thead th {
   background-color: var(--color-bg-app);
}

/* Inline placeholders in message text */
.placeholder-inline {
   border-radius: 3px;
   padding: 0 3px;
   background-color: var(--color-bg-app);
   border: 1px solid var(--color-border-subtle);
   cursor: default;
   white-space: nowrap;
}

.placeholder-inline:hover {
   background-color: var(--color-toggle-hover-bg);
}

/* Copy buttons */
.copy-button {
   position: absolute;
   width: 24px;
   height: 24px;
   padding: 4px;
   border: none;
   border-radius: 999px;
   background: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.15s ease;
   color: var(--color-text-muted);
}

.copy-button svg {
   width: 16px;
   height: 16px;
   display: block;
}

.copy-button-top {
   top: 6px;
   right: 6px;
}

.copy-button-bottom {
   bottom: 6px;
   right: 6px;
}

.message-content .copy-button {
   opacity: 0;
}

.message-content.show-copy-bottom .copy-button-bottom {
   opacity: 1;
}

.message-content.show-copy-top .copy-button-top {
   opacity: 1;
}

/* Input area / footer */
.input-container-outer {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   box-sizing: border-box;
   z-index: 81;
   display: flex;
   justify-content: center;
   background-color: var(--color-bg-footer);
   border-top: 1px solid var(--color-border-subtle);
   box-shadow: var(--color-shadow-footer);
   padding: 8px 0;
   padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
}

.input-inner-shell {
   width: 100%;
   max-width: 960px;
   box-sizing: border-box;
   padding: 0 16px;
   display: flex;
   justify-content: center;
}

.input-container {
   position: relative;
   width: 100%;
   background-color: transparent;
   border: none;
   padding: 0;
   box-sizing: border-box;
}

.input-field-wrapper {
   position: relative;
   max-width: min(90%, 700px);
   margin: 0 auto;
   padding: 5px 0;
}

.input-textarea {
   display: block;
   width: 100%;
   box-sizing: border-box;
   padding: 8px 88px 8px 10px;
   border-radius: 4px;
   border: 1px solid var(--color-input-border);
   resize: none;
   font-family: inherit;
   font-size: 14px;
   line-height: 1.4;
   max-height: calc(100vh / 3);
   overflow-y: auto;
   background-color: var(--color-input-bg);
   color: var(--color-text-main);
}

.input-textarea:focus {
   outline: none;
   border-color: var(--color-input-border-focus);
   box-shadow: 0 0 0 1px var(--color-input-focus-ring);
}

.send-button {
   position: absolute;
   right: 8px;
   bottom: 14px;
   width: 36px;
   height: 36px;
   border-radius: 999px;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0;
   background-color: var(--color-accent);
   color: var(--color-on-accent);
   transition: opacity 0.15s ease, transform 0.1s ease, background-color 0.15s ease;
}

.send-button:disabled {
   opacity: 0.4;
   cursor: default;
   transform: none;
}

.send-button:not(:disabled):hover {
   transform: translateY(-1px);
   background-color: var(--color-accent-hover);
}

.send-button-icon {
   width: 18px;
   height: 18px;
   display: block;
}

.send-button-icon svg {
   width: 100%;
   height: 100%;
   display: block;
}

.placeholder-input-button {
   position: absolute;
   right: 51px;
   bottom: 13px;
   width: 30px;
   height: 30px;
   border-radius: 999px;
   border: 1px solid var(--color-input-border);
   background: var(--color-settings-button-bg);
   color: var(--color-text-main);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   line-height: 1;
   padding: 0;
}

.placeholder-input-button:hover {
   background-color: var(--color-settings-button-hover-bg);
}

/* Settings panel and backdrop */
.backdrop {
   position: fixed;
   inset: 0;
   background-color: var(--color-backdrop);
   opacity: 0;
   visibility: hidden;
   transition: opacity var(--transition-duration) ease;
   z-index: 50;
   cursor: pointer;
}

.backdrop.visible {
   opacity: 0;
   visibility: visible;
}

.settings-panel {
   position: fixed;
   top: 0;
   bottom: 0;
   right: 0;
   width: 300px;
   box-sizing: border-box;
   padding: 16px 16px 24px;
   transform: translateX(100%);
   transition: transform var(--transition-duration) ease;
   z-index: 82;
   background-color: var(--color-settings-panel-bg);
   color: var(--color-text-main);
   display: flex;
   flex-direction: column;
   gap: 12px;
   box-shadow: -2px 0 6px rgba(var(--palette-shadow-base-rgb), 0.25);
   border-left: 1px solid var(--color-border-subtle);
   overflow-y: auto;
}

html[data-theme="dark"] .settings-panel {
   box-shadow: -2px 0 10px rgba(var(--palette-shadow-strong-rgb), 0.6);
}

.settings-panel button {
   cursor: pointer;
}

.settings-panel.open {
   transform: translateX(0);
}

.settings-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: -6px 0 0;
   margin-right: -10px;
}

.settings-title {
   font-size: 14px;
   font-weight: 600;
   cursor: default;
}

.settings-close-button {
   width: 32px;
   height: 32px;
   border: none;
   background: none;
   cursor: pointer;
   font-size: 24px;
   line-height: 1;
   padding: 0;
   color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
}

.settings-group {
   display: flex;
   flex-direction: column;
   gap: 4px;
   font-size: 13px;
   margin-top: 10px;
}

.settings-label {
   font-weight: 500;
}

.settings-input,
.settings-select {
   padding: 6px 8px;
   font-size: 13px;
   font-family: inherit;
   border-radius: 4px;
   border: 1px solid var(--color-input-border);
   background: var(--color-input-bg);
   box-sizing: border-box;
   color: inherit;
}

.settings-select {
   cursor: pointer;
}

.settings-textarea {
   min-height: 83px;
   resize: none;
   line-height: 1.3;
   white-space: pre-wrap;
   overflow-y: hidden;
}

.settings-description {
   font-size: 11px;
   opacity: 0.7;
   cursor: default;
}

.settings-button {
   margin-top: 2px;
   padding: 7px 9px;
   font-size: 13px;
   border-radius: 4px;
   border: 1px solid var(--color-input-border);
   background: var(--color-settings-button-bg);
   cursor: pointer;
   text-align: left;
   color: var(--color-text-main);
}

.settings-button:hover {
   background-color: var(--color-settings-button-hover-bg);
}

.settings-small-button {
   padding: 3px 6px;
   font-size: 12px;
   border-radius: 4px;
   border: 1px solid var(--color-input-border);
   background: var(--color-settings-button-bg);
   cursor: pointer;
   color: var(--color-text-main);
}

.settings-small-button:hover {
   background-color: var(--color-settings-button-hover-bg);
}

.settings-small-button.success {
   border-color: var(--color-success-border);
   background-color: var(--color-success-bg);
   color: var(--color-success-text);
   padding: 3px 8px 1px 8px !important;
}

.settings-project-row {
   display: flex;
   gap: 10px;
   align-items: center;
}

.settings-project-row .settings-select {
   flex: 1 1 auto;
}

.settings-project-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 6px;
}

.settings-project-buttons button {
   margin-top: -1px;
   font-size: 20px;
   width: 30px;
   height: 31px;
   padding: 0;
   text-align: center;
   vertical-align: middle;
}

#projectEditButton {
   font-size: 18px;
   width: 30px;
   padding: 0 0 1px 0;
}

#projectCloneButton {
   font-size: 23px;
   width: 28px;
   padding: 0 0 2px 2px;
}

#projectRenameButton {
   font-size: 17px;
   padding: 0;
}

#projectDeleteButton {
   font-size: 19px;
   padding: 0;
}

#projectImportToggleButton {
   font-size: 15px;
   padding: 0;
}

#projectExportButton {
   font-size: 15px;
   padding: 0;
}

.settings-inline-panel {
   margin: 0;
   padding: 18px 0 0;
}

.settings-inline-panel .settings-input,
.settings-inline-panel .settings-select,
.settings-inline-panel .settings-textarea {
   width: 100%;
}

.settings-inline-panel .settings-label {
   margin-bottom: 8px;
}

.settings-inline-row {
   display: flex;
   gap: 8px;
   margin-top: 8px;
}

.settings-inline-error {
   font-size: 11px;
   color: var(--color-error-text);
   margin-top: 4px;
}

.settings-footer-spacer {
   flex: 1;
}

.settings-info {
   font-size: 11px;
   color: var(--color-text-muted);
   opacity: 1;
   margin-bottom: -8px;
   text-align: right;
   cursor: default;
}

.danger {
   color: var(--color-error-text);
   border-color: var(--color-danger-border);
   font-size: 17px !important;
   padding: 2px 9px 3px 9px !important;
}

/* Project config container */
.settings-project-config.hidden {
   display: none;
}

.settings-project-config .settings-group:not(:first-child) {
   margin-top: 18px;
}

/* Placeholders panel & backdrop */
.placeholders-backdrop {
   position: fixed;
   inset: 0;
   background-color: var(--color-backdrop);
   opacity: 0;
   visibility: hidden;
   transition: opacity var(--transition-duration) ease;
   z-index: 70;
   cursor: pointer;
}

.placeholders-backdrop.visible {
   opacity: 0;
   visibility: visible;
}

.placeholders-panel {
   position: fixed;
   top: 48px;
   bottom: 80px;
   left: 0;
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
   padding: 16px 16px 0;
   transform: translateY(100%);
   transition: transform var(--transition-duration) ease;
   z-index: 80;
   background-color: var(--color-settings-panel-bg);
   color: var(--color-text-main);
   display: flex;
   flex-direction: column;
   gap: 12px;
   border-right: 1px solid var(--color-border-subtle);
}

html.settings-open .placeholders-panel {
   width: calc(100vw - 300px);
   z-index: 79;
}

.placeholders-panel.open {
   transform: translateY(0);
}

.placeholders-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: -12px 0 -6px;
}

.placeholders-title {
   font-size: 14px;
   font-weight: 600;
}

.placeholders-close-button {
   width: 32px;
   height: 32px;
   border: none;
   background: none;
   cursor: pointer;
   font-size: 24px;
   line-height: 1;
   padding: 0;
   color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: -2px;
}

.placeholders-table {
   margin-top: 4px;
   flex: 1 1 auto;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 0 8px 16px 0;
}

.placeholder-row {
   display: grid;
   grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.5fr) auto;
   gap: 8px;
   align-items: flex-start;
}

.placeholder-row .placeholder-key-input,
.placeholder-row .placeholder-value-input {
   width: 100%;
   box-sizing: border-box;
}

.placeholder-key-input {
   padding: 6px 8px;
   font-size: 13px;
   font-family: inherit;
   border-radius: 4px;
   border: 1px solid var(--color-input-border);
   background: var(--color-input-bg);
   color: inherit;
}

.placeholder-key-input:focus {
   outline: none;
   border-color: var(--color-input-border-focus);
   box-shadow: 0 0 0 1px var(--color-input-focus-ring);
}

.placeholder-value-input {
   padding: 6px 8px;
   font-size: 13px;
   font-family: inherit;
   border-radius: 4px;
   border: 1px solid var(--color-input-border);
   background: var(--color-input-bg);
   color: inherit;
   resize: none;
   min-height: 28px;
   line-height: 1.3;
   overflow-y: hidden;
}

.placeholder-value-input:focus {
   outline: none;
   border-color: var(--color-input-border-focus);
   box-shadow: 0 0 0 1px var(--color-input-focus-ring);
}

.placeholder-actions {
   display: flex;
   flex-direction: row;
   gap: 4px;
}

.placeholder-actions .settings-small-button {
   white-space: nowrap;
   width: 30px;
   height: 30px;
   padding: 0;
   text-align: center;
}

.placeholder-insert-button {
   font-size: 14px;
}

.placeholder-delete-button {
   font-size: 20px;
}

.placeholder-row-new .placeholder-actions {
   visibility: hidden;
}

/* Utility */
.hidden {
   display: none;
}

/* ------------------------------------------------ */
/* AUTH GATE (shown only when login is required)    */
/* ------------------------------------------------ */

.auth-gate {
   position: fixed;
   inset: 0;
   background-color: var(--color-bg-app);
   color: var(--color-text-main);
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px;
   box-sizing: border-box;
   z-index: 200; /* above everything else */
}

.auth-gate.hidden {
   display: none;
}

.auth-card {
   background-color: var(--color-message-bg);
   border: 1px solid var(--color-border-subtle);
   border-radius: 8px;
   box-shadow: var(--color-shadow-card-strong);
   padding: 28px 24px;
   max-width: 420px;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 18px;
   text-align: left;
}

.auth-title {
   margin: 0;
   font-size: 22px;
   font-weight: 600;
}

.auth-intro {
   margin: 0;
   font-size: 14px;
   color: var(--color-text-main);
}

.auth-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.auth-group .settings-description a {
   color: var(--color-link);
}

.auth-group .settings-description a:hover {
   color: var(--color-link-hover);
}