/* ==========================================================================
   Lumi chat page — scoped entirely under .lumi-chat-page so nothing here
   leaks into Bootstrap or the rest of the site's global styles (this file
   deliberately never targets bare `button`, `textarea`, `h1`, etc.)
   ========================================================================== */

.lumi-chat-page {
  --bg:#F7F5FA; --card:#ffffff; --accent:#6B46A3; --accent-deep:#4E3878;
  --user:#6B46A3; --bot-bg:#EDE6F5; --bot-text:#2B2140;
  --muted:#6B6178; --ink:#2B2140; --line:#DDD3E8;
  --contest:#C97A2E; --contest-bg:#FBF0E1; --contest-line:#EAD2AC;
  --match:#5B7FA6; --match-bg:#EAF1F8; --match-line:#CFE0EE;
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;

  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  padding-top: 70px; /* clears the site's fixed navbar (50px) with room to spare */
  padding-bottom: 40px;
  min-height: 100vh;
}

.lumi-chat-page .container{max-width:860px;margin:0 auto;padding:24px 20px 32px}

.lumi-chat-page header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.lumi-chat-page .logo{width:46px;height:46px;border-radius:14px 4px 14px 14px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:white;font-family:var(--font-display);font-weight:600;font-size:18px;flex-shrink:0}
.lumi-chat-page h1{font-family:var(--font-display);font-size:21px;font-weight:600;margin:0;color:var(--ink)}
.lumi-chat-page .meta{font-size:13px;color:var(--muted);margin-top:2px}

