*{box-sizing:border-box}body{margin:0;padding:0;height:100vh;font-family:"Segoe UI",Arial,sans-serif;background:radial-gradient(circle at top,#0f4c81 0,#172554 40%,#0b1120 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#0f172a}.start-overlay{position:fixed;inset:0;background:rgba(15,23,42,.75);display:flex;align-items:center;justify-content:center;z-index:2}.start-overlay[hidden]{display:none!important}.start-card{background:#fff;padding:32px 28px;width:360px;max-width:calc(100vw - 40px);border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.35);display:flex;flex-direction:column;gap:18px}.start-card h1{font-size:1.35rem;margin:0;color:#0f172a}.start-card p{margin:0;color:#475569;font-size:.95rem;line-height:1.5}.start-form label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:#1e293b}.start-form input{border-radius:12px;border:1px solid #cbd5f5;padding:12px;font-size:.95rem;transition:border .2s ease , box-shadow .2s ease}.start-form input:focus{outline:0;border-color:rgba(15,76,129,.55);box-shadow:0 0 0 3px rgba(15,76,129,.15)}.start-actions{display:flex;justify-content:flex-end}.start-outside{display:flex;flex-direction:column;gap:18px;align-items:stretch;text-align:center}.start-outside p{margin:0;color:#1f2937;font-size:.95rem;line-height:1.5}.start-outside button{align-self:center}.btn{border-radius:12px;padding:12px 18px;font-weight:600;border:0;cursor:pointer;transition:transform .2s ease , box-shadow .2s ease}.btn-primary{background:linear-gradient(135deg,#0f4c81 0,#3aa1a3 100%);color:#fff;box-shadow:0 14px 30px rgba(15,76,129,.35)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(15,76,129,.4)}.container{width:50%;max-width:520px;min-width:360px;position:relative}.chatbox{width:100%;height:75vh;background:#fff;border-radius:18px;box-shadow:0 28px 90px rgba(15,23,42,.4);overflow:hidden;display:flex;flex-direction:column;transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;transition:opacity .3s ease , transform .3s ease}.chatbox.is-active{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}.bar{position:relative;height:58px;background:linear-gradient(135deg,#0f4c81 0,#2563eb 100%);display:flex;align-items:center;padding:0 18px}.status{width:10px;height:10px;border-radius:50%;background:#4ade80;margin-right:12px}.status.status--offline{background:#ef4444}.name-wrapper{display:flex;flex-direction:column;gap:2px}.name{color:#fff;font-size:1rem;font-weight:600}.subtitle{color:rgba(226,232,240,.75);font-size:.75rem}.icon-container{display:flex;align-items:center;gap:14px}.icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;font-size:1.1rem;transition:background .2s ease , transform .2s ease}.icon:hover{background:rgba(255,255,255,.25);transform:translateY(-1px)}.chat-history{flex:1;background:#f8fafc;padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.chat-status-banner{display:none;padding:12px 18px;font-size:.9rem;line-height:1.4;background:rgba(59,130,246,.12);color:#1d4ed8;border-top:1px solid rgba(15,23,42,.08);border-bottom:1px solid rgba(15,23,42,.08)}.chat-status-banner[data-visible="true"]{display:block}.chat-status-banner.is-warning{background:rgba(251,191,36,.18);color:#92400e}.chat-status-banner.is-error{background:rgba(248,113,113,.2);color:#991b1b}.messages{display:flex;flex-direction:column;gap:12px}.message{max-width:78%;padding:12px 14px;border-radius:14px;font-size:.95rem;line-height:1.4;box-shadow:0 10px 24px rgba(15,23,42,.1)}.message--incoming{align-self:flex-start;background:#fff;color:#0f172a;border:1px solid rgba(148,163,184,.2)}.message--outgoing{align-self:flex-end;background:linear-gradient(135deg,#2563eb 0,#4338ca 100%);color:#fff}.message--system{align-self:center;background:rgba(15,76,129,.08);color:#0f4c81;border-radius:999px}.message__author{display:block;font-size:.78rem;font-weight:600;margin-bottom:4px;color:inherit;text-transform:capitalize;opacity:.9}.message time{display:block;margin-top:6px;font-size:.7rem;opacity:.7}.message__content{display:flex;flex-direction:column;gap:8px}.message__attachment{border-radius:12px;overflow:hidden}.message__attachment+.message__attachment{margin-top:8px}.message__attachment-image{display:block;max-width:240px;height:auto;border-radius:12px;box-shadow:0 10px 30px rgba(15,23,42,.18)}.message__attachment-link{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;background:rgba(15,23,42,.08);color:inherit;text-decoration:none;font-weight:600;font-size:.85rem}.message__attachment-filename{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message__attachment-link:hover{text-decoration:underline}.message--outgoing .message__attachment-link{background:rgba(255,255,255,.2);color:#fff}.chat-input{border-top:1px solid #e0e7ff;padding:12px 18px;background:#fff}.chat-input textarea{width:100%;border:0;resize:none;font-size:.95rem;line-height:1.5;padding:0;color:#0f172a}.chat-input textarea:focus{outline:0}.chat-actions{border-top:1px solid #e0e7ff;padding:12px 18px;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.action{appearance:none;background:0;border:0;color:rgba(15,23,42,.55);font-size:.9rem;font-weight:600;cursor:pointer;padding:0;transition:color .2s ease , transform .2s ease}.action:hover:not(:disabled){color:rgba(15,23,42,.85);transform:translateY(-1px)}.action:disabled{cursor:not-allowed;color:rgba(148,163,184,.8);transform:none}.selected-file{display:none;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;background:rgba(37,99,235,.12);color:#1e3a8a;font-size:.75rem;line-height:1.2;max-width:220px;word-break:break-word}.selected-file:not([hidden]){display:inline-flex}.selected-file__clear{background:0;border:0;color:inherit;cursor:pointer;font-size:.9rem;line-height:1;padding:0}.selected-file__clear:hover:not(:disabled){opacity:.75}.selected-file__clear:disabled{cursor:not-allowed;opacity:.4}.send-button{border-radius:12px;border:0;padding:10px 18px;background:linear-gradient(135deg,#0f4c81 0,#2563eb 100%);color:#fff;font-weight:600;cursor:pointer;transition:transform .2s ease , box-shadow .2s ease}.send-button:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(37,99,235,.3)}.chat-composer.is-disabled{opacity:.6}.chat-composer.is-disabled textarea{cursor:not-allowed}.chatbox.is-closed{opacity:0;pointer-events:none;transform:scale(.98);transition:opacity .25s ease , transform .25s ease}.feedback{margin-bottom:8px;border-radius:10px;padding:12px 14px;font-size:.85rem;background:rgba(220,38,38,.12);color:#991b1b;display:none}.feedback[data-visible="true"]{display:block}.feedback--info{background:rgba(14,76,129,.12);color:#0f4c81}.empty-state{text-align:center;font-size:.9rem;color:#94a3b8;padding-top:40px}.closure-screen{position:fixed;inset:0;background:radial-gradient(circle at top,rgba(15,76,129,.95) 0,rgba(15,23,42,.98) 60%,rgba(11,17,32,.98) 100%);display:none;align-items:center;justify-content:center;padding:32px;z-index:50}.closure-screen[data-visible="true"]{display:flex}.closure-card{max-width:420px;width:100%;background:rgba(15,23,42,.85);border-radius:18px;box-shadow:0 28px 80px rgba(15,23,42,.45);padding:32px 28px;color:#e2e8f0;text-align:center}.closure-card h2{margin:0 0 12px;font-size:1.3rem;font-weight:600;color:#f8fafc}.closure-card p{margin:0;font-size:.95rem;line-height:1.5;color:rgba(226,232,240,.86)}@media only screen and (max-width:950px){.container{width:90%;min-width:320px}.chatbox{height:80vh}}@media only screen and (max-width:600px){.bar{height:52px;padding:0 14px}.chatbox{height:90vh}}