/* KARIS Connect Design Concept v2 — Quietly Connected */
.room-menu-trigger{font-size:24px;letter-spacing:1px;flex:none}.chat-header button[hidden]{display:none!important}
.room-sheet{padding:20px;width:420px;border-radius:16px;background:#fff;max-height:85dvh;overflow:auto}.room-sheet-title{display:flex;align-items:center;gap:12px}.room-sheet-title h3{margin:0;flex:1;overflow-wrap:anywhere}.room-sheet-action{display:block;width:100%;text-align:left;min-height:48px;padding:12px 4px;border-radius:0;border-bottom:1px solid var(--line);font-size:15px;background:transparent;color:var(--ink);overflow-wrap:anywhere}.room-sheet-action:hover{background:var(--surface-soft)}.room-danger{color:var(--error);margin-top:16px;border-top:1px solid var(--line)}.room-policy{font-size:13px;color:var(--muted);padding-top:12px}.room-confirm-actions{display:flex;gap:12px;margin-top:20px}.room-confirm-actions button{flex:1;min-height:48px}.room-danger-confirm{background:var(--error);color:white}.room-details,.room-files{padding:10px 0;font-size:14px}
@media(max-width:760px){.room-sheet{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:100%;border:0;border-radius:16px 16px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));box-sizing:border-box}}
:root{--green:#173d30;--green-600:#245744;--green-light:#e7eee9;--ink:#202622;--muted:#657069;--paper:#f7f5ef;--surface:#fff;--surface-soft:#f1f3ef;--line:#e2e5e1;--orange:#a17a37;--error:#a83d39;--radius-sm:9px;--radius-md:13px;--radius-lg:16px;--tap:44px;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:16px;color:var(--ink)}
html{min-width:320px;background:var(--paper)}body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1,h2,h3{font-family:inherit;color:var(--ink);font-weight:700;letter-spacing:-.035em}h1{font-size:28px;line-height:1.3}h2{font-size:24px;line-height:1.35}h3{font-size:17px;line-height:1.4}p{line-height:1.6}.muted,.hint{color:var(--muted)}.hint{font-size:13px;line-height:1.65}.tiny{color:var(--muted);font-size:13px}.eyebrow{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.12em}
button{min-height:var(--tap);border-radius:var(--radius-sm);transition:background-color .15s ease,color .15s ease,transform .1s ease,border-color .15s ease}button:active:not(:disabled){transform:scale(.98)}button:focus-visible,a:focus-visible{outline:3px solid rgba(36,87,68,.28);outline-offset:2px}input,textarea,select{min-height:48px;padding:12px 14px;border:1px solid #d8ddd9;border-radius:11px;background:var(--surface);box-shadow:none;font-size:16px}input:focus,textarea:focus,select:focus{outline:0;border-color:var(--green-600);box-shadow:0 0 0 3px rgba(36,87,68,.12)}label{color:#465149;font-size:14px;font-weight:650}.primary{min-height:48px;padding:0 18px;border-radius:11px;background:var(--green);color:#fff;box-shadow:none;font-size:15px;font-weight:700}.primary:hover{background:#11352a;transform:none;box-shadow:none}.secondary{min-height:44px;padding:0 14px;border:1px solid #d9ded9;border-radius:10px;background:var(--surface);font-size:14px;font-weight:600}.secondary:hover{border-color:#bfc8c1;background:var(--surface-soft);transform:none}.text-button{min-height:44px;padding:0 6px;color:var(--green-600);font-size:14px;font-weight:650}.icon-button{width:var(--tap);height:var(--tap);min-height:var(--tap);padding:0;display:inline-grid;place-items:center;border-radius:11px;color:var(--muted)}.icon-button:hover{background:var(--surface-soft)}.icon-button svg,.nav-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Login */
.auth-layout{min-height:100dvh;grid-template-columns:minmax(320px,.85fr) minmax(430px,1.15fr);background:var(--paper)}.welcome{padding:46px 9%;border-right:1px solid var(--line);background:#edf1ed}.welcome::before{display:none}.welcome>.eyebrow,.welcome-art,.welcome>small{display:none}.welcome h1{margin:auto 0 14px;font-size:clamp(34px,4vw,48px);line-height:1.28}.welcome p{margin-bottom:auto;color:var(--muted);font-size:15px}.wordmark{gap:11px;color:var(--ink);letter-spacing:.08em}.light{color:var(--muted)}.logo{width:40px;height:40px;border-radius:12px;background:var(--green);box-shadow:none}.auth-panel{padding:40px;background:var(--paper)}.auth-card{width:390px;max-width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.auth-card>.eyebrow{display:none}.auth-card h2{margin:0 0 8px;font-size:28px}.auth-card form{margin-top:28px}.auth-card label{margin:16px 0 10px}.auth-card .primary{margin-top:14px}.privacy-note{margin-top:14px;padding-top:20px;border-color:var(--line);font-size:12px}
/* App shell and navigation */
#shell{min-height:100dvh}.sidebar{width:232px;padding:25px 18px 18px;border-right:1px solid var(--line);background:rgba(255,255,255,.98);box-shadow:none}.sidebar .wordmark{min-width:0}.wordmark small{max-width:145px;overflow:hidden;color:var(--muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.workspace-label{margin:35px 12px 10px;color:var(--muted);font-size:11px;letter-spacing:.04em}#nav{gap:2px}#nav button{min-height:46px;padding:0 12px;border-radius:10px;color:#667169;gap:12px;font-size:14px}#nav button:hover{background:var(--surface-soft);transform:none}#nav button.active{background:var(--green-light);color:var(--green);box-shadow:none;font-weight:700}.nav-icon{width:23px;height:23px;display:grid;place-items:center;flex:none}.nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#nav i{min-width:20px;height:20px;margin-left:auto;padding:0 6px;display:grid;place-items:center;border-radius:10px;background:var(--green-600);color:#fff;font-size:11px;line-height:20px}#admin-nav{display:none!important}.sidebar-note{padding:16px 9px;font-size:12px}.profile{gap:10px;padding-top:15px;border-color:var(--line)}.profile strong{display:block;max-width:103px;overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.profile small{margin-top:3px;font-size:12px}.avatar{width:44px;height:44px;overflow:hidden;border-radius:50%;background:#dce7df;color:var(--green-600);font-size:14px;font-weight:700}.avatar img{width:100%;height:100%;display:block;object-fit:cover}
main{margin-left:232px;width:calc(100% - 232px);padding:29px 34px 20px}.topbar{margin-bottom:22px}.topbar h2{margin:5px 0 0;font-size:24px}.date-label{padding:0;border:0;border-radius:0;background:transparent;color:var(--muted);font-size:13px}#content{width:100%;max-width:1120px;margin:0 auto}footer{max-width:1120px;margin:0 auto;padding-top:28px;color:#838c86;font-size:11px}
/* Shared content */
.card{margin-bottom:14px;padding:20px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);box-shadow:none}.card-head{margin-bottom:13px}.card-head h3{font-size:17px}.card-head button{font-size:13px}.badge{padding:4px 8px;border-radius:6px;background:var(--green-light);color:var(--green-600);font-size:12px;font-weight:650}.badge.orange{background:#f4efe4;color:#755722}.row{min-height:68px;padding:10px 2px;gap:12px;border-color:var(--line)}.row:hover{background:transparent}.row-copy strong{display:block;overflow:hidden;color:var(--ink);font-size:15px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.row-copy p{max-width:none;margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.45}.empty{min-height:150px;padding:42px 20px;display:grid;place-items:center;color:var(--muted);font-size:14px;line-height:1.6}.offline-banner{margin-bottom:12px;padding:11px 14px;border:1px solid #ead6ae;border-radius:10px;background:#fff8e9;color:#73531f;font-size:13px}.section-actions{min-height:50px;margin-bottom:14px}.section-actions p{color:var(--muted);font-size:14px}.notice-feature{padding:17px;border-color:var(--line);border-radius:11px;background:#faf9f5}.event-date{width:46px;flex:none;padding:7px 0;border:1px solid var(--line);border-radius:10px;background:#fafaf7;color:var(--green-600)}.event-date span{font-size:11px}.prayer-body{font-size:16px;line-height:1.75}.card-bottom button{font-size:13px}
/* Home */
.home-intro,.page-intro{padding:9px 2px 21px}.home-intro h1,.page-intro h1{max-width:100%;margin:4px 0 5px;overflow-wrap:anywhere;font-size:27px}.home-intro p,.page-intro p{margin-bottom:0;font-size:14px}.home-church{margin-bottom:4px;overflow:hidden;color:var(--green-600);font-size:13px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.home-unread{width:100%;min-height:62px;padding:10px 14px;display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-align:left}.home-unread:hover{background:#fafbf9}.home-unread-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--green-light);color:var(--green-600);font-size:12px;font-weight:700}.home-unread-copy{flex:1;font-size:15px;font-weight:650}.home-arrow{color:#89928c;font-size:25px;font-weight:300}.home-section{margin-top:24px}.section-heading{min-height:44px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.section-heading h3{margin:0}.section-heading .text-button{font-size:13px}.home-section .channel-row{border-radius:0}
/* Church and notifications */
.church-links,.alert-list{border-top:1px solid var(--line)}.church-link,.alert-row{width:100%;min-height:72px;padding:11px 2px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);border-radius:0;text-align:left}.church-link:hover,.alert-row:hover{background:rgba(255,255,255,.45)}.church-link-icon{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--green-light);color:var(--green-600);font-size:13px;font-weight:700}.alert-row{align-items:flex-start;padding:14px 4px}.alert-dot{width:8px;height:8px;margin:7px 5px 0 1px;flex:none;border-radius:50%;background:var(--green-600)}.alert-dot.schedule{background:var(--orange)}.alert-row:not(.unread) strong{font-weight:550}
/* Chats */
.chat-layout{min-height:620px;overflow:hidden;grid-template-columns:318px minmax(0,1fr);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:none}.chat-list{padding:0;border-color:var(--line);background:var(--surface)}.chat-list .channel-row{min-height:76px;padding:11px 14px;border-radius:0}.chat-list .channel-row.selected{background:#edf2ee;box-shadow:inset 3px 0 var(--green-600)}.channel-row.unread .row-copy strong,.channel-row.unread .row-copy p{color:var(--ink);font-weight:700}.channel-state{min-width:24px;display:flex;flex-direction:column;align-items:flex-end;gap:5px}.count{min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;border-radius:10px;background:var(--green-600);color:#fff;font-size:11px;font-weight:700;line-height:20px}.muted-icon{max-width:54px;color:var(--muted);font-size:10px;white-space:nowrap}.chat-panel{min-width:0;background:var(--surface)}.chat-header{min-height:64px;padding:8px 15px 8px 20px;justify-content:flex-start;gap:8px;border-color:var(--line)}.chat-header h3{min-width:0;margin-right:auto;overflow:hidden;font-size:17px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.chat-header .tiny{min-height:40px;padding:0 9px;color:var(--muted);font-size:12px}.chat-back{display:none;font-size:30px;font-weight:300}.messages{height:445px;max-height:calc(100dvh - 292px);padding:19px 18px;background:#f2f2ee;scroll-padding-bottom:18px}.message{margin-bottom:14px;gap:9px}.message .avatar{width:36px;height:36px;margin-top:1px;font-size:12px}.message-content{max-width:min(76%,620px)}.message-name{margin:0 0 5px 2px;color:var(--muted);font-size:12px}.message .bubble{padding:9px 11px;border:1px solid #e1e4e1;border-radius:14px 14px 14px 4px;background:var(--surface);box-shadow:none;color:var(--ink);font-size:15px;line-height:1.5}.message.mine .bubble{border:0;border-radius:14px 14px 4px 14px;background:#dfece4;color:var(--ink)}.message-meta{margin-top:4px;gap:8px;color:#69736c;font-size:11px}.message-meta button{min-height:28px;padding:0 3px;color:var(--muted);font-size:11px}.attachment{min-height:40px;margin-top:7px;padding:8px 10px;border-radius:8px;background:var(--surface-soft);color:var(--green-600);text-decoration:none;font-size:13px}.composer{padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-color:var(--line);background:var(--surface)}.compose-line{align-items:flex-end;gap:8px}.compose-line textarea{min-height:46px;height:46px;max-height:120px;padding:11px 14px;border-radius:18px;line-height:1.45}.compose-line .primary{min-width:68px;min-height:46px;padding:0 14px;border-radius:14px;justify-content:center}.file-label{min-height:38px;margin:5px 0 0;color:var(--muted);font-size:12px}.file-label input{min-height:34px;font-size:12px}.composer-hint{margin:3px 2px 0;font-size:11px}
/* People, profile, settings and admin */
.person-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}.person-grid .card{padding:19px 12px}.person-grid .avatar{width:56px;height:56px}.profile-summary{min-height:96px;margin-bottom:18px;padding:10px 2px 18px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line)}.profile-summary .avatar{width:66px;height:66px;font-size:20px}.profile-summary h1{margin:0 0 3px;font-size:23px}.profile-summary p{margin:0;font-size:14px}.profile-admin-link{margin-left:auto}.profile-page .card{padding:18px 20px}.profile-page .card>button{margin:4px 8px 4px 0}.admin-row{min-height:58px;padding:10px 2px;border-color:var(--line)}table{font-size:13px}table th{background:#f5f6f3;color:#4f5a53;font-weight:700}td,th{padding:12px;border-color:var(--line)}
/* Modal and state feedback */
dialog{width:470px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px);padding:22px;border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 65px rgba(18,35,29,.18)}dialog::backdrop{background:rgba(20,32,27,.42);backdrop-filter:blur(3px)}.modal-head{min-height:46px}.modal-head h2{font-size:21px}#toast{bottom:24px;min-height:46px;padding:12px 17px;border:0;border-radius:11px;background:#25332d;box-shadow:0 10px 28px rgba(21,39,32,.18);color:#fff;font-size:14px}
@media(max-width:1100px){.sidebar{width:210px}main{width:calc(100% - 210px);margin-left:210px;padding:25px 24px 18px}.chat-layout{grid-template-columns:270px minmax(0,1fr)}}
@media(max-width:760px){html,body{width:100%;max-width:100%;overflow-x:hidden}.auth-layout{min-height:100dvh;display:block}.welcome{min-height:auto;padding:max(24px,env(safe-area-inset-top)) 20px 18px;border:0;background:var(--paper)}.welcome h1,.welcome p{display:none}.auth-panel{min-height:auto;padding:22px 20px calc(34px + env(safe-area-inset-bottom));align-items:flex-start;background:transparent}.auth-card{width:100%;max-width:430px;margin:0 auto;padding:0;border:0}.auth-card h2{font-size:26px}.sidebar{inset:auto 0 0;width:100%;height:calc(64px + env(safe-area-inset-bottom));padding:0 6px env(safe-area-inset-bottom);border:0;border-top:1px solid var(--line);background:rgba(255,255,255,.97);box-shadow:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.sidebar>.wordmark,.workspace-label,.sidebar-note,.profile{display:none}#nav{height:64px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;overflow:visible}#nav button{min-width:0;min-height:64px;padding:5px 2px 4px;flex-direction:column;justify-content:center;gap:3px;border-radius:0;color:#758079;font-size:10px}#nav button:hover{background:transparent}#nav button.active{position:relative;background:transparent;color:var(--green);box-shadow:none}#nav button.active::before{content:"";position:absolute;top:0;width:18px;height:3px;border-radius:0 0 2px 2px;background:var(--green)}.nav-icon{width:22px;height:22px}.nav-icon svg{width:21px;height:21px}#nav i{position:absolute;top:5px;left:calc(50% + 6px);right:auto;min-width:18px;height:18px;padding:0 5px;font-size:10px;line-height:18px}main{width:100%;margin:0;padding:calc(14px + env(safe-area-inset-top)) 16px calc(82px + env(safe-area-inset-bottom))}.topbar{min-height:45px;margin-bottom:11px}.topbar .eyebrow,.date-label{display:none}.topbar h2{margin:0;font-size:21px}footer{display:none}.home-intro,.page-intro{padding-top:4px}.home-intro h1,.page-intro h1{font-size:25px}.home-section{margin-top:20px}.home-unread{min-height:60px}.section-actions{min-height:46px;align-items:center}.section-actions p{max-width:55%;font-size:13px;line-height:1.45}.card{padding:17px 16px;border-radius:12px}.chat-layout{min-height:calc(100dvh - 151px - env(safe-area-inset-bottom));display:flex;border:0;border-radius:0;background:transparent;overflow:visible}.chat-list{width:100%;border:0;background:transparent}.chat-list .channel-row{min-height:74px;padding:9px 2px;border-bottom:1px solid var(--line)}.chat-list .channel-row.selected{background:transparent;box-shadow:none}.chat-panel{width:100%;min-height:calc(100dvh - 151px - env(safe-area-inset-bottom))}.chat-layout.room-open .chat-list{display:none}.chat-layout.list-only .chat-panel{display:none}.chat-header{position:sticky;top:calc(-14px - env(safe-area-inset-top));z-index:3;min-height:58px;margin:0 -16px;padding:7px 10px;background:rgba(247,245,239,.97)}.chat-header h3{font-size:17px}.chat-header .tiny{max-width:72px;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.chat-back{display:inline-grid}.messages{height:calc(100dvh - 294px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:300px;max-height:none;margin:0 -16px;padding:15px 13px}.message-content{max-width:79%}.message .bubble{font-size:16px}.composer{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));z-index:4;margin:0 -16px calc(-82px - env(safe-area-inset-bottom));padding:9px 10px calc(9px + env(safe-area-inset-bottom))}.compose-line textarea{font-size:16px}.file-label{overflow:hidden}.file-label input{min-width:0}.composer-hint{display:none}.person-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.profile-summary{align-items:flex-start;flex-wrap:wrap}.profile-admin-link{width:100%;margin:4px 0 0}#toast{bottom:calc(76px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 28px)}}
@media(max-width:360px){main{padding-left:14px;padding-right:14px}.topbar h2{font-size:20px}.home-intro h1,.page-intro h1{font-size:23px}.section-actions{align-items:flex-start;flex-direction:column}.section-actions p{max-width:100%}.section-actions .primary{width:100%}.chat-header{margin-left:-14px;margin-right:-14px}.chat-header .tiny{max-width:58px;padding:0 5px}.messages,.composer{margin-left:-14px;margin-right:-14px}.message-content{max-width:82%}.message .avatar{width:32px;height:32px}.compose-line .primary{min-width:62px;padding:0 11px}}
.message.continued{margin-top:-8px}.message.continued .avatar{visibility:hidden}.message.continued:not(.mine) .bubble{border-radius:4px 14px 14px 4px}.message.mine.continued .bubble{border-radius:14px 4px 4px 14px}.message-date{margin:4px auto 18px;display:flex;align-items:center;justify-content:center;color:#747e77;font-size:12px}.message-date::before,.message-date::after{content:"";height:1px;flex:1;background:#dfe3df}.message-date::before{margin-right:12px}.message-date::after{margin-left:12px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.nav-label{width:auto!important}#nav i:empty{display:none}
#nav button>.nav-label{width:auto;font-size:14px;line-height:1.2}
.attachment-preview:empty,.attachment-status:empty{display:none}
.attachment-preview{display:flex;align-items:center;gap:10px;padding:10px 0;min-width:0}
.attachment-file-copy{flex:1;min-width:0}.attachment-file-copy strong{display:block;overflow-wrap:anywhere;font-size:14px}.attachment-file-copy small{font-size:12px;color:var(--muted)}
.attachment-thumbnail,.attachment-file-icon{width:44px;height:44px;flex:none;border-radius:8px;object-fit:cover;background:var(--green-light)}.attachment-file-icon{display:grid;place-items:center;font-size:12px}
.attachment-status{font-size:13px;line-height:1.5;margin:4px 0;overflow-wrap:anywhere}
@media(max-width:760px){#nav button>.nav-label{font-size:11px;line-height:14px;width:auto;letter-spacing:0}#nav button>.nav-icon{width:20px;height:20px}#nav .nav-icon svg{width:20px;height:20px}#nav{height:60px}#nav button{min-height:60px;gap:2px;padding:5px 2px} .sidebar{height:calc(60px + env(safe-area-inset-bottom))}.composer{bottom:calc(60px + env(safe-area-inset-bottom))}}
.loading-state{padding:8px 0}.loading-row{min-height:72px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.loading-avatar,.loading-copy{display:block;background:#e5e9e5;position:relative;overflow:hidden}.loading-avatar{width:44px;height:44px;flex:none;border-radius:50%}.loading-copy{width:min(72%,420px);height:14px;border-radius:5px}.loading-avatar::after,.loading-copy::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);transform:translateX(-100%);animation:karis-loading 1.3s infinite}.error-state{min-height:300px;padding:48px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.error-state h3{margin-bottom:5px}.error-state p{font-size:14px}.error-state button{margin-top:8px}.profile-page{max-width:760px!important}.profile-page .card{width:100%}@keyframes karis-loading{to{transform:translateX(100%)}}@media(max-width:760px){.chat-panel{max-height:var(--app-visible-height,100dvh)}.profile-page{max-width:none!important}}@media(prefers-reduced-motion:reduce){.loading-avatar::after,.loading-copy::after{animation:none}}