:root{
    --bg:#12151c;
    --surface:#1a1f29;
    --surface-2:#222836;
    --text:#edeff2;
    --text-dim:#8b93a3;
    --accent:#e8a33d;
    --accent-soft:#e8a33d22;
    --border:#2b3242;
    --danger:#d96c6c;
    --success:#72c28b;
  }

  *{
    box-sizing:border-box;
  }

  html,
  body{
    height:100%;
  }

  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  /* =========================================================
     Header
     ========================================================= */

  header{
    width:100%;
    max-width:760px;
    padding:24px 20px 10px;
    text-align:center;
  }

  header h1{
    font-size:22px;
    font-weight:800;
    margin:0 0 4px;
    letter-spacing:-0.02em;
  }

  header p{
    margin:0;
    color:var(--text-dim);
    font-size:13px;
  }

  /* =========================================================
     Tabs
     ========================================================= */

  .tabs{
    width:100%;
    max-width:760px;
    padding:10px 20px 12px;
    display:flex;
    gap:6px;
  }

  .tab{
    flex:1;
    height:38px;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text-dim);
    border-radius:10px;
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.15s ease;
  }

  .tab:hover{
    color:var(--text);
    border-color:#3a4356;
  }

  .tab.active{
    background:var(--accent-soft);
    border-color:#e8a33d66;
    color:var(--accent);
  }

  /* =========================================================
     Views
     ========================================================= */

  .view{
    display:none;
    width:100%;
    flex:1;
    min-height:0;
  }

  .view.active{
    display:flex;
    flex-direction:column;
  }

  /* =========================================================
     Chat
     ========================================================= */

  #chatView{
    position:relative;
  }

  #thread{
    width:100%;
    max-width:760px;
    flex:1;
    overflow-y:auto;
    padding:8px 20px 150px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .msg{
    max-width:88%;
  }

  .msg.user{
    align-self:flex-end;
  }

  .msg.assistant{
    align-self:flex-start;
  }

  .bubble{
    padding:12px 16px;
    border-radius:14px;
    font-size:14.5px;
    line-height:1.9;
    white-space:pre-wrap;
  }

  .msg.user .bubble{
    background:var(--accent);
    color:#1a1305;
    border-bottom-right-radius:4px;
  }

  .msg.assistant .bubble{
    background:var(--surface);
    border:1px solid var(--border);
    border-bottom-left-radius:4px;
  }

  .empty{
    color:var(--text-dim);
    text-align:center;
    margin-top:60px;
    font-size:13.5px;
  }

  .typing{
    color:var(--text-dim);
    font-size:13px;
    padding:0 4px;
  }

  .sources{
    margin-top:8px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }

  .pill{
    font-size:11.5px;
    padding:4px 10px;
    border-radius:99px;
    background:var(--accent-soft);
    color:var(--accent);
    border:1px solid #e8a33d55;
  }

  .connection-status{
    width:100%;
    max-width:760px;
    margin:0 auto;
    padding:0 20px 6px;
    font-size:12px;
    color:var(--text-dim);
  }

  /* =========================================================
     Chat Upload
     ========================================================= */

  .upload-bar{
    width:100%;
    max-width:760px;
    padding:0 20px;
    margin:0 auto 8px;
  }

  .upload-note{
    font-size:11.5px;
    color:var(--text-dim);
    margin:0 0 8px;
  }

  .upload-note b{
    color:var(--accent);
    font-weight:600;
  }

  .attachments{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:6px;
  }

  .attach-chip{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11.5px;
    padding:5px 10px;
    border-radius:99px;
    background:var(--surface-2);
    border:1px solid var(--border);
    color:var(--text-dim);
  }

  /* =========================================================
     Chat Composer
     ========================================================= */

  #chatForm{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    justify-content:center;
    padding:16px 20px 22px;
    background:linear-gradient(to top,var(--bg) 55%,transparent);
    z-index:20;
  }

  .composer{
    width:100%;
    max-width:760px;
    display:flex;
    gap:8px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:14px;
    padding:8px;
  }

  input[type=text]{
    flex:1;
    min-width:0;
    background:transparent;
    border:none;
    outline:none;
    color:var(--text);
    font-family:inherit;
    font-size:14.5px;
    padding:8px 10px;
  }

  input::placeholder{
    color:var(--text-dim);
  }

  button{
    font-family:inherit;
    cursor:pointer;
  }

  .primary-btn{
    background:var(--accent);
    color:#1a1305;
    border:none;
    border-radius:10px;
    padding:0 18px;
    font-weight:600;
    font-size:14px;
  }

  button:disabled{
    opacity:.5;
    cursor:default;
  }

  .clip-btn{
    background:var(--surface-2);
    border:1px solid var(--border);
    color:var(--text-dim);
    border-radius:10px;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:16px;
    flex-shrink:0;
  }

  .clip-btn:hover{
    border-color:var(--accent);
    color:var(--accent);
  }

  /* =========================================================
     Admin
     ========================================================= */

  #adminView{
    overflow-y:auto;
    padding:8px 20px 40px;
  }

  .admin-container{
    width:100%;
    max-width:760px;
    margin:0 auto;
  }

  .panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:18px;
    margin-bottom:14px;
  }

  .panel-title{
    margin:0 0 4px;
    font-size:15px;
    font-weight:700;
  }

  .panel-description{
    margin:0 0 16px;
    color:var(--text-dim);
    font-size:12px;
    line-height:1.7;
  }

  .field{
    margin-bottom:12px;
  }

  .field:last-child{
    margin-bottom:0;
  }

  .field label{
    display:block;
    margin-bottom:6px;
    color:var(--text-dim);
    font-size:11.5px;
    font-weight:600;
  }

  .admin-input,
  .admin-select{
    width:100%;
    height:40px;
    padding:0 11px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:9px;
    outline:none;
    color:var(--text);
    font-family:inherit;
    font-size:13px;
  }

  .admin-input:focus,
  .admin-select:focus{
    border-color:#e8a33d77;
  }

  .admin-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

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

  .secondary-btn{
    height:40px;
    padding:0 15px;
    background:var(--surface-2);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:9px;
    font-size:13px;
    font-weight:600;
  }

  .secondary-btn:hover{
    border-color:#3a4356;
  }

  .danger-btn{
    height:40px;
    padding:0 15px;
    background:#d96c6c18;
    border:1px solid #d96c6c55;
    color:#e89595;
    border-radius:9px;
    font-size:13px;
    font-weight:600;
  }

  .status-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-bottom:14px;
  }

  .status-card{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px;
  }

  .status-card-title{
    color:var(--text-dim);
    font-size:10.5px;
    margin-bottom:5px;
  }

  .status-card-value{
    font-size:13px;
    font-weight:700;
  }

  .status-card-value.yes{
    color:var(--success);
  }

  .status-card-value.no{
    color:var(--danger);
  }

  .data-list{
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .data-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:8px 10px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:8px;
    font-size:11.5px;
  }

  .data-item span:first-child{
    color:var(--text-dim);
  }

  .data-item span:last-child{
    color:var(--text);
    font-weight:600;
    text-align:right;
  }

  .admin-log{
    margin-top:12px;
    padding:10px;
    min-height:45px;
    background:#10131a;
    border:1px solid var(--border);
    border-radius:9px;
    color:var(--text-dim);
    font-family:monospace;
    font-size:11px;
    line-height:1.7;
    white-space:pre-wrap;
    overflow:auto;
  }

  .admin-connection{
    font-size:11.5px;
    color:var(--text-dim);
    margin-top:8px;
  }

  .admin-connection.connected{
    color:var(--success);
  }

  .admin-connection.error{
    color:var(--danger);
  }

  /* =========================================================
     Admin Authentication / Access Gate
     ========================================================= */

  #adminView .admin-container{
    width:100%;
    max-width:760px;
    margin:0 auto;
  }

  #adminView .admin-login-panel{
    width:100%;
  }

  #adminView .admin-login-panel .field{
    margin-top:18px;
  }

  #adminView .admin-actions{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:14px;
  }

  #adminView #confirmAdminBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:120px;
    height:40px;
    padding:0 18px;
    background:var(--accent);
    color:#1a1305;
    border:none;
    border-radius:10px;
    font-family:inherit;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    opacity:1;
    visibility:visible;
  }

  #adminView #confirmAdminBtn:hover:not(:disabled){
    filter:brightness(1.06);
  }

  #adminView #confirmAdminBtn:disabled{
    opacity:.55;
    cursor:default;
  }

  #adminView .admin-input{
    display:block;
    width:100%;
    box-sizing:border-box;
  }

  .admin-content{
    display:none;
    width:100%;
    margin-top:14px;
  }

  .admin-content.unlocked{
    display:block;
  }

  /* The access gate controls visibility.
     Protected panels themselves must not hide their contents. */
  #adminView .admin-content .admin-protected{
    display:block;
  }

  #adminAuthMessage.success{
    color:var(--success);
  }

  #adminAuthMessage.error{
    color:var(--danger);
  }

  @media(max-width:600px){
    .admin-row{
      grid-template-columns:1fr;
    }

    .status-grid{
      grid-template-columns:1fr;
    }

    .admin-actions{
      flex-wrap:wrap;
    }
  }