/* ============================================================
   XSiter 2 — Design Layer
   Sits on top of Able Pro / Bootstrap 5. Provides:
   design tokens · glass surfaces · micro-interactions
   Light theme only (dark mode removed).
   ============================================================ */

:root {
  --xs2-accent: var(--portal-accent, #5D579E);
  --xs2-radius: 14px;
  --xs2-shadow: 0 4px 24px rgba(20, 20, 43, .08);
  --xs2-shadow-lg: 0 12px 40px rgba(20, 20, 43, .16);
  --xs2-bg: #f4f5fa;
  --xs2-surface: #ffffff;
  --xs2-surface-2: #f8f9fc;
  --xs2-text: #1c1f2b;
  --xs2-text-muted: #6b7280;
  --xs2-border: rgba(20, 20, 43, .09);
  --xs2-glass: rgba(255, 255, 255, .72);
  color-scheme: light;
}

/* ---- Smooth transitions ---- */
body, .card, .pc-header, .pc-sidebar, .modal-content, .dropdown-menu,
.form-control, .form-select, .table, .list-group-item, .offcanvas {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============ Micro-interactions & polish ============ */
.card {
  border-radius: var(--xs2-radius);
  border: 1px solid var(--xs2-border);
  box-shadow: var(--xs2-shadow);
}
.card:hover { box-shadow: var(--xs2-shadow-lg); }

.btn { border-radius: 10px; }
.btn:active { transform: scale(.97); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(120, 120, 140, .35); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 140, .55); }

:focus-visible { outline: 2px solid var(--xs2-accent); outline-offset: 2px; }

/* Page fade-in */
@keyframes xs2-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pc-container, main { animation: xs2-fade .3s ease both; }

/* ============ AI assistant widget ============ */
.xs2-ai-fab {
  position: fixed; bottom: 18px; right: 18px; z-index: 1080;
  width: 54px; height: 54px; border-radius: 50%;
  border: none; cursor: pointer; color: #fff; font-size: 22px;
  background: linear-gradient(135deg, var(--xs2-accent), #8d84e8);
  box-shadow: 0 6px 24px rgba(93, 87, 158, .45);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.xs2-ai-fab:hover { transform: scale(1.08); }

.xs2-ai-panel {
  position: fixed; bottom: 84px; right: 18px; z-index: 1081;
  width: min(380px, calc(100vw - 36px)); height: min(520px, calc(100vh - 120px));
  border-radius: 18px; border: 1px solid var(--xs2-border);
  background: var(--xs2-glass); backdrop-filter: blur(18px);
  box-shadow: var(--xs2-shadow-lg);
  display: none; flex-direction: column; overflow: hidden;
}
.xs2-ai-panel.open { display: flex; animation: xs2-fade .25s ease both; }
.xs2-ai-head {
  padding: 12px 16px; font-weight: 600; color: var(--xs2-text);
  border-bottom: 1px solid var(--xs2-border);
  display: flex; align-items: center; justify-content: space-between;
}
.xs2-ai-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.xs2-ai-msg {
  max-width: 85%; padding: 9px 13px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.45; color: var(--xs2-text);
  white-space: pre-wrap; word-wrap: break-word;
}
.xs2-ai-msg.user { align-self: flex-end; background: var(--xs2-accent); color: #fff; border-bottom-right-radius: 4px; }
.xs2-ai-msg.bot  { align-self: flex-start; background: var(--xs2-surface-2); border: 1px solid var(--xs2-border); border-bottom-left-radius: 4px; }
.xs2-ai-msg.typing { opacity: .6; font-style: italic; }
.xs2-ai-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--xs2-border); }
.xs2-ai-form input {
  flex: 1; border: 1px solid var(--xs2-border); border-radius: 10px;
  padding: 9px 12px; font-size: 13.5px; background: var(--xs2-surface); color: var(--xs2-text);
}
.xs2-ai-form button {
  border: none; border-radius: 10px; padding: 0 16px; cursor: pointer;
  background: var(--xs2-accent); color: #fff; font-size: 15px;
}


/* ============ Quill rich editor font/size pickers (app-wide) ============ */
.rich-editor-wrap .ql-toolbar.ql-snow {
  border-radius: 10px 10px 0 0;
  background: var(--xs2-surface-2, #f8f9fc);
  flex-wrap: wrap;
}
.rich-editor-wrap .ql-container.ql-snow {
  border-radius: 0 0 10px 10px;
  font-size: 15px;
}
.rich-editor-wrap .ql-snow .ql-picker.ql-size .ql-picker-label::before,
.rich-editor-wrap .ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: attr(data-value);
}
.rich-editor-wrap .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=""]::before,
.rich-editor-wrap .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=""]::before {
  content: 'Size';
}
.rich-editor-wrap .ql-snow .ql-picker.ql-font .ql-picker-label::before,
.rich-editor-wrap .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: attr(data-value);
}
.rich-editor-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=""]::before,
.rich-editor-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=""]::before {
  content: 'Font';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before { content: 'Arial'; font-family: Arial, sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Helvetica"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Helvetica"]::before { content: 'Helvetica'; font-family: Helvetica, sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Georgia"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Georgia"]::before { content: 'Georgia'; font-family: Georgia, serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times New Roman"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times New Roman"]::before { content: 'Times New Roman'; font-family: "Times New Roman", serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Courier New"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Courier New"]::before { content: 'Courier New'; font-family: "Courier New", monospace; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Verdana"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Verdana"]::before { content: 'Verdana'; font-family: Verdana, sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Tahoma"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Tahoma"]::before { content: 'Tahoma'; font-family: Tahoma, sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Trebuchet MS"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Trebuchet MS"]::before { content: 'Trebuchet MS'; font-family: "Trebuchet MS", sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Palatino Linotype"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Palatino Linotype"]::before { content: 'Palatino'; font-family: "Palatino Linotype", serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Comic Sans MS"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Comic Sans MS"]::before { content: 'Comic Sans MS'; font-family: "Comic Sans MS", cursive; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Impact"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Impact"]::before { content: 'Impact'; font-family: Impact, sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Lucida Console"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Lucida Console"]::before { content: 'Lucida Console'; font-family: "Lucida Console", monospace; }
/* Applied fonts inside editor content */
.ql-editor { font-family: Inter, system-ui, sans-serif; }
.ql-editor [style*="font-family: Arial"] { font-family: Arial, sans-serif !important; }
.ql-editor [style*="font-family: Helvetica"] { font-family: Helvetica, sans-serif !important; }
.ql-editor [style*="font-family: Georgia"] { font-family: Georgia, serif !important; }
.ql-editor [style*="font-family: Times New Roman"] { font-family: "Times New Roman", serif !important; }
.ql-editor [style*="font-family: Courier New"] { font-family: "Courier New", monospace !important; }
.ql-editor [style*="font-family: Verdana"] { font-family: Verdana, sans-serif !important; }
.ql-editor [style*="font-family: Tahoma"] { font-family: Tahoma, sans-serif !important; }
.ql-editor [style*="font-family: Trebuchet MS"] { font-family: "Trebuchet MS", sans-serif !important; }
.ql-editor [style*="font-family: Palatino Linotype"] { font-family: "Palatino Linotype", Palatino, serif !important; }
.ql-editor [style*="font-family: Comic Sans MS"] { font-family: "Comic Sans MS", cursive !important; }
.ql-editor [style*="font-family: Impact"] { font-family: Impact, sans-serif !important; }
.ql-editor [style*="font-family: Lucida Console"] { font-family: "Lucida Console", monospace !important; }