/* Same blueprint palette as the main workspace, without coupling either app's DOM. */
:root {
  --background: #f7fbff; --foreground: #08294f; --muted: #edf4fa;
  --muted-foreground: #647f9b; --accent: #0758d8; --border: #b8cadc;
  --card: #fbfdff; --ui: "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}
[hidden] { display: none !important; }
.support-blueprint { color: var(--foreground); background: #dce7f0; font: 13px/1.65 var(--ui); }
.support-blueprint button, .support-blueprint input, .support-blueprint textarea { font: inherit; border-radius: 3px; }
.support-blueprint button { background: var(--accent); border: 1px solid var(--accent); box-shadow: none; }
.support-blueprint button:disabled { opacity: .5; cursor: not-allowed; }
.support-blueprint button.quiet { color: #466782; background: #fff; border-color: var(--border); }
.support-blueprint button.danger { color: #c34f37; background: #fff6f1; border-color: #e9b6a6; }
.support-blueprint button:hover:not(:disabled) { filter: brightness(.97); }
.support-blueprint :is(input, textarea):focus { outline: 2px solid #0758d830; outline-offset: 1px; border-color: var(--accent); }
.support-blueprint :is(button, a):focus-visible { outline: 2px solid #ff9b74; outline-offset: 3px; }
.support-blueprint input, .support-blueprint textarea { color: var(--foreground); border: 1px solid var(--border); background: #fff; }
.support-blueprint :is(main#desk, main#admin):not([hidden]) {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  margin: 14px; height: calc(100dvh - 28px); min-height: 0; overflow: hidden; border: 1px solid #a7bed3;
  box-shadow: 0 18px 50px #1d3d5b20;
}
.support-blueprint header { grid-column: 2; grid-row: 1; height: auto; min-height: 72px; gap: 12px; padding: 14px 24px; background: #f8fbff; color: var(--foreground); border-bottom: 1px solid var(--border); }
.support-blueprint header strong { font-size: 17px; }
.support-blueprint header strong small { display: block; color: #7089a1; font-size: 10px; font-weight: 400; margin-top: 3px; }
.support-blueprint header :is(#identity, #who) { margin-left: auto; margin-right: 0; padding: 4px 12px; border: 1px solid var(--border); border-radius: 20px; color: #466782; background: #fff; font-size: 11px; }
.support-blueprint header button { font-size: 11px; padding: 5px 10px; border-radius: 20px; }
.support-blueprint #desk .mobile-nav, .support-blueprint .support-admin-nav {
  display: flex; position: static; grid-column: 1; grid-row: 1 / -1; min-width: 0; min-height: 0;
  flex-direction: column; align-items: stretch; gap: 8px; width: auto; padding: 16px 9px;
  background: linear-gradient(180deg, #0756d8, #2459d1); color: #fff; overflow: auto; box-shadow: none; border: 0;
}
.support-rail-brand { display: block; margin: 0 auto 25px; }
.support-rail-brand img { display: block; border-radius: 10px; box-shadow: 0 7px 18px #021f5b38; }
.support-blueprint #desk .mobile-nav button, .support-blueprint .support-admin-nav > a:not(.support-rail-brand) {
  display: block; flex: none; min-height: 52px; padding: 14px 6px; text-align: center; text-decoration: none;
  background: #ffffff08; border: 1px solid #ffffff30; color: #e4edff; border-radius: 3px; font-size: 11px; overflow-wrap: anywhere;
}
.support-blueprint #desk .mobile-nav button.active, .support-blueprint #desk .mobile-nav button:hover:not(:disabled),
.support-blueprint .support-admin-nav > a:not(.support-rail-brand):hover { background: #fff; color: var(--accent); border-color: #fff; }
.support-blueprint #mobile-menu { display: none; }
.support-blueprint main#desk .layout {
  grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  gap: 16px; padding: 16px; min-height: 0; height: auto; background-color: #f7fbff;
  background-image: linear-gradient(#5a87b11a 1px, transparent 1px), linear-gradient(90deg, #5a87b11a 1px, transparent 1px);
  background-size: 24px 24px;
}
.support-blueprint main#desk .layout > aside { display: none; grid-column: 1; grid-row: 1; border: 1px solid #aebfd0; background: #fbfdff; }
.support-blueprint[data-queue-view="awaiting"] main#desk .layout > aside:nth-child(1),
.support-blueprint[data-queue-view="assigned"] main#desk .layout > aside:nth-child(2) { display: flex; }
.support-blueprint .layout > .chat { grid-column: 2; grid-row: 1; border: 1px solid #aebfd0; background: #fbfdff; min-height: 0; }
.support-blueprint .layout h2 { padding: 13px; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--border); background: #f7fbff; }
.support-blueprint .layout h2 small { float: right; font: 11px var(--mono); color: #708da7; margin-top: 4px; }
.support-blueprint .item { margin: 0; padding: 14px 13px; border-bottom: 1px solid #d1dce7; background: #ffffff50; }
.support-blueprint .item.selected { background: #dfedfb; box-shadow: inset 3px 0 var(--accent); }
.support-blueprint .item:hover { background: #eef5fb; }
.support-blueprint .item span { color: #6d87a0; font-size: 11px; }
.support-blueprint .chat-head { min-height: 62px; flex-wrap: wrap; padding: 12px 16px; background: #f8fbff; border-bottom-color: var(--border); }
.support-blueprint .chat-head button { font-size: 11px; padding: 5px 10px; }
.support-blueprint .messages { margin: 14px; padding: 14px; background: #fbfdff; border: 1px solid #b6c8d9; }
.support-blueprint .msg { border-radius: 0; max-width: 90%; box-shadow: none; color: #193f63; background: #edf5fd; border-left: 2px solid #0758d8; padding: 12px 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.support-blueprint .msg.agent { background: #fff3ed; border-left-color: #ff8151; }
.support-blueprint .msg.system { margin: 12px auto; color: #6d86a0; background: transparent; border: 0; font-size: 11px; }
.support-blueprint .msg small { font-size: 10px; font-weight: 600; color: #527490; }
.support-blueprint .composer { margin: 0 14px 14px; padding: 10px; border: 1px solid #b6c8d9; background: #fff; flex-wrap: wrap; }
.support-blueprint .composer textarea { flex: 1 1 160px; width: auto; min-width: 0; border: 0; padding: 6px; min-height: 60px; }
.support-blueprint .composer .support-upload-list { flex-basis: 100%; order: -1; }
.support-blueprint .empty { color: #7b94aa; padding: 24px; text-align: center; font-size: 12px; }
.support-blueprint .context-summary { background: #fff5ef; border: 1px solid #eecbb7; color: #8b654d; border-radius: 0; }
.support-blueprint .admin-grid {
  grid-column: 2; grid-row: 2; min-height: 0; overflow: auto; align-content: start; padding: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; background-color: #f7fbff;
  background-image: linear-gradient(#5a87b11a 1px, transparent 1px), linear-gradient(90deg, #5a87b11a 1px, transparent 1px);
  background-size: 24px 24px; scroll-padding-top: 20px;
}
.support-blueprint .panel { min-width: 0; position: relative; padding: 22px; border: 1px solid #acbfd0; border-radius: 3px; background: #fbfdff; box-shadow: 4px 4px 0 #0758d810; }
.support-blueprint .panel::before { content: ""; position: absolute; top: 22px; left: -1px; width: 3px; height: 22px; background: #0758d8; }
.support-blueprint .panel:target { outline: 2px solid #0758d880; outline-offset: -2px; }
.support-blueprint .panel h2 { font-size: 16px; color: #0b2e54; margin: 0 0 12px; }
.support-blueprint .hint, .support-blueprint .muted { color: #6b849b; font-size: 12px; }
.support-blueprint .form-row { flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.support-blueprint .form-row input { flex: 1 1 135px; min-width: 100px; border-color: var(--border); background: #fff; padding: 8px; }
.support-blueprint .form-row label { flex: 1 1 150px; color: #62819b; font-size: 11px; }
.support-blueprint .form-row label input { width: 100%; display: block; margin-top: 5px; }
.support-blueprint .form-row button { font-size: 12px; }
.support-blueprint .admin-row { border-color: #cfdae5; align-items: center; font-size: 12px; overflow-wrap: anywhere; }
.support-blueprint .admin-row span { min-width: 0; }
.support-blueprint .admin-row button { flex: none; font-size: 11px; }
.support-blueprint #audit-panel { grid-column: 1 / -1; }
.support-blueprint #audit-list { max-height: 400px; overflow: auto; }
.support-blueprint .tok-code { background: #edf5ff; color: #174678; border: 1px dashed #9cb9d6; border-radius: 3px; }
.support-blueprint .login-card { width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow: auto; margin: 10vh auto; border-radius: 3px; border: 1px solid #a7bed3; border-top: 5px solid #0758d8; background: #fbfdff; box-shadow: 8px 8px 0 #0758d818; padding: 34px; }
.support-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.support-login-brand span { font: 9px/1.6 var(--mono); letter-spacing: .1em; color: #0758d8; }
.support-blueprint .login-card h1 { font-size: 23px; color: #08294f; }
.support-blueprint .login-card p { color: #6b849b; }
.support-blueprint .login-card p.error { color: #bb4233; font-size: 12px; }
.support-blueprint .login-card > button { margin-top: 24px; width: 100%; box-shadow: 4px 4px 0 #092d55; }
.support-blueprint dialog { border-radius: 3px; border: 1px solid #b8cadc; color: #08294f; background: #fbfdff; }
.support-blueprint .dhead { background: #f2f7fb; border-color: var(--border); flex-wrap: wrap; }
.support-blueprint .hist-conv, .support-blueprint .hist-msg { border-radius: 3px; }
@media (max-width: 1050px) {
  .support-blueprint .admin-grid { grid-template-columns: 1fr; }
  .support-blueprint main#desk .layout { grid-template-columns: 215px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .support-blueprint header { padding: 12px 16px; }
}
@media (max-width: 780px) {
  .support-blueprint :is(main#desk, main#admin):not([hidden]) { margin: 0; height: 100dvh; border: 0; grid-template-columns: 76px minmax(0, 1fr); }
  .support-blueprint #desk .mobile-nav, .support-blueprint .support-admin-nav { padding: 12px 5px; gap: 6px; }
  .support-blueprint #desk .mobile-nav button, .support-blueprint .support-admin-nav > a:not(.support-rail-brand) { font-size: 10px; padding: 12px 4px; white-space: normal; }
  .support-blueprint header { padding: 10px 12px; gap: 7px; flex-wrap: wrap; }
  .support-blueprint header strong { font-size: 14px; flex: 1 1 100%; }
  .support-blueprint header :is(#identity, #who) { margin-left: 0; margin-right: auto; }
  .support-blueprint main#desk .layout { display: grid; grid-template-columns: minmax(0, 1fr); height: auto; padding: 8px; gap: 0; }
  .support-blueprint main#desk .layout > aside, .support-blueprint main#desk .layout > .chat { display: none; grid-column: 1; grid-row: 1; height: 100%; width: 100%; }
  .support-blueprint[data-mobile-view="awaiting"] main#desk .layout > aside:nth-child(1),
  .support-blueprint[data-mobile-view="assigned"] main#desk .layout > aside:nth-child(2),
  .support-blueprint[data-mobile-view="conversation"] main#desk .layout > .chat { display: flex; }
  .support-blueprint .chat-head #back-list { display: block; }
  .support-blueprint .messages { margin: 7px; padding: 8px; }
  .support-blueprint .msg { max-width: 96%; padding: 8px; }
  .support-blueprint .composer { margin: 0 7px 7px; padding: 7px; gap: 6px; }
  .support-blueprint .composer textarea { flex-basis: 100%; order: 0; font-size: 16px; min-height: 56px; }
  .support-blueprint .composer .attach-actions { order: 1; }
  .support-blueprint .composer > #send { order: 2; margin-left: auto; }
  .support-blueprint .admin-grid { padding: 10px; gap: 12px; }
  .support-blueprint .panel { padding: 18px 14px; }
  .support-blueprint .admin-row { flex-wrap: wrap; }
  .support-blueprint .login-card { margin: 24px auto; padding: 26px 22px; }
}