/* Dify-first AI workspace. Square/flat language, reusing the --aic-* tokens
   already defined by .ai-chat-page so the Dify surface reads as native. */
.dify-ai-page{
  /* Plan 7.1: the official iframe needs 720px desktop / 680px mobile, so the
     page itself must be able to grow past the viewport rather than clip it. */
  --aic-ink:#0f172a;--aic-text:#334155;--aic-muted:#64748b;--aic-subtle:#94a3b8;
  --aic-line:#e2e8f0;--aic-line-2:#cbd5e1;--aic-surface:#f8fafc;--aic-canvas:#eef1f6;
  --aic-brand:#4f46e5;--aic-brand-ink:#3730a3;--aic-brand-soft:#eef2ff;--aic-danger:#b91c1c;
  min-height:max(760px, calc(100vh - var(--topbar-h)));
  display:flex;flex-direction:column;
  background:var(--aic-canvas);color:var(--aic-text);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.dify-ai-page *,.dify-ai-page :before,.dify-ai-page :after{box-sizing:border-box}

.dify-ai-header{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:16px 20px;background:#fff;border-bottom:1px solid var(--aic-line);flex:0 0 auto;
}
.dify-ai-header h1{margin:2px 0 0;font-size:20px;line-height:1.2;color:var(--aic-ink);font-weight:650}
.dify-ai-eyebrow{
  display:inline-block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--aic-brand-ink);background:var(--aic-brand-soft);
  border:1px solid var(--aic-line);padding:3px 8px;font-weight:600;
}
.dify-ai-header p{margin:6px 0 0;font-size:13px;color:var(--aic-muted);max-width:64ch}
.dify-ai-project{text-align:right;display:flex;flex-direction:column;gap:2px;min-width:0}
.dify-ai-project span{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--aic-subtle)}
.dify-ai-project strong{font-size:14px;color:var(--aic-ink);font-weight:600;overflow-wrap:anywhere}

.dify-ai-scope-note{
  flex:0 0 auto;display:flex;gap:8px;align-items:flex-start;
  padding:10px 20px;background:var(--aic-brand-soft);
  border-bottom:1px solid var(--aic-line);
  font-size:12.5px;line-height:1.5;color:var(--aic-brand-ink);
}
.dify-ai-scope-note strong{font-weight:650}
/* A shared Knowledge Base means answers may cite another study, which is a
   correctness and confidentiality caveat, not a neutral note. */
.dify-ai-scope-note-shared{
  background:#fef3c7;border-bottom-color:#fcd34d;color:#92400e;
}

.dify-ai-frame-panel{
  flex:1 1 auto;min-height:0;display:flex;
  padding:16px 20px 20px;
}
.dify-ai-frame-panel > iframe{
  flex:1 1 auto;width:100%;min-height:720px;
  border:1px solid var(--aic-line);background:#fff;display:block;
}

/* The embedded chat renders Dify's own policy links in a footer strip. Those
   pages describe Dify's service, not InsightReel's, so showing them to staff
   inside a research workspace is misleading rather than informative. The strip
   is cross-origin and cannot be styled, so the panel clips it instead. */
.dify-ai-frame-panel{
  overflow:hidden;
}
.dify-ai-frame-panel > iframe{
  /* Grow past the panel so the trailing footer falls outside the clip. */
  height:calc(100% + 46px);
  min-height:calc(720px + 46px);
}

/* Loading and unavailable surfaces are compact work surfaces, never a
   half-rendered chat. */
