:root{
  --bg:#f4f7fb;
  --panel:#ffffff;
  --panel-soft:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --primary:#2563eb;
  --dark:#0f172a;
  --success:#16a34a;
  --danger:#ef4444;
  --warning:#f59e0b;
  --radius:18px;
  --shadow:0 16px 40px rgba(15,23,42,.08);
}

*{box-sizing:border-box}

body{
  margin:0!important;
  background:linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%)!important;
  color:var(--text)!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
}

.wrap{
  width:min(1680px,94%)!important;
  max-width:none!important;
  margin:28px auto!important;
  padding:0!important;
}

.topbar{
  background:var(--panel)!important;
  border:1px solid var(--border)!important;
  border-radius:24px!important;
  box-shadow:var(--shadow)!important;
  padding:22px 26px!important;
  margin-bottom:22px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:20px!important;
}

.title{
  font-size:34px!important;
  font-weight:800!important;
  letter-spacing:-.03em!important;
  color:var(--text)!important;
}

.meta{
  color:var(--muted)!important;
  font-size:13px!important;
}

.card{
  background:var(--panel)!important;
  border:1px solid var(--border)!important;
  border-radius:22px!important;
  box-shadow:var(--shadow)!important;
  overflow:hidden!important;
}

button,
.btn,
.btn-light,
input[type="submit"]{
  border-radius:12px!important;
  font-weight:700!important;
  text-decoration:none!important;
  transition:.15s ease!important;
}

button,
.btn{
  background:var(--dark)!important;
  color:#fff!important;
  border:1px solid var(--dark)!important;
}

.btn-light{
  background:#fff!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
}

button:hover,
.btn:hover,
.btn-light:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 8px 18px rgba(15,23,42,.10)!important;
}

input,
select,
textarea{
  border:1px solid var(--border)!important;
  border-radius:14px!important;
  background:#fff!important;
  color:var(--text)!important;
  padding:12px 14px!important;
  font-size:14px!important;
  outline:none!important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--primary)!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12)!important;
}

table{
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}

th{
  background:#f8fafc!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  letter-spacing:.05em!important;
}

th,td{
  padding:16px 18px!important;
  border-bottom:1px solid #eef2f7!important;
  vertical-align:middle!important;
}

tr:hover td{
  background:#f8fafc!important;
}

td a{
  color:#0f172a!important;
  text-decoration:none!important;
  font-weight:800!important;
}

.ticket-no-reply td{
  background:#fff7f7!important;
  border-left:none!important;
}

.ticket-no-reply td:first-child{
  border-left:4px solid var(--danger)!important;
}

.badge,
.status,
[class*="badge"]{
  border-radius:999px!important;
  padding:6px 12px!important;
  font-weight:800!important;
  font-size:13px!important;
}

a[href="/desk/web-clients"]{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:10px 14px!important;
  border-radius:14px!important;
  background:#fff!important;
  border:1px solid var(--border)!important;
  color:var(--text)!important;
  text-decoration:none!important;
  font-weight:800!important;
}

form{
  gap:10px!important;
}

@media(max-width:900px){
  .wrap{width:96%!important;margin:14px auto!important}
  .topbar{flex-direction:column!important;padding:18px!important}
  .title{font-size:28px!important}
  table{font-size:13px!important}
  th,td{padding:12px!important}
}

/* ===== Ticket chat redesign ===== */
.ticket-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 420px;
    gap:24px;
    align-items:start;
}

.chat-card{
    padding:0;
    overflow:hidden;
}

.chat-head{
    padding:22px 24px;
    border-bottom:1px solid var(--border);
}

.chat-timeline{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:14px;
    max-height:68vh;
    overflow:auto;
}

.chat-msg{
    max-width:76%;
    padding:14px 16px;
    border-radius:18px;
    border:1px solid var(--border);
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.chat-msg.client{
    align-self:flex-start;
    background:#ffffff;
    border-top-left-radius:6px;
}

.chat-msg.specialist{
    align-self:flex-end;
    background:#eff6ff;
    border-color:#bfdbfe;
    border-top-right-radius:6px;
}

.chat-msg .chat-meta{
    font-size:12px;
    color:var(--muted);
    margin-bottom:6px;
    font-weight:700;
}

.chat-msg .chat-text{
    white-space:pre-wrap;
    line-height:1.45;
}

.chat-file{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:6px;
    padding:10px 12px;
    border-radius:12px;
    background:#f8fafc;
    border:1px solid var(--border);
    text-decoration:none;
    color:var(--text);
    font-weight:700;
}

.chat-composer{
    padding:18px 24px 24px;
    border-top:1px solid var(--border);
    background:var(--panel-soft);
}

.chat-composer textarea{
    min-height:110px;
}

.chat-composer-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    margin-top:12px;
}

