body {
line-height: 1.5;
}
.us-container {
display: flex;
height: 100vh;
width: 100%;
background: var(--background);
position: relative;
}
.us-container.us-opening {
animation: fadeInUp10 0.3s ease-out;
}
.us-container.us-closing {
animation: fadeOut 0.2s ease-in forwards;
}
body.us-sidebar-open {
overflow: hidden;
}
/* Sidebar Styles */
.us-sidebar {
padding-bottom: 120px;
padding-right: 12px;
width: 240px;
overflow-y: auto;
scrollbar-gutter: stable;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: 80px;
margin-left: 100px;
background: var(--background);
z-index: 3;
}
/* Mobile sidebar header - hidden by default, shown only on small screens */
.us-sidebar-mobile-header {
display: none;
}
.us-sidebar-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
z-index: 2;
pointer-events: none;
-webkit-tap-highlight-color: transparent;
}
.us-sidebar-backdrop.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Prevent body scroll when sidebar is open */
body.us-sidebar-open #userSettingsView {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}
.us-sidebar-footer {
margin-top: auto;
padding: 12px 0 0;
display: flex;
flex-direction: column;
gap: 12px;
}
/* User Settings overrides for .nav-btn (base defined in elements.css) */
#userSettingsView .nav-btn {
gap: 8px;
padding: 10px 14px;
border-radius: 8px;
font-size: 14px;
text-decoration: none;
text-align: center;
}
#userSettingsView .nav-btn.big {
padding: 14px 16px;
}
#userSettingsView .nav-btn svg {
width: 18px;
height: 18px;
}
@media (hover: hover) and (pointer: fine) {
#userSettingsView .nav-btn:hover {
background: var(--hover);
}
}
#userSettingsView .nav-btn:focus-visible {
outline: none;
border-color: var(--primary-color);
}
#userSettingsView .nav-btn:active {
transform: translateY(1px);
}
.us-sidebar-header {
margin-bottom: 24px;
}
.us-container.us-opening .us-sidebar-header {
animation: slideInLeft 0.4s ease-out;
}
.us-user-profile {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 8px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.us-user-profile img {
object-fit: cover;
}
.us-avatar {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 50%;
font-size: 16px;
}
.us-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.us-user-info h3 {
font-size: 14px;
font-weight: 600;
margin-bottom: 2px;
color: var(--text-color);
}
.us-user-info p {
font-size: 12px;
color: var(--text-color-secondary);
}
.us-nav-section {
margin-bottom: 24px;
}
.us-nav-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: var(--text-color-tertiary);
padding: 0 12px;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.us-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
margin-bottom: 2px;
position: relative;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
/* Safari, Chrome, Opera, iOS Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */;
}
.us-nav-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: var(--primary-color);
transform: translateX(-100%);
}
@media (hover: hover) and (pointer: fine) {
.us-nav-item:hover {
background: var(--hover);
}
}
.us-nav-item.active {
background: var(--hover);
color: var(--text-color);
}
.us-nav-item.active::before {
transform: translateX(0);
}
.us-nav-icon {
width: 18px;
height: 18px;
opacity: 0.8;
color: var(--text-color);
}
.us-nav-item-red {
color: var(--error-color);
}
.us-nav-text {
font-size: 14px;
font-weight: 500;
color: var(--text-color);
}
/* Main Content Styles */
.us-main-content {
flex: 1;
overflow-y: auto;
padding-right: 100px;
padding-left: 100px;
margin-top: 80px;
}
.us-container.us-opening .us-main-content {
animation: slideUp 0.5s ease-out;
}
@media (max-width: 1024px) {
.us-container {
height: auto;
min-height: 100vh;
}
.us-sidebar {
margin-left: 40px;
margin-top: 64px;
}
.us-main-content {
padding-left: 40px;
padding-right: 40px;
margin-top: 64px;
}
}
.us-settings-header {
margin-bottom: 32px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.us-settings-nav-toggle {
display: none;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--background);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.us-settings-nav-toggle svg {
width: 22px;
height: 22px;
}
.us-settings-nav-toggle:focus-visible {
outline: none;
border-color: var(--primary-color);
}
@media (hover: hover) and (pointer: fine) {
.us-settings-nav-toggle:hover {
background: var(--hover);
}
}
.us-settings-header-text {
color: var(--text-color);
flex: 1;
min-width: 0;
}
.us-settings-close-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid var(--border-color);
background: var(--background);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.us-settings-close-button svg {
width: 18px;
height: 18px;
}
@media (hover: hover) and (pointer: fine) {
.us-settings-close-button:hover {
background: var(--hover);
}
}
.us-settings-close-button:focus-visible {
outline: none;
border-color: var(--primary-color);
}
.data-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.data-card {
border: 1px solid var(--border-color);
border-radius: 18px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 18px;
}
.data-card-header {
display: flex;
gap: 16px;
}
.data-card-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
min-width: 44px;
border-radius: 12px;
background: var(--hover);
display: flex;
align-items: center;
justify-content: center;
}
.data-card-header > :not(.data-card-icon) {
flex: 1;
min-width: 0;
}
.data-card-icon svg {
width: 22px;
height: 22px;
color: var(--text-color);
}
.data-card h3 {
margin: 0;
font-size: 16px;
color: var(--text-color);
}
.data-card p {
margin: 4px 0 0;
color: var(--text-color-secondary);
font-size: 14px;
}
.data-card-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
/*
* Keep every card's controls on the same baseline within its grid row.
* Descriptions vary in length across features and translations, so the
* remaining vertical space belongs above the actions instead of below them.
*/
margin-top: auto;
}
.data-card-actions .nav-btn {
flex: 1;
justify-content: center;
}
.nav-btn.ghost {
background: transparent;
border-style: dashed;
color: var(--text-color);
}
@media (hover: hover) and (pointer: fine) {
.nav-btn.ghost:hover {
background: var(--hover);
}
}
.data-card-actions .nav-btn.ghost {
color: var(--text-color-secondary);
}
@media (hover: hover) and (pointer: fine) {
.data-card-actions .nav-btn.ghost:hover {
color: var(--text-color);
}
}
.memory-settings-hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 32px;
padding: 32px;
border-radius: 20px;
border: 1px solid var(--border-color);
background:
radial-gradient(circle at top right, rgba(57, 129, 247, 0.18), transparent 42%),
linear-gradient(135deg, rgba(57, 129, 247, 0.1), rgba(52, 211, 153, 0.08));
}
.memory-settings-eyebrow {
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.1em;
font-weight: 600;
color: var(--text-color-tertiary);
margin-bottom: 8px;
}
.memory-settings-hero h2 {
font-size: 32px;
margin: 0;
color: var(--text-color);
}
.memory-settings-subtitle {
margin-top: 12px;
color: var(--text-color-secondary);
max-width: 560px;
}
@media (max-width: 768px) {
.data-cards-grid {
grid-template-columns: 1fr;
}
.memory-settings-hero {
flex-direction: column;
padding: 20px;
}
/* Scale the oversized hero heading down so it matches the rest of the
compact mobile settings layout instead of dwarfing the content. */
.memory-settings-hero h2 {
font-size: 22px;
}
.memory-settings-subtitle {
font-size: 13px;
}
.data-card {
padding: 16px;
border-radius: 14px;
}
.data-card h3 {
font-size: 15px;
}
.data-card p {
font-size: 13px;
}
}
.us-settings-header h1 {
font-size: 32px;
font-weight: 700;
margin-bottom: 8px;
}
.us-settings-header p {
font-size: 14px;
color: var(--text-color-secondary);
}
.us-settings-section {
margin-bottom: 48px;
color: var(--text-color-secondary);
}
.us-container.us-opening .us-page.us-opening-page .us-settings-section {
animation: slideUp 0.6s ease-out backwards;
}
.us-page .us-settings-section:last-of-type {
margin-bottom: 0;
}
.us-page {
display: none;
padding-bottom: 120px;
}
.us-page.active {
display: block;
}
.us-settings-section:nth-child(2) { animation-delay: 0.1s; }
.us-settings-section:nth-child(3) { animation-delay: 0.2s; }
.us-settings-section:nth-child(4) { animation-delay: 0.3s; }
.us-section-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
color: var(--text-color);
}
.us-section-description {
font-size: 14px;
color: var(--text-color-secondary);
margin-bottom: 24px;
}
.us-section-description-compact {
font-size: 13px;
color: var(--text-color-secondary);
margin-bottom: 16px;
}
.us-inline-status {
font-size: 12px;
color: var(--text-color-secondary);
margin-top: 12px;
margin-bottom: 0;
}
.us-inline-note {
display: none;
margin-top: 8px;
font-size: 13px;
color: var(--text-color-secondary);
}
.us-inline-error {
display: none;
color: var(--error-color, #e74c3c);
font-size: 13px;
margin-top: 8px;
}
/* ============================================================
Keyboard Shortcuts — minimal, modern, mobile-first design
============================================================ */
.us-shortcuts-header {
margin-bottom: 20px;
}
.us-shortcuts-grid {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid var(--border-color);
border-radius: 14px;
background: var(--background);
overflow: hidden;
}
.us-shortcut-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 16px 20px;
border-bottom: 1px solid var(--border-color);
transition: background-color 0.15s ease;
}
.us-shortcut-card:last-child {
border-bottom: none;
}
@media (hover: hover) and (pointer: fine) {
.us-shortcut-card:hover {
background: var(--hover);
}
}
.us-shortcut-content {
flex: 1 1 auto;
min-width: 0;
}
.us-shortcut-content h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--text-color);
line-height: 1.4;
letter-spacing: -0.005em;
}
.us-shortcut-content p {
margin: 4px 0 0;
font-size: 13px;
color: var(--text-color-secondary);
line-height: 1.5;
}
.us-shortcut-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 28px;
padding: 0 10px;
border: 1px solid var(--border-color);
border-bottom-width: 2px;
border-radius: 6px;
background: var(--background);
color: var(--text-color);
font-family: var(--font-system);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
box-sizing: border-box;
}
.us-setting-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid var(--border-color);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
gap: 16px;
}
.us-setting-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 8px;
max-width: 100%;
min-width: 0;
}
.us-setting-actions .nav-btn {
flex: 0 1 auto;
}
.us-setting-item.align-start.column {
align-items: flex-start;
}
.us-setting-item.is-disabled {
opacity: 0.6;
pointer-events: none;
}
.us-setting-item.column {
flex-direction: column;
}
#userNotificationsWebhookField .us-setting-controls {
flex: 0 1 420px;
min-width: min(100%, 280px);
max-width: 420px;
display: flex;
flex-direction: column;
gap: 8px;
}
.us-setting-info h3 {
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
color: var(--text-color);
}
.us-setting-info p {
font-size: 13px;
color: var(--text-color-secondary);
}
#chatgptImportExportButton {
white-space: nowrap;
}
.mcp-page-shell {
display: flex;
flex-direction: column;
gap: 8px;
}
.mcp-hero-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
gap: 24px;
padding: 28px;
border: 1px solid rgba(49, 96, 173, 0.16);
border-radius: 24px;
background:
radial-gradient(circle at top right, rgba(83, 177, 255, 0.22), transparent 34%),
radial-gradient(circle at bottom left, rgba(43, 200, 168, 0.16), transparent 30%),
linear-gradient(145deg, rgba(18, 43, 76, 0.05), rgba(33, 115, 203, 0.03));
overflow: hidden;
}
.mcp-hero-card::after {
content: "";
position: absolute;
inset: auto -40px -70px auto;
width: 220px;
height: 220px;
border-radius: 999px;
background: radial-gradient(circle, rgba(39, 196, 180, 0.18), transparent 68%);
pointer-events: none;
}
.byok-hero-card {
background:
radial-gradient(circle at top right, rgba(255, 170, 76, 0.2), transparent 34%),
radial-gradient(circle at bottom left, rgba(53, 173, 255, 0.14), transparent 30%),
linear-gradient(145deg, rgba(102, 63, 14, 0.05), rgba(203, 134, 33, 0.03));
}
.mcp-hero-copy {
position: relative;
z-index: 1;
}
.mcp-eyebrow {
margin: 0 0 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-color-tertiary);
}
.mcp-hero-title {
margin: 0;
font-size: clamp(28px, 4vw, 40px);
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--text-color);
}
.mcp-hero-description {
max-width: 700px;
margin: 14px 0 0;
font-size: 15px;
line-height: 1.7;
color: var(--text-color-secondary);
}
.mcp-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}
.mcp-hero-actions .us-btn:first-child {
border-color: rgba(39, 112, 201, 0.45);
background: linear-gradient(135deg, #1f7ae0, #1693c6);
color: #ffffff;
box-shadow: 0 16px 28px rgba(26, 108, 192, 0.2);
}
@media (hover: hover) and (pointer: fine) {
.mcp-hero-actions .us-btn:first-child:hover {
filter: brightness(1.04);
transform: translateY(-1px);
}
}
.mcp-hero-stats {
position: relative;
z-index: 1;
display: grid;
gap: 12px;
align-content: start;
}
.mcp-stat-card {
padding: 18px 18px 16px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.54);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.mcp-stat-card span {
display: block;
margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-color-tertiary);
}
.mcp-stat-card strong {
display: block;
font-size: 30px;
line-height: 1;
color: var(--text-color);
}
.mcp-section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.mcp-section-head.align-end {
align-items: flex-end;
}
.mcp-section-head.compact {
margin-bottom: 14px;
}
.mcp-preview-meta {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 6px 12px;
border: 1px solid var(--border-color);
border-radius: 999px;
background: rgba(52, 118, 204, 0.06);
color: var(--text-color-secondary);
font-size: 12px;
font-weight: 600;
}
.mcp-empty-state {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 22px;
border: 1px dashed var(--border-color);
border-radius: 18px;
}
.mcp-empty-state.compact {
padding: 18px;
}
.mcp-empty-state-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 14px;
background: rgba(40, 115, 194, 0.1);
color: #1f7ae0;
}
.mcp-empty-state-icon svg {
width: 22px;
height: 22px;
}
.mcp-empty-state h3 {
margin: 0 0 6px;
font-size: 16px;
color: var(--text-color);
}
.mcp-empty-state p {
margin: 0;
max-width: 680px;
color: var(--text-color-secondary);
line-height: 1.6;
}
.mcp-server-card {
display: flex;
flex-direction: column;
gap: 18px;
padding: 22px;
margin-bottom: 14px;
border: 1px solid var(--border-color);
border-radius: 20px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.18)),
var(--background);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}
.mcp-server-card:last-child {
margin-bottom: 0;
}
.mcp-server-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.mcp-server-card-title-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.mcp-server-card-title-row h3 {
margin: 0;
font-size: 20px;
line-height: 1.2;
color: var(--text-color);
}
.mcp-server-card-description {
margin: 10px 0 0;
color: var(--text-color-secondary);
line-height: 1.6;
}
.mcp-server-status,
.mcp-server-chip,
.mcp-tool-chip,
.mcp-modal-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
}
.mcp-server-status.is-enabled {
background: rgba(19, 176, 120, 0.12);
color: #0f9b67;
}
.mcp-server-status.is-disabled {
background: rgba(166, 46, 46, 0.1);
color: #b44040;
}
.mcp-server-chip-row {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.mcp-server-chip,
.mcp-modal-badge.subtle,
.mcp-tool-chip {
border: 1px solid var(--border-color);
background: var(--background);
color: var(--text-color-secondary);
}
.mcp-modal-badge {
background: rgba(28, 122, 202, 0.12);
color: #176fbf;
border: none;
}
.mcp-server-meta-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.mcp-server-meta-item {
padding: 14px;
border-radius: 16px;
background: rgba(64, 118, 183, 0.05);
border: 1px solid rgba(64, 118, 183, 0.08);
}
.mcp-server-meta-item span {
display: block;
margin-bottom: 8px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-color-tertiary);
}
.mcp-server-meta-item strong {
display: block;
font-size: 14px;
line-height: 1.45;
color: var(--text-color);
word-break: break-word;
}
.mcp-server-card-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.mcp-server-card-actions .us-btn {
justify-content: center;
}
.mcp-server-card-skin .skill-entry-icon {
background: linear-gradient(135deg, #4f46e5, #2563eb);
color: #fff;
box-shadow: 0 10px 24px -16px rgba(37, 99, 235, 0.85);
overflow: hidden;
position: relative;
}
.mcp-server-card-skin .skill-entry-icon.is-custom-icon {
background:
radial-gradient(circle at top left, rgba(37, 99, 235, 0.14), transparent 56%),
linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.82));
color: var(--text-color);
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.mcp-server-icon-slot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.mcp-server-icon-slot svg {
width: 24px;
height: 24px;
display: block;
}
.mcp-server-card-skin .skill-entry-icon.is-custom-icon .mcp-server-icon-slot svg {
width: 26px;
height: 26px;
}
.mcp-server-icon-slot img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: inherit;
}
.mcp-server-icon-slot .workspace-icon-emoji {
width: 100%;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 26px;
line-height: 1;
}
.mcp-icon-picker-host .icon-picker {
width: 100%;
}
.mcp-icon-field-hint {
margin: 8px 0 0;
font-size: 12px;
line-height: 1.5;
color: var(--text-color-secondary);
}
#mcpToolPreview,
#mcpModalToolPreview,
#mcpEditorPreviewHost {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
/* Hide the rest of the connections workspace while in the MCP editor page */
#workspaceSectionConnections.mcp-editor-active .connections-shell-header,
#workspaceSectionConnections.mcp-editor-active .connections-grid {
display: none !important;
}
/* MCP list header (skills-style) */
.mcp-list-header {
margin-bottom: 16px;
}
/* Inline status badge inside skill-card title */
.skill-entry-title .mcp-server-status {
margin-left: 10px;
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
min-height: 0;
vertical-align: middle;
}
.mcp-code-input {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12.5px;
}
.mcp-tool-card {
padding: 16px;
border-radius: 18px;
border: 1px solid var(--border-color);
background: linear-gradient(180deg, rgba(75, 140, 225, 0.06), rgba(75, 140, 225, 0.01));
min-height: 148px;
}
.mcp-tool-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.mcp-tool-card-head strong {
font-size: 15px;
color: var(--text-color);
}
.mcp-tool-card-slug {
margin: 0 0 10px;
color: #1f7ae0;
font-size: 12px;
font-weight: 700;
word-break: break-word;
}
.mcp-tool-card-description {
margin: 0;
color: var(--text-color-secondary);
font-size: 13px;
line-height: 1.6;
}
/* ----------------------------------------
MCP editor: field validation
---------------------------------------- */
.projects-create-input.is-invalid,
.projects-create-textarea.is-invalid {
border-color: #dc2626 !important;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14) !important;
background-color: rgba(254, 226, 226, 0.35);
}
.projects-create-input-group.has-error label {
color: #dc2626;
}
.mcp-field-error {
display: flex;
align-items: center;
gap: 6px;
margin: 6px 0 0;
font-size: 12.5px;
line-height: 1.4;
color: #dc2626;
font-weight: 500;
}
.mcp-field-error::before {
content: '';
flex: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #dc2626;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* ----------------------------------------
MCP editor: tool preview redesign
---------------------------------------- */
.mcp-preview {
margin-top: 24px;
border: 1px solid var(--border-color);
border-radius: 16px;
background: var(--background);
overflow: hidden;
transition: border-color .18s ease, box-shadow .18s ease;
}
.mcp-preview[data-status="success"] {
border-color: color-mix(in srgb, var(--success-color) 40%, var(--border-color));
}
.mcp-preview[data-status="error"] {
border-color: color-mix(in srgb, var(--error-color) 40%, var(--border-color));
}
.mcp-preview[data-status="testing"] {
border-color: color-mix(in srgb, var(--primary-color) 36%, var(--border-color));
}
.mcp-preview-header {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px 16px;
border-bottom: 1px solid var(--border-color);
background: var(--background);
}
.mcp-preview-header-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--border-color);
border-radius: 10px;
background: var(--background);
color: var(--text-color-secondary);
}
.mcp-preview-header-icon svg {
width: 20px;
height: 20px;
}
.mcp-preview-header-text {
flex: 1 1 auto;
min-width: 0;
}
.mcp-preview-header-text h3 {
margin: 0 0 2px;
font-size: 15px;
font-weight: 600;
color: var(--text-color);
letter-spacing: 0;
}
.mcp-preview-header-text p {
margin: 0;
font-size: 12.5px;
color: var(--text-color-secondary);
line-height: 1.45;
}
.mcp-preview-header-meta {
flex: none;
display: flex;
align-items: center;
gap: 8px;
}
.mcp-preview-status-pill {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 30px;
padding: 5px 10px;
border-radius: 999px;
background: var(--background);
color: var(--text-color-secondary);
font-size: 12px;
font-weight: 600;
border: 1px solid var(--border-color);
}
.mcp-preview-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--text-color-tertiary);
}
.mcp-preview[data-status="success"] .mcp-preview-status-pill {
color: var(--success-color);
border-color: color-mix(in srgb, var(--success-color) 34%, var(--border-color));
}
.mcp-preview[data-status="success"] .mcp-preview-status-dot {
background: var(--success-color);
}
.mcp-preview[data-status="error"] .mcp-preview-status-pill {
color: var(--error-color);
border-color: color-mix(in srgb, var(--error-color) 34%, var(--border-color));
}
.mcp-preview[data-status="error"] .mcp-preview-status-dot {
background: var(--error-color);
}
.mcp-preview[data-status="testing"] .mcp-preview-status-pill {
color: var(--primary-color);
border-color: color-mix(in srgb, var(--primary-color) 34%, var(--border-color));
}
.mcp-preview[data-status="testing"] .mcp-preview-status-dot {
background: var(--primary-color);
animation: pulse 1.2s ease-in-out infinite;
}
.mcp-preview-count {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 10px;
border-radius: 999px;
background: var(--background);
color: var(--text-color-secondary);
font-size: 12px;
font-weight: 600;
border: 1px solid var(--border-color);
letter-spacing: 0;
}
.mcp-preview-count[hidden] {
display: none;
}
.mcp-preview-test-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 5px 12px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--background);
color: var(--text-color);
font-size: 12px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
.mcp-preview-test-btn:hover:not(:disabled) {
background: var(--hover);
border-color: var(--text-color-tertiary);
}
}
.mcp-preview-test-btn:disabled {
cursor: not-allowed;
opacity: 0.65;
}
.mcp-preview-body {
padding: 18px 20px 20px;
}
/* Preview empty / error state */
.mcp-preview-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 9px;
padding: 32px 24px;
border-radius: 12px;
border: 1px dashed var(--border-color);
background: var(--background);
}
.mcp-preview-empty h4 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--text-color);
}
.mcp-preview-empty p {
margin: 0;
max-width: 460px;
color: var(--text-color-secondary);
font-size: 13px;
line-height: 1.55;
}
.mcp-preview-empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid var(--border-color);
border-radius: 10px;
background: var(--background);
color: var(--text-color-secondary);
}
.mcp-preview-empty-icon svg {
width: 22px;
height: 22px;
}
.mcp-preview-empty--error {
border-style: solid;
border-color: color-mix(in srgb, var(--error-color) 34%, var(--border-color));
}
.mcp-preview-empty--error .mcp-preview-empty-icon {
border-color: color-mix(in srgb, var(--error-color) 34%, var(--border-color));
color: var(--error-color);
}
/* Tool grid + cards (v2) */
.mcp-tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.mcp-tool-card-v2 {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 14px 12px;
border-radius: 12px;
border: 1px solid var(--border-color);
background: var(--background);
transition: border-color .18s ease, box-shadow .18s ease;
}
@media (hover: hover) and (pointer: fine) {
.mcp-tool-card-v2:hover {
border-color: var(--text-color-tertiary);
box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow-color) 45%, transparent);
}
}
.mcp-tool-card-v2-head {
display: flex;
align-items: center;
gap: 10px;
}
.mcp-tool-card-v2-avatar {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--background);
color: var(--text-color);
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
}
.mcp-tool-card-v2-titles {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mcp-tool-card-v2-titles strong {
font-size: 14px;
font-weight: 600;
color: var(--text-color);
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mcp-tool-card-v2-slug {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
color: var(--text-color-tertiary);
background: transparent;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mcp-tool-card-v2-chip {
flex: none;
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0;
text-transform: uppercase;
background: var(--background);
color: var(--text-color-tertiary);
border: 1px solid var(--border-color);
}
.mcp-tool-card-v2-description {
margin: 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-color-secondary);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mcp-tool-params {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-top: 8px;
border-top: 1px dashed var(--border-color);
}
.mcp-tool-card-no-params {
margin: 6px 0 0;
padding-top: 8px;
border-top: 1px dashed var(--border-color);
font-size: 11.5px;
color: var(--text-color-tertiary);
font-style: italic;
}
.mcp-tool-param {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: 6px;
background: var(--background);
border: 1px solid var(--border-color);
font-size: 11px;
font-weight: 500;
color: var(--text-color-secondary);
line-height: 1.2;
max-width: 100%;
cursor: default;
}
.mcp-tool-param-name {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: var(--text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 110px;
}
.mcp-tool-param-type {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: var(--text-color-tertiary);
font-size: 10.5px;
}
.mcp-tool-param-required {
color: var(--error-color);
font-weight: 700;
}
.mcp-tool-param.is-required {
border-color: color-mix(in srgb, var(--primary-color) 28%, var(--border-color));
}
.mcp-tool-param.is-more {
font-style: italic;
color: var(--text-color-tertiary);
}
@media (max-width: 720px) {
.mcp-preview-header {
flex-wrap: wrap;
}
.mcp-preview-header-meta {
order: 3;
flex-basis: 100%;
justify-content: flex-start;
}
.mcp-tools-grid {
grid-template-columns: 1fr;
}
}
.mcp-modal-overlay {
position: fixed;
inset: 0;
z-index: 10010;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.mcp-modal-overlay[hidden] {
display: none;
}
.mcp-modal {
width: min(640px, 100%);
max-height: calc(100vh - 48px);
overflow: auto;
border-radius: 16px;
border: 1px solid var(--border-color);
background: var(--background-color, var(--background));
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}
/* Ensure MCP editor modal remains scrollable within the viewport */
#mcpEditorOverlay .warning-card {
max-height: calc(100vh - 40px);
overflow-y: auto;
}
/* Ensure BYOK modals remain scrollable within the viewport */
#byokProviderOverlay .mcp-modal,
#byokModelOverlay .mcp-modal {
max-height: calc(100vh - 40px);
overflow-y: auto;
}
.mcp-modal-header,
.mcp-modal-footer {
padding-left: 24px;
padding-right: 24px;
}
.mcp-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.mcp-modal-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--text-color);
}
.mcp-modal-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: transparent;
border: none;
color: var(--text-color-tertiary);
cursor: pointer;
transition: all 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.mcp-modal-close:hover {
background: var(--hover);
color: var(--text-color);
}
}
.mcp-modal-close svg {
width: 18px;
height: 18px;
}
.mcp-modal-body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.mcp-modal-body > p {
margin: 0;
font-size: 14px;
color: var(--text-color-secondary);
line-height: 1.6;
}
.mcp-modal-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.mcp-modal-grid.compact {
align-items: start;
}
/* Legacy BYOK card styles removed — see /css/userSettings/byok.css */
.mcp-toggle-stack {
display: grid;
gap: 0;
}
.mcp-toggle-wrap {
align-items: flex-end;
}
.mcp-code-input {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
line-height: 1.6;
}
.mcp-modal-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 20px;
padding-bottom: 20px;
border-top: 1px solid var(--border-color);
}
.mcp-modal-footer-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
}
@media (max-width: 1100px) {
.mcp-hero-card {
grid-template-columns: 1fr;
}
.mcp-server-meta-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.mcp-hero-card,
.mcp-server-card {
padding: 20px;
}
.mcp-section-head,
.mcp-server-card-head,
.mcp-modal-footer {
flex-direction: column;
align-items: stretch;
}
.mcp-server-chip-row {
justify-content: flex-start;
}
.mcp-server-meta-grid,
.mcp-modal-grid {
grid-template-columns: 1fr;
}
.mcp-modal-overlay {
padding: 12px;
}
.mcp-modal {
max-height: min(92vh, 92dvh);
}
.mcp-modal-header,
.mcp-modal-footer {
padding-left: 18px;
padding-right: 18px;
}
.mcp-modal-body {
padding: 18px;
}
.mcp-modal-footer-actions,
.mcp-server-card-actions,
.mcp-hero-actions {
justify-content: stretch;
}
.mcp-modal-footer-actions .us-btn,
.mcp-server-card-actions .us-btn,
.mcp-hero-actions .us-btn,
.mcp-empty-state .us-btn {
width: 100%;
}
}
.us-speech-speed-control {
display: inline-flex;
align-items: center;
gap: 12px;
min-width: 260px;
padding: 10px 12px;
border: 1px solid var(--border-color);
border-radius: 10px;
background: var(--background);
transition: border-color 0.2s ease, opacity 0.2s ease;
}
.us-speech-speed-control.is-saving {
opacity: 0.7;
}
.us-speech-speed-range {
width: 160px;
accent-color: var(--primary-color);
cursor: pointer;
}
.us-speech-speed-value {
min-width: 48px;
font-size: 12px;
font-weight: 600;
color: var(--text-color-secondary);
text-align: right;
}
/* Form Elements */
/* =====================================================
MOBILE RESPONSIVE STYLES - Complete Overhaul
===================================================== */
/* Tablet breakpoint (1024px and below) - Already exists above */
/* Mobile breakpoint (768px and below) */
@media (max-width: 768px) {
/* Container Layout */
.us-container {
flex-direction: column;
height: auto;
min-height: 100vh;
min-height: 100dvh; /* Dynamic viewport height for mobile */
}
/* Mobile Sidebar - Slide-in drawer pattern */
.us-sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
height: 100dvh;
/* Compact drawer that mirrors the main app sidebar footprint (~250px)
instead of dominating the viewport on mobile/tablet. */
max-width: 280px;
width: 80vw;
margin: 0;
padding: 0;
padding-top: calc(12px + env(safe-area-inset-top, 0px));
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
padding-left: calc(12px + env(safe-area-inset-left, 0px));
padding-right: calc(12px + env(safe-area-inset-right, 0px));
transform: translateX(-105%);
box-shadow: 4px 0 32px rgba(0, 0, 0, 0.3);
border-right: 1px solid var(--border-color);
z-index: 1001;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
will-change: transform;
display: flex;
flex-direction: column;
}
.us-sidebar.active {
transform: translateX(0);
}
/* Improved backdrop with faster response */
.us-sidebar-backdrop {
transition: opacity 0.25s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.25s;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.us-sidebar-header {
margin-bottom: 12px;
margin-top: 8px;
padding-top: 8px;
flex-shrink: 0;
}
.us-user-profile {
padding: 8px;
gap: 10px;
}
.us-avatar {
width: 36px;
height: 36px;
min-width: 36px;
font-size: 14px;
}
.us-sidebar nav {
flex: 1;
overflow-y: auto;
padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
margin-right: -6px;
padding-right: 6px;
}
.us-sidebar-footer {
position: sticky;
bottom: 0;
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 0;
margin-top: auto;
background: var(--background);
border-top: 1px solid var(--border-color);
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
isolation: isolate;
}
.us-sidebar-footer::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: calc(20px + env(safe-area-inset-bottom, 0px));
background: var(--background);
z-index: -1;
}
.us-sidebar-footer .us-btn {
width: 100%;
justify-content: center;
min-height: 40px; /* Compact but still an easy touch target */
}
/* Backdrop */
.us-sidebar-backdrop {
position: fixed;
z-index: 1000;
}
/* Main Content — matches the main app's compact mobile padding */
.us-main-content {
padding: 16px 14px 40px;
padding-top: 0;
padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
margin-top: 0;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
/* Settings Header - STICKY on mobile for always-accessible navigation */
.us-settings-header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 10px;
padding: 10px 14px;
margin: 0 -14px 16px -14px;
border-bottom: 1px solid var(--border-color);
/* Sticky positioning */
position: sticky;
top: 0;
z-index: 100;
background: var(--background);
/* Subtle shadow when scrolled */
box-shadow: 0 1px 0 0 var(--border-color);
}
.us-settings-nav-toggle {
display: inline-flex;
flex-shrink: 0;
min-width: 38px;
min-height: 38px;
width: 38px;
height: 38px;
order: 1;
/* Better touch feedback */
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.us-settings-nav-toggle svg {
width: 20px;
height: 20px;
}
.us-settings-nav-toggle:active {
transform: scale(0.95);
background: var(--hover);
}
.us-settings-header-text {
flex: 1;
min-width: 0;
order: 2;
overflow: hidden;
}
.us-settings-close-button {
order: 3;
flex-shrink: 0;
min-width: 38px;
min-height: 38px;
width: 38px;
height: 38px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.us-settings-close-button:active {
transform: scale(0.95);
background: var(--hover);
}
.us-settings-header h1 {
font-size: 16px;
line-height: 1.3;
word-wrap: break-word;
overflow-wrap: break-word;
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.us-settings-header p {
display: none; /* Hide subtitle on mobile for cleaner sticky header */
}
/* Settings Sections */
.us-settings-section {
margin-bottom: 28px;
}
.us-section-title {
font-size: 15px;
margin-bottom: 10px;
}
.us-section-description {
font-size: 13px;
margin-bottom: 14px;
}
/* Setting Items - Stack vertically */
.us-setting-item {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 14px 0;
}
.us-setting-info {
width: 100%;
}
.us-setting-info h3 {
font-size: 14px;
line-height: 1.4;
}
.us-setting-info p {
font-size: 12px;
line-height: 1.5;
}
.us-setting-item > *:not(.us-setting-info) {
width: 100%;
}
.us-setting-actions {
width: 100%;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.us-setting-actions .nav-btn {
width: 100%;
flex: 1 1 auto;
}
.us-speech-speed-control {
width: 100%;
min-width: 0;
justify-content: space-between;
}
.us-speech-speed-range {
width: 100%;
flex: 1;
}
.us-setting-item .us-btn {
justify-content: center;
min-height: 40px;
}
/* Toggle switches - align right on mobile too for consistency */
.us-setting-item .toggle-switch {
align-self: flex-start;
}
/* Custom Select */
.custom-select.us {
width: 100%;
}
.custom-select.us .select-trigger {
min-height: 42px;
padding: 10px 14px;
}
/* Two-Factor Auth Container */
#twoFaActionContainer {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
#twoFaActionContainer .us-btn {
width: 100%;
}
/* Theme Mode Buttons */
.theme-mode-button-container {
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
}
.theme-mode-button-container-item {
width: calc(50% - 6px);
max-width: none;
margin-right: 0;
}
.theme-mode-button {
width: 100%;
height: auto;
}
.theme-mode-button-container-item p {
font-size: 12px;
margin-top: 6px;
}
.color-option {
width: 44px;
height: 44px;
}
/* Chat Background */
.chat-background-setting-container {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.chat-background-wrapper {
max-width: none;
width: 100%;
height: 180px;
}
.chat-background-actions {
flex-direction: column;
width: 100%;
gap: 10px;
}
.chat-background-action-btn {
width: 100%;
justify-content: center;
min-height: 40px;
}
.chat-background-action-btn.delete-btn {
width: 100%;
}
/* Profile Picture */
.profile-picture-container {
padding: 12px 0;
margin-bottom: 20px;
}
.profile-picture-wrapper {
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
}
.profile-picture {
width: 72px;
height: 72px;
}
.profile-picture-actions {
width: 100%;
align-items: stretch;
gap: 10px;
}
#deleteProfilePicBtn.nav-btn {
width: 100%;
justify-content: center;
min-height: 40px;
}
/* Form Elements */
.form-container {
width: 100%;
}
.form-row {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.form-row .form-group {
width: 100%;
flex: none;
}
.form-group {
margin-bottom: 14px;
}
.form-group label {
font-size: 13px;
margin-bottom: 6px;
}
.input-field {
min-height: 42px;
padding: 10px 14px;
font-size: 16px; /* Prevents zoom on iOS */
border-radius: 10px;
}
.email-row {
flex-direction: column;
gap: 14px;
}
.email-row .form-group {
width: 100%;
}
.email-row .input-field {
min-height: 42px;
height: auto;
}
.email-row .save-changes-btn {
width: 100%;
margin-top: 8px;
}
.save-changes-btn {
min-height: 40px;
width: 100%;
}
/* Input for location/general */
.input.us {
width: 100%;
min-height: 42px;
padding: 10px 14px;
font-size: 16px;
border-radius: 10px;
}
/* Device Sessions */
.device-session-item {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 14px 0;
}
.device-icon {
margin-right: 0;
margin-bottom: 4px;
}
.device-info {
width: 100%;
}
.device-name {
font-size: 14px;
}
.device-details {
font-size: 12px;
}
/* Shortcuts */
.us-shortcuts-section {
max-width: 100%;
}
.us-shortcuts-header {
margin-bottom: 16px;
}
.us-shortcuts-grid {
border-radius: 12px;
}
.us-shortcut-card {
padding: 14px 16px;
gap: 14px;
}
.us-shortcut-content h3 {
font-size: 14px;
}
.us-shortcut-content p {
font-size: 12.5px;
}
.us-shortcut-badge {
font-size: 11.5px;
min-width: 36px;
height: 26px;
padding: 0 8px;
}
/* Nav Items - compact, matching the main app sidebar (36px items) */
.us-nav-item {
padding: 8px 10px;
min-height: 38px;
gap: 8px;
margin-bottom: 2px;
border-radius: 8px;
}
.us-nav-text {
font-size: 14px;
}
.us-nav-icon {
width: 20px;
height: 20px;
}
.us-nav-title {
font-size: 11px;
padding: 0 10px;
margin-bottom: 6px;
margin-top: 4px;
}
/* Buttons */
.nav-btn {
min-height: 40px;
padding: 10px 14px;
font-size: 14px;
}
.nav-btn.big {
padding: 12px 16px;
min-height: 44px;
}
/* Range inputs */
input[type="range"] {
width: 100%;
height: 40px;
}
}
/* Small Mobile breakpoint (480px and below) - FULL WIDTH SIDEBAR */
@media (max-width: 480px) {
/* FULL WIDTH SIDEBAR on smartphones */
.us-sidebar {
width: 100vw;
width: 100dvw;
max-width: 100vw;
max-width: 100dvw;
border-right: none;
box-shadow: none;
padding-left: calc(14px + env(safe-area-inset-left, 0px));
padding-right: calc(14px + env(safe-area-inset-right, 0px));
padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
/* Mobile sidebar header with close button - VISIBLE on small screens */
.us-sidebar-mobile-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0 12px 0;
margin-bottom: 6px;
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
background: var(--background);
z-index: 10;
}
.us-sidebar-mobile-title {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
}
.us-sidebar-mobile-close {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--background);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
.us-sidebar-mobile-close:hover {
background: var(--hover);
}
}
.us-sidebar-mobile-close:active {
transform: scale(0.95);
background: var(--hover);
}
.us-sidebar-mobile-close svg {
width: 20px;
height: 20px;
}
/* Adjust sidebar header when mobile header is visible */
.us-sidebar-header {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 0;
padding-top: 0;
margin-bottom: 12px;
}
/* Sidebar close button styling for full-width mode */
.us-sidebar-footer {
padding: 14px 0;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
gap: 10px;
}
.us-main-content {
padding: 0 14px 32px;
padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
.us-settings-header {
gap: 10px;
padding: 10px 14px;
margin: 0 -14px 14px -14px;
}
.us-settings-header h1 {
font-size: 15px;
}
.us-settings-nav-toggle {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
}
.us-settings-close-button {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
}
/* Theme buttons - full width on very small screens */
.theme-mode-button-container {
flex-direction: column;
gap: 12px;
}
.theme-mode-button-container-item {
width: 100%;
}
/* Nav items - compact, matching the main app sidebar */
.us-nav-item {
padding: 8px 10px;
min-height: 38px;
border-radius: 8px;
}
.us-nav-icon {
width: 20px;
height: 20px;
}
/* Section titles */
.us-section-title {
font-size: 15px;
}
.us-sidebar-header {
margin-bottom: 12px;
}
.us-user-info h3 {
font-size: 14px;
}
.us-user-info p {
font-size: 12px;
}
.us-avatar {
width: 36px;
height: 36px;
min-width: 36px;
font-size: 14px;
}
/* Form elements */
.form-group label {
font-size: 12px;
}
.input-field {
padding: 10px 12px;
}
/* Settings section spacing */
.us-settings-section {
margin-bottom: 24px;
}
.us-setting-item {
padding: 14px 0;
gap: 10px;
}
/* Shortcuts — keep horizontal layout even on very small screens */
.us-shortcut-card {
padding: 12px 14px;
gap: 12px;
}
.us-shortcut-badge {
min-width: 34px;
height: 24px;
font-size: 11px;
padding: 0 7px;
}
/* Profile picture */
.profile-picture {
width: 64px;
height: 64px;
font-size: 24px;
}
.profile-picture-edit {
width: 24px;
height: 24px;
}
.profile-picture-edit svg {
width: 13px;
height: 13px;
}
/* Better button styling for full-width sidebar */
.nav-btn {
min-height: 42px;
font-size: 14px;
border-radius: 10px;
}
/* User profile in sidebar */
.us-user-profile {
padding: 10px;
background: var(--hover);
border-radius: 12px;
margin-bottom: 6px;
}
}
/* Extra small screens (360px and below) */
@media (max-width: 360px) {
.us-sidebar {
padding-left: 16px;
padding-right: 16px;
}
.us-main-content {
padding: 0 10px 24px;
}
.us-settings-header {
padding: 10px 10px;
margin: 0 -10px 12px -10px;
}
.us-settings-header h1 {
font-size: 15px;
}
.us-nav-item {
padding: 8px;
}
.nav-btn {
padding: 9px 12px;
font-size: 14px;
}
}
/* Landscape mode on mobile */
@media (max-width: 768px) and (orientation: landscape) {
.us-sidebar {
max-width: 280px;
width: 60vw;
}
.us-main-content {
padding-top: 0;
}
.us-settings-header {
padding: 10px 16px;
margin-bottom: 0;
}
.theme-mode-button-container {
flex-direction: row;
flex-wrap: nowrap;
}
.theme-mode-button-container-item {
width: calc(33.333% - 8px);
}
/* Landscape-specific sidebar adjustments */
.us-nav-item {
padding: 8px 10px;
min-height: 38px;
}
.us-sidebar-footer {
padding: 10px 0;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
}
.theme-mode-button-container {
display: flex;
gap: 10px;
width: 100%;
}
.theme-mode-button-container-item {
width: 150px;
position: relative;
}
.theme-mode-button {
width: 150px;
border-radius: 10px;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
.theme-mode-button:hover {
opacity: 0.8;
}
}
.theme-mode-button-container-item p {
font-size: 14px;
color: var(--text-color-secondary);
font-weight: 300;
text-align: center;
margin-top: 5px;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
line-height: 1.2;
min-height: 34px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-mode-button-container-item.active .theme-mode-button {
border: 2px solid var(--primary-color);
}
.theme-mode-button-container-item.active p {
color: var(--text-color);
font-weight: 500;
}
/* --- Device/Login Session Styles --- */
.active-sessions-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.device-session-item {
display: flex;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid var(--border-color);
}
.device-session-item:last-child {
border-bottom: none;
}
.device-icon {
width: 40px;
height: 40px;
margin-right: 15px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.device-icon svg {
width: 24px;
height: 24px;
stroke: var(--text-color);
}
.device-info {
flex-grow: 1;
}
.device-name {
display: block;
font-weight: 500;
color: var(--text-color);
font-size: 15px;
}
.device-name .current-device-tag {
font-weight: 400;
color: var(--success-color, #27ae60);
font-size: 13px;
}
.device-details {
display: block;
font-size: 13px;
color: var(--text-color-secondary);
margin-top: 2px;
}
/* --- Chat Background Styles --- */
.chat-background-setting-container {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
width: 100%;
margin-top: 12px;
}
.chat-background-wrapper {
position: relative;
width: 100%;
max-width: 280px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
height: 180px;
}
/* Placeholder state */
.chat-background-wrapper.placeholder {
border: 2px dashed var(--border-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
.chat-background-wrapper.placeholder:hover {
border-color: var(--primary-color);
}
}
@media (hover: hover) and (pointer: fine) {
.chat-background-wrapper.placeholder:hover .chat-background-placeholder {
color: var(--primary-color);
}
}
.chat-background-wrapper.placeholder .chat-background,
.chat-background-wrapper.placeholder .chat-background-edit {
display: none;
}
.chat-background-placeholder {
display: none;
flex-direction: column;
align-items: center;
gap: 6px;
color: var(--text-color-tertiary);
text-align: center;
user-select: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-background-wrapper.placeholder .chat-background-placeholder {
display: flex;
}
.chat-background-placeholder svg {
width: 36px;
height: 36px;
}
.chat-background-placeholder p {
font-size: 14px;
}
/* Hide delete button when placeholder active */
.chat-background-wrapper.placeholder + input + .chat-background-actions {
display: none;
}
.chat-background {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.chat-background-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
border-radius: 8px;
}
@media (hover: hover) and (pointer: fine) {
.chat-background-overlay:hover .chat-background-edit {
opacity: 1;
}
}
@media (hover: none), (pointer: coarse) {
.chat-background-overlay .chat-background-edit {
opacity: 1;
}
}
.chat-background-edit {
position: absolute;
bottom: 12px;
right: 12px;
background: rgba(0, 0, 0, 0.5);
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.85;
transition: opacity 0.3s;
}
.chat-background-edit svg {
width: 18px;
height: 18px;
fill: #fff;
}
.chat-background-actions {
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
width: fit-content;
}
.chat-background-action-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
background-color: var(--background);
border: 1px solid var(--border-color);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
font-size: 14px;
color: var(--text-color);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
.chat-background-action-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
}
.chat-background-action-btn:active {
transform: translateY(0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.chat-background-action-btn.delete-btn {
color: var(--error-color, #e74c3c);
border-color: rgba(231, 76, 60, 0.3);
}
@media (hover: hover) and (pointer: fine) {
.chat-background-action-btn.delete-btn:hover {
background-color: rgba(231, 76, 60, 0.1);
}
}
.chat-background-action-btn svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.chat-background-wrapper.placeholder .chat-background-overlay {
display: none;
}
/* --- Profile Picture Styles --- */
.profile-picture-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
padding: 20px;
border-bottom: 1px solid var(--border-color);
}
.profile-picture-wrapper {
display: flex;
align-items: center;
gap: 30px;
}
.profile-picture {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--primary-color);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 34px;
}
@media (hover: hover) and (pointer: fine) {
.profile-picture:hover {
transform: scale(1.05);
}
}
.profile-picture-overlay {
position: relative;
}
.profile-picture-actions {
display: flex;
flex-direction: column;
gap: 15px;
}
#deleteProfilePicBtn.nav-btn {
min-height: 40px;
}
.profile-picture-edit {
position: absolute;
bottom: 0;
right: 0;
background-color: var(--primary-color);
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
opacity: 1;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
.profile-picture-overlay:hover .profile-picture-edit {
transform: scale(1.1);
}
}
@media (hover: hover) and (pointer: fine) {
.profile-picture-edit:hover {
background-color: var(--secondary-color);
}
}
.profile-picture-edit svg {
width: 16px;
height: 16px;
}
/* Form Styles */
.profile-section {
width: 100%;
margin-bottom: 25px;
}
.form-container {
width: 100%;
display: flex;
flex-direction: column;
}
.form-row {
display: flex;
gap: 15px;
margin-bottom: 20px;
width: 100%;
align-items: flex-end;
}
.form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.form-group {
position: relative;
margin-bottom: 20px;
width: 100%;
}
.form-group label {
display: block;
margin-bottom: 6px;
font-size: 14px;
color: var(--text-color);
font-weight: 500;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.input-field {
background-color: var(--background);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 12px 15px;
width: 100%;
font-size: 15px;
color: var(--text-color);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
box-sizing: border-box;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
@media (hover: hover) and (pointer: fine) {
.input-field:hover {
border-color: var(--primary-color);
}
}
.input-field:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(0, 132, 255, 0.2);
transform: translateY(-1px);
}
.input-field:disabled {
background-color: var(--hover);
color: var(--text-color-tertiary);
cursor: not-allowed;
}
.email-row {
margin-bottom: 0px;
}
.email-row .input-field {
height: 44px;
}
.save-changes-btn {
background-color: var(--hover);
color: var(--text-color-tertiary);
border: 1px solid var(--border-color);
padding: 12px 18px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: not-allowed;
min-width: 140px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.save-changes-btn--active {
background-color: var(--primary-color);
color: white;
border-color: transparent;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.save-changes-btn--active:hover {
background-color: var(--secondary-color);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 132, 255, 0.3);
}
}
.save-changes-btn--active:active {
transform: translateY(0);
box-shadow: none;
}
.save-changes-btn:disabled {
opacity: 1;
box-shadow: none;
transform: none;
}
.save-changes-btn--loading {
cursor: progress;
}
/*
* Data-control status banner.
*
* A single, shared top notification box that reports the live phase and progress
* of data export/import operations. It floats at the top-center of the viewport
* (matching the toast notification language) so the data cards stay clean and the
* user always sees the current operation, even while scrolling.
*/
.dc-status-banner {
position: fixed;
top: 16px;
left: 50%;
/* Sit just below real toast notifications (z-index 10000) so alerts win. */
z-index: 9999;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
width: min(420px, calc(100vw - 32px));
padding: 12px 16px;
border: 1px solid color-mix(in srgb, var(--border-color) 84%, var(--primary-color) 16%);
border-radius: 16px;
background: color-mix(in srgb, var(--bg-normal-elevated, var(--bg-color)) 92%, transparent);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.10), 0 3px 12px rgba(0, 0, 0, 0.08);
color: var(--text-color);
backdrop-filter: blur(18px) saturate(1.15);
-webkit-backdrop-filter: blur(18px) saturate(1.15);
transform-origin: top center;
animation: dataControlStatusSlideIn 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dc-status-banner[hidden] {
display: none;
}
/* Minimal circular spinner echoing the accent colour. */
.dc-status-banner__spinner {
flex: 0 0 auto;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--primary-color) 24%, transparent);
border-top-color: var(--primary-color);
animation: spin 0.7s linear infinite;
}
.dc-status-banner__body {
display: grid;
gap: 8px;
min-width: 0;
flex: 1 1 auto;
}
.dc-status-banner__message {
margin: 0;
font-size: 13px;
line-height: 1.4;
color: var(--text-color);
/* Keep the banner compact even for long phase descriptions. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Thin progress track that always stays visible while the banner is shown. */
.dc-status-banner__track {
position: relative;
width: 100%;
height: 4px;
border-radius: 9999px;
background: color-mix(in srgb, var(--text-color-secondary) 20%, transparent);
overflow: hidden;
}
.dc-status-banner__bar {
position: absolute;
inset: 0 auto 0 0;
width: 0;
height: 100%;
border-radius: inherit;
background: var(--primary-color);
/* Determinate progress grows smoothly as sections complete. */
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/*
* Indeterminate phases (single exports/imports, or steps without a known count)
* show a sliding segment. A visible base width keeps the bar meaningful even when
* animations are disabled via prefers-reduced-motion / reduced-animations.
*/
.dc-status-banner--indeterminate .dc-status-banner__bar {
width: 40%;
transition: none;
animation: progressIndeterminate 1.2s ease-in-out infinite;
}
.input-field--readonly {
background-color: var(--hover);
color: var(--text-color-tertiary);
cursor: not-allowed;
border-color: var(--border-color);
box-shadow: none;
}
.input-field--readonly:focus {
border-color: var(--border-color);
box-shadow: none;
transform: none;
}
@media (hover: hover) and (pointer: fine) {
.input-field--readonly:hover {
border-color: var(--border-color);
box-shadow: none;
transform: none;
}
}
/* LLM Access Controls */
.llm-access-setting {
flex-direction: column;
align-items: flex-start !important;
gap: 16px;
}
.llm-access-setting .us-setting-info {
width: 100%;
}
.llm-access-controls {
width: 100%;
transition: opacity 0.2s ease;
}
.llm-access-controls.is-saving {
opacity: 0.6;
pointer-events: none;
}
.llm-access-mode-selector {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.llm-mode-btn {
padding: 8px 16px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--background);
color: var(--text-color);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.llm-mode-btn:hover {
background: var(--hover);
border-color: var(--text-color-tertiary);
}
}
.llm-mode-btn.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.llm-access-fields {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px;
}
.llm-field-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: var(--background);
border-radius: 8px;
border: 1px solid var(--border-color);
}
.llm-field-toggle span {
font-size: 13px;
color: var(--text-color);
}
.toggle-switch.small {
transform: scale(0.85);
}
@media (max-width: 600px) {
.llm-access-mode-selector {
flex-wrap: wrap;
}
.llm-mode-btn {
flex: 1;
min-width: 80px;
text-align: center;
}
.llm-access-fields {
grid-template-columns: 1fr;
}
}
/* Personality Controls */
.personality-settings-card {
display: flex;
flex-direction: column;
gap: 14px;
}
.personality-settings-card.is-saving {
opacity: 0.72;
}
.personality-select {
min-width: 200px;
max-width: 260px;
width: min(260px, 100%);
}
.personality-select .select-trigger {
min-height: 46px;
border-radius: 10px;
font-size: 14px;
padding-top: 12px;
padding-bottom: 12px;
}
.personality-select .select-options {
border-radius: 10px;
}
.personality-select .select-option {
font-size: 14px;
}
.personality-custom-field {
display: flex;
flex-direction: column;
gap: 10px;
}
.personality-custom-field[hidden] {
display: none !important;
}
.personality-custom-label {
font-size: 13px;
font-weight: 600;
color: var(--text-color-secondary);
}
.personality-custom-textarea {
min-height: 120px;
resize: vertical;
}
.personality-custom-helper,
.personality-custom-error {
margin: 0;
font-size: 12px;
line-height: 1.5;
}
.personality-custom-helper {
color: var(--text-color-secondary);
}
.personality-custom-error {
color: var(--danger-color, #d64545);
}
/* ============================================================
Shared Items Settings Page — minimalist, modern, mobile-friendly
============================================================ */
.si-view-tabs {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
margin-bottom: 18px;
border: 1px solid var(--border-color);
border-radius: 12px;
background: var(--hover);
}
.si-view-tab {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 34px;
padding: 7px 12px;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: var(--text-color-secondary);
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.si-view-tab:hover {
color: var(--text-color);
background: var(--background);
}
}
.si-view-tab:focus-visible {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
}
.si-view-tab.active {
background: var(--background);
color: var(--text-color);
border-color: var(--border-color);
}
.si-view-count {
min-width: 18px;
padding: 1px 6px;
border-radius: 999px;
background: var(--border-color);
color: var(--text-color-secondary);
font-size: 11px;
line-height: 1.5;
}
.si-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"search count"
"filters filters";
gap: 12px 16px;
margin-bottom: 24px;
align-items: center;
}
.si-toolbar[hidden] {
display: none;
}
.si-search-wrapper {
grid-area: search;
position: relative;
min-width: 0;
}
.si-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--text-color-tertiary);
pointer-events: none;
}
.si-search-input {
width: 100%;
padding: 11px 14px 11px 40px;
border: 1px solid var(--border-color);
border-radius: 12px;
background: transparent;
color: var(--text-color);
font-size: 14px;
line-height: 1.2;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.si-search-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent);
}
.si-search-input::placeholder {
color: var(--text-color-tertiary);
}
.si-count {
grid-area: count;
font-size: 12px;
color: var(--text-color-tertiary);
white-space: nowrap;
font-weight: 500;
letter-spacing: 0.01em;
}
.si-filters {
grid-area: filters;
display: flex;
gap: 4px;
flex-wrap: nowrap;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
padding: 2px 0;
margin: 0 -4px;
scroll-padding: 4px;
}
.si-filters::-webkit-scrollbar { display: none; }
.si-filter-btn {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
gap: 6px;
padding: 6px 12px;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
color: var(--text-color-secondary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
.si-filter-btn:hover {
color: var(--text-color);
background: var(--hover);
}
}
.si-filter-btn:focus-visible {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
}
.si-filter-btn.active {
background: var(--text-color);
color: var(--background);
border-color: var(--text-color);
}
.si-filter-count {
font-size: 11px;
font-weight: 600;
padding: 1px 6px;
border-radius: 999px;
min-width: 18px;
text-align: center;
background: var(--hover);
color: var(--text-color-tertiary);
line-height: 1.5;
}
.si-filter-btn.active .si-filter-count {
background: color-mix(in srgb, var(--background) 25%, transparent);
color: var(--background);
}
/* Loading state */
.si-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 56px 24px;
color: var(--text-color-tertiary);
font-size: 14px;
}
.si-spinner {
width: 18px;
height: 18px;
border: 2px solid var(--border-color);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: spinTo360 0.7s linear infinite;
}
.si-status {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
padding: 14px 16px;
border-radius: 12px;
border: 1px solid var(--admin-warning-border);
background: var(--admin-warning-bg);
color: var(--text-color);
}
.si-status[hidden] {
display: none !important;
}
.si-status-icon {
flex: 0 0 auto;
color: var(--admin-warning-text);
margin-top: 1px;
}
.si-status-content {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.si-status-title {
font-size: 14px;
font-weight: 600;
color: var(--text-color);
}
.si-status-text {
font-size: 13px;
color: var(--text-color-secondary);
}
.si-status-sections {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.si-status-pill {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--admin-warning-border);
background: color-mix(in srgb, var(--admin-warning-bg) 30%, var(--background));
color: var(--admin-warning-text);
font-size: 12px;
font-weight: 600;
}
/* Empty state */
.si-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
padding: 72px 24px;
color: var(--text-color-tertiary);
text-align: center;
}
.si-empty svg {
opacity: 0.25;
color: var(--text-color-secondary);
}
.si-empty p {
font-size: 14px;
margin: 0;
max-width: 280px;
line-height: 1.5;
}
/* Items list */
.si-list {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--border-color);
}
.si-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 14px 4px;
border-bottom: 1px solid var(--border-color);
transition: background 0.15s ease;
position: relative;
}
@media (hover: hover) and (pointer: fine) {
.si-item:hover {
background: var(--hover);
}
}
.si-item-icon {
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.si-item-info {
min-width: 0;
}
.si-item-title {
font-size: 14px;
font-weight: 600;
color: var(--text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
line-height: 1.3;
}
.si-item-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.si-item-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
line-height: 1.5;
}
.si-item-badge-outline {
background: transparent !important;
border: 1px solid var(--border-color);
color: var(--text-color-secondary) !important;
font-weight: 500;
}
.si-capability-badge {
border-style: dashed;
}
.si-item-date {
font-size: 12px;
color: var(--text-color-tertiary);
white-space: nowrap;
}
.si-item-actions {
display: flex;
align-items: center;
gap: 2px;
opacity: 0;
pointer-events: none;
transform: translateX(4px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.si-item:hover .si-item-actions,
.si-item:focus-within .si-item-actions {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
}
@media (hover: none), (pointer: coarse) {
.si-item-actions {
opacity: 1;
pointer-events: auto;
transform: none;
}
}
.si-action-btn {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 8px;
background: transparent;
color: var(--text-color-secondary);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.si-action-btn:hover {
background: var(--hover);
color: var(--text-color);
}
}
.si-action-btn:focus-visible {
outline: none;
background: var(--hover);
color: var(--text-color);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 35%, transparent);
}
@media (hover: hover) and (pointer: fine) {
.si-unshare-btn:hover {
color: var(--error-color);
background: color-mix(in srgb, var(--error-color) 10%, transparent);
}
}
/* ============================================================
Manage Modal
============================================================ */
.si-manage-overlay {
position: fixed;
inset: 0;
background: color-mix(in srgb, var(--text-color) 35%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
z-index: 1600;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
.si-manage-overlay[hidden] {
display: none;
}
.si-manage-overlay.active {
opacity: 1;
pointer-events: auto;
}
.si-manage-modal {
width: min(640px, 100%);
max-height: min(88vh, 920px);
overflow: hidden;
display: flex;
flex-direction: column;
background: var(--background);
border: 1px solid var(--border-color);
border-radius: 20px;
box-shadow: 0 24px 60px -12px color-mix(in srgb, var(--text-color) 30%, transparent);
transform: translateY(12px) scale(0.985);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.si-manage-overlay.active .si-manage-modal {
transform: translateY(0) scale(1);
}
.si-manage-header {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 22px;
border-bottom: 1px solid var(--border-color);
}
.si-manage-icon {
width: 42px;
height: 42px;
min-width: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.si-manage-meta {
flex: 1;
min-width: 0;
}
.si-manage-title {
margin: 0;
font-size: 16px;
font-weight: 600;
line-height: 1.3;
color: var(--text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.si-manage-subtitle {
margin: 3px 0 0;
color: var(--text-color-tertiary);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.01em;
}
.si-manage-close {
width: 34px;
height: 34px;
border-radius: 10px;
border: none;
background: transparent;
color: var(--text-color-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
.si-manage-close:hover {
color: var(--text-color);
background: var(--hover);
}
}
.si-manage-close:focus-visible {
outline: none;
background: var(--hover);
color: var(--text-color);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 35%, transparent);
}
.si-manage-body {
overflow: auto;
padding: 20px 22px 24px;
}
.si-manage-stack {
display: flex;
flex-direction: column;
gap: 24px;
}
.si-manage-section {
border: none;
border-radius: 0;
padding: 0;
background: transparent;
}
.si-manage-section + .si-manage-section {
padding-top: 22px;
border-top: 1px solid var(--border-color);
}
.si-manage-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.si-manage-section h4 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--text-color);
letter-spacing: 0.01em;
}
.si-manage-inline-actions,
.si-manage-action-row {
display: flex;
align-items: center;
gap: 8px;
}
.si-manage-action-row {
margin-top: 10px;
}
.si-manage-action-row-wrap {
flex-wrap: wrap;
}
.si-manage-link-input,
.si-manage-input {
width: 100%;
min-width: 0;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-color);
font-size: 13px;
line-height: 1.3;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.si-manage-link-input {
font-family: var(--font-system);
font-size: 12.5px;
color: var(--text-color-secondary);
}
.si-manage-link-input:focus,
.si-manage-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent);
}
.si-manage-select {
max-width: 240px;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b9a97' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
.si-manage-help {
margin: 8px 0 0;
color: var(--text-color-tertiary);
font-size: 12.5px;
line-height: 1.5;
}
.si-manage-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 10px;
background: transparent;
color: var(--text-color-secondary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
.si-manage-btn:hover {
color: var(--text-color);
background: var(--hover);
}
}
.si-manage-btn:focus-visible {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
}
.si-manage-btn-primary {
border-color: var(--text-color);
background: var(--text-color);
color: var(--background);
}
@media (hover: hover) and (pointer: fine) {
.si-manage-btn-primary:hover {
background: color-mix(in srgb, var(--text-color) 85%, var(--background));
border-color: color-mix(in srgb, var(--text-color) 85%, var(--background));
color: var(--background);
}
}
.si-manage-btn-warning {
color: #d97706;
border-color: color-mix(in srgb, #d97706 35%, var(--border-color));
}
@media (hover: hover) and (pointer: fine) {
.si-manage-btn-warning:hover {
background: color-mix(in srgb, #d97706 10%, transparent);
border-color: #d97706;
color: #d97706;
}
}
.si-manage-btn-danger {
color: var(--error-color);
border-color: color-mix(in srgb, var(--error-color) 30%, var(--border-color));
}
@media (hover: hover) and (pointer: fine) {
.si-manage-btn-danger:hover {
background: color-mix(in srgb, var(--error-color) 10%, transparent);
border-color: var(--error-color);
color: var(--error-color);
}
}
.si-manage-meta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1px;
margin-top: 14px;
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
background: var(--border-color);
}
.si-manage-meta-card {
border: none;
border-radius: 0;
padding: 12px 14px;
background: var(--background);
}
.si-manage-meta-label {
display: block;
margin-bottom: 4px;
color: var(--text-color-tertiary);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.si-manage-meta-card strong {
display: block;
color: var(--text-color);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
}
.si-manage-pill-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 14px;
}
.si-manage-pill {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 999px;
border: 1px dashed var(--border-color);
color: var(--text-color-secondary);
font-size: 11px;
font-weight: 500;
background: transparent;
line-height: 1.6;
}
.si-manage-link-section .si-manage-section-head {
margin-bottom: 8px;
}
.si-manage-danger-section h4 {
color: var(--error-color);
}
/* Tablet adjustments */
@media (max-width: 900px) {
.si-toolbar {
grid-template-columns: 1fr;
grid-template-areas:
"search"
"filters"
"count";
gap: 12px;
}
.si-count {
text-align: left;
}
}
/* Mobile: stacked, touch-friendly */
@media (max-width: 640px) {
.si-view-tabs {
display: flex;
width: 100%;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.si-view-tabs::-webkit-scrollbar {
display: none;
}
.si-view-tab {
flex: 1 0 auto;
}
.si-toolbar {
margin-bottom: 16px;
}
.si-item {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"icon info"
"actions actions";
gap: 12px;
padding: 14px 4px;
}
.si-item-icon {
grid-area: icon;
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 9px;
}
.si-item-icon svg { width: 16px; height: 16px; }
.si-item-info {
grid-area: info;
}
.si-item-actions {
grid-area: actions;
justify-content: flex-end;
opacity: 1;
transform: none;
gap: 4px;
margin-top: 4px;
padding-top: 8px;
border-top: 1px dashed var(--border-color);
}
.si-action-btn {
width: 40px;
height: 40px;
flex: 1;
max-width: 80px;
background: var(--hover);
}
.si-manage-overlay {
padding: 0;
align-items: flex-end;
}
.si-manage-modal {
width: 100%;
max-height: 94vh;
border-radius: 20px 20px 0 0;
border-bottom: none;
transform: translateY(100%);
}
.si-manage-overlay.active .si-manage-modal {
transform: translateY(0);
}
.si-manage-header {
padding: 18px 18px 16px;
}
.si-manage-body {
padding: 16px 18px 24px;
}
.si-manage-icon {
width: 38px;
height: 38px;
min-width: 38px;
}
.si-manage-stack {
gap: 20px;
}
.si-manage-meta-grid {
grid-template-columns: 1fr 1fr;
}
.si-manage-inline-actions,
.si-manage-action-row {
flex-wrap: wrap;
}
.si-manage-action-row .si-manage-btn,
.si-manage-action-row .si-manage-input,
.si-manage-action-row .si-manage-select {
flex: 1 1 140px;
max-width: none;
}
.si-manage-action-row .si-manage-btn-primary {
flex: 1 1 100%;
}
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.si-manage-overlay,
.si-manage-modal,
.si-item,
.si-item-actions,
.si-action-btn,
.si-filter-btn,
.si-manage-btn,
.si-view-tab,
.si-search-input {
transition: none !important;
}
}