.lumi-chat-page #messages{background:var(--card);border-radius:16px;padding:16px;height:380px;overflow:auto;border:1px solid var(--line)}
.lumi-chat-page .msg{display:flex;gap:10px;align-items:flex-end;margin:8px 0}
.lumi-chat-page .bubble{max-width:74%;padding:10px 14px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.lumi-chat-page .msg.user{justify-content:flex-end}
.lumi-chat-page .msg.user .bubble{background:var(--user);color:#fff;border-radius:16px 4px 16px 16px}
.lumi-chat-page .msg.bot .bubble{background:var(--bot-bg);color:var(--bot-text);border-radius:4px 16px 16px 16px}
.lumi-chat-page .msg.bot .bubble strong{color:var(--accent-deep)}
.lumi-chat-page .avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:600;flex-shrink:0;font-size:14px}
.lumi-chat-page .avatar.user{background:var(--accent-deep)}
.lumi-chat-page .avatar.bot{background:var(--accent)}
.lumi-chat-page .avatar.general{background:var(--accent)}
.lumi-chat-page .avatar.match{background:var(--match)}
.lumi-chat-page .avatar.contest{background:var(--contest)}

/* Agent buttons */
.lumi-chat-page .quick-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.lumi-chat-page .quick-action{display:inline-flex;align-items:center;gap:7px;background:var(--match-bg);color:var(--match);border:1px solid var(--match-line);font-size:13px;padding:7px 14px;border-radius:12px;cursor:pointer;font-family:var(--font-body);font-weight:500}
.lumi-chat-page .quick-action .agent-icon{flex-shrink:0}
.lumi-chat-page .quick-action:hover{background:#DCE9F3}
.lumi-chat-page .quick-action.active{background:var(--accent);color:#fff;border-color:var(--accent-deep)}
.lumi-chat-page .quick-action.contest-btn{background:var(--contest-bg);color:#8A5A22;border-color:var(--contest-line)}
.lumi-chat-page .quick-action.contest-btn:hover{background:#F5E3C6}
.lumi-chat-page .quick-action.contest-btn.active{background:var(--contest);color:#fff;border-color:#8A5A22}

/* Mentor match panel */
.lumi-chat-page .panel{margin-top:12px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px}
.lumi-chat-page .panel h2{font-family:var(--font-display);font-size:13px;font-weight:600;margin:0 0 10px;color:var(--ink);letter-spacing:0.02em}
.lumi-chat-page .match-card{border:1px solid var(--line);border-radius:14px;padding:12px;background:linear-gradient(180deg,#fff,var(--bg));margin-bottom:8px}
.lumi-chat-page .match-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.lumi-chat-page .match-rank{font-size:12px;font-weight:700;color:var(--accent-deep);background:var(--bot-bg);padding:4px 8px;border-radius:999px}
.lumi-chat-page .match-score{font-size:12px;font-weight:700;color:#3C6B3C}
.lumi-chat-page .match-name{font-size:15px;font-weight:700;margin:4px 0 4px;color:var(--ink)}
.lumi-chat-page .match-meta{font-size:13px;color:var(--muted)}
.lumi-chat-page .match-expl{margin-top:6px;font-size:13px;color:var(--ink);line-height:1.5;opacity:0.85}
.lumi-chat-page .book-state{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--match-bg);color:var(--match);font-size:13px;font-weight:600}

/* Contest problem panel */
.lumi-chat-page .contest-panel{margin-top:12px;border:1px solid var(--contest-line);border-radius:16px;background:var(--contest-bg);padding:14px}
.lumi-chat-page .contest-panel h2{font-family:var(--font-display);font-size:13px;font-weight:600;margin:0 0 12px;color:#8A5A22}
.lumi-chat-page .problem-set-download{margin-bottom:12px;padding:10px 12px;border:1px solid var(--contest-line);border-radius:12px;background:#fff}
.lumi-chat-page .problem-set-download .label{font-size:12px;color:#8A5A22;font-weight:700;margin-bottom:8px}
.lumi-chat-page .problem-set-download a{display:inline-block;background:var(--contest);color:#fff;text-decoration:none;font-size:12px;padding:7px 12px;border-radius:8px;font-weight:600}
.lumi-chat-page .problem-set-download a:hover{background:#8A5A22}

/* Problem card — image-based display */
.lumi-chat-page .problem-card{border:1px solid var(--contest-line);border-radius:14px;background:#fff;margin-bottom:12px;overflow:hidden}
.lumi-chat-page .problem-card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--contest-line);background:#FFF9F0}
.lumi-chat-page .problem-title{font-size:14px;font-weight:700;color:var(--ink)}
.lumi-chat-page .topic-chips{display:flex;gap:5px;flex-wrap:wrap}
.lumi-chat-page .topic-chip{font-size:11px;padding:2px 7px;border-radius:999px;background:#FBE9C6;color:#8A5A22;border:1px solid var(--contest-line);font-weight:600}
.lumi-chat-page .diagram-badge{font-size:11px;padding:2px 7px;border-radius:999px;background:var(--match-bg);color:var(--match);border:1px solid var(--match-line);font-weight:600}

/* The actual PDF page image */
.lumi-chat-page .problem-image-wrap{padding:12px;text-align:center;background:#FAFAF8}
.lumi-chat-page .problem-image-wrap img{max-width:100%;border-radius:8px;box-shadow:0 2px 10px rgba(31,46,41,0.1)}
.lumi-chat-page .problem-loading{padding:24px;text-align:center;color:#8A5A22;font-size:13px}
.lumi-chat-page .problem-error{padding:14px;color:#B3402F;font-size:13px;background:#FBEAE7;border-top:1px solid #F0C9C2}

/* Problem action bar */
.lumi-chat-page .problem-actions{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--contest-line);background:#FFF9F0}
.lumi-chat-page .prob-btn{font-size:12px;padding:5px 11px;border-radius:10px;cursor:pointer;border:1px solid;font-weight:500;font-family:var(--font-body)}
.lumi-chat-page .prob-btn.solution{background:var(--contest-bg);color:var(--contest);border-color:var(--contest-line)}
.lumi-chat-page .prob-btn.solution:hover{background:#F5E3C6}
.lumi-chat-page .prob-btn.solution.active{background:var(--contest);color:#fff;border-color:#8A5A22}
.lumi-chat-page .prob-btn.nav{background:var(--bg);color:var(--muted);border-color:var(--line)}
.lumi-chat-page .prob-btn.nav:hover{background:#EAF0EE}

/* Suggestion chips */
.lumi-chat-page .contest-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.lumi-chat-page .contest-chip{font-size:12px;padding:5px 11px;border-radius:999px;background:var(--contest-bg);color:var(--contest);border:1px solid var(--contest-line);cursor:pointer;font-weight:500}
.lumi-chat-page .contest-chip:hover{background:#F5E3C6}

/* Slot picker — weekly calendar grid */
.lumi-chat-page .slot-picker{margin-top:12px;padding:12px;border-radius:14px;background:var(--match-bg);border:1px solid var(--match-line)}
.lumi-chat-page .slot-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.lumi-chat-page .slot-picker-title{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--match)}
.lumi-chat-page .slot-close-btn{font-size:11px;padding:3px 9px;border-radius:8px;border:1px solid var(--match-line);background:#fff;color:var(--match);cursor:pointer;font-family:var(--font-body)}
.lumi-chat-page .slot-close-btn:hover{background:var(--match-bg)}

/* Calendar table */
.lumi-chat-page .cal-wrap{overflow-x:auto}
.lumi-chat-page .cal-table{width:100%;border-collapse:collapse;min-width:480px;font-size:12px}
.lumi-chat-page .cal-table th{background:var(--match);color:#fff;padding:6px 4px;text-align:center;font-weight:600;white-space:nowrap}
.lumi-chat-page .cal-table th.time-col{background:var(--accent-deep);width:52px}
.lumi-chat-page .cal-table td{border:1px solid var(--match-line);padding:3px;vertical-align:top;min-width:70px;height:32px}
.lumi-chat-page .cal-table td.time-label{background:#fff;color:var(--match);font-weight:600;text-align:right;padding:4px 6px;white-space:nowrap;font-size:11px}
.lumi-chat-page .cal-table tr:nth-child(even) td{background:#F5F9FC}
.lumi-chat-page .cal-table tr:nth-child(even) td.time-label{background:#EAF1F8}

/* Slot cell button */
.lumi-chat-page .slot-cell-btn{width:100%;padding:5px 3px;border-radius:8px;border:1px solid var(--match-line);background:#fff;color:var(--match);font-size:11px;font-weight:600;cursor:pointer;text-align:center;line-height:1.2;transition:background 0.12s;font-family:var(--font-body)}
.lumi-chat-page .slot-cell-btn:hover{background:var(--match-bg)}
.lumi-chat-page .slot-cell-btn.selected{background:var(--match);color:#fff;border-color:var(--match)}
.lumi-chat-page .slot-loading{font-size:13px;color:var(--match);padding:6px 0;text-align:center}

/* Composer */
.lumi-chat-page .composer{display:flex;gap:10px;margin-top:12px}
.lumi-chat-page .composer textarea{flex:1;min-height:60px;border-radius:14px;padding:10px 14px;border:1px solid var(--line);resize:none;font-size:14.5px;font-family:var(--font-body);background:#fff}
.lumi-chat-page .composer textarea:focus,
.lumi-chat-page .quick-action:focus-visible,
.lumi-chat-page .prob-btn:focus-visible,
.lumi-chat-page .composer button:focus-visible{outline:3px solid var(--contest);outline-offset:2px}
.lumi-chat-page .composer button{background:var(--accent);color:white;border:none;padding:10px 18px;border-radius:14px;cursor:pointer;font-size:14px;font-weight:600;font-family:var(--font-body)}
.lumi-chat-page .composer button:hover{background:var(--accent-deep)}
.lumi-chat-page .composer button:active{transform:translateY(1px)}

@media(prefers-reduced-motion: reduce){ .lumi-chat-page *{transition:none !important} }
@media(max-width:640px){.lumi-chat-page .container{padding:16px 12px 24px}}