:root{
  --bg:#0b1020;
  --panel:#121a33;
  --panel2:#0f1730;
  --text:#e8ecff;
  --muted:#9aa6d6;
  --accent:#7aa2ff;
  --danger:#ff6b6b;
  --ok:#2ee59d;
  --warning:#ffd166;
  --border:rgba(255,255,255,0.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; background:linear-gradient(180deg,var(--bg),#070b16); color:var(--text)}
a{color:inherit;text-decoration:none}
.layout{display:flex; min-height:100vh}
.sidebar{width:260px; padding:20px; background:rgba(255,255,255,0.03); border-right:1px solid var(--border)}
.brand{font-weight:800; letter-spacing:.3px; margin-bottom:18px}
.nav{display:flex;flex-direction:column; gap:8px}
.nav-item{padding:10px 12px; border-radius:12px; background:transparent; border:1px solid transparent}
@media (hover: hover){
  .nav-item:hover{background:rgba(255,255,255,0.05); border-color:var(--border)}
  .card:hover{border-color:rgba(122,162,255,0.6)}
  .btn:hover{background:rgba(122,162,255,0.2)}
}
.logout{margin-top:18px}
.content{flex:1; padding:24px}
.page-header{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px}
h1{margin:0; font-size:22px}
h2{margin:0 0 12px 0; font-size:16px}
.panel{background:rgba(255,255,255,0.04); border:1px solid var(--border); padding:16px; border-radius:16px; margin-bottom:16px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.card{display:block; padding:14px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:16px}
.card:hover{border-color:rgba(122,162,255,0.6)}
.card-title{color:var(--muted); font-size:12px}
.card-value{font-size:28px; font-weight:800; margin-top:8px}
.badge{display:inline-flex; gap:6px; align-items:baseline; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid var(--border); margin-right:6px}
.muted{color:var(--muted); font-size:12px}
.tabs{display:flex; gap:8px}
.tab{padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.03)}
.tab.active{border-color:rgba(122,162,255,0.65)}
.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:12px}
.field{display:flex; flex-direction:column; gap:6px}
.field>span{font-size:12px; color:var(--muted)}
.field input,.field select,.field textarea{
  background:rgba(0,0,0,0.25);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  color:var(--text);
  outline:none;
}
.field textarea{resize:vertical}
.checkbox{flex-direction:row; align-items:center; gap:10px}
.checkbox input{width:18px; height:18px}
.btn{
  border:1px solid rgba(122,162,255,0.6);
  background:rgba(122,162,255,0.12);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}
.btn:hover{background:rgba(122,162,255,0.2)}
.btn-secondary{border-color:var(--border); background:rgba(255,255,255,0.04)}
.btn-small{padding:6px 10px; border-radius:10px; font-size:12px}
.table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:16px; border:1px solid var(--border)}
.table th,.table td{padding:12px 12px; border-bottom:1px solid var(--border); vertical-align:top}
.table th{background:rgba(255,255,255,0.03); text-align:left; color:var(--muted); font-size:12px; font-weight:700}
.user-cell b{font-size:13px}
.pill{display:inline-flex; padding:4px 8px; border-radius:999px; border:1px solid var(--border); font-size:12px}
.pill-new{border-color:rgba(255,209,102,0.5); background:rgba(255,209,102,0.12)}
.pill-in_progress{border-color:rgba(122,162,255,0.6); background:rgba(122,162,255,0.12)}
.pill-waiting_user{border-color:rgba(46,229,157,0.55); background:rgba(46,229,157,0.10)}
.pill-closed{border-color:rgba(255,107,107,0.55); background:rgba(255,107,107,0.10)}
.pill-user{border-color:rgba(255,209,102,0.5); background:rgba(255,209,102,0.12)}
.pill-manager{border-color:rgba(122,162,255,0.6); background:rgba(122,162,255,0.12)}
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.timeline{display:flex; flex-direction:column; gap:10px}
.msg{border:1px solid var(--border); border-radius:14px; padding:10px 12px; background:rgba(255,255,255,0.03)}
.msg-user{border-left:4px solid rgba(255,209,102,0.75)}
.msg-manager{border-left:4px solid rgba(122,162,255,0.75)}
.msg-meta{display:flex; gap:8px; align-items:center; margin-bottom:6px}
.msg-body{white-space:pre-wrap}
.form{display:flex; flex-direction:column; gap:12px}
.form-inline{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.actions{display:flex; gap:8px}
.flashes{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
.flash{padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,0.04)}
.flash-success{border-color:rgba(46,229,157,0.55)}
.flash-error{border-color:rgba(255,107,107,0.55)}
.flash-warning{border-color:rgba(255,209,102,0.55)}
.hint{color:var(--muted); font-size:12px; margin-top:12px}
.login-page{display:flex; align-items:center; justify-content:center; min-height:100vh}
.login-card{width:min(420px,92vw); background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:18px; padding:18px}
.login-card h1{margin-bottom:12px}
/* mobile nav */
.mobile-nav-bar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:52px;
  padding:0 14px;
  display:none;
  align-items:center;
  gap:12px;
  background:rgba(11,16,32,0.98);
  border-bottom:1px solid var(--border);
  z-index:40;
}
.mobile-nav-title{
  font-weight:700;
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mobile-nav-toggle{
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.02);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
}
.mobile-nav-toggle-line{
  width:18px;
  height:2px;
  background:var(--text);
  border-radius:999px;
}
.mobile-nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.18s ease-out;
  z-index:39;
}
.mobile-nav-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.mobile-nav-drawer{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:260px;
  background:rgba(11,16,32,0.98);
  border-right:1px solid var(--border);
  transform:translateX(-100%);
  transition:transform 0.2s ease-out;
  z-index:41;
  display:flex;
  flex-direction:column;
  padding:16px 16px 20px 16px;
}
.mobile-nav-drawer.is-open{
  transform:translateX(0);
}
.mobile-nav-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.mobile-nav-header-title{
  font-weight:800;
}
.mobile-nav-close{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.02);
  color:var(--muted);
  cursor:pointer;
}
.mobile-nav-links{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.mobile-nav-item{
  padding:9px 12px;
  border-radius:12px;
  border:1px solid transparent;
  font-size:14px;
}
.mobile-nav-item:hover{
  border-color:var(--border);
  background:rgba(255,255,255,0.04);
}
.mobile-nav-logout{margin-top:auto}
.mobile-nav-logout-btn{width:100%}

/* chat layout */
.chat-page{display:flex; flex-direction:column; gap:12px}
.chat-header{display:flex; flex-direction:column; gap:8px}
.chat-header-main{display:flex; justify-content:space-between; align-items:flex-end; gap:16px}
.chat-header-title h1{margin:0; font-size:22px}
.chat-header-user{display:flex; flex-direction:column; gap:4px; text-align:right}
.chat-header-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12px}
.chat-layout{display:grid; grid-template-columns:minmax(0,2.4fr) minmax(260px,0.9fr); gap:12px; align-items:start}
.chat-main{display:flex; flex-direction:column; gap:10px; padding:0}
.chat-messages{flex:1; max-height:60vh; min-height:260px; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; background:var(--panel2); border-bottom:1px solid var(--border); border-radius:16px 16px 0 0}
.chat-message-row{display:flex; width:100%; margin-bottom:2px}
.chat-message-left{justify-content:flex-start}
.chat-message-right{justify-content:flex-end}
.chat-message-bubble{max-width:80%; padding:10px 12px; border-radius:16px; background:rgba(255,255,255,0.03); border:1px solid var(--border); box-shadow:0 0 0 1px rgba(0,0,0,0.35)}
.chat-message-bubble-user{border-top-left-radius:4px; border-left:3px solid rgba(255,209,102,0.8)}
.chat-message-bubble-manager{border-top-right-radius:4px; border-right:3px solid rgba(122,162,255,0.8); background:rgba(122,162,255,0.08)}
.chat-message-meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:4px}
.chat-message-text{white-space:pre-wrap; font-size:14px; line-height:1.4}
.chat-attachments{margin-top:6px; display:flex; flex-direction:column; gap:6px}
.chat-attachment{border-radius:12px; padding:8px; border:1px dashed rgba(255,255,255,0.08); background:rgba(0,0,0,0.12); display:flex; gap:8px; align-items:flex-start}
.chat-attachment-photo{flex-direction:column}
.chat-attachment-image{max-width:220px; border-radius:10px; display:block}
.chat-attachment-icon{font-size:18px; width:22px; text-align:center; margin-top:2px}
.chat-attachment-info{display:flex; flex-direction:column; gap:2px}
.chat-attachment-name{text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px}
.chat-attachment-meta{font-size:11px}
.chat-composer{padding:12px 16px 14px 16px}
.chat-composer-form{display:flex; flex-direction:column; gap:10px}
.chat-composer-top{display:flex; flex-direction:column}
.chat-composer-textarea textarea{min-height:72px}
.chat-composer-bottom{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.chat-composer-left{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.chat-file-input{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.chat-file-button{display:inline-flex; align-items:center; gap:6px}
.chat-file-preview{max-width:260px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.chat-sidebar{display:flex; flex-direction:column; gap:12px}
.chat-user-block{display:flex; flex-direction:column; gap:4px}

/* new composer layout */
.chat-composer-bottom{
  display:flex;
  align-items:flex-end;
  gap:8px;
}
.chat-composer-left{
  display:flex;
  align-items:center;
  gap:6px;
}
.chat-composer-center{
  flex:1;
}
.chat-composer-input{
  width:100%;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.35);
  color:var(--text);
  padding:10px 14px;
  resize:none;
  font-family:inherit;
  font-size:14px;
  line-height:1.4;
  max-height:160px;
}
.chat-composer-attach{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.chat-composer-attach-icon{
  font-size:20px;
  line-height:1;
}
.chat-composer-send{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(122,162,255,0.7);
  background:rgba(122,162,255,0.2);
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.chat-composer-file-preview{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}
.chat-composer-file-preview:not(.is-filled){
  opacity:0.7;
}
.chat-file-preview-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-file-preview-remove{
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  padding:2px 4px;
}

/* ticket sheet bottom modal (mobile) */
.chat-ticket-toggle{
  margin-left:auto;
}
.chat-ticket-sheet-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.18s ease-out;
  z-index:45;
}
.chat-ticket-sheet-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.chat-ticket-sheet{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  max-height:80vh;
  background:rgba(11,16,32,0.98);
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  box-shadow:0 -10px 30px rgba(0,0,0,0.6);
  transform:translateY(100%);
  transition:transform 0.22s ease-out;
  z-index:46;
}
.chat-ticket-sheet.is-open{
  transform:translateY(0);
}
.chat-ticket-sheet-handle{
  width:46px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,0.16);
  margin:6px auto 4px auto;
}
.chat-ticket-sheet-content{
  padding:8px 14px 14px 14px;
  overflow-y:auto;
  max-height:calc(80vh - 12px);
}

@media (min-width: 769px){
  .chat-ticket-toggle{display:none}
  .chat-ticket-sheet,
  .chat-ticket-sheet-overlay{display:none}
}

/* ticket list cards (mobile) */
.tickets-table{width:100%}
.tickets-cards{display:none; flex-direction:column; gap:8px}
.ticket-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
}
.ticket-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.ticket-card-user{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ticket-card-username{
  font-size:12px;
  color:var(--muted);
}
.ticket-card-meta{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:8px;
  font-size:12px;
  color:var(--muted);
}
.ticket-card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:4px;
}
.ticket-card-link{
  flex:1;
  display:flex;
  justify-content:flex-start;
}
.ticket-card-delete{
  flex-shrink:0;
}

/* responsive breakpoints */
@media (max-width: 1024px){
  .sidebar{display:none}
  .mobile-nav-bar{display:flex}
  .content{padding:72px 14px 18px 14px}
  .layout{min-height:calc(100vh - 52px)}
  .grid-2{grid-template-columns:1fr}
  .chat-layout{grid-template-columns:1fr}
}

@media (max-width: 768px){
  .cards{grid-template-columns:1fr}
  .card{padding:12px}
  .card-value{font-size:32px}
  .page-header{flex-direction:column; align-items:flex-start}
  .tabs{width:100%; overflow-x:auto}
  .filters{flex-direction:column; align-items:stretch}
  .form-inline{flex-direction:column; align-items:stretch}
  .table{display:block; overflow-x:auto; border-radius:14px}
  .table table{width:100%}
  .table th,.table td{padding:8px 10px}
  .tickets-table{display:none}
  .tickets-cards{display:flex}
  .chat-header-main{flex-direction:column; align-items:flex-start}
  .chat-header-user{text-align:left}
  .chat-layout{display:flex; flex-direction:column}
  .chat-page{min-height:calc(100vh - 52px)}
  .chat-main{
    flex:1;
    min-height:0;
    padding:0;
  }
  .chat-messages{
    flex:1;
    max-height:none;
    height:calc(100vh - 52px - 56px - 140px);
    border-radius:16px 16px 0 0;
  }
  .chat-composer{
    position:sticky;
    bottom:0;
    padding:10px 0 0 0;
    background:linear-gradient(180deg,rgba(11,16,32,0),rgba(11,16,32,0.96));
  }
  .chat-composer-inner{
    border-radius:16px 16px 0 0;
    background:var(--panel2);
    border-top:1px solid var(--border);
    padding:8px 12px 12px 12px;
  }
  .chat-message-bubble{
    max-width:78%;
    padding:8px 10px;
  }
  .chat-attachment-image{
    max-width:100%;
  }
}

@media (max-width: 480px){
  .content{padding:70px 10px 14px 10px}
  .card-value{font-size:28px}
  .btn{min-height:44px; padding-inline:12px}
  .mobile-nav-toggle{width:40px;height:40px}
  .chat-messages{
    padding:12px 10px;
  }
  .chat-message-bubble{
    max-width:82%;
  }
  .ticket-card{
    padding:9px 10px;
  }
}