:root{
    --ink: #0a0710;
    --panel: #140f1f;
    --panel-line: #2a2140;
    --paper: #eef2f0;
    --signal: #a375f5;
    --signal-bright: #c4a3ff;
    --signal-dim: #4b2d85;
    --muted: #8a7fa3;
    --text: #ece7f5;
    --bubble-me: #5b34a8;
    --bubble-them: #1c1530;
  }

  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--text);
    font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
  }

  /* ---------- Ambient background ---------- */
  .bubble{
    position:fixed;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(163,117,245,0.18), rgba(163,117,245,0) 70%);
    filter:blur(2px);
    animation: drift 14s ease-in-out infinite;
    pointer-events:none;
    z-index:0;
  }
  .bubble.b1{width:340px;height:340px;top:-80px;left:-100px;}
  .bubble.b2{width:220px;height:220px;bottom:-60px;right:-40px;animation-delay:3s;}
  .bubble.b3{width:160px;height:160px;bottom:20%;left:8%;animation-delay:6s;}
  @keyframes drift{0%,100%{transform:translateY(0) translateX(0);}50%{transform:translateY(-16px) translateX(10px);}}
  @media (prefers-reduced-motion: reduce){.bubble{animation:none;} .msg{animation:none !important; opacity:1 !important; transform:none !important;}}

  .view{
    min-height:100vh;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    position:relative;
    z-index:1;
  }
  .view.active{display:flex;}

  /* ---------- Auth (login / register) shared shell ---------- */
  .stage{
    display:flex;
    width:100%;
    max-width:920px;
    background:var(--panel);
    border:1px solid var(--panel-line);
    border-radius:18px;
    overflow:hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  }

  .brand{
    flex:1;
    padding:56px 44px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background: linear-gradient(180deg, rgba(163,117,245,0.08), rgba(163,117,245,0) 40%), var(--panel);
    border-right:1px solid var(--panel-line);
  }
  .wordmark{
    font-family: Georgia, 'Times New Roman', serif;
    font-size:28px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .wordmark .dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--signal);
    box-shadow:0 0 0 4px rgba(163,117,245,0.2);
  }

  .thread{display:flex; flex-direction:column; gap:10px; margin:40px 0;}
  .msg{
    max-width:78%; padding:11px 16px; border-radius:16px; font-size:14px; line-height:1.4;
    opacity:0; transform:translateY(6px); animation: rise 0.6s ease forwards;
  }
  .msg.them{align-self:flex-start; background:var(--bubble-them); border:1px solid var(--panel-line); border-bottom-left-radius:4px; animation-delay:0.1s;}
  .msg.me{align-self:flex-end; background:var(--bubble-me); border-bottom-right-radius:4px; color:#f4eeff; animation-delay:0.5s;}
  .msg.typing{align-self:flex-start; background:var(--bubble-them); border:1px solid var(--panel-line); border-bottom-left-radius:4px; display:flex; gap:4px; padding:14px 16px; animation-delay:0.9s;}
  .msg.typing span{width:6px;height:6px;border-radius:50%;background:var(--muted); animation: blink 1.2s infinite ease-in-out;}
  .msg.typing span:nth-child(2){animation-delay:0.2s;}
  .msg.typing span:nth-child(3){animation-delay:0.4s;}
  @keyframes rise{to{opacity:1; transform:translateY(0);}}
  @keyframes blink{0%,80%,100%{opacity:0.25;}40%{opacity:1;}}

  .tagline{color:var(--muted); font-size:14px; line-height:1.6; max-width:30ch;}
  .tagline strong{color:var(--text);}

  .form-panel{flex:1; padding:56px 48px; display:flex; flex-direction:column; justify-content:center;}
  .form-panel h1{font-size:26px; margin:0 0 6px; font-weight:600;}
  .form-panel p.sub{margin:0 0 32px; color:var(--muted); font-size:14px;}

  form{display:flex; flex-direction:column; gap:18px;}
  .field{display:flex; flex-direction:column; gap:6px;}
  .field label{font-size:12px; text-transform:uppercase; letter-spacing:0.6px; color:var(--muted);}
  .field input{
    background:#0c0815; border:1px solid var(--panel-line); border-radius:10px;
    padding:13px 14px; color:var(--text); font-size:15px; outline:none;
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .field input::placeholder{color:#564a70;}
  .field input:focus{border-color:var(--signal); box-shadow:0 0 0 3px rgba(163,117,245,0.22);}
  .field .error{font-size:12px; color:#ff8a8a; min-height:14px;}

  .row-between{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted);}
  .remember{display:flex; align-items:center; gap:8px;}
  .remember input{accent-color:var(--signal);}
  .row-between a, .footer-note a{color:var(--signal-bright); text-decoration:none; cursor:pointer;}
  .row-between a:hover, .footer-note a:hover{text-decoration:underline;}

  button.primary{
    margin-top:6px; background:var(--signal); color:#0d0620; border:none; border-radius:10px;
    padding:14px; font-size:15px; font-weight:700; cursor:pointer;
    transition:transform 0.1s ease, background 0.15s ease;
  }
  button.primary:hover{background:var(--signal-bright);}
  button.primary:active{transform:scale(0.98);}
  button.primary:focus-visible{outline:3px solid #fff; outline-offset:2px;}

  .divider{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; margin:20px 0;}
  .divider::before, .divider::after{content:""; flex:1; height:1px; background:var(--panel-line);}
  .footer-note{text-align:center; font-size:13px; color:var(--muted);}
  .footer-note a{font-weight:600;}

  @media (max-width:760px){
    .stage{flex-direction:column;}
    .brand{border-right:none; border-bottom:1px solid var(--panel-line); padding:36px 28px;}
    .form-panel{padding:36px 28px;}
    .thread{margin:24px 0;}
  }

  /* ---------- Messenger app view ---------- */
  #app-view{padding:0; align-items:stretch;}
  .app-shell{
    display:flex;
    width:100%;
    height:100vh;
  }
  .sidebar{
    width:320px;
    flex-shrink:0;
    background:var(--panel);
    border-right:1px solid var(--panel-line);
    display:flex;
    flex-direction:column;
  }
  .sidebar-head{
    padding:20px 20px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--panel-line);
  }
  .sidebar-head .wordmark{font-size:20px;}
  .me-chip{display:flex; align-items:center; gap:10px;}
  .avatar{
    width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg, var(--signal), var(--bubble-me));
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:13px; color:#fff; flex-shrink:0;
  }
  .logout-btn{
    background:none; border:1px solid var(--panel-line); color:var(--muted);
    border-radius:8px; padding:6px 10px; font-size:12px; cursor:pointer;
  }
  .logout-btn:hover{color:var(--text); border-color:var(--signal);}

  .search{padding:14px 16px;}
  .search input{
    width:100%; background:#0c0815; border:1px solid var(--panel-line); border-radius:10px;
    padding:10px 12px; color:var(--text); font-size:13px; outline:none;
  }
  .search input:focus{border-color:var(--signal);}

  .chat-list{overflow-y:auto; flex:1;}
  .chat-item{
    display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer;
    border-left:3px solid transparent;
  }
  .chat-item:hover{background:rgba(163,117,245,0.06);}
  .chat-item.active{background:rgba(163,117,245,0.12); border-left-color:var(--signal);}
  .chat-item .meta{flex:1; min-width:0;}
  .chat-item .name{font-size:14px; font-weight:600;}
  .chat-item .preview{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .chat-item .time{font-size:11px; color:var(--muted); flex-shrink:0;}

  .chat-main{flex:1; display:flex; flex-direction:column; min-width:0;}
  .chat-header{
    padding:16px 24px; border-bottom:1px solid var(--panel-line);
    display:flex; align-items:center; gap:12px;
  }
  .chat-header .name{font-weight:600; font-size:15px;}
  .chat-header .status{font-size:12px; color:var(--signal-bright);}

  .chat-body{
    flex:1; overflow-y:auto; padding:24px; display:flex; flex-direction:column; gap:10px;
  }
  .chat-body .msg{animation:none; opacity:1; transform:none;}
  .day-sep{
    align-self:center; font-size:11px; color:var(--muted);
    background:var(--panel); padding:4px 12px; border-radius:20px; border:1px solid var(--panel-line);
    margin:8px 0;
  }

  .chat-input{
    padding:16px 24px; border-top:1px solid var(--panel-line);
    display:flex; gap:10px; align-items:center;
  }
  .chat-input input{
    flex:1; background:#0c0815; border:1px solid var(--panel-line); border-radius:12px;
    padding:12px 16px; color:var(--text); font-size:14px; outline:none;
  }
  .chat-input input:focus{border-color:var(--signal);}
  .chat-input button{
    background:var(--signal); border:none; color:#0d0620; font-weight:700;
    border-radius:10px; padding:12px 18px; cursor:pointer; font-size:14px;
  }
  .chat-input button:hover{background:var(--signal-bright);}

  @media (max-width:760px){
    .sidebar{width:100%; position:absolute; inset:0; z-index:2;}
    .sidebar.hide{display:none;}
    .chat-main.hide{display:none;}
  }