/* ===== Refined UI: 3-column layout, large buttons, touch-friendly (PHP 5.6 safe) ===== */
*{box-sizing:border-box} :root{--bg:#f8fafc;--card:#fff;--muted:#64748b;--border:#e5e7eb;--acc:#2563eb;--ok:#10b981;--warn:#f59e0b;--err:#ef4444}
html,body{height:100%} body{margin:0;background:#f3f4f6;font:14px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial;color:#0f172a}
.container{max-width:1320px;margin:0 auto;padding:12px}
.nav{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px 14px;position:sticky;top:8px;z-index:20;box-shadow:0 4px 18px rgba(2,6,23,.05)}
.nav a{color:#0f172a;text-decoration:none;padding:8px 12px;border-radius:10px}
.nav a:hover{background:#f1f5f9}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:0 10px 20px rgba(2,6,23,.06)}
h2{margin:0 0 8px 0;font-size:15px}
.grid{display:grid;gap:12px}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:8px;text-align:left}
.table th{color:var(--muted);font-weight:600}
label{font-size:12px;color:var(--muted);display:block;margin:6px 0 4px}
input[type=text],input[type=file],textarea,select{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:#f8fafc;outline:none}
textarea{min-height:96px;resize:vertical}
button,.btn{appearance:none;-webkit-appearance:none;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#0ea5e9;color:#fff;cursor:pointer;box-shadow:0 2px 10px rgba(14,165,233,.25);min-height:42px;line-height:1.2}
button:hover,.btn:hover{filter:brightness(.97)}
button:active,.btn:active{transform:translateY(1px)}
.btn-ghost{background:#fff;color:#0f172a}
.btn-tab{background:#fff;color:#0f172a;border:1px solid var(--border)}
.btn-tab.active{background:#e0f2fe;border-color:#93c5fd}
.badge{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:12px;background:#f8fafc}
.badge .dot{width:8px;height:8px;border-radius:999px;background:#94a3b8;display:inline-block}
.badge.open .dot{background:var(--ok)} .badge.hold .dot{background:var(--warn)} .badge.closed .dot{background:var(--err)}
/* Layout */
.layout{display:grid;grid-template-columns:320px minmax(420px,1fr) 380px;gap:12px;margin-top:12px}
.col{min-height:70vh}
.col-left,.col-mid,.col-right{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px;position:relative;overflow:auto}
.sticky-top{position:sticky;top:12px;background:var(--card);z-index:5;padding-bottom:8px}
/* Left: filters + list */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters .btn-tab{flex:1 1 48%;text-align:left}
.status-group .btn-tab{flex:1}
#listThreads{margin-top:10px;display:grid;gap:8px}
.tile{border:1px solid var(--border);border-radius:14px;padding:10px;background:#fff;cursor:pointer;box-shadow:0 3px 10px rgba(2,6,23,.05);display:block}
.tile:active{transform:translateY(1px)}
.tile .top{display:flex;justify-content:space-between;margin-bottom:6px}
.tile .top b{font-size:13px}
/* Middle: chat */
.msgbox{height:56vh;overflow:auto;border:1px dashed var(--border);border-radius:12px;padding:8px;background:#f8fafc}
.msg{max-width:78%;margin:8px 0;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--border);box-shadow:0 2px 8px rgba(2,6,23,.05)}
.msg.me{margin-left:auto;background:#eff6ff;border-color:#bfdbfe}
.msg.them{margin-right:auto}
.msg img{max-width:240px;max-height:180px;border-radius:10px;border:1px solid #e5e7eb;display:block}
.msg .imgs{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
/* Right: accordion panels */
.accordion{display:grid;gap:8px}
.panel{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.panel summary{list-style:none;cursor:pointer;padding:10px 12px;background:#f8fafc}
.panel summary::-webkit-details-marker{display:none}
.panel .inner{padding:10px 12px;background:#fff}
/* Responsive */
@media (max-width: 1100px){
  .layout{grid-template-columns:1fr}
  .col{min-height:auto}
  .msgbox{height:46vh}
}
/* Focus states for accessibility */
button:focus, .btn:focus, .btn-tab:focus, input:focus, textarea:focus, select:focus{outline:3px solid #bfdbfe; outline-offset:2px}