/* ==========================================
   DRILLBIT GUIDE ANIMATIONS v3
   AI content exclude & include (pro/user)
   ========================================== */

/* === CONTAINER === */
.guide-anim{border:1px solid #e2e2e0;border-radius:16px;overflow:hidden;margin:28px 0 32px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,0.04)}
.ga-slides{position:relative}
.ga-slide{display:none}
.ga-slide.active{display:block}

.guide-anim{position:relative;z-index:0;overflow:hidden;border-radius:14px;margin-bottom:24px;border:1px solid #e5e5e0;background:#fff}

/* === VIEWPORT (animation stage) === */
.ga-viewport{position:relative;height:340px;overflow:hidden;background:#eceae6}

/* === INFO === */
.ga-info{padding:18px 22px 14px;font-family:var(--db-font,system-ui,sans-serif)}
.ga-step-badge{display:inline-block;font-size:10px;font-weight:700;color:#1967D2;background:#E8F0FE;padding:4px 12px;border-radius:20px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.8px}
.ga-info h3{font-size:16px;font-weight:600;margin-bottom:4px;color:#1a1a1a;text-align:left;hyphens:manual;-webkit-hyphens:manual}
.ga-info p{font-size:13px;color:#6b6b6b;line-height:1.55;margin:0;text-align:left;hyphens:manual;-webkit-hyphens:manual;word-spacing:normal}

/* === CONTROLS === */
.ga-controls{display:none}
.ga-viewport{cursor:pointer;position:relative}
.ga-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
.ga-overlay.on{opacity:1;pointer-events:auto}
.ga-overlay-btn{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ga-overlay-btn svg{width:22px;height:22px;color:#333;margin-left:3px}
.ga-reset-float{position:absolute;bottom:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:201;opacity:0;pointer-events:none;transition:opacity .25s ease}
.ga-reset-float.on{opacity:1;pointer-events:auto}
.ga-reset-float svg{width:13px;height:13px;color:#333}
.ga-progress{height:3px;background:#eee;border-radius:2px}
.ga-progress-bar{height:100%;background:#4285f4;transition:width .5s ease;border-radius:2px}

/* === CURSOR === */
.ga-cursor{position:absolute;width:20px;height:24px;z-index:100;pointer-events:none;opacity:0;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.25))}
.ga-cursor.vis{opacity:1}

/* === SCENE: each phase lives in a .sc layer === */
.sc{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease;font-family:var(--db-font,system-ui,sans-serif)}
.sc.on{opacity:1;pointer-events:auto}

/* ---- FULL DASHBOARD SHELL (submissions scene) ---- */
.sc-dashfull{background:#fff;display:flex}
.df-side{width:115px;background:#fafafc;border-right:1px solid #eee;padding:12px 0;display:flex;flex-direction:column;gap:1px}
.df-side-logo{display:flex;align-items:center;gap:5px;padding:0 12px 14px}
.df-side-logo i{width:18px;height:18px;background:#4285f4;border-radius:5px;display:block}
.df-side-logo span{font-size:12px;font-weight:600;color:#1a1a1a}
.df-nav{padding:8px 12px;font-size:10px;color:#999;display:flex;align-items:center;gap:7px;margin-right:6px;border-radius:0 7px 7px 0}
.df-nav i{width:14px;height:14px;border-radius:4px;background:currentColor;opacity:.2;display:block}
.df-nav.act{background:#4285f4;color:#fff;font-weight:600}
.df-nav.act i{opacity:.5}
.df-body{flex:1;padding:10px 14px;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}
.df-body::-webkit-scrollbar{display:none}
.df-top{display:flex;justify-content:flex-end;align-items:center;gap:7px;margin-bottom:8px}
.df-uname{font-size:10px;color:#888}
.df-uname b{color:#333}
.df-av{width:28px;height:28px;border-radius:50%;background:#9c5fff;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.df-panel{border:1px solid #eee;border-radius:10px;padding:10px;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;position:relative;overflow:hidden}
.df-panel.pop{opacity:1;transform:translateY(0)}

/* Blur overlay + tooltip */
.df-blur-overlay{position:absolute;inset:0;background:rgba(255,255,255,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:10;opacity:0;pointer-events:none;transition:opacity .3s ease}
.df-blur-overlay.on{opacity:1}
.df-tooltip{position:absolute;background:#fffef5;color:#333;font-size:9px;padding:8px 12px;border-radius:8px;z-index:30;opacity:0;pointer-events:none;transition:opacity .3s ease;white-space:normal;font-family:var(--db-font,system-ui,sans-serif);line-height:1.5;max-width:220px;letter-spacing:.2px;box-shadow:0 4px 20px rgba(0,0,0,.12);border:1px solid #f0e8c8}
.df-tooltip.on{opacity:1}
.df-tooltip::after{content:'';position:absolute;top:-5px;left:20px;width:10px;height:10px;background:#fffef5;transform:rotate(45deg);border-radius:2px;border-left:1px solid #f0e8c8;border-top:1px solid #f0e8c8}

/* Generic highlight lift (above blur) */
.air-hl{box-shadow:0 0 0 3px rgba(66,133,244,.25);border-radius:4px;position:relative;z-index:15;background:#fff}

/* ---- SUBMISSIONS TABLE (ais) ---- */
.ais-row{opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}

/* ---- AI REPORT SCENE (air) ---- */
.sc-aireport{background:#fff;display:flex;flex-direction:column;font-family:var(--db-font,system-ui,sans-serif)}
.air-top{display:flex;align-items:center;padding:5px 10px;border-bottom:1px solid #e0e0e0;flex-shrink:0}
.air-meta{font-size:7px;color:#555;padding:3px 10px;border-bottom:1px solid #f0f0f0;background:#fafafa;flex-shrink:0}
.air-body{display:flex;flex:1;overflow:hidden}
.air-doc{flex:1;padding:8px 12px;overflow-y:auto;border-right:1px solid #eee;-ms-overflow-style:none;scrollbar-width:none}
.air-doc::-webkit-scrollbar{display:none}
.air-side{width:245px;padding:8px;flex-shrink:0;overflow-y:auto;display:flex;flex-direction:column;-ms-overflow-style:none;scrollbar-width:none}
.air-side::-webkit-scrollbar{display:none}
.air-simbox{font-size:7.5px;background:#eaf1fd;border-radius:5px;padding:4px 8px;margin-bottom:8px;color:#333;display:flex;justify-content:space-between;align-items:center}
.air-ai-panel{display:flex;align-items:center;gap:8px;border:1px solid #f0f0f0;border-radius:8px;padding:8px;margin-bottom:6px}
.air-circle{width:56px;height:56px;border:4px solid #26c6da;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto;opacity:0;transform:scale(.8);transition:opacity .5s,transform .5s;flex-shrink:0}
.air-circle.pop{opacity:1;transform:scale(1)}
.air-score{font-size:13px;font-weight:700;color:#1a1a1a}
.air-circle span{font-size:6px;color:#888}
.air-ai-desc{flex:1;font-size:6.5px;color:#555;line-height:1.6}
.air-ai-desc u{color:#1a56db;display:block;text-align:right;margin-top:2px}

/* Tabs: matched / excluded switch via .air-view-excluded on the scene */
.air-tabs{display:flex;gap:4px;margin:6px 0 4px}
.air-tab{flex:1;text-align:center;font-size:7px;padding:5px 0;font-weight:600;border-radius:6px;transition:background .3s,color .3s}
.air-tab-matched{background:#1a56db;color:#fff}
.air-tab-excluded{background:#f1f3f6;color:#555}
.air-view-excluded .air-tab-matched{background:#f1f3f6;color:#555}
.air-view-excluded .air-tab-excluded{background:#1a56db;color:#fff}

.air-thead{display:flex;font-size:6px;color:#777;font-weight:600;padding:3px 0;border-bottom:1px solid #eee}
.air-th-inc{display:none}
.air-view-excluded .air-th-exc{display:none}
.air-view-excluded .air-th-inc{display:inline}

.air-matched-list{display:block}
.air-excluded-list{display:none}
.air-view-excluded .air-matched-list{display:none}
.air-view-excluded .air-excluded-list{display:block}

.air-row{display:flex;align-items:center;font-size:7px;color:#333;padding:2px 0;border-bottom:1px solid #f5f5f5;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.air-row.pop{opacity:1;transform:translateY(0)}
.air-row.gone{display:none}
.air-c1{width:30px}
.air-c2{width:52px;text-align:center}
.air-c3{width:40px;text-align:center}
.air-c4{width:58px;text-align:center}
.air-c5{flex:1;display:flex;justify-content:center}
.air-arrow{width:13px;height:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:700;line-height:1}
.air-arrow.excl{background:#2e9e5b}
.air-arrow.incl{background:#e14b4b}
.air-empty{display:none;font-size:7.5px;color:#777;text-align:center;padding:10px 0;background:#f7f7f7;border-radius:4px;margin-top:2px}
.air-empty.on{display:block}

/* Confirm dialog */
.air-dialog{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:225px;background:#fff;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.2);padding:14px;z-index:40;opacity:0;pointer-events:none;transition:opacity .3s}
.air-dialog.on{opacity:1}
.air-dlg-x{position:absolute;top:6px;right:10px;color:#aaa;font-size:11px}
.air-dlg-txt{font-size:9px;color:#333;text-align:center;margin:6px 0 12px;line-height:1.5}
.air-dlg-btns{display:flex;justify-content:center;gap:10px}
.air-btn{padding:5px 16px;border-radius:5px;font-size:8.5px;font-weight:600;transition:transform .15s;cursor:default}
.air-btn-no{border:1px solid #bcd0f7;color:#1a56db;background:#fff}
.air-btn-yes{background:#1a56db;color:#fff}
.air-btn.press{transform:scale(.9)}

/* Success toast */
.air-toast{position:absolute;top:8px;right:8px;background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.15);padding:8px 24px 8px 10px;display:flex;align-items:center;gap:6px;z-index:50;opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s;pointer-events:none}
.air-toast.on{opacity:1;transform:translateY(0)}
.air-toast-txt{font-size:8.5px;color:#333}
.air-check{width:14px;height:14px;border-radius:50%;background:#1d9e75;color:#fff;display:flex;align-items:center;justify-content:center;font-size:8px;flex-shrink:0}
.air-toast-x{position:absolute;top:4px;right:7px;color:#aaa;font-size:9px}

/* === RESPONSIVE === */
@media(max-width:640px){
  .ga-viewport{height:280px}
  .df-side{width:80px}
  .air-side{width:200px}
}