/* =========================================================
   Chaty – Complete & Clean style.css
   ========================================================= */

/* ===============================
   Design Tokens
   =============================== */
   :root{
    /* Palette */
    --p0:#F5F2F2;
    --p1:#FEB05D;
    --p2:#5A7ACD;
    --p3:#2B2A2A;
  
    /* Light theme */
    --bg: var(--p0);
    --panel:#FFFFFF;
    --text: var(--p3);
    --muted:rgba(43,42,42,.62);
    --border:rgba(43,42,42,.12);
  
    --accent:var(--p1);
    --secondary:var(--p2);
  
    --shadow:0 18px 45px rgba(43,42,42,.12);
    --radius:18px;
    --bubbleRadius:14px;
  }
  
  [data-theme="dark"]{
    --bg:var(--p3);
    --panel:rgba(245,242,242,.06);
    --text:var(--p0);
    --muted:rgba(245,242,242,.62);
    --border:rgba(245,242,242,.12);
    --shadow:0 22px 60px rgba(0,0,0,.45);
  }
  
  /* ===============================
     Reset & Base
     =============================== */
  *{ box-sizing:border-box; }
  html,body{ height:100%; margin:0; }
  
  body{
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial;
    overflow:hidden;
  }
  
  /* ===============================
     App Layout
     =============================== */
  .app{
    height:100%;
    display:flex;
    flex-direction:column;
    padding:
      env(safe-area-inset-top)
      env(safe-area-inset-right)
      env(safe-area-inset-bottom)
      env(safe-area-inset-left);
  }
  
  /* ===============================
     Topbar
     =============================== */
  .topbar{
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px;
    border-bottom:1px solid var(--border);
    background:color-mix(in srgb,var(--panel) 70%,transparent);
    backdrop-filter:blur(10px);
  }
  
  .brand{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  
  .brandRow{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  
  .brandName{
    font-size:16px;
    font-weight:800;
    letter-spacing:.3px;
  }
  
  .subRow .statusText{
    font-size:12px;
    color:var(--muted);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  
  .topActions{
    display:flex;
    align-items:center;
    gap:8px;
  }
  
  .iconBtn{
    height:36px;
    width:44px;
    border-radius:999px;
    border:1px solid var(--border);
    background:color-mix(in srgb,var(--panel) 85%,transparent);
    color:var(--text);
    cursor:pointer;
  }
  .iconBtn:active{ transform:translateY(1px); }
  
  /* ===============================
     User Status Badge (Animated)
     =============================== */
  .statusBadge{
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    position:relative;
    overflow:hidden;
    z-index:1;
    border:1px solid rgba(255,255,255,.35);
  }
  
  /* Diagonal stripe animation (background) */
  .statusBadge::after{
    content:"";
    position:absolute;
    inset:-40%;
    background-image:repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.35) 0px,
      rgba(255,255,255,.35) 6px,
      transparent 6px,
      transparent 12px
    );
    animation:stripeMove 8s linear infinite;
    z-index:0;
    pointer-events:none;
  }
  
  /* Stripe motion */
  @keyframes stripeMove{
    from{ transform:translate(0,0); }
    to{ transform:translate(40px,40px); }
  }
  
  /* Status colors */
  .status-online{
    background-color:#CFF3D6;
    color:#1F6B3B;
  }
  
  .status-offline{
    background-color:#DCEBFA;
    color:#245A8D;
  }
  
  .status-left{
    background-color:#F6D6D6;
    color:#7A2B2B;
  }
  
  /* Stop animation when left */
  .status-left::after{
    animation:none;
  }
  
  /* ===============================
     Stage
     =============================== */
  .stage{
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  
  /* ===============================
     Landing / Splash
     =============================== */
  .landing{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
  }
  
  .splashCard{
    width:min(520px,100%);
    padding:22px 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:color-mix(in srgb,var(--panel) 88%,transparent);
    box-shadow:var(--shadow);
    animation:popIn .22s ease-out;
  }
  
  @keyframes popIn{
    from{ transform:translateY(6px); opacity:0; }
    to{ transform:translateY(0); opacity:1; }
  }
  
  .logoWrap{
    width:132px;
    height:132px;
    display:grid;
    place-items:center;
    border-radius:28px;
    border:1px solid var(--border);
    background:color-mix(in srgb,var(--panel) 76%,transparent);
  }
  
  .chatyLogo{
    width:104px;
    height:104px;
    filter:drop-shadow(0 12px 24px rgba(0,0,0,.12));
  }
  
  .splashText{
    text-align:center;
  }
  
  .splashText h1{
    margin:0;
    font-size:22px;
    letter-spacing:.4px;
  }
  
  .splashText p{
    margin:6px 0 0;
    font-size:13px;
    color:var(--muted);
    line-height:1.5;
  }
  
  .primaryBtn{
    border:none;
    background:var(--accent);
    color:#111;
    font-weight:800;
    padding:.78rem 1.2rem;
    border-radius:999px;
    cursor:pointer;
    box-shadow:0 12px 28px rgba(254,176,93,.32);
  }
  .primaryBtn:active{ transform:translateY(1px); }
  
  /* ===============================
     Chat
     =============================== */
  .chat{
    flex:1;
    display:none;
    flex-direction:column;
    min-height:0;
    position:relative;
  }
  .chat.active{ display:flex; }
  
  .messages{
    flex:1;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:14px 12px 10px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  
  /* ===============================
     Message Rows & Bubbles
     =============================== */
  .row{ display:flex; width:100%; }
  .row.me{ justify-content:flex-end; }
  .row.them{ justify-content:flex-start; }
  .row.system{ justify-content:center; }
  
  .bubble{
    max-width:74%;
    padding:8px 10px;
    border-radius:var(--bubbleRadius);
    border:1px solid var(--border);
    background:color-mix(in srgb,var(--panel) 88%,transparent);
    animation:bubbleIn .16s ease-out;
  }
  
  @keyframes bubbleIn{
    from{ transform:translateY(4px); opacity:0; }
    to{ transform:translateY(0); opacity:1; }
  }
  
  .row.me .bubble{
    background:color-mix(in srgb,var(--secondary) 16%,var(--panel));
    border-color:color-mix(in srgb,var(--secondary) 34%,var(--border));
  }
  
  .row.them .bubble{
    background:color-mix(in srgb,var(--accent) 18%,var(--panel));
    border-color:color-mix(in srgb,var(--accent) 38%,var(--border));
  }
  
  .bubbleText{
    white-space:pre-wrap;
    word-break:break-word;
    line-height:1.45;
    font-size:14px;
  }
  
  .meta{
    margin-top:4px;
    font-size:10px;
    color:var(--muted);
  }
  .row.me .meta{ text-align:right; }
  .row.them .meta{ text-align:left; }
  
  /* System message */
  .row.system .bubble{
    background:transparent;
    border-color:transparent;
    padding:4px 10px;
    color:var(--muted);
    font-size:12px;
  }
  
  /* ===============================
     Typing Indicator
     =============================== */
  .typingLine{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    color:var(--muted);
  }
  
  .dots{
    display:inline-flex;
    gap:4px;
  }
  
  .dot{
    width:6px;
    height:6px;
    border-radius:999px;
    background:color-mix(in srgb,var(--text) 55%,transparent);
    opacity:.35;
    animation:dot 1s infinite ease-in-out;
  }
  .dot:nth-child(2){ animation-delay:.12s; }
  .dot:nth-child(3){ animation-delay:.24s; }
  
  @keyframes dot{
    0%,100%{ transform:translateY(0); opacity:.3; }
    50%{ transform:translateY(-3px); opacity:.85; }
  }
  
  /* ===============================
     New Message Chip
     =============================== */
  .newMsgChip{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:72px;
    display:none;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid var(--border);
    background:color-mix(in srgb,var(--panel) 86%,transparent);
    box-shadow:var(--shadow);
    cursor:pointer;
  }
  .newMsgChip.show{ display:inline-flex; }
  
  /* ===============================
     Toolbar
     =============================== */
  .toolbar{
    height:64px;
    display:grid;
    grid-template-columns:10% 1fr 10%;
    gap:10px;
    padding:10px 12px;
    border-top:1px solid var(--border);
    background:color-mix(in srgb,var(--panel) 70%,transparent);
    backdrop-filter:blur(10px);
  }
  
  .toolBtn{
    border-radius:999px;
    border:1px solid var(--border);
    background:color-mix(in srgb,var(--panel) 86%,transparent);
    color:var(--text);
    font-weight:800;
    cursor:pointer;
  }
  .toolBtn:active{ transform:translateY(1px); }
  .toolBtn:disabled{
    opacity:.55;
    cursor:not-allowed;
  }
  
  .toolBtn.danger{
    background:color-mix(in srgb,var(--accent) 16%,var(--panel));
    border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  }
  
  .msgInput{
    width:100%;
    resize:none;
    border-radius:999px;
    border:1px solid var(--border);
    background:color-mix(in srgb,var(--panel) 86%,transparent);
    color:var(--text);
    padding:12px 14px;
    outline:none;
    font-size:14px;
    line-height:18px;
    max-height:88px;
    overflow-y:auto;
  }
  .msgInput::placeholder{
    color:color-mix(in srgb,var(--text) 35%,transparent);
  }
  
  /* ===============================
     Modal
     =============================== */
  .modalBackdrop{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(0,0,0,.28);
  }
  .modalBackdrop.show{ display:flex; }
  
  .chat-link {
    color: #5A7ACD;
    text-decoration: underline;
    word-break: break-all;
  }
  
  .chat-link:active {
    opacity: 0.7;
  }
  
  .modal{
    width:min(420px,100%);
    padding:14px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:color-mix(in srgb,var(--panel) 92%,transparent);
    box-shadow:var(--shadow);
  }
  
  .modal h3{
    margin:0 0 8px;
    font-size:16px;
  }
  .modal p{
    margin:0 0 12px;
    font-size:13px;
    line-height:1.6;
    color:var(--muted);
  }
  
  .modalActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }