@font-face{font-family:Noto;src:url('/assets/NotoSansThai.ttf')}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px Noto,Arial,sans-serif;--bg:#faf6f3;--card:#fff;--text:#202124;--muted:#787477;--border:#e7e3e0;--input:#fff;--selected:#fff0f2;--red:#e8101d;--soft:#fce5e8}body.dark{--bg:#111214;--card:#1c1e20;--text:#f5f4f4;--muted:#b8b3b5;--border:#36383b;--input:#282a2d;--selected:#3f1e24;--soft:#472126}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--border);border-radius:13px;padding:10px 16px;background:var(--card);color:var(--text)}button:hover{border-color:var(--red)}button:disabled{opacity:.5;cursor:wait}button.primary{background:var(--red);color:white;border-color:var(--red);font-weight:650}button.quiet{border:0;background:none;color:var(--muted)}input,textarea,select{border:1px solid var(--border);border-radius:12px;padding:11px 13px;background:var(--input);color:var(--text);width:100%}textarea{resize:vertical;min-height:150px;line-height:1.8}input:focus,textarea:focus,button:focus-visible,select:focus{outline:2px solid #ed4652;outline-offset:2px}a{color:var(--red)}header{height:78px;display:flex;align-items:center;padding:0 28px;gap:18px;border-bottom:1px solid var(--border)}.brand{display:flex;gap:12px;align-items:center;font-size:17px;font-weight:750;letter-spacing:.6px;white-space:nowrap}.brand img{width:48px;height:48px;border-radius:12px}.spacer{flex:1}.muted{color:var(--muted)}.shell{display:grid;grid-template-columns:224px minmax(300px,370px) minmax(380px,1fr);gap:18px;padding:20px;height:calc(100vh - 78px)}aside{display:flex;flex-direction:column;gap:10px;min-height:0;padding:0 8px}.nav{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:none;padding:14px}.nav.active{background:var(--selected);color:var(--red);font-weight:700}.ico{width:22px;text-align:center;font-size:21px}.retention{margin-top:auto;padding:17px;border:1px solid var(--border);border-radius:20px;background:var(--card);font-size:12px;line-height:1.8}.card{border:1px solid var(--border);background:var(--card);border-radius:24px}.list{overflow:auto;padding:20px 12px}.list h1{font-size:28px;margin:0 8px}.list .subtitle{margin:3px 8px 16px;color:var(--muted)}.list input{margin:0 0 14px}.tabs{display:flex;gap:7px;margin-bottom:14px}.tabs button{padding:6px 10px;font-size:12px;border-radius:24px}.tabs .active{background:var(--red);color:white}.mailrow{display:flex;gap:12px;width:100%;text-align:left;border:0;border-radius:16px;padding:16px 12px;position:relative;background:transparent}.mailrow.selected{background:var(--selected)}.avatar{width:40px;height:40px;background:var(--soft);color:var(--red);border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:19px;font-weight:750}.rowcontent{min-width:0;flex:1}.rowcontent b,.rowcontent span,.rowcontent small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rowcontent small{color:var(--muted);margin-top:3px}.dot{width:8px;height:8px;background:var(--red);border-radius:50%;position:absolute;right:10px;top:19px}.reader{overflow:auto;min-width:0;display:flex;flex-direction:column;gap:15px}.message,.composer,.overview{padding:22px}.message h2{font-size:20px;line-height:1.6;margin:16px 0}.meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.pill{background:var(--soft);color:var(--red);border-radius:30px;font-size:12px;padding:5px 12px}.body{white-space:pre-wrap;word-break:break-word;line-height:1.9;border-top:1px solid var(--border);padding-top:20px;margin-top:16px}.attachments{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.attachments button{font-size:12px;max-width:100%;overflow-wrap:anywhere}.composer label{display:block;color:var(--muted);font-size:12px;margin:10px 0 5px}.composer h2{margin:0;font-size:18px}.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}.signature{font-size:12px;margin:12px 0;color:var(--muted);display:flex;gap:12px;align-items:center}.signature img{width:42px;border-radius:10px}.signature b{color:var(--text)}.empty{padding:50px 24px;text-align:center;color:var(--muted);margin:auto}.login{max-width:430px;margin:9vh auto;padding:30px}.login h1{font-size:28px}.login label{display:block;margin:18px 0 6px}.login button{width:100%;margin-top:20px}.login .brand{font-size:16px}.login p{line-height:1.9}.error{color:#cf263b;white-space:pre-wrap}.yeargrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px}.yeargrid button{text-align:left;padding:20px}.yeargrid b{display:block;font-size:24px}#notice:not(:empty){position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:13px 24px;border-radius:14px;background:#292b30;color:white;max-width:90%;z-index:10;box-shadow:0 8px 30px #0003}.mobileback{display:none}details{margin-top:15px;color:var(--muted);font-size:12px}.tiny{font-size:12px}.filelabel{cursor:pointer;padding:10px 14px;background:var(--soft);color:var(--red);border-radius:12px}.filelabel input{display:none}@media(max-width:1050px){.shell{grid-template-columns:170px 280px minmax(300px,1fr);gap:10px;padding:12px}header{padding:0 16px}.brand{font-size:14px}.header-address{display:none}aside{padding:0}.nav{padding:12px 8px}}@media(max-width:800px){header{height:66px}.shell{height:auto;min-height:calc(100vh - 66px);display:block;padding:12px}aside{flex-direction:row;overflow:auto;margin-bottom:12px}.nav{width:auto;white-space:nowrap}.nav .ico,.retention,.stafflabel{display:none}aside>.primary{white-space:nowrap}.list{min-height:65vh}.reader{display:none}.shell.reading .list{display:none}.shell.reading .reader{display:flex}.mobileback{display:block}header .brand{font-size:12px}header .brand img{width:35px;height:35px}header{gap:6px}.login{margin:5vh 15px}.message,.composer{padding:17px}.shell.archive .reader{display:block}.shell.archive .list{display:none}}
.image-preview{flex:0 0 100%;max-width:100%;min-height:28px;color:var(--muted);font-size:12px;line-height:1.6}
.inline-attachment{display:block;max-width:min(100%,520px);max-height:360px;border:1px solid var(--border);border-radius:14px;object-fit:contain;background:var(--input);cursor:pointer}
.message.customer-message{background:#fffaf2;border-color:#eedbc0;border-left:5px solid #c98d49}
.message.company-message{background:#fff1f3;border-color:#efc9cf;border-left:5px solid var(--red)}
body.dark .message.customer-message{background:#2a241c;border-color:#5a4834}
body.dark .message.company-message{background:#321e22;border-color:#6c333c}
.direction-badge{border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;line-height:1.2}
.customer-message .direction-badge{background:#f3e2ca;color:#805421}
.company-message .direction-badge{background:#f8d9dd;color:#ae1827}