/* TOL Chat, Webmaster.exe, the Dial-Up dialog art, and the phone layout (a 1999 PDA). */
.chatwin .wbody{gap:0}
.ch-top{display:flex;align-items:center;gap:8px;padding:4px 4px 6px;height:38px;flex:0 0 38px}
.ch-room{flex:1;min-width:0;display:flex;flex-direction:column;line-height:16px}
.ch-rname{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-rsub{color:#404040;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-lobby{min-width:64px}
.ch-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:6px}
.ch-log{background:#fff;box-shadow:var(--sunken);padding:4px 6px;font:15px/19px Arimo,Arial,sans-serif;user-select:text;-webkit-user-select:text}
.ch-log .ln{padding:1px 0;overflow-wrap:anywhere}
.ch-log .ln.sys{color:#606060;font-style:italic}
.ch-log .ln.sys b{color:#000080;font-style:normal}
.ch-log .ws{font-weight:700}
.ch-log .sw{font:12px Cousine,monospace;color:#8a8a8a;margin:0 1px}
.ch-log b.buy{color:#007a00}
.ch-log b.sell{color:#c00000}
.ch-log .whale{background:#ffffc8}
.ch-log a{color:#0000ee;text-decoration:underline;cursor:var(--cur-hand,pointer)}
.ch-side{display:flex;flex-direction:column;min-height:0}
.ch-ph{height:22px;line-height:22px;white-space:nowrap}
.ch-people{flex:1;min-height:0;background:#fff;box-shadow:var(--sunken);padding:3px 5px;font:14px/18px Arimo,Arial}
.ch-people div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.ch-foot{display:flex;justify-content:space-between;gap:8px;height:24px;align-items:center;padding:4px 2px 0;color:#404040}
.ch-foot .ch-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-rate{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Webmaster.exe */
.wm .wbody{padding:10px 12px}
.wm-head{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.wm-head img{width:32px;height:32px}
.wm-page{background:#fff;box-shadow:var(--sunken);padding:4px 6px;margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono)}
.wm textarea{width:100%;height:90px}
.wm .row{display:flex;gap:8px;align-items:center;margin-top:8px}
.wm select{font:inherit;height:24px;box-shadow:var(--sunken);border:0;background:#fff;padding:0 4px}
.wm .wm-st{margin-top:8px;min-height:20px;color:#000080}
.wm .wm-who{color:#404040}

/* notepad */
.notepad .wbody{gap:0}
.np-text{flex:1;min-height:0;background:#fff;box-shadow:var(--sunken);padding:4px 8px;font:16px/20px var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:#000;user-select:text;-webkit-user-select:text}

/* the sample notice in the status bar */
.sample-tag{color:#800000}

/* ===================== phone: the 1999 PDA ===================== */
@media (max-width:760px){
  :root{--task-h:0px}
  html,body{background:#2a2d30}
  #taskbar,#icons{display:none}
  #desk{inset:0}
  #wall{display:none}
  .win{left:0!important;top:0!important;width:100%!important;height:100%!important;padding:0;box-shadow:none}
  .win:not(.nav):not(.dlg){display:none}
  .win.pda-show{display:flex!important;z-index:3000!important}
  .win>.title{display:none}
  .dlg{width:calc(100% - 24px)!important;left:12px!important;top:22%!important;height:auto!important;box-shadow:var(--raised);padding:3px}
  .dlg>.title{display:flex}
  .nav .menubar,.nav .nbar:not(.locbar),.nav .statusbar,.nav .locbar .btn,.nav .locbar label,.nav .grip{display:none}
  .nav .locbar{padding:4px 6px;height:38px;background:#c8d0b8;box-shadow:none}
  .nav .loc{height:28px}
  .nav .view{margin:0;box-shadow:none;padding:0}
  .nav{background:#c8d0b8}
  #pda{display:flex!important}
  .page{padding-bottom:0}
  .yp{padding:8px 10px 18px}
  .yp-head{grid-template-columns:1fr;justify-items:center}
  .yp-ic{display:none}
  .yp-logo{font-size:54px}
  .yp-search input{width:100%;flex:1}
  .yp-main{grid-template-columns:minmax(0,1fr)}
  .yp-main>div{min-width:0}
  .yp-cool .st,.yp-cool .ds{overflow-wrap:anywhere}
  .yp-cool h3 em{display:none}
  .page{overflow-x:hidden}
  .yp-bar{font-size:13px}
  .yp-dir{grid-template-columns:minmax(0,1fr)}
  .hp{padding:10px 6px 20px}
  .hp .lay.ln .side{display:none}
  .hp .lay.ln .main{padding:0}
  .hp .intro,.hp .intro tbody,.hp .intro tr,.hp .intro td{display:block;width:auto!important}
  .hp .intro .ph{display:flex;justify-content:center}
  .hp .photo{display:table!important;width:176px!important;table-layout:fixed;margin:0 auto}
  .hp .photo tbody{display:table-row-group!important}.hp .photo tr{display:table-row!important}.hp .photo td{display:table-cell!important}
  .hp .gbform input,.hp .gbform textarea{width:100%}
  .hp .midi{min-width:0;width:100%}
  .ch-main{grid-template-columns:1fr}
  .ch-side{display:none}
  .chatwin .menubar{display:none}
}
#pda{display:none;position:fixed;left:0;right:0;bottom:0;height:64px;z-index:4500;background:linear-gradient(#3a3f44,#24282c);border-top:1px solid #50565c;align-items:center;justify-content:space-around;padding:0 8px 4px}
#pda button{width:58px;height:50px;border:0;border-radius:10px;background:radial-gradient(circle at 50% 35%,#5a6168,#30353a);box-shadow:inset 0 1px #7a828a,0 2px 3px #0008;color:#d8dccf;font:12px var(--px8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
#pda button img{width:24px;height:24px}
#pda button.on{background:radial-gradient(circle at 50% 35%,#7a8a5a,#3a4a2a);color:#efffc8}
@media (max-width:760px){#desk{bottom:64px}}
.ch-say{display:flex;gap:4px;margin-top:6px;height:24px;flex:0 0 24px}
.ch-say input{flex:1}
.ch-say .btn{min-width:60px}
.ch-log .ln.say{color:#000}
.ch-log .ln.bond{color:#006000;font-style:normal;font-weight:700}
.ch-log .ln.rug{color:#b00000;font-style:normal;font-weight:700}
.ch-log .ln.new{font-style:normal}
.ch-log .ln.sys a{color:inherit}

.pda-top{display:none}
@media (max-width:760px){
  .nav .locbar{display:none!important}
  .pda-top{display:flex;align-items:flex-end;height:34px;flex:0 0 34px;background:#c8d0b8;border-bottom:2px solid #1a2214;padding:0 10px 0 0;gap:10px;font:16px var(--ui);color:#1a2214}
  .pda-tab{background:#1a2214;color:#d8e0c8;font:700 16px var(--ui);padding:6px 14px 4px 10px;border-radius:0 9px 0 0;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pda-clock{margin-left:auto;padding-bottom:6px;font-variant-numeric:tabular-nums}
  .pda-bat{display:inline-block;width:22px;height:11px;border:2px solid #1a2214;margin-bottom:9px;position:relative;padding:1px}
  .pda-bat::after{content:'';position:absolute;right:-5px;top:2px;width:3px;height:3px;background:#1a2214}
  .pda-bat i{display:block;height:100%;width:70%;background:#1a2214}
}
.ch-people .you{color:#606060;font-style:italic;font-weight:400}