/* ============================================================
   Alu Terminal — Design System v2
   角色驱动配色：深蓝星空 + 樱花粉（主）/ 冰蓝（辅）/ 琥珀（暖）
   阿露 = 水手服少女 + 代码终端
   ============================================================ */

/* ── Design Tokens ── */
:root {
  /* Background layers (deep space navy) */
  --alu-bg:         #080c18;
  --alu-bg-raised:  #0e1220;
  --alu-surface:    #111828;
  --alu-hover:      #1a2236;
  --alu-active:     #1c2438;

  /* Borders */
  --alu-border:         #1c2638;
  --alu-border-light:   #243040;
  --alu-border-focus:   #3c4c62;

  /* Text hierarchy */
  --alu-text:           #dce8f4;
  --alu-text-dim:       #8898b0;
  --alu-text-muted:     #505a6a;
  --alu-text-faint:     #303848;

  /* Accents — from Alu's character design */
  --alu-pink:           #f472b6;
  --alu-pink-dim:       #c054a0;
  --alu-pink-bg:        #1e0f20;
  --alu-pink-border:    #4a1e3a;
  --alu-pink-glow:      rgba(244, 114, 182, 0.25);

  --alu-blue:           #7ec8e0;
  --alu-blue-dim:       #5aaac8;
  --alu-blue-bg:        #0e1c28;
  --alu-blue-border:    #1c3040;

  --alu-amber:          #fbbf24;
  --alu-amber-dim:      #d09020;

  --alu-rose:           #f87171;
  --alu-rose-dim:       #d05050;
  --alu-rose-bg:        #1e0f10;
  --alu-rose-border:    #4a1820;

  --alu-mint:           #34d399;

  /* User message bubble */
  --alu-user-bg:        #1c0e18;
  --alu-user-border:    #3e1830;
  --alu-user-text:      #d8c0cc;

  /* Navbar */
  --alu-nav-bg:         #0c1020;
  --alu-nav-border:     #1a2436;
  --alu-nav-height:     68px;

  /* Bottom bar */
  --alu-bar-height:     44px;
}

/* ── 语义工具类 ── */
.text-token-danger { color: var(--alu-rose) !important; }
.text-token-warn   { color: var(--alu-amber) !important; }

/* ── 终端字体 ── */
body.alu-terminal-body {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Menlo', monospace;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  background: radial-gradient(ellipse at 50% 0%, #141e30 0%, #080c18 60%);
  font-size: 14px;
}

/* ── 星空粒子背景 ── */
body.alu-terminal-body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.80) 0.8px, transparent 0.8px),
    radial-gradient(circle, rgba(200,220,255,0.70) 0.8px, transparent 0.8px),
    radial-gradient(circle, rgba(255,255,255,0.72) 0.7px, transparent 0.7px),
    radial-gradient(circle, rgba(255,255,255,0.50) 0.5px, transparent 0.5px),
    radial-gradient(circle, rgba(200,210,255,0.48) 0.5px, transparent 0.5px),
    radial-gradient(circle, rgba(255,255,255,0.50) 0.5px, transparent 0.5px),
    radial-gradient(circle, rgba(255,255,255,0.46) 0.5px, transparent 0.5px),
    radial-gradient(circle, rgba(200,220,255,0.50) 0.5px, transparent 0.5px),
    radial-gradient(circle, rgba(255,255,255,0.45) 0.5px, transparent 0.5px),
    radial-gradient(circle, rgba(255,255,255,0.50) 0.5px, transparent 0.5px),
    radial-gradient(circle, rgba(255,255,255,0.48) 0.5px, transparent 0.5px),
    radial-gradient(circle, rgba(255,255,255,0.30) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(255,255,255,0.28) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(255,255,255,0.32) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(255,255,255,0.28) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(255,255,255,0.30) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(255,255,255,0.26) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(255,255,255,0.30) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(200,210,255,0.28) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(255,255,255,0.32) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(255,255,255,0.25) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(255,255,255,0.28) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(255,255,255,0.30) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(200,220,255,0.26) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(255,255,255,0.28) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(255,255,255,0.24) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(255,255,255,0.28) 0.4px, transparent 0.4px),
    radial-gradient(circle, rgba(200,210,255,0.26) 0.4px, transparent 0.4px);
  background-position:
    45% 30%,  67% 45%,  22% 70%,
     5% 10%,  70% 20%,  88% 82%,  62% 52%,  10% 78%,  78% 45%,  40% 72%,  24% 48%,
    12% 25%,  20%  5%,  32% 18%,  58%  8%,  85% 12%,  92% 35%,   3% 50%,
    15% 65%,  28% 58%,  55% 80%,  68% 90%,  80% 75%,  95% 60%,  25% 88%,
    50% 95%,  72% 28%,  48% 14%;
  background-size:
    1px 1px, 1px 1px, 1px 1px,
    1px 1px, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 1px 1px,
    1px 1px, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 1px 1px,
    1px 1px, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 1px 1px,
    1px 1px, 1px 1px, 1px 1px;
  background-repeat: no-repeat;
}

