:root{--purple: #6e5cff;--purple-dark: #5948eb;--purple-soft: #f0edff;--purple-soft-hover: #e9e5ff;--text: #17212b;--text-secondary: #66717d;--text-muted: #8b949e;--border: #e7e9ed;--border-soft: #eef0f2;--surface: #ffffff;--surface-soft: #f7f8fa;--surface-hover: #f4f5f7;--topbar-height: 72px;--sidebar-width: 248px}.webmail-app{width:100%;height:100vh;min-height:0;overflow:hidden;background:var(--surface)}.topbar{position:relative;z-index:20;display:grid;grid-template-columns:var(--sidebar-width) minmax(240px,720px) 1fr;align-items:center;gap:24px;width:100%;height:var(--topbar-height);padding:0 20px 0 16px;background:#fffffff5;border-bottom:1px solid var(--border);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.brand-area{display:flex;align-items:center;gap:14px;min-width:0}.rivomail-logo{display:block;width:auto;max-width:148px;height:34px;object-fit:contain}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;color:#5f6974;background:transparent;border:0;border-radius:50%;cursor:pointer;transition:background .15s ease,color .15s ease}.icon-button:hover{color:var(--text);background:#f1f2f4}.search-wrapper{display:flex;align-items:center;gap:12px;width:100%;height:46px;padding:0 16px;color:#707a85;background:#f3f4f6;border:1px solid transparent;border-radius:13px;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}.search-wrapper:focus-within{background:#fff;border-color:#dedfe5;box-shadow:0 2px 8px #17212b0f,0 8px 24px #17212b0a}.search-wrapper input{width:100%;height:100%;color:var(--text);background:transparent;border:0;outline:0;font-size:15px}.search-wrapper input::placeholder{color:#7e8791}.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.profile-button{display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;color:#fff;background:var(--purple);border:0;border-radius:50%;font-size:15px;font-weight:750;cursor:pointer}.webmail-body{display:flex;width:100%;height:calc(100vh - var(--topbar-height));min-height:0}.sidebar{position:relative;display:flex;flex:0 0 var(--sidebar-width);flex-direction:column;width:var(--sidebar-width);min-width:var(--sidebar-width);height:100%;padding:18px 12px 14px;overflow:hidden;background:#fafbfc;border-right:1px solid var(--border);transition:width .22s cubic-bezier(.22,1,.36,1),min-width .22s cubic-bezier(.22,1,.36,1),flex-basis .22s cubic-bezier(.22,1,.36,1)}.sidebar-collapsed{flex-basis:76px;width:76px;min-width:76px}.compose-button{display:flex;align-items:center;justify-content:flex-start;gap:11px;width:156px;height:48px;margin:0 6px 18px;padding:0 19px;overflow:hidden;color:#fff;background:var(--purple);border:0;border-radius:14px;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;box-shadow:0 4px 12px #6e5cff2e;transition:background .16s ease,transform .16s ease,box-shadow .16s ease,width .22s cubic-bezier(.22,1,.36,1),padding .22s cubic-bezier(.22,1,.36,1)}.compose-button:hover{background:var(--purple-dark);transform:translateY(-1px);box-shadow:0 6px 18px #6e5cff3d}.sidebar-collapsed .compose-button{width:48px;padding:0 14px}.sidebar-collapsed .compose-button span{display:none}.folder-navigation{display:flex;flex-direction:column;gap:3px}.folder-button{display:grid;grid-template-columns:34px 1fr auto;align-items:center;width:100%;height:42px;padding:0 13px;overflow:hidden;color:#59636e;background:transparent;border:0;border-radius:10px;text-align:left;cursor:pointer;transition:background .14s ease,color .14s ease}.folder-button:hover{color:var(--text);background:#f0f1f3}.folder-button.active{color:#5140d7;background:var(--purple-soft);font-weight:700}.folder-icon{display:flex;align-items:center;justify-content:flex-start}.folder-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.folder-count{min-width:18px;margin-left:8px;font-size:12px;font-weight:750;text-align:right}.sidebar-collapsed .folder-button{grid-template-columns:34px;justify-content:center;padding:0 9px}.sidebar-collapsed .folder-label,.sidebar-collapsed .folder-count{display:none}.sidebar-bottom{margin-top:auto}.storage{padding:14px 10px 8px}.storage-heading{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;color:var(--text-secondary);font-size:10px;white-space:nowrap}.storage-heading span:first-child{font-weight:700}.storage-track{width:100%;height:5px;overflow:hidden;background:#e8eaed;border-radius:999px}.storage-fill{width:1%;min-width:4px;height:100%;background:var(--purple);border-radius:inherit}.sidebar-footer{padding:10px;color:#a0a6ad;font-size:10px;font-weight:650;letter-spacing:.02em}.sidebar-collapsed .storage,.sidebar-collapsed .sidebar-footer{display:none}.mail-area{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0;background:#fff}.mail-toolbar{display:flex;flex:0 0 54px;align-items:center;justify-content:space-between;width:100%;min-height:54px;padding:0 18px;border-bottom:1px solid var(--border-soft)}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:2px}.folder-title{padding-left:4px;color:var(--text);font-size:17px;font-weight:750}.toolbar-button{width:36px;height:36px}.mail-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.message-list{width:100%}.message-row{display:grid;grid-template-columns:42px minmax(130px,210px) minmax(0,1fr) auto;align-items:center;min-height:48px;padding:0 20px 0 12px;color:#3e4751;background:#fff;border-bottom:1px solid var(--border-soft);cursor:pointer;transition:background .1s ease,box-shadow .1s ease}.message-row:hover{position:relative;z-index:1;background:#fafafa;box-shadow:0 1px 4px #17212b14}.message-row.unread{color:var(--text);background:#fbfbff}.message-star{display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:#b0b5bb;border-radius:50%;cursor:pointer}.message-star:hover{color:#7f8790;background:#f0f1f3}.message-star svg[fill=currentColor]{color:#f4b400}.message-sender{padding-right:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}.unread .message-sender{font-weight:750}.message-content{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}.message-subject{color:inherit}.unread .message-subject{font-weight:750}.message-divider,.message-preview{color:#79828c}.message-time{padding-left:20px;color:#66707a;font-size:12px;white-space:nowrap}.unread .message-time{color:var(--text);font-weight:750}.empty-mail{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:420px;padding:40px;color:var(--text-secondary);text-align:center}.empty-mail-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:16px;color:var(--purple);background:var(--purple-soft);border-radius:20px}.empty-mail h2{margin:0 0 7px;color:var(--text);font-size:18px}.empty-mail p{margin:0;font-size:14px}.message-view{width:100%;max-width:980px;margin:0 auto;padding:34px 46px 80px}.message-view-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:30px}.message-view-heading>div:first-child{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.message-view-heading h1{margin:0;color:var(--text);font-size:25px;font-weight:650;line-height:1.3}.message-label{padding:3px 8px;color:#6c7480;background:#eff1f3;border-radius:5px;font-size:10px;font-weight:700}.message-view-star{display:flex;align-items:center;justify-content:center;width:38px;height:38px;color:#a6acb3;background:transparent;border:0;border-radius:50%;cursor:pointer}.message-view-star:hover{background:#f3f4f5}.message-view-star.starred{color:#f4b400}.message-sender-header{display:flex;align-items:center;margin-bottom:28px}.sender-avatar{display:flex;flex:0 0 42px;align-items:center;justify-content:center;width:42px;height:42px;margin-right:13px;color:#fff;background:var(--purple);border-radius:50%;font-size:15px;font-weight:750}.sender-information{min-width:0}.sender-name-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;color:var(--text);font-size:13px}.sender-name-line span{color:var(--text-secondary);font-size:12px}.recipient-line{margin-top:3px;color:var(--text-secondary);font-size:11px}.message-date{margin-left:auto;padding-left:20px;color:var(--text-secondary);font-size:11px;white-space:nowrap}.message-body{max-width:760px;padding-left:55px;color:#303942;font-size:14px;line-height:1.7}.message-body p{margin:0}.message-actions{display:flex;gap:10px;padding:34px 0 0 55px}.message-actions button{min-width:94px;height:39px;padding:0 18px;color:#4f5964;background:#fff;border:1px solid #d9dde1;border-radius:9px;font-size:13px;font-weight:650;cursor:pointer}.message-actions button:hover{background:#f7f8f9}.compose-window{position:fixed;z-index:100;right:24px;bottom:0;display:flex;flex-direction:column;width:min(560px,calc(100vw - 48px));height:min(590px,calc(100vh - 110px));overflow:hidden;background:#fff;border:1px solid #dfe2e6;border-bottom:0;border-radius:12px 12px 0 0;box-shadow:0 14px 50px #17212b2e;animation:compose-enter .24s cubic-bezier(.22,1,.36,1) both}@keyframes compose-enter{0%{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.compose-header{display:flex;flex:0 0 43px;align-items:center;justify-content:space-between;padding:0 12px 0 16px;color:#fff;background:#272f38;font-size:12px;font-weight:700}.compose-header-actions{display:flex;align-items:center}.compose-header-actions button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;color:#d9dde1;background:transparent;border:0;border-radius:5px;cursor:pointer}.compose-header-actions button:hover{color:#fff;background:#ffffff1a}.compose-field{display:flex;flex:0 0 43px;align-items:center;padding:0 14px;border-bottom:1px solid var(--border-soft)}.compose-field span{flex:0 0 58px;color:#7a838d;font-size:12px}.compose-field input{flex:1;min-width:0;height:100%;color:var(--text);background:transparent;border:0;outline:0;font-size:13px}.compose-body{flex:1;width:100%;min-height:0;padding:17px;resize:none;color:var(--text);background:#fff;border:0;outline:0;font-size:14px;line-height:1.55}.compose-footer{display:flex;flex:0 0 58px;align-items:center;justify-content:space-between;padding:8px 12px}.send-button{height:38px;padding:0 24px;color:#fff;background:var(--purple);border:0;border-radius:9px;font-size:13px;font-weight:750;cursor:pointer}.send-button:hover{background:var(--purple-dark)}.discard-button{display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;color:#717a84;background:transparent;border:0;border-radius:50%;cursor:pointer}.discard-button:hover{color:#3f4852;background:#f1f2f4}@media(max-width:1000px){.topbar{grid-template-columns:var(--sidebar-width) minmax(220px,1fr) auto}.message-row{grid-template-columns:42px minmax(110px,170px) minmax(0,1fr) auto}}@media(max-width:760px){:root{--topbar-height: 64px}.topbar{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:0 10px}.brand-area{gap:6px}.rivomail-logo{display:none}.search-wrapper{height:42px}.topbar-actions .icon-button{display:none}.sidebar{position:fixed;z-index:50;top:var(--topbar-height);bottom:0;left:0;width:248px;min-width:248px;box-shadow:8px 0 30px #17212b1f;transform:translate(0);transition:transform .22s cubic-bezier(.22,1,.36,1)}.sidebar.sidebar-collapsed{width:248px;min-width:248px;transform:translate(-105%);box-shadow:none}.sidebar-collapsed .compose-button{width:156px;padding:0 19px}.sidebar-collapsed .compose-button span{display:inline}.sidebar-collapsed .folder-button{grid-template-columns:34px 1fr auto;justify-content:initial;padding:0 13px}.sidebar-collapsed .folder-label,.sidebar-collapsed .folder-count{display:initial}.sidebar-collapsed .storage,.sidebar-collapsed .sidebar-footer{display:block}.message-row{grid-template-columns:34px minmax(90px,125px) minmax(0,1fr);min-height:56px;padding-right:12px}.message-time{display:none}.message-sender{padding-right:10px}.message-view{padding:24px 18px 70px}.message-view-heading h1{font-size:21px}.message-body,.message-actions{padding-left:0}.compose-window{right:0;bottom:0;width:100%;height:calc(100vh - var(--topbar-height));border-right:0;border-left:0;border-radius:0}}@media(max-width:520px){.message-row{grid-template-columns:32px 105px minmax(0,1fr);padding-left:6px}.message-sender,.message-content{font-size:12.5px}.mail-toolbar{padding:0 10px}.message-sender-header{align-items:flex-start}.message-date{display:none}.sender-name-line span{display:block;width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*{box-sizing:border-box}html,body,#root{width:100%;min-width:0;min-height:100%;margin:0}html{background:#fff}body{min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#17212b;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,textarea{font:inherit}button{color:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(110,92,255,.22);outline-offset:2px}::selection{background:#6e5cff2e}