.file-inline{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}

.ticket-side{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.ticket-title-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
    margin:22px 0;
}

.ticket-title-row h1{
    margin:0;
}

@media(max-width:1100px){
    .ticket-layout{
        grid-template-columns:1fr;
    }
    .chat-msg{
        max-width:92%;
    }
}

/* ===== Ticket chat UI ===== */

.ticket-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:20px;
    align-items:start;
}

.chat-panel{
    padding:0;
    overflow:hidden;
}

.chat-header{
    padding:18px 20px;
    border-bottom:1px solid var(--border);
    background:var(--panel-soft);
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:center;
}

.chat-body{
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:420px;
    max-height:68vh;
    overflow-y:auto;
    background:linear-gradient(180deg,#f8fafc 0%,#eef3f9 100%);
}

.chat-msg{
    max-width:78%;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.chat-msg.client{
    align-self:flex-start;
}

.chat-msg.specialist{
    align-self:flex-end;
}

.chat-meta{
    font-size:12px;
    color:var(--muted);
    padding:0 4px;
}

.chat-text,
.chat-file{
    display:block;
    padding:12px 14px;
    border-radius:16px;
    line-height:1.45;
    font-size:14px;
    word-break:break-word;
    box-shadow:var(--shadow-sm);
}

.chat-msg.client .chat-text,
.chat-msg.client .chat-file{
    background:#fff;
    border:1px solid var(--border);
    border-top-left-radius:6px;
}

.chat-msg.specialist .chat-text,
.chat-msg.specialist .chat-file{
    background:#2563eb;
    color:#fff;
    border:1px solid #2563eb;
    border-top-right-radius:6px;
}

.chat-file{
    text-decoration:none;
    font-weight:700;
}

.chat-composer{
    border-top:1px solid var(--border);
    background:#fff;
    padding:16px;
}

.chat-composer textarea{
    width:100%;
    min-height:96px;
    resize:vertical;
    margin-bottom:10px;
}

.chat-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
}

.inline-upload{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}

.inline-upload input[type=file]{
    max-width:260px;
}

.side-card{
    display:flex;
    flex-direction:column;
    gap:14px;
}

@media(max-width:1100px){
    .ticket-layout{
        grid-template-columns:1fr;
    }

    .chat-msg{
        max-width:92%;
    }
}

/* ===== Ticket final chat composer polish ===== */

.chat-composer-card{
    padding:18px;
}

.chat-composer{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.chat-composer textarea{
    min-height:150px;
    margin-top:0;
    border-radius:14px;
}

.chat-composer button{
    width:100%;
}

.chat-upload{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--border);
    display:grid;
    gap:10px;
}

.chat-upload label{
    margin:0;
    font-weight:700;
    color:var(--text);
}

.chat-upload input[type="file"]{
    margin-top:0;
    background:var(--panel-soft);
}

.chat-upload button{
    width:100%;
}

.chat-card{
    padding:0;
    overflow:hidden;
}

.chat-head{
    padding:18px 20px;
    border-bottom:1px solid var(--border);
    background:var(--panel-soft);
}

.chat-timeline{
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:420px;
    max-height:68vh;
    overflow-y:auto;
    background:linear-gradient(180deg,#f8fafc 0%,#eef3f9 100%);
}


/* ===== Unified chat composer ===== */
.chat-composer{
    display:grid;
    gap:12px;
}

.chat-composer textarea{
    min-height:150px;
}

.chat-file-picker{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 14px;
    border:1px dashed var(--border);
    border-radius:14px;
    background:var(--panel-soft);
    cursor:pointer;
    font-weight:700;
    color:var(--muted);
}

.chat-file-picker input{
    display:none;
}

.chat-file-picker:hover{
    border-color:var(--primary);
    color:var(--primary);
    background:#eff6ff;
}

.chat-file-picker{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 14px;
    border:1px dashed var(--border);
    border-radius:14px;
    background:var(--panel-soft);
    cursor:pointer;
    font-weight:700;
    color:var(--muted);
}
.chat-file-picker input{display:none;}
.chat-file-picker:hover{
    border-color:var(--primary);
    color:var(--primary);
    background:#eff6ff;
}