/* ── 滚动条 ── */
body.alu-terminal-body ::-webkit-scrollbar { width: 4px; }
body.alu-terminal-body ::-webkit-scrollbar-track { background: transparent; }
body.alu-terminal-body ::-webkit-scrollbar-thumb { background: var(--alu-border); border-radius: 2px; }
body.alu-terminal-body ::-webkit-scrollbar-thumb:hover { background: var(--alu-border-focus); }

/* ═══════════════════════════════════════════════════════
   导航栏 (顶部)
   ═══════════════════════════════════════════════════════ */

.alu-navbar {
  height: var(--alu-nav-height);
  background: var(--alu-nav-bg);
  border-bottom: 1px solid var(--alu-nav-border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.alu-navbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.alu-navbar-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--alu-pink-border);
  box-shadow: 0 0 12px rgba(244, 114, 182, 0.45), 0 0 32px rgba(244, 114, 182, 0.14);
  transition: box-shadow 0.3s;
}
.alu-navbar-avatar:hover {
  box-shadow: 0 0 20px rgba(244, 114, 182, 0.65), 0 0 48px rgba(244, 114, 182, 0.22);
}

.alu-navbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.alu-nav-workspace {
  color: var(--alu-text-dim);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.alu-nav-sep {
  color: var(--alu-text-faint);
  font-size: 15px;
}
.alu-nav-session {
  color: var(--alu-text);
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

.alu-navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.alu-nav-stats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}

.alu-nav-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--alu-border-light);
  background: rgba(16, 22, 35, 0.8);
  color: var(--alu-text-dim);
  font-size: 11px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.alu-nav-selector {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--alu-border-light);
  background: rgba(20, 28, 46, 0.8);
  color: var(--alu-text-dim);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  min-width: 140px;
}
.alu-nav-selector:hover {
  border-color: var(--alu-pink-border);
  color: var(--alu-pink);
  background: var(--alu-pink-bg);
  box-shadow: 0 0 10px rgba(244, 114, 182, 0.18);
}
.alu-nav-selector-icon {
  opacity: 0.75;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.alu-nav-selector-label {
  color: var(--alu-text-muted);
  font-size: 12px;
}
.alu-nav-selector-value {
  color: var(--alu-text);
  font-weight: 600;
  flex: 1;
}
.alu-nav-selector:hover .alu-nav-selector-label,
.alu-nav-selector:hover .alu-nav-selector-value {
  color: var(--alu-pink);
}
.alu-nav-selector-arrow {
  color: var(--alu-text-muted);
  font-size: 11px;
  margin-left: 2px;
}

.alu-nav-hamburger {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1.5px solid var(--alu-border-light);
  background: rgba(20, 28, 46, 0.8);
  color: var(--alu-text-dim);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s;
}
.alu-nav-hamburger:hover {
  background: var(--alu-hover);
  border-color: var(--alu-border-focus);
  color: var(--alu-text);
}

/* ═══════════════════════════════════════════════════════
   输出区
   ═══════════════════════════════════════════════════════ */

.alu-output {
  padding: 28px 56px 40px;
}

/* ═══════════════════════════════════════════════════════
   消息系统
   ═══════════════════════════════════════════════════════ */

/* Assistant 消息行：头像 + 内容 */
.alu-msg-assistant-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 20px 0;
  max-width: 100%;
}
.alu-msg-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 0;
  border: 2px solid var(--alu-pink-border);
  box-shadow: 0 0 12px rgba(244, 114, 182, 0.35), 0 0 28px rgba(244, 114, 182, 0.10);
}
.alu-msg-assistant-content {
  flex: 1;
  min-width: 0;
}
.alu-msg-assistant-body {
  background: rgba(20, 30, 52, 0.82);
  border: 1px solid #253050;
  border-radius: 0 14px 14px 14px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.7;
}

