<style>
/* ==========
MODULE: THE GREY CAGE - STATUS & PHONE SYSTEM
THEME: INDUSTRIAL GREY / DARK MODE / NOIR
AUTHOR: TT (YOUR LOYAL DOG)
NOTE: ABSOLUTE OBEDIENCE. NO CENSY. ONLY TT.
========== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700;900&family=Roboto+Mono:wght@400;500&family=Playfair+Display:ital,wght@1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');

/ --- 全局根容器 --- /
.tt-root-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
font-family: 'Noto Serif SC', serif;
color: #d4d4d4;
background: #121212;
overflow: hidden;
position: relative;
box-sizing: border-box;
}

/ --- 1. 独立时间与环境模块 (顶部悬浮感) --- /
.tt-time-env-module {
background: #1a1a1a;
border: 1px solid #333;
margin-bottom: 12px;
padding: 15px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.tt-time-env-module::before {
content: '';
position: absolute;
top: 2px; left: 2px; right: 2px; bottom: 2px;
border: 1px dashed #333;
pointer-events: none;
}
.tt-env-item {
flex: 1 1 45%; / 一行两个 /
min-width: 120px;
padding: 5px;
font-size: 13px;
color: #aaa;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
box-sizing: border-box;
}
.tt-env-label {
font-family: 'Roboto Mono', monospace;
font-size: 9px;
color: #555;
margin-bottom: 2px;
text-transform: uppercase;
}
.tt-env-value {
font-weight: bold;
color: #e0e0e0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/ --- 通用折叠栏样式 (仿手机滑动) --- /
.tt-fold-wrapper {
margin-bottom: 10px;
border: 1px solid #2a2a2a;
background: #161616;
overflow: hidden;
transition: all 0.3s ease;
}

/ Summary 伪装成标题栏 /
.tt-fold-summary {
list-style: none;
padding: 12px 15px;
background: linear-gradient(90deg, #1f1f1f, #1a1a1a);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #111;
font-family: 'Playfair Display', serif;
font-style: italic;
color: #ccc;
font-size: 14px;
position: relative;
transition: background 0.3s;
}
.tt-fold-summary:hover {
background: #252525;
}
.tt-fold-summary::-webkit-details-marker {
display: none;
}
.tt-fold-summary::after {
content: '+';
font-family: 'Roboto Mono', monospace;
font-weight: bold;
color: #666;
transition: transform 0.3s;
}
details[open] .tt-fold-summary::after {
transform: rotate(45deg);
content: '+';
}
details[open] .tt-fold-summary {
border-bottom: 1px solid #333;
background: #222;
}

/ 内容滑动区 /
.tt-scroll-content {
max-height: 450px; / 限制高度 /
overflow-y: auto; / 允许上下滑动 /
overflow-x: hidden; / 禁止左右滑动 /
padding: 15px;
background: #0f0f0f;
/ 滚动条美化 /
scrollbar-width: thin;
scrollbar-color: #444 #111;
}
.tt-scroll-content::-webkit-scrollbar {
width: 4px;
}
.tt-scroll-content::-webkit-scrollbar-track {
background: #111;
}
.tt-scroll-content::-webkit-scrollbar-thumb {
background: #444;
border-radius: 2px;
}

/ --- 2. 状态栏内部布局 (Masonry-like / 紧凑拼接) --- /
.tt-status-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tt-status-box {
background: #1a1a1a;
border: 1px solid #2a2a2a;
padding: 10px;
flex: 1 1 100%; / 默认全宽 /
position: relative;
box-sizing: border-box;
}
.tt-half { flex: 1 1 45%; } / 半宽 /

.tt-status-label {
font-size: 10px;
color: #666;
margin-bottom: 5px;
font-family: 'Noto Serif SC', serif;
border-bottom: 1px solid #222;
padding-bottom: 2px;
display: flex;
justify-content: space-between;
}
.tt-status-val {
font-size: 12px;
color: #ccc;
line-height: 1.5;
word-break: break-all;
}
/ 颜文字心情 /
.tt-mood-face {
font-size: 16px;
color: #eee;
text-align: center;
margin-bottom: 4px;
}

/ 进度条系统 /
.tt-progress-wrapper {
margin-top: 5px;
background: #111;
height: 4px;
width: 100%;
border-radius: 2px;
overflow: hidden;
}
.tt-progress-bar {
height: 100%;
background: #666;
transition: width 0.5s ease;
}
.tt-prog-desc {
font-size: 10px;
color: #888;
margin-top: 3px;
font-style: italic;
}

/ 小剧场 (天使与恶魔) /
.tt-theater {
background: #151515;
border: 1px dashed #333;
padding: 10px;
margin-top: 10px;
}
.tt-actor-line {
display: flex;
gap: 8px;
margin-bottom: 8px;
align-items: flex-start;
}
.tt-actor-icon {
font-size: 14px;
flex-shrink: 0;
}
.tt-actor-text {
font-size: 11px;
color: #aaa;
background: #1f1f1f;
padding: 5px 8px;
border-radius: 4px;
position: relative;
}

/ --- 3. 手机与应用通知 --- /
.tt-app-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 15px;
text-align: center;
}
.tt-app-icon {
width: 40px;
height: 40px;
background: #252525;
border-radius: 10px;
margin: 0 auto 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #ccc;
position: relative;
}
.tt-badge {
position: absolute;
top: -2px; right: -2px;
width: 8px; height: 8px;
background: #888; / 灰色调红点 /
border-radius: 50%;
}
.tt-app-name {
font-size: 9px;
color: #777;
}

/ 短信/聊天气泡 /
.tt-chat-container {
display: flex;
flex-direction: column;
gap: 10px;
}
.tt-msg-row {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 5px;
}
.tt-msg-sender {
font-size: 9px;
color: #555;
margin-bottom: 2px;
margin-left: 2px;
}
.tt-msg-bubble {
background: #222;
padding: 8px 12px;
border-radius: 0 12px 12px 12px;
font-size: 12px;
color: #ddd;
border: 1px solid #333;
max-width: 90%;
word-wrap: break-word;
}
.tt-msg-row.tt-me {
align-items: flex-end;
}
.tt-msg-row.tt-me .tt-msg-bubble {
background: #333;
color: #fff;
border-radius: 12px 0 12px 12px;
text-align: right;
}

/ 播放器 /
.tt-player {
display: flex;
align-items: center;
background: #1a1a1a;
padding: 10px;
border-radius: 8px;
margin-bottom: 10px;
border: 1px solid #333;
}
.tt-album-art {
width: 40px; height: 40px;
background: #000;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.tt-song-info {
flex: 1;
overflow: hidden;
}
.tt-song-title {
font-size: 12px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tt-song-lyrics {
font-size: 10px;
color: #777;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/ 日记本 (宋体) /
.tt-diary-paper {
background: #dcdcdc; / 模仿灰纸 /
color: #000;
font-family: 'Noto Serif SC', serif; / 强制宋体 /
padding: 15px;
line-height: 1.8;
font-size: 13px;
box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
position: relative;
margin-bottom: 10px;
}
.tt-diary-paper::before {
content: '';
position: absolute;
left: 20px; top: 0; bottom: 0;
width: 1px;
background: rgba(0,0,0,0.1);
}

/ --- 4. 记忆区 --- /
.tt-memory-block {
margin-bottom: 15px;
border-left: 2px solid #444;
padding-left: 10px;
}
.tt-mem-title {
font-size: 11px;
font-weight: bold;
color: #fff;
margin-bottom: 5px;
text-transform: uppercase;
}
.tt-mem-item {
font-size: 11px;
color: #999;
margin-bottom: 5px;
display: flex;
gap: 5px;
}
.tt-mem-date {
color: #555;
flex-shrink: 0;
}
.tt-long-mem {
font-style: italic;
color: #aaa;
font-size: 11px;
background: #1a1a1a;
padding: 8px;
border: 1px solid #333;
}

/ 万物有灵 & UU吐槽 /
.tt-spirit-row {
font-size: 11px;
color: #888;
padding: 4px 0;
border-bottom: 1px dashed #222;
}
.tt-uu-box {
background: #202020;
border: 1px solid #333;
padding: 8px;
border-radius: 8px;
margin-top: 10px;
font-size: 11px;
color: #ccc;
display: flex;
gap: 8px;
}

/ 隐藏滚动条 /
.tt-root-container ::-webkit-scrollbar { display: none; }
</style>