/* ── Resources Page ──────────────────────────────────────────────────────── */
:root {
  --r-bg:       #F3F4F6;
  --r-surface:  #FFFFFF;
  --r-border:   #D1D5DB;
  --r-text:     #131921;
  --r-muted:    #5C6670;
  --r-accent:   #FF9900;
  --r-blue:     #146EB4;
  --r-shadow:   0 1px 4px rgba(0,0,0,0.08);
  --r-radius:   8px;
  --r-user-bg:  #146EB4;
  --r-user-txt: #FFFFFF;
  --r-bot-bg:   #FFFFFF;
  --r-bot-txt:  #131921;
  --r-pos-bg:   #d4edda;
  --r-pos-txt:  #155724;
}
[data-theme="dark"] {
  --r-bg:       #0F1117;
  --r-surface:  #1A1D27;
  --r-border:   #2D3148;
  --r-text:     #E8EAF0;
  --r-muted:    #8B92A8;
  --r-blue:     #5B9BD5;
  --r-shadow:   0 1px 4px rgba(0,0,0,0.4);
  --r-user-bg:  #1F3A5F;
  --r-user-txt: #E8EAF0;
  --r-bot-bg:   #22263A;
  --r-bot-txt:  #E8EAF0;
  --r-pos-bg:   rgba(21,87,36,0.35);
  --r-pos-txt:  #86efac;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin:0; padding:0;
  background:var(--r-bg); color:var(--r-text);
  font-family:'Amazon Ember',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px; min-height:100vh;
}
.res-page { display:flex; flex-direction:column; height:100vh; overflow:hidden; }