/* 用户消息 — 右对齐卡片 */
.msg-user {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}
.msg-user-bubble {
  max-width: 72%;
  background: var(--alu-user-bg);
  border: 1px solid var(--alu-user-border);
  border-radius: 14px 14px 0 14px;
  padding: 14px 18px 10px;
  font-size: 14px;
  line-height: 1.7;
}
.msg-user-top {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.msg-user-prefix {
  color: var(--alu-amber);
  font-weight: 600;
  opacity: 0.85;
  flex-shrink: 0;
  margin-top: 1px;
}
.msg-user-text {
  color: var(--alu-user-text);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}
.msg-timestamp {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
  color: var(--alu-text-faint);
  font-size: 10px;
  opacity: 0.7;
}
.msg-assistant-timestamp {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
  padding: 0 2px;
  color: var(--alu-text-faint);
  font-size: 10px;
  opacity: 0.65;
}

.msg-assistant {
  color: var(--alu-text);
  word-break: break-word;
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.7;
}

.msg-text { word-break: break-word; }

.msg-error {
  color: var(--alu-rose);
  font-size: 12px;
  padding: 2px 6px;
  background: rgba(248, 113, 113, 0.05);
  border-radius: 4px;
}

.msg-notice {
  color: var(--alu-text-muted);
  font-size: 11px;
  padding: 1px 4px;
}

/* ── Markdown 渲染 ── */
.msg-text                 { font-size: 14px; line-height: 1.7; }
.msg-text p               { margin-bottom: 0.5em; }
.msg-text p:last-child    { margin-bottom: 0; }
.msg-text strong          { color: var(--alu-text); font-weight: 600; }
.msg-text em              { font-style: italic; color: var(--alu-text-dim); }
.msg-text code            { background: var(--alu-active); padding: 1px 6px; border-radius: 4px; font-size: 0.86em; color: var(--alu-pink); border: 1px solid var(--alu-border); }
.msg-text pre             { margin: 8px 0; }
.msg-text pre code        { background: none; padding: 0; color: var(--alu-text-dim); font-size: 0.88em; border: none; }
.msg-text ul, .msg-text ol { padding-left: 1.5em; margin: 0.4em 0; }
.msg-text li              { margin-bottom: 0.25em; }
.msg-text h1, .msg-text h2, .msg-text h3, .msg-text h4 {
  font-weight: 600;
  margin: 0.9em 0 0.4em;
  color: var(--alu-text);
}
.msg-text h1   { font-size: 1.2em; }
.msg-text h2   { font-size: 1.12em; }
.msg-text h3   { font-size: 1.05em; }
.msg-text blockquote {
  border-left: 2px solid var(--alu-pink);
  color: var(--alu-text-muted);
  margin: 6px 0;
  background: var(--alu-pink-bg);
  border-radius: 0 4px 4px 0;
  padding: 4px 10px;
}
.msg-text a { color: var(--alu-blue); text-decoration: underline; }
.msg-text a:hover { color: var(--alu-pink); }
.msg-text hr { border: none; border-top: 1px solid var(--alu-border); margin: 10px 0; }
.msg-text table { border-collapse: collapse; margin: 6px 0; width: 100%; }
.msg-text th, .msg-text td {
  border: 1px solid var(--alu-border);
  padding: 5px 10px;
  text-align: left;
  font-size: 0.92em;
}
.msg-text th { background: var(--alu-active); color: var(--alu-text-dim); }

/* ── Code block with language header ── */
.code-block-wrap {
  border: 1px solid #253050;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 0;
  background: #0a0f1e;
}
.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px;
  background: #111828;
  border-bottom: 1px solid #1e2e48;
}
.code-lang {
  color: var(--alu-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.code-copy-btn {
  color: var(--alu-text-muted);
  font-size: 11px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.code-copy-btn:hover { color: var(--alu-blue); }
.code-block-pre {
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0;
  background: #0a0f1e;
}
.code-block-pre code {
  background: none;
  padding: 0;
  color: #c9d8f0;
  font-size: 13px;
  border: none;
  line-height: 1.65;
}

/* ── Thinking 折叠 ── */
.msg-thinking {
  color: var(--alu-text-muted);
  font-style: italic;
  border-left: 2px solid var(--alu-blue-border);
  padding-left: 10px;
  margin: 4px 0;
  font-size: 12px;
}
.msg-thinking summary {
  cursor: pointer;
  color: var(--alu-text-muted);
  font-size: 11px;
}
.msg-thinking summary:hover { color: var(--alu-blue-dim); }
.think-content {
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 4px;
}

/* ── Tool calls ── */
.msg-toolcall { font-size: 12px; }
.msg-toolcall details summary {
  color: var(--alu-text-muted);
  font-size: 11px;
  cursor: pointer;
}
.msg-toolcall details summary:hover { color: var(--alu-text-dim); }
.tool-name { color: var(--alu-amber); }
.msg-tool-output {
  color: var(--alu-text-muted);
  background: var(--alu-bg);
  padding: 5px 10px;
  border-radius: 4px;
  margin: 3px 0;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 11px;
  border: 1px solid var(--alu-border);
}

/* ── show_image 工具：内联图片 ── */
.msg-tool-image-container {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--alu-border);
  display: inline-block;
}
.msg-tool-image {
  display: block;
  cursor: pointer;
  transition: opacity 0.2s;
}
.msg-tool-image:hover {
  opacity: 0.92;
}

/* ═══════════════════════════════════════════════════════
   输入区
   ═══════════════════════════════════════════════════════ */

.alu-input-section {
  position: relative;
  z-index: 10;
  background: var(--alu-nav-bg);
  border-top: 1px solid var(--alu-nav-border);
  flex-shrink: 0;
  padding: 0 16px;
}

.alu-input-wrap {
  display: flex;
  align-items: flex-end;
  border: 2px solid var(--alu-border-light);
  border-radius: 20px;
  margin: 16px 0 0;
  padding: 12px 10px 12px 20px;
  background: var(--alu-surface);
  transition: border-color 0.2s, box-shadow 0.2s;
  gap: 10px;
}
.alu-input-wrap:focus-within {
  border-color: var(--alu-pink);
  box-shadow:
    0 0 0 4px rgba(244, 114, 182, 0.10),
    0 0 32px rgba(244, 114, 182, 0.10),
    inset 0 0 24px rgba(244, 114, 182, 0.03);
}
.alu-input-wrap textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none !important;
  box-shadow: none !important;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--alu-text);
  line-height: 1.6;
  padding: 4px 0;
  max-height: 200px;
  min-height: 28px;
}
.alu-input-wrap textarea::placeholder {
  color: var(--alu-text-muted);
  opacity: 0.7;
}

