/* Shared visual language with the knowledge-base search; work-table density stays intact. */
:root {
  --text:#101827;
  --muted:#667085;
  --line:rgba(15,23,42,.12);
  --line-strong:rgba(100,91,255,.23);
  --accent:#645bff;
  --accent-hover:#5147e8;
  --blue:#4f46e5;
  --surface-soft:#f4f3ff;
  --shadow:0 16px 48px rgba(35,43,83,.12);
}
body {
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:radial-gradient(circle at 16% 8%,rgba(100,91,255,.30),transparent 28rem),radial-gradient(circle at 78% 0%,rgba(0,164,255,.23),transparent 24rem),linear-gradient(135deg,#f5f7ff 0%,#edf3ff 45%,#f9fbff 100%);
  background-attachment:fixed;
}
.appShell { width:min(1600px,calc(100% - 48px)); margin:24px auto 0; }
.topbar { height:66px; padding:0 20px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.82); box-shadow:0 8px 32px #25335d0a; }
.brandBlock b { font-size:19px; letter-spacing:-.035em; }
.brandBlock span { margin-top:2px; }
.userBlock b { font-size:13px; }
.mainNav { display:flex; width:fit-content; max-width:100%; min-height:44px; padding:5px; gap:4px; margin:14px 0 0; border:1px solid #ffffff8a; border-radius:18px; background:rgba(15,23,42,.05); align-items:center; }
.navTab { min-height:36px; padding:7px 15px; border:0; border-radius:13px; font-weight:650; color:#475467; }
.navTab:hover { background:#ffffff80; }
.navTab.active { border:0; color:white; background:linear-gradient(135deg,#645bff,#00a4ff); box-shadow:0 6px 18px #645bff33; }
.content { width:100%; max-width:none; padding:28px 0 48px; }
.pageHeading { align-items:center; min-height:64px; margin-bottom:18px; }
.pageHeading h1 { font-size:clamp(25px,3vw,38px); font-weight:750; line-height:1.12; letter-spacing:-.045em; }
.pageHeading p { margin-top:8px; font-size:13px; color:#596780; }
.addChatIcon { width:46px; height:46px; flex-basis:46px; border:0; border-radius:16px; color:white; background:linear-gradient(135deg,#645bff,#00a4ff); box-shadow:0 8px 22px #645bff30; font-size:28px; }
.addChatIcon:hover { color:white; border:0; background:linear-gradient(135deg,#5147e8,#008ce0); }
.summaryStrip { gap:8px; padding:0; margin:0 0 16px; border:0; background:none; }
.summaryStrip > div { padding:8px 13px; gap:9px; border:1px solid #ffffffa8 !important; border-radius:999px; background:rgba(255,255,255,.72); }
.summaryStrip span { font-size:12px; }
.summaryStrip b { color:#344054; font-size:14px; }
.filtersBar { padding:16px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.88); box-shadow:var(--shadow); gap:12px; }
.filtersBar label > span { font-size:12px; font-weight:650; padding-left:3px; }
input,select,textarea,.filtersBar input,.filtersBar select { border-color:var(--line-strong); border-radius:12px; min-height:40px; padding:9px 11px; }
input:hover,select:hover,textarea:hover { border-color:#a5a1ef; }
.primaryBtn,.secondaryBtn,.dangerBtn,.textBtn { border-radius:13px; }
.primaryBtn { border:0; background:linear-gradient(135deg,#645bff,#00a4ff); box-shadow:0 5px 15px #645bff20; }
.primaryBtn:hover { background:linear-gradient(135deg,#5147e8,#008ce0); }
.secondaryBtn,.textBtn { background:rgba(255,255,255,.94); border-color:var(--line); color:#344054; }
.iconLink,.iconBtn { border-radius:12px; background:#f4f3ff; color:#5650cf; border-color:#e4e2ff; }
.iconLink:hover,.iconBtn:hover { background:#eae7ff; }
.tableToolbar { margin:16px 0 12px; padding:8px 12px 8px 16px; border:1px solid var(--line); border-radius:19px; background:rgba(255,255,255,.66); gap:12px; }
.tableToolbar > div { display:flex; gap:6px; }
.tableFrame { border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.95); box-shadow:var(--shadow); max-height:calc(100vh - 420px); min-height:170px; }
.dataTable th { background:#f6f6fd; color:#59627b; padding:13px 14px; font-size:12px; }
.dataTable td { padding:10px 14px; border-color:#ededf6; }
.dataTable tbody tr:nth-child(even) { background:#fcfcff; }
.dataTable tbody tr:hover { background:#f5f5ff; }
.classificationBlock { border-radius:12px; padding:8px 10px; }
.cellEdit:hover,.cellEdit:focus-visible { background:#edebff; outline:1px solid #bdb7ff; }
.classificationCategory { color:#393b68; }
.badge { border-radius:8px; }
.chatNumberBtn { color:#5147ce; }
.modalBackdrop { background:rgba(33,35,66,.32); backdrop-filter:blur(5px); }
.modalPanel { border-radius:26px; box-shadow:0 24px 90px #22294e35; }
.modalHeader { padding:18px 22px; background:#fcfcff; }
.modalHeader h2 { font-size:20px; letter-spacing:-.035em; }
.dialoguePane { background:#f7f7fe; }
#chatForm { padding:20px; }
.directDescriptionField { border-radius:16px; background:#f5f4ff; padding:13px; }
.flagFieldset { border-radius:16px; border-color:#e1dfef; padding:13px; }
.flagCheck input { accent-color:#645bff; }
.modalFooter { gap:8px; }
.quickEditor,.dialoguePreview { border-radius:22px; border-color:#d7d5ed; box-shadow:0 16px 60px #242c5730; }
.quickEditor header,.dialoguePreview header { background:#f8f7ff; border-radius:22px 22px 0 0; padding:12px 16px; }
.quickEditor form { padding:16px; }
.dialoguePreview footer { padding:12px 16px; }
.searchOptions { border-radius:14px; border-color:#c6c2ed; box-shadow:0 12px 35px #242c5722; }
.searchOptions button { padding:11px 13px; }
.searchOptions button:hover,.searchOptions .keyboardActive { background:#f0edff; }
.directoryBlock,.toolBand,.inlineForm { border-radius:22px; background:#ffffffdf; box-shadow:var(--shadow); }
.loginScreen { background:transparent; }
.loginPanel { border-radius:28px; background:rgba(255,255,255,.88); box-shadow:var(--shadow); padding:32px; width:min(420px,100%); }
.loginPanel h1 { font-size:34px; letter-spacing:-.045em; }
.productMark { border-radius:16px; background:linear-gradient(135deg,#645bff,#00a4ff); box-shadow:0 8px 24px #645bff30; }
.chatIdentitySummary { margin:0 0 14px; color:#667085; font-size:12px; overflow-wrap:anywhere; }
.chatRatingField { padding:16px; margin-bottom:16px; border:1px solid #c5baff; border-left:4px solid #7560e5; border-radius:18px; background:#f2efff; gap:9px; }
.chatRatingField > span { color:#42317e; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ratingRequired { font-size:11px; font-weight:600; color:#6145b7; background:#e5ddff; border-radius:999px; padding:4px 8px; }
.chatRatingField small { color:#625778; font-size:12px; line-height:1.5; }
.chatRatingField select { border:1px solid #b2a1f2; min-height:44px; font-weight:600; }
.chatRatingField[data-rating="positive"] { background:#edf8f2; border-color:#a9d8bc; border-left-color:#36845a; }
.chatRatingField[data-rating="negative"] { background:#fff3f1; border-color:#efc1b9; border-left-color:#bf5a48; }
.chatRatingField[data-rating="positive"] > span { color:#256141; }
.chatRatingField[data-rating="negative"] > span { color:#974636; }
.chatRatingField:not([data-rating="pending"]) .ratingRequired { display:none; }
@media(max-width:900px) {
  .appShell { width:calc(100% - 24px); margin-top:12px; }
  .content { padding-top:22px; }
  .tableFrame { max-height:65vh; }
  .topbar { padding:10px 14px; min-height:64px; height:auto; }
}
@media(max-width:600px) {
  .appShell { width:calc(100% - 20px); }
  .topbar { border-radius:20px; gap:10px; }
  .brandBlock,.userBlock { gap:8px; }
  .brandBlock b { font-size:16px; }
  .userBlock b { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mainNav { margin-top:10px; }
  .pageHeading { gap:12px; }
  .pageHeading p { font-size:12px; }
  .summaryStrip { gap:6px; }
  .summaryStrip > div { padding:6px 10px; }
  .filtersBar { padding:12px; gap:10px; border-radius:20px; }
  .tableToolbar { padding:9px 12px; }
  .tableFrame { border-radius:20px; }
  .modalBackdrop { padding:0; }
  .modalPanel { border-radius:0; }
  .quickEditor,.dialoguePreview { border-radius:18px; }
}