diff --git a/internal/web/static/index.html b/internal/web/static/index.html
index ed11c36..d77919e 100644
--- a/internal/web/static/index.html
+++ b/internal/web/static/index.html
@@ -1,1346 +1,2439 @@
+
-
-
-thefeed
-
+ /* ===== CHANNEL LIST ===== */
+ .channel-list {
+ flex: 1;
+ overflow-y: auto
+ }
+
+ .channel-section-title {
+ padding: 8px 14px 4px;
+ font-size: 11px;
+ color: var(--text-dim);
+ text-transform: uppercase;
+ letter-spacing: .5px
+ }
+
+ .ch-item {
+ display: flex;
+ align-items: center;
+ padding: 10px 14px;
+ cursor: pointer;
+ gap: 10px;
+ contain: content
+ }
+
+ .ch-item:hover {
+ background: var(--hover)
+ }
+
+ .ch-item.active {
+ background: var(--accent)
+ }
+
+ .ch-item.active .ch-name,
+ .ch-item.active .ch-preview {
+ color: #fff
+ }
+
+ .ch-avatar {
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ background: var(--surface2);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 17px;
+ color: var(--text-dim);
+ flex-shrink: 0;
+ font-weight: 600
+ }
+
+ .ch-item.active .ch-avatar {
+ background: rgba(255, 255, 255, .2)
+ }
+
+ .ch-info {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 3px
+ }
+
+ .ch-name {
+ font-size: 14px;
+ font-weight: 500;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis
+ }
+
+ .ch-preview {
+ font-size: 12px;
+ color: var(--text-dim);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis
+ }
+
+ .ch-badge {
+ background: #fff;
+ color: var(--accent);
+ font-size: 10px;
+ padding: 1px 6px;
+ border-radius: 10px;
+ min-width: 18px;
+ text-align: center;
+ flex-shrink: 0;
+ font-weight: 700
+ }
+
+ .ch-item.active .ch-badge {
+ background: rgba(255, 255, 255, .3);
+ color: #fff
+ }
+
+ .ch-type-tag {
+ font-size: 9px;
+ padding: 1px 5px;
+ border-radius: 3px;
+ background: rgba(192, 132, 252, .15);
+ color: #c084fc;
+ margin-left: 4px
+ }
+
+ /* ===== RTL MESSAGES ===== */
+ .msg.rtl-msg {
+ direction: rtl
+ }
+
+ /* ===== SIDEBAR FOOTER ===== */
+ .sidebar-footer {
+ padding: 8px 14px;
+ border-top: 1px solid var(--border);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ font-size: 10px;
+ color: var(--text-dim)
+ }
+
+ .sidebar-footer a {
+ color: var(--accent);
+ text-decoration: none
+ }
+
+ .sidebar-footer a:hover {
+ text-decoration: underline
+ }
+
+ .free-iran {
+ color: var(--success);
+ font-weight: 700
+ }
+
+ /* ===== CHAT HEADER ===== */
+ .chat-header {
+ display: flex;
+ align-items: center;
+ padding: 8px 14px;
+ background: var(--surface);
+ border-bottom: 1px solid var(--border);
+ min-height: 54px;
+ gap: 10px
+ }
+
+ .back-btn {
+ display: none;
+ width: 36px;
+ height: 36px;
+ border: none;
+ background: none;
+ color: var(--text);
+ font-size: 20px;
+ border-radius: 50%;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0
+ }
+
+ .back-btn:hover {
+ background: var(--hover)
+ }
+
+ .chat-header-info {
+ flex: 1;
+ min-width: 0
+ }
+
+ .chat-header-name {
+ font-size: 15px;
+ font-weight: 600;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis
+ }
+
+ .chat-header-sub {
+ font-size: 11px;
+ color: var(--text-dim)
+ }
+
+ .chat-header-actions {
+ display: flex;
+ gap: 4px;
+ align-items: center
+ }
+
+ .next-fetch-label {
+ font-size: 10px;
+ color: var(--text-dim);
+ padding: 0 2px
+ }
+
+ .next-fetch-info {
+ font-size: 11px;
+ color: var(--text-dim);
+ cursor: help;
+ line-height: 1
+ }
+
+ /* ===== MESSAGES ===== */
+ .messages {
+ flex: 1;
+ overflow-y: auto;
+ padding: 10px 14px;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ direction: ltr
+ }
+
+ .msg-date-sep {
+ text-align: center;
+ padding: 8px 0;
+ font-size: 12px;
+ color: var(--text-dim)
+ }
+
+ .msg-date-sep span {
+ background: rgba(0, 0, 0, .3);
+ padding: 3px 10px;
+ border-radius: 10px
+ }
+
+ .msg-gap-sep {
+ text-align: center;
+ padding: 6px 0;
+ font-size: 11px;
+ color: var(--error)
+ }
+
+ .msg-gap-sep span {
+ background: rgba(229, 57, 53, .12);
+ padding: 3px 10px;
+ border-radius: 10px;
+ border: 1px dashed rgba(229, 57, 53, .3)
+ }
+
+ .msg {
+ max-width: min(82%, 580px);
+ padding: 7px 10px 4px;
+ border-radius: 12px;
+ line-height: 1.7;
+ word-break: break-word;
+ white-space: pre-wrap;
+ font-size: inherit;
+ background: var(--msg-in);
+ border: 1px solid rgba(255, 255, 255, .07);
+ align-self: flex-start;
+ border-bottom-left-radius: 4px
+ }
+
+ .msg-meta {
+ display: flex;
+ justify-content: flex-end;
+ gap: 6px;
+ font-size: 10px;
+ color: var(--text-dim);
+ margin-top: 2px;
+ direction: ltr
+ }
+
+ .media-tag {
+ display: block;
+ padding: 2px 6px;
+ border-radius: 4px;
+ background: rgba(51, 144, 236, .15);
+ color: var(--accent);
+ font-size: 11px;
+ margin-bottom: 6px
+ }
+
+ /* ===== SEND PANEL ===== */
+ .send-panel {
+ display: none;
+ padding: 8px 14px;
+ background: var(--surface);
+ border-top: 1px solid var(--border);
+ gap: 8px;
+ align-items: flex-end
+ }
+
+ .send-panel.visible {
+ display: flex
+ }
+
+ .send-input {
+ flex: 1;
+ padding: 8px 14px;
+ border: none;
+ border-radius: 18px;
+ background: var(--bg);
+ color: var(--text);
+ font-size: 14px;
+ outline: none;
+ resize: none;
+ max-height: 120px;
+ min-height: 36px
+ }
+
+ .send-btn {
+ width: 40px;
+ height: 40px;
+ border: none;
+ border-radius: 50%;
+ background: var(--send-color);
+ color: #fff;
+ font-size: 18px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0
+ }
+
+ .send-btn:hover {
+ background: var(--accent-hover)
+ }
+
+ /* ===== PROGRESS ===== */
+ .progress-panel {
+ background: var(--surface);
+ border-top: 1px solid var(--border);
+ overflow: hidden;
+ font-size: 12px;
+ padding: 0 14px;
+ direction: ltr;
+ text-align: left;
+ color: var(--text-dim)
+ }
+
+ .progress-panel:empty {
+ display: none
+ }
+
+ .progress-item {
+ padding: 5px 0;
+ position: relative;
+ padding-right: 22px
+ }
+
+ .progress-close {
+ position: absolute;
+ right: 0;
+ top: 4px;
+ background: none;
+ border: none;
+ color: var(--text-dim);
+ font-size: 13px;
+ cursor: pointer;
+ line-height: 1;
+ padding: 0 2px
+ }
+
+ .progress-close:hover {
+ color: var(--text)
+ }
+
+ .progress-label {
+ font-size: 11px;
+ margin-bottom: 2px;
+ color: var(--text-dim)
+ }
+
+ .progress-bar {
+ width: 100%;
+ height: 3px;
+ background: var(--border);
+ border-radius: 2px;
+ overflow: hidden
+ }
+
+ .progress-fill {
+ height: 100%;
+ background: var(--accent);
+ transition: width .2s
+ }
+
+ @keyframes prog-pulse {
+
+ 0%,
+ 100% {
+ opacity: 1
+ }
+
+ 50% {
+ opacity: .4
+ }
+ }
+
+ @keyframes spin {
+ from {
+ transform: rotate(0deg)
+ }
+
+ to {
+ transform: rotate(360deg)
+ }
+ }
+
+ @keyframes badge-pulse {
+
+ 0%,
+ 100% {
+ box-shadow: 0 0 0 0 rgba(51, 144, 236, .4)
+ }
+
+ 50% {
+ box-shadow: 0 0 0 4px rgba(51, 144, 236, 0)
+ }
+ }
+
+ .refresh-has-new {
+ animation: badge-pulse 2s ease-in-out infinite;
+ color: var(--accent) !important
+ }
+
+ .msg-copy-btn {
+ background: none;
+ border: none;
+ color: var(--text-dim);
+ font-size: 14px;
+ cursor: pointer;
+ padding: 0 3px;
+ line-height: 1;
+ flex-shrink: 0;
+ opacity: .45;
+ transition: opacity .15s
+ }
+
+ .msg-copy-btn:hover {
+ opacity: 1
+ }
+
+ /* ===== SCROLL-TO-BOTTOM ===== */
+ .scroll-down-btn {
+ position: absolute;
+ bottom: 70px;
+ right: 16px;
+ width: 36px;
+ height: 36px;
+ border: none;
+ border-radius: 50%;
+ background: var(--surface2);
+ color: var(--text);
+ font-size: 18px;
+ display: none;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
+ z-index: 10;
+ cursor: pointer;
+ border: 1px solid var(--border)
+ }
+
+ .scroll-down-btn.visible {
+ display: flex
+ }
+
+ .scroll-down-btn:hover {
+ background: var(--hover)
+ }
+
+ .scroll-down-badge {
+ position: absolute;
+ top: -4px;
+ right: -4px;
+ background: var(--accent);
+ color: #fff;
+ font-size: 9px;
+ font-weight: 700;
+ min-width: 16px;
+ height: 16px;
+ border-radius: 8px;
+ display: none;
+ align-items: center;
+ justify-content: center;
+ padding: 0 3px
+ }
+
+ .scroll-down-badge.visible {
+ display: flex
+ }
+
+ /* ===== LOG ===== */
+ .log-toggle {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 3px 14px;
+ background: var(--bg2);
+ cursor: pointer;
+ user-select: none;
+ font-size: 10px;
+ color: var(--text-dim);
+ letter-spacing: .5px;
+ border-top: 1px solid var(--border)
+ }
+
+ .log-toggle:hover {
+ color: var(--text)
+ }
+
+ .log-panel {
+ height: 110px;
+ background: var(--bg2);
+ overflow-y: auto;
+ font-size: 11px;
+ font-family: monospace;
+ padding: 4px 14px;
+ direction: ltr;
+ text-align: left;
+ color: var(--text-dim)
+ }
+
+ .log-panel.hidden {
+ display: none;
+ height: 0
+ }
+
+ .log-line {
+ padding: 1px 0;
+ line-height: 1.3
+ }
+
+ .log-line.err {
+ color: #e53935
+ }
+
+ .log-line.ok {
+ color: #4fae4e
+ }
+
+ .log-line.warn {
+ color: #f97316
+ }
+
+ .log-line.prog {
+ color: #fbbf24
+ }
+
+ .log-line.inf {
+ color: #60a5fa
+ }
+
+ /* ===== EMPTY STATE ===== */
+ .empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ color: var(--text-dim);
+ gap: 14px;
+ text-align: center;
+ padding: 20px
+ }
+
+ .empty-state .big-icon {
+ font-size: 52px;
+ opacity: .25
+ }
+
+ .empty-state p {
+ font-size: 14px;
+ max-width: 240px
+ }
+
+ /* ===== MODALS ===== */
+ .modal-overlay {
+ display: none;
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, .65);
+ z-index: 100;
+ justify-content: center;
+ align-items: center
+ }
+
+ .modal-overlay.active {
+ display: flex
+ }
+
+ .modal {
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ padding: 20px;
+ width: 440px;
+ max-width: 95vw;
+ max-height: 90vh;
+ overflow-y: auto;
+ direction: rtl
+ }
+
+ html[dir=ltr] .modal {
+ direction: ltr
+ }
+
+ .modal h2 {
+ margin-bottom: 16px;
+ font-size: 17px;
+ font-weight: 600
+ }
+
+ .modal-actions {
+ display: flex;
+ gap: 8px;
+ justify-content: flex-end;
+ margin-top: 16px;
+ flex-wrap: wrap
+ }
+
+ /* ===== FORMS ===== */
+ .form-group {
+ margin-bottom: 12px
+ }
+
+ .form-group label {
+ display: block;
+ margin-bottom: 4px;
+ font-size: 12px;
+ color: var(--text-dim)
+ }
+
+ .form-group input,
+ .form-group textarea,
+ .form-group select {
+ width: 100%;
+ padding: 8px 12px;
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ background: var(--bg);
+ color: var(--text);
+ font-size: 13px;
+ direction: ltr;
+ text-align: left;
+ outline: none
+ }
+
+ .form-group input:focus,
+ .form-group textarea:focus,
+ .form-group select:focus {
+ border-color: var(--accent)
+ }
+
+ .form-group textarea {
+ min-height: 65px;
+ resize: vertical
+ }
+
+ .form-group .row {
+ display: flex;
+ gap: 8px;
+ align-items: center
+ }
+
+ .form-group .row input[type=checkbox] {
+ width: auto;
+ accent-color: var(--accent)
+ }
+
+ .form-group .row label {
+ margin: 0;
+ cursor: pointer;
+ font-size: 13px;
+ color: var(--text)
+ }
+
+ /* ===== BUTTONS ===== */
+ .btn {
+ padding: 7px 16px;
+ border: none;
+ border-radius: 8px;
+ font-size: 13px;
+ cursor: pointer;
+ transition: background .15s;
+ font-family: inherit
+ }
+
+ .btn-flat {
+ background: transparent;
+ color: var(--accent)
+ }
+
+ .btn-flat:hover {
+ background: var(--hover)
+ }
+
+ .btn-primary {
+ background: var(--accent);
+ color: #fff
+ }
+
+ .btn-primary:hover {
+ background: var(--accent-hover)
+ }
+
+ .btn-danger {
+ background: var(--error);
+ color: #fff
+ }
+
+ .btn-danger:hover {
+ background: #c62828
+ }
+
+ .btn-outline {
+ background: transparent;
+ border: 1px solid var(--border);
+ color: var(--text)
+ }
+
+ .btn-outline:hover {
+ background: var(--hover)
+ }
+
+ .btn-sm {
+ padding: 4px 10px;
+ font-size: 11px
+ }
+
+ /* ===== SETTINGS MODAL ===== */
+ .font-size-row {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 14px
+ }
+
+ .font-size-row label {
+ font-size: 12px;
+ color: var(--text-dim);
+ white-space: nowrap
+ }
+
+ .font-size-row input[type=range] {
+ flex: 1;
+ accent-color: var(--accent)
+ }
+
+ .font-size-val {
+ font-size: 12px;
+ color: var(--text);
+ min-width: 28px;
+ text-align: center;
+ background: var(--bg);
+ padding: 2px 6px;
+ border-radius: 4px;
+ border: 1px solid var(--border)
+ }
+
+ .lang-row {
+ display: flex;
+ gap: 8px;
+ margin-top: 4px
+ }
+
+ .lang-btn {
+ flex: 1;
+ padding: 8px;
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ background: var(--bg);
+ color: var(--text-dim);
+ font-size: 13px;
+ transition: all .15s
+ }
+
+ .lang-btn:hover {
+ background: var(--hover)
+ }
+
+ .lang-btn.active-lang {
+ border-color: var(--accent);
+ background: rgba(51, 144, 236, .12);
+ color: var(--accent);
+ font-weight: 600
+ }
+
+ /* ===== PROFILES MODAL ===== */
+ .profile-row {
+ display: flex;
+ flex-direction: column;
+ border-bottom: 1px solid var(--border)
+ }
+
+ .profile-row-main {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px;
+ cursor: pointer;
+ transition: background .1s
+ }
+
+ .profile-row-main:hover {
+ background: var(--hover)
+ }
+
+ .profile-row.active-profile .profile-row-main {
+ background: rgba(51, 144, 236, .08)
+ }
+
+ .profile-row-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: var(--accent);
+ color: #fff;
+ font-size: 16px;
+ font-weight: 700;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0
+ }
+
+ .profile-row.active-profile .profile-row-avatar {
+ background: var(--success)
+ }
+
+ .profile-row-info {
+ flex: 1;
+ min-width: 0
+ }
+
+ .profile-row-name {
+ font-size: 14px;
+ font-weight: 500;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis
+ }
+
+ .profile-row-domain {
+ font-size: 11px;
+ color: var(--text-dim)
+ }
+
+ .profile-row-btns {
+ display: flex;
+ gap: 4px;
+ flex-shrink: 0
+ }
+
+ .share-panel {
+ padding: 8px 10px;
+ background: var(--bg);
+ border-top: 1px solid var(--border)
+ }
+
+ .share-panel-inner {
+ display: flex;
+ gap: 6px;
+ align-items: center
+ }
+
+ .share-uri-input {
+ flex: 1;
+ padding: 6px 8px;
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ background: var(--surface);
+ color: var(--accent);
+ font-family: monospace;
+ font-size: 11px;
+ direction: ltr;
+ text-align: left;
+ outline: none
+ }
+
+ .active-badge {
+ display: inline-block;
+ font-size: 9px;
+ padding: 1px 6px;
+ border-radius: 8px;
+ background: var(--success);
+ color: #fff;
+ margin-left: 6px;
+ vertical-align: middle
+ }
+
+ html[dir=ltr] .active-badge {
+ margin-left: 0;
+ margin-right: 6px
+ }
+
+ .section-divider {
+ border: none;
+ border-top: 1px solid var(--border);
+ margin: 14px 0
+ }
+
+ .info-note {
+ background: rgba(51, 144, 236, .08);
+ border: 1px solid rgba(51, 144, 236, .2);
+ border-radius: 6px;
+ padding: 8px 12px;
+ font-size: 12px;
+ color: var(--text-dim);
+ margin-bottom: 10px;
+ line-height: 1.5
+ }
+
+ .tg-warning {
+ background: rgba(229, 57, 53, .1);
+ border: 1px solid rgba(229, 57, 53, .3);
+ border-radius: 6px;
+ padding: 8px 12px;
+ font-size: 11px;
+ color: #ef9a9a;
+ margin-bottom: 12px;
+ display: none
+ }
+
+ .tg-warning.visible {
+ display: block
+ }
+
+ .import-section {
+ margin-top: 14px
+ }
+
+ .import-row {
+ display: flex;
+ gap: 8px
+ }
+
+ .import-row input {
+ flex: 1;
+ padding: 7px 10px;
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ background: var(--bg);
+ color: var(--text);
+ font-size: 12px;
+ direction: ltr;
+ text-align: left;
+ outline: none
+ }
+
+ .import-row input:focus {
+ border-color: var(--accent)
+ }
+
+ /* ===== CHANNEL EDITOR IN PROFILE ===== */
+ .channel-editor-row {
+ display: flex;
+ gap: 6px;
+ align-items: center;
+ margin-bottom: 8px
+ }
+
+ .channel-editor-row input {
+ flex: 1;
+ padding: 7px 10px;
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ background: var(--bg);
+ color: var(--text);
+ font-size: 13px;
+ direction: ltr;
+ text-align: left;
+ outline: none
+ }
+
+ .channel-editor-row input:focus {
+ border-color: var(--accent)
+ }
+
+ .channel-list-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 6px 0;
+ border-bottom: 1px solid var(--border)
+ }
+
+ .channel-list-item:last-child {
+ border-bottom: none
+ }
+
+ .channel-list-item span {
+ font-size: 13px;
+ direction: ltr
+ }
+
+ /* ===== TOAST ===== */
+ #toast {
+ position: fixed;
+ bottom: 24px;
+ left: 50%;
+ transform: translateX(-50%) translateY(20px);
+ background: #333;
+ color: #fff;
+ padding: 8px 18px;
+ border-radius: 20px;
+ font-size: 13px;
+ opacity: 0;
+ transition: all .25s;
+ z-index: 999;
+ pointer-events: none;
+ white-space: nowrap
+ }
+
+ #toast.show {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0)
+ }
+
+ /* ===== MOBILE ===== */
+ @media(max-width:768px) {
+ .app {
+ position: relative;
+ overflow: hidden
+ }
+
+ .sidebar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: 100%;
+ z-index: 2;
+ transform: translateX(0);
+ transition: transform .25s ease
+ }
+
+ .chat-area {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 1;
+ transform: translateX(100%);
+ transition: transform .25s ease
+ }
+
+ .app.chat-open .sidebar {
+ transform: translateX(-100%)
+ }
+
+ .app.chat-open .chat-area {
+ transform: translateX(0)
+ }
+
+ .back-btn {
+ display: flex
+ }
+
+ .msg {
+ max-width: 90%
+ }
+
+ .modal {
+ width: 100%;
+ max-width: 100%;
+ max-height: 100%;
+ border-radius: 0;
+ border-left: none;
+ border-right: none;
+ border-bottom: none;
+ margin-top: auto;
+ align-self: flex-end
+ }
+
+ .modal-overlay.active {
+ align-items: flex-end
+ }
+ }
+
+ ::-webkit-scrollbar {
+ width: 4px
+ }
+
+ ::-webkit-scrollbar-track {
+ background: transparent
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: var(--border);
+ border-radius: 2px
+ }
+
+
-