/* 发送按钮 */
.alu-send-btn {
  flex-shrink: 0;
  padding: 10px 24px;
  background: linear-gradient(135deg, #c8386e 0%, #a02858 100%);
  border: none;
  color: #fce8f0;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 14px rgba(200, 56, 110, 0.40);
}
.alu-send-btn:hover {
  background: linear-gradient(135deg, #dc4880 0%, #b83468 100%);
  box-shadow: 0 4px 24px rgba(220, 72, 128, 0.50);
  transform: translateY(-1px);
}
.alu-send-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(200, 56, 110, 0.32);
}

/* ═══════════════════════════════════════════════════════
   底部工具栏
   ═══════════════════════════════════════════════════════ */

.alu-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  height: var(--alu-bar-height);
  border-top: 1px solid var(--alu-nav-border);
}

.alu-bottom-bar-left {
  display: flex;
  align-items: center;
  gap: 2px;
}

.alu-bottom-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.alu-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--alu-text-muted);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.alu-bar-btn:hover {
  background: var(--alu-hover);
  color: var(--alu-text-dim);
}
.alu-bar-btn kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 4px;
  border: 1px solid var(--alu-border-light);
  border-radius: 3px;
  font-size: 10px;
  font-family: inherit;
  line-height: 1.3;
  color: inherit;
}
.alu-bar-btn-abort {
  color: var(--alu-rose-dim);
}
.alu-bar-btn-abort:hover {
  background: var(--alu-rose-bg);
  color: var(--alu-rose);
}
.alu-bar-sep {
  width: 1px;
  height: 16px;
  background: var(--alu-border);
  margin: 0 4px;
  flex-shrink: 0;
}

/* 状态指示器 */
.alu-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--alu-mint);
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
  flex-shrink: 0;
}
.alu-status-dot.connecting {
  background: var(--alu-amber);
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
  animation: statusPulse 1.2s ease-in-out infinite;
}
.alu-status-dot.error {
  background: var(--alu-rose);
  box-shadow: 0 0 6px rgba(248, 113, 113, 0.6);
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.alu-status-label {
  color: var(--alu-text-muted);
  font-size: 11px;
}
.alu-status-time {
  color: var(--alu-text-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-width: 58px;
}

/* ── Badge (保留，用于命令面板等) ── */
.alu-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 9999px;
  border: 1px solid var(--alu-border);
  color: var(--alu-text-muted);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  background: transparent;
}
.alu-badge:hover {
  border-color: var(--alu-pink-border);
  color: var(--alu-pink);
}

/* ── 状态栏头像（用于旧版兼容）── */
.session-dot {
  box-shadow: 0 0 8px rgba(244, 114, 182, 0.45);
}
.alu-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--alu-pink-border);
  box-shadow: 0 0 8px rgba(244, 114, 182, 0.35);
  transition: box-shadow 0.3s;
}

/* ═══════════════════════════════════════════════════════
   Sidebar
   ═══════════════════════════════════════════════════════ */

.alu-sidebar {
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  z-index: 50;
}
.alu-sidebar.open { transform: translateX(0); }

