/* Simple clean styles — responsive */
:root {
  --bg:#f6f7fb;
  --card:#ffffff;
  --accent:#2b6cb0;
  --muted:#666;
  --radius:12px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:#111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width:980px;
  margin:28px auto;
  padding:20px;
}


.topbar{
  margin-top:-24px;       /* 让整体header再往上 */
  margin-bottom:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.left-controls{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:12px;
}
.header-divider{
  width:100%;
  height:1px;
  background:#ddd;  /* 灰色 */
  margin:6px 1 14px 1; /* 上下间距，让它贴上但不拥挤 */
}
.menu-btn{
  font-size:18px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
}
.app-title{margin:0;font-size:20px}

/* Side navigation (slide-out) */
.side-nav{
  position:fixed;
  top:0;
  left: -320px; /* hidden by default */
  width:300px;
  height:100vh;
  background:#fff;
  box-shadow: 6px 0 18px rgba(0,0,0,0.12);
  border-right:1px solid #eee;
  z-index:1300;
  transition: left 220ms ease;
  display:flex;
  flex-direction:column;
  padding:14px;
}
.side-nav.open{ left:0; }
.side-nav-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:8px;
  border-bottom:1px solid #f1f1f1;
  margin-bottom:8px;
}
.icon-btn{
  border:0;
  background:transparent;
  font-size:18px;
  cursor:pointer;
}
.side-nav-list{ display:flex; flex-direction:column; gap:8px; padding-top:12px; }
.side-nav-list a{
  padding:10px 12px;
  border-radius:8px;
  text-decoration:none;
  color:#111;
  border:1px solid transparent;
}
.side-nav-list a:hover{ background:#f3f6fb; border-color:#e6eefb; }

.side-nav-footer{ margin-top:auto; padding-top:12px; border-top:1px solid #f1f1f1; text-align:center; color:var(--muted); }

/* backdrop */
.side-nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.32);
  opacity:0;
  pointer-events:none;
  transition:opacity 200ms ease;
  z-index:1250;
}
.side-nav-backdrop[data-hidden="false"]{ opacity:1; pointer-events:auto; }

/* rest of original styles */
header h1{margin:0;font-size:20px}
.lang-controls{display:flex;gap:8px;align-items:center;margin-left: 72px;}
.lang-controls select, .lang-controls button{padding:6px 8px;border-radius:8px;border:1px solid #ddd}
.mode-switch{display:flex;gap:8px;margin-bottom:12px;margin-top: 12px;}
.mode-switch button{
  padding:8px 12px;border-radius:10px;border:1px solid #ddd;background:#fff;cursor:pointer
}
.mode-switch button.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.mode{display:none}
.mode.active{display:block}

.dialog-list{
  background:var(--card);padding:12px;border-radius:12px;min-height:220px;max-height:420px;overflow:auto;border:1px solid #eee;
}

.bubble{display:flex;gap:12px;margin-bottom:10px}
.bubble .meta{font-size:12px;color:var(--muted)}
.bubble .text{padding:10px;border-radius:10px;background:#f3f4f6;max-width:80%}

.bubble.me{justify-content:flex-end}
.bubble.me .text{background:#dbeafe}

.input-row{display:flex;gap:12px;margin-top:12px}
textarea{flex:1;min-height:72px;padding:10px;border-radius:10px;border:1px solid #ddd;resize:vertical}
.controls-col{display:flex;flex-direction:column;gap:8px}
.controls-col button{padding:8px 10px;border-radius:8px;border:1px solid #ddd;background:#fff;cursor:pointer}

.side-wrapper{display:flex;gap:12px}
.side-wrapper textarea{width:50%;min-height:200px}

.side-actions{margin-top:8px;display:flex;gap:8px}

.upload-result{margin-top:12px;background:#fff;padding:12px;border-radius:10px;border:1px solid #eee;min-height:120px}
.side-summary{
  margin-top:8px;
  padding:10px;
  background:#f3f4f6;
  border-radius:8px;
  border:1px solid #ddd;
  min-height:60px;
  white-space:pre-wrap;
}
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1200;
}
.modal[aria-hidden="false"]{ display:flex; }

.modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,0.35);
}
.modal-panel{
  position:relative;
  width:100%; max-width:520px;
  background:#fff; padding:18px;
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.12);
  border:1px solid #eee;
}
.modal-panel input{
  width:100%; padding:10px; border-radius:8px; border:1px solid #ddd;
}
.modal-btn{ padding:8px 12px; border-radius:8px; border:1px solid #ccc; background:#fff; cursor:pointer; }
.modal-btn.primary{ background:var(--accent,#4A90E2); color:#fff; border-color:var(--accent,#4A90E2); }
.token-box{ padding:6px 10px; border:1px solid #ddd; background:#fff; border-radius:8px; font-size:13px; cursor:pointer;}
.small-btn{ padding:6px 8px; border:1px solid #ddd; background:#fff; border-radius:8px; cursor:pointer; }

footer{margin-top:18px;color:var(--muted);font-size:13px;text-align:right}
button{cursor:pointer}