:root{
  --bg:#0b0f1a; --card:#111828; --ink:#e6ebf5; --muted:#a9b4c7;
  --line:#1f2a44; --blue:#2563eb; --green:#22c55e; --bubble:#0d1526; --bubble2:#0b1b33;
  --user:#1d2a52; --assistant:#101c33; --maxW: 980px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Arial}
a{color:#9cc2ff;text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer}

/* Top bar */
.topbar{
  position:fixed;top:0;left:0;right:0;height:56px;display:flex;align-items:center;gap:10px;
  padding:0 12px;background:linear-gradient(90deg,#0f172a,#0b1220);border-bottom:1px solid var(--line);z-index:50
}
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.topbar img.logo{height:20px;width:auto;object-fit:contain}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hamburger{display:none;width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:#0b1220;color:#e5e7eb;align-items:center;justify-content:center;font-size:18px}

/* Buttons */
.btn{
  --btn-bg:#1f2a44; --btn-ink:#e6ebf5; --btn-border:#2b3a62;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:10px;background:var(--btn-bg);color:var(--btn-ink);
  border:1px solid var(--btn-border);font-weight:600;transition:transform .04s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
  user-select:none; -webkit-user-select:none;font-size:14px;
}
.btn:hover{background:#243459;border-color:#38528d}
.btn:active{transform:translateY(1px) scale(.99)}
.btn[disabled], .btn[aria-busy="true"]{opacity:.6;cursor:not-allowed}
.btn.primary{background:var(--blue);border-color:#1f4fd1}
.btn.primary:hover{background:#1e55ff}
.btn.success{background:var(--green);border-color:#1aa14c;color:#06210f}
.btn.ghost{background:#0b1220;border-color:#2a375a}
.btn.warn{background:#3b1b1b;border-color:#6b2323}
.btn .spinner{
  width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  display:none;animation:spin .9s linear infinite
}
.btn[aria-busy="true"] .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* Layout */
.app{height:100%;display:flex;padding-top:56px}
.sidebar{
  width:280px;flex:0 0 280px;border-right:1px solid var(--line);background:#0f172a;
  padding:10px;overflow:auto;z-index:40;
}
.sidebar .btn{width:100%;margin-bottom:10px}
#convList .item{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--line);border-radius:10px;background:#0b1220;margin-bottom:8px}
#convList .title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#0b1220}
.iconbtn:hover{background:#141b2d}

/* Main */
.main{flex:1;min-width:0;display:flex;flex-direction:column;max-width:100%}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px;border-bottom:1px solid var(--line);background:#0f172a;font-size:13px}

/* Feed */
.feed{
  flex:1;overflow:auto;padding:10px 8px;display:flex;flex-direction:column;gap:8px;align-items:center;
}
.feed > .row{width:100%;max-width:var(--maxW);padding:0 6px}
.row{display:flex;gap:8px;justify-content:flex-start}
.avatar{width:26px;height:26px;border-radius:999px;flex:0 0 auto;position:relative;overflow:hidden;background:#12203d;border:1px solid #22335c}
.avatar img.logo{width:100%;height:100%;object-fit:contain;padding:3px;display:block;filter:drop-shadow(0 0 2px rgba(0,0,0,.5))}

/* Bubbles */
.msg{
  max-width:min(600px,92vw);white-space:pre-wrap;word-wrap:break-word;
  border:1px solid var(--line);padding:9px 11px;border-radius:12px;background:var(--assistant);
  line-height:1.48;font-size:14.5px
}
.msg.assistant{background:var(--assistant);border-color:#1d2742}
.msg.user{background:var(--user);border-color:#2a3f6d}
.msg img{max-width:100%;height:auto;display:block;border-radius:10px;margin-top:6px}

/* Code blocks */
.codewrap{ position:relative; margin:8px 0; }
.codeblock{
  background:#0b1220; border:1px solid #334155; border-radius:10px;
  padding:12px; padding-top:36px; overflow:auto; margin:0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:12.5px; line-height:1.5; white-space:pre;
}
.copycode{
  position:absolute; top:6px; right:6px;
  border:1px solid #334155; background:#122042; color:#e6ebf5;
  border-radius:6px; padding:4px 8px; font-size:12px; cursor:pointer;
}
.langtag{
  position:absolute; top:8px; left:10px; font-size:11px; color:#a9b4c7; opacity:.95;
  user-select:none; pointer-events:none;
}
.inline{ background:#0b1220; border:1px solid #334155; border-radius:6px; padding:1px 4px; }

/* Composer */
.composer-wrap{border-top:1px solid var(--line);background:#0f172a}
.composer{max-width:var(--maxW);margin:0 auto;padding:10px;display:flex;gap:8px;align-items:flex-end; position: relative;}
.composer textarea{flex:1;min-height:46px;max-height:200px;resize:vertical;border-radius:10px;background:#0b1220;border:1px solid #374151;color:var(--ink);padding:10px;line-height:1.35;outline:none;font-size:14.5px}

/* Download bar */
.msg .dlbar{ display:flex; gap:8px; align-items:center; margin-top:8px; }
.dlbtn{
  --dl-bg-start:#192644; --dl-bg-end:#0f1d3b;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--dl-bg-start),var(--dl-bg-end));
  color:var(--ink); text-decoration:none; font-size:12.5px; line-height:1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.25);
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease, background .15s ease;
  white-space:nowrap;
}
.dlbtn:hover{
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.35);
  border-color: var(--blue);
  text-decoration:none;
}
.dlbtn:active{ transform: translateY(0); }
.dlbtn .ico{
  width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
  background:#122042; border:1px solid var(--line); border-radius:50%;
  font-size:12px; line-height:1;
}

/* Force API download links to look like a button even if raw */
.msg a[href^="/api/images/download"]{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:10px; background:var(--blue);
  color:#fff !important; border:1px solid #1f4fd1; font-weight:600; text-decoration:none !important;
  transition: transform .04s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.msg a[href^="/api/images/download"]:hover{ background:#1e55ff; border-color:#274de3; box-shadow:0 4px 18px rgba(37,99,235,.35); }
.msg a[href^="/api/images/download"]:active{ transform:translateY(1px) scale(.99); }

/* typing */
.typing{display:inline-flex;gap:4px;align-items:center}
.dot{width:6px;height:6px;border-radius:50%;background:#9fb0d4;opacity:.5;animation:bounce 1.2s infinite}
.dot:nth-child(2){animation-delay:.2s}
.dot:nth-child(3){animation-delay:.4s}
@keyframes bounce{0%,80%,100%{transform:scale(.6);opacity:.3}40%{transform:scale(1);opacity:1}}

/*
===== NEW STYLES for AI Photo Tools Menu =====
*/
.mini-tools-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  width: 340px;
  z-index: 20;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.mini-tools-menu.open { display: block; }
.mini-tools-menu .group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.mini-tools-menu .group:not(:last-child) {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.mini-tools-menu .group label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}
.mini-tools-menu select, .mini-tools-menu input[type=range] {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 8px;
  max-width: 180px;
}

/* Mobile tweaks */
@media (max-width: 1100px){
  .sidebar{position:fixed;top:56px;bottom:0;left:0;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .sidebar.open{transform:translateX(0)}
  .hamburger{display:flex;margin-right:6px}
}

/*
===== NEW STYLES for Mobile Responsiveness =====
*/
@media (max-width: 480px){
  .msg{font-size:14px}
  .composer textarea{font-size:14px}

  .mini-tools-menu {
    width: auto;
    left: 10px;
    right: 10px;
  }
  .mini-tools-menu .group label {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .mini-tools-menu select, .mini-tools-menu input[type=range] {
    max-width: none;
    width: 100%;
  }
}


/* ===== Login page (centered, non-stretched) ===== */
.login-wrap{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg);
}
.login-card{
  width: 100%;
  max-width: 420px;
  background: #0f172a;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 10px 34px rgba(0,0,0,.35);
}
.login-card h2{
  margin: 0 0 12px 0;
  font-size: 18px;
  letter-spacing: .2px;
}
.form-row{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #0b1220;
  color: var(--ink);
  outline: none;
  font-size: 14.5px;
}
.input:focus{ border-color:#4b67a8; box-shadow: 0 0 0 2px rgba(37,99,235,.25); }
.login-actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:12px; }
.login-actions .btn{ padding:9px 14px; }
@media (max-width: 420px){
  .login-card{ padding: 14px; border-radius: 10px; }
}