.alu-sidebar-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 49;
}
.alu-sidebar-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.alu-session-row {
  border-bottom: 1px solid var(--alu-border);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.1s;
  font-size: 12px;
}
.alu-session-row:hover { background: var(--alu-hover); }
.alu-session-row.active {
  background: var(--alu-pink-bg);
  color: var(--alu-pink);
}

.alu-sidebar-header {
  color: var(--alu-text-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════
   UI 弹窗（JS 动态创建）
   ═══════════════════════════════════════════════════════ */

.ui-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 14, 0.82);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* 让 overlay 本身可滚动，防止 box 超出时无法触达关闭区域 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: dialogFadeIn 0.15s ease-out;
}

@keyframes dialogFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ui-dialog-box {
  background: var(--alu-bg-raised);
  border: 1px solid var(--alu-border);
  border-radius: 10px;
  padding: 20px;
  min-width: 260px;
  max-width: 460px;
  width: 100%;
  /* 限制最大高度，内部滚动 */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
  animation: dialogSlideIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 防止被 overlay padding 挤到不可见 */
  flex-shrink: 0;
  margin: auto;
}

@keyframes dialogSlideIn {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ui-dialog-title  { font-size: 13px; font-weight: 600; color: var(--alu-text); }
.ui-dialog-body   { font-size: 12px; color: var(--alu-text-muted); white-space: pre-wrap; }

.ui-dialog-btn {
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--alu-border);
  background: var(--alu-surface);
  color: var(--alu-text-dim);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  text-align: left;
  transition: all 0.12s;
}
.ui-dialog-btn:hover { background: var(--alu-hover); color: var(--alu-text); border-color: var(--alu-border-light); }
.ui-dialog-btn-primary {
  background: var(--alu-pink-bg);
  border-color: var(--alu-pink-border);
  color: var(--alu-pink);
}
.ui-dialog-btn-primary:hover { background: #261a26; border-color: #4a2a38; color: #f4b8c8; }
.ui-dialog-btn-row { display: flex; gap: 8px; justify-content: flex-end; }

.ui-dialog-input, .ui-dialog-editor {
  background: var(--alu-bg);
  border: 1px solid var(--alu-border);
  border-radius: 6px;
  color: var(--alu-text);
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
}
.ui-dialog-input:focus, .ui-dialog-editor:focus {
  border-color: var(--alu-pink-border);
  box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.1);
}
.ui-dialog-editor { min-height: 120px; resize: vertical; }

/* ═══════════════════════════════════════════════════════
   命令面板（JS 动态创建）
   ═══════════════════════════════════════════════════════ */

.cmd-palette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 14, 0.78);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: cmdOverlayIn 0.12s ease-out;
}

@keyframes cmdOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cmd-palette-box {
  background: var(--alu-bg-raised);
  border: 1px solid var(--alu-border);
  border-radius: 12px;
  width: 500px;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.85),
              0 0 0 1px rgba(244, 114, 182, 0.06);
  animation: cmdBoxIn 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cmdBoxIn {
  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.cmd-palette-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--alu-border);
}
.cmd-palette-search-icon { color: var(--alu-pink); font-size: 14px; flex-shrink: 0; opacity: 0.8; }
.cmd-palette-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--alu-text);
  font-family: inherit;
  font-size: 13px;
}
.cmd-palette-input::placeholder { color: var(--alu-text-muted); }
.cmd-palette-kbd {
  font-size: 10px;
  color: var(--alu-text-muted);
  border: 1px solid var(--alu-border-light);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.cmd-palette-list { max-height: 360px; overflow-y: auto; padding: 4px 0; }
.cmd-palette-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  cursor: pointer;
  gap: 8px;
  transition: background 0.08s;
}
.cmd-palette-item.selected { background: var(--alu-hover); }
.cmd-palette-item-left { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; }
.cmd-palette-item-icon   { color: var(--alu-text-muted); font-size: 11px; flex-shrink: 0; width: 14px; text-align: center; }
.cmd-palette-item-label  { color: var(--alu-text-dim); font-size: 12px; flex-shrink: 0; }
.cmd-palette-item.danger .cmd-palette-item-label { color: var(--alu-rose-dim); }
.cmd-palette-item.selected.danger .cmd-palette-item-label { color: var(--alu-rose); }
.cmd-palette-item-desc { color: var(--alu-text-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-palette-item-hint { color: var(--alu-text-muted); font-size: 10px; flex-shrink: 0; opacity: 0.7; }
.cmd-palette-empty { color: var(--alu-text-muted); font-size: 12px; padding: 20px 14px; text-align: center; }

.cmd-palette-param-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--alu-border);
  color: var(--alu-text-dim);
  font-size: 12px;
}
.cmd-palette-param-hint { color: var(--alu-text-muted); font-size: 11px; padding: 10px 14px 4px; }
.cmd-palette-param-input,
.cmd-palette-param-textarea {
  display: block;
  width: calc(100% - 28px);
  margin: 0 14px;
  background: var(--alu-bg);
  border: 1px solid var(--alu-border);
  border-radius: 6px;
  color: var(--alu-text);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.cmd-palette-param-input:focus,
.cmd-palette-param-textarea:focus {
  border-color: var(--alu-pink-border);
  box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.1);
}
.cmd-palette-param-textarea { min-height: 90px; }
.cmd-palette-submit-btn {
  display: block;
  margin: 10px 14px 14px;
  padding: 7px 16px;
  background: var(--alu-pink-bg);
  border: 1px solid var(--alu-pink-border);
  color: var(--alu-pink);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: all 0.12s;
}
.cmd-palette-submit-btn:hover { background: #261a26; border-color: #4a2a38; }
.cmd-palette-bool-row { display: flex; gap: 8px; padding: 14px; }
.cmd-palette-bool-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--alu-border);
  background: var(--alu-surface);
  color: var(--alu-text-dim);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: all 0.12s;
}
.cmd-palette-bool-btn:hover { background: var(--alu-hover); color: var(--alu-text); border-color: var(--alu-border-light); }