.dify-ai-state{
  flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:24px 20px;
}
.dify-ai-state-card{
  width:min(560px,100%);background:#fff;border:1px solid var(--aic-line);padding:24px;
}
.dify-ai-state-card h2{margin:0 0 8px;font-size:16px;color:var(--aic-ink);font-weight:650}
.dify-ai-state-card p{margin:0;font-size:13px;line-height:1.55;color:var(--aic-muted)}
.dify-ai-state-card .dify-ai-actions{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.dify-ai-state-card button{
  min-height:44px;padding:0 16px;border:1px solid var(--aic-line-2);background:#fff;
  color:var(--aic-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:transform .12s cubic-bezier(.2,.8,.3,1),background .12s ease,border-color .12s ease;
}
.dify-ai-state-card button:hover{background:var(--aic-surface);border-color:var(--aic-brand)}
.dify-ai-state-card button:active{transform:scale(.97)}
.dify-ai-state-card button:focus-visible{outline:2px solid var(--aic-brand);outline-offset:2px}

.dify-ai-skeleton{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.dify-ai-skeleton i{
  display:block;height:10px;background:var(--aic-surface);border:1px solid var(--aic-line);
  animation:dify-ai-pulse 1.4s ease-in-out infinite;
}
.dify-ai-skeleton i:nth-child(2){width:82%;animation-delay:.12s}
.dify-ai-skeleton i:nth-child(3){width:64%;animation-delay:.24s}
@keyframes dify-ai-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .dify-ai-skeleton i{animation:none}
  .dify-ai-state-card button{transition:none}
  .dify-ai-state-card button:active{transform:none}
}

@media (max-width:760px){
  .dify-ai-header{flex-direction:column;align-items:flex-start;gap:10px}
  .dify-ai-project{text-align:left}
  .dify-ai-scope-note{
  flex:0 0 auto;display:flex;gap:8px;align-items:flex-start;
  padding:10px 20px;background:var(--aic-brand-soft);
  border-bottom:1px solid var(--aic-line);
  font-size:12.5px;line-height:1.5;color:var(--aic-brand-ink);
}
.dify-ai-scope-note strong{font-weight:650}
/* A shared Knowledge Base means answers may cite another study, which is a
   correctness and confidentiality caveat, not a neutral note. */
.dify-ai-scope-note-shared{
  background:#fef3c7;border-bottom-color:#fcd34d;color:#92400e;
}

.dify-ai-frame-panel{padding:8px 8px 12px}
  .dify-ai-frame-panel > iframe{min-height:680px}
}

/* InsightReel branding footer — replaces Dify "Powered by" */
.dify-ai-brand-footer{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;background:#fff;border-top:1px solid var(--aic-line);
  font-size:12px;color:var(--aic-muted);letter-spacing:.02em;
}
.dify-ai-brand-footer strong{font-weight:650;color:var(--aic-ink)}
.dify-ai-brand-logo{height:18px;width:auto;opacity:.85}

/* The Dify surface owns its own branding and legal chrome. Avoid duplicating
   both again below the iframe, scoped only to the dedicated AI workspace. */
.dify-ai-page .dify-ai-brand-footer{display:none}
body:has(.dify-ai-page) > .footer{display:none}

/* ------------------------------------------------ floating chat bubble --- */

/* embed.min.js creates these two elements in the parent document, so they can
   be corrected from here even though the conversation itself is an iframe.
   The button is created `position: fixed` but the window `position: absolute`,
   which anchors it to the document instead of the viewport: scroll the page and
   the window stays behind at the old scroll offset. It is still toggling on
   each click, just doing so somewhere off-screen. */
#dify-chatbot-bubble-window {
  position: fixed !important;
  bottom: 5rem !important;
  right: 1rem !important;
  left: auto !important;
  top: auto !important;
  max-height: min(72vh, 680px) !important;
  max-width: min(92vw, 420px) !important;
  z-index: 2147483001 !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important;
}

#dify-chatbot-bubble-button {
  position: fixed !important;
  bottom: 1rem !important;
  right: 1rem !important;
  z-index: 2147483002 !important;
}

@media (max-width: 640px) {
  #dify-chatbot-bubble-window {
    bottom: 4.75rem !important;
    right: 0.5rem !important;
    left: 0.5rem !important;
    max-width: none !important;
    max-height: 70vh !important;
  }
}