/* style_simplified.css – Clean Simple UI */

/* ─── BASE STYLES ──────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f5f7fc;
  --fg:#0f1527;
  --accent:#1754ff;
  --accent-2:#2468ff;
  --glass:rgba(255,255,255,.6);
  --blur:14px;
  --radius:16px;
  --shadow:0 4px 24px rgba(0,0,0,.1);
  --scroll:#c3cfe9;
  
  font-size:14px;
  font-family:'Inter',Arial,sans-serif;
}
html,body{height:100%;background:var(--bg);color:var(--fg)}
body{display:flex;flex-direction:column}

.glass{
  background:var(--glass);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  box-shadow:var(--shadow);
}

/* ─── NAV BAR ───────────────────────────────────────────────────── */
.nav{
  height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;background:#fff;border-bottom:1px solid #dde3f4;
}
.brand{font-size:18px;font-weight:600;display:flex;align-items:center;gap:6px}
.logo{font-size:17px}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-actions>*{flex:0 0 auto}

.client-badge{
  background:var(--accent);color:#fff;font-size:13px;padding:6px 12px;
  border-radius:var(--radius);white-space:nowrap;opacity:.9;
}

.action{
  display:flex;align-items:center;gap:6px;border:none;cursor:pointer;
  background:var(--accent);color:#fff;padding:7px 14px;
  font-size:13px;font-weight:600;border-radius:var(--radius);transition:.15s;
}
.action:hover{background:var(--accent-2);transform:translateY(-1px)}
.action i{font-style:normal}

.notice{
  text-align:center;font-size:12px;padding:4px 8px;background:#fff3f4;color:#c13248;
  border-bottom:1px solid #e4b8c2
}

/* ─── WORKSPACE ─────────────────────────────────────────────────── */
.workspace{flex:1;display:flex;min-height:0}
.chat{
  flex:0 0 40%;min-width:260px;display:flex;flex-direction:column;
  padding:14px;gap:10px;background:#fff;border-right:1px solid #e4e9f6
}
.viewer{flex:1;display:flex;flex-direction:column;background:#fafcff;position:relative}

.page-title{font-size:18px;font-weight:600;text-align:left;opacity:.8}

/* ─── MESSAGES ──────────────────────────────────────────────────── */
.messages{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:16px;
  padding-right:6px;scroll-behavior:smooth
}
.messages::-webkit-scrollbar{width:8px}
.messages::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:4px}

.msg{max-width:88%;padding:12px 16px;border-radius:var(--radius);line-height:1.4}
.msg.u {background:var(--accent-2);color:#fff;margin-left:auto;animation:fadeIn .25s}
.msg.ai{background:#fff;animation:fadeIn .25s;max-width:95%}

/* ─── ANSWER CONTENT ───────────────────────────────────────────── */
.answer-content{
  margin-bottom:16px;
  line-height:1.7;
}

.answer-content h3{
  font-size:16px;margin:16px 0 8px;color:var(--accent);
}

.answer-content ul{
  margin:8px 0;padding-left:24px;
}

.answer-content li{
  margin:4px 0;
}

.answer-content strong{
  color:var(--accent);
}

/* ─── SIMPLE REFERENCES ──────────────────────────────────────────── */
.refs-section{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #e4e9f6;
}

.refs-section strong{
  display:block;
  font-size:13px;
  font-weight:600;
  color:#666;
  margin-bottom:6px;
}

.refs-list{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.ref-link{
  display:block;
  padding:6px 10px;
  font-size:13px;
  color:var(--accent);
  text-decoration:none;
  border-left:3px solid transparent;
  transition:all .2s;
  line-height:1.4;
  border-radius:4px;
}

.ref-link:hover{
  background:#f0f4ff;
  border-left-color:var(--accent);
  padding-left:14px;
}

.ref-link.active{
  background:#e8f0ff;
  border-left-color:var(--accent);
  font-weight:600;
}

/* ─── COMPOSER ──────────────────────────────────────────────────── */
.composer{display:flex;gap:12px;padding:10px;border-radius:var(--radius)}
#chat-input{
  flex:1;resize:none;border:1px solid #cfd6ec;border-radius:var(--radius);
  padding:10px;font-size:13px;line-height:1.4;background:#fff;
  transition:border .15s
}
#chat-input:focus{outline:none;border-color:var(--accent)}
#send-btn{
  width:46px;height:46px;border:none;border-radius:50%;background:var(--accent);
  color:#fff;font-size:17px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.15s
}
#send-btn:hover{background:var(--accent-2);transform:translateY(-1px)}
#send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ─── TYPING INDICATOR ──────────────────────────────────────────── */
.typing{display:inline-block}
.typing span{
  display:inline-block;width:6px;height:6px;margin:0 1.5px;border-radius:50%;
  background:var(--accent);animation:blink 1s infinite;
}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}