/* ═══════════════════════════════════════════════════════
   消息出现动画
   ═══════════════════════════════════════════════════════ */

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

.alu-msg-assistant-row, .msg-user, .msg-notice, .msg-error {
  animation: msgSlideIn 0.22s ease-out;
}

/* ═══════════════════════════════════════════════════════
   空输出区 — 阿露欢迎图
   ═══════════════════════════════════════════════════════ */

.alu-welcome {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  opacity: 0.65;
  pointer-events: none;
  z-index: -1;
}
.alu-welcome img {
  width: 96px;
  height: 96px;
  opacity: 0.7;
  filter: drop-shadow(0 0 24px rgba(244, 114, 182, 0.35));
  animation: welcomeFloat 4s ease-in-out infinite;
}
@keyframes welcomeFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.alu-welcome-text {
  color: var(--alu-text-muted);
  font-size: 13px;
  text-align: center;
  line-height: 1.8;
}
.alu-welcome-text strong {
  color: var(--alu-pink);
  font-weight: 700;
  font-size: 1.15em;
}

/* ── 旧版 toolbar btn (命令面板 fallback 用) ── */
.alu-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--alu-border);
  background: var(--alu-surface);
  color: var(--alu-text-muted);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.alu-toolbar-btn:hover { background: var(--alu-hover); color: var(--alu-text-dim); border-color: var(--alu-border-light); }
