body { font-family: Arial, sans-serif; background-color: #f0f2f5; margin:5px; }
  .chat-container {
    max-width: 96%; margin: 0 auto;
    background: #fff; border-radius: 10px; display: flex; flex-direction: column;
    height: 85vh; position: relative;
    border: 1.5px solid rgba(39,133,201,0.5);
  }
  @media (min-width: 992px) {.chat-container {height: 90vh;}}

  #chat-box { flex: 1; overflow-y: auto; padding: 20px; border-bottom: 1px solid #ddd; }
  .input-container { display: flex; flex-direction: column; align-items: center; padding: 5px; background: rgba(39,133,201,0.15); border-top: 1.5px solid rgba(39,133,201,0.5); }

  /* Presearch block (search + load + matching) */
  .presearch-controls { width: 100%; max-width: 800px; display:flex; flex-direction:column; align-items:center; }
  .input { width: 100%; display: flex; flex-direction: row; align-items: center; margin-bottom: 30px;}
  .presearch-actions { display:flex; flex-direction: column; gap:8px; align-items:center; justify-content:center; flex-wrap: wrap;margin-top: 20px; }

  /* Source switch */
  .source-switch { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1.5px solid rgba(39, 133, 201, 0.6); border-radius: 6px; background: #fff; width: 300px; max-width: 98%; justify-content: center; }
  .source-switch .opt { display: flex; flex-direction: column; align-items: center; font-weight:600; color:#006798; font-size:14px; }
  .source-switch .opt-count { display: block; font-size: 10px; font-weight: 600; opacity: 0.75; margin-top: 2px; }
  .source-switch .opt.muted { opacity:.8; }
  .source-switch .paywall-hint { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#006798; opacity:.6; }
  .source-switch .paywall-hint svg{ width:16px; height:16px; }
  .switcher { position:relative; width:48px; height:24px; cursor: pointer; }
  .switcher input { position:absolute; opacity:0; width:0; height:0; }
  .switcher .slider {
    position:absolute; inset:0; border:1.5px solid rgba(39,133,201,0.6); border-radius:999px;
    background:rgba(39,133,201,0.12); transition:all .2s;
  }
  .switcher .slider:before {
    content:""; position:absolute; height:18px; width:18px; left:3px; top:50%; transform:translateY(-50%);
    background:#fff; border:1.5px solid rgba(39,133,201,0.6); border-radius:50%; transition:all .2s;
  }
  .switcher input:checked + .slider { background:rgba(39,133,201,0.36); }
  .switcher input:checked + .slider:before { transform:translate(24px, -50%); }
  .source-switch[aria-disabled="true"] { opacity:.9; cursor:not-allowed; }

  /* Postsearch controls */
  .toggle-container { display: flex; flex-direction: column; width: 96%; max-width: 800px; }
  .toggle1 { display: flex; flex-direction: row; align-items: stretch; justify-content: center; margin-bottom: 8px;margin-top: 8px; gap:8px; }
  .toggle2 { display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap:8px; flex-wrap: wrap;}

  #user-input { flex: 1; padding: 12px; border: 1.5px solid rgba(39,133,201,0.5); border-radius: 4px; font-size:16px; background: rgba(39,133,201,0.15); color:#006798; }
  #user-input::placeholder { color: #006798; opacity: 0.75; }

  #send-btn { display:inline-flex; align-items:center; gap:3px; padding: 13px 13px 13px 9px; background: rgba(39,133,201,0.1); border: 1.5px solid rgba(39,133,201,0.4); border-radius: 4px; color: #006798; cursor: pointer; font-weight: bold; font-size:16px; box-shadow: inset 0 -1em 1em rgba(39,133,201,0.5); }
  #send-btn:hover { opacity: 0.8; }
  #send-btn svg {width: 18px; height: 18px; fill: currentColor;}

  #end-session { padding: 8px 8px; background: #ffd4d4; border: 1.5px solid #ff8787; border-radius: 4px; color: #b30000; cursor: pointer; font-weight: bold; font-size:14px; }
  #end-session:hover { opacity: 0.8; }

  #next-page-btn { padding: 8px 8px; background: #e7f7ec; border: 1.5px solid #34a853; border-radius: 4px; color: #1e7a3b; cursor: pointer; font-weight: bold; font-size:14px; display:none; }
  #next-page-btn:hover { background:#d8f2e0; }

  #craft-paper-btn { padding: 8px 8px; background: rgba(39, 133, 201, 0.3); border: 1.5px solid rgba(39, 133, 201, 0.6); border-radius: 4px; color: #006798; cursor: pointer; font-weight: bold; font-size:14px; display:none; }
  #craft-paper-btn:hover { background: rgba(39,133,201,0.4); }

  #save-file-btn, #verify-pin-btn, #send-magic-btn { padding: 8px 8px;  background: rgba(39,133,201,0.1); border: 1.5px solid rgba(39, 133, 201, 0.6); border-radius: 4px; color: #006798; cursor: pointer; font-weight: bold; font-size:14px; }
  #load-file-btn  { padding: 8px 8px;  background: white; border: 1.5px solid rgba(39, 133, 201, 0.6); border-radius: 4px; color: #006798; cursor: pointer;font-size:14px; margin: 15px; }
  #save-file-btn:hover, #load-file-btn:hover, #verify-pin-btn:hover, #send-magic-btn:hover { background: rgba(39,133,201,0.2); }


  #pwa-install  { padding: 3px 5px;  background: white; border: 1.5px solid rgba(39, 133, 201, 0.6); border-radius: 4px; color: #006798; cursor: pointer;font-size:14px; position: absolute; left: 15px; top: 12px;}
  #pwa-install:hover { background: rgba(39,133,201,0.2); }


  #send-offline-btn { background:#d7ffef; border:1.5px solid #0c7d4e;color:#0c7d4e; font-weight: bold;}

  #auto-run-btn{
    padding:8px 8px;
    background:#a4f7d5;
    border:1.5px solid #0c7d4e;
    border-radius:4px;
    color:#0c7d4e;
    cursor:pointer;
    font-weight:bold;
    font-size:14px;
    display:none;
  }
  #auto-run-btn:hover{ background:#d6efe6; }
  #auto-run-btn.active{
    background:#0c7d4e;
    border-color:#0c7d4e;
    color:#fff;
  }

  .toggle-btn { background: transparent; border: 1.5px solid rgba(39,133,201,0.6); border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color 0.3s; display: inline-flex; align-items: center; color: rgb(0 103 152 / 100%);}
  .toggle-btn:hover { opacity: 0.8; }
  .toggle-btn.active { background: rgba(39,133,201,0.4); border: 1.5px solid rgba(39,133,201,0.6); color: #006798; font-weight: bold; }

  .toggle-btn .lock { width:20px; height:20px; margin-right:8px; display:inline-block; }
  .toggle-btn .lock svg { width:20px; height:20px; display:block; }
  .toggle-btn .lock.unlocked { display:none; }
  #crossref-toggle.premium-active .lock.locked { display:none; }
  #crossref-toggle.premium-active .lock.unlocked { display:inline-block; }
  #crossref-toggle.info-only { cursor: default; }

  .bot-message { margin: 10px 0; padding: 12px 16px; border-radius: 20px; max-width:70%; word-wrap: break-word; }
  .user-message { display: none; }
  .bot-message  { background: #f1f0f0; color: #333; text-align: left; }
  .bot-message.error { background: #ffe6e6; color: #cc0000; }

  .pubmed-snippet { background-color: #e9f9ff; color: #005875; padding:10px; border-left:5px solid #0a8ec6; border-radius:8px; margin-bottom: 5px; }
  #spinner { display: none; position: absolute; bottom:50%; left:50%; transform: translateX(-50%); font-size:18px; font-weight: bold; color:#007bff; animation:blink 1.5s infinite; background: rgba(39,133,201,0.4); padding: 75px 15px 75px 15px; border-radius: 999px; }
  @keyframes blink { 0% { opacity:1; } 50% { opacity:0.5; } 100% { opacity:1; }}

  /* Focus ring */
  #next-page-btn, #craft-paper-btn, #auto-run-btn, #save-file-btn, #load-file-btn, #end-session, #send-offline-btn, #send-btn { outline: none; }
  #next-page-btn:focus, #craft-paper-btn:focus, #auto-run-btn:focus, #save-file-btn:focus, #load-file-btn:focus, #end-session:focus, #send-offline-btn:focus, #send-btn:focus { box-shadow: 0 0 0 3px rgba(11, 87, 208, .25); }

  #load-file-input { display: none; }
  a { color: #63a4ff; } a:hover { text-decoration: underline; color: #337ab7; }
  .modal-card { color:#006798; }

  /* Hero */
  .chat-container.presearch { position: relative; }
  .chat-container.presearch #chat-box { display: none; }
  .chat-container.presearch .input-container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(800px, 92%); background: transparent; border-top: none; box-shadow: none; }
  .chat-container.presearch .toggle-container { display: none; }
  .chat-container.presearch .presearch-controls { display:flex; }
  .chat-container.postsearch .presearch-controls { display:none; }
  .chat-container.postsearch .toggle-container { display:flex; }
  .hero { display:none; text-align:center; color:#006798; padding:18px 12px 8px; }
  .presearch .hero { display:block; }
  .hero h2 { margin:0 0 6px; font-size:20px; font-weight:700; letter-spacing:.2px; }
  .hero .sub { margin:0 0 10px; opacity:.9; font-size: 80%;}

  /* Link Card (DOI unfurl) */
  .link-card { display:flex; gap:10px; align-items:flex-start; border:1px solid rgba(39,133,201,.35); border-radius:10px; padding:10px; margin:8px 0; background:#f8fcff; color:#0b3a53; }
  .link-card .thumb { flex:0 0 72px; width:72px; height:72px; border-radius:8px; overflow:hidden; background:#e6f3fb; }
  .link-card .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .link-card .meta { flex:1 1 auto; min-width:0; }
  .link-card .meta .t { font-weight:700; font-size:14px; margin:0 0 4px; }
  .link-card .meta .d { font-size:13px; opacity:.9; margin:0 0 6px; }
  .link-card .meta .f { font-size:12px; opacity:.8; display:flex; gap:8px; flex-wrap:wrap; }
  .link-card .meta a { color:#006798; text-decoration:none; }
  .link-card .meta a:hover { text-decoration:underline; }
  .link-card.skeleton { animation:pulse 1.2s ease-in-out infinite; }
  @keyframes pulse { 0%{opacity:.6} 50%{opacity:1} 100%{opacity:.6} }

  /* Sticky query banner */
  #chat-box .query-banner {
    position: sticky; top: -20px; z-index: 5;
    margin: -20px -20px 10px -20px; padding: 10px 10px;
    background: #e9f6ff; border-bottom: 1px solid rgba(39,133,201,.35);
    color: #006798; font-weight: 600; display: none; text-align: left; border-radius: 9px 9px 0 0;
  }
  #chat-box .query-banner .qb-row { display:flex; align-items:center; gap:8px; flex-wrap: nowrap; }
  #chat-box .query-banner .label{ opacity:.8; margin-right:2px; font-weight:700; font-size: 13px; }
  #chat-box .query-banner .q{ font-weight:700; max-width: 60ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #chat-box .query-banner .clear{ margin-left:auto; font-weight:600; cursor:pointer; opacity:.7; border: 1px solid rgba(39,133,201,.35); padding:2px 6px; border-radius:999px; }
  #chat-box .query-banner .clear:hover{ opacity:1; }
  #chat-box .query-banner .bar { margin-top:6px; height:6px; border-radius:999px; background: rgba(39,133,201,.2); overflow:hidden; }
  #chat-box .query-banner .bar > span{ display:block; height:100%; width:0%; background: linear-gradient(90deg, rgba(39,133,201,.85), rgba(39,133,201,.55)); transition: width .3s ease; }
  #chat-box .query-banner .snippet{ margin-top:8px; font-weight:500; font-size: 12px; color:#0b4b6d; }
  #chat-box .query-banner .snippet details summary { cursor:pointer; }

  .query-banner .qb-stats span { font-weight: 600; font-size: 12px; opacity: 0.95; }
  @media (max-width: 768px) { .query-banner .qb-stats span { font-size: 10px !important; font-weight: 500 !important; } }
  .query-banner .q { max-width: calc(100% - 120px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .query-banner .clear { cursor: pointer; font-weight: bold; }
  .qb-scope { font-size: 10px; }

  .looks-disabled { opacity:.45; filter:grayscale(30%); }
  .looks-disabled:hover { opacity:.6; }

  /* Modal (moved out of inline) */
/* was: .modal-backdrop / .modal-card */
#craft-confirm-modal { /* backdrop */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#craft-confirm-modal .ccm-card {
  background: #fff;
  color: #111;
  max-width: 460px;
  width: 92%;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow: hidden;
  font-family: inherit;
}
#craft-confirm-modal .ccm-header { padding:16px 18px; border-bottom:1px solid #e5e7eb; font-weight:700; font-size:16px; display:flex; justify-content:space-between; align-items:center; }
#craft-confirm-modal .ccm-body   { padding:16px 18px; line-height:1.45; }
#craft-confirm-modal .ccm-body .msg { margin-bottom:8px; }
#craft-confirm-modal .ccm-body .hint { font-size:13px; color:#555; }
#craft-confirm-modal .ccm-footer { padding:12px 18px; display:flex; gap:8px; justify-content:flex-end; border-top:1px solid #e5e7eb; }

/* Buttons */
#ccm-continue { padding: 8px 8px;  background: rgba(39,133,201,0.4); border: 1.5px solid rgba(39, 133, 201, 0.6); border-radius: 4px; color: #006798; font-weight: bold; cursor: pointer;font-size:14px;}
#ccm-craft    { padding: 8px 8px;  background: #111827;              border: 1.5px solid rgba(39, 133, 201, 0.6); border-radius: 4px; color: #fff;     cursor: pointer;font-size:14px;}
#ccm-cancel   { padding: 8px 8px;  background: #fff;                  border: 1.5px solid rgba(39, 133, 201, 0.6); border-radius: 4px; color: #006798; cursor: pointer;font-size:14px;}