/* ─── VIEWER ────────────────────────────────────────────────────── */
.viewer{
  min-height:0;overflow:hidden;background:#fbfcff;
  box-shadow:inset 0 0 0 1px #e2e6f4;
}

.viewer-head{
  height:46px;display:flex;justify-content:space-between;align-items:center;
  padding:0 14px;font-size:13px;font-weight:600;border-bottom:1px solid #dde3f4;
}

.viewer-head button{background:none;border:none;font-size:18px;cursor:pointer;opacity:.5;transition:.2s}
.viewer-head button:hover{opacity:1;transform:scale(1.1)}

#doc-title {
  transition: all 0.3s ease;
}

.doc-loading {
  color: #667eea;
  animation: pulse 1.5s ease-in-out infinite;
}

.doc-loading::before {
  content: '⏳ ';
}

.doc-loaded {
  animation: successFlash 0.6s ease-out;
}

.viewer iframe{
  flex:1 1 0%;width:100%;min-height:0;display:block;
  border:0 !important;background:#fff;
  scrollbar-color:#adb8d9 transparent;
  transition: opacity 0.3s ease;
  opacity: 1;
}

.viewer iframe::-webkit-scrollbar{height:8px;width:8px}
.viewer iframe::-webkit-scrollbar-track{background:transparent}
.viewer iframe::-webkit-scrollbar-thumb{background:#adb8d9;border-radius:4px}

/* ─── HISTORY PANEL ─────────────────────────────────────────────── */
.history-pane{
  position:fixed;left:50%;transform:translateX(-50%);
  top:56px;width:360px;max-width:90%;height:0;border-radius:var(--radius);
  overflow:hidden;transition:height .25s ease;z-index:1200;display:flex;flex-direction:column
}
.history-pane.open{height:68vh}
.history-pane header{
  height:46px;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;font-weight:600;border-bottom:1px solid #d7dff3
}
.history-pane header button{background:none;border:none;font-size:18px;cursor:pointer;opacity:.6}
#thread-list{flex:1;overflow-y:auto;padding:12px 14px}
.thread{
  padding:8px;border-radius:var(--radius);font-size:13px;cursor:pointer;
  transition:.2s;display:flex;justify-content:space-between;align-items:center;
}
.thread:hover{background:#eef3ff;transform:translateX(4px)}
.thread.active{background:#dbe5ff}

.thread-delete{
  background:none;border:none;color:#f44336;font-size:16px;
  cursor:pointer;opacity:0;transition:.2s;padding:4px;
}
.thread:hover .thread-delete{opacity:0.7}
.thread-delete:hover{opacity:1!important;transform:scale(1.2)}

/* ─── ANIMATIONS ────────────────────────────────────────────────── */
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes pulse{
  0%, 100%{opacity:1}
  50%{opacity:0.5}
}

@keyframes successFlash{
  0%{color:#4caf50;transform:scale(1)}
  50%{color:#4caf50;transform:scale(1.05)}
  100%{color:inherit;transform:scale(1)}
}

/* ─── FOOTER ────────────────────────────────────────────────────── */
.page-foot{text-align:center;font-size:12px;color:#6d768b;padding:8px}

/* ─── RESPONSIVE ────────────────────────────────────────────────── */
@media(max-width:900px){
  .chat{flex:1}
  .viewer{display:none}
  
  .viewer.visible{
    display:flex;
    position:fixed;
    top:56px;
    left:0;
    right:0;
    bottom:0;
    z-index:1000;
  }
}

/* ─── ICONS ─────────────────────────────────────────────────────── */
.i-history:before{content:"📂"}
.i-plus:before   {content:"＋"}
.i-send:before   {content:"➤"}

/* ─── FOCUS STATES ──────────────────────────────────────────────── */
.ref-link:focus,
.action:focus,
button:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── SMOOTH SCROLL ─────────────────────────────────────────────── */
* {
  scroll-behavior: smooth;
}