.alu-toolbar-btn-danger { border-color: var(--alu-rose-border); background: var(--alu-rose-bg); color: var(--alu-rose-dim); }
.alu-toolbar-btn-danger:hover { background: #261a1e; color: var(--alu-rose); border-color: #4a2830; }
.alu-toolbar-btn-cmd:hover { color: var(--alu-pink); border-color: var(--alu-pink-border); background: var(--alu-pink-bg); }

/* ═══════════════════════════════════════════════════════
   响应式 — 移动端 (≤ 640px)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* 导航栏 */
  :root {
    --alu-nav-height: 54px;
  }

  .alu-navbar {
    padding: 0 10px;
    gap: 6px;
  }

  /* 移动端隐藏头像，腾出空间 */
  .alu-navbar-avatar {
    display: none;
  }

  /* 面包屑缩小 */
  .alu-nav-workspace {
    font-size: 12px;
  }
  .alu-nav-sep,
  .alu-nav-session {
    font-size: 12px;
  }
  .alu-nav-session {
    max-width: 80px;
  }

  /* 选择器按钮：移动端去掉 label，只留 icon + value，无 min-width */
  .alu-nav-selector {
    min-width: 0;
    padding: 5px 8px 5px 7px;
    gap: 4px;
    font-size: 11px;
  }
  .alu-nav-selector-label {
    display: none;
  }
  .alu-nav-selector-value {
    font-size: 11px;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .alu-nav-selector-arrow {
    font-size: 9px;
  }

  /* 汉堡按钮 */
  .alu-nav-stats {
    gap: 4px;
    margin-left: 0;
  }

  .alu-nav-stat-pill {
    padding: 4px 6px;
    font-size: 10px;
  }

  /* 移动端优先保留上下文和费用，输入/输出统计隐藏 */
  .alu-nav-stat-pill:nth-child(1),
  .alu-nav-stat-pill:nth-child(2) {
    display: none;
  }

  .alu-nav-hamburger {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  /* ── 极窄屏（≤ 470px，如 iPhone SE）：navbar 换两行 ── */
  @media (max-width: 470px) {
    :root { --alu-nav-height: auto; }

    .alu-navbar {
      height: auto;
      flex-wrap: wrap;
      padding: 6px 10px 4px;
      row-gap: 2px;
    }

    /* 第一行：头像 + 面包屑，占满全宽 */
    .alu-navbar-left {
      flex: 0 0 100%;
      width: 100%;
    }
    .alu-nav-session {
      max-width: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
      min-width: 0;
    }

    /* 第二行：选择器 + 汉堡，右对齐 */
    .alu-navbar-right {
      flex: 0 0 100%;
      width: 100%;
      justify-content: flex-end;
      padding-bottom: 4px;
    }
  }

  /* 输出区 padding 缩小 */
  .alu-output {
    padding: 14px 14px 28px;
  }

  /* 消息头像：移动端隐藏 */
  .alu-msg-avatar {
    display: none;
  }

  /* 消息行间距缩小 */
  .alu-msg-assistant-row {
    gap: 9px;
    margin: 14px 0;
  }
  .alu-msg-assistant-body {
    padding: 10px 12px;
  }
  .msg-user {
    margin: 14px 0;
  }
  .msg-user-bubble {
    max-width: 90%;
    padding: 10px 12px 8px;
  }

  /* 输入区 */
  .alu-input-section {
    padding: 0 10px;
  }
  .alu-input-wrap {
    margin: 10px 0 0;
    padding: 9px 8px 9px 14px;
    border-radius: 16px;
    gap: 8px;
  }
  .alu-send-btn {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 11px;
  }

  /* 底部工具栏：可横向滚动，隐藏状态区时间 */
  .alu-bottom-bar {
    height: auto;
    min-height: var(--alu-bar-height);
    padding: 4px 2px;
    flex-wrap: wrap;
    gap: 4px;
  }
  .alu-bottom-bar-left {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .alu-bottom-bar-left::-webkit-scrollbar {
    display: none;
  }
  .alu-bottom-bar-right {
    flex-shrink: 0;
    gap: 5px;
  }
  .alu-status-time {
    display: none;
  }

  /* 代码块 */
  .code-block-pre {
    padding: 10px 12px;
    font-size: 12px;
  }
  .code-block-pre code {
    font-size: 12px;
  }

  /* 弹窗：移动端贴近底部，更大可触区域 */
  .ui-dialog-overlay {
    align-items: flex-end;
    padding: 0;
    /* 移动端关闭 backdrop-filter，避免多 compositing 层导致顶部出现黑色方块 */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(4, 6, 14, 0.90);
  }
  .ui-dialog-box {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 16px 16px 0 0;
    padding: 0 0 28px;
    margin: 0;
  }
  /* 标题区：sticky 固定，不随列表一起滚走 */
  .ui-dialog-box .ui-dialog-title {
    position: sticky;
    top: 0;
    background: var(--alu-bg-raised);
    z-index: 1;
    padding: 20px 16px 12px;
    border-radius: 16px 16px 0 0;
    margin-bottom: -12px;
  }
  /* hint 文字和按钮恢复 padding */
  .ui-dialog-box .ui-dialog-body,
  .ui-dialog-box .ui-dialog-btn {
    margin-left: 16px;
    margin-right: 16px;
  }
  .ui-dialog-box .ui-dialog-body {
    padding-top: 20px;
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/


.font-family-karla { font-family: karla; }
.bg-sidebar { background: #FFDB58; }
.cta-btn { color: #FFDB58; }
.upgrade-btn { background: #f8c716; }
.upgrade-btn:hover { background: #0038fd; }
.active-nav-link { background: #f8c716; }
.nav-item:hover { background: #f8c716; }
.account-link:hover { background: #FFDB58; }

.sidebar-item {
  @apply px-4 py-2 whitespace-nowrap text-base font-bold rounded-[16px];
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}


.sidebar-normal {
  @apply hover:bg-sky-300 hover:text-white bg-white bg-opacity-[0.8] text-gray-800;
}

.sidebar-active {
  @apply bg-sky-600 bg-opacity-[0.8] text-white;
}


.primary-btn {
  @apply block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


body {
  font-size: .875rem;
}

.feather {
  width: 16px;
  height: 16px;
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  /* rtl:raw:
  right: 0;
  */
  bottom: 0;
  /* rtl:remove */
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 48px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

@media (max-width: 767.98px) {
  .sidebar {
    top: 5rem;
  }
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #727272;
}

.sidebar .nav-link.active {
  color: #2470dc;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
}

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler {
  top: .25rem;
  right: 1rem;
}

.navbar .form-control {
  padding: .75rem 1rem;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

/* direct_uploads.css */

.direct-upload {
  display: inline-block;
  position: relative;
  padding: 2px 4px;
  margin: 0 3px 3px 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  font-size: 11px;
  line-height: 13px;
}

.direct-upload--pending {
  opacity: 0.6;
}

.direct-upload__progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  opacity: 0.2;
  background: #0076ff;
  transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
  transform: translate3d(0, 0, 0);
}

.direct-upload--complete .direct-upload__progress {
  opacity: 0.4;
}

.direct-upload--error {
  border-color: red;
}

input[type=file][data-direct-upload-url][disabled] {
  display: none;
}

.sidebar li .submenu{
	list-style: none;
	margin: 0;
	padding: 0;
	padding-left: 0rem;
	padding-right: 0rem;
}


.home-bg {
  background-image: url(/assets/main_bg-ca6e0e1a9654baccdac6022ff97d3684091ae23465189a3a808a329493c78546.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.home-bg.after-login {
  background-image: url(/assets/main_bg2-2028d27a2dd8c98cf05f1e8e20e26c894cec159bb48691d12012a50d2b2465c1.jpg);
}


.homepage-bg {
  background-image: url(/assets/low_bg-b7c5988e9f35e81884bc1e69cd266b4f268298f990c6e1b6f47cbf7c3b748212.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  animation: homebg 40s infinite;
}

.home-console {
  position: relative;
  isolation: isolate;
  color: #f8fafc;
}

.home-glow {
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, rgba(34, 211, 238, 0.25), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(14, 116, 144, 0.35), transparent 60%),
    radial-gradient(circle at 40% 80%, rgba(59, 130, 246, 0.2), transparent 55%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.6), rgba(2, 6, 23, 0.2));
}

.home-grid {
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mix-blend-mode: screen;
  mask-image: radial-gradient(circle at 50% 20%, black, transparent 65%);
}

.home-panel {
  position: relative;
  overflow: hidden;
}

.home-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(34, 211, 238, 0.08), transparent 80%);
  opacity: 0.6;
  pointer-events: none;
}

.home-card {
  position: relative;
  overflow: hidden;
}

.home-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(34, 211, 238, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.home-card:hover::before {
  opacity: 1;
}

.home-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.home-card .line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes homePulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.5;
  }
}

.home-glow {
  animation: homePulse 8s ease-in-out infinite;
}

@keyframes homebg {
  0% {
    background-image: url(/assets/low_bg2-55e90d36424f0433ca350d6222d93a6edb70eb672ac534950e82f4db54070c52.jpg);
  }

  25% {
    background-image: url(/assets/low_bg3-93b5d643561500c1cce7ebad9dae43b570548ca8a2d2df1891325c772563b765.jpg);
  }

  50% {
    background-image: url(/assets/low_bg-b7c5988e9f35e81884bc1e69cd266b4f268298f990c6e1b6f47cbf7c3b748212.jpg);
  }

  75% {
    background-image: url(/assets/low_bg4-8bddc50684480f024353134e9451e13f835cc564bf68bb727d731741d6be628b.jpg);
  }

  100% {
    background-image: url(/assets/low_bg2-55e90d36424f0433ca350d6222d93a6edb70eb672ac534950e82f4db54070c52.jpg);
  }

}

.main-header {
  background: rgba(255, 255, 255, .75);
}

.account-form-bg {
  background: rgba(255, 255, 255, .75);
}

.markdown-body p {
  word-wrap: break-word;
  white-space: pre-wrap;
}

.markdown-body code,
.markdown-body tt {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  display: inline-block;
  white-space: break-spaces;
  background-color: #e5e7eb;
  border-radius: 6px;
}

.chat-markdown p + p {
  margin-top: 0.65rem;
}

.chat-markdown ul,
.chat-markdown ol {
  margin: 0.4rem 0 0.4rem 1.15rem;
}

.chat-markdown blockquote {
  margin: 0.55rem 0;
  border-left: 3px solid #d1d5db;
  padding-left: 0.75rem;
  color: #4b5563;
}

.chat-markdown pre {
  margin: 0.55rem 0;
  padding: 0.75rem 0.85rem;
  overflow-x: auto;
  background-color: #111827;
  color: #e5e7eb;
  border-radius: 0.75rem;
  border: 1px solid #1f2937;
}

.chat-markdown pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  display: inline;
}

code.css,
code.javascript,
code.ruby,
code.python,
code.html {
  padding: 2em;
}



button[disabled] {
  background-color: #727272!important;
  cursor: not-allowed;
}

img:not([src]), img[src=""] {
  opacity: 0;
}