/* ── Header ── */
.res-header {
  height:52px; background:var(--r-surface); border-bottom:1px solid var(--r-border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; gap:10px; flex-shrink:0; box-shadow:var(--r-shadow);
}
.res-header-left  { display:flex; align-items:center; gap:10px; min-width:0; }
.res-header-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.res-title    { font-size:15px; font-weight:700; color:var(--r-text); white-space:nowrap; }
.res-subtitle { font-size:12px; color:var(--r-muted); white-space:nowrap; }

.res-btn {
  padding:5px 12px; border-radius:6px; border:1px solid var(--r-border);
  background:var(--r-surface); color:var(--r-text); font-size:12px; font-weight:600;
  cursor:pointer; transition:all .15s; white-space:nowrap; text-decoration:none;
  display:inline-flex; align-items:center; gap:4px;
}
.res-btn:hover { border-color:var(--r-accent); }
.res-btn-primary { background:var(--r-accent); color:#000; border-color:var(--r-accent); }
.res-btn-primary:hover { opacity:.9; }

.res-theme-toggle {
  padding:5px 8px; border-radius:6px; border:1px solid var(--r-border);
  background:var(--r-surface); font-size:14px; cursor:pointer; transition:all .15s;
}

/* Auth badge */
.res-auth-badge { padding:3px 10px; border-radius:10px; font-size:11px; font-weight:700; }
.res-auth-ok      { background:var(--r-pos-bg); color:var(--r-pos-txt); }
.res-auth-unknown { background:rgba(100,100,100,.1); color:var(--r-muted); }
.res-auth-needed  { background:rgba(200,100,0,.15); color:#b45309; }

/* ── Main ── */
.res-main {
  flex:1; min-height:0;
  padding:12px;
  display:flex; flex-direction:column;
  overflow:hidden;
}

/* ── Auth Panel ── */
.res-auth-panel { display:flex; align-items:center; justify-content:center; flex:1; }
.res-auth-card {
  background:var(--r-surface); border:1px solid var(--r-border);
  border-radius:12px; padding:40px 36px; max-width:480px; width:100%;
  text-align:center; box-shadow:var(--r-shadow);
}
.res-auth-icon  { font-size:48px; margin-bottom:12px; }
.res-auth-title { font-size:18px; font-weight:700; margin-bottom:10px; }
.res-auth-body  { font-size:13px; color:var(--r-muted); line-height:1.6; margin-bottom:24px; }

/* ── Content wrapper — must fill remaining height ── */
#res-loading,
#res-auth-panel,
#res-content { flex:1; min-height:0; display:flex; flex-direction:column; }

/* ── Layout row ── */
.res-layout {
  flex:1; min-height:0;
  display:flex; gap:12px;
}

/* ── Chat panel ── */
.res-chat-panel {
  flex:1; min-width:0; min-height:0;
  display:flex; flex-direction:column;
  background:var(--r-bg);
  overflow:hidden;
}


.res-chat-messages {
  flex:1; overflow-y:auto;
  padding:16px 20px 12px;
  display:flex; flex-direction:column; gap:16px;
}

/* Welcome — lives inside the message area, hidden once chat starts */
.res-welcome {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:40px 24px;
  flex:1;                /* pushes input to bottom when welcome visible */
}
.res-welcome.hidden { display:none; }

.res-welcome-icon  { font-size:42px; margin-bottom:12px; }
.res-welcome-title { font-size:20px; font-weight:700; margin-bottom:8px; }
.res-welcome-body  { font-size:13px; color:var(--r-muted); line-height:1.6; max-width:440px; margin:0 auto 20px; }
.res-starters { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:560px; }
.res-starter {
  padding:7px 14px; border-radius:20px; border:1px solid var(--r-border);
  background:var(--r-surface); color:var(--r-blue); font-size:13px; cursor:pointer;
  transition:all .15s;
}
.res-starter:hover { background:#EAF4FF; border-color:var(--r-blue); }



/* Messages — avatar + bubble layout matching platform chat */
.res-msg {
  display:flex; gap:10px; max-width:100%;
}
.res-msg-user { flex-direction:row-reverse; }
.res-msg-bot  { flex-direction:row; }

.res-msg-avatar {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
}
.res-msg-bot  .res-msg-avatar { background:#E8F4FF; }
.res-msg-user .res-msg-avatar { background:#FFF3E0; }

.res-bubble {
  max-width:calc(100% - 48px);
  padding:12px 16px; border-radius:12px;
  font-size:14px; line-height:1.6;
  white-space:pre-wrap; word-break:break-word;
}
.res-msg-user .res-bubble {
  background:var(--r-user-bg); color:var(--r-user-txt);
  border-top-right-radius:4px;
}
.res-msg-bot .res-bubble {
  background:var(--r-surface); color:var(--r-bot-txt);
  border:1px solid var(--r-border);
  border-top-left-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.res-bubble a { color:var(--r-blue); }
.res-bubble strong { font-weight:700; }

/* Typing dots */
.res-typing-dots { display:flex; gap:4px; }
.res-typing-dots span {
  width:7px; height:7px; border-radius:50%; background:var(--r-muted);
  animation:r-bounce .9s infinite;
}
.res-typing-dots span:nth-child(2) { animation-delay:.15s; }
.res-typing-dots span:nth-child(3) { animation-delay:.30s; }
@keyframes r-bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }
@keyframes r-spin   { to { transform:rotate(360deg); } }
@keyframes r-skel   { 0%,100% { opacity:.4; } 50% { opacity:.9; } }

/* Input area — matches platform chat pill style */
.res-chat-input-area {
  position:sticky; bottom:0;
  background:var(--r-bg);
  padding:10px 20px 18px;
  flex-shrink:0;
}
.res-chat-input-row {
  display:flex; gap:10px;
  background:var(--r-surface);
  border:1px solid var(--r-border);
  border-radius:12px;
  padding:10px 10px 10px 16px;
  box-shadow:var(--r-shadow);
  transition:border-color .15s;
}
.res-chat-input-row:focus-within { border-color:var(--r-blue); }
.res-chat-input {
  flex:1; border:none; outline:none;
  font-size:14px; font-family:inherit;
  resize:none; background:none;
  color:var(--r-text); line-height:1.5;
  max-height:120px; overflow-y:auto;
}
.res-send-btn {
  width:38px; height:38px; border-radius:8px; border:none;
  background:var(--r-blue); color:#fff; font-size:16px;
  cursor:pointer; flex-shrink:0; transition:background .15s;
  display:flex; align-items:center; justify-content:center;
  align-self:flex-end;
}
.res-send-btn:hover:not(:disabled) { background:#0f5a96; }
.res-send-btn:disabled { background:#ccc; cursor:not-allowed; }
.res-chat-disclaimer { font-size:11px; color:#aaa; text-align:center; margin-top:8px; }

/* ── Docs Panel ── */
.res-docs-panel {
  width:360px; flex-shrink:0; min-height:0;
  display:flex; flex-direction:column;
  background:var(--r-surface); border:1px solid var(--r-border);
  border-radius:var(--r-radius); overflow:hidden;
}
.res-docs-header {
  padding:10px 14px; border-bottom:1px solid var(--r-border);
  font-size:13px; font-weight:700; display:flex; align-items:center;
  justify-content:space-between; flex-shrink:0;
}
.res-docs-count { font-weight:400; color:var(--r-muted); font-size:12px; }
.res-docs-list  { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:6px; }
.res-docs-empty { font-size:13px; color:var(--r-muted); text-align:center; padding:30px 10px; }

/* Doc cards */
.res-doc-card {
  padding:10px 12px; border-radius:6px; border:1px solid var(--r-border);
  background:var(--r-bg); transition:border-color .15s;
}
.res-doc-card:hover { border-color:var(--r-blue); }
.res-doc-top    { display:flex; align-items:flex-start; gap:8px; margin-bottom:5px; }
.res-doc-icon   { font-size:20px; flex-shrink:0; margin-top:1px; }
.res-doc-name   { font-size:13px; font-weight:600; line-height:1.3; }
.res-doc-name a { color:var(--r-blue); text-decoration:none; }
.res-doc-name a:hover { text-decoration:underline; }
.res-doc-meta   { font-size:11px; color:var(--r-muted); margin-bottom:4px; }
.res-doc-path   { font-size:11px; color:var(--r-muted); opacity:.7; margin-bottom:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.res-doc-summary { font-size:12px; color:var(--r-muted); line-height:1.5; }
.res-doc-type-badge {
  display:inline-block; padding:1px 6px; border-radius:4px; font-size:10px;
  font-weight:700; background:rgba(46,117,182,.12); color:var(--r-blue);
  margin-left:6px; vertical-align:middle;
}

/* Skeletons */
.res-doc-skeleton {
  padding:10px 12px; border-radius:6px; border:1px solid var(--r-border);
  background:var(--r-bg);
}
.res-skel-line {
  height:10px; border-radius:4px; background:var(--r-border);
  animation:r-skel 1.4s ease-in-out infinite;
}

/* ── Utilities ── */
.res-center { display:flex; align-items:center; justify-content:center; flex:1; min-height:0; }
.res-spinner {
  width:32px; height:32px; border:3px solid var(--r-border);
  border-top-color:var(--r-accent); border-radius:50%;
  animation:r-spin .8s linear infinite;
}
.res-auth-reason { font-size:11px; color:var(--r-muted); margin-top:12px; }

/* Breadcrumb */
.res-breadcrumb {
  padding:6px 10px; border-bottom:1px solid var(--r-border);
  font-size:12px; display:flex; align-items:center; gap:4px;
  flex-wrap:wrap; flex-shrink:0;
}
.res-crumb {
  color:var(--r-blue); cursor:pointer; padding:1px 4px;
  border-radius:3px; transition:background .1s;
}
.res-crumb:hover { background:var(--r-border); }
.res-crumb-active { color:var(--r-text); cursor:default; font-weight:600; }
.res-crumb-sep { color:var(--r-muted); }

/* Folder cards */
.res-doc-card-folder { cursor:pointer; }
.res-doc-card-folder:hover { background:var(--r-surface); border-color:var(--r-accent); }