:root{--blue-50: #eff6ff;--blue-100: #dbeafe;--blue-200: #bfdbfe;--blue-500: #3b82f6;--blue-600: #2563eb;--blue-700: #1d4ed8;--blue-900: #1e3a8a;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-900: #0f172a;--red-600: #dc2626;--green-600: #16a34a;--amber-500: #f59e0b;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;color:var(--slate-900);background:var(--slate-100)}*{box-sizing:border-box}body{margin:0;min-height:100vh}.app{max-width:1200px;margin:0 auto;padding:var(--space-6) var(--space-4) var(--space-8);position:relative}.app-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}.app-header h1{font-size:1.5rem;font-weight:600;margin:0;color:var(--slate-900);line-height:1.2}.icon-btn-settings{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:1px solid var(--slate-300);border-radius:10px;background:#fff;color:var(--slate-600);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.icon-btn-settings:hover{background:var(--slate-50);color:var(--blue-600);border-color:var(--blue-200)}.icon-btn-settings:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px}.icon-gear{display:block}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:#0f172a73;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-sheet{position:relative;width:100%;max-width:28rem;padding:var(--space-5) var(--space-6);background:#fff;border-radius:12px;border:1px solid var(--slate-200);box-shadow:0 25px 50px -12px #0f172a40,0 0 0 1px #0f172a0a}.modal-sheet h2{font-size:1.125rem;font-weight:600;margin:0 0 var(--space-3);padding-right:var(--space-8);color:var(--slate-900)}.modal-sheet .settings-hint{font-size:.85rem;color:var(--slate-600);margin:0 0 var(--space-4);line-height:1.5}.system-settings-row{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-end}.system-settings-row label{display:flex;flex-direction:column;gap:var(--space-2);font-size:.8rem;font-weight:500;color:var(--slate-700)}.modal-close{position:absolute;top:var(--space-3);right:var(--space-3);width:2rem;height:2rem;padding:0;border:none;border-radius:8px;background:transparent;color:var(--slate-500);font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease,color .15s ease}.modal-close:hover{background:var(--slate-100);color:var(--slate-800)}.modal-close:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px}.layout{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:var(--space-5);align-items:start}@media (max-width: 768px){.layout{grid-template-columns:1fr}}.panel{background:#fff;border-radius:12px;border:1px solid var(--slate-200);box-shadow:0 1px 3px #0f172a14,0 1px 2px #0f172a0a;overflow:hidden;transition:box-shadow .2s ease}.panel:hover{box-shadow:0 4px 6px #0f172a1a,0 2px 4px #0f172a0f}.panel-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--slate-200);font-weight:600;font-size:.875rem;color:var(--slate-700);background:var(--blue-50);letter-spacing:.01em}.ticket-list{list-style:none;margin:0;padding:0;max-height:70vh;overflow-y:auto}.ticket-list button{width:100%;text-align:left;padding:var(--space-4) var(--space-5);border:none;border-bottom:1px solid var(--slate-100);background:#fff;cursor:pointer;font:inherit;transition:background-color .15s ease,border-color .15s ease;position:relative}.ticket-list button:hover{background:var(--slate-50)}.ticket-list button:focus-visible{outline:2px solid var(--blue-500);outline-offset:-2px;z-index:1}.ticket-list button.active{background:var(--blue-50);border-left:4px solid var(--blue-600);padding-left:calc(var(--space-5) - 4px);font-weight:500}.ticket-list button.active:hover{background:var(--blue-100)}.ticket-meta{font-size:.75rem;color:var(--slate-500);margin-top:var(--space-1);line-height:1.4}.status{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .5rem;border-radius:999px;background:var(--blue-100);color:var(--blue-900);font-weight:600;border:1px solid var(--blue-200)}.detail{padding:var(--space-5)}.detail h2{font-size:1.125rem;font-weight:600;margin:0 0 var(--space-3);color:var(--slate-900)}.timeline{margin:var(--space-5) 0;max-height:45vh;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-2);background:var(--slate-50);border-radius:8px;border:1px solid var(--slate-200)}.bubble{max-width:85%;padding:var(--space-3) var(--space-4);border-radius:12px;font-size:.9rem;line-height:1.5;box-shadow:0 1px 2px #0f172a0d}.bubble.inbound{align-self:flex-start;background:#fff;color:var(--slate-900);border:1px solid var(--slate-200)}.bubble.outbound{align-self:flex-end;background:var(--blue-600);color:#fff;border:1px solid var(--blue-700)}.bubble .msg-author{font-size:.75rem;font-weight:600;color:inherit;opacity:.95;margin-bottom:var(--space-2);letter-spacing:.02em}.bubble.inbound .msg-author{color:var(--slate-600)}.bubble.outbound .msg-author{color:var(--blue-100)}.bubble .msg-body{white-space:pre-wrap;word-break:break-word}.bubble .when{font-size:.7rem;margin-top:var(--space-2);opacity:.7}.bubble.inbound .when{color:var(--slate-500)}.bubble.outbound .when{color:var(--blue-100)}.row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-bottom:var(--space-4)}select,textarea,input[type=text],button{font:inherit}.filters{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-end;margin-bottom:var(--space-5);padding:var(--space-4) var(--space-5);background:#fff;border:1px solid var(--slate-200);border-radius:12px;box-shadow:0 1px 2px #0f172a0a}.filters label{display:flex;flex-direction:column;gap:var(--space-2);font-size:.8rem;font-weight:500;color:var(--slate-700)}.filters input[type=text]{min-width:180px;padding:var(--space-2) var(--space-3);border-radius:8px;border:1px solid var(--slate-300);transition:border-color .15s ease,box-shadow .15s ease}.filters input[type=text]:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px #3b82f61a}.new-ticket-row{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-end;margin-bottom:var(--space-5);padding:var(--space-4);background:var(--blue-50);border-radius:8px;border:1px solid var(--blue-200)}.new-ticket-row label{display:flex;flex-direction:column;gap:var(--space-2);font-size:.8rem;font-weight:500;color:var(--slate-700)}.new-ticket-row input[type=text]{min-width:240px;padding:var(--space-2) var(--space-3);border-radius:8px;border:1px solid var(--blue-300);background:#fff;transition:border-color .15s ease,box-shadow .15s ease}.new-ticket-row input[type=text]:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px #3b82f626}.ticket-meta.subtle{font-size:.68rem;word-break:break-all;color:var(--slate-400)}.btn{padding:var(--space-3) var(--space-5);border-radius:8px;border:none;background:var(--blue-600);color:#fff;cursor:pointer;font-weight:500;font-size:.875rem;transition:background-color .15s ease,transform .1s ease,box-shadow .15s ease;box-shadow:0 1px 2px #2563eb33}.btn:hover:not(:disabled){background:var(--blue-700);box-shadow:0 2px 4px #2563eb4d;transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 2px #2563eb33}.btn:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn.secondary{background:#fff;color:var(--slate-700);border:1px solid var(--slate-300);box-shadow:0 1px 2px #0f172a0d}.btn.secondary:hover:not(:disabled){background:var(--slate-50);border-color:var(--slate-400);box-shadow:0 2px 4px #0f172a1a}.btn.secondary:active:not(:disabled){background:var(--slate-100)}select{padding:var(--space-2) var(--space-3);border-radius:8px;border:1px solid var(--slate-300);background:#fff;color:var(--slate-700);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}select:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px #3b82f61a}textarea{width:100%;min-height:80px;padding:var(--space-3) var(--space-4);border-radius:8px;border:1px solid var(--slate-300);resize:vertical;transition:border-color .15s ease,box-shadow .15s ease;line-height:1.5}textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px #3b82f61a}textarea::placeholder{color:var(--slate-400)}.err{color:var(--red-600);font-size:.875rem;margin:var(--space-3) 0;padding:var(--space-3) var(--space-4);background:#fef2f2;border:1px solid #fecaca;border-radius:8px;font-weight:500}.empty{padding:var(--space-8);text-align:center;color:var(--slate-500);font-size:.9rem;line-height:1.6;background:var(--slate-50);border-radius:8px;border:1px dashed var(--slate-300);margin:var(--space-4) 0}.filters .checkbox-inline{flex-direction:row;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none}.handoff-badge{display:inline-block;margin-left:var(--space-2);font-size:.65rem;text-transform:uppercase;letter-spacing:.04em;padding:.15rem .45rem;border-radius:999px;background:#fff7ed;color:#9a3412;border:1px solid #fdba74;font-weight:600}.handoff-banner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin:var(--space-4) 0;padding:var(--space-3) var(--space-4);background:#fffbeb;border:1px solid #fcd34d;border-radius:8px;font-size:.875rem;color:var(--slate-800)}.handoff-banner .handoff-reason{font-weight:400;color:var